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); }); }); });