import { DSLWidget } from "widgets/constants"; import { tableWidgetPropertyPaneMigrations, migrateTableWidgetParentRowSpaceProperty, migrateTableWidgetHeaderVisibilityProperties, migrateTableSanitizeColumnKeys, } 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 newDsl = migrateTableSanitizeColumnKeys(inputDsl); expect(newDsl).toStrictEqual(outputDsl); }); });