@truedat/core 6.12.0 → 6.12.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "6.12.0",
+  "version": "6.12.2",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -118,5 +118,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "a182d4660919ab242d3150ef4a51641815913a39"
+  "gitHead": "e0acd68539a1ed3786de65ab4fa4221455ea90a4"
 }

package/src/components/SelectedFilters.js

@@ -2,6 +2,7 @@ import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
+import { useLocation } from "react-router-dom";
 import FilterDropdown from "./FilterDropdown";
 import FilterMultilevelDropdown from "./FilterMultilevelDropdown";
 import HierarchyFilterDropdown from "./HierarchyFilterDropdown";
@@ -30,76 +31,85 @@ export const SelectedFilters = ({
   userFilterScope,
   searchFiltersPropsMapping,
   searchFilterDispacher,
-}) => (
-  <>
-    {_.isEmpty(userFilters) ? null : (
-      <UserFilters
-        applyUserFilter={applyUserFilter}
-        userFilterScope={userFilterScope}
-        deleteUserFilter={deleteUserFilter}
-        resetFilters={resetFilters}
-        selectedUserFilter={selectedUserFilter}
-        userFilters={userFilters}
-        disabled={loading}
-      />
-    )}
-    <div className="selectedFilters">
-      {_.isEmpty(selectedFilters) ? null : (
-        <>
-          <div className="appliedFilters">
-            <FormattedMessage id="search.applied_filters" />
-          </div>
-          {selectedFilters.map((filter) => {
-            const isSelectedFilter = _.isEqual(filter, selectedFilter);
+}) => {
+  const { pathname } = useLocation();
+  const taxonomyPathRegex = /^\/domains\/(\d+)\/\w+$/;
+  const taxonomyPath = pathname.match(taxonomyPathRegex);
+  const pathnameSplit = pathname.split("/");
+  const domainId = pathnameSplit[2];
 
-            const filterType = _.prop(filter)(filterTypes);
-            const options = isSelectedFilter ? selectedFilterValues : null;
+  return (
+    <>
+      {_.isEmpty(userFilters) ? null : (
+        <UserFilters
+          applyUserFilter={applyUserFilter}
+          userFilterScope={userFilterScope}
+          deleteUserFilter={deleteUserFilter}
+          domainId={taxonomyPath ? parseInt(domainId) : null}
+          resetFilters={resetFilters}
+          selectedUserFilter={selectedUserFilter}
+          userFilters={userFilters}
+          disabled={loading}
+        />
+      )}
+      <div className="selectedFilters">
+        {_.isEmpty(selectedFilters) ? null : (
+          <>
+            <div className="appliedFilters">
+              <FormattedMessage id="search.applied_filters" />
+            </div>
+            {selectedFilters.map((filter) => {
+              const isSelectedFilter = _.isEqual(filter, selectedFilter);
 
-            const props = {
-              key: filter,
-              activeValues,
-              closeFilter,
-              filter,
-              loading,
-              openFilter,
-              options,
-              removeFilter,
-              toggleFilterValue,
-            };
+              const filterType = _.prop(filter)(filterTypes);
+              const options = isSelectedFilter ? selectedFilterValues : null;
 
-            switch (filterType) {
-              case "domain":
-                return <FilterMultilevelDropdown {...props} />;
-              case "hierarchy":
-                return <HierarchyFilterDropdown {...props} />;
-              case "search":
-                return (
-                  <SearchFilterDropdown
-                    {...props}
-                    {...searchFiltersPropsMapping[filter]}
-                    open={isSelectedFilter}
-                    searchFilterDispacher={searchFilterDispacher}
-                  />
-                );
-              default:
-                return <FilterDropdown {...props} />;
-            }
-          })}
-          <a className="resetFilters" onClick={() => resetFilters()}>
-            <FormattedMessage id="search.clear_filters" />
-          </a>
-          {saveFilters && (
-            <ModalSaveFilter
-              saveFilters={saveFilters}
-              activeFilters={activeFilters}
-              scope={userFilterScope}
-            />
-          )}
-        </>
-      )}
-    </div>
-  </>
-);
+              const props = {
+                key: filter,
+                activeValues,
+                closeFilter,
+                filter,
+                loading,
+                openFilter,
+                options,
+                removeFilter,
+                toggleFilterValue,
+              };
+
+              switch (filterType) {
+                case "domain":
+                  return <FilterMultilevelDropdown {...props} />;
+                case "hierarchy":
+                  return <HierarchyFilterDropdown {...props} />;
+                case "search":
+                  return (
+                    <SearchFilterDropdown
+                      {...props}
+                      {...searchFiltersPropsMapping[filter]}
+                      open={isSelectedFilter}
+                      searchFilterDispacher={searchFilterDispacher}
+                    />
+                  );
+                default:
+                  return <FilterDropdown {...props} />;
+              }
+            })}
+            <a className="resetFilters" onClick={() => resetFilters()}>
+              <FormattedMessage id="search.clear_filters" />
+            </a>
+            {saveFilters && (
+              <ModalSaveFilter
+                saveFilters={saveFilters}
+                activeFilters={activeFilters}
+                scope={userFilterScope}
+              />
+            )}
+          </>
+        )}
+      </div>
+    </>
+  );
+};
 
 SelectedFilters.propTypes = {
   activeFilters: PropTypes.object,

package/src/components/UserFilters.js

@@ -10,16 +10,35 @@ export const UserFilters = ({
   applyUserFilter,
   deleteUserFilter,
   disabled,
+  domainId,
   resetFilters,
   selectedUserFilter,
   userFilters,
   userFilterScope,
 }) => {
   const authorized = useAuthorized();
-  const sortedUserFilters = _.orderBy(
-    ["is_global", "id"],
-    ["desc", "asc"]
+  const showDomainFilter = (filters) => {
+    if (_.flow(_.keys, (k) => !_.includes("taxonomy")(k))(filters)) return true;
+
+    if (_.flow(_.keys, _.equals(["taxonomy"]))(filters)) return false;
+
+    if (_.flow(_.get("taxonomy"), _.size, (s) => s > 1)(filters)) return false;
+
+    if (
+      _.flow(_.get("taxonomy"), _.head, (t) => !_.equals(domainId)(t))(filters)
+    )
+      return false;
+
+    return true;
+  };
+
+  const sortedUserFilters = _.flow(
+    _.filter(({ filters }) =>
+      _.isNull(domainId) ? true : showDomainFilter(filters)
+    ),
+    _.orderBy(["is_global", "id"], ["desc", "asc"])
   )(userFilters);
+
   return _.isEmpty(userFilters) ? null : (
     <div className="selectedFilters">
       {sortedUserFilters.map((userFilter, key) => {
@@ -89,6 +108,7 @@ export const UserFilters = ({
 UserFilters.propTypes = {
   applyUserFilter: PropTypes.func,
   deleteUserFilter: PropTypes.func,
+  domainId: PropTypes.number,
   resetFilters: PropTypes.func,
   selectedUserFilter: PropTypes.string,
   userFilters: PropTypes.array,

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

@@ -7,6 +7,13 @@ import { Icon, Dropdown, Segment } from "semantic-ui-react";
 
 import { SelectedFilters } from "../SelectedFilters";
 
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useLocation: () => ({
+    pathname: "/domains/123/structures",
+  }),
+}));
+
 const DummyLoader = () => <div></div>;
 const DummyFilerItem = ({ active, toggleFilterValue, option }) => (
   <Dropdown.Item onClick={() => toggleFilterValue(option)} active={active}>
@@ -144,3 +151,77 @@ describe("<SelectedFilters/>", () => {
     ).not.toBeNull();
   });
 });
+
+describe("<SelectedFilters/> taxonomy screens", () => {
+  const props = {
+    resetFilters: jest.fn(),
+    filterTypes: {
+      foo: "fooType",
+    },
+    openFilter: jest.fn(),
+    closeFilter: jest.fn(),
+    selectedFilter: "foo",
+    selectedFilters: ["foo", "bar"],
+    selectedFilterActiveValues: ["value2"],
+    selectedFilterValues: ["value1", "value2"],
+    selectedUserFilter: null,
+    userFilters: [
+      {
+        id: 1,
+        name: "Hide Domain Filter",
+        scope: "data_structure",
+        filters: { taxonomy: [123] },
+        user_id: 1,
+        is_global: true,
+      },
+      {
+        id: 2,
+        name: "Show Status Filter",
+        scope: "data_structure",
+        filters: { status: ["pending"] },
+        user_id: 1,
+        is_global: true,
+      },
+      {
+        id: 3,
+        name: "Hide Multiple Domain Filter",
+        scope: "data_structure",
+        filters: { status: ["pending"], taxonomy: [123, 321] },
+        user_id: 1,
+        is_global: true,
+      },
+      {
+        id: 4,
+        name: "Hide Other Domain Filter",
+        scope: "data_structure",
+        filters: { status: ["pending"], taxonomy: [321] },
+        user_id: 1,
+        is_global: true,
+      },
+      {
+        id: 5,
+        name: "Show Status and Domain Filter",
+        scope: "data_structure",
+        filters: { status: ["pending"], taxonomy: [123] },
+        user_id: 1,
+        is_global: true,
+      },
+    ],
+    searchFiltersPropsMapping: {},
+    searchFilterDispacher: jest.fn(),
+  };
+
+  it("matches the latest snapshot", () => {
+    const { container } = render(<SelectedFilters {...props} />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("render only Show filters", () => {
+    const { queryByText } = render(<SelectedFilters {...props} />);
+    expect(queryByText("Hide Domain Filter")).toBeNull();
+    expect(queryByText("Show Status Filter")).toBeInTheDocument();
+    expect(queryByText("Hide Multiple Domain Filter")).toBeNull();
+    expect(queryByText("Hide Other Domain Filter")).toBeNull();
+    expect(queryByText("Show Status and Domain Filter")).toBeInTheDocument();
+  });
+});

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

@@ -112,3 +112,74 @@ describe("<UserFilters /> not admin", () => {
     expect(container).toMatchSnapshot();
   });
 });
+
+describe("<UserFilters /> for taxonomy screens", () => {
+  jest.mock("../../hooks", () => ({
+    ...jest.requireActual("../../hooks"),
+    useAuthorized: jest.fn(() => true),
+  }));
+
+  const props = {
+    applyUserFilter,
+    deleteUserFilter,
+    resetFilters,
+    domainId: 123,
+    selectedUserFilter,
+    userFilters: [
+      {
+        id: 1,
+        name: "Hide Domain Filter",
+        scope: "data_structure",
+        filters: { taxonomy: [123] },
+        user_id: 1,
+        is_global: true,
+      },
+      {
+        id: 2,
+        name: "Show Status Filter",
+        scope: "data_structure",
+        filters: { status: ["pending"] },
+        user_id: 1,
+        is_global: true,
+      },
+      {
+        id: 3,
+        name: "Hide Multiple Domain Filter",
+        scope: "data_structure",
+        filters: { status: ["pending"], taxonomy: [123, 321] },
+        user_id: 1,
+        is_global: true,
+      },
+      {
+        id: 4,
+        name: "Hide Other Domain Filter",
+        scope: "data_structure",
+        filters: { status: ["pending"], taxonomy: [321] },
+        user_id: 1,
+        is_global: true,
+      },
+      {
+        id: 5,
+        name: "Show Status and Domain Filter",
+        scope: "data_structure",
+        filters: { status: ["pending"], taxonomy: [123] },
+        user_id: 1,
+        is_global: true,
+      },
+    ],
+  };
+
+  it("matches the latest snapshot", () => {
+    const { container } = render(<UserFilters {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("render only Show filters", () => {
+    const { queryByText } = render(<UserFilters {...props} />, renderOpts);
+    expect(queryByText("Hide Domain Filter")).toBeNull();
+    expect(queryByText("Show Status Filter")).toBeInTheDocument();
+    expect(queryByText("Hide Multiple Domain Filter")).toBeNull();
+    expect(queryByText("Hide Other Domain Filter")).toBeNull();
+    expect(queryByText("Show Status and Domain Filter")).toBeInTheDocument();
+  });
+});

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

@@ -109,3 +109,109 @@ exports[`<SelectedFilters/> matches the latest snapshot 1`] = `
   </div>
 </div>
 `;
+
+exports[`<SelectedFilters/> taxonomy screens matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="selectedFilters"
+  >
+    <div
+      class="ui basic circular label global"
+    >
+      <span
+        class="userFilter"
+      >
+        Show Status Filter
+      </span>
+    </div>
+    <div
+      class="ui basic circular label global"
+    >
+      <span
+        class="userFilter"
+      >
+        Show Status and Domain Filter
+      </span>
+    </div>
+  </div>
+  <div
+    class="selectedFilters"
+  >
+    <div
+      class="appliedFilters"
+    >
+      Filters:
+    </div>
+    <div
+      aria-expanded="true"
+      class="ui active visible floating item scrolling dropdown"
+      role="listbox"
+      tabindex="0"
+    >
+      <div
+        class="ui label"
+      >
+        foo
+        <i
+          aria-hidden="true"
+          class="delete icon"
+        />
+      </div>
+      <div
+        class="menu transition dimmable visible"
+      >
+        <div
+          aria-checked="false"
+          class="item"
+          role="option"
+        >
+          <i
+            aria-hidden="true"
+            class="square outline icon"
+          />
+          <i>
+            Empty
+          </i>
+        </div>
+        <div
+          aria-checked="false"
+          class="item"
+          role="option"
+        >
+          <i
+            aria-hidden="true"
+            class="square outline icon"
+          />
+          <i>
+            Empty
+          </i>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-expanded="false"
+      class="ui floating item scrolling dropdown"
+      role="listbox"
+      tabindex="0"
+    >
+      <div
+        class="ui label"
+      >
+        bar
+        <i
+          aria-hidden="true"
+          class="delete icon"
+        />
+      </div>
+      <div
+        class="menu transition dimmable"
+      />
+    </div>
+    <a
+      class="resetFilters"
+    >
+      Clear filters
+    </a>
+  </div>
+</div>
+`;

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

@@ -79,6 +79,33 @@ exports[`<UserFilters /> admin matches the latest snapshot with global filters 1
 </div>
 `;
 
+exports[`<UserFilters /> for taxonomy screens matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="selectedFilters"
+  >
+    <div
+      class="ui basic circular label global"
+    >
+      <span
+        class="userFilter"
+      >
+        Show Status Filter
+      </span>
+    </div>
+    <div
+      class="ui basic circular label global"
+    >
+      <span
+        class="userFilter"
+      >
+        Show Status and Domain Filter
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`<UserFilters /> not admin matches the latest snapshot 1`] = `
 <div>
   <div

package/src/search/SearchContext.js

@@ -2,6 +2,7 @@ import _ from "lodash/fp";
 import React, {
   useState,
   useEffect,
+  useCallback,
   useContext,
   createContext,
   useMemo,
@@ -16,6 +17,8 @@ import { makeOption } from "@truedat/core/services/i18n";
 
 const SearchContext = createContext();
 
+const debounceQueryTime = 300;
+
 export const SearchContextProvider = (props) => {
   const initialDefaultFilters = _.prop("defaultFilters")(props);
   const initialActiveFilters = _.propOr({}, "defaultSelectedFilters")(props);
@@ -56,6 +59,27 @@ export const SearchContextProvider = (props) => {
 
   const [onSearchChange, setOnSearchChange] = useState();
 
+  const debouncedTriggerSearch = useCallback(
+    _.debounce(debounceQueryTime)((filterParam) => {
+      triggerSearch(filterParam).then(({ data, headers }) => {
+        setSearchData(data);
+        setCountData(headers);
+        setLoading(false);
+      });
+    }),
+    []
+  );
+
+  const debouncedTriggerSearchFilters = useCallback(
+    _.debounce(debounceQueryTime)((filterParam) => {
+      triggerFilters(filterParam).then(({ data }) => {
+        setFiltersPayload(data);
+        setLoadingFilters(false);
+      });
+    }),
+    []
+  );
+
   useEffect(() => {
     if (initialDefaultFilters !== defaultFilters) {
       setDefaultFilters(initialDefaultFilters);
@@ -188,10 +212,7 @@ export const SearchContextProvider = (props) => {
       ...(!_.isEmpty(query) && { query }),
       must: filterMust,
     };
-    triggerFilters(filterParam).then(({ data }) => {
-      setFiltersPayload(data);
-      setLoadingFilters(false);
-    });
+    debouncedTriggerSearchFilters(filterParam);
   }, [query, filterMust]);
 
   const { trigger: triggerSearch } = useSearch();
@@ -209,11 +230,7 @@ export const SearchContextProvider = (props) => {
     };
     setFilterParams(filterParam);
 
-    triggerSearch(filterParam).then(({ data, headers }) => {
-      setSearchData(data);
-      setCountData(headers);
-      setLoading(false);
-    });
+    debouncedTriggerSearch(filterParam);
   }, [
     query,
     searchMust,

package/src/search/SearchSelectedFilters.js

@@ -1,6 +1,7 @@
 import _ from "lodash/fp";
 import React, { useState } from "react";
 import { FormattedMessage } from "react-intl";
+import { useLocation } from "react-router-dom";
 import ModalSaveFilter from "./ModalSaveFilter";
 import UserFilters from "./UserFilters";
 import FilterDropdown from "./FilterDropdown";
@@ -22,11 +23,17 @@ export default function SearchSelectedFilters() {
     userFiltersType,
   } = context;
   const [selectedUserFilter, setSelectedUserFilter] = useState();
+  const { pathname } = useLocation();
+  const taxonomyPathRegex = /^\/domains\/(\d+)\/\w+$/;
+  const taxonomyPath = pathname.match(taxonomyPathRegex);
+  const pathnameSplit = pathname.split("/");
+  const domainId = pathnameSplit[2];
 
   return (
     <>
       {userFiltersType ? (
         <UserFilters
+          domainId={taxonomyPath ? parseInt(domainId) : null}
           setSelectedUserFilter={setSelectedUserFilter}
           selectedUserFilter={selectedUserFilter}
         />

package/src/search/SearchWidget.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { Button, Icon, Input } from "semantic-ui-react";
 import { useIntl } from "react-intl";
 import PropTypes from "prop-types";

package/src/search/UserFilters.js

@@ -57,7 +57,11 @@ DeleteModal.propTypes = {
   mutate: PropTypes.func,
 };
 
-export const UserFilters = ({ setSelectedUserFilter, selectedUserFilter }) => {
+export const UserFilters = ({
+  domainId,
+  setSelectedUserFilter,
+  selectedUserFilter,
+}) => {
   const authorized = useAuthorized();
   const {
     userFiltersType,
@@ -72,9 +76,26 @@ export const UserFilters = ({ setSelectedUserFilter, selectedUserFilter }) => {
     mutate,
   } = useUserFilters(userFiltersType, userFilterScope);
 
-  const sortedUserFilters = _.orderBy(
-    ["is_global", "id"],
-    ["desc", "asc"]
+  const showDomainFilter = (filters) => {
+    if (_.flow(_.keys, (k) => !_.includes("taxonomy")(k))(filters)) return true;
+
+    if (_.flow(_.keys, _.equals(["taxonomy"]))(filters)) return false;
+
+    if (_.flow(_.get("taxonomy"), _.size, (s) => s > 1)(filters)) return false;
+
+    if (
+      _.flow(_.get("taxonomy"), _.head, (t) => !_.equals(domainId)(t))(filters)
+    )
+      return false;
+
+    return true;
+  };
+
+  const sortedUserFilters = _.flow(
+    _.filter(({ filters }) =>
+      _.isNull(domainId) ? true : showDomainFilter(filters)
+    ),
+    _.orderBy(["is_global", "id"], ["desc", "asc"])
   )(userFilters);
 
   return _.isEmpty(userFilters) ? null : (
@@ -127,6 +148,7 @@ export const UserFilters = ({ setSelectedUserFilter, selectedUserFilter }) => {
 };
 
 UserFilters.propTypes = {
+  domainId: PropTypes.number,
   selectedUserFilter: PropTypes.string,
   setSelectedUserFilter: PropTypes.func,
 };