Fix Table Widget Filter issue (#3975)

* Fix issue where non-string empty values are not correctly filtered * Add unit test for fix
appsmithorg · Jun 18, 2021 · 2c3b457 · 2c3b457
1 parent 87b2d25
commit 2c3b457
Show file tree

Hide file tree

Showing 2 changed files with 141 additions and 1 deletion.
diff --git a/app/client/src/widgets/TableWidget/derived.js b/app/client/src/widgets/TableWidget/derived.js
@@ -285,7 +285,10 @@ export default {
       isExactly: (a, b) => {
         return a.toString() === b.toString();
       },
-      empty: _.isEmpty,
+      empty: (a) => {
+        if (a === null || a === undefined || a === "") return true;
+        return _.isEmpty(a.toString());
+      },
       notEmpty: (a) => {
         return a !== "" && a !== undefined && a !== null;
       },

diff --git a/app/client/src/widgets/TableWidget/derived.test.js b/app/client/src/widgets/TableWidget/derived.test.js
@@ -674,4 +674,141 @@ describe("Validates Derived Properties", () => {
     let result = getFilteredTableData(input, moment, _);
     expect(result).toStrictEqual(expected);
   });
+
+  it("validates generated filtered table data to be filtered correctly in empty comparison", () => {
+    const { getFilteredTableData } = derivedProperty;
+    const input = {
+      sanitizedTableData: [
+        { id: 1234, name: "Jim Doe" },
+        { id: 123, name: "John Doe" },
+        { id: 234, name: "Jane Doe" },
+      ],
+      filters: [
+        {
+          condition: "empty",
+          column: "id",
+          value: "",
+          operator: "OR",
+        },
+      ],
+      sortedColumn: { column: "id", asc: false },
+      columnOrder: ["name", "id"],
+      primaryColumns: {
+        id: {
+          index: 1,
+          width: 150,
+          id: "id",
+          horizontalAlignment: "LEFT",
+          verticalAlignment: "CENTER",
+          columnType: "number",
+          textColor: "#231F20",
+          textSize: "PARAGRAPH",
+          fontStyle: "REGULAR",
+          enableFilter: true,
+          enableSort: true,
+          isVisible: true,
+          isDerived: false,
+          label: "id",
+          isAscOrder: false,
+          computedValue: [1234, 123, 234],
+        },
+        name: {
+          index: 0,
+          width: 150,
+          id: "name",
+          horizontalAlignment: "LEFT",
+          verticalAlignment: "CENTER",
+          columnType: "text",
+          textColor: "#231F20",
+          textSize: "PARAGRAPH",
+          fontStyle: "REGULAR",
+          enableFilter: true,
+          enableSort: true,
+          isVisible: true,
+          isDerived: false,
+          label: "awesome",
+          isAscOrder: undefined,
+          computedValue: ["Jim Doe", "John Doe", "Jane Doe"],
+        },
+        extra: {
+          index: 2,
+          width: 150,
+          id: "extra",
+          horizontalAlignment: "LEFT",
+          verticalAlignment: "CENTER",
+          columnType: "text",
+          textColor: "#231F20",
+          textSize: "PARAGRAPH",
+          fontStyle: "REGULAR",
+          enableFilter: true,
+          enableSort: true,
+          isVisible: true,
+          label: "extra",
+          isAscOrder: undefined,
+          computedValue: ["", "Extra1", "Extra2"],
+          isDerived: true,
+        },
+      },
+      tableColumns: [
+        {
+          index: 0,
+          width: 150,
+          id: "name",
+          horizontalAlignment: "LEFT",
+          verticalAlignment: "CENTER",
+          columnType: "text",
+          textColor: "#231F20",
+          textSize: "PARAGRAPH",
+          fontStyle: "REGULAR",
+          enableFilter: true,
+          enableSort: true,
+          isVisible: true,
+          isDerived: false,
+          label: "awesome",
+          isAscOrder: undefined,
+          computedValue: ["Jim Doe", "John Doe", "Jane Doe"],
+        },
+        {
+          index: 1,
+          width: 150,
+          id: "id",
+          horizontalAlignment: "LEFT",
+          verticalAlignment: "CENTER",
+          columnType: "number",
+          textColor: "#231F20",
+          textSize: "PARAGRAPH",
+          fontStyle: "REGULAR",
+          enableFilter: true,
+          enableSort: true,
+          isVisible: true,
+          isDerived: false,
+          label: "id",
+          isAscOrder: false,
+          computedValue: [1234, 123, 234],
+        },
+        {
+          index: 2,
+          width: 150,
+          id: "extra",
+          horizontalAlignment: "LEFT",
+          verticalAlignment: "CENTER",
+          columnType: "text",
+          textColor: "#231F20",
+          textSize: "PARAGRAPH",
+          fontStyle: "REGULAR",
+          enableFilter: true,
+          enableSort: true,
+          isVisible: true,
+          label: "extra",
+          isAscOrder: undefined,
+          computedValue: ["", "Extra1", "Extra2"],
+          isDerived: true,
+        },
+      ],
+    };
+    const expected = [];
+
+    let result = getFilteredTableData(input, moment, _);
+    expect(result).toStrictEqual(expected);
+  });
 });