2608e3dbd3
## Description - Remove the config objects from widget and config maps from the widget factory. - Introduce methods in widget development API to dynamically fetch this items. - freeze the widget configuration. #### PR fixes following issue(s) Fixes https://github.com/appsmithorg/appsmith/issues/26008 > if no issue exists, please create an issue and ask the maintainers about this first > > #### Media > A video or a GIF is preferred. when using Loom, don’t embed because it looks like it’s a GIF. instead, just link to the video > > #### Type of change > Please delete options that are not relevant. - Bug fix (non-breaking change which fixes an issue) - New feature (non-breaking change which adds functionality) - Breaking change (fix or feature that would cause existing functionality to not work as expected) - Chore (housekeeping or task changes that don't impact user perception) - This change requires a documentation update > > > ## Testing > #### How Has This Been Tested? > Please describe the tests that you ran to verify your changes. Also list any relevant details for your test configuration. > Delete anything that is not relevant - [x] Manual - [ ] Jest - [ ] Cypress > > #### Test Plan > Add Testsmith test cases links that relate to this PR > > #### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) > > > ## Checklist: #### Dev activity - [ ] My code follows the style guidelines of this project - [ ] I have performed a self-review of my own code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [ ] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag #### QA activity: - [ ] [Speedbreak features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-) have been covered - [x] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-) - [ ] Test plan has been peer reviewed by project stakeholders and other QA members - [x] Manually tested functionality on DP - [ ] We had an implementation alignment call with stakeholders post QA Round 2 - [ ] Cypress test cases have been added and approved by SDET/manual QA - [ ] Added `Test Plan Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed
3009 lines
86 KiB
TypeScript
3009 lines
86 KiB
TypeScript
import type { DSLWidget } from "WidgetProvider/constants";
|
|
import {
|
|
migratePhoneInputWidgetAllowFormatting,
|
|
migratePhoneInputWidgetDefaultDialCode,
|
|
} from "./PhoneInputWidgetMigrations";
|
|
|
|
const oldDSL = {
|
|
widgetName: "MainContainer",
|
|
backgroundColor: "none",
|
|
rightColumn: 1296,
|
|
snapColumns: 64,
|
|
detachFromLayout: true,
|
|
widgetId: "0",
|
|
topRow: 0,
|
|
bottomRow: 1130,
|
|
containerStyle: "none",
|
|
snapRows: 125,
|
|
parentRowSpace: 1,
|
|
type: "CANVAS_WIDGET",
|
|
canExtend: true,
|
|
version: 52,
|
|
minHeight: 890,
|
|
parentColumnSpace: 1,
|
|
dynamicBindingPathList: [],
|
|
leftColumn: 0,
|
|
children: [
|
|
{
|
|
widgetName: "Table1",
|
|
defaultPageSize: 0,
|
|
columnOrder: ["step", "task", "status", "action", "customColumn1"],
|
|
isVisibleDownload: true,
|
|
displayName: "Table",
|
|
iconSVG: "/static/media/icon.db8a9cbd.svg",
|
|
topRow: 2,
|
|
bottomRow: 30,
|
|
isSortable: true,
|
|
parentRowSpace: 10,
|
|
type: "TABLE_WIDGET",
|
|
defaultSelectedRow: "0",
|
|
hideCard: false,
|
|
animateLoading: true,
|
|
parentColumnSpace: 20.0625,
|
|
dynamicTriggerPathList: [],
|
|
dynamicBindingPathList: [
|
|
{
|
|
key: "primaryColumns.step.computedValue",
|
|
},
|
|
{
|
|
key: "primaryColumns.task.computedValue",
|
|
},
|
|
{
|
|
key: "primaryColumns.status.computedValue",
|
|
},
|
|
{
|
|
key: "primaryColumns.action.computedValue",
|
|
},
|
|
],
|
|
leftColumn: 11,
|
|
primaryColumns: {
|
|
step: {
|
|
index: 0,
|
|
width: 150,
|
|
id: "step",
|
|
horizontalAlignment: "LEFT",
|
|
verticalAlignment: "CENTER",
|
|
columnType: "text",
|
|
textSize: "PARAGRAPH",
|
|
enableFilter: true,
|
|
enableSort: true,
|
|
isVisible: true,
|
|
isCellVisible: true,
|
|
isDerived: false,
|
|
label: "step",
|
|
computedValue:
|
|
"{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.step))}}",
|
|
buttonColor: "#03B365",
|
|
menuColor: "#03B365",
|
|
labelColor: "#FFFFFF",
|
|
},
|
|
task: {
|
|
index: 1,
|
|
width: 150,
|
|
id: "task",
|
|
horizontalAlignment: "LEFT",
|
|
verticalAlignment: "CENTER",
|
|
columnType: "text",
|
|
textSize: "PARAGRAPH",
|
|
enableFilter: true,
|
|
enableSort: true,
|
|
isVisible: true,
|
|
isCellVisible: true,
|
|
isDerived: false,
|
|
label: "task",
|
|
computedValue:
|
|
"{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.task))}}",
|
|
buttonColor: "#03B365",
|
|
menuColor: "#03B365",
|
|
labelColor: "#FFFFFF",
|
|
},
|
|
status: {
|
|
index: 2,
|
|
width: 150,
|
|
id: "status",
|
|
horizontalAlignment: "LEFT",
|
|
verticalAlignment: "CENTER",
|
|
columnType: "text",
|
|
textSize: "PARAGRAPH",
|
|
enableFilter: true,
|
|
enableSort: true,
|
|
isVisible: true,
|
|
isCellVisible: true,
|
|
isDerived: false,
|
|
label: "status",
|
|
computedValue:
|
|
"{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.status))}}",
|
|
buttonColor: "#03B365",
|
|
menuColor: "#03B365",
|
|
labelColor: "#FFFFFF",
|
|
},
|
|
action: {
|
|
index: 3,
|
|
width: 150,
|
|
id: "action",
|
|
horizontalAlignment: "LEFT",
|
|
verticalAlignment: "CENTER",
|
|
columnType: "button",
|
|
textSize: "PARAGRAPH",
|
|
enableFilter: true,
|
|
enableSort: true,
|
|
isVisible: true,
|
|
isCellVisible: true,
|
|
isDisabled: false,
|
|
isDerived: false,
|
|
label: "action",
|
|
onClick:
|
|
"{{currentRow.step === '#1' ? showAlert('Done', 'success') : currentRow.step === '#2' ? navigateTo('https://docs.appsmith.com/core-concepts/connecting-to-data-sources/querying-a-database',undefined,'NEW_WINDOW') : navigateTo('https://docs.appsmith.com/core-concepts/displaying-data-read/display-data-tables',undefined,'NEW_WINDOW')}}",
|
|
computedValue:
|
|
"{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.action))}}",
|
|
buttonColor: "#03B365",
|
|
menuColor: "#03B365",
|
|
labelColor: "#FFFFFF",
|
|
},
|
|
customColumn1: {
|
|
index: 4,
|
|
width: 150,
|
|
id: "customColumn1",
|
|
columnType: "text",
|
|
enableFilter: true,
|
|
enableSort: true,
|
|
isVisible: true,
|
|
isDisabled: false,
|
|
isCellVisible: true,
|
|
isDerived: true,
|
|
label: "test",
|
|
computedValue: "",
|
|
buttonStyle: "rgb(3, 179, 101)",
|
|
buttonLabelColor: "#FFFFFF",
|
|
buttonColor: "#03B365",
|
|
menuColor: "#03B365",
|
|
labelColor: "#FFFFFF",
|
|
},
|
|
},
|
|
delimiter: ",",
|
|
key: "tezu035xfn",
|
|
derivedColumns: {
|
|
customColumn1: {
|
|
index: 4,
|
|
width: 150,
|
|
id: "customColumn1",
|
|
columnType: "text",
|
|
enableFilter: true,
|
|
enableSort: true,
|
|
isVisible: true,
|
|
isDisabled: false,
|
|
isCellVisible: true,
|
|
isDerived: true,
|
|
label: "test",
|
|
computedValue: "",
|
|
buttonStyle: "rgb(3, 179, 101)",
|
|
buttonLabelColor: "#FFFFFF",
|
|
buttonColor: "#03B365",
|
|
menuColor: "#03B365",
|
|
labelColor: "#FFFFFF",
|
|
},
|
|
},
|
|
rightColumn: 45,
|
|
textSize: "PARAGRAPH",
|
|
widgetId: "l7p1322ix5",
|
|
isVisibleFilters: true,
|
|
tableData: [
|
|
{
|
|
step: "#1",
|
|
task: "Drop a table",
|
|
status: "✅",
|
|
action: "",
|
|
},
|
|
{
|
|
step: "#2",
|
|
task: "Create a query fetch_users with the Mock DB",
|
|
status: "--",
|
|
action: "",
|
|
},
|
|
{
|
|
step: "#3",
|
|
task: "Bind the query using => fetch_users.data",
|
|
status: "--",
|
|
action: "",
|
|
},
|
|
],
|
|
isVisible: true,
|
|
label: "Data",
|
|
searchKey: "",
|
|
enableClientSideSearch: true,
|
|
version: 3,
|
|
totalRecordsCount: 0,
|
|
parentId: "0",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
horizontalAlignment: "LEFT",
|
|
isVisibleSearch: true,
|
|
isVisiblePagination: true,
|
|
verticalAlignment: "CENTER",
|
|
columnSizeMap: {
|
|
task: 245,
|
|
step: 62,
|
|
status: 75,
|
|
},
|
|
multiRowSelection: true,
|
|
},
|
|
{
|
|
widgetName: "Input1",
|
|
displayName: "Input",
|
|
iconSVG: "/static/media/icon.9f505595.svg",
|
|
topRow: 33,
|
|
bottomRow: 37,
|
|
parentRowSpace: 10,
|
|
autoFocus: false,
|
|
type: "INPUT_WIDGET_V2",
|
|
hideCard: false,
|
|
animateLoading: true,
|
|
parentColumnSpace: 20.0625,
|
|
resetOnSubmit: true,
|
|
leftColumn: 11,
|
|
labelStyle: "",
|
|
inputType: "TEXT",
|
|
isDisabled: false,
|
|
key: "tj11un6vmd",
|
|
isRequired: false,
|
|
rightColumn: 31,
|
|
widgetId: "whay9rh6bp",
|
|
isVisible: true,
|
|
label: "",
|
|
version: 2,
|
|
parentId: "0",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
iconAlign: "left",
|
|
defaultText: "",
|
|
},
|
|
{
|
|
widgetName: "CurrencyInput1",
|
|
displayName: "Currency Input",
|
|
iconSVG: "/static/media/icon.01a1e03d.svg",
|
|
topRow: 44,
|
|
bottomRow: 48,
|
|
parentRowSpace: 10,
|
|
autoFocus: false,
|
|
type: "CURRENCY_INPUT_WIDGET",
|
|
hideCard: false,
|
|
animateLoading: true,
|
|
parentColumnSpace: 20.0625,
|
|
dynamicTriggerPathList: [],
|
|
resetOnSubmit: true,
|
|
leftColumn: 11,
|
|
dynamicBindingPathList: [],
|
|
labelStyle: "",
|
|
isDisabled: false,
|
|
key: "4pdqazset5",
|
|
isRequired: false,
|
|
rightColumn: 31,
|
|
widgetId: "0i6is5knem",
|
|
isVisible: true,
|
|
label: "",
|
|
allowCurrencyChange: false,
|
|
version: 1,
|
|
parentId: "0",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
decimals: 0,
|
|
iconAlign: "left",
|
|
defaultText: "",
|
|
currencyCode: "USD",
|
|
},
|
|
{
|
|
widgetName: "PhoneInput1",
|
|
dialCode: "+1",
|
|
displayName: "Phone Input",
|
|
iconSVG: "/static/media/icon.ec4f5c23.svg",
|
|
topRow: 54,
|
|
bottomRow: 58,
|
|
parentRowSpace: 10,
|
|
autoFocus: false,
|
|
type: "PHONE_INPUT_WIDGET",
|
|
hideCard: false,
|
|
animateLoading: true,
|
|
parentColumnSpace: 20.0625,
|
|
dynamicTriggerPathList: [],
|
|
resetOnSubmit: true,
|
|
leftColumn: 11,
|
|
dynamicBindingPathList: [],
|
|
countryCode: "US",
|
|
labelStyle: "",
|
|
isDisabled: false,
|
|
key: "hygs5twb8a",
|
|
isRequired: false,
|
|
rightColumn: 31,
|
|
widgetId: "2hdejhkfe2",
|
|
allowDialCodeChange: false,
|
|
isVisible: true,
|
|
label: "",
|
|
version: 1,
|
|
parentId: "0",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
iconAlign: "left",
|
|
defaultText: "",
|
|
},
|
|
{
|
|
isVisible: true,
|
|
backgroundColor: "#FFFFFF",
|
|
widgetName: "Container1",
|
|
containerStyle: "card",
|
|
borderColor: "transparent",
|
|
borderWidth: "0",
|
|
borderRadius: "0",
|
|
boxShadow: "NONE",
|
|
animateLoading: true,
|
|
children: [
|
|
{
|
|
isVisible: true,
|
|
widgetName: "Canvas1",
|
|
version: 1,
|
|
detachFromLayout: true,
|
|
type: "CANVAS_WIDGET",
|
|
hideCard: true,
|
|
displayName: "Canvas",
|
|
key: "upcnljouz6",
|
|
containerStyle: "none",
|
|
canExtend: false,
|
|
children: [
|
|
{
|
|
isVisible: true,
|
|
isDisabled: false,
|
|
datePickerType: "DATE_PICKER",
|
|
label: "",
|
|
dateFormat: "YYYY-MM-DD HH:mm",
|
|
widgetName: "DatePicker1",
|
|
defaultDate: "2022-02-02T12:35:06.838Z",
|
|
minDate: "1920-12-31T18:30:00.000Z",
|
|
maxDate: "2121-12-31T18:29:00.000Z",
|
|
version: 2,
|
|
isRequired: false,
|
|
closeOnSelection: true,
|
|
shortcuts: false,
|
|
firstDayOfWeek: 0,
|
|
timePrecision: "minute",
|
|
animateLoading: true,
|
|
type: "DATE_PICKER_WIDGET2",
|
|
hideCard: false,
|
|
displayName: "DatePicker",
|
|
key: "ot1g8a7wsy",
|
|
iconSVG: "/static/media/icon.300e5ab8.svg",
|
|
widgetId: "b40vzteeen",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
parentColumnSpace: 7.2109375,
|
|
parentRowSpace: 10,
|
|
leftColumn: 3,
|
|
rightColumn: 41,
|
|
topRow: 1,
|
|
bottomRow: 5,
|
|
parentId: "onbmx309sa",
|
|
},
|
|
{
|
|
isVisible: true,
|
|
backgroundColor: "#FFFFFF",
|
|
widgetName: "Container2",
|
|
containerStyle: "card",
|
|
borderColor: "transparent",
|
|
borderWidth: "0",
|
|
borderRadius: "0",
|
|
boxShadow: "NONE",
|
|
animateLoading: true,
|
|
children: [
|
|
{
|
|
isVisible: true,
|
|
widgetName: "Canvas2",
|
|
version: 1,
|
|
detachFromLayout: true,
|
|
type: "CANVAS_WIDGET",
|
|
hideCard: true,
|
|
displayName: "Canvas",
|
|
key: "upcnljouz6",
|
|
containerStyle: "none",
|
|
canExtend: false,
|
|
children: [
|
|
{
|
|
isVisible: true,
|
|
animateLoading: true,
|
|
text: "Submit",
|
|
buttonColor: "#03B365",
|
|
buttonVariant: "PRIMARY",
|
|
placement: "CENTER",
|
|
widgetName: "Button1",
|
|
isDisabled: false,
|
|
isDefaultClickDisabled: true,
|
|
recaptchaType: "V3",
|
|
version: 1,
|
|
type: "BUTTON_WIDGET",
|
|
hideCard: false,
|
|
displayName: "Button",
|
|
key: "61pqdckhct",
|
|
iconSVG: "/static/media/icon.cca02633.svg",
|
|
widgetId: "viyg9naglg",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
parentColumnSpace: 4.9830322265625,
|
|
parentRowSpace: 10,
|
|
leftColumn: 4,
|
|
rightColumn: 20,
|
|
topRow: 3,
|
|
bottomRow: 7,
|
|
parentId: "847huqpwdl",
|
|
},
|
|
],
|
|
minHeight: 400,
|
|
widgetId: "847huqpwdl",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
parentColumnSpace: 1,
|
|
parentRowSpace: 1,
|
|
leftColumn: 0,
|
|
rightColumn: 173.0625,
|
|
topRow: 0,
|
|
bottomRow: 400,
|
|
parentId: "p1czagf2h9",
|
|
},
|
|
],
|
|
version: 1,
|
|
type: "CONTAINER_WIDGET",
|
|
hideCard: false,
|
|
displayName: "Container",
|
|
key: "parnsbxrsh",
|
|
iconSVG: "/static/media/icon.1977dca3.svg",
|
|
isCanvas: true,
|
|
widgetId: "p1czagf2h9",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
parentColumnSpace: 7.2109375,
|
|
parentRowSpace: 10,
|
|
leftColumn: 4,
|
|
rightColumn: 51,
|
|
topRow: 8,
|
|
bottomRow: 48,
|
|
parentId: "onbmx309sa",
|
|
},
|
|
],
|
|
minHeight: 400,
|
|
widgetId: "onbmx309sa",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
parentColumnSpace: 1,
|
|
parentRowSpace: 1,
|
|
leftColumn: 0,
|
|
rightColumn: 481.5,
|
|
topRow: 0,
|
|
bottomRow: 500,
|
|
parentId: "6v4urdv6p2",
|
|
},
|
|
],
|
|
version: 1,
|
|
type: "CONTAINER_WIDGET",
|
|
hideCard: false,
|
|
displayName: "Container",
|
|
key: "parnsbxrsh",
|
|
iconSVG: "/static/media/icon.1977dca3.svg",
|
|
isCanvas: true,
|
|
widgetId: "6v4urdv6p2",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
parentColumnSpace: 20.0625,
|
|
parentRowSpace: 10,
|
|
leftColumn: 12,
|
|
rightColumn: 36,
|
|
topRow: 61,
|
|
bottomRow: 111,
|
|
parentId: "0",
|
|
},
|
|
],
|
|
};
|
|
|
|
const newDSL = {
|
|
widgetName: "MainContainer",
|
|
backgroundColor: "none",
|
|
rightColumn: 1296,
|
|
snapColumns: 64,
|
|
detachFromLayout: true,
|
|
widgetId: "0",
|
|
topRow: 0,
|
|
bottomRow: 1130,
|
|
containerStyle: "none",
|
|
snapRows: 125,
|
|
parentRowSpace: 1,
|
|
type: "CANVAS_WIDGET",
|
|
canExtend: true,
|
|
version: 52,
|
|
minHeight: 890,
|
|
parentColumnSpace: 1,
|
|
dynamicBindingPathList: [],
|
|
leftColumn: 0,
|
|
children: [
|
|
{
|
|
widgetName: "Table1",
|
|
defaultPageSize: 0,
|
|
columnOrder: ["step", "task", "status", "action", "customColumn1"],
|
|
isVisibleDownload: true,
|
|
displayName: "Table",
|
|
iconSVG: "/static/media/icon.db8a9cbd.svg",
|
|
topRow: 2,
|
|
bottomRow: 30,
|
|
isSortable: true,
|
|
parentRowSpace: 10,
|
|
type: "TABLE_WIDGET",
|
|
defaultSelectedRow: "0",
|
|
hideCard: false,
|
|
animateLoading: true,
|
|
parentColumnSpace: 20.0625,
|
|
dynamicTriggerPathList: [],
|
|
dynamicBindingPathList: [
|
|
{
|
|
key: "primaryColumns.step.computedValue",
|
|
},
|
|
{
|
|
key: "primaryColumns.task.computedValue",
|
|
},
|
|
{
|
|
key: "primaryColumns.status.computedValue",
|
|
},
|
|
{
|
|
key: "primaryColumns.action.computedValue",
|
|
},
|
|
],
|
|
leftColumn: 11,
|
|
primaryColumns: {
|
|
step: {
|
|
index: 0,
|
|
width: 150,
|
|
id: "step",
|
|
horizontalAlignment: "LEFT",
|
|
verticalAlignment: "CENTER",
|
|
columnType: "text",
|
|
textSize: "PARAGRAPH",
|
|
enableFilter: true,
|
|
enableSort: true,
|
|
isVisible: true,
|
|
isCellVisible: true,
|
|
isDerived: false,
|
|
label: "step",
|
|
computedValue:
|
|
"{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.step))}}",
|
|
buttonColor: "#03B365",
|
|
menuColor: "#03B365",
|
|
labelColor: "#FFFFFF",
|
|
},
|
|
task: {
|
|
index: 1,
|
|
width: 150,
|
|
id: "task",
|
|
horizontalAlignment: "LEFT",
|
|
verticalAlignment: "CENTER",
|
|
columnType: "text",
|
|
textSize: "PARAGRAPH",
|
|
enableFilter: true,
|
|
enableSort: true,
|
|
isVisible: true,
|
|
isCellVisible: true,
|
|
isDerived: false,
|
|
label: "task",
|
|
computedValue:
|
|
"{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.task))}}",
|
|
buttonColor: "#03B365",
|
|
menuColor: "#03B365",
|
|
labelColor: "#FFFFFF",
|
|
},
|
|
status: {
|
|
index: 2,
|
|
width: 150,
|
|
id: "status",
|
|
horizontalAlignment: "LEFT",
|
|
verticalAlignment: "CENTER",
|
|
columnType: "text",
|
|
textSize: "PARAGRAPH",
|
|
enableFilter: true,
|
|
enableSort: true,
|
|
isVisible: true,
|
|
isCellVisible: true,
|
|
isDerived: false,
|
|
label: "status",
|
|
computedValue:
|
|
"{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.status))}}",
|
|
buttonColor: "#03B365",
|
|
menuColor: "#03B365",
|
|
labelColor: "#FFFFFF",
|
|
},
|
|
action: {
|
|
index: 3,
|
|
width: 150,
|
|
id: "action",
|
|
horizontalAlignment: "LEFT",
|
|
verticalAlignment: "CENTER",
|
|
columnType: "button",
|
|
textSize: "PARAGRAPH",
|
|
enableFilter: true,
|
|
enableSort: true,
|
|
isVisible: true,
|
|
isCellVisible: true,
|
|
isDisabled: false,
|
|
isDerived: false,
|
|
label: "action",
|
|
onClick:
|
|
"{{currentRow.step === '#1' ? showAlert('Done', 'success') : currentRow.step === '#2' ? navigateTo('https://docs.appsmith.com/core-concepts/connecting-to-data-sources/querying-a-database',undefined,'NEW_WINDOW') : navigateTo('https://docs.appsmith.com/core-concepts/displaying-data-read/display-data-tables',undefined,'NEW_WINDOW')}}",
|
|
computedValue:
|
|
"{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.action))}}",
|
|
buttonColor: "#03B365",
|
|
menuColor: "#03B365",
|
|
labelColor: "#FFFFFF",
|
|
},
|
|
customColumn1: {
|
|
index: 4,
|
|
width: 150,
|
|
id: "customColumn1",
|
|
columnType: "text",
|
|
enableFilter: true,
|
|
enableSort: true,
|
|
isVisible: true,
|
|
isDisabled: false,
|
|
isCellVisible: true,
|
|
isDerived: true,
|
|
label: "test",
|
|
computedValue: "",
|
|
buttonStyle: "rgb(3, 179, 101)",
|
|
buttonLabelColor: "#FFFFFF",
|
|
buttonColor: "#03B365",
|
|
menuColor: "#03B365",
|
|
labelColor: "#FFFFFF",
|
|
},
|
|
},
|
|
delimiter: ",",
|
|
key: "tezu035xfn",
|
|
derivedColumns: {
|
|
customColumn1: {
|
|
index: 4,
|
|
width: 150,
|
|
id: "customColumn1",
|
|
columnType: "text",
|
|
enableFilter: true,
|
|
enableSort: true,
|
|
isVisible: true,
|
|
isDisabled: false,
|
|
isCellVisible: true,
|
|
isDerived: true,
|
|
label: "test",
|
|
computedValue: "",
|
|
buttonStyle: "rgb(3, 179, 101)",
|
|
buttonLabelColor: "#FFFFFF",
|
|
buttonColor: "#03B365",
|
|
menuColor: "#03B365",
|
|
labelColor: "#FFFFFF",
|
|
},
|
|
},
|
|
rightColumn: 45,
|
|
textSize: "PARAGRAPH",
|
|
widgetId: "l7p1322ix5",
|
|
isVisibleFilters: true,
|
|
tableData: [
|
|
{
|
|
step: "#1",
|
|
task: "Drop a table",
|
|
status: "✅",
|
|
action: "",
|
|
},
|
|
{
|
|
step: "#2",
|
|
task: "Create a query fetch_users with the Mock DB",
|
|
status: "--",
|
|
action: "",
|
|
},
|
|
{
|
|
step: "#3",
|
|
task: "Bind the query using => fetch_users.data",
|
|
status: "--",
|
|
action: "",
|
|
},
|
|
],
|
|
isVisible: true,
|
|
label: "Data",
|
|
searchKey: "",
|
|
enableClientSideSearch: true,
|
|
version: 3,
|
|
totalRecordsCount: 0,
|
|
parentId: "0",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
horizontalAlignment: "LEFT",
|
|
isVisibleSearch: true,
|
|
isVisiblePagination: true,
|
|
verticalAlignment: "CENTER",
|
|
columnSizeMap: {
|
|
task: 245,
|
|
step: 62,
|
|
status: 75,
|
|
},
|
|
multiRowSelection: true,
|
|
},
|
|
{
|
|
widgetName: "Input1",
|
|
displayName: "Input",
|
|
iconSVG: "/static/media/icon.9f505595.svg",
|
|
topRow: 33,
|
|
bottomRow: 37,
|
|
parentRowSpace: 10,
|
|
autoFocus: false,
|
|
type: "INPUT_WIDGET_V2",
|
|
hideCard: false,
|
|
animateLoading: true,
|
|
parentColumnSpace: 20.0625,
|
|
resetOnSubmit: true,
|
|
leftColumn: 11,
|
|
labelStyle: "",
|
|
inputType: "TEXT",
|
|
isDisabled: false,
|
|
key: "tj11un6vmd",
|
|
isRequired: false,
|
|
rightColumn: 31,
|
|
widgetId: "whay9rh6bp",
|
|
isVisible: true,
|
|
label: "",
|
|
version: 2,
|
|
parentId: "0",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
iconAlign: "left",
|
|
defaultText: "",
|
|
},
|
|
{
|
|
widgetName: "CurrencyInput1",
|
|
displayName: "Currency Input",
|
|
iconSVG: "/static/media/icon.01a1e03d.svg",
|
|
topRow: 44,
|
|
bottomRow: 48,
|
|
parentRowSpace: 10,
|
|
autoFocus: false,
|
|
type: "CURRENCY_INPUT_WIDGET",
|
|
hideCard: false,
|
|
animateLoading: true,
|
|
parentColumnSpace: 20.0625,
|
|
dynamicTriggerPathList: [],
|
|
resetOnSubmit: true,
|
|
leftColumn: 11,
|
|
dynamicBindingPathList: [],
|
|
labelStyle: "",
|
|
isDisabled: false,
|
|
key: "4pdqazset5",
|
|
isRequired: false,
|
|
rightColumn: 31,
|
|
widgetId: "0i6is5knem",
|
|
isVisible: true,
|
|
label: "",
|
|
allowCurrencyChange: false,
|
|
version: 1,
|
|
parentId: "0",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
decimals: 0,
|
|
iconAlign: "left",
|
|
defaultText: "",
|
|
currencyCode: "USD",
|
|
},
|
|
{
|
|
widgetName: "PhoneInput1",
|
|
dialCode: "+1",
|
|
displayName: "Phone Input",
|
|
iconSVG: "/static/media/icon.ec4f5c23.svg",
|
|
topRow: 54,
|
|
bottomRow: 58,
|
|
parentRowSpace: 10,
|
|
autoFocus: false,
|
|
type: "PHONE_INPUT_WIDGET",
|
|
hideCard: false,
|
|
animateLoading: true,
|
|
parentColumnSpace: 20.0625,
|
|
dynamicTriggerPathList: [],
|
|
resetOnSubmit: true,
|
|
leftColumn: 11,
|
|
dynamicBindingPathList: [],
|
|
countryCode: "US",
|
|
labelStyle: "",
|
|
isDisabled: false,
|
|
key: "hygs5twb8a",
|
|
isRequired: false,
|
|
rightColumn: 31,
|
|
widgetId: "2hdejhkfe2",
|
|
allowDialCodeChange: false,
|
|
isVisible: true,
|
|
label: "",
|
|
version: 1,
|
|
parentId: "0",
|
|
allowFormatting: true,
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
iconAlign: "left",
|
|
defaultText: "",
|
|
},
|
|
{
|
|
isVisible: true,
|
|
backgroundColor: "#FFFFFF",
|
|
widgetName: "Container1",
|
|
containerStyle: "card",
|
|
borderColor: "transparent",
|
|
borderWidth: "0",
|
|
borderRadius: "0",
|
|
boxShadow: "NONE",
|
|
animateLoading: true,
|
|
children: [
|
|
{
|
|
isVisible: true,
|
|
widgetName: "Canvas1",
|
|
version: 1,
|
|
detachFromLayout: true,
|
|
type: "CANVAS_WIDGET",
|
|
hideCard: true,
|
|
displayName: "Canvas",
|
|
key: "upcnljouz6",
|
|
containerStyle: "none",
|
|
canExtend: false,
|
|
children: [
|
|
{
|
|
isVisible: true,
|
|
isDisabled: false,
|
|
datePickerType: "DATE_PICKER",
|
|
label: "",
|
|
dateFormat: "YYYY-MM-DD HH:mm",
|
|
widgetName: "DatePicker1",
|
|
defaultDate: "2022-02-02T12:35:06.838Z",
|
|
minDate: "1920-12-31T18:30:00.000Z",
|
|
maxDate: "2121-12-31T18:29:00.000Z",
|
|
version: 2,
|
|
isRequired: false,
|
|
closeOnSelection: true,
|
|
shortcuts: false,
|
|
firstDayOfWeek: 0,
|
|
timePrecision: "minute",
|
|
animateLoading: true,
|
|
type: "DATE_PICKER_WIDGET2",
|
|
hideCard: false,
|
|
displayName: "DatePicker",
|
|
key: "ot1g8a7wsy",
|
|
iconSVG: "/static/media/icon.300e5ab8.svg",
|
|
widgetId: "b40vzteeen",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
parentColumnSpace: 7.2109375,
|
|
parentRowSpace: 10,
|
|
leftColumn: 3,
|
|
rightColumn: 41,
|
|
topRow: 1,
|
|
bottomRow: 5,
|
|
parentId: "onbmx309sa",
|
|
},
|
|
{
|
|
isVisible: true,
|
|
backgroundColor: "#FFFFFF",
|
|
widgetName: "Container2",
|
|
containerStyle: "card",
|
|
borderColor: "transparent",
|
|
borderWidth: "0",
|
|
borderRadius: "0",
|
|
boxShadow: "NONE",
|
|
animateLoading: true,
|
|
children: [
|
|
{
|
|
isVisible: true,
|
|
widgetName: "Canvas2",
|
|
version: 1,
|
|
detachFromLayout: true,
|
|
type: "CANVAS_WIDGET",
|
|
hideCard: true,
|
|
displayName: "Canvas",
|
|
key: "upcnljouz6",
|
|
containerStyle: "none",
|
|
canExtend: false,
|
|
children: [
|
|
{
|
|
isVisible: true,
|
|
animateLoading: true,
|
|
text: "Submit",
|
|
buttonColor: "#03B365",
|
|
buttonVariant: "PRIMARY",
|
|
placement: "CENTER",
|
|
widgetName: "Button1",
|
|
isDisabled: false,
|
|
isDefaultClickDisabled: true,
|
|
recaptchaType: "V3",
|
|
version: 1,
|
|
type: "BUTTON_WIDGET",
|
|
hideCard: false,
|
|
displayName: "Button",
|
|
key: "61pqdckhct",
|
|
iconSVG: "/static/media/icon.cca02633.svg",
|
|
widgetId: "viyg9naglg",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
parentColumnSpace: 4.9830322265625,
|
|
parentRowSpace: 10,
|
|
leftColumn: 4,
|
|
rightColumn: 20,
|
|
topRow: 3,
|
|
bottomRow: 7,
|
|
parentId: "847huqpwdl",
|
|
},
|
|
],
|
|
minHeight: 400,
|
|
widgetId: "847huqpwdl",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
parentColumnSpace: 1,
|
|
parentRowSpace: 1,
|
|
leftColumn: 0,
|
|
rightColumn: 173.0625,
|
|
topRow: 0,
|
|
bottomRow: 400,
|
|
parentId: "p1czagf2h9",
|
|
},
|
|
],
|
|
version: 1,
|
|
type: "CONTAINER_WIDGET",
|
|
hideCard: false,
|
|
displayName: "Container",
|
|
key: "parnsbxrsh",
|
|
iconSVG: "/static/media/icon.1977dca3.svg",
|
|
isCanvas: true,
|
|
widgetId: "p1czagf2h9",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
parentColumnSpace: 7.2109375,
|
|
parentRowSpace: 10,
|
|
leftColumn: 4,
|
|
rightColumn: 51,
|
|
topRow: 8,
|
|
bottomRow: 48,
|
|
parentId: "onbmx309sa",
|
|
},
|
|
],
|
|
minHeight: 400,
|
|
widgetId: "onbmx309sa",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
parentColumnSpace: 1,
|
|
parentRowSpace: 1,
|
|
leftColumn: 0,
|
|
rightColumn: 481.5,
|
|
topRow: 0,
|
|
bottomRow: 500,
|
|
parentId: "6v4urdv6p2",
|
|
},
|
|
],
|
|
version: 1,
|
|
type: "CONTAINER_WIDGET",
|
|
hideCard: false,
|
|
displayName: "Container",
|
|
key: "parnsbxrsh",
|
|
iconSVG: "/static/media/icon.1977dca3.svg",
|
|
isCanvas: true,
|
|
widgetId: "6v4urdv6p2",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
parentColumnSpace: 20.0625,
|
|
parentRowSpace: 10,
|
|
leftColumn: 12,
|
|
rightColumn: 36,
|
|
topRow: 61,
|
|
bottomRow: 111,
|
|
parentId: "0",
|
|
},
|
|
],
|
|
};
|
|
|
|
const oldDSLWithDialCode = {
|
|
widgetName: "MainContainer",
|
|
backgroundColor: "none",
|
|
rightColumn: 1296,
|
|
snapColumns: 64,
|
|
detachFromLayout: true,
|
|
widgetId: "0",
|
|
topRow: 0,
|
|
bottomRow: 1130,
|
|
containerStyle: "none",
|
|
snapRows: 125,
|
|
parentRowSpace: 1,
|
|
type: "CANVAS_WIDGET",
|
|
canExtend: true,
|
|
version: 52,
|
|
minHeight: 890,
|
|
parentColumnSpace: 1,
|
|
dynamicBindingPathList: [],
|
|
leftColumn: 0,
|
|
children: [
|
|
{
|
|
widgetName: "Table1",
|
|
defaultPageSize: 0,
|
|
columnOrder: ["step", "task", "status", "action", "customColumn1"],
|
|
isVisibleDownload: true,
|
|
displayName: "Table",
|
|
iconSVG: "/static/media/icon.db8a9cbd.svg",
|
|
topRow: 2,
|
|
bottomRow: 30,
|
|
isSortable: true,
|
|
parentRowSpace: 10,
|
|
type: "TABLE_WIDGET",
|
|
defaultSelectedRow: "0",
|
|
hideCard: false,
|
|
animateLoading: true,
|
|
parentColumnSpace: 20.0625,
|
|
dynamicTriggerPathList: [],
|
|
dynamicBindingPathList: [
|
|
{
|
|
key: "primaryColumns.step.computedValue",
|
|
},
|
|
{
|
|
key: "primaryColumns.task.computedValue",
|
|
},
|
|
{
|
|
key: "primaryColumns.status.computedValue",
|
|
},
|
|
{
|
|
key: "primaryColumns.action.computedValue",
|
|
},
|
|
],
|
|
leftColumn: 11,
|
|
primaryColumns: {
|
|
step: {
|
|
index: 0,
|
|
width: 150,
|
|
id: "step",
|
|
horizontalAlignment: "LEFT",
|
|
verticalAlignment: "CENTER",
|
|
columnType: "text",
|
|
textSize: "PARAGRAPH",
|
|
enableFilter: true,
|
|
enableSort: true,
|
|
isVisible: true,
|
|
isCellVisible: true,
|
|
isDerived: false,
|
|
label: "step",
|
|
computedValue:
|
|
"{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.step))}}",
|
|
buttonColor: "#03B365",
|
|
menuColor: "#03B365",
|
|
labelColor: "#FFFFFF",
|
|
},
|
|
task: {
|
|
index: 1,
|
|
width: 150,
|
|
id: "task",
|
|
horizontalAlignment: "LEFT",
|
|
verticalAlignment: "CENTER",
|
|
columnType: "text",
|
|
textSize: "PARAGRAPH",
|
|
enableFilter: true,
|
|
enableSort: true,
|
|
isVisible: true,
|
|
isCellVisible: true,
|
|
isDerived: false,
|
|
label: "task",
|
|
computedValue:
|
|
"{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.task))}}",
|
|
buttonColor: "#03B365",
|
|
menuColor: "#03B365",
|
|
labelColor: "#FFFFFF",
|
|
},
|
|
status: {
|
|
index: 2,
|
|
width: 150,
|
|
id: "status",
|
|
horizontalAlignment: "LEFT",
|
|
verticalAlignment: "CENTER",
|
|
columnType: "text",
|
|
textSize: "PARAGRAPH",
|
|
enableFilter: true,
|
|
enableSort: true,
|
|
isVisible: true,
|
|
isCellVisible: true,
|
|
isDerived: false,
|
|
label: "status",
|
|
computedValue:
|
|
"{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.status))}}",
|
|
buttonColor: "#03B365",
|
|
menuColor: "#03B365",
|
|
labelColor: "#FFFFFF",
|
|
},
|
|
action: {
|
|
index: 3,
|
|
width: 150,
|
|
id: "action",
|
|
horizontalAlignment: "LEFT",
|
|
verticalAlignment: "CENTER",
|
|
columnType: "button",
|
|
textSize: "PARAGRAPH",
|
|
enableFilter: true,
|
|
enableSort: true,
|
|
isVisible: true,
|
|
isCellVisible: true,
|
|
isDisabled: false,
|
|
isDerived: false,
|
|
label: "action",
|
|
onClick:
|
|
"{{currentRow.step === '#1' ? showAlert('Done', 'success') : currentRow.step === '#2' ? navigateTo('https://docs.appsmith.com/core-concepts/connecting-to-data-sources/querying-a-database',undefined,'NEW_WINDOW') : navigateTo('https://docs.appsmith.com/core-concepts/displaying-data-read/display-data-tables',undefined,'NEW_WINDOW')}}",
|
|
computedValue:
|
|
"{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.action))}}",
|
|
buttonColor: "#03B365",
|
|
menuColor: "#03B365",
|
|
labelColor: "#FFFFFF",
|
|
},
|
|
customColumn1: {
|
|
index: 4,
|
|
width: 150,
|
|
id: "customColumn1",
|
|
columnType: "text",
|
|
enableFilter: true,
|
|
enableSort: true,
|
|
isVisible: true,
|
|
isDisabled: false,
|
|
isCellVisible: true,
|
|
isDerived: true,
|
|
label: "test",
|
|
computedValue: "",
|
|
buttonStyle: "rgb(3, 179, 101)",
|
|
buttonLabelColor: "#FFFFFF",
|
|
buttonColor: "#03B365",
|
|
menuColor: "#03B365",
|
|
labelColor: "#FFFFFF",
|
|
},
|
|
},
|
|
delimiter: ",",
|
|
key: "tezu035xfn",
|
|
derivedColumns: {
|
|
customColumn1: {
|
|
index: 4,
|
|
width: 150,
|
|
id: "customColumn1",
|
|
columnType: "text",
|
|
enableFilter: true,
|
|
enableSort: true,
|
|
isVisible: true,
|
|
isDisabled: false,
|
|
isCellVisible: true,
|
|
isDerived: true,
|
|
label: "test",
|
|
computedValue: "",
|
|
buttonStyle: "rgb(3, 179, 101)",
|
|
buttonLabelColor: "#FFFFFF",
|
|
buttonColor: "#03B365",
|
|
menuColor: "#03B365",
|
|
labelColor: "#FFFFFF",
|
|
},
|
|
},
|
|
rightColumn: 45,
|
|
textSize: "PARAGRAPH",
|
|
widgetId: "l7p1322ix5",
|
|
isVisibleFilters: true,
|
|
tableData: [
|
|
{
|
|
step: "#1",
|
|
task: "Drop a table",
|
|
status: "✅",
|
|
action: "",
|
|
},
|
|
{
|
|
step: "#2",
|
|
task: "Create a query fetch_users with the Mock DB",
|
|
status: "--",
|
|
action: "",
|
|
},
|
|
{
|
|
step: "#3",
|
|
task: "Bind the query using => fetch_users.data",
|
|
status: "--",
|
|
action: "",
|
|
},
|
|
],
|
|
isVisible: true,
|
|
label: "Data",
|
|
searchKey: "",
|
|
enableClientSideSearch: true,
|
|
version: 3,
|
|
totalRecordsCount: 0,
|
|
parentId: "0",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
horizontalAlignment: "LEFT",
|
|
isVisibleSearch: true,
|
|
isVisiblePagination: true,
|
|
verticalAlignment: "CENTER",
|
|
columnSizeMap: {
|
|
task: 245,
|
|
step: 62,
|
|
status: 75,
|
|
},
|
|
multiRowSelection: true,
|
|
},
|
|
{
|
|
widgetName: "Input1",
|
|
displayName: "Input",
|
|
iconSVG: "/static/media/icon.9f505595.svg",
|
|
topRow: 33,
|
|
bottomRow: 37,
|
|
parentRowSpace: 10,
|
|
autoFocus: false,
|
|
type: "INPUT_WIDGET_V2",
|
|
hideCard: false,
|
|
animateLoading: true,
|
|
parentColumnSpace: 20.0625,
|
|
resetOnSubmit: true,
|
|
leftColumn: 11,
|
|
labelStyle: "",
|
|
inputType: "TEXT",
|
|
isDisabled: false,
|
|
key: "tj11un6vmd",
|
|
isRequired: false,
|
|
rightColumn: 31,
|
|
widgetId: "whay9rh6bp",
|
|
isVisible: true,
|
|
label: "",
|
|
version: 2,
|
|
parentId: "0",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
iconAlign: "left",
|
|
defaultText: "",
|
|
},
|
|
{
|
|
widgetName: "CurrencyInput1",
|
|
displayName: "Currency Input",
|
|
iconSVG: "/static/media/icon.01a1e03d.svg",
|
|
topRow: 44,
|
|
bottomRow: 48,
|
|
parentRowSpace: 10,
|
|
autoFocus: false,
|
|
type: "CURRENCY_INPUT_WIDGET",
|
|
hideCard: false,
|
|
animateLoading: true,
|
|
parentColumnSpace: 20.0625,
|
|
dynamicTriggerPathList: [],
|
|
resetOnSubmit: true,
|
|
leftColumn: 11,
|
|
dynamicBindingPathList: [],
|
|
labelStyle: "",
|
|
isDisabled: false,
|
|
key: "4pdqazset5",
|
|
isRequired: false,
|
|
rightColumn: 31,
|
|
widgetId: "0i6is5knem",
|
|
isVisible: true,
|
|
label: "",
|
|
allowCurrencyChange: false,
|
|
version: 1,
|
|
parentId: "0",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
decimals: 0,
|
|
iconAlign: "left",
|
|
defaultText: "",
|
|
currencyCode: "USD",
|
|
},
|
|
{
|
|
widgetName: "PhoneInput1",
|
|
dialCode: "{{'+1'}}",
|
|
displayName: "Phone Input",
|
|
iconSVG: "/static/media/icon.ec4f5c23.svg",
|
|
topRow: 54,
|
|
bottomRow: 58,
|
|
parentRowSpace: 10,
|
|
autoFocus: false,
|
|
type: "PHONE_INPUT_WIDGET",
|
|
hideCard: false,
|
|
animateLoading: true,
|
|
parentColumnSpace: 20.0625,
|
|
dynamicPropertyPathList: [{ key: "dialCode" }],
|
|
dynamicTriggerPathList: [],
|
|
resetOnSubmit: true,
|
|
leftColumn: 11,
|
|
dynamicBindingPathList: [{ key: "dialCode" }],
|
|
countryCode: "US",
|
|
labelStyle: "",
|
|
isDisabled: false,
|
|
key: "hygs5twb8a",
|
|
isRequired: false,
|
|
rightColumn: 31,
|
|
widgetId: "2hdejhkfe2",
|
|
allowDialCodeChange: false,
|
|
isVisible: true,
|
|
label: "",
|
|
version: 1,
|
|
parentId: "0",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
iconAlign: "left",
|
|
defaultText: "",
|
|
},
|
|
{
|
|
isVisible: true,
|
|
backgroundColor: "#FFFFFF",
|
|
widgetName: "Container1",
|
|
containerStyle: "card",
|
|
borderColor: "transparent",
|
|
borderWidth: "0",
|
|
borderRadius: "0",
|
|
boxShadow: "NONE",
|
|
animateLoading: true,
|
|
children: [
|
|
{
|
|
isVisible: true,
|
|
widgetName: "Canvas1",
|
|
version: 1,
|
|
detachFromLayout: true,
|
|
type: "CANVAS_WIDGET",
|
|
hideCard: true,
|
|
displayName: "Canvas",
|
|
key: "upcnljouz6",
|
|
containerStyle: "none",
|
|
canExtend: false,
|
|
children: [
|
|
{
|
|
isVisible: true,
|
|
isDisabled: false,
|
|
datePickerType: "DATE_PICKER",
|
|
label: "",
|
|
dateFormat: "YYYY-MM-DD HH:mm",
|
|
widgetName: "DatePicker1",
|
|
defaultDate: "2022-02-02T12:35:06.838Z",
|
|
minDate: "1920-12-31T18:30:00.000Z",
|
|
maxDate: "2121-12-31T18:29:00.000Z",
|
|
version: 2,
|
|
isRequired: false,
|
|
closeOnSelection: true,
|
|
shortcuts: false,
|
|
firstDayOfWeek: 0,
|
|
timePrecision: "minute",
|
|
animateLoading: true,
|
|
type: "DATE_PICKER_WIDGET2",
|
|
hideCard: false,
|
|
displayName: "DatePicker",
|
|
key: "ot1g8a7wsy",
|
|
iconSVG: "/static/media/icon.300e5ab8.svg",
|
|
widgetId: "b40vzteeen",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
parentColumnSpace: 7.2109375,
|
|
parentRowSpace: 10,
|
|
leftColumn: 3,
|
|
rightColumn: 41,
|
|
topRow: 1,
|
|
bottomRow: 5,
|
|
parentId: "onbmx309sa",
|
|
},
|
|
{
|
|
isVisible: true,
|
|
backgroundColor: "#FFFFFF",
|
|
widgetName: "Container2",
|
|
containerStyle: "card",
|
|
borderColor: "transparent",
|
|
borderWidth: "0",
|
|
borderRadius: "0",
|
|
boxShadow: "NONE",
|
|
animateLoading: true,
|
|
children: [
|
|
{
|
|
isVisible: true,
|
|
widgetName: "Canvas2",
|
|
version: 1,
|
|
detachFromLayout: true,
|
|
type: "CANVAS_WIDGET",
|
|
hideCard: true,
|
|
displayName: "Canvas",
|
|
key: "upcnljouz6",
|
|
containerStyle: "none",
|
|
canExtend: false,
|
|
children: [
|
|
{
|
|
isVisible: true,
|
|
animateLoading: true,
|
|
text: "Submit",
|
|
buttonColor: "#03B365",
|
|
buttonVariant: "PRIMARY",
|
|
placement: "CENTER",
|
|
widgetName: "Button1",
|
|
isDisabled: false,
|
|
isDefaultClickDisabled: true,
|
|
recaptchaType: "V3",
|
|
version: 1,
|
|
type: "BUTTON_WIDGET",
|
|
hideCard: false,
|
|
displayName: "Button",
|
|
key: "61pqdckhct",
|
|
iconSVG: "/static/media/icon.cca02633.svg",
|
|
widgetId: "viyg9naglg",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
parentColumnSpace: 4.9830322265625,
|
|
parentRowSpace: 10,
|
|
leftColumn: 4,
|
|
rightColumn: 20,
|
|
topRow: 3,
|
|
bottomRow: 7,
|
|
parentId: "847huqpwdl",
|
|
},
|
|
],
|
|
minHeight: 400,
|
|
widgetId: "847huqpwdl",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
parentColumnSpace: 1,
|
|
parentRowSpace: 1,
|
|
leftColumn: 0,
|
|
rightColumn: 173.0625,
|
|
topRow: 0,
|
|
bottomRow: 400,
|
|
parentId: "p1czagf2h9",
|
|
},
|
|
],
|
|
version: 1,
|
|
type: "CONTAINER_WIDGET",
|
|
hideCard: false,
|
|
displayName: "Container",
|
|
key: "parnsbxrsh",
|
|
iconSVG: "/static/media/icon.1977dca3.svg",
|
|
isCanvas: true,
|
|
widgetId: "p1czagf2h9",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
parentColumnSpace: 7.2109375,
|
|
parentRowSpace: 10,
|
|
leftColumn: 4,
|
|
rightColumn: 51,
|
|
topRow: 8,
|
|
bottomRow: 48,
|
|
parentId: "onbmx309sa",
|
|
},
|
|
],
|
|
minHeight: 400,
|
|
widgetId: "onbmx309sa",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
parentColumnSpace: 1,
|
|
parentRowSpace: 1,
|
|
leftColumn: 0,
|
|
rightColumn: 481.5,
|
|
topRow: 0,
|
|
bottomRow: 500,
|
|
parentId: "6v4urdv6p2",
|
|
},
|
|
],
|
|
version: 1,
|
|
type: "CONTAINER_WIDGET",
|
|
hideCard: false,
|
|
displayName: "Container",
|
|
key: "parnsbxrsh",
|
|
iconSVG: "/static/media/icon.1977dca3.svg",
|
|
isCanvas: true,
|
|
widgetId: "6v4urdv6p2",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
parentColumnSpace: 20.0625,
|
|
parentRowSpace: 10,
|
|
leftColumn: 12,
|
|
rightColumn: 36,
|
|
topRow: 61,
|
|
bottomRow: 111,
|
|
parentId: "0",
|
|
},
|
|
],
|
|
};
|
|
|
|
const expectedDSLWithDefaultDialCode = {
|
|
widgetName: "MainContainer",
|
|
backgroundColor: "none",
|
|
rightColumn: 1296,
|
|
snapColumns: 64,
|
|
detachFromLayout: true,
|
|
widgetId: "0",
|
|
topRow: 0,
|
|
bottomRow: 1130,
|
|
containerStyle: "none",
|
|
snapRows: 125,
|
|
parentRowSpace: 1,
|
|
type: "CANVAS_WIDGET",
|
|
canExtend: true,
|
|
version: 52,
|
|
minHeight: 890,
|
|
parentColumnSpace: 1,
|
|
dynamicBindingPathList: [],
|
|
leftColumn: 0,
|
|
children: [
|
|
{
|
|
widgetName: "Table1",
|
|
defaultPageSize: 0,
|
|
columnOrder: ["step", "task", "status", "action", "customColumn1"],
|
|
isVisibleDownload: true,
|
|
displayName: "Table",
|
|
iconSVG: "/static/media/icon.db8a9cbd.svg",
|
|
topRow: 2,
|
|
bottomRow: 30,
|
|
isSortable: true,
|
|
parentRowSpace: 10,
|
|
type: "TABLE_WIDGET",
|
|
defaultSelectedRow: "0",
|
|
hideCard: false,
|
|
animateLoading: true,
|
|
parentColumnSpace: 20.0625,
|
|
dynamicTriggerPathList: [],
|
|
dynamicBindingPathList: [
|
|
{
|
|
key: "primaryColumns.step.computedValue",
|
|
},
|
|
{
|
|
key: "primaryColumns.task.computedValue",
|
|
},
|
|
{
|
|
key: "primaryColumns.status.computedValue",
|
|
},
|
|
{
|
|
key: "primaryColumns.action.computedValue",
|
|
},
|
|
],
|
|
leftColumn: 11,
|
|
primaryColumns: {
|
|
step: {
|
|
index: 0,
|
|
width: 150,
|
|
id: "step",
|
|
horizontalAlignment: "LEFT",
|
|
verticalAlignment: "CENTER",
|
|
columnType: "text",
|
|
textSize: "PARAGRAPH",
|
|
enableFilter: true,
|
|
enableSort: true,
|
|
isVisible: true,
|
|
isCellVisible: true,
|
|
isDerived: false,
|
|
label: "step",
|
|
computedValue:
|
|
"{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.step))}}",
|
|
buttonColor: "#03B365",
|
|
menuColor: "#03B365",
|
|
labelColor: "#FFFFFF",
|
|
},
|
|
task: {
|
|
index: 1,
|
|
width: 150,
|
|
id: "task",
|
|
horizontalAlignment: "LEFT",
|
|
verticalAlignment: "CENTER",
|
|
columnType: "text",
|
|
textSize: "PARAGRAPH",
|
|
enableFilter: true,
|
|
enableSort: true,
|
|
isVisible: true,
|
|
isCellVisible: true,
|
|
isDerived: false,
|
|
label: "task",
|
|
computedValue:
|
|
"{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.task))}}",
|
|
buttonColor: "#03B365",
|
|
menuColor: "#03B365",
|
|
labelColor: "#FFFFFF",
|
|
},
|
|
status: {
|
|
index: 2,
|
|
width: 150,
|
|
id: "status",
|
|
horizontalAlignment: "LEFT",
|
|
verticalAlignment: "CENTER",
|
|
columnType: "text",
|
|
textSize: "PARAGRAPH",
|
|
enableFilter: true,
|
|
enableSort: true,
|
|
isVisible: true,
|
|
isCellVisible: true,
|
|
isDerived: false,
|
|
label: "status",
|
|
computedValue:
|
|
"{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.status))}}",
|
|
buttonColor: "#03B365",
|
|
menuColor: "#03B365",
|
|
labelColor: "#FFFFFF",
|
|
},
|
|
action: {
|
|
index: 3,
|
|
width: 150,
|
|
id: "action",
|
|
horizontalAlignment: "LEFT",
|
|
verticalAlignment: "CENTER",
|
|
columnType: "button",
|
|
textSize: "PARAGRAPH",
|
|
enableFilter: true,
|
|
enableSort: true,
|
|
isVisible: true,
|
|
isCellVisible: true,
|
|
isDisabled: false,
|
|
isDerived: false,
|
|
label: "action",
|
|
onClick:
|
|
"{{currentRow.step === '#1' ? showAlert('Done', 'success') : currentRow.step === '#2' ? navigateTo('https://docs.appsmith.com/core-concepts/connecting-to-data-sources/querying-a-database',undefined,'NEW_WINDOW') : navigateTo('https://docs.appsmith.com/core-concepts/displaying-data-read/display-data-tables',undefined,'NEW_WINDOW')}}",
|
|
computedValue:
|
|
"{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.action))}}",
|
|
buttonColor: "#03B365",
|
|
menuColor: "#03B365",
|
|
labelColor: "#FFFFFF",
|
|
},
|
|
customColumn1: {
|
|
index: 4,
|
|
width: 150,
|
|
id: "customColumn1",
|
|
columnType: "text",
|
|
enableFilter: true,
|
|
enableSort: true,
|
|
isVisible: true,
|
|
isDisabled: false,
|
|
isCellVisible: true,
|
|
isDerived: true,
|
|
label: "test",
|
|
computedValue: "",
|
|
buttonStyle: "rgb(3, 179, 101)",
|
|
buttonLabelColor: "#FFFFFF",
|
|
buttonColor: "#03B365",
|
|
menuColor: "#03B365",
|
|
labelColor: "#FFFFFF",
|
|
},
|
|
},
|
|
delimiter: ",",
|
|
key: "tezu035xfn",
|
|
derivedColumns: {
|
|
customColumn1: {
|
|
index: 4,
|
|
width: 150,
|
|
id: "customColumn1",
|
|
columnType: "text",
|
|
enableFilter: true,
|
|
enableSort: true,
|
|
isVisible: true,
|
|
isDisabled: false,
|
|
isCellVisible: true,
|
|
isDerived: true,
|
|
label: "test",
|
|
computedValue: "",
|
|
buttonStyle: "rgb(3, 179, 101)",
|
|
buttonLabelColor: "#FFFFFF",
|
|
buttonColor: "#03B365",
|
|
menuColor: "#03B365",
|
|
labelColor: "#FFFFFF",
|
|
},
|
|
},
|
|
rightColumn: 45,
|
|
textSize: "PARAGRAPH",
|
|
widgetId: "l7p1322ix5",
|
|
isVisibleFilters: true,
|
|
tableData: [
|
|
{
|
|
step: "#1",
|
|
task: "Drop a table",
|
|
status: "✅",
|
|
action: "",
|
|
},
|
|
{
|
|
step: "#2",
|
|
task: "Create a query fetch_users with the Mock DB",
|
|
status: "--",
|
|
action: "",
|
|
},
|
|
{
|
|
step: "#3",
|
|
task: "Bind the query using => fetch_users.data",
|
|
status: "--",
|
|
action: "",
|
|
},
|
|
],
|
|
isVisible: true,
|
|
label: "Data",
|
|
searchKey: "",
|
|
enableClientSideSearch: true,
|
|
version: 3,
|
|
totalRecordsCount: 0,
|
|
parentId: "0",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
horizontalAlignment: "LEFT",
|
|
isVisibleSearch: true,
|
|
isVisiblePagination: true,
|
|
verticalAlignment: "CENTER",
|
|
columnSizeMap: {
|
|
task: 245,
|
|
step: 62,
|
|
status: 75,
|
|
},
|
|
multiRowSelection: true,
|
|
},
|
|
{
|
|
widgetName: "Input1",
|
|
displayName: "Input",
|
|
iconSVG: "/static/media/icon.9f505595.svg",
|
|
topRow: 33,
|
|
bottomRow: 37,
|
|
parentRowSpace: 10,
|
|
autoFocus: false,
|
|
type: "INPUT_WIDGET_V2",
|
|
hideCard: false,
|
|
animateLoading: true,
|
|
parentColumnSpace: 20.0625,
|
|
resetOnSubmit: true,
|
|
leftColumn: 11,
|
|
labelStyle: "",
|
|
inputType: "TEXT",
|
|
isDisabled: false,
|
|
key: "tj11un6vmd",
|
|
isRequired: false,
|
|
rightColumn: 31,
|
|
widgetId: "whay9rh6bp",
|
|
isVisible: true,
|
|
label: "",
|
|
version: 2,
|
|
parentId: "0",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
iconAlign: "left",
|
|
defaultText: "",
|
|
},
|
|
{
|
|
widgetName: "CurrencyInput1",
|
|
displayName: "Currency Input",
|
|
iconSVG: "/static/media/icon.01a1e03d.svg",
|
|
topRow: 44,
|
|
bottomRow: 48,
|
|
parentRowSpace: 10,
|
|
autoFocus: false,
|
|
type: "CURRENCY_INPUT_WIDGET",
|
|
hideCard: false,
|
|
animateLoading: true,
|
|
parentColumnSpace: 20.0625,
|
|
dynamicTriggerPathList: [],
|
|
resetOnSubmit: true,
|
|
leftColumn: 11,
|
|
dynamicBindingPathList: [],
|
|
labelStyle: "",
|
|
isDisabled: false,
|
|
key: "4pdqazset5",
|
|
isRequired: false,
|
|
rightColumn: 31,
|
|
widgetId: "0i6is5knem",
|
|
isVisible: true,
|
|
label: "",
|
|
allowCurrencyChange: false,
|
|
version: 1,
|
|
parentId: "0",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
decimals: 0,
|
|
iconAlign: "left",
|
|
defaultText: "",
|
|
currencyCode: "USD",
|
|
},
|
|
{
|
|
widgetName: "PhoneInput1",
|
|
defaultDialCode: "{{'+1'}}",
|
|
displayName: "Phone Input",
|
|
iconSVG: "/static/media/icon.ec4f5c23.svg",
|
|
topRow: 54,
|
|
bottomRow: 58,
|
|
parentRowSpace: 10,
|
|
autoFocus: false,
|
|
type: "PHONE_INPUT_WIDGET",
|
|
hideCard: false,
|
|
animateLoading: true,
|
|
parentColumnSpace: 20.0625,
|
|
dynamicPropertyPathList: [{ key: "defaultDialCode" }],
|
|
dynamicTriggerPathList: [],
|
|
resetOnSubmit: true,
|
|
leftColumn: 11,
|
|
dynamicBindingPathList: [{ key: "defaultDialCode" }],
|
|
countryCode: "US",
|
|
labelStyle: "",
|
|
isDisabled: false,
|
|
key: "hygs5twb8a",
|
|
isRequired: false,
|
|
rightColumn: 31,
|
|
widgetId: "2hdejhkfe2",
|
|
allowDialCodeChange: false,
|
|
isVisible: true,
|
|
label: "",
|
|
version: 1,
|
|
parentId: "0",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
iconAlign: "left",
|
|
defaultText: "",
|
|
},
|
|
{
|
|
isVisible: true,
|
|
backgroundColor: "#FFFFFF",
|
|
widgetName: "Container1",
|
|
containerStyle: "card",
|
|
borderColor: "transparent",
|
|
borderWidth: "0",
|
|
borderRadius: "0",
|
|
boxShadow: "NONE",
|
|
animateLoading: true,
|
|
children: [
|
|
{
|
|
isVisible: true,
|
|
widgetName: "Canvas1",
|
|
version: 1,
|
|
detachFromLayout: true,
|
|
type: "CANVAS_WIDGET",
|
|
hideCard: true,
|
|
displayName: "Canvas",
|
|
key: "upcnljouz6",
|
|
containerStyle: "none",
|
|
canExtend: false,
|
|
children: [
|
|
{
|
|
isVisible: true,
|
|
isDisabled: false,
|
|
datePickerType: "DATE_PICKER",
|
|
label: "",
|
|
dateFormat: "YYYY-MM-DD HH:mm",
|
|
widgetName: "DatePicker1",
|
|
defaultDate: "2022-02-02T12:35:06.838Z",
|
|
minDate: "1920-12-31T18:30:00.000Z",
|
|
maxDate: "2121-12-31T18:29:00.000Z",
|
|
version: 2,
|
|
isRequired: false,
|
|
closeOnSelection: true,
|
|
shortcuts: false,
|
|
firstDayOfWeek: 0,
|
|
timePrecision: "minute",
|
|
animateLoading: true,
|
|
type: "DATE_PICKER_WIDGET2",
|
|
hideCard: false,
|
|
displayName: "DatePicker",
|
|
key: "ot1g8a7wsy",
|
|
iconSVG: "/static/media/icon.300e5ab8.svg",
|
|
widgetId: "b40vzteeen",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
parentColumnSpace: 7.2109375,
|
|
parentRowSpace: 10,
|
|
leftColumn: 3,
|
|
rightColumn: 41,
|
|
topRow: 1,
|
|
bottomRow: 5,
|
|
parentId: "onbmx309sa",
|
|
},
|
|
{
|
|
isVisible: true,
|
|
backgroundColor: "#FFFFFF",
|
|
widgetName: "Container2",
|
|
containerStyle: "card",
|
|
borderColor: "transparent",
|
|
borderWidth: "0",
|
|
borderRadius: "0",
|
|
boxShadow: "NONE",
|
|
animateLoading: true,
|
|
children: [
|
|
{
|
|
isVisible: true,
|
|
widgetName: "Canvas2",
|
|
version: 1,
|
|
detachFromLayout: true,
|
|
type: "CANVAS_WIDGET",
|
|
hideCard: true,
|
|
displayName: "Canvas",
|
|
key: "upcnljouz6",
|
|
containerStyle: "none",
|
|
canExtend: false,
|
|
children: [
|
|
{
|
|
isVisible: true,
|
|
animateLoading: true,
|
|
text: "Submit",
|
|
buttonColor: "#03B365",
|
|
buttonVariant: "PRIMARY",
|
|
placement: "CENTER",
|
|
widgetName: "Button1",
|
|
isDisabled: false,
|
|
isDefaultClickDisabled: true,
|
|
recaptchaType: "V3",
|
|
version: 1,
|
|
type: "BUTTON_WIDGET",
|
|
hideCard: false,
|
|
displayName: "Button",
|
|
key: "61pqdckhct",
|
|
iconSVG: "/static/media/icon.cca02633.svg",
|
|
widgetId: "viyg9naglg",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
parentColumnSpace: 4.9830322265625,
|
|
parentRowSpace: 10,
|
|
leftColumn: 4,
|
|
rightColumn: 20,
|
|
topRow: 3,
|
|
bottomRow: 7,
|
|
parentId: "847huqpwdl",
|
|
},
|
|
],
|
|
minHeight: 400,
|
|
widgetId: "847huqpwdl",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
parentColumnSpace: 1,
|
|
parentRowSpace: 1,
|
|
leftColumn: 0,
|
|
rightColumn: 173.0625,
|
|
topRow: 0,
|
|
bottomRow: 400,
|
|
parentId: "p1czagf2h9",
|
|
},
|
|
],
|
|
version: 1,
|
|
type: "CONTAINER_WIDGET",
|
|
hideCard: false,
|
|
displayName: "Container",
|
|
key: "parnsbxrsh",
|
|
iconSVG: "/static/media/icon.1977dca3.svg",
|
|
isCanvas: true,
|
|
widgetId: "p1czagf2h9",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
parentColumnSpace: 7.2109375,
|
|
parentRowSpace: 10,
|
|
leftColumn: 4,
|
|
rightColumn: 51,
|
|
topRow: 8,
|
|
bottomRow: 48,
|
|
parentId: "onbmx309sa",
|
|
},
|
|
],
|
|
minHeight: 400,
|
|
widgetId: "onbmx309sa",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
parentColumnSpace: 1,
|
|
parentRowSpace: 1,
|
|
leftColumn: 0,
|
|
rightColumn: 481.5,
|
|
topRow: 0,
|
|
bottomRow: 500,
|
|
parentId: "6v4urdv6p2",
|
|
},
|
|
],
|
|
version: 1,
|
|
type: "CONTAINER_WIDGET",
|
|
hideCard: false,
|
|
displayName: "Container",
|
|
key: "parnsbxrsh",
|
|
iconSVG: "/static/media/icon.1977dca3.svg",
|
|
isCanvas: true,
|
|
widgetId: "6v4urdv6p2",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
parentColumnSpace: 20.0625,
|
|
parentRowSpace: 10,
|
|
leftColumn: 12,
|
|
rightColumn: 36,
|
|
topRow: 61,
|
|
bottomRow: 111,
|
|
parentId: "0",
|
|
},
|
|
],
|
|
};
|
|
|
|
const oldDSLWithDialCode2 = {
|
|
widgetName: "MainContainer",
|
|
backgroundColor: "none",
|
|
rightColumn: 1296,
|
|
snapColumns: 64,
|
|
detachFromLayout: true,
|
|
widgetId: "0",
|
|
topRow: 0,
|
|
bottomRow: 1130,
|
|
containerStyle: "none",
|
|
snapRows: 125,
|
|
parentRowSpace: 1,
|
|
type: "CANVAS_WIDGET",
|
|
canExtend: true,
|
|
version: 52,
|
|
minHeight: 890,
|
|
parentColumnSpace: 1,
|
|
dynamicBindingPathList: [],
|
|
leftColumn: 0,
|
|
children: [
|
|
{
|
|
widgetName: "Table1",
|
|
defaultPageSize: 0,
|
|
columnOrder: ["step", "task", "status", "action", "customColumn1"],
|
|
isVisibleDownload: true,
|
|
displayName: "Table",
|
|
iconSVG: "/static/media/icon.db8a9cbd.svg",
|
|
topRow: 2,
|
|
bottomRow: 30,
|
|
isSortable: true,
|
|
parentRowSpace: 10,
|
|
type: "TABLE_WIDGET",
|
|
defaultSelectedRow: "0",
|
|
hideCard: false,
|
|
animateLoading: true,
|
|
parentColumnSpace: 20.0625,
|
|
dynamicTriggerPathList: [],
|
|
dynamicBindingPathList: [
|
|
{
|
|
key: "primaryColumns.step.computedValue",
|
|
},
|
|
{
|
|
key: "primaryColumns.task.computedValue",
|
|
},
|
|
{
|
|
key: "primaryColumns.status.computedValue",
|
|
},
|
|
{
|
|
key: "primaryColumns.action.computedValue",
|
|
},
|
|
],
|
|
leftColumn: 11,
|
|
primaryColumns: {
|
|
step: {
|
|
index: 0,
|
|
width: 150,
|
|
id: "step",
|
|
horizontalAlignment: "LEFT",
|
|
verticalAlignment: "CENTER",
|
|
columnType: "text",
|
|
textSize: "PARAGRAPH",
|
|
enableFilter: true,
|
|
enableSort: true,
|
|
isVisible: true,
|
|
isCellVisible: true,
|
|
isDerived: false,
|
|
label: "step",
|
|
computedValue:
|
|
"{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.step))}}",
|
|
buttonColor: "#03B365",
|
|
menuColor: "#03B365",
|
|
labelColor: "#FFFFFF",
|
|
},
|
|
task: {
|
|
index: 1,
|
|
width: 150,
|
|
id: "task",
|
|
horizontalAlignment: "LEFT",
|
|
verticalAlignment: "CENTER",
|
|
columnType: "text",
|
|
textSize: "PARAGRAPH",
|
|
enableFilter: true,
|
|
enableSort: true,
|
|
isVisible: true,
|
|
isCellVisible: true,
|
|
isDerived: false,
|
|
label: "task",
|
|
computedValue:
|
|
"{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.task))}}",
|
|
buttonColor: "#03B365",
|
|
menuColor: "#03B365",
|
|
labelColor: "#FFFFFF",
|
|
},
|
|
status: {
|
|
index: 2,
|
|
width: 150,
|
|
id: "status",
|
|
horizontalAlignment: "LEFT",
|
|
verticalAlignment: "CENTER",
|
|
columnType: "text",
|
|
textSize: "PARAGRAPH",
|
|
enableFilter: true,
|
|
enableSort: true,
|
|
isVisible: true,
|
|
isCellVisible: true,
|
|
isDerived: false,
|
|
label: "status",
|
|
computedValue:
|
|
"{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.status))}}",
|
|
buttonColor: "#03B365",
|
|
menuColor: "#03B365",
|
|
labelColor: "#FFFFFF",
|
|
},
|
|
action: {
|
|
index: 3,
|
|
width: 150,
|
|
id: "action",
|
|
horizontalAlignment: "LEFT",
|
|
verticalAlignment: "CENTER",
|
|
columnType: "button",
|
|
textSize: "PARAGRAPH",
|
|
enableFilter: true,
|
|
enableSort: true,
|
|
isVisible: true,
|
|
isCellVisible: true,
|
|
isDisabled: false,
|
|
isDerived: false,
|
|
label: "action",
|
|
onClick:
|
|
"{{currentRow.step === '#1' ? showAlert('Done', 'success') : currentRow.step === '#2' ? navigateTo('https://docs.appsmith.com/core-concepts/connecting-to-data-sources/querying-a-database',undefined,'NEW_WINDOW') : navigateTo('https://docs.appsmith.com/core-concepts/displaying-data-read/display-data-tables',undefined,'NEW_WINDOW')}}",
|
|
computedValue:
|
|
"{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.action))}}",
|
|
buttonColor: "#03B365",
|
|
menuColor: "#03B365",
|
|
labelColor: "#FFFFFF",
|
|
},
|
|
customColumn1: {
|
|
index: 4,
|
|
width: 150,
|
|
id: "customColumn1",
|
|
columnType: "text",
|
|
enableFilter: true,
|
|
enableSort: true,
|
|
isVisible: true,
|
|
isDisabled: false,
|
|
isCellVisible: true,
|
|
isDerived: true,
|
|
label: "test",
|
|
computedValue: "",
|
|
buttonStyle: "rgb(3, 179, 101)",
|
|
buttonLabelColor: "#FFFFFF",
|
|
buttonColor: "#03B365",
|
|
menuColor: "#03B365",
|
|
labelColor: "#FFFFFF",
|
|
},
|
|
},
|
|
delimiter: ",",
|
|
key: "tezu035xfn",
|
|
derivedColumns: {
|
|
customColumn1: {
|
|
index: 4,
|
|
width: 150,
|
|
id: "customColumn1",
|
|
columnType: "text",
|
|
enableFilter: true,
|
|
enableSort: true,
|
|
isVisible: true,
|
|
isDisabled: false,
|
|
isCellVisible: true,
|
|
isDerived: true,
|
|
label: "test",
|
|
computedValue: "",
|
|
buttonStyle: "rgb(3, 179, 101)",
|
|
buttonLabelColor: "#FFFFFF",
|
|
buttonColor: "#03B365",
|
|
menuColor: "#03B365",
|
|
labelColor: "#FFFFFF",
|
|
},
|
|
},
|
|
rightColumn: 45,
|
|
textSize: "PARAGRAPH",
|
|
widgetId: "l7p1322ix5",
|
|
isVisibleFilters: true,
|
|
tableData: [
|
|
{
|
|
step: "#1",
|
|
task: "Drop a table",
|
|
status: "✅",
|
|
action: "",
|
|
},
|
|
{
|
|
step: "#2",
|
|
task: "Create a query fetch_users with the Mock DB",
|
|
status: "--",
|
|
action: "",
|
|
},
|
|
{
|
|
step: "#3",
|
|
task: "Bind the query using => fetch_users.data",
|
|
status: "--",
|
|
action: "",
|
|
},
|
|
],
|
|
isVisible: true,
|
|
label: "Data",
|
|
searchKey: "",
|
|
enableClientSideSearch: true,
|
|
version: 3,
|
|
totalRecordsCount: 0,
|
|
parentId: "0",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
horizontalAlignment: "LEFT",
|
|
isVisibleSearch: true,
|
|
isVisiblePagination: true,
|
|
verticalAlignment: "CENTER",
|
|
columnSizeMap: {
|
|
task: 245,
|
|
step: 62,
|
|
status: 75,
|
|
},
|
|
multiRowSelection: true,
|
|
},
|
|
{
|
|
widgetName: "Input1",
|
|
displayName: "Input",
|
|
iconSVG: "/static/media/icon.9f505595.svg",
|
|
topRow: 33,
|
|
bottomRow: 37,
|
|
parentRowSpace: 10,
|
|
autoFocus: false,
|
|
type: "INPUT_WIDGET_V2",
|
|
hideCard: false,
|
|
animateLoading: true,
|
|
parentColumnSpace: 20.0625,
|
|
resetOnSubmit: true,
|
|
leftColumn: 11,
|
|
labelStyle: "",
|
|
inputType: "TEXT",
|
|
isDisabled: false,
|
|
key: "tj11un6vmd",
|
|
isRequired: false,
|
|
rightColumn: 31,
|
|
widgetId: "whay9rh6bp",
|
|
isVisible: true,
|
|
label: "",
|
|
version: 2,
|
|
parentId: "0",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
iconAlign: "left",
|
|
defaultText: "",
|
|
},
|
|
{
|
|
widgetName: "CurrencyInput1",
|
|
displayName: "Currency Input",
|
|
iconSVG: "/static/media/icon.01a1e03d.svg",
|
|
topRow: 44,
|
|
bottomRow: 48,
|
|
parentRowSpace: 10,
|
|
autoFocus: false,
|
|
type: "CURRENCY_INPUT_WIDGET",
|
|
hideCard: false,
|
|
animateLoading: true,
|
|
parentColumnSpace: 20.0625,
|
|
dynamicTriggerPathList: [],
|
|
resetOnSubmit: true,
|
|
leftColumn: 11,
|
|
dynamicBindingPathList: [],
|
|
labelStyle: "",
|
|
isDisabled: false,
|
|
key: "4pdqazset5",
|
|
isRequired: false,
|
|
rightColumn: 31,
|
|
widgetId: "0i6is5knem",
|
|
isVisible: true,
|
|
label: "",
|
|
allowCurrencyChange: false,
|
|
version: 1,
|
|
parentId: "0",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
decimals: 0,
|
|
iconAlign: "left",
|
|
defaultText: "",
|
|
currencyCode: "USD",
|
|
},
|
|
{
|
|
widgetName: "PhoneInput1",
|
|
dialCode: "+1",
|
|
displayName: "Phone Input",
|
|
iconSVG: "/static/media/icon.ec4f5c23.svg",
|
|
topRow: 54,
|
|
bottomRow: 58,
|
|
parentRowSpace: 10,
|
|
autoFocus: false,
|
|
type: "PHONE_INPUT_WIDGET",
|
|
hideCard: false,
|
|
animateLoading: true,
|
|
parentColumnSpace: 20.0625,
|
|
dynamicPropertyPathList: [],
|
|
dynamicTriggerPathList: [],
|
|
resetOnSubmit: true,
|
|
leftColumn: 11,
|
|
dynamicBindingPathList: [],
|
|
countryCode: "US",
|
|
labelStyle: "",
|
|
isDisabled: false,
|
|
key: "hygs5twb8a",
|
|
isRequired: false,
|
|
rightColumn: 31,
|
|
widgetId: "2hdejhkfe2",
|
|
allowDialCodeChange: false,
|
|
isVisible: true,
|
|
label: "",
|
|
version: 1,
|
|
parentId: "0",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
iconAlign: "left",
|
|
defaultText: "",
|
|
},
|
|
{
|
|
isVisible: true,
|
|
backgroundColor: "#FFFFFF",
|
|
widgetName: "Container1",
|
|
containerStyle: "card",
|
|
borderColor: "transparent",
|
|
borderWidth: "0",
|
|
borderRadius: "0",
|
|
boxShadow: "NONE",
|
|
animateLoading: true,
|
|
children: [
|
|
{
|
|
isVisible: true,
|
|
widgetName: "Canvas1",
|
|
version: 1,
|
|
detachFromLayout: true,
|
|
type: "CANVAS_WIDGET",
|
|
hideCard: true,
|
|
displayName: "Canvas",
|
|
key: "upcnljouz6",
|
|
containerStyle: "none",
|
|
canExtend: false,
|
|
children: [
|
|
{
|
|
isVisible: true,
|
|
isDisabled: false,
|
|
datePickerType: "DATE_PICKER",
|
|
label: "",
|
|
dateFormat: "YYYY-MM-DD HH:mm",
|
|
widgetName: "DatePicker1",
|
|
defaultDate: "2022-02-02T12:35:06.838Z",
|
|
minDate: "1920-12-31T18:30:00.000Z",
|
|
maxDate: "2121-12-31T18:29:00.000Z",
|
|
version: 2,
|
|
isRequired: false,
|
|
closeOnSelection: true,
|
|
shortcuts: false,
|
|
firstDayOfWeek: 0,
|
|
timePrecision: "minute",
|
|
animateLoading: true,
|
|
type: "DATE_PICKER_WIDGET2",
|
|
hideCard: false,
|
|
displayName: "DatePicker",
|
|
key: "ot1g8a7wsy",
|
|
iconSVG: "/static/media/icon.300e5ab8.svg",
|
|
widgetId: "b40vzteeen",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
parentColumnSpace: 7.2109375,
|
|
parentRowSpace: 10,
|
|
leftColumn: 3,
|
|
rightColumn: 41,
|
|
topRow: 1,
|
|
bottomRow: 5,
|
|
parentId: "onbmx309sa",
|
|
},
|
|
{
|
|
isVisible: true,
|
|
backgroundColor: "#FFFFFF",
|
|
widgetName: "Container2",
|
|
containerStyle: "card",
|
|
borderColor: "transparent",
|
|
borderWidth: "0",
|
|
borderRadius: "0",
|
|
boxShadow: "NONE",
|
|
animateLoading: true,
|
|
children: [
|
|
{
|
|
isVisible: true,
|
|
widgetName: "Canvas2",
|
|
version: 1,
|
|
detachFromLayout: true,
|
|
type: "CANVAS_WIDGET",
|
|
hideCard: true,
|
|
displayName: "Canvas",
|
|
key: "upcnljouz6",
|
|
containerStyle: "none",
|
|
canExtend: false,
|
|
children: [
|
|
{
|
|
isVisible: true,
|
|
animateLoading: true,
|
|
text: "Submit",
|
|
buttonColor: "#03B365",
|
|
buttonVariant: "PRIMARY",
|
|
placement: "CENTER",
|
|
widgetName: "Button1",
|
|
isDisabled: false,
|
|
isDefaultClickDisabled: true,
|
|
recaptchaType: "V3",
|
|
version: 1,
|
|
type: "BUTTON_WIDGET",
|
|
hideCard: false,
|
|
displayName: "Button",
|
|
key: "61pqdckhct",
|
|
iconSVG: "/static/media/icon.cca02633.svg",
|
|
widgetId: "viyg9naglg",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
parentColumnSpace: 4.9830322265625,
|
|
parentRowSpace: 10,
|
|
leftColumn: 4,
|
|
rightColumn: 20,
|
|
topRow: 3,
|
|
bottomRow: 7,
|
|
parentId: "847huqpwdl",
|
|
},
|
|
],
|
|
minHeight: 400,
|
|
widgetId: "847huqpwdl",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
parentColumnSpace: 1,
|
|
parentRowSpace: 1,
|
|
leftColumn: 0,
|
|
rightColumn: 173.0625,
|
|
topRow: 0,
|
|
bottomRow: 400,
|
|
parentId: "p1czagf2h9",
|
|
},
|
|
],
|
|
version: 1,
|
|
type: "CONTAINER_WIDGET",
|
|
hideCard: false,
|
|
displayName: "Container",
|
|
key: "parnsbxrsh",
|
|
iconSVG: "/static/media/icon.1977dca3.svg",
|
|
isCanvas: true,
|
|
widgetId: "p1czagf2h9",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
parentColumnSpace: 7.2109375,
|
|
parentRowSpace: 10,
|
|
leftColumn: 4,
|
|
rightColumn: 51,
|
|
topRow: 8,
|
|
bottomRow: 48,
|
|
parentId: "onbmx309sa",
|
|
},
|
|
],
|
|
minHeight: 400,
|
|
widgetId: "onbmx309sa",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
parentColumnSpace: 1,
|
|
parentRowSpace: 1,
|
|
leftColumn: 0,
|
|
rightColumn: 481.5,
|
|
topRow: 0,
|
|
bottomRow: 500,
|
|
parentId: "6v4urdv6p2",
|
|
},
|
|
],
|
|
version: 1,
|
|
type: "CONTAINER_WIDGET",
|
|
hideCard: false,
|
|
displayName: "Container",
|
|
key: "parnsbxrsh",
|
|
iconSVG: "/static/media/icon.1977dca3.svg",
|
|
isCanvas: true,
|
|
widgetId: "6v4urdv6p2",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
parentColumnSpace: 20.0625,
|
|
parentRowSpace: 10,
|
|
leftColumn: 12,
|
|
rightColumn: 36,
|
|
topRow: 61,
|
|
bottomRow: 111,
|
|
parentId: "0",
|
|
},
|
|
],
|
|
};
|
|
|
|
const expectedDSLWithDefaultDialCode2 = {
|
|
widgetName: "MainContainer",
|
|
backgroundColor: "none",
|
|
rightColumn: 1296,
|
|
snapColumns: 64,
|
|
detachFromLayout: true,
|
|
widgetId: "0",
|
|
topRow: 0,
|
|
bottomRow: 1130,
|
|
containerStyle: "none",
|
|
snapRows: 125,
|
|
parentRowSpace: 1,
|
|
type: "CANVAS_WIDGET",
|
|
canExtend: true,
|
|
version: 52,
|
|
minHeight: 890,
|
|
parentColumnSpace: 1,
|
|
dynamicBindingPathList: [],
|
|
leftColumn: 0,
|
|
children: [
|
|
{
|
|
widgetName: "Table1",
|
|
defaultPageSize: 0,
|
|
columnOrder: ["step", "task", "status", "action", "customColumn1"],
|
|
isVisibleDownload: true,
|
|
displayName: "Table",
|
|
iconSVG: "/static/media/icon.db8a9cbd.svg",
|
|
topRow: 2,
|
|
bottomRow: 30,
|
|
isSortable: true,
|
|
parentRowSpace: 10,
|
|
type: "TABLE_WIDGET",
|
|
defaultSelectedRow: "0",
|
|
hideCard: false,
|
|
animateLoading: true,
|
|
parentColumnSpace: 20.0625,
|
|
dynamicTriggerPathList: [],
|
|
dynamicBindingPathList: [
|
|
{
|
|
key: "primaryColumns.step.computedValue",
|
|
},
|
|
{
|
|
key: "primaryColumns.task.computedValue",
|
|
},
|
|
{
|
|
key: "primaryColumns.status.computedValue",
|
|
},
|
|
{
|
|
key: "primaryColumns.action.computedValue",
|
|
},
|
|
],
|
|
leftColumn: 11,
|
|
primaryColumns: {
|
|
step: {
|
|
index: 0,
|
|
width: 150,
|
|
id: "step",
|
|
horizontalAlignment: "LEFT",
|
|
verticalAlignment: "CENTER",
|
|
columnType: "text",
|
|
textSize: "PARAGRAPH",
|
|
enableFilter: true,
|
|
enableSort: true,
|
|
isVisible: true,
|
|
isCellVisible: true,
|
|
isDerived: false,
|
|
label: "step",
|
|
computedValue:
|
|
"{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.step))}}",
|
|
buttonColor: "#03B365",
|
|
menuColor: "#03B365",
|
|
labelColor: "#FFFFFF",
|
|
},
|
|
task: {
|
|
index: 1,
|
|
width: 150,
|
|
id: "task",
|
|
horizontalAlignment: "LEFT",
|
|
verticalAlignment: "CENTER",
|
|
columnType: "text",
|
|
textSize: "PARAGRAPH",
|
|
enableFilter: true,
|
|
enableSort: true,
|
|
isVisible: true,
|
|
isCellVisible: true,
|
|
isDerived: false,
|
|
label: "task",
|
|
computedValue:
|
|
"{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.task))}}",
|
|
buttonColor: "#03B365",
|
|
menuColor: "#03B365",
|
|
labelColor: "#FFFFFF",
|
|
},
|
|
status: {
|
|
index: 2,
|
|
width: 150,
|
|
id: "status",
|
|
horizontalAlignment: "LEFT",
|
|
verticalAlignment: "CENTER",
|
|
columnType: "text",
|
|
textSize: "PARAGRAPH",
|
|
enableFilter: true,
|
|
enableSort: true,
|
|
isVisible: true,
|
|
isCellVisible: true,
|
|
isDerived: false,
|
|
label: "status",
|
|
computedValue:
|
|
"{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.status))}}",
|
|
buttonColor: "#03B365",
|
|
menuColor: "#03B365",
|
|
labelColor: "#FFFFFF",
|
|
},
|
|
action: {
|
|
index: 3,
|
|
width: 150,
|
|
id: "action",
|
|
horizontalAlignment: "LEFT",
|
|
verticalAlignment: "CENTER",
|
|
columnType: "button",
|
|
textSize: "PARAGRAPH",
|
|
enableFilter: true,
|
|
enableSort: true,
|
|
isVisible: true,
|
|
isCellVisible: true,
|
|
isDisabled: false,
|
|
isDerived: false,
|
|
label: "action",
|
|
onClick:
|
|
"{{currentRow.step === '#1' ? showAlert('Done', 'success') : currentRow.step === '#2' ? navigateTo('https://docs.appsmith.com/core-concepts/connecting-to-data-sources/querying-a-database',undefined,'NEW_WINDOW') : navigateTo('https://docs.appsmith.com/core-concepts/displaying-data-read/display-data-tables',undefined,'NEW_WINDOW')}}",
|
|
computedValue:
|
|
"{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.action))}}",
|
|
buttonColor: "#03B365",
|
|
menuColor: "#03B365",
|
|
labelColor: "#FFFFFF",
|
|
},
|
|
customColumn1: {
|
|
index: 4,
|
|
width: 150,
|
|
id: "customColumn1",
|
|
columnType: "text",
|
|
enableFilter: true,
|
|
enableSort: true,
|
|
isVisible: true,
|
|
isDisabled: false,
|
|
isCellVisible: true,
|
|
isDerived: true,
|
|
label: "test",
|
|
computedValue: "",
|
|
buttonStyle: "rgb(3, 179, 101)",
|
|
buttonLabelColor: "#FFFFFF",
|
|
buttonColor: "#03B365",
|
|
menuColor: "#03B365",
|
|
labelColor: "#FFFFFF",
|
|
},
|
|
},
|
|
delimiter: ",",
|
|
key: "tezu035xfn",
|
|
derivedColumns: {
|
|
customColumn1: {
|
|
index: 4,
|
|
width: 150,
|
|
id: "customColumn1",
|
|
columnType: "text",
|
|
enableFilter: true,
|
|
enableSort: true,
|
|
isVisible: true,
|
|
isDisabled: false,
|
|
isCellVisible: true,
|
|
isDerived: true,
|
|
label: "test",
|
|
computedValue: "",
|
|
buttonStyle: "rgb(3, 179, 101)",
|
|
buttonLabelColor: "#FFFFFF",
|
|
buttonColor: "#03B365",
|
|
menuColor: "#03B365",
|
|
labelColor: "#FFFFFF",
|
|
},
|
|
},
|
|
rightColumn: 45,
|
|
textSize: "PARAGRAPH",
|
|
widgetId: "l7p1322ix5",
|
|
isVisibleFilters: true,
|
|
tableData: [
|
|
{
|
|
step: "#1",
|
|
task: "Drop a table",
|
|
status: "✅",
|
|
action: "",
|
|
},
|
|
{
|
|
step: "#2",
|
|
task: "Create a query fetch_users with the Mock DB",
|
|
status: "--",
|
|
action: "",
|
|
},
|
|
{
|
|
step: "#3",
|
|
task: "Bind the query using => fetch_users.data",
|
|
status: "--",
|
|
action: "",
|
|
},
|
|
],
|
|
isVisible: true,
|
|
label: "Data",
|
|
searchKey: "",
|
|
enableClientSideSearch: true,
|
|
version: 3,
|
|
totalRecordsCount: 0,
|
|
parentId: "0",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
horizontalAlignment: "LEFT",
|
|
isVisibleSearch: true,
|
|
isVisiblePagination: true,
|
|
verticalAlignment: "CENTER",
|
|
columnSizeMap: {
|
|
task: 245,
|
|
step: 62,
|
|
status: 75,
|
|
},
|
|
multiRowSelection: true,
|
|
},
|
|
{
|
|
widgetName: "Input1",
|
|
displayName: "Input",
|
|
iconSVG: "/static/media/icon.9f505595.svg",
|
|
topRow: 33,
|
|
bottomRow: 37,
|
|
parentRowSpace: 10,
|
|
autoFocus: false,
|
|
type: "INPUT_WIDGET_V2",
|
|
hideCard: false,
|
|
animateLoading: true,
|
|
parentColumnSpace: 20.0625,
|
|
resetOnSubmit: true,
|
|
leftColumn: 11,
|
|
labelStyle: "",
|
|
inputType: "TEXT",
|
|
isDisabled: false,
|
|
key: "tj11un6vmd",
|
|
isRequired: false,
|
|
rightColumn: 31,
|
|
widgetId: "whay9rh6bp",
|
|
isVisible: true,
|
|
label: "",
|
|
version: 2,
|
|
parentId: "0",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
iconAlign: "left",
|
|
defaultText: "",
|
|
},
|
|
{
|
|
widgetName: "CurrencyInput1",
|
|
displayName: "Currency Input",
|
|
iconSVG: "/static/media/icon.01a1e03d.svg",
|
|
topRow: 44,
|
|
bottomRow: 48,
|
|
parentRowSpace: 10,
|
|
autoFocus: false,
|
|
type: "CURRENCY_INPUT_WIDGET",
|
|
hideCard: false,
|
|
animateLoading: true,
|
|
parentColumnSpace: 20.0625,
|
|
dynamicTriggerPathList: [],
|
|
resetOnSubmit: true,
|
|
leftColumn: 11,
|
|
dynamicBindingPathList: [],
|
|
labelStyle: "",
|
|
isDisabled: false,
|
|
key: "4pdqazset5",
|
|
isRequired: false,
|
|
rightColumn: 31,
|
|
widgetId: "0i6is5knem",
|
|
isVisible: true,
|
|
label: "",
|
|
allowCurrencyChange: false,
|
|
version: 1,
|
|
parentId: "0",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
decimals: 0,
|
|
iconAlign: "left",
|
|
defaultText: "",
|
|
currencyCode: "USD",
|
|
},
|
|
{
|
|
widgetName: "PhoneInput1",
|
|
defaultDialCode: "+1",
|
|
displayName: "Phone Input",
|
|
iconSVG: "/static/media/icon.ec4f5c23.svg",
|
|
topRow: 54,
|
|
bottomRow: 58,
|
|
parentRowSpace: 10,
|
|
autoFocus: false,
|
|
type: "PHONE_INPUT_WIDGET",
|
|
hideCard: false,
|
|
animateLoading: true,
|
|
parentColumnSpace: 20.0625,
|
|
dynamicPropertyPathList: [],
|
|
dynamicTriggerPathList: [],
|
|
resetOnSubmit: true,
|
|
leftColumn: 11,
|
|
dynamicBindingPathList: [],
|
|
countryCode: "US",
|
|
labelStyle: "",
|
|
isDisabled: false,
|
|
key: "hygs5twb8a",
|
|
isRequired: false,
|
|
rightColumn: 31,
|
|
widgetId: "2hdejhkfe2",
|
|
allowDialCodeChange: false,
|
|
isVisible: true,
|
|
label: "",
|
|
version: 1,
|
|
parentId: "0",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
iconAlign: "left",
|
|
defaultText: "",
|
|
},
|
|
{
|
|
isVisible: true,
|
|
backgroundColor: "#FFFFFF",
|
|
widgetName: "Container1",
|
|
containerStyle: "card",
|
|
borderColor: "transparent",
|
|
borderWidth: "0",
|
|
borderRadius: "0",
|
|
boxShadow: "NONE",
|
|
animateLoading: true,
|
|
children: [
|
|
{
|
|
isVisible: true,
|
|
widgetName: "Canvas1",
|
|
version: 1,
|
|
detachFromLayout: true,
|
|
type: "CANVAS_WIDGET",
|
|
hideCard: true,
|
|
displayName: "Canvas",
|
|
key: "upcnljouz6",
|
|
containerStyle: "none",
|
|
canExtend: false,
|
|
children: [
|
|
{
|
|
isVisible: true,
|
|
isDisabled: false,
|
|
datePickerType: "DATE_PICKER",
|
|
label: "",
|
|
dateFormat: "YYYY-MM-DD HH:mm",
|
|
widgetName: "DatePicker1",
|
|
defaultDate: "2022-02-02T12:35:06.838Z",
|
|
minDate: "1920-12-31T18:30:00.000Z",
|
|
maxDate: "2121-12-31T18:29:00.000Z",
|
|
version: 2,
|
|
isRequired: false,
|
|
closeOnSelection: true,
|
|
shortcuts: false,
|
|
firstDayOfWeek: 0,
|
|
timePrecision: "minute",
|
|
animateLoading: true,
|
|
type: "DATE_PICKER_WIDGET2",
|
|
hideCard: false,
|
|
displayName: "DatePicker",
|
|
key: "ot1g8a7wsy",
|
|
iconSVG: "/static/media/icon.300e5ab8.svg",
|
|
widgetId: "b40vzteeen",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
parentColumnSpace: 7.2109375,
|
|
parentRowSpace: 10,
|
|
leftColumn: 3,
|
|
rightColumn: 41,
|
|
topRow: 1,
|
|
bottomRow: 5,
|
|
parentId: "onbmx309sa",
|
|
},
|
|
{
|
|
isVisible: true,
|
|
backgroundColor: "#FFFFFF",
|
|
widgetName: "Container2",
|
|
containerStyle: "card",
|
|
borderColor: "transparent",
|
|
borderWidth: "0",
|
|
borderRadius: "0",
|
|
boxShadow: "NONE",
|
|
animateLoading: true,
|
|
children: [
|
|
{
|
|
isVisible: true,
|
|
widgetName: "Canvas2",
|
|
version: 1,
|
|
detachFromLayout: true,
|
|
type: "CANVAS_WIDGET",
|
|
hideCard: true,
|
|
displayName: "Canvas",
|
|
key: "upcnljouz6",
|
|
containerStyle: "none",
|
|
canExtend: false,
|
|
children: [
|
|
{
|
|
isVisible: true,
|
|
animateLoading: true,
|
|
text: "Submit",
|
|
buttonColor: "#03B365",
|
|
buttonVariant: "PRIMARY",
|
|
placement: "CENTER",
|
|
widgetName: "Button1",
|
|
isDisabled: false,
|
|
isDefaultClickDisabled: true,
|
|
recaptchaType: "V3",
|
|
version: 1,
|
|
type: "BUTTON_WIDGET",
|
|
hideCard: false,
|
|
displayName: "Button",
|
|
key: "61pqdckhct",
|
|
iconSVG: "/static/media/icon.cca02633.svg",
|
|
widgetId: "viyg9naglg",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
parentColumnSpace: 4.9830322265625,
|
|
parentRowSpace: 10,
|
|
leftColumn: 4,
|
|
rightColumn: 20,
|
|
topRow: 3,
|
|
bottomRow: 7,
|
|
parentId: "847huqpwdl",
|
|
},
|
|
],
|
|
minHeight: 400,
|
|
widgetId: "847huqpwdl",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
parentColumnSpace: 1,
|
|
parentRowSpace: 1,
|
|
leftColumn: 0,
|
|
rightColumn: 173.0625,
|
|
topRow: 0,
|
|
bottomRow: 400,
|
|
parentId: "p1czagf2h9",
|
|
},
|
|
],
|
|
version: 1,
|
|
type: "CONTAINER_WIDGET",
|
|
hideCard: false,
|
|
displayName: "Container",
|
|
key: "parnsbxrsh",
|
|
iconSVG: "/static/media/icon.1977dca3.svg",
|
|
isCanvas: true,
|
|
widgetId: "p1czagf2h9",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
parentColumnSpace: 7.2109375,
|
|
parentRowSpace: 10,
|
|
leftColumn: 4,
|
|
rightColumn: 51,
|
|
topRow: 8,
|
|
bottomRow: 48,
|
|
parentId: "onbmx309sa",
|
|
},
|
|
],
|
|
minHeight: 400,
|
|
widgetId: "onbmx309sa",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
parentColumnSpace: 1,
|
|
parentRowSpace: 1,
|
|
leftColumn: 0,
|
|
rightColumn: 481.5,
|
|
topRow: 0,
|
|
bottomRow: 500,
|
|
parentId: "6v4urdv6p2",
|
|
},
|
|
],
|
|
version: 1,
|
|
type: "CONTAINER_WIDGET",
|
|
hideCard: false,
|
|
displayName: "Container",
|
|
key: "parnsbxrsh",
|
|
iconSVG: "/static/media/icon.1977dca3.svg",
|
|
isCanvas: true,
|
|
widgetId: "6v4urdv6p2",
|
|
renderMode: "CANVAS",
|
|
isLoading: false,
|
|
parentColumnSpace: 20.0625,
|
|
parentRowSpace: 10,
|
|
leftColumn: 12,
|
|
rightColumn: 36,
|
|
topRow: 61,
|
|
bottomRow: 111,
|
|
parentId: "0",
|
|
},
|
|
],
|
|
};
|
|
|
|
describe("PhoneInputWidgetMigrations - ", () => {
|
|
describe("migratePhoneInputWidgetAllowFormatting - ", () => {
|
|
it("should test that its only migrating allowFormatting", () => {
|
|
expect(
|
|
migratePhoneInputWidgetAllowFormatting(oldDSL as unknown as DSLWidget),
|
|
).toEqual(newDSL);
|
|
});
|
|
});
|
|
|
|
describe("migratePhoneInputWidgetAllowFormatting - ", () => {
|
|
it("should test that its only migrating default dial code with dynamic value", () => {
|
|
expect(
|
|
migratePhoneInputWidgetDefaultDialCode(
|
|
oldDSLWithDialCode as unknown as DSLWidget,
|
|
),
|
|
).toEqual(expectedDSLWithDefaultDialCode);
|
|
});
|
|
|
|
it("should test that its only migrating default dial code without dynamic value", () => {
|
|
expect(
|
|
migratePhoneInputWidgetDefaultDialCode(
|
|
oldDSLWithDialCode2 as unknown as DSLWidget,
|
|
),
|
|
).toEqual(expectedDSLWithDefaultDialCode2);
|
|
});
|
|
});
|
|
});
|