From 79c5042e34d45cd18c17f9a1423ed282b9fe2448 Mon Sep 17 00:00:00 2001
From: Tolulope Adetula <31691737+Tooluloope@users.noreply.github.com>
Date: Fri, 12 Nov 2021 10:33:47 +0100
Subject: [PATCH] fix: null check in Table widget (#8979)

* fix: null check in Table widget

* fix: null checks

* fix: add tests

* fix: make migrateTableSanitizeColumnKeys readable
---
 .../src/utils/migrations/TableWidget.test.ts  | 174 ++++++++++++++++++
 .../src/utils/migrations/TableWidget.ts       |  20 +-
 2 files changed, 192 insertions(+), 2 deletions(-)

diff --git a/app/client/src/utils/migrations/TableWidget.test.ts b/app/client/src/utils/migrations/TableWidget.test.ts
index d1ab4a82e3..5010f6e89f 100644
--- a/app/client/src/utils/migrations/TableWidget.test.ts
+++ b/app/client/src/utils/migrations/TableWidget.test.ts
@@ -1487,8 +1487,182 @@ describe("Table Widget Migration - #migrateTableSanitizeColumnKeys", () => {
       ],
     };
 
+    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);
   });
 });
 
diff --git a/app/client/src/utils/migrations/TableWidget.ts b/app/client/src/utils/migrations/TableWidget.ts
index c41e01e732..5f9f5b8dd1 100644
--- a/app/client/src/utils/migrations/TableWidget.ts
+++ b/app/client/src/utils/migrations/TableWidget.ts
@@ -383,9 +383,25 @@ export const migrateTableSanitizeColumnKeys = (currentDSL: DSLWidget) => {
 
       const newPrimaryColumns: Record<string, ColumnProperties> = {};
       if (primaryColumnEntries.length) {
-        for (const [key, value] of primaryColumnEntries) {
+        for (const [, primaryColumnEntry] of primaryColumnEntries.entries()) {
+          // Value is reassigned when its invalid(Faulty DSL  https://github.com/appsmithorg/appsmith/issues/8979)
+          const [key] = primaryColumnEntry;
+          let [, value] = primaryColumnEntry;
           const sanitizedKey = removeSpecialChars(key, 200);
-          const id = removeSpecialChars(value.id, 200);
+          let id = "";
+          if (value.id) {
+            id = removeSpecialChars(value.id, 200);
+          }
+          // When id is undefined it's likely value isn't correct and needs fixing
+          else if (Object.keys(value)) {
+            const onlyKey = Object.keys(value)[0] as keyof ColumnProperties;
+            const obj: ColumnProperties = value[onlyKey] as any;
+            if (!obj.id && !obj.columnType) {
+              continue;
+            }
+            value = obj;
+            id = removeSpecialChars(value.id, 200);
+          }
 
           // Sanitizes "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.$$$random_header))}}"
           // to "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow._random_header))}}"