@truedat/dq 7.12.9 → 7.12.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dq",
-  "version": "7.12.9",
+  "version": "7.12.10",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "module": "src/index.js",
@@ -86,5 +86,5 @@
     "semantic-ui-react": "^3.0.0-beta.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "8b7fd09088e71d0bb6e1a7291250e0f76df27d6e"
+  "gitHead": "3f6e84517a5ec6ea8bc4bf5bd1e05a614ed6418b"
 }

package/src/components/RuleImplementationsTable.js

@@ -1,49 +1,33 @@
 import _ from "lodash/fp";
-import { useEffect, useState } from "react";
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { getSortInfo, sortColumn } from "@truedat/core/services/sort";
 import { Checkbox, Table, Header, Icon } from "semantic-ui-react";
 import { useIntl } from "react-intl";
 import { useSearchContext } from "@truedat/core/search/SearchContext";
-import { sortImplementations } from "../routines";
 import RuleImplementationRow from "./RuleImplementationRow";
 export const RuleImplementationsTable = ({
   addAll,
   checkedAll,
   checkRow,
   executeImplementationsOn,
-  implementationsSort,
-  sortImplementations,
   columns,
-  ruleImplementationsLoading,
   isRowChecked,
 }) => {
-  const { searchData } = useSearchContext();
+  const {
+    searchData,
+    loading,
+    sortColumn,
+    sortDirection,
+    handleSortSelection,
+  } = useSearchContext();
 
   const { formatMessage } = useIntl();
 
-  const [sortedColumn, setColumn] = useState(
-    _.prop("column")(getSortInfo(implementationsSort))
-  );
-
-  const [direction, setDirection] = useState(
-    _.prop("direction")(getSortInfo(implementationsSort))
-  );
-
-  const ruleImplementations = searchData?.data;
+  const ruleImplementations = searchData?.data || [];
 
   const validColumns = _.reject(
     ({ hideOn }) => _.isFunction(hideOn) && hideOn(ruleImplementations)
   )(columns);
 
-  useEffect(() => {
-    const { column: sortedColumn, direction: direction } =
-      getSortInfo(implementationsSort);
-    setColumn(sortedColumn);
-    setDirection(direction);
-  }, [implementationsSort]);
-
   return (
     <>
       {!_.isEmpty(ruleImplementations) ? (
@@ -71,22 +55,15 @@ export const RuleImplementationsTable = ({
                           }`,
                         })}
                         sorted={
-                          _.path("sort.name")(column) === sortedColumn
-                            ? direction
+                          _.path("sort.name")(column) === sortColumn
+                            ? sortDirection
                             : null
                         }
                         className={
                           _.path("sort.name")(column) ? "" : "disabled"
                         }
                         onClick={() =>
-                          sortColumn(
-                            column,
-                            sortImplementations,
-                            setDirection,
-                            setColumn,
-                            direction,
-                            sortedColumn
-                          )
+                          handleSortSelection(_.path("sort.name")(column))
                         }
                       />
                     ))
@@ -108,7 +85,7 @@ export const RuleImplementationsTable = ({
           </Table>
         </div>
       ) : null}
-      {_.isEmpty(ruleImplementations) && !ruleImplementationsLoading ? (
+      {_.isEmpty(ruleImplementations) && !loading ? (
         <Header as="h4">
           <Icon name="search" />
           <Header.Content>
@@ -125,20 +102,8 @@ RuleImplementationsTable.propTypes = {
   checkedAll: PropTypes.bool,
   checkRow: PropTypes.func,
   executeImplementationsOn: PropTypes.bool,
-  implementationsSort: PropTypes.array,
   isRowChecked: PropTypes.func,
-  ruleImplementationsLoading: PropTypes.bool,
-  sortImplementations: PropTypes.func,
-  ruleImplementations: PropTypes.array,
   columns: PropTypes.array,
 };
 
-const mapStateToProps = (state, props) => ({
-  ruleImplementations: props.ruleImplementations || state.ruleImplementations,
-  ruleImplementationsLoading: state.ruleImplementationsLoading,
-  implementationsSort: _.path("ruleImplementationQuery.sort")(state),
-});
-
-export default connect(mapStateToProps, { sortImplementations })(
-  RuleImplementationsTable
-);
+export default RuleImplementationsTable;

package/src/components/__tests__/Implementations.spec.js

@@ -52,7 +52,12 @@ describe("<Implementations />", () => {
         ],
         scroll_id: null,
       },
+      loading: false,
       searchMust: { status: ["pending"] },
+      sortColumn: "implementation_key.sort",
+      sortDirection: "ascending",
+      handleSortSelection: jest.fn(),
+      toggleHiddenFilterValue: jest.fn(),
       setOnSearchChange: jest.fn(),
     });
   });

package/src/components/__tests__/RuleFormImplementations.spec.js

@@ -1,6 +1,20 @@
 import { render, waitForLoad } from "@truedat/test/render";
 import { RuleFormImplementations } from "../RuleFormImplementations";
 
+jest.mock("@truedat/core/search/SearchContext", () => {
+  const originalModule = jest.requireActual(
+    "@truedat/core/search/SearchContext"
+  );
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useSearchContext: jest.fn(),
+  };
+});
+
+const { useSearchContext } = require("@truedat/core/search/SearchContext");
+
 describe("<RuleFormImplementations />", () => {
   const rule = { id: 1, name: "rule name" };
   const updateDeletionQuery = jest.fn();
@@ -10,22 +24,45 @@ describe("<RuleFormImplementations />", () => {
     deletedRender: false,
   };
 
+  const renderOpts = {
+    state: {
+      rule: { id: 1, name: "rule name" },
+    },
+  };
+
+  beforeEach(() => {
+    useSearchContext.mockReturnValue({
+      searchData: {
+        data: [],
+        scroll_id: null,
+      },
+      loading: false,
+      searchMust: {},
+      sortColumn: "implementation_key.raw",
+      sortDirection: "ascending",
+      handleSortSelection: jest.fn(),
+      toggleHiddenFilterValue: jest.fn(),
+      setOnSearchChange: jest.fn(),
+    });
+  });
+
   it("matches the latest snapshot", async () => {
-    const rendered = render(<RuleFormImplementations {...props} />);
+    const rendered = render(<RuleFormImplementations {...props} />, renderOpts);
     await waitForLoad(rendered);
     expect(rendered.container).toMatchSnapshot();
   });
 
   it("renders null when rule is empty", async () => {
     const rendered = render(
-      <RuleFormImplementations {...{ ...props, rule: {} }} />
+      <RuleFormImplementations {...{ ...props, rule: {} }} />,
+      renderOpts
     );
     await waitForLoad(rendered);
     expect(rendered.container.firstChild).toBeNull();
   });
 
   it("renders RuleFormImplementations when rule is not empty", async () => {
-    const rendered = render(<RuleFormImplementations {...props} />);
+    const rendered = render(<RuleFormImplementations {...props} />, renderOpts);
     await waitForLoad(rendered);
     expect(
       rendered.container.querySelector(".implementation-actions")

package/src/components/__tests__/RuleImplementationsTable.spec.js

@@ -1,3 +1,4 @@
+import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { render, waitForLoad } from "@truedat/test/render";
 import { useSearchContext } from "@truedat/core/search/SearchContext";
@@ -22,25 +23,56 @@ describe("<RuleImplementationsTable />", () => {
     { name: "result", sort: { name: "bar.raw" } },
   ];
   const implementationsSort = [{ "name.raw": "desc" }];
-  const sortImplementations = jest.fn();
+
   const ruleImplementationsLoading = false;
   const props = {
     ruleImplementations,
     columns,
     ruleImplementationsLoading,
     implementationsSort,
-    sortImplementations,
   };
 
+  const mockState = {
+    sortColumn: "name.raw",
+    sortDirection: "descending",
+    rerenderFn: null,
+  };
+
+  const handleSortSelection = jest.fn((columnName) => {
+    if (mockState.sortColumn !== columnName) {
+      mockState.sortColumn = columnName;
+      mockState.sortDirection = "ascending";
+    } else {
+      mockState.sortDirection =
+        mockState.sortDirection === "ascending" ? "descending" : "ascending";
+    }
+    // Update the mock return value
+    useSearchContext.mockReturnValue(createMockSearchContext());
+    // Re-render if component is already rendered
+    if (mockState.rerenderFn) {
+      mockState.rerenderFn(<RuleImplementationsTable {...props} />);
+    }
+  });
+
+  const createMockSearchContext = () => ({
+    searchData: {
+      data: ruleImplementations,
+      scroll_id: null,
+    },
+    loading: false,
+    searchMust: {},
+    sortColumn: mockState.sortColumn,
+    sortDirection: mockState.sortDirection,
+    handleSortSelection,
+    setOnSearchChange: jest.fn(),
+  });
+
   beforeEach(() => {
-    useSearchContext.mockReturnValue({
-      searchData: {
-        data: ruleImplementations,
-        scroll_id: null,
-      },
-      searchMust: {},
-      setOnSearchChange: jest.fn(),
-    });
+    mockState.sortColumn = "name.raw";
+    mockState.sortDirection = "descending";
+    mockState.rerenderFn = null;
+    handleSortSelection.mockClear();
+    useSearchContext.mockReturnValue(createMockSearchContext());
   });
 
   it("matches the latest snapshot", async () => {
@@ -61,6 +93,7 @@ describe("<RuleImplementationsTable />", () => {
   it("handles sort when column header is clicked", async () => {
     const user = userEvent.setup({ delay: null });
     const rendered = render(<RuleImplementationsTable {...props} />);
+    mockState.rerenderFn = rendered.rerender;
     await waitForLoad(rendered);
 
     const headerCells = rendered.container.querySelectorAll("th");
@@ -68,13 +101,24 @@ describe("<RuleImplementationsTable />", () => {
     // Click on the second header cell
     await user.click(headerCells[1]);
 
-    // Check that it's now sorted ascending
-    expect(headerCells[1].getAttribute("class")).toContain("ascending sorted");
+    // Wait for the class to update after re-render
+    await waitFor(() => {
+      const updatedHeaderCells = rendered.container.querySelectorAll("th");
+      expect(updatedHeaderCells[1].getAttribute("class")).toContain(
+        "ascending sorted"
+      );
+    });
 
     // Click again to sort descending
-    await user.click(headerCells[1]);
+    const updatedHeaderCells = rendered.container.querySelectorAll("th");
+    await user.click(updatedHeaderCells[1]);
 
-    // Check that it's now sorted descending
-    expect(headerCells[1].getAttribute("class")).toContain("descending sorted");
+    // Wait for the class to update after re-render
+    await waitFor(() => {
+      const finalHeaderCells = rendered.container.querySelectorAll("th");
+      expect(finalHeaderCells[1].getAttribute("class")).toContain(
+        "descending sorted"
+      );
+    });
   });
 });

package/src/components/__tests__/__snapshots__/Implementations.spec.js.snap

@@ -145,7 +145,7 @@ exports[`<Implementations /> matches the latest snapshot 1`] = `
                   class=""
                 >
                   <th
-                    class="two wide"
+                    class="two wide ascending sorted"
                   >
                     ruleImplementations.props.implementation_key
                   </th>
@@ -155,7 +155,7 @@ exports[`<Implementations /> matches the latest snapshot 1`] = `
                     ruleImplementations.props.rule
                   </th>
                   <th
-                    class="two wide ascending sorted disabled"
+                    class="two wide disabled"
                   >
                     ruleImplementations.props.business_concepts
                   </th>

package/src/reducers/__tests__/ruleImplementationQuery.spec.js

@@ -5,7 +5,6 @@ import {
   toggleImplementationFilterValue,
   searchImplementations,
   selectImplementationPage,
-  sortImplementations,
 } from "../../routines";
 import { ruleImplementationQuery } from "..";
 
@@ -60,18 +59,6 @@ describe("reducers: ruleImplementationQuery", () => {
     });
   });
 
-  describe("action: sortImplementations.TRIGGER", () => {
-    it("should set sort from payload and set page to 1", () => {
-      const payload = [{ name2: "asc" }];
-      expect(
-        ruleImplementationQuery(fooState, {
-          type: sortImplementations.TRIGGER,
-          payload,
-        })
-      ).toMatchObject({ sort: [{ name2: "asc" }] });
-    });
-  });
-
   describe("action: searchImplementations.TRIGGER", () => {
     const query = "some query";
     it("should set the query from the payload", () => {

package/src/reducers/ruleImplementationQuery.js

@@ -5,7 +5,6 @@ import {
   toggleImplementationFilterValue,
   searchImplementations,
   selectImplementationPage,
-  sortImplementations,
 } from "../routines";
 
 const defaultPage = 1;
@@ -43,10 +42,7 @@ const ruleImplementationQuery = (state = initialState, { type, payload }) => {
       const { activePage } = payload;
       return { ...state, page: activePage };
     }
-    case sortImplementations.TRIGGER: {
-      const sort = payload;
-      return { ...state, sort, page: defaultPage };
-    }
+
     default:
       return state;
   }

package/src/routines.js

@@ -97,7 +97,7 @@ export const setImplementationDefaultFilters = createRoutine(
   "SET_IMPLEMENTATION_DEFAULT_FILTRERS"
 );
 export const deleteImplementation = createRoutine("DELETE_IMPLEMENTATION");
-export const sortImplementations = createRoutine("SORT_IMPLEMENTATIONS");
+
 export const sortRules = createRoutine("SORT_RULES");
 export const submitImplementation = createRoutine("SUBMIT_IMPLEMENTATION");
 export const toggleImplementationFilterValue = createRoutine(