@truedat/core 8.12.0 → 8.12.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "8.12.0",
+  "version": "8.12.2",
   "description": "Truedat Web Core",
   "sideEffects": [
     "**/*.css",
@@ -57,7 +57,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.12.0",
+    "@truedat/test": "8.12.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -99,5 +99,5 @@
     "swr": "^2.3.3",
     "turndown": "^7.2.2"
   },
-  "gitHead": "5a1ec38d4529e465f53b6305fca90332eac271f3"
+  "gitHead": "b0000f1b2727cad43ce3c3eb2fa29681488dd2ec"
 }

package/src/components/FilterMultilevelDropdown.js

@@ -179,7 +179,7 @@ export const FilterMultilevelDropdown = ({
                 open={_.contains(option.id)(open)}
                 canOpen={_.negate(_.isEmpty)(option.children)}
                 selected={_.contains(option.id)(selected)}
-                {...option}
+                {..._.omit("key")(option)}
               />
             ))(filteredOptions)}
           </Dropdown.Menu>

package/src/components/SelectedFilters.js

@@ -66,7 +66,6 @@ export const SelectedFilters = ({
               const options = isSelectedFilter ? selectedFilterValues : null;
 
               const props = {
-                key: filter,
                 activeValues,
                 closeFilter,
                 filter,
@@ -80,15 +79,16 @@ export const SelectedFilters = ({
               switch (filterType) {
                 case "domain":
                   return useDomainSearchFilter ? (
-                    <DomainSearchFilter {...props} />
+                    <DomainSearchFilter key={filter} {...props} />
                   ) : (
-                    <FilterMultilevelDropdown {...props} />
+                    <FilterMultilevelDropdown key={filter} {...props} />
                   );
                 case "hierarchy":
-                  return <HierarchyFilterDropdown {...props} />;
+                  return <HierarchyFilterDropdown key={filter} {...props} />;
                 case "search":
                   return (
                     <SearchFilterDropdown
+                      key={filter}
                       {...props}
                       {...searchFiltersPropsMapping[filter]}
                       open={isSelectedFilter}
@@ -96,7 +96,7 @@ export const SelectedFilters = ({
                     />
                   );
                 default:
-                  return <FilterDropdown {...props} />;
+                  return <FilterDropdown key={filter} {...props} />;
               }
             })}
             <a className="resetFilters" onClick={() => resetFilters()}>

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

@@ -4,8 +4,6 @@ import { render, waitForLoad } from "@truedat/test/render";
 import { apiJsonPost } from "@truedat/core/services/api";
 import { AddMemberForm } from "../AddMemberForm";
 
-const user = userEvent.setup({ delay: null });
-
 jest.mock("@truedat/core/services/api", () => {
   const originalModule = jest.requireActual("@truedat/core/services/api");
 
@@ -48,24 +46,23 @@ describe("<AddMemberForm />", () => {
   });
 
   it("calls onSuccess with acl data on submit correctly", async () => {
+    const user = userEvent.setup({ delay: null });
     const rendered = render(<AddMemberForm {...props} />);
     await waitForLoad(rendered);
 
     // Submit button should initially be disabled
-    await waitFor(async () =>
-      expect(
-        await rendered.findByRole("button", { name: /add_member/i }),
-      ).toBeDisabled(),
-    );
+    expect(
+      rendered.getByRole("button", { name: /add_member/i }),
+    ).toBeDisabled();
 
     // Description
     await user.click(await rendered.findByText(/john/i));
     await user.click(await rendered.findByRole("option", { name: "role2" }));
 
     // Submit button should now be enabled
-    await waitFor(async () =>
+    await waitFor(() =>
       expect(
-        await rendered.findByRole("button", { name: /add_member/i }),
+        rendered.getByRole("button", { name: /add_member/i }),
       ).not.toBeDisabled(),
     );
 
@@ -87,6 +84,7 @@ describe("<AddMemberForm />", () => {
   });
 
   it("displays group alias in dropdown when available", async () => {
+    const user = userEvent.setup({ delay: null });
     const rendered = render(<AddMemberForm {...props} />);
     await waitForLoad(rendered);
 
@@ -100,6 +98,7 @@ describe("<AddMemberForm />", () => {
   });
 
   it("displays group name when alias is not available", async () => {
+    const user = userEvent.setup({ delay: null });
     const rendered = render(<AddMemberForm {...props} />);
     await waitForLoad(rendered);
 

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

@@ -38,7 +38,9 @@ describe("<ColoredEdge /> metadata badge", () => {
     const onClick = jest.fn();
     const metadata = { source: "sales", relation: "derives" };
     const rendered = render(
-      <ColoredEdge {...baseProps} data={{ metadata, onClick }} />,
+      <svg>
+        <ColoredEdge {...baseProps} data={{ metadata, onClick }} />
+      </svg>,
     );
     const badge = rendered.container.querySelector(
       ".td-graph-edge-metadata-badge",
@@ -52,7 +54,9 @@ describe("<ColoredEdge /> metadata badge", () => {
   it("does nothing when the edge has metadata but no click handler", () => {
     const onClick = jest.fn();
     const rendered = render(
-      <ColoredEdge {...baseProps} data={{ metadata: { source: "sales" } }} />,
+      <svg>
+        <ColoredEdge {...baseProps} data={{ metadata: { source: "sales" } }} />
+      </svg>,
     );
     const badge = rendered.container.querySelector(
       ".td-graph-edge-metadata-badge",
@@ -80,10 +84,12 @@ describe("<ColoredEdge /> arrow markers", () => {
 
   it("draws the filled arrow at the target for impact edges", () => {
     const rendered = render(
-      <ColoredEdge
-        {...arrowProps}
-        data={{ edgePath: "orthogonal", markerPosition: "target" }}
-      />,
+      <svg>
+        <ColoredEdge
+          {...arrowProps}
+          data={{ edgePath: "orthogonal", markerPosition: "target" }}
+        />
+      </svg>,
     );
     const arrow = rendered.container.querySelector(".td-graph-edge-arrow");
 
@@ -93,10 +99,12 @@ describe("<ColoredEdge /> arrow markers", () => {
 
   it("draws the filled arrow at the source for traceability edges", () => {
     const rendered = render(
-      <ColoredEdge
-        {...arrowProps}
-        data={{ edgePath: "orthogonal", markerPosition: "source" }}
-      />,
+      <svg>
+        <ColoredEdge
+          {...arrowProps}
+          data={{ edgePath: "orthogonal", markerPosition: "source" }}
+        />
+      </svg>,
     );
     const arrow = rendered.container.querySelector(".td-graph-edge-arrow");
 

package/src/i18n/components/__tests__/EditableCell.spec.js

@@ -7,6 +7,17 @@ describe("<EditableCell />", () => {
   const onChange = jest.fn();
   const value = "value";
   const placeholder = "placeholder";
+  const renderCell = (props) =>
+    render(
+      <table>
+        <tbody>
+          <tr>
+            <EditableCell {...props} />
+          </tr>
+        </tbody>
+      </table>,
+      { messages },
+    );
 
   it("matches the latest snapshot", async () => {
     const props = {
@@ -14,7 +25,7 @@ describe("<EditableCell />", () => {
       value,
       placeholder,
     };
-    const rendered = render(<EditableCell {...props} />, { messages });
+    const rendered = renderCell(props);
     await waitForLoad(rendered);
     expect(rendered.container).toMatchSnapshot();
   });
@@ -25,7 +36,7 @@ describe("<EditableCell />", () => {
       value,
       placeholder,
     };
-    const rendered = render(<EditableCell {...props} />, { messages });
+    const rendered = renderCell(props);
     await waitForLoad(rendered);
 
     const user = userEvent.setup({ delay: null });
@@ -39,7 +50,7 @@ describe("<EditableCell />", () => {
       value,
       placeholder,
     };
-    const rendered = render(<EditableCell {...props} />, { messages });
+    const rendered = renderCell(props);
     await waitForLoad(rendered);
 
     const user = userEvent.setup({ delay: null });

package/src/i18n/components/__tests__/__snapshots__/EditableCell.spec.js.snap

@@ -2,29 +2,41 @@
 
 exports[`<EditableCell /> clicking the cell will enter edition mode and match snapshot 1`] = `
 <div>
-  <td
-    class="five wide no-padding"
-  >
-    <div
-      class="ui fluid input"
-    >
-      <input
-        maxlength="255"
-        placeholder="placeholder"
-        type="text"
-        value="value"
-      />
-    </div>
-  </td>
+  <table>
+    <tbody>
+      <tr>
+        <td
+          class="five wide no-padding"
+        >
+          <div
+            class="ui fluid input"
+          >
+            <input
+              maxlength="255"
+              placeholder="placeholder"
+              type="text"
+              value="value"
+            />
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
 </div>
 `;
 
 exports[`<EditableCell /> matches the latest snapshot 1`] = `
 <div>
-  <td
-    class="five wide cursor-pointer"
-  >
-    value
-  </td>
+  <table>
+    <tbody>
+      <tr>
+        <td
+          class="five wide cursor-pointer"
+        >
+          value
+        </td>
+      </tr>
+    </tbody>
+  </table>
 </div>
 `;

package/src/search/FilterMultilevelDropdown.js

@@ -185,7 +185,7 @@ export default function FilterMultilevelDropdown() {
                 open={_.contains(option.id)(open)}
                 canOpen={_.negate(_.isEmpty)(option.children)}
                 selected={_.contains(option.id)(selected)}
-                {...option}
+                {..._.omit("key")(option)}
               />
             ))(filteredOptions)}
           </Dropdown.Menu>

package/src/search/__tests__/SearchContext.spec.js

@@ -1,4 +1,4 @@
-import { waitFor } from "@testing-library/react";
+import { act, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { render } from "@truedat/test/render";
 import {
@@ -60,6 +60,12 @@ const renderOpts = {
   },
 };
 
+const runAllTimers = async () => {
+  await act(async () => {
+    jest.runAllTimers();
+  });
+};
+
 describe("<SearchContextProvider />", () => {
   const ChildComponent = () => <div>Child Component</div>;
   const ContextConsumer = ({ onSearchChangeSpy }) => {
@@ -180,7 +186,7 @@ describe("<SearchContextProvider />", () => {
       renderOpts,
     );
 
-    jest.runAllTimers();
+    await runAllTimers();
 
     expect(triggerFiltersSpy).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -215,7 +221,7 @@ describe("<SearchContextProvider />", () => {
       renderOpts,
     );
 
-    jest.runAllTimers();
+    await runAllTimers();
 
     expect(triggerSearchSpy).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -253,7 +259,7 @@ describe("<SearchContextProvider />", () => {
       renderOpts,
     );
 
-    jest.runAllTimers();
+    await runAllTimers();
 
     expect(triggerSearchSpy).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -302,7 +308,7 @@ describe("<SearchContextProvider />", () => {
       renderOpts,
     );
 
-    jest.runAllTimers();
+    await runAllTimers();
 
     await waitFor(() =>
       expect(
@@ -339,7 +345,7 @@ describe("<SearchContextProvider />", () => {
       renderOpts,
     );
 
-    jest.runAllTimers();
+    await runAllTimers();
 
     await waitFor(() =>
       expect(
@@ -363,7 +369,7 @@ describe("<SearchContextProvider />", () => {
       renderOpts,
     );
 
-    jest.runAllTimers();
+    await runAllTimers();
 
     await user.click(rendered.getByText(/set-callback/i));
 
@@ -437,7 +443,7 @@ describe("<SearchContextProvider />", () => {
       renderOpts,
     );
 
-    jest.runAllTimers();
+    await runAllTimers();
 
     await user.click(rendered.getByText(/set-callback/i));
     await user.click(rendered.getByText(/sort-empty/i));
@@ -536,14 +542,14 @@ describe("<SearchContextProvider />", () => {
       renderOpts,
     );
 
-    jest.runAllTimers();
+    await runAllTimers();
 
     expect(triggerSearchSpy).toHaveBeenCalledTimes(1);
     const firstCallArgs = triggerSearchSpy.mock.calls[0][0];
 
     await user.click(rendered.getByText(/refresh/i));
 
-    jest.runAllTimers();
+    await runAllTimers();
 
     expect(triggerSearchSpy).toHaveBeenCalledTimes(2);
     expect(triggerSearchSpy).toHaveBeenLastCalledWith(

package/src/search/__tests__/SearchWidget.spec.js

@@ -3,8 +3,14 @@ import { render } from "@truedat/test/render";
 import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import SearchContextWrapper from "@truedat/core/components/common/SearchContextWrapper";
+import { useUserFilters } from "@truedat/core/hooks/useUserFilters";
 import SearchWidget from "../SearchWidget";
 
+jest.mock("@truedat/core/hooks/useUserFilters", () => ({
+  ...jest.requireActual("@truedat/core/hooks/useUserFilters"),
+  useUserFilters: jest.fn(() => ({ userFilters: [], loading: false })),
+}));
+
 const messages = {
   en: {
     "search.placeholder": "Search...",
@@ -40,6 +46,7 @@ describe("<SearchWidget/>", () => {
       </SearchContextWrapper>,
       renderOpts,
     );
+    expect(useUserFilters).toHaveBeenCalledWith("foo", undefined);
     expect(container).toMatchSnapshot();
   });
 

package/src/selectors/__tests__/makeActiveFiltersSelector.spec.js

@@ -18,4 +18,24 @@ describe("selectors: makeActiveFiltersSelector", () => {
       makeActiveFiltersSelector("conceptActiveFilters")(state, props),
     ).toEqual({ foo: "bar", status: ["pending"] });
   });
+
+  it("keeps the same result for equal filters and updates it when filters change", () => {
+    const selector = makeActiveFiltersSelector("conceptActiveFilters");
+    const first = selector(
+      { conceptActiveFilters: { foo: "bar" } },
+      { defaultFilters: { status: ["pending"] } },
+    );
+    const equal = selector(
+      { conceptActiveFilters: { foo: "bar" } },
+      { defaultFilters: { status: ["pending"] } },
+    );
+    const changed = selector(
+      { conceptActiveFilters: { foo: "baz" } },
+      { defaultFilters: { status: ["pending"] } },
+    );
+
+    expect(equal).toBe(first);
+    expect(changed).not.toBe(first);
+    expect(changed).toEqual({ foo: "baz", status: ["pending"] });
+  });
 });

package/src/selectors/__tests__/makeSearchQuerySelector.spec.js

@@ -1,4 +1,7 @@
-import { makeSearchQuerySelector } from "../makeSearchQuerySelector";
+import {
+  makeSearchQuerySelector,
+  queryPropsSelector,
+} from "../makeSearchQuerySelector";
 
 const searchQuerySelector = makeSearchQuerySelector(
   "conceptQuery",
@@ -7,6 +10,40 @@ const searchQuerySelector = makeSearchQuerySelector(
 );
 
 describe("selectors: makeSearchQuerySelector", () => {
+  it("keeps equal query props referentially stable", () => {
+    const first = queryPropsSelector({}, { pageSize: 10, ignored: "first" });
+    const equal = queryPropsSelector({}, { pageSize: 10, ignored: "second" });
+    const changed = queryPropsSelector({}, { pageSize: 20 });
+
+    expect(equal).toBe(first);
+    expect(changed).not.toBe(first);
+    expect(changed).toEqual({ pageSize: 20 });
+  });
+
+  it("keeps equal search payloads referentially stable", () => {
+    const selector = makeSearchQuerySelector(
+      "conceptQuery",
+      "conceptActiveFilters",
+      "dateFilter",
+    );
+    const first = selector({
+      conceptQuery: { query: "foo" },
+      conceptActiveFilters: { status: ["draft"] },
+    });
+    const equal = selector({
+      conceptQuery: { query: "foo" },
+      conceptActiveFilters: { status: ["draft"] },
+    });
+    const changed = selector({
+      conceptQuery: { query: "bar" },
+      conceptActiveFilters: { status: ["draft"] },
+    });
+
+    expect(equal).toBe(first);
+    expect(changed).not.toBe(first);
+    expect(changed).toMatchObject({ query: "bar" });
+  });
+
   describe("with an empty query string", () => {
     const conceptQuery = { query: "   " };
     const conceptActiveFilters = { foo: ["foo1"], bar: [] };

package/src/selectors/makeActiveFiltersSelector.js

@@ -1,17 +1,14 @@
 import _ from "lodash/fp";
-import { createSelector, createSelectorCreator, lruMemoize } from "reselect";
+import { createSelector, lruMemoize } from "reselect";
 
 const defaultFilters = false;
 
 export const makeActiveFiltersSelector = (activeFiltersProp) => {
-  const activeFiltersSelector = createSelector(
+  return createSelector(
     _.prop(activeFiltersProp),
     (_state, props) => _.propOr(defaultFilters, "defaultFilters")(props),
     (activeFilters, defaultFilters) =>
       defaultFilters ? { ...defaultFilters, ...activeFilters } : activeFilters,
-  );
-  return createSelectorCreator(lruMemoize, _.isEqual)(
-    activeFiltersSelector,
-    _.identity,
+    { memoize: lruMemoize, memoizeOptions: { resultEqualityCheck: _.isEqual } },
   );
 };

package/src/selectors/makeSearchQuerySelector.js

@@ -1,20 +1,12 @@
-import {
-  identity,
-  isEmpty,
-  isEqual,
-  mapKeys,
-  omitBy,
-  pick,
-  prop,
-  trim,
-} from "lodash/fp";
+import { isEmpty, isEqual, mapKeys, omitBy, pick, prop, trim } from "lodash/fp";
 import { createSelector, createSelectorCreator, lruMemoize } from "reselect";
 import { getSearchPayload } from "../services/filters";
 import { makeDateFiltersSelector } from "./makeDateFiltersSelector";
 
-export const queryPropsSelector = createSelectorCreator(lruMemoize, isEqual)(
-  (_state, props) => pick(["defaultFilters", "linkable", "pageSize"])(props),
-  identity,
+export const queryPropsSelector = createSelector(
+  (_state, props) => props,
+  (props) => pick(["defaultFilters", "linkable", "pageSize"])(props),
+  { memoize: lruMemoize, memoizeOptions: { resultEqualityCheck: isEqual } },
 );
 
 export const makeSearchFiltersSelector = (activeFiltersProp, dateFilterProp) =>
@@ -38,7 +30,7 @@ export const makeSearchQuerySelector = (
     activeFiltersProp,
     dateFilterProp,
   );
-  const searchQuerySelector = createSelector(
+  return createSelector(
     prop(queryProp),
     searchFiltersSelector,
     queryPropsSelector,
@@ -61,9 +53,6 @@ export const makeSearchQuerySelector = (
         : { must: filters, page: page - 1, sort: sort };
       return getSearchPayload(q, ownProps);
     },
-  );
-  return createSelectorCreator(lruMemoize, isEqual)(
-    searchQuerySelector,
-    identity,
+    { memoize: lruMemoize, memoizeOptions: { resultEqualityCheck: isEqual } },
   );
 };