hunk.code_window: import { useDispatch } from "react-redux";
   import { useHistory, useParams } from "react-router-dom";
   import { noop } from "lodash";
  
hunk.labels: replace keep keep keep
hunk.after_edit: import { useDispatch, useSelector } from "react-redux";
  
hunk.file_path: app/client/src/pages/Editor/EditorAppName/NavigationMenuData.ts
hunk.type: replace
file: import { DSLWidget } from "widgets/constants";
  import {
    tableWidgetPropertyPaneMigrations,
    migrateTableWidgetParentRowSpaceProperty,
    migrateTableWidgetHeaderVisibilityProperties,
    migrateTableWidgetSelectedRowBindings,
    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);
    });
  });
  
  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);
    });
  });
  