import { cloneDeep } from "lodash"; import { DSLWidget } from "widgets/constants"; import { tableWidgetPropertyPaneMigrations, migrateTableWidgetParentRowSpaceProperty, migrateTableWidgetHeaderVisibilityProperties, migrateTableWidgetSelectedRowBindings, migrateTableSanitizeColumnKeys, migrateTableWidgetNumericColumnName, migrateTableWidgetV2ValidationBinding, migrateTableWidgetV2SelectOption, } from "./TableWidget"; const input1: DSLWidget = { widgetName: "MainContainer", backgroundColor: "none", rightColumn: 1224, snapColumns: 16, detachFromLayout: true, widgetId: "0", topRow: 0, bottomRow: 1840, containerStyle: "none", snapRows: 33, parentRowSpace: 1, type: "CANVAS_WIDGET", canExtend: true, version: 7, minHeight: 1292, parentColumnSpace: 1, dynamicBindingPathList: [], leftColumn: 0, isLoading: false, parentId: "", renderMode: "CANVAS", children: [ { isVisible: true, label: "Data", widgetName: "Table1", searchKey: "", tableData: '[\n {\n "id": 2381224,\n "email": "michael.lawson@reqres.in",\n "userName": "Michael Lawson",\n "productName": "Chicken Sandwich",\n "orderAmount": 4.99\n },\n {\n "id": 2736212,\n "email": "lindsay.ferguson@reqres.in",\n "userName": "Lindsay Ferguson",\n "productName": "Tuna Salad",\n "orderAmount": 9.99\n },\n {\n "id": 6788734,\n "email": "tobias.funke@reqres.in",\n "userName": "Tobias Funke",\n "productName": "Beef steak",\n "orderAmount": 19.99\n }\n]', type: "TABLE_WIDGET", isLoading: false, parentColumnSpace: 74, parentRowSpace: 40, leftColumn: 0, rightColumn: 8, topRow: 19, bottomRow: 26, parentId: "0", widgetId: "fs785w9gcy", dynamicBindingPathList: [], renderMode: "CANVAS", version: 1, }, ], }; const input2: DSLWidget = { widgetName: "MainContainer", backgroundColor: "none", rightColumn: 1224, snapColumns: 16, detachFromLayout: true, widgetId: "0", topRow: 0, bottomRow: 1840, containerStyle: "none", snapRows: 33, parentRowSpace: 1, type: "CANVAS_WIDGET", canExtend: true, version: 7, minHeight: 1292, parentColumnSpace: 1, dynamicBindingPathList: [], leftColumn: 0, isLoading: false, parentId: "", renderMode: "CANVAS", children: [ { isVisible: true, label: "Data", widgetName: "Table2", searchKey: "", tableData: '[\n {\n "id": 2381224,\n "email": "michael.lawson@reqres.in",\n "userName": "Michael Lawson",\n "productName": "Chicken Sandwich",\n "orderAmount": 4.99\n },\n {\n "id": 2736212,\n "email": "lindsay.ferguson@reqres.in",\n "userName": "Lindsay Ferguson",\n "productName": "Tuna Salad",\n "orderAmount": 9.99\n },\n {\n "id": 6788734,\n "email": "tobias.funke@reqres.in",\n "userName": "Tobias Funke",\n "productName": "Beef steak",\n "orderAmount": 19.99\n }\n]', type: "TABLE_WIDGET", isLoading: false, parentColumnSpace: 74, parentRowSpace: 40, leftColumn: 0, rightColumn: 8, topRow: 28, bottomRow: 35, parentId: "0", widgetId: "l9i1e8ybkm", dynamicBindingPathList: [], dynamicTriggerPathList: [{ key: "columnActions" }], columnActions: [ { label: "Test", id: "ezooq966rd", actionPayloads: [], dynamicTrigger: "{{showAlert('test','success')}}", }, { label: "Fail", id: "1k8nkay5r6", actionPayloads: [], dynamicTrigger: "{{showAlert('Fail','error')}}", }, ], renderMode: "CANVAS", version: 1, }, ], }; const input3: DSLWidget = { widgetName: "MainContainer", backgroundColor: "none", rightColumn: 1224, snapColumns: 16, detachFromLayout: true, widgetId: "0", topRow: 0, bottomRow: 1840, containerStyle: "none", snapRows: 33, parentRowSpace: 1, type: "CANVAS_WIDGET", canExtend: true, version: 7, minHeight: 1292, parentColumnSpace: 1, dynamicBindingPathList: [], leftColumn: 0, isLoading: false, parentId: "", renderMode: "CANVAS", children: [ { isVisible: true, label: "Data", widgetName: "Table3", searchKey: "", tableData: '[\n {\n "id": 2381224,\n "email": "michael.lawson@reqres.in",\n "userName": "Michael Lawson",\n "productName": "Chicken Sandwich",\n "orderAmount": 4.99\n },\n {\n "id": 2736212,\n "email": "lindsay.ferguson@reqres.in",\n "userName": "Lindsay Ferguson",\n "productName": "Tuna Salad",\n "orderAmount": 9.99\n },\n {\n "id": 6788734,\n "email": "tobias.funke@reqres.in",\n "userName": "Tobias Funke",\n "productName": "Beef steak",\n "orderAmount": 19.99\n }\n]', type: "TABLE_WIDGET", isLoading: false, parentColumnSpace: 74, parentRowSpace: 40, leftColumn: 0, rightColumn: 8, topRow: 37, bottomRow: 44, parentId: "0", widgetId: "8mkidz550s", dynamicBindingPathList: [], dynamicTriggerPathList: [ { key: "onRowSelected" }, { key: "onSearchTextChanged" }, ], onRowSelected: "{{showAlert('test','success')}}", onSearchTextChanged: "{{showAlert('fail','error')}}", renderMode: "CANVAS", version: 1, }, ], }; const output1 = { widgetName: "MainContainer", backgroundColor: "none", rightColumn: 1224, snapColumns: 16, detachFromLayout: true, widgetId: "0", topRow: 0, bottomRow: 1840, containerStyle: "none", snapRows: 33, parentRowSpace: 1, type: "CANVAS_WIDGET", canExtend: true, version: 7, minHeight: 1292, parentColumnSpace: 1, dynamicBindingPathList: [], leftColumn: 0, isLoading: false, parentId: "", renderMode: "CANVAS", children: [ { isVisible: true, label: "Data", widgetName: "Table1", searchKey: "", tableData: '[\n {\n "id": 2381224,\n "email": "michael.lawson@reqres.in",\n "userName": "Michael Lawson",\n "productName": "Chicken Sandwich",\n "orderAmount": 4.99\n },\n {\n "id": 2736212,\n "email": "lindsay.ferguson@reqres.in",\n "userName": "Lindsay Ferguson",\n "productName": "Tuna Salad",\n "orderAmount": 9.99\n },\n {\n "id": 6788734,\n "email": "tobias.funke@reqres.in",\n "userName": "Tobias Funke",\n "productName": "Beef steak",\n "orderAmount": 19.99\n }\n]', type: "TABLE_WIDGET", isLoading: false, parentColumnSpace: 74, parentRowSpace: 40, leftColumn: 0, rightColumn: 8, topRow: 19, bottomRow: 26, parentId: "0", widgetId: "fs785w9gcy", dynamicBindingPathList: [], primaryColumns: { id: { index: 0, width: 150, id: "id", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textColor: "#231F20", textSize: "PARAGRAPH", fontStyle: "REGULAR", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "id", computedValue: "", }, email: { index: 1, width: 150, id: "email", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textColor: "#231F20", textSize: "PARAGRAPH", fontStyle: "REGULAR", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "email", computedValue: "", }, userName: { index: 2, width: 150, id: "userName", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textColor: "#231F20", textSize: "PARAGRAPH", fontStyle: "REGULAR", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "userName", computedValue: "", }, productName: { index: 3, width: 150, id: "productName", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textColor: "#231F20", textSize: "PARAGRAPH", fontStyle: "REGULAR", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "productName", computedValue: "", }, orderAmount: { index: 4, width: 150, id: "orderAmount", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textColor: "#231F20", textSize: "PARAGRAPH", fontStyle: "REGULAR", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "orderAmount", computedValue: "", }, }, textSize: "PARAGRAPH", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", renderMode: "CANVAS", version: 1, }, ], }; const output2 = { widgetName: "MainContainer", backgroundColor: "none", rightColumn: 1224, snapColumns: 16, detachFromLayout: true, widgetId: "0", topRow: 0, bottomRow: 1840, containerStyle: "none", snapRows: 33, parentRowSpace: 1, type: "CANVAS_WIDGET", canExtend: true, version: 7, minHeight: 1292, parentColumnSpace: 1, dynamicBindingPathList: [], leftColumn: 0, isLoading: false, parentId: "", renderMode: "CANVAS", children: [ { isVisible: true, label: "Data", widgetName: "Table2", searchKey: "", tableData: '[\n {\n "id": 2381224,\n "email": "michael.lawson@reqres.in",\n "userName": "Michael Lawson",\n "productName": "Chicken Sandwich",\n "orderAmount": 4.99\n },\n {\n "id": 2736212,\n "email": "lindsay.ferguson@reqres.in",\n "userName": "Lindsay Ferguson",\n "productName": "Tuna Salad",\n "orderAmount": 9.99\n },\n {\n "id": 6788734,\n "email": "tobias.funke@reqres.in",\n "userName": "Tobias Funke",\n "productName": "Beef steak",\n "orderAmount": 19.99\n }\n]', type: "TABLE_WIDGET", isLoading: false, parentColumnSpace: 74, parentRowSpace: 40, leftColumn: 0, rightColumn: 8, topRow: 28, bottomRow: 35, parentId: "0", widgetId: "l9i1e8ybkm", dynamicBindingPathList: [], dynamicTriggerPathList: [ { key: "columnActions" }, { key: "primaryColumns.customColumn1.onClick" }, { key: "primaryColumns.customColumn2.onClick" }, ], columnActions: [ { label: "Test", id: "ezooq966rd", actionPayloads: [], dynamicTrigger: "{{showAlert('test','success')}}", }, { label: "Fail", id: "1k8nkay5r6", actionPayloads: [], dynamicTrigger: "{{showAlert('Fail','error')}}", }, ], primaryColumns: { id: { index: 0, width: 150, id: "id", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textColor: "#231F20", textSize: "PARAGRAPH", fontStyle: "REGULAR", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "id", computedValue: "", }, email: { index: 1, width: 150, id: "email", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textColor: "#231F20", textSize: "PARAGRAPH", fontStyle: "REGULAR", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "email", computedValue: "", }, userName: { index: 2, width: 150, id: "userName", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textColor: "#231F20", textSize: "PARAGRAPH", fontStyle: "REGULAR", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "userName", computedValue: "", }, productName: { index: 3, width: 150, id: "productName", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textColor: "#231F20", textSize: "PARAGRAPH", fontStyle: "REGULAR", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "productName", computedValue: "", }, orderAmount: { index: 4, width: 150, id: "orderAmount", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textColor: "#231F20", textSize: "PARAGRAPH", fontStyle: "REGULAR", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "orderAmount", computedValue: "", }, customColumn1: { index: 5, width: 150, id: "ezooq966rd", label: "Test", columnType: "button", isVisible: true, isDerived: true, buttonLabel: "Test", buttonStyle: "rgb(3, 179, 101)", buttonLabelColor: "#FFFFFF", onClick: "{{showAlert('test','success')}}", }, customColumn2: { index: 6, width: 150, id: "1k8nkay5r6", label: "Fail", columnType: "button", isVisible: true, isDerived: true, buttonLabel: "Fail", buttonStyle: "rgb(3, 179, 101)", buttonLabelColor: "#FFFFFF", onClick: "{{showAlert('Fail','error')}}", }, }, textSize: "PARAGRAPH", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", renderMode: "CANVAS", version: 1, }, ], }; const output3 = { widgetName: "MainContainer", backgroundColor: "none", rightColumn: 1224, snapColumns: 16, detachFromLayout: true, widgetId: "0", topRow: 0, bottomRow: 1840, containerStyle: "none", snapRows: 33, parentRowSpace: 1, type: "CANVAS_WIDGET", canExtend: true, version: 7, minHeight: 1292, parentColumnSpace: 1, dynamicBindingPathList: [], leftColumn: 0, isLoading: false, parentId: "", renderMode: "CANVAS", children: [ { isVisible: true, label: "Data", widgetName: "Table3", searchKey: "", tableData: '[\n {\n "id": 2381224,\n "email": "michael.lawson@reqres.in",\n "userName": "Michael Lawson",\n "productName": "Chicken Sandwich",\n "orderAmount": 4.99\n },\n {\n "id": 2736212,\n "email": "lindsay.ferguson@reqres.in",\n "userName": "Lindsay Ferguson",\n "productName": "Tuna Salad",\n "orderAmount": 9.99\n },\n {\n "id": 6788734,\n "email": "tobias.funke@reqres.in",\n "userName": "Tobias Funke",\n "productName": "Beef steak",\n "orderAmount": 19.99\n }\n]', type: "TABLE_WIDGET", isLoading: false, parentColumnSpace: 74, parentRowSpace: 40, leftColumn: 0, rightColumn: 8, topRow: 37, bottomRow: 44, parentId: "0", widgetId: "8mkidz550s", dynamicBindingPathList: [], dynamicTriggerPathList: [ { key: "onRowSelected" }, { key: "onSearchTextChanged" }, ], onRowSelected: "{{showAlert('test','success')}}", onSearchTextChanged: "{{showAlert('fail','error')}}", primaryColumns: { id: { index: 0, width: 150, id: "id", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textColor: "#231F20", textSize: "PARAGRAPH", fontStyle: "REGULAR", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "id", computedValue: "", }, email: { index: 1, width: 150, id: "email", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textColor: "#231F20", textSize: "PARAGRAPH", fontStyle: "REGULAR", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "email", computedValue: "", }, userName: { index: 2, width: 150, id: "userName", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textColor: "#231F20", textSize: "PARAGRAPH", fontStyle: "REGULAR", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "userName", computedValue: "", }, productName: { index: 3, width: 150, id: "productName", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textColor: "#231F20", textSize: "PARAGRAPH", fontStyle: "REGULAR", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "productName", computedValue: "", }, orderAmount: { index: 4, width: 150, id: "orderAmount", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textColor: "#231F20", textSize: "PARAGRAPH", fontStyle: "REGULAR", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "orderAmount", computedValue: "", }, }, textSize: "PARAGRAPH", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", renderMode: "CANVAS", version: 1, }, ], }; describe("Table Widget Property Pane Upgrade", () => { it("To test primaryColumns are created for a simple table", () => { const newDsl = tableWidgetPropertyPaneMigrations(input1); expect(JSON.stringify(newDsl) === JSON.stringify(output1)); }); it("To test columnActions are migrated derived primaryColumns", () => { const newDsl = tableWidgetPropertyPaneMigrations(input2); expect(JSON.stringify(newDsl) === JSON.stringify(output2)); }); it("To test table action are migrated", () => { const newDsl = tableWidgetPropertyPaneMigrations(input3); expect(JSON.stringify(newDsl) === JSON.stringify(output3)); }); it("To test table parentRowSpace is updated", () => { const inputDsl: DSLWidget = { widgetName: "MainContainer", backgroundColor: "none", rightColumn: 1224, snapColumns: 16, detachFromLayout: true, widgetId: "0", topRow: 0, bottomRow: 1840, containerStyle: "none", snapRows: 33, parentRowSpace: 1, type: "CANVAS_WIDGET", canExtend: true, version: 7, minHeight: 1292, parentColumnSpace: 1, dynamicBindingPathList: [], leftColumn: 0, isLoading: false, parentId: "", renderMode: "CANVAS", children: [ { isVisible: true, label: "Data", widgetName: "Table1", searchKey: "", tableData: '[\n {\n "id": 2381224,\n "email": "michael.lawson@reqres.in",\n "userName": "Michael Lawson",\n "productName": "Chicken Sandwich",\n "orderAmount": 4.99\n },\n {\n "id": 2736212,\n "email": "lindsay.ferguson@reqres.in",\n "userName": "Lindsay Ferguson",\n "productName": "Tuna Salad",\n "orderAmount": 9.99\n },\n {\n "id": 6788734,\n "email": "tobias.funke@reqres.in",\n "userName": "Tobias Funke",\n "productName": "Beef steak",\n "orderAmount": 19.99\n }\n]', type: "TABLE_WIDGET", isLoading: false, parentColumnSpace: 74, parentRowSpace: 40, leftColumn: 0, rightColumn: 8, topRow: 19, bottomRow: 26, parentId: "0", widgetId: "fs785w9gcy", dynamicBindingPathList: [], primaryColumns: { id: { index: 0, width: 150, id: "id", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textColor: "#231F20", textSize: "PARAGRAPH", fontStyle: "REGULAR", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "id", computedValue: "", }, email: { index: 1, width: 150, id: "email", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textColor: "#231F20", textSize: "PARAGRAPH", fontStyle: "REGULAR", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "email", computedValue: "", }, userName: { index: 2, width: 150, id: "userName", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textColor: "#231F20", textSize: "PARAGRAPH", fontStyle: "REGULAR", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "userName", computedValue: "", }, productName: { index: 3, width: 150, id: "productName", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textColor: "#231F20", textSize: "PARAGRAPH", fontStyle: "REGULAR", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "productName", computedValue: "", }, orderAmount: { index: 4, width: 150, id: "orderAmount", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textColor: "#231F20", textSize: "PARAGRAPH", fontStyle: "REGULAR", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "orderAmount", computedValue: "", }, }, textSize: "PARAGRAPH", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", renderMode: "CANVAS", version: 1, }, ], }; const outputDsl: DSLWidget = { widgetName: "MainContainer", backgroundColor: "none", rightColumn: 1224, snapColumns: 16, detachFromLayout: true, widgetId: "0", topRow: 0, bottomRow: 1840, containerStyle: "none", snapRows: 33, parentRowSpace: 1, type: "CANVAS_WIDGET", canExtend: true, version: 7, minHeight: 1292, parentColumnSpace: 1, dynamicBindingPathList: [], leftColumn: 0, isLoading: false, parentId: "", renderMode: "CANVAS", children: [ { isVisible: true, label: "Data", widgetName: "Table1", searchKey: "", tableData: '[\n {\n "id": 2381224,\n "email": "michael.lawson@reqres.in",\n "userName": "Michael Lawson",\n "productName": "Chicken Sandwich",\n "orderAmount": 4.99\n },\n {\n "id": 2736212,\n "email": "lindsay.ferguson@reqres.in",\n "userName": "Lindsay Ferguson",\n "productName": "Tuna Salad",\n "orderAmount": 9.99\n },\n {\n "id": 6788734,\n "email": "tobias.funke@reqres.in",\n "userName": "Tobias Funke",\n "productName": "Beef steak",\n "orderAmount": 19.99\n }\n]', type: "TABLE_WIDGET", isLoading: false, parentColumnSpace: 74, parentRowSpace: 10, leftColumn: 0, rightColumn: 8, topRow: 19, bottomRow: 26, parentId: "0", widgetId: "fs785w9gcy", dynamicBindingPathList: [], primaryColumns: { id: { index: 0, width: 150, id: "id", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textColor: "#231F20", textSize: "PARAGRAPH", fontStyle: "REGULAR", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "id", computedValue: "", }, email: { index: 1, width: 150, id: "email", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textColor: "#231F20", textSize: "PARAGRAPH", fontStyle: "REGULAR", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "email", computedValue: "", }, userName: { index: 2, width: 150, id: "userName", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textColor: "#231F20", textSize: "PARAGRAPH", fontStyle: "REGULAR", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "userName", computedValue: "", }, productName: { index: 3, width: 150, id: "productName", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textColor: "#231F20", textSize: "PARAGRAPH", fontStyle: "REGULAR", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "productName", computedValue: "", }, orderAmount: { index: 4, width: 150, id: "orderAmount", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textColor: "#231F20", textSize: "PARAGRAPH", fontStyle: "REGULAR", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "orderAmount", computedValue: "", }, }, textSize: "PARAGRAPH", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", renderMode: "CANVAS", version: 1, }, ], }; const newDsl = migrateTableWidgetParentRowSpaceProperty(inputDsl); expect(JSON.stringify(newDsl) === JSON.stringify(outputDsl)); }); it("TableWidget : should update header options visibilities", () => { const inputDsl: DSLWidget = { widgetName: "MainContainer", backgroundColor: "none", rightColumn: 1224, snapColumns: 16, detachFromLayout: true, widgetId: "0", topRow: 0, bottomRow: 1840, containerStyle: "none", snapRows: 33, parentRowSpace: 1, type: "CANVAS_WIDGET", canExtend: true, version: 7, minHeight: 1292, parentColumnSpace: 1, dynamicBindingPathList: [], leftColumn: 0, isLoading: false, parentId: "", renderMode: "CANVAS", children: [ { isVisible: true, label: "Data", widgetName: "Table1", searchKey: "", tableData: '[\n {\n "id": 2381224,\n "email": "michael.lawson@reqres.in",\n "userName": "Michael Lawson",\n "productName": "Chicken Sandwich",\n "orderAmount": 4.99\n },\n {\n "id": 2736212,\n "email": "lindsay.ferguson@reqres.in",\n "userName": "Lindsay Ferguson",\n "productName": "Tuna Salad",\n "orderAmount": 9.99\n },\n {\n "id": 6788734,\n "email": "tobias.funke@reqres.in",\n "userName": "Tobias Funke",\n "productName": "Beef steak",\n "orderAmount": 19.99\n }\n]', type: "TABLE_WIDGET", isLoading: false, parentColumnSpace: 74, parentRowSpace: 40, leftColumn: 0, rightColumn: 8, topRow: 19, bottomRow: 26, parentId: "0", widgetId: "fs785w9gcy", dynamicBindingPathList: [], primaryColumns: { id: { index: 0, width: 150, id: "id", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textColor: "#231F20", textSize: "PARAGRAPH", fontStyle: "REGULAR", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "id", computedValue: "", }, email: { index: 1, width: 150, id: "email", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textColor: "#231F20", textSize: "PARAGRAPH", fontStyle: "REGULAR", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "email", computedValue: "", }, userName: { index: 2, width: 150, id: "userName", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textColor: "#231F20", textSize: "PARAGRAPH", fontStyle: "REGULAR", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "userName", computedValue: "", }, productName: { index: 3, width: 150, id: "productName", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textColor: "#231F20", textSize: "PARAGRAPH", fontStyle: "REGULAR", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "productName", computedValue: "", }, orderAmount: { index: 4, width: 150, id: "orderAmount", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textColor: "#231F20", textSize: "PARAGRAPH", fontStyle: "REGULAR", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "orderAmount", computedValue: "", }, }, textSize: "PARAGRAPH", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", renderMode: "CANVAS", version: 1, }, ], }; const outputDsl: DSLWidget = { widgetName: "MainContainer", backgroundColor: "none", rightColumn: 1224, snapColumns: 16, detachFromLayout: true, widgetId: "0", topRow: 0, bottomRow: 1840, containerStyle: "none", snapRows: 33, parentRowSpace: 1, type: "CANVAS_WIDGET", canExtend: true, version: 7, minHeight: 1292, parentColumnSpace: 1, dynamicBindingPathList: [], leftColumn: 0, isLoading: false, parentId: "", renderMode: "CANVAS", children: [ { isVisible: true, label: "Data", widgetName: "Table1", searchKey: "", tableData: '[\n {\n "id": 2381224,\n "email": "michael.lawson@reqres.in",\n "userName": "Michael Lawson",\n "productName": "Chicken Sandwich",\n "orderAmount": 4.99\n },\n {\n "id": 2736212,\n "email": "lindsay.ferguson@reqres.in",\n "userName": "Lindsay Ferguson",\n "productName": "Tuna Salad",\n "orderAmount": 9.99\n },\n {\n "id": 6788734,\n "email": "tobias.funke@reqres.in",\n "userName": "Tobias Funke",\n "productName": "Beef steak",\n "orderAmount": 19.99\n }\n]', type: "TABLE_WIDGET", isLoading: false, parentColumnSpace: 74, parentRowSpace: 10, leftColumn: 0, rightColumn: 8, topRow: 19, bottomRow: 26, parentId: "0", widgetId: "fs785w9gcy", dynamicBindingPathList: [], primaryColumns: { id: { index: 0, width: 150, id: "id", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textColor: "#231F20", textSize: "PARAGRAPH", fontStyle: "REGULAR", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "id", computedValue: "", }, email: { index: 1, width: 150, id: "email", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textColor: "#231F20", textSize: "PARAGRAPH", fontStyle: "REGULAR", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "email", computedValue: "", }, userName: { index: 2, width: 150, id: "userName", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textColor: "#231F20", textSize: "PARAGRAPH", fontStyle: "REGULAR", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "userName", computedValue: "", }, productName: { index: 3, width: 150, id: "productName", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textColor: "#231F20", textSize: "PARAGRAPH", fontStyle: "REGULAR", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "productName", computedValue: "", }, orderAmount: { index: 4, width: 150, id: "orderAmount", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textColor: "#231F20", textSize: "PARAGRAPH", fontStyle: "REGULAR", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "orderAmount", computedValue: "", }, }, textSize: "PARAGRAPH", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", renderMode: "CANVAS", isVisibleSearch: true, isVisibleFilters: true, isVisibleDownload: true, isVisibleCompactMode: true, isVisiblePagination: true, version: 1, }, ], }; const newDsl = migrateTableWidgetHeaderVisibilityProperties(inputDsl); expect(JSON.stringify(newDsl) === JSON.stringify(outputDsl)); }); }); describe("Table Widget Migration - #migrateTableSanitizeColumnKeys", () => { it("sanitizes primaryColumns, dynamicBindingPathList, columnOrder", () => { const inputDsl = ({ widgetName: "MainContainer", backgroundColor: "none", rightColumn: 1080, snapColumns: 64, detachFromLayout: true, widgetId: "0", topRow: 0, bottomRow: 980, containerStyle: "none", snapRows: 125, parentRowSpace: 1, type: "CANVAS_WIDGET", canExtend: true, version: 34, minHeight: 860, parentColumnSpace: 1, dynamicTriggerPathList: [], dynamicBindingPathList: [], leftColumn: 0, children: [ { widgetName: "Table1", defaultPageSize: 0, columnOrder: ["id", "name", "'random_header", "Employee.id"], isVisibleDownload: true, dynamicPropertyPathList: [], topRow: 8, bottomRow: 53, parentRowSpace: 10, type: "TABLE_WIDGET", parentColumnSpace: 14.62421875, dynamicTriggerPathList: [], dynamicBindingPathList: [ { key: "tableData" }, { key: "primaryColumns.id.computedValue" }, { key: "primaryColumns.name.computedValue" }, { key: "primaryColumns.'random_header.computedValue" }, { key: "primaryColumns.Employee.id.computedValue" }, ], leftColumn: 1, primaryColumns: { id: { index: 0, width: 150, id: "id", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textSize: "PARAGRAPH", enableFilter: true, enableSort: true, isVisible: true, isDisabled: false, isCellVisible: true, isDerived: false, label: "id", computedValue: "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.id))}}", }, name: { index: 14, width: 150, id: "name", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textSize: "PARAGRAPH", enableFilter: true, enableSort: true, isVisible: true, isDisabled: false, isCellVisible: true, isDerived: false, label: "name", computedValue: "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.name))}}", }, "'random_header": { index: 20, width: 150, id: "'random_header", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textSize: "PARAGRAPH", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "'random_header", computedValue: "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.'random_header))}}", }, "Employee.id": { index: 20, width: 150, id: "Employee.id", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textSize: "PARAGRAPH", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "Employee.id", computedValue: "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.Employee.id))}}", }, }, delimiter: ",", derivedColumns: {}, rightColumn: 63, textSize: "PARAGRAPH", widgetId: "oclzovhzgx", isVisibleFilters: true, tableData: '{{users.data.concat({ "\'random header": 100})}}', isVisible: true, label: "Data", searchKey: "", version: 1, parentId: "0", totalRecordCount: 0, isLoading: false, isVisibleCompactMode: true, horizontalAlignment: "LEFT", isVisibleSearch: true, isVisiblePagination: true, verticalAlignment: "CENTER", columnSizeMap: { task: 245, step: 62, status: 75, email: 261, }, }, ], } as unknown) as DSLWidget; const outputDsl = { widgetName: "MainContainer", backgroundColor: "none", rightColumn: 1080, snapColumns: 64, detachFromLayout: true, widgetId: "0", topRow: 0, bottomRow: 980, containerStyle: "none", snapRows: 125, parentRowSpace: 1, type: "CANVAS_WIDGET", canExtend: true, version: 34, minHeight: 860, parentColumnSpace: 1, dynamicTriggerPathList: [], dynamicBindingPathList: [], leftColumn: 0, children: [ { widgetName: "Table1", defaultPageSize: 0, columnOrder: ["id", "name", "_random_header", "Employee_id"], isVisibleDownload: true, dynamicPropertyPathList: [], topRow: 8, bottomRow: 53, parentRowSpace: 10, type: "TABLE_WIDGET", parentColumnSpace: 14.62421875, dynamicTriggerPathList: [], dynamicBindingPathList: [ { key: "tableData" }, { key: "primaryColumns.id.computedValue" }, { key: "primaryColumns.name.computedValue" }, { key: "primaryColumns._random_header.computedValue" }, { key: "primaryColumns.Employee_id.computedValue" }, ], leftColumn: 1, primaryColumns: { id: { index: 0, width: 150, id: "id", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textSize: "PARAGRAPH", enableFilter: true, enableSort: true, isVisible: true, isDisabled: false, isCellVisible: true, isDerived: false, label: "id", computedValue: "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.id))}}", }, name: { index: 14, width: 150, id: "name", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textSize: "PARAGRAPH", enableFilter: true, enableSort: true, isVisible: true, isDisabled: false, isCellVisible: true, isDerived: false, label: "name", computedValue: "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.name))}}", }, _random_header: { index: 20, width: 150, id: "_random_header", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textSize: "PARAGRAPH", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "'random_header", computedValue: "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow._random_header))}}", }, Employee_id: { index: 20, width: 150, id: "Employee_id", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textSize: "PARAGRAPH", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "Employee.id", computedValue: "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.Employee_id))}}", }, }, delimiter: ",", derivedColumns: {}, rightColumn: 63, textSize: "PARAGRAPH", widgetId: "oclzovhzgx", isVisibleFilters: true, tableData: '{{users.data.concat({ "\'random header": 100})}}', isVisible: true, label: "Data", searchKey: "", version: 1, parentId: "0", totalRecordCount: 0, isLoading: false, isVisibleCompactMode: true, horizontalAlignment: "LEFT", isVisibleSearch: true, isVisiblePagination: true, verticalAlignment: "CENTER", columnSizeMap: { task: 245, step: 62, status: 75, email: 261, }, }, ], }; const badDsl = ({ widgetName: "MainContainer", backgroundColor: "none", rightColumn: 1080, snapColumns: 64, detachFromLayout: true, widgetId: "0", topRow: 0, bottomRow: 980, containerStyle: "none", snapRows: 125, parentRowSpace: 1, type: "CANVAS_WIDGET", canExtend: true, version: 34, minHeight: 860, parentColumnSpace: 1, dynamicTriggerPathList: [], dynamicBindingPathList: [], leftColumn: 0, children: [ { widgetName: "Table1", defaultPageSize: 0, columnOrder: ["Employee.id"], isVisibleDownload: true, dynamicPropertyPathList: [], topRow: 8, bottomRow: 53, parentRowSpace: 10, type: "TABLE_WIDGET", parentColumnSpace: 14.62421875, dynamicTriggerPathList: [], dynamicBindingPathList: [ { key: "tableData" }, { key: "primaryColumns.Employee.id.computedValue" }, ], leftColumn: 1, primaryColumns: { "Employee.id": { "": { index: 20, width: 150, id: "Employee.id", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textSize: "PARAGRAPH", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "Employee.id", computedValue: "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.Employee.id))}}", }, }, }, delimiter: ",", derivedColumns: {}, rightColumn: 63, textSize: "PARAGRAPH", widgetId: "oclzovhzgx", isVisibleFilters: true, tableData: '{{users.data.concat({ "\'random header": 100})}}', isVisible: true, label: "Data", searchKey: "", version: 1, parentId: "0", totalRecordCount: 0, isLoading: false, isVisibleCompactMode: true, horizontalAlignment: "LEFT", isVisibleSearch: true, isVisiblePagination: true, verticalAlignment: "CENTER", columnSizeMap: { task: 245, step: 62, status: 75, email: 261, }, }, ], } as unknown) as DSLWidget; const fixedDsl = { widgetName: "MainContainer", backgroundColor: "none", rightColumn: 1080, snapColumns: 64, detachFromLayout: true, widgetId: "0", topRow: 0, bottomRow: 980, containerStyle: "none", snapRows: 125, parentRowSpace: 1, type: "CANVAS_WIDGET", canExtend: true, version: 34, minHeight: 860, parentColumnSpace: 1, dynamicTriggerPathList: [], dynamicBindingPathList: [], leftColumn: 0, children: [ { widgetName: "Table1", defaultPageSize: 0, columnOrder: ["Employee_id"], isVisibleDownload: true, dynamicPropertyPathList: [], topRow: 8, bottomRow: 53, parentRowSpace: 10, type: "TABLE_WIDGET", parentColumnSpace: 14.62421875, dynamicTriggerPathList: [], dynamicBindingPathList: [ { key: "tableData" }, { key: "primaryColumns.Employee_id.computedValue" }, ], leftColumn: 1, primaryColumns: { Employee_id: { index: 20, width: 150, id: "Employee_id", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textSize: "PARAGRAPH", enableFilter: true, enableSort: true, isVisible: true, isDerived: false, label: "Employee.id", computedValue: "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.Employee_id))}}", }, }, delimiter: ",", derivedColumns: {}, rightColumn: 63, textSize: "PARAGRAPH", widgetId: "oclzovhzgx", isVisibleFilters: true, tableData: '{{users.data.concat({ "\'random header": 100})}}', isVisible: true, label: "Data", searchKey: "", version: 1, parentId: "0", totalRecordCount: 0, isLoading: false, isVisibleCompactMode: true, horizontalAlignment: "LEFT", isVisibleSearch: true, isVisiblePagination: true, verticalAlignment: "CENTER", columnSizeMap: { task: 245, step: 62, status: 75, email: 261, }, }, ], }; const newDsl = migrateTableSanitizeColumnKeys(inputDsl); const correctedDsl = migrateTableSanitizeColumnKeys(badDsl); expect(newDsl).toStrictEqual(outputDsl); expect(correctedDsl).toStrictEqual(fixedDsl); }); }); describe("Table Widget selectedRow bindings update", () => { it("To test selectedRow bindings are updated for primaryColumns and derivedColumns", () => { const inputDsl: DSLWidget = { widgetName: "MainContainer", backgroundColor: "none", rightColumn: 1118, snapColumns: 64, detachFromLayout: true, widgetId: "0", topRow: 0, bottomRow: 540, containerStyle: "none", snapRows: 129, parentRowSpace: 1, type: "CANVAS_WIDGET", canExtend: true, version: 36, minHeight: 550, parentColumnSpace: 1, dynamicTriggerPathList: [], dynamicBindingPathList: [], leftColumn: 0, renderMode: "CANVAS", isLoading: false, children: [ { widgetName: "Table1", defaultPageSize: 0, isVisibleDownload: true, dynamicPropertyPathList: [], topRow: 8, bottomRow: 36, parentRowSpace: 10, type: "TABLE_WIDGET", defaultSelectedRow: "0", parentColumnSpace: 17.28125, dynamicTriggerPathList: [{ key: "primaryColumns.action.onClick" }], dynamicBindingPathList: [ { key: "primaryColumns.step.computedValue" }, { key: "primaryColumns.task.computedValue" }, { key: "primaryColumns.status.computedValue" }, { key: "primaryColumns.action.computedValue" }, ], leftColumn: 6, 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))}}", }, 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))}}", }, 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))}}", }, 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: "{{showAlert(Table1.selectedRow.task,'info')}}", computedValue: "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.action))}}", }, customColumn1: { index: 4, width: 150, id: "customColumn1", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "button", textSize: "PARAGRAPH", enableFilter: true, enableSort: true, isVisible: true, isCellVisible: true, isDisabled: false, isDerived: true, label: "Delete", onClick: "{{showAlert('Hello')}}", computedValue: "", }, }, delimiter: ",", derivedColumns: {}, rightColumn: 36, textSize: "PARAGRAPH", widgetId: "yd68qpgb0b", 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: "", version: 1, totalRecordsCount: 0, parentId: "0", isLoading: false, horizontalAlignment: "LEFT", renderMode: "CANVAS", isVisibleSearch: true, isVisiblePagination: true, verticalAlignment: "CENTER", columnSizeMap: { task: 245, step: 62, status: 75 }, }, ], }; const newDsl = migrateTableWidgetSelectedRowBindings(inputDsl); const outputDsl: DSLWidget = { widgetName: "MainContainer", backgroundColor: "none", rightColumn: 1118, snapColumns: 64, detachFromLayout: true, widgetId: "0", topRow: 0, bottomRow: 540, containerStyle: "none", snapRows: 129, parentRowSpace: 1, type: "CANVAS_WIDGET", canExtend: true, version: 36, minHeight: 550, parentColumnSpace: 1, dynamicTriggerPathList: [], dynamicBindingPathList: [], leftColumn: 0, renderMode: "CANVAS", isLoading: false, children: [ { widgetName: "Table1", defaultPageSize: 0, isVisibleDownload: true, dynamicPropertyPathList: [], topRow: 8, bottomRow: 36, parentRowSpace: 10, type: "TABLE_WIDGET", defaultSelectedRow: "0", parentColumnSpace: 17.28125, dynamicTriggerPathList: [{ key: "primaryColumns.action.onClick" }], dynamicBindingPathList: [ { key: "primaryColumns.step.computedValue" }, { key: "primaryColumns.task.computedValue" }, { key: "primaryColumns.status.computedValue" }, { key: "primaryColumns.action.computedValue" }, ], leftColumn: 6, 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))}}", }, 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))}}", }, 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))}}", }, 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: "{{showAlert(currentRow.task,'info')}}", computedValue: "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.action))}}", }, customColumn1: { index: 4, width: 150, id: "customColumn1", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "button", textSize: "PARAGRAPH", enableFilter: true, enableSort: true, isVisible: true, isCellVisible: true, isDisabled: false, isDerived: true, label: "Delete", onClick: "{{showAlert('Hello')}}", computedValue: "", }, }, delimiter: ",", derivedColumns: {}, rightColumn: 36, textSize: "PARAGRAPH", widgetId: "yd68qpgb0b", 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: "", version: 1, totalRecordsCount: 0, parentId: "0", isLoading: false, horizontalAlignment: "LEFT", renderMode: "CANVAS", isVisibleSearch: true, isVisiblePagination: true, verticalAlignment: "CENTER", columnSizeMap: { task: 245, step: 62, status: 75 }, }, ], }; expect(newDsl).toStrictEqual(outputDsl); }); }); describe("Table Widget numeric column name to string update", () => { it("to test numeric column name converted to string and rest column configuration remains same", () => { const inputDsl: DSLWidget = { widgetName: "MainContainer", backgroundColor: "none", rightColumn: 816, snapColumns: 64, detachFromLayout: true, widgetId: "0", topRow: 0, bottomRow: 5016, containerStyle: "none", snapRows: 125, parentRowSpace: 1, type: "CANVAS_WIDGET", canExtend: true, version: 50, minHeight: 1292, parentColumnSpace: 1, dynamicBindingPathList: [], leftColumn: 0, parentId: "", renderMode: "CANVAS", isLoading: false, children: [ { widgetName: "Table1", parentColumnSpace: 74, defaultPageSize: 0, columnOrder: [ "1", "2", "_user_", "_client_", "rowIndex", "customColumn1", "customColumn2", ], isVisibleDownload: true, dynamicPropertyPathList: [], displayName: "Table", iconSVG: "/static/media/icon.db8a9cbd.svg", topRow: 1, bottomRow: 29, isSortable: true, parentRowSpace: 10, type: "TABLE_WIDGET", defaultSelectedRow: "0", hideCard: false, animateLoading: true, isLoading: false, dynamicTriggerPathList: [], dynamicBindingPathList: [ { key: "tableData", }, { key: "primaryColumns.1.computedValue", }, { key: "primaryColumns.2.computedValue", }, { key: "primaryColumns._user_.computedValue", }, { key: "primaryColumns._client_.computedValue", }, { key: "primaryColumns.rowIndex.computedValue", }, { key: "derivedColumns.customColumn1.computedValue", }, { key: "primaryColumns.customColumn1.computedValue", }, { key: "derivedColumns.customColumn2.computedValue", }, { key: "primaryColumns.customColumn2.computedValue", }, ], leftColumn: 0, primaryColumns: { "1": { index: 0, width: 150, id: "1", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textSize: "PARAGRAPH", enableFilter: true, enableSort: true, isVisible: true, isDisabled: false, isCellVisible: true, isDerived: false, label: "ONE", computedValue: "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.1))}}", }, "2": { index: 1, width: 150, id: "2", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textSize: "PARAGRAPH", enableFilter: true, enableSort: true, isVisible: true, isDisabled: false, isCellVisible: true, isDerived: false, label: "TWO", computedValue: "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.2))}}", }, _user_: { index: 2, width: 150, id: "_user_", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textSize: "PARAGRAPH", enableFilter: true, enableSort: true, isVisible: true, isDisabled: false, isCellVisible: true, isDerived: false, label: "USER", computedValue: "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow._user_))}}", }, _client_: { index: 3, width: 150, id: "_client_", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textSize: "PARAGRAPH", enableFilter: true, enableSort: true, isVisible: true, isDisabled: false, isCellVisible: true, isDerived: false, label: "CLIENT", computedValue: "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow._client_))}}", }, rowIndex: { index: 4, width: 150, id: "rowIndex", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textSize: "PARAGRAPH", enableFilter: true, enableSort: true, isVisible: true, isDisabled: false, isCellVisible: true, isDerived: false, label: "rowIndex", computedValue: "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.rowIndex))}}", }, customColumn1: { index: 5, width: 150, id: "customColumn1", columnType: "text", enableFilter: true, enableSort: true, isVisible: true, isDisabled: false, isCellVisible: true, isDerived: true, label: "Custom Column 1", computedValue: "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.customColumn1))}}", buttonStyle: "rgb(3, 179, 101)", buttonLabelColor: "#FFFFFF", buttonColor: "#03B365", menuColor: "#03B365", labelColor: "#FFFFFF", }, customColumn2: { index: 6, width: 150, id: "customColumn2", columnType: "text", enableFilter: true, enableSort: true, isVisible: true, isDisabled: false, isCellVisible: true, isDerived: true, label: "Custom Label", computedValue: "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.customColumn2))}}", buttonStyle: "rgb(3, 179, 101)", buttonLabelColor: "#FFFFFF", buttonColor: "#03B365", menuColor: "#03B365", labelColor: "#FFFFFF", }, }, delimiter: ",", key: "d0akgsw2t4", derivedColumns: { customColumn1: { index: 5, width: 150, id: "customColumn1", columnType: "text", enableFilter: true, enableSort: true, isVisible: true, isDisabled: false, isCellVisible: true, isDerived: true, label: "Custom Column 1", computedValue: '{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.rowIndex + " CC1"))}}', buttonStyle: "rgb(3, 179, 101)", buttonLabelColor: "#FFFFFF", buttonColor: "#03B365", menuColor: "#03B365", labelColor: "#FFFFFF", }, customColumn2: { index: 6, width: 150, id: "customColumn2", columnType: "text", enableFilter: true, enableSort: true, isVisible: true, isDisabled: false, isCellVisible: true, isDerived: true, label: "Custom Label", computedValue: '{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.rowIndex + " CC1"))}}', buttonStyle: "rgb(3, 179, 101)", buttonLabelColor: "#FFFFFF", buttonColor: "#03B365", menuColor: "#03B365", labelColor: "#FFFFFF", }, }, rightColumn: 34, textSize: "PARAGRAPH", widgetId: "v3kdn1uyjb", isVisibleFilters: true, tableData: "{{Api2.data}}", isVisible: true, label: "Data", searchKey: "", enableClientSideSearch: true, version: 3, totalRecordsCount: 0, parentId: "0", renderMode: "CANVAS", horizontalAlignment: "LEFT", isVisibleSearch: true, isVisiblePagination: true, verticalAlignment: "CENTER", columnSizeMap: { task: 245, step: 62, status: 75, }, }, ], }; // using cloneDeep, create new reference of inputDsl // otherwise migration function will modify inputDsl too const newDsl = migrateTableWidgetNumericColumnName(cloneDeep(inputDsl)); const outputDsl: DSLWidget = { widgetName: "MainContainer", backgroundColor: "none", rightColumn: 816, snapColumns: 64, detachFromLayout: true, widgetId: "0", topRow: 0, bottomRow: 5016, containerStyle: "none", snapRows: 125, parentRowSpace: 1, type: "CANVAS_WIDGET", canExtend: true, version: 50, minHeight: 1292, parentColumnSpace: 1, dynamicBindingPathList: [], leftColumn: 0, parentId: "", renderMode: "CANVAS", isLoading: false, children: [ { widgetName: "Table1", parentColumnSpace: 74, defaultPageSize: 0, columnOrder: [ "_1", "_2", "_user_", "_client_", "rowIndex", "customColumn1", "customColumn2", ], isVisibleDownload: true, dynamicPropertyPathList: [], displayName: "Table", iconSVG: "/static/media/icon.db8a9cbd.svg", topRow: 1, bottomRow: 29, isSortable: true, parentRowSpace: 10, type: "TABLE_WIDGET", defaultSelectedRow: "0", hideCard: false, animateLoading: true, isLoading: false, dynamicTriggerPathList: [], dynamicBindingPathList: [ { key: "tableData", }, { key: "primaryColumns._1.computedValue", }, { key: "primaryColumns._2.computedValue", }, { key: "primaryColumns._user_.computedValue", }, { key: "primaryColumns._client_.computedValue", }, { key: "primaryColumns.rowIndex.computedValue", }, { key: "derivedColumns.customColumn1.computedValue", }, { key: "primaryColumns.customColumn1.computedValue", }, { key: "derivedColumns.customColumn2.computedValue", }, { key: "primaryColumns.customColumn2.computedValue", }, ], leftColumn: 0, primaryColumns: { _1: { index: 0, width: 150, id: "_1", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textSize: "PARAGRAPH", enableFilter: true, enableSort: true, isVisible: true, isDisabled: false, isCellVisible: true, isDerived: false, label: "ONE", computedValue: "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow._1))}}", }, _2: { index: 1, width: 150, id: "_2", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textSize: "PARAGRAPH", enableFilter: true, enableSort: true, isVisible: true, isDisabled: false, isCellVisible: true, isDerived: false, label: "TWO", computedValue: "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow._2))}}", }, _user_: { index: 2, width: 150, id: "_user_", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textSize: "PARAGRAPH", enableFilter: true, enableSort: true, isVisible: true, isDisabled: false, isCellVisible: true, isDerived: false, label: "USER", computedValue: "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow._user_))}}", }, _client_: { index: 3, width: 150, id: "_client_", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textSize: "PARAGRAPH", enableFilter: true, enableSort: true, isVisible: true, isDisabled: false, isCellVisible: true, isDerived: false, label: "CLIENT", computedValue: "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow._client_))}}", }, rowIndex: { index: 4, width: 150, id: "rowIndex", horizontalAlignment: "LEFT", verticalAlignment: "CENTER", columnType: "text", textSize: "PARAGRAPH", enableFilter: true, enableSort: true, isVisible: true, isDisabled: false, isCellVisible: true, isDerived: false, label: "rowIndex", computedValue: "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.rowIndex))}}", }, customColumn1: { index: 5, width: 150, id: "customColumn1", columnType: "text", enableFilter: true, enableSort: true, isVisible: true, isDisabled: false, isCellVisible: true, isDerived: true, label: "Custom Column 1", computedValue: "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.customColumn1))}}", buttonStyle: "rgb(3, 179, 101)", buttonLabelColor: "#FFFFFF", buttonColor: "#03B365", menuColor: "#03B365", labelColor: "#FFFFFF", }, customColumn2: { index: 6, width: 150, id: "customColumn2", columnType: "text", enableFilter: true, enableSort: true, isVisible: true, isDisabled: false, isCellVisible: true, isDerived: true, label: "Custom Label", computedValue: "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.customColumn2))}}", buttonStyle: "rgb(3, 179, 101)", buttonLabelColor: "#FFFFFF", buttonColor: "#03B365", menuColor: "#03B365", labelColor: "#FFFFFF", }, }, delimiter: ",", key: "d0akgsw2t4", derivedColumns: { customColumn1: { index: 5, width: 150, id: "customColumn1", columnType: "text", enableFilter: true, enableSort: true, isVisible: true, isDisabled: false, isCellVisible: true, isDerived: true, label: "Custom Column 1", computedValue: '{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.rowIndex + " CC1"))}}', buttonStyle: "rgb(3, 179, 101)", buttonLabelColor: "#FFFFFF", buttonColor: "#03B365", menuColor: "#03B365", labelColor: "#FFFFFF", }, customColumn2: { index: 6, width: 150, id: "customColumn2", columnType: "text", enableFilter: true, enableSort: true, isVisible: true, isDisabled: false, isCellVisible: true, isDerived: true, label: "Custom Label", computedValue: '{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.rowIndex + " CC1"))}}', buttonStyle: "rgb(3, 179, 101)", buttonLabelColor: "#FFFFFF", buttonColor: "#03B365", menuColor: "#03B365", labelColor: "#FFFFFF", }, }, rightColumn: 34, textSize: "PARAGRAPH", widgetId: "v3kdn1uyjb", isVisibleFilters: true, tableData: "{{Api2.data}}", isVisible: true, label: "Data", searchKey: "", enableClientSideSearch: true, version: 3, totalRecordsCount: 0, parentId: "0", renderMode: "CANVAS", horizontalAlignment: "LEFT", isVisibleSearch: true, isVisiblePagination: true, verticalAlignment: "CENTER", columnSizeMap: { task: 245, step: 62, status: 75, }, }, ], }; expect(newDsl).toStrictEqual(outputDsl); }); }); const oldBindingPrefix = `{{ ( (editedValue, currentRow, currentIndex) => ( `; const newBindingPrefix = `{{ ( (editedValue, currentRow, currentIndex, isNewRow) => ( `; const oldBindingSuffix = (tableId: string, columnName: string) => ` )) ( ${tableId}.columnEditableCellValue.${columnName} || "", ${tableId}.processedTableData[${tableId}.editableCell.index] || Object.keys(${tableId}.processedTableData[0]) .filter(key => ["__originalIndex__", "__primaryKey__"].indexOf(key) === -1) .reduce((prev, curr) => { prev[curr] = ""; return prev; }, {}), ${tableId}.editableCell.index) }} `; const newBindingSuffix = (tableId: string, columnName: string) => { return ` )) ( (${tableId}.isAddRowInProgress ? ${tableId}.newRow.${columnName} : ${tableId}.columnEditableCellValue.${columnName}) || "", ${tableId}.isAddRowInProgress ? ${tableId}.newRow : (${tableId}.processedTableData[${tableId}.editableCell.index] || Object.keys(${tableId}.processedTableData[0]) .filter(key => ["__originalIndex__", "__primaryKey__"].indexOf(key) === -1) .reduce((prev, curr) => { prev[curr] = ""; return prev; }, {})), ${tableId}.isAddRowInProgress ? -1 : ${tableId}.editableCell.index, ${tableId}.isAddRowInProgress ) }} `; }; describe("migrateTableWidgetV2ValidationBinding", () => { const binding = "true"; it("should test that binding of isColumnEditableCellValid is getting updated", () => { expect( migrateTableWidgetV2ValidationBinding(({ children: [ { widgetName: "Table", type: "TABLE_WIDGET_V2", primaryColumns: { step: { validation: { isColumnEditableCellValid: `${oldBindingPrefix}${binding}${oldBindingSuffix( "Table", "step", )}`, }, }, }, }, ], } as any) as DSLWidget), ).toEqual({ children: [ { widgetName: "Table", type: "TABLE_WIDGET_V2", primaryColumns: { step: { validation: { isColumnEditableCellValid: `${newBindingPrefix}${binding}${newBindingSuffix( "Table", "step", )}`, }, }, }, }, ], }); }); }); describe("migrateTableWidgetV2SelectOption", () => { it("should test that binding of selectOption is getting updated", () => { expect( migrateTableWidgetV2SelectOption(({ children: [ { widgetName: "Table", type: "TABLE_WIDGET_V2", primaryColumns: { step: { columnType: "select", selectOptions: "[{label: 1, value: 2}]", }, task: { columnType: "select", selectOptions: "{{[{label: 1, value: 2}]}}", }, status: { columnType: "text", selectOptions: "{{[{label: 1, value: 2}]}}", }, }, }, ], } as any) as DSLWidget), ).toEqual({ children: [ { widgetName: "Table", type: "TABLE_WIDGET_V2", primaryColumns: { step: { columnType: "select", selectOptions: "[{label: 1, value: 2}]", }, task: { columnType: "select", selectOptions: "{{Table.processedTableData.map((currentRow, currentIndex) => ( [{label: 1, value: 2}]))}}", }, status: { columnType: "text", selectOptions: "{{[{label: 1, value: 2}]}}", }, }, }, ], }); }); });