PromucFlow_constructor/app/client/src/utils/migrations/TableWidget.test.ts

2732 lines
84 KiB
TypeScript

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}]}}",
},
},
},
],
});
});
});