@truedat/core 8.4.2 → 8.4.3

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

@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DomainSearchFilter /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    aria-expanded="true"
+    class="ui active visible floating item dropdown domain-search-filter"
+    name="domainSearchFilter"
+    role="listbox"
+    tabindex="0"
+  >
+    <div
+      class="ui label"
+    >
+      taxonomy
+      <i
+        aria-hidden="true"
+        class="delete icon"
+      />
+    </div>
+    <div
+      class="menu transition dimmable visible"
+    >
+      <div
+        class="ui left icon input search"
+      >
+        <input
+          type="text"
+        />
+        <i
+          aria-hidden="true"
+          class="search icon"
+        />
+      </div>
+      <div
+        class="scrolling menu transition"
+      >
+        <div>
+          <span>
+            Domain 1
+          </span>
+          <button
+            type="button"
+          >
+            open-1
+          </button>
+          <button
+            type="button"
+          >
+            select-1
+          </button>
+          <button
+            type="button"
+          >
+            toggle-1
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,130 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DomainSearchFilterItem /> matches snapshot when partial selected is true 1`] = `
+<div>
+  <div
+    class="item"
+    role="option"
+  >
+    <div
+      class="item-content"
+      style="margin-left: 0px; padding-left: 5px;"
+    >
+      <i
+        aria-hidden="true"
+        class="chevron right icon"
+      />
+      <i
+        aria-hidden="true"
+        class="minus square outline icon"
+      />
+      <span
+        style="opacity: 1;"
+        title="Domain 1"
+      >
+        Domain 1
+      </span>
+      <button
+        class="toggle-children"
+        type="button"
+      >
+        <span
+          class="toggle-children-content"
+          title=""
+        >
+          <i
+            aria-hidden="true"
+            class="toggle off icon"
+          />
+        </span>
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<DomainSearchFilterItem /> matches snapshot when selected is true 1`] = `
+<div>
+  <div
+    class="item"
+    role="option"
+  >
+    <div
+      class="item-content"
+      style="margin-left: 0px; padding-left: 5px;"
+    >
+      <i
+        aria-hidden="true"
+        class="chevron right icon"
+      />
+      <i
+        aria-hidden="true"
+        class="check square outline icon"
+      />
+      <span
+        style="opacity: 1;"
+        title="Domain 1"
+      >
+        Domain 1
+      </span>
+      <button
+        class="toggle-children"
+        type="button"
+      >
+        <span
+          class="toggle-children-content"
+          title=""
+        >
+          <i
+            aria-hidden="true"
+            class="toggle off icon"
+          />
+        </span>
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<DomainSearchFilterItem /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="item"
+    role="option"
+  >
+    <div
+      class="item-content"
+      style="margin-left: 0px; padding-left: 5px;"
+    >
+      <i
+        aria-hidden="true"
+        class="chevron right icon"
+      />
+      <i
+        aria-hidden="true"
+        class="square outline icon"
+      />
+      <span
+        style="opacity: 1;"
+        title="Domain 1"
+      >
+        Domain 1
+      </span>
+      <button
+        class="toggle-children"
+        type="button"
+      >
+        <span
+          class="toggle-children-content"
+          title=""
+        >
+          <i
+            aria-hidden="true"
+            class="toggle off icon"
+          />
+        </span>
+      </button>
+    </div>
+  </div>
+</div>
+`;

package/src/components/index.js

@@ -17,6 +17,7 @@ import DateFilter from "./DateFilter";
 import DateRangeFilter from "./DateRangeFilter";
 import DateTime from "./DateTime";
 import DescriptionInput from "./DescriptionInput";
+import DomainSearchFilter from "./DomainSearchFilter";
 import DomainSelector from "./DomainSelector";
 import DropdownMenuItem from "./DropdownMenuItem";
 import ErrorBoundary from "./ErrorBoundary";
@@ -81,6 +82,7 @@ export {
   DateRangeFilter,
   DateTime,
   DescriptionInput,
+  DomainSearchFilter,
   DomainSelector,
   DropdownMenuItem,
   ErrorBoundary,

package/src/search/SearchContext.js

@@ -30,6 +30,7 @@ export const SearchContextProvider = (props) => {
   const pageSize = _.propOr(7, "pageSize")(props);
   const userFiltersType = _.prop("userFiltersType")(props);
   const userFilterScope = _.prop("userFilterScope")(props);
+  const useDomainSearchFilter = _.propOr(false, "useDomainSearchFilter")(props);
   const omitFilters = _.propOr([], "omitFilters")(props);
   const translations = _.propOr(() => ({}), "translations")(props);
   const filtersGroup = _.propOr([], "filtersGroup")(props);
@@ -257,13 +258,22 @@ export const SearchContextProvider = (props) => {
     enrichSearchPayload,
   ]);
 
+  const mapDomainFilterKey = (key) => {
+    if (!useDomainSearchFilter) return key;
+    return key === "taxonomy" ? "domain_ids" : key;
+  };
+
   const getMustFilters = (filters) =>
-    _.pickBy((value, key) => !key.startsWith("mustnot."))(filters);
+    _.flow(
+      _.pickBy((value, key) => !key.startsWith("mustnot.")),
+      _.mapKeys(mapDomainFilterKey)
+    )(filters);
 
   const getMustNotFilters = (filters) =>
     _.flow(
       _.pickBy((value, key) => key.startsWith("mustnot.")),
-      _.mapKeys((key) => key.replace("mustnot.", ""))
+      _.mapKeys((key) => key.replace("mustnot.", "")),
+      _.mapKeys(mapDomainFilterKey)
     )(filters);
 
   const makeFiltersGroup = (filters, groups) =>
@@ -377,6 +387,7 @@ export const SearchContextProvider = (props) => {
 
     userFiltersType,
     userFilterScope,
+    useDomainSearchFilter,
 
     setOnSearchChange,
   };

package/src/search/SearchSelectedFilters.js

@@ -7,6 +7,7 @@ import UserFilters from "./UserFilters";
 import FilterDropdown from "./FilterDropdown";
 import FilterQueryDropdown from "./FilterQueryDropdown";
 import FilterMultilevelDropdown from "./FilterMultilevelDropdown";
+import DomainSearchFilter from "../components/DomainSearchFilter";
 import HierarchyFilterDropdown from "./HierarchyFilterDropdown";
 import SearchContext, { useSearchContext } from "./SearchContext";
 
@@ -21,6 +22,7 @@ export default function SearchSelectedFilters() {
     activeFilterName,
     activeFilterValues,
     userFiltersType,
+    useDomainSearchFilter,
   } = context;
   const [selectedUserFilter, setSelectedUserFilter] = useState();
   const { pathname } = useLocation();
@@ -56,7 +58,21 @@ export default function SearchSelectedFilters() {
                   key={filter}
                 >
                   {filterType === "domain" ? (
-                    <FilterMultilevelDropdown />
+                    useDomainSearchFilter ? (
+                      <DomainSearchFilter
+                        name={context.name}
+                        activeValues={context.activeFilterSelectedValues}
+                        closeFilter={context.closeFilter}
+                        filter={filter}
+                        loading={context.loadingFilters}
+                        openFilter={context.openFilter}
+                        options={options}
+                        removeFilter={context.removeFilter}
+                        toggleFilterValue={context.toggleFilterValue}
+                      />
+                    ) : (
+                      <FilterMultilevelDropdown />
+                    )
                   ) : filterType === "hierarchy" ? (
                     <HierarchyFilterDropdown />
                   ) : _.size(options) >= MIN_LENGTH_FOR_QUERY_DROPDOWN ? (

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

@@ -1,5 +1,10 @@
+import { waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { render } from "@truedat/test/render";
-import { SearchContextProvider } from "@truedat/core/search/SearchContext";
+import {
+  SearchContextProvider,
+  useSearchContext,
+} from "@truedat/core/search/SearchContext";
 
 jest.mock("react-router", () => ({
   ...jest.requireActual("react-router"),
@@ -57,6 +62,82 @@ const renderOpts = {
 
 describe("<SearchContextProvider />", () => {
   const ChildComponent = () => <div>Child Component</div>;
+  const ContextConsumer = ({ onSearchChangeSpy }) => {
+    const {
+      availableGroupedFilters,
+      availableFilters,
+      allActiveFilters,
+      hiddenFilters,
+      handleSortSelection,
+      removeFilter,
+      removeHiddenFilter,
+      sortColumn,
+      sortDirection,
+      toggleFilterValue,
+      toggleHiddenFilterValue,
+      setQuery,
+      query,
+      setOnSearchChange,
+    } = useSearchContext();
+
+    return (
+      <div>
+        <button onClick={() => setOnSearchChange(onSearchChangeSpy)}>
+          set-callback
+        </button>
+        <button
+          onClick={() =>
+            toggleFilterValue({ filter: "status", value: "draft" })
+          }
+        >
+          toggle-filter-draft
+        </button>
+        <button
+          onClick={() =>
+            toggleFilterValue({
+              filter: "status",
+              value: ["draft", "published"],
+            })
+          }
+        >
+          replace-filter-array
+        </button>
+        <button onClick={() => removeFilter({ filter: "status" })}>
+          remove-filter-status
+        </button>
+        <button
+          onClick={() =>
+            toggleHiddenFilterValue({ filter: "taxonomy", value: "10" })
+          }
+        >
+          toggle-hidden-taxonomy
+        </button>
+        <button
+          onClick={() =>
+            toggleHiddenFilterValue({ filter: "taxonomy", value: ["10", "20"] })
+          }
+        >
+          replace-hidden-array
+        </button>
+        <button onClick={() => removeHiddenFilter({ filter: "taxonomy" })}>
+          remove-hidden-taxonomy
+        </button>
+        <button onClick={() => handleSortSelection()}>sort-empty</button>
+        <button onClick={() => handleSortSelection("status")}>
+          sort-status
+        </button>
+        <button onClick={() => setQuery("abc")}>set-query</button>
+        <button onClick={() => setQuery("")}>clean-query</button>
+        <div>{`sort-column:${sortColumn}`}</div>
+        <div>{`sort-direction:${sortDirection}`}</div>
+        <div>{`query:${query}`}</div>
+        <div>{`available:${JSON.stringify(availableFilters)}`}</div>
+        <div>{`active:${JSON.stringify(allActiveFilters)}`}</div>
+        <div>{`hidden:${JSON.stringify(hiddenFilters)}`}</div>
+        <div>{`grouped:${JSON.stringify(availableGroupedFilters)}`}</div>
+      </div>
+    );
+  };
 
   it(`matches the latest snapshot`, async () => {
     jest
@@ -102,4 +183,272 @@ describe("<SearchContextProvider />", () => {
     );
     jest.useRealTimers();
   });
+
+  it("passes enrichSearchPayload to search trigger", async () => {
+    jest.useFakeTimers();
+    const triggerSearchSpy = jest.fn().mockReturnValue({
+      then: (callback) =>
+        callback({
+          data,
+          headers: {},
+        }),
+    });
+    const useSearchSpy = () => ({ trigger: triggerSearchSpy });
+
+    const enrichSearchPayload = { link_structures: true };
+    const props = {
+      ...searchProps,
+      useSearch: useSearchSpy,
+      enrichSearchPayload,
+    };
+
+    render(
+      <SearchContextProvider {...props}>
+        <ChildComponent />
+      </SearchContextProvider>,
+      renderOpts
+    );
+
+    jest.runAllTimers();
+
+    expect(triggerSearchSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        link_structures: true,
+      })
+    );
+    jest.useRealTimers();
+  });
+
+  it("maps taxonomy into domain_ids when useDomainSearchFilter is enabled", async () => {
+    jest.useFakeTimers();
+    const triggerSearchSpy = jest.fn().mockReturnValue({
+      then: (callback) =>
+        callback({
+          data,
+          headers: {},
+        }),
+    });
+    const triggerFiltersSpy = jest.fn().mockReturnValue({
+      then: (callback) => callback({ data: [] }),
+    });
+    const useSearchSpy = () => ({ trigger: triggerSearchSpy });
+    const useFiltersSpy = () => ({ trigger: triggerFiltersSpy });
+
+    render(
+      <SearchContextProvider
+        {...searchProps}
+        useSearch={useSearchSpy}
+        useFilters={useFiltersSpy}
+        useDomainSearchFilter
+        defaultFilters={{ taxonomy: ["100"], "mustnot.taxonomy": ["200"] }}
+      >
+        <ChildComponent />
+      </SearchContextProvider>,
+      renderOpts
+    );
+
+    jest.runAllTimers();
+
+    expect(triggerSearchSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        must: expect.objectContaining({ domain_ids: ["100"] }),
+        must_not: expect.objectContaining({ domain_ids: ["200"] }),
+      })
+    );
+
+    expect(triggerFiltersSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        must: expect.objectContaining({ domain_ids: ["100"] }),
+        must_not: expect.objectContaining({ domain_ids: ["200"] }),
+      })
+    );
+    jest.useRealTimers();
+  });
+
+  it("groups filters and removes internal prefixed groups", async () => {
+    jest.useFakeTimers();
+    const triggerFiltersSpy = jest.fn().mockReturnValue({
+      then: (callback) =>
+        callback({
+          data: {
+            data: {
+              status: { type: "term", values: ["draft", "published"] },
+              taxonomy: { type: "term", values: ["10", "20"] },
+              internal: { type: "term", values: ["x", "y"] },
+              one_value: { type: "term", values: ["only"] },
+            },
+          },
+        }),
+    });
+    const useFiltersSpy = () => ({ trigger: triggerFiltersSpy });
+
+    const rendered = render(
+      <SearchContextProvider
+        {...searchProps}
+        useFilters={useFiltersSpy}
+        filtersGroup={[
+          ["main", ["status", "taxonomy"]],
+          ["_internal", ["internal"]],
+        ]}
+      >
+        <ContextConsumer onSearchChangeSpy={jest.fn()} />
+      </SearchContextProvider>,
+      renderOpts
+    );
+
+    jest.runAllTimers();
+
+    await waitFor(() =>
+      expect(
+        rendered.getByText(/grouped:\[\["main",\["status","taxonomy"\]\]\]/i)
+      ).toBeInTheDocument()
+    );
+    await waitFor(() =>
+      expect(
+        rendered.getByText(/available:\["status","taxonomy","internal"\]/i)
+      ).toBeInTheDocument()
+    );
+    jest.useRealTimers();
+  });
+
+  it("handles active and hidden filter toggles and removals", async () => {
+    jest.useFakeTimers();
+    const user = userEvent.setup({
+      delay: null,
+      advanceTimers: jest.advanceTimersByTime,
+    });
+    const onSearchChangeSpy = jest.fn();
+    const rendered = render(
+      <SearchContextProvider {...searchProps}>
+        <ContextConsumer onSearchChangeSpy={onSearchChangeSpy} />
+      </SearchContextProvider>,
+      renderOpts
+    );
+
+    jest.runAllTimers();
+
+    await user.click(rendered.getByText(/set-callback/i));
+
+    await user.click(rendered.getByText(/toggle-filter-draft/i));
+    await waitFor(() =>
+      expect(
+        rendered.getByText(/active:\{"status":\["draft"\]\}/i)
+      ).toBeInTheDocument()
+    );
+
+    await user.click(rendered.getByText(/toggle-filter-draft/i));
+    await waitFor(() =>
+      expect(
+        rendered.getByText(/active:\{"status":\[\]\}/i)
+      ).toBeInTheDocument()
+    );
+
+    await user.click(rendered.getByText(/replace-filter-array/i));
+    await waitFor(() =>
+      expect(
+        rendered.getByText(/active:\{"status":\["draft","published"\]\}/i)
+      ).toBeInTheDocument()
+    );
+
+    await user.click(rendered.getByText(/remove-filter-status/i));
+    await waitFor(() =>
+      expect(rendered.getByText(/active:\{\}/i)).toBeInTheDocument()
+    );
+
+    await user.click(rendered.getByText(/toggle-hidden-taxonomy/i));
+    await waitFor(() =>
+      expect(
+        rendered.getByText(/hidden:\{"taxonomy":\["10"\]\}/i)
+      ).toBeInTheDocument()
+    );
+
+    await user.click(rendered.getByText(/toggle-hidden-taxonomy/i));
+    await waitFor(() =>
+      expect(
+        rendered.getByText(/hidden:\{"taxonomy":\[\]\}/i)
+      ).toBeInTheDocument()
+    );
+
+    await user.click(rendered.getByText(/replace-hidden-array/i));
+    await waitFor(() =>
+      expect(
+        rendered.getByText(/hidden:\{"taxonomy":\["10","20"\]\}/i)
+      ).toBeInTheDocument()
+    );
+
+    await user.click(rendered.getByText(/remove-hidden-taxonomy/i));
+    await waitFor(() =>
+      expect(rendered.getByText(/hidden:\{\}/i)).toBeInTheDocument()
+    );
+
+    await waitFor(() => expect(onSearchChangeSpy).toHaveBeenCalled());
+    jest.useRealTimers();
+  });
+
+  it("handles sort selection transitions and setQuery score sort", async () => {
+    jest.useFakeTimers();
+    const user = userEvent.setup({
+      delay: null,
+      advanceTimers: jest.advanceTimersByTime,
+    });
+    const onSearchChangeSpy = jest.fn();
+    const rendered = render(
+      <SearchContextProvider {...searchProps}>
+        <ContextConsumer onSearchChangeSpy={onSearchChangeSpy} />
+      </SearchContextProvider>,
+      renderOpts
+    );
+
+    jest.runAllTimers();
+
+    await user.click(rendered.getByText(/set-callback/i));
+    await user.click(rendered.getByText(/sort-empty/i));
+    expect(rendered.getByText(/sort-column:name\.raw/i)).toBeInTheDocument();
+    expect(rendered.getByText(/sort-direction:ascending/i)).toBeInTheDocument();
+
+    await user.click(rendered.getByText(/sort-status/i));
+    await waitFor(() =>
+      expect(rendered.getByText(/sort-column:status/i)).toBeInTheDocument()
+    );
+    await waitFor(() =>
+      expect(
+        rendered.getByText(/sort-direction:ascending/i)
+      ).toBeInTheDocument()
+    );
+
+    await user.click(rendered.getByText(/sort-status/i));
+    await waitFor(() =>
+      expect(
+        rendered.getByText(/sort-direction:descending/i)
+      ).toBeInTheDocument()
+    );
+
+    await user.click(rendered.getByText(/set-query/i));
+    await waitFor(() =>
+      expect(rendered.getByText(/sort-column:_score/i)).toBeInTheDocument()
+    );
+    await waitFor(() =>
+      expect(
+        rendered.getByText(/sort-direction:descending/i)
+      ).toBeInTheDocument()
+    );
+    await waitFor(() =>
+      expect(rendered.getByText(/query:abc/i)).toBeInTheDocument()
+    );
+
+    await user.click(rendered.getByText(/clean-query/i));
+    await waitFor(() =>
+      expect(rendered.getByText(/sort-column:name\.raw/i)).toBeInTheDocument()
+    );
+    await waitFor(() =>
+      expect(
+        rendered.getByText(/sort-direction:ascending/i)
+      ).toBeInTheDocument()
+    );
+    await waitFor(() =>
+      expect(rendered.getByText(/^query:$/i)).toBeInTheDocument()
+    );
+    await waitFor(() => expect(onSearchChangeSpy).toHaveBeenCalled());
+    jest.useRealTimers();
+  });
 });