@truedat/core 8.4.1 → 8.4.3

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

@@ -0,0 +1,269 @@
+import userEvent from "@testing-library/user-event";
+import { useLocation } from "react-router";
+
+import { render, waitForLoad } from "@truedat/test/render";
+
+import SearchContext, { useSearchContext } from "../SearchContext";
+import SearchSelectedFilters from "../SearchSelectedFilters";
+
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  useLocation: jest.fn(),
+}));
+
+jest.mock("../SearchContext", () => ({
+  __esModule: true,
+  default: ({ children }) => <>{children}</>,
+  useSearchContext: jest.fn(),
+}));
+
+jest.mock("../UserFilters", () => ({
+  __esModule: true,
+  default: ({ domainId, selectedUserFilter }) => (
+    <div
+      data-testid="user-filters"
+      data-domain-id={domainId === null ? "null" : String(domainId)}
+      data-selected-user-filter={selectedUserFilter ?? "undefined"}
+    />
+  ),
+}));
+
+jest.mock("../ModalSaveFilter", () => ({
+  __esModule: true,
+  default: () => <div data-testid="modal-save-filter" />,
+}));
+
+jest.mock("../FilterDropdown", () => ({
+  __esModule: true,
+  default: () => <div data-testid="filter-dropdown" />,
+}));
+
+jest.mock("../FilterQueryDropdown", () => ({
+  __esModule: true,
+  default: () => <div data-testid="filter-query-dropdown" />,
+}));
+
+jest.mock("../FilterMultilevelDropdown", () => ({
+  __esModule: true,
+  default: () => <div data-testid="filter-multilevel-dropdown" />,
+}));
+
+jest.mock("../HierarchyFilterDropdown", () => ({
+  __esModule: true,
+  default: () => <div data-testid="hierarchy-filter-dropdown" />,
+}));
+
+jest.mock("../../components/DomainSearchFilter", () => ({
+  __esModule: true,
+  default: ({ filter, options }) => (
+    <div
+      data-testid="domain-search-filter"
+      data-filter={filter}
+      data-options-size={options ? String(options.length) : "null"}
+    />
+  ),
+}));
+
+describe("<SearchSelectedFilters />", () => {
+  const resetFilters = jest.fn();
+  const openFilter = jest.fn();
+  const closeFilter = jest.fn();
+  const removeFilter = jest.fn();
+  const toggleFilterValue = jest.fn();
+
+  const messages = {
+    "search.applied_filters": "applied filters",
+    "search.clear_filters": "clear filters",
+  };
+
+  const buildContext = (override = {}) => ({
+    selectedFilters: [],
+    resetFilters,
+    filterTypes: {},
+    activeFilterName: null,
+    activeFilterValues: [],
+    userFiltersType: null,
+    useDomainSearchFilter: false,
+    activeFilterSelectedValues: [],
+    name: "name",
+    loadingFilters: false,
+    openFilter,
+    closeFilter,
+    removeFilter,
+    toggleFilterValue,
+    ...override,
+  });
+
+  const renderOpts = {
+    messages: {
+      en: messages,
+    },
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    useLocation.mockReturnValue({ pathname: "/concepts" });
+    useSearchContext.mockReturnValue(buildContext());
+  });
+
+  it("does not render applied filters section when there are no selected filters", async () => {
+    const rendered = render(<SearchSelectedFilters />, renderOpts);
+    await waitForLoad(rendered);
+
+    expect(rendered.queryByText(/applied filters/i)).toBeNull();
+    expect(rendered.queryByText(/clear filters/i)).toBeNull();
+  });
+
+  it("renders user filters with taxonomy domain id in taxonomy routes", async () => {
+    useLocation.mockReturnValue({ pathname: "/domains/123/structures" });
+    useSearchContext.mockReturnValue(
+      buildContext({
+        userFiltersType: "business_concept_user_filters",
+      })
+    );
+    const rendered = render(<SearchSelectedFilters />, renderOpts);
+    await waitForLoad(rendered);
+
+    expect(rendered.getByTestId("user-filters")).toHaveAttribute(
+      "data-domain-id",
+      "123"
+    );
+  });
+
+  it("renders user filters with null domain id in non taxonomy routes", async () => {
+    useLocation.mockReturnValue({ pathname: "/concepts" });
+    useSearchContext.mockReturnValue(
+      buildContext({
+        userFiltersType: "business_concept_user_filters",
+      })
+    );
+    const rendered = render(<SearchSelectedFilters />, renderOpts);
+    await waitForLoad(rendered);
+
+    expect(rendered.getByTestId("user-filters")).toHaveAttribute(
+      "data-domain-id",
+      "null"
+    );
+  });
+
+  it("renders domain search filter for domain filter type when feature flag is enabled", async () => {
+    useSearchContext.mockReturnValue(
+      buildContext({
+        selectedFilters: ["taxonomy"],
+        filterTypes: { taxonomy: "domain" },
+        activeFilterName: "taxonomy",
+        activeFilterValues: [{ id: 1 }, { id: 2 }],
+        useDomainSearchFilter: true,
+      })
+    );
+    const rendered = render(<SearchSelectedFilters />, renderOpts);
+    await waitForLoad(rendered);
+
+    expect(rendered.getByTestId("domain-search-filter")).toHaveAttribute(
+      "data-filter",
+      "taxonomy"
+    );
+    expect(rendered.getByTestId("domain-search-filter")).toHaveAttribute(
+      "data-options-size",
+      "2"
+    );
+  });
+
+  it("renders multilevel dropdown for domain filter type when feature flag is disabled", async () => {
+    useSearchContext.mockReturnValue(
+      buildContext({
+        selectedFilters: ["taxonomy"],
+        filterTypes: { taxonomy: "domain" },
+        useDomainSearchFilter: false,
+      })
+    );
+    const rendered = render(<SearchSelectedFilters />, renderOpts);
+    await waitForLoad(rendered);
+
+    expect(rendered.getByTestId("filter-multilevel-dropdown")).toBeInTheDocument();
+  });
+
+  it("renders hierarchy dropdown for hierarchy filter type", async () => {
+    useSearchContext.mockReturnValue(
+      buildContext({
+        selectedFilters: ["hierarchy_field"],
+        filterTypes: { hierarchy_field: "hierarchy" },
+      })
+    );
+    const rendered = render(<SearchSelectedFilters />, renderOpts);
+    await waitForLoad(rendered);
+
+    expect(rendered.getByTestId("hierarchy-filter-dropdown")).toBeInTheDocument();
+  });
+
+  it("renders query dropdown when active filter options length is greater than or equal to eight", async () => {
+    useSearchContext.mockReturnValue(
+      buildContext({
+        selectedFilters: ["status"],
+        filterTypes: { status: "term" },
+        activeFilterName: "status",
+        activeFilterValues: ["a", "b", "c", "d", "e", "f", "g", "h"],
+      })
+    );
+    const rendered = render(<SearchSelectedFilters />, renderOpts);
+    await waitForLoad(rendered);
+
+    expect(rendered.getByTestId("filter-query-dropdown")).toBeInTheDocument();
+  });
+
+  it("renders default dropdown when active filter options length is less than eight", async () => {
+    useSearchContext.mockReturnValue(
+      buildContext({
+        selectedFilters: ["status"],
+        filterTypes: { status: "term" },
+        activeFilterName: "status",
+        activeFilterValues: ["a", "b", "c"],
+      })
+    );
+    const rendered = render(<SearchSelectedFilters />, renderOpts);
+    await waitForLoad(rendered);
+
+    expect(rendered.getByTestId("filter-dropdown")).toBeInTheDocument();
+  });
+
+  it("calls reset filters and clears selected user filter when clear filters is clicked", async () => {
+    const user = userEvent.setup({ delay: null });
+    useSearchContext.mockReturnValue(
+      buildContext({
+        selectedFilters: ["status"],
+        filterTypes: { status: "term" },
+        userFiltersType: "business_concept_user_filters",
+      })
+    );
+    const rendered = render(<SearchSelectedFilters />, renderOpts);
+    await waitForLoad(rendered);
+
+    expect(resetFilters).toHaveBeenCalledTimes(0);
+    expect(rendered.getByTestId("user-filters")).toHaveAttribute(
+      "data-selected-user-filter",
+      "undefined"
+    );
+
+    await user.click(rendered.getByText(/clear filters/i));
+
+    expect(resetFilters).toHaveBeenCalledTimes(1);
+    expect(rendered.getByTestId("user-filters")).toHaveAttribute(
+      "data-selected-user-filter",
+      ""
+    );
+  });
+
+  it("renders save filter modal only when user filters are enabled and there are selected filters", async () => {
+    useSearchContext.mockReturnValue(
+      buildContext({
+        selectedFilters: ["status"],
+        filterTypes: { status: "term" },
+        userFiltersType: "business_concept_user_filters",
+      })
+    );
+    const rendered = render(<SearchSelectedFilters />, renderOpts);
+    await waitForLoad(rendered);
+
+    expect(rendered.getByTestId("modal-save-filter")).toBeInTheDocument();
+  });
+});

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

@@ -82,4 +82,44 @@ describe("selectors: makeSearchQuerySelector", () => {
       });
     });
   });
+
+  describe("with useDomainSearchFilter enabled", () => {
+    const searchQuerySelectorWithDomainFilter = makeSearchQuerySelector(
+      "conceptQuery",
+      "conceptActiveFilters",
+      undefined,
+      { useDomainSearchFilter: true }
+    );
+
+    it("maps must.taxonomy to must.domain_ids", () => {
+      const state = {
+        conceptQuery: { query: "" },
+        conceptActiveFilters: { taxonomy: [1, 2], foo: ["bar"] },
+      };
+
+      expect(searchQuerySelectorWithDomainFilter(state)).toMatchObject({
+        must: { domain_ids: [1, 2], foo: ["bar"] },
+      });
+    });
+  });
+
+  describe("with useDomainSearchFilter disabled", () => {
+    const searchQuerySelectorWithoutDomainFilter = makeSearchQuerySelector(
+      "conceptQuery",
+      "conceptActiveFilters",
+      undefined,
+      { useDomainSearchFilter: false }
+    );
+
+    it("keeps must.taxonomy", () => {
+      const state = {
+        conceptQuery: { query: "" },
+        conceptActiveFilters: { taxonomy: [1, 2], foo: ["bar"] },
+      };
+
+      expect(searchQuerySelectorWithoutDomainFilter(state)).toMatchObject({
+        must: { taxonomy: [1, 2], foo: ["bar"] },
+      });
+    });
+  });
 });

package/src/selectors/makeSearchQuerySelector.js

@@ -2,6 +2,7 @@ import {
   identity,
   isEmpty,
   isEqual,
+  mapKeys,
   omitBy,
   pick,
   prop,
@@ -29,8 +30,10 @@ export const makeSearchFiltersSelector = (activeFiltersProp, dateFilterProp) =>
 export const makeSearchQuerySelector = (
   queryProp,
   activeFiltersProp,
-  dateFilterProp
+  dateFilterProp,
+  options = {}
 ) => {
+  const { useDomainSearchFilter = false } = options;
   const searchFiltersSelector = makeSearchFiltersSelector(
     activeFiltersProp,
     dateFilterProp
@@ -41,7 +44,13 @@ export const makeSearchQuerySelector = (
     queryPropsSelector,
     (searchQuery, activeFilters, ownProps) => {
       const { query, page = 1, sort } = searchQuery || {};
-      const filters = omitBy(isEmpty)(activeFilters);
+      const shouldUseDomainSearchFilter =
+        useDomainSearchFilter || ownProps?.useDomainSearchFilter;
+      const mapDomainFilterKey = (key) =>
+        shouldUseDomainSearchFilter && key === "taxonomy"
+          ? "domain_ids"
+          : key;
+      const filters = mapKeys(mapDomainFilterKey)(omitBy(isEmpty)(activeFilters));
       const q = trim(query)
         ? {
             must: filters,

package/src/styles/DomainSearchFilter.less

@@ -0,0 +1,28 @@
+.ui.dropdown.domain-search-filter {
+  .item-content > .toggle-children {
+    margin-left: 8px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #d4d4d5;
+    border-radius: 999px;
+    padding: 1px 6px;
+    min-height: 20px;
+    background: #f8f8f9;
+    cursor: pointer;
+    line-height: 1;
+    font-size: 11px;
+    appearance: none;
+
+    > .toggle-children-content {
+      display: inline-flex;
+      align-items: center;
+      gap: 2px;
+
+      > i.icon {
+        margin: 0;
+        font-size: 0.95em;
+      }
+    }
+  }
+}