@truedat/qx 6.1.0 → 6.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/qx",
-  "version": "6.1.0",
+  "version": "6.1.1",
   "description": "Truedat Web Quality Experience package",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -35,7 +35,7 @@
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "6.0.5",
+    "@truedat/test": "6.1.1",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -84,7 +84,7 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "6.1.0",
+    "@truedat/core": "6.1.1",
     "prop-types": "^15.8.1",
     "react-hook-form": "^7.45.4",
     "react-intl": "^5.20.10",
@@ -97,5 +97,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "0e2dd260284f95d075f53ec5df1111606b5ecd0d"
+  "gitHead": "8ba2e1d68380956d654d6927a6117734f1c50076"
 }

package/src/components/executions/ExecutionGroupsTable.js

@@ -1,10 +1,10 @@
 import _ from "lodash/fp";
-import React, { useEffect } from "react";
+import React from "react";
 import PropTypes from "prop-types";
-import { FormattedMessage, useIntl } from "react-intl";
+import { FormattedMessage } from "react-intl";
 import { Table, Header, Icon } from "semantic-ui-react";
 import { columnDecorator } from "@truedat/core/services";
-import { useSearchContext } from "../search/SearchContext";
+import { useExecutionGroupsIndex } from "../../hooks/useExecutionGroups";
 import ExecutionGroupLink from "./ExecutionGroupLink";
 
 export const HeaderRow = ({ columns }) => (
@@ -38,6 +38,8 @@ ExecutionGroupRow.propTypes = {
 };
 
 export default function ExecutionGroupsTable() {
+  const { data: executionGroups } = useExecutionGroupsIndex();
+
   const columns = [
     {
       name: "quality_controls.table.header.created",
@@ -71,12 +73,6 @@ export default function ExecutionGroupsTable() {
     },
   ];
 
-  const { listExecutionGroups, executionGroups } = useSearchContext();
-
-  useEffect(() => {
-    listExecutionGroups();
-  }, []);
-
   return (
     <>
       {!_.isEmpty(executionGroups) && (
@@ -85,9 +81,10 @@ export default function ExecutionGroupsTable() {
             <HeaderRow columns={columns} />
           </Table.Header>
           <Table.Body>
-            {executionGroups?.map((props, key) => (
-              <ExecutionGroupRow key={key} columns={columns} {...props} />
-            ))}
+            {executionGroups &&
+              executionGroups.map((props, key) => (
+                <ExecutionGroupRow key={key} columns={columns} {...props} />
+              ))}
           </Table.Body>
         </Table>
       )}

package/src/components/qualityControls/QualityControlRoutes.js

@@ -15,11 +15,15 @@ import {
   QUALITY_CONTROL_HISTORY,
 } from "@truedat/core/routes";
 
-import { SearchContextProvider } from "../search/SearchContext";
+import { SearchContextProvider } from "@truedat/core/search/SearchContext";
 import ExecutionGroupsTable from "../executions/ExecutionGroupsTable";
 import ExecutionGroupsHeader from "../executions/ExecutionGroupsHeader";
 import ExecutionGroupDetail from "../executions/executionGroupDetail";
 
+import {
+  useQualityControlsSearch,
+  useQualityControlsFilters,
+} from "../../hooks/useQualityControls";
 import QualityControls from "./QualityControls";
 import QualityControl from "./QualityControl";
 import QualityControlHeader from "./QualityControlHeader";
@@ -31,108 +35,126 @@ import NewDraftQualityControl from "./NewDraftQualityControl";
 
 export default function QxRoutes() {
   const authorized = useAuthorized("quality_control");
+  const searchProps = {
+    initialSortColumn: "updated_at",
+    initialSortDirection: "descending",
+    useSearch: useQualityControlsSearch,
+    useFilters: useQualityControlsFilters,
+  };
 
   return (
-    <SearchContextProvider
-      initialSortColumn="updated_at"
-      initialSortDirection="descending"
-    >
-      <Switch>
-        <Route
-          exact
-          path={QUALITY_CONTROLS_EXECUTION_GROUPS}
-          render={() =>
-            authorized ? (
-              <ExecutionGroupsHeader>
-                <ExecutionGroupsTable />
-              </ExecutionGroupsHeader>
-            ) : (
-              <Unauthorized />
-            )
-          }
-        />
-        <Route
-          exact
-          path={QUALITY_CONTROLS_EXECUTION_GROUP}
-          render={() =>
-            authorized ? <ExecutionGroupDetail /> : <Unauthorized />
-          }
-        />
-        <Route
-          exact
-          path={QUALITY_CONTROLS_PUBLISHED}
-          render={() =>
-            authorized ? (
-              <QualityControls status="published" />
-            ) : (
-              <Unauthorized />
-            )
-          }
-        />
-        <Route
-          exact
-          path={QUALITY_CONTROLS_DEPRECATED}
-          render={() =>
-            authorized ? (
-              <QualityControls status="deprecated" />
-            ) : (
-              <Unauthorized />
-            )
-          }
-        />
-        <Route
-          exact
-          path={QUALITY_CONTROLS_DRAFTS}
-          render={() =>
-            authorized ? <QualityControls status="draft" /> : <Unauthorized />
-          }
-        />
-        <Route
-          exact
-          path={QUALITY_CONTROL_NEW}
-          render={() => (authorized ? <NewQualityControl /> : <Unauthorized />)}
-        />
-        <Route
-          exact
-          path={QUALITY_CONTROL_EDIT}
-          render={() =>
-            authorized ? <EditQualityControl /> : <Unauthorized />
-          }
-        />
-        <Route
-          exact
-          path={QUALITY_CONTROL_NEW_DRAFT}
-          render={() =>
-            authorized ? <NewDraftQualityControl /> : <Unauthorized />
-          }
-        />
-        <Route
-          exact
-          path={QUALITY_CONTROL}
-          render={() =>
-            authorized ? (
-              <QualityControlHeader>
-                <QualityControl />
-              </QualityControlHeader>
-            ) : (
-              <Unauthorized />
-            )
-          }
-        />
-        <Route
-          exact
-          path={QUALITY_CONTROL_HISTORY}
-          render={() =>
-            authorized ? (
-              <QualityControlHeader>
-                <QualityControlHistory />
-              </QualityControlHeader>
-            ) : (
-              <Unauthorized />
-            )
-          }
-        />
-      </Switch>
-    </SearchContextProvider>
+    <Switch>
+      <Route
+        exact
+        path={QUALITY_CONTROLS_EXECUTION_GROUPS}
+        render={() =>
+          authorized ? (
+            <ExecutionGroupsHeader>
+              <ExecutionGroupsTable />
+            </ExecutionGroupsHeader>
+          ) : (
+            <Unauthorized />
+          )
+        }
+      />
+      <Route
+        exact
+        path={QUALITY_CONTROLS_EXECUTION_GROUP}
+        render={() =>
+          authorized ? <ExecutionGroupDetail /> : <Unauthorized />
+        }
+      />
+      <Route
+        exact
+        path={QUALITY_CONTROLS_PUBLISHED}
+        render={() =>
+          authorized ? (
+            <SearchContextProvider
+              {...searchProps}
+              defaultFilters={{ status: "published" }}
+            >
+              <QualityControls />
+            </SearchContextProvider>
+          ) : (
+            <Unauthorized />
+          )
+        }
+      />
+      <Route
+        exact
+        path={QUALITY_CONTROLS_DEPRECATED}
+        render={() =>
+          authorized ? (
+            <SearchContextProvider
+              {...searchProps}
+              defaultFilters={{ status: "deprecated" }}
+            >
+              <QualityControls />
+            </SearchContextProvider>
+          ) : (
+            <Unauthorized />
+          )
+        }
+      />
+      <Route
+        exact
+        path={QUALITY_CONTROLS_DRAFTS}
+        render={() =>
+          authorized ? (
+            <SearchContextProvider
+              {...searchProps}
+              defaultFilters={{ status: "draft" }}
+            >
+              <QualityControls />
+            </SearchContextProvider>
+          ) : (
+            <Unauthorized />
+          )
+        }
+      />
+      <Route
+        exact
+        path={QUALITY_CONTROL_NEW}
+        render={() => (authorized ? <NewQualityControl /> : <Unauthorized />)}
+      />
+      <Route
+        exact
+        path={QUALITY_CONTROL_EDIT}
+        render={() => (authorized ? <EditQualityControl /> : <Unauthorized />)}
+      />
+      <Route
+        exact
+        path={QUALITY_CONTROL_NEW_DRAFT}
+        render={() =>
+          authorized ? <NewDraftQualityControl /> : <Unauthorized />
+        }
+      />
+      <Route
+        exact
+        path={QUALITY_CONTROL}
+        render={() =>
+          authorized ? (
+            <QualityControlHeader>
+              <QualityControl />
+            </QualityControlHeader>
+          ) : (
+            <Unauthorized />
+          )
+        }
+      />
+      <Route
+        exact
+        path={QUALITY_CONTROL_HISTORY}
+        render={() =>
+          authorized ? (
+            <QualityControlHeader>
+              <QualityControlHistory />
+            </QualityControlHeader>
+          ) : (
+            <Unauthorized />
+          )
+        }
+      />
+    </Switch>
   );
 }

package/src/components/qualityControls/QualityControls.js

@@ -13,14 +13,14 @@ import {
 } from "semantic-ui-react";
 import { linkTo, QUALITY_CONTROL_NEW } from "@truedat/core/routes";
 import useAuthorizedAction from "@truedat/core/hooks/useAuthorizedAction";
-import Loading from "@truedat/core/src/components/Loading";
-import { useSearchContext } from "../search/SearchContext";
-import QualityControlsSearch from "../search/QualityControlsSearch";
+import Loading from "@truedat/core/components/Loading";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
+import SearchWidget from "@truedat/core/search/SearchWidget";
 import { useExecutionGroupsCreate } from "../../hooks/useExecutionGroups";
 import ExecutionPopup from "./ExecutionPopup";
 import QualityControlsTable from "./QualityControlsTable";
 
-export const QualityControls = ({ status }) => {
+export const QualityControls = () => {
   const { formatMessage } = useIntl();
   const history = useHistory();
 
@@ -33,13 +33,21 @@ export const QualityControls = ({ status }) => {
     query,
     searchMust,
     loadingFilters: loading,
-    canExecuteQualityControl,
-    setCanExecuteQualityControl,
-    qualityControlsActions,
-    setQualityControlsStatus,
-    qualityControls,
+    hiddenFilters,
+    toggleHiddenFilterValue,
+    searchData,
+    defaultFilters,
   } = useSearchContext();
 
+  const canExecuteQualityControl = _.matches({ executable: [true] })(
+    hiddenFilters
+  );
+
+  const status = _.prop("status")(defaultFilters);
+
+  const qualityControls = searchData?.data;
+  const qualityControlsActions = searchData?.actions;
+
   const { trigger: triggerCreateExecutionGroup } = useExecutionGroupsCreate();
 
   const handleSubmit = (df_content) => {
@@ -53,10 +61,6 @@ export const QualityControls = ({ status }) => {
     });
   };
 
-  useEffect(() => {
-    setQualityControlsStatus(status);
-  }, [status, setQualityControlsStatus]);
-
   return (
     <Segment loading={false}>
       <Header as="h2">
@@ -70,7 +74,7 @@ export const QualityControls = ({ status }) => {
       </Header>
       <Grid>
         <Grid.Column width={8}>
-          <QualityControlsSearch />
+          <SearchWidget />
         </Grid.Column>
 
         <Grid.Column width={8}>
@@ -88,7 +92,10 @@ export const QualityControls = ({ status }) => {
                       className="bgOrange"
                       toggle
                       onChange={() =>
-                        setCanExecuteQualityControl(!canExecuteQualityControl)
+                        toggleHiddenFilterValue({
+                          filter: "executable",
+                          value: true,
+                        })
                       }
                       checked={canExecuteQualityControl}
                       style={{ top: "6px", marginRight: "7.5px" }}
@@ -115,7 +122,7 @@ export const QualityControls = ({ status }) => {
           </Container>
         </Grid.Column>
       </Grid>
-      <QualityControlsTable status={status} />
+      <QualityControlsTable />
     </Segment>
   );
 };

package/src/components/qualityControls/QualityControlsTable.js

@@ -8,7 +8,7 @@ import { Table, Header, Icon } from "semantic-ui-react";
 import { linkTo } from "@truedat/core/routes";
 import Moment from "react-moment";
 
-import { useSearchContext } from "../search/SearchContext";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
 import QualityControlRow from "./QualityControlRow";
 
 const translateDecorator = (id) =>
@@ -27,8 +27,8 @@ DateDecorator.propTypes = {
 
 export default function QualityControlsTable() {
   const {
-    qualityControls,
-    loadingSearch: loading,
+    searchData,
+    loading,
     sortColumn,
     sortDirection,
     setSortColumn,
@@ -36,6 +36,8 @@ export default function QualityControlsTable() {
   } = useSearchContext();
   const { formatMessage } = useIntl();
 
+  const qualityControls = searchData?.data;
+
   const columns = [
     {
       name: "name",

package/src/hooks/useExecutionGroups.js

@@ -1,12 +1,7 @@
 import { compile } from "path-to-regexp";
 import useSWR from "swr";
 import useSWRMutations from "swr/mutation";
-import {
-  apiJson,
-  apiJsonPost,
-  apiJsonPatch,
-  apiJsonDelete,
-} from "@truedat/core/services/api";
+import { apiJson, apiJsonPost } from "@truedat/core/services/api";
 import {
   API_QUALITY_CONTROL_EXECUTION_GROUPS_CREATE,
   API_QUALITY_CONTROL_EXECUTION_GROUPS_INDEX,
@@ -21,10 +16,11 @@ export const useExecutionGroupsCreate = () => {
 };
 
 export const useExecutionGroupsIndex = () => {
-  return useSWRMutations(
+  const { data, error, mutate } = useSWR(
     API_QUALITY_CONTROL_EXECUTION_GROUPS_INDEX,
-    (url, { arg }) => apiJson(url, arg)
+    apiJson
   );
+  return { data: data?.data?.data, error, loading: !error && !data, mutate };
 };
 
 export const useExecutionGroupsShow = (id) => {

package/src/components/search/FilterDropdown.js

@@ -1,76 +0,0 @@
-import _ from "lodash/fp";
-import React from "react";
-import { FormattedMessage } from "react-intl";
-import { Label, Icon, Dropdown, Dimmer, Loader } from "semantic-ui-react";
-import { accentInsensitivePathOrder } from "@truedat/core/services/sort";
-import FilterItem from "./FilterItem";
-
-import { useSearchContext } from "./SearchContext";
-
-const removePrefix = _.replace(/^.*\./, "");
-
-export default function FilterDropdown() {
-  const {
-    loadingFilters: loading,
-    filter,
-    options,
-    activeFilterSelectedValues,
-
-    openFilter,
-    closeFilter,
-    removeFilter,
-    toggleFilterValue,
-  } = useSearchContext();
-
-  return (
-    <Dropdown
-      item
-      floating
-      scrolling
-      icon={false}
-      upward={false}
-      trigger={
-        <Label key={filter}>
-          <FormattedMessage
-            id={`filters.${filter}`}
-            defaultMessage={removePrefix(filter)}
-          />
-          <Icon
-            name="delete"
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              removeFilter({ filter });
-            }}
-          />
-        </Label>
-      }
-      onOpen={() => openFilter({ filter })}
-      onClose={() => closeFilter({ filter })}
-      open={!_.isEmpty(options)}
-    >
-      <Dimmer.Dimmable as={Dropdown.Menu} dimmed={loading}>
-        {options &&
-          _.flow(
-            _.sortBy(accentInsensitivePathOrder("text")),
-            _.map.convert({ cap: false })((option, i) => (
-              <FilterItem
-                key={i}
-                filter={filter}
-                option={option}
-                toggleFilterValue={toggleFilterValue}
-                active={_.includes(_.prop("value")(option))(
-                  activeFilterSelectedValues
-                )}
-              />
-            ))
-          )(options)}
-        {loading && (
-          <Dimmer active inverted>
-            <Loader size="tiny" />
-          </Dimmer>
-        )}
-      </Dimmer.Dimmable>
-    </Dropdown>
-  );
-}

package/src/components/search/FilterItem.js

@@ -1,49 +0,0 @@
-import _ from "lodash/fp";
-import React from "react";
-import PropTypes from "prop-types";
-import { FormattedMessage } from "react-intl";
-import { Icon, Dropdown } from "semantic-ui-react";
-
-const FilterItemText = ({ filterName, text }) =>
-  _.trim(text) ? (
-    <FormattedMessage
-      id={`filters.${filterName}.${_.trim(text)}`}
-      defaultMessage={_.trim(text)}
-    />
-  ) : (
-    <i>
-      <FormattedMessage id="filter.empty" />
-    </i>
-  );
-
-const preventDefault = (e, callback) => {
-  e && e.preventDefault();
-  e && e.stopPropagation();
-  callback();
-};
-
-export const FilterItem = ({
-  active,
-  filter,
-  toggleFilterValue,
-  option: { text, value },
-}) => (
-  <Dropdown.Item
-    onClick={(e) =>
-      preventDefault(e, () => toggleFilterValue({ filter, value }))
-    }
-    active={active}
-  >
-    <Icon name={active ? "check square outline" : "square outline"} />
-    <FilterItemText filterName={filter} text={text} />
-  </Dropdown.Item>
-);
-
-FilterItem.propTypes = {
-  filterName: PropTypes.string,
-  text: PropTypes.string,
-  toggleFilterValue: PropTypes.func,
-  option: PropTypes.object,
-};
-
-export default FilterItem;

package/src/components/search/FilterMultilevelDropdown.js

@@ -1,200 +0,0 @@
-import _ from "lodash/fp";
-import React, { useState, useEffect } from "react";
-import { FormattedMessage } from "react-intl";
-import {
-  Label,
-  Icon,
-  Input,
-  Dropdown,
-  Dimmer,
-  Loader,
-} from "semantic-ui-react";
-import { lowerDeburr } from "@truedat/core/services/sort";
-import DropdownMenuItem from "@truedat/core/components/DropdownMenuItem";
-
-import { useSearchContext } from "./SearchContext";
-
-export default function FilterMultilevelDropdown() {
-  const {
-    loadingFilters: loading,
-    filter,
-    options,
-    activeFilterSelectedValues,
-
-    openFilter,
-    closeFilter,
-    removeFilter,
-    toggleFilterValue,
-  } = useSearchContext();
-
-  const [selected, setSelected] = useState();
-  const [query, setQuery] = useState();
-  const [open, setOpen] = useState([]);
-  const [displayed, setDisplayed] = useState([]);
-
-  useEffect(() => {
-    const activeOptions = _.filter((option) =>
-      _.includes(option.id)(activeFilterSelectedValues)
-    )(options);
-
-    _.flow(
-      _.reduce(
-        (acc, option) => [
-          ...acc,
-          option.id,
-          ..._.map("id")(option.descendents),
-        ],
-        []
-      ),
-      _.uniq,
-      setSelected
-    )(activeOptions);
-    if (_.isEmpty(open) && _.isEmpty(displayed)) {
-      const withAncestors = _.flow(
-        _.reduce(
-          (acc, option) => [...acc, ..._.map("id")(option.ancestors)],
-          []
-        ),
-        _.uniq
-      )(activeOptions);
-      const newDisplayed = [..._.map("id")(activeOptions), ...withAncestors];
-      !_.isEqual(open, withAncestors) && setOpen(withAncestors);
-      !_.isEqual(displayed, newDisplayed) && setDisplayed(newDisplayed);
-    }
-  }, [activeFilterSelectedValues, options, open, displayed]);
-
-  const handleOpen = (selection) => {
-    const option = _.find({ id: selection })(options);
-    const isOpen = _.contains(selection)(open);
-    const children = _.map("id")(option.children);
-    const descendents = _.map("id")(option.descendents);
-
-    if (isOpen) {
-      setOpen(_.without([selection, ...descendents])(open));
-      setDisplayed(_.without(descendents)(displayed));
-    } else {
-      setOpen(_.union([selection])(open));
-      setDisplayed(_.union(children)(displayed));
-    }
-  };
-
-  const handleClick = (e, selection) => {
-    const option = _.find({ id: selection })(options);
-    const ancestorsToDelete = _.intersection(_.map("id")(option.ancestors))(
-      activeFilterSelectedValues
-    );
-    if (!_.isEmpty(ancestorsToDelete)) {
-      const active = _.union([selection])(activeFilterSelectedValues);
-      const value = _.without(ancestorsToDelete)(active);
-      toggleFilterValue({ filter, value });
-    } else if (_.includes(selection)(activeFilterSelectedValues)) {
-      const descendents = _.map("id")(option.descendents);
-      const value = _.without([selection, ...descendents])(
-        activeFilterSelectedValues
-      );
-      toggleFilterValue({ filter, value });
-    } else {
-      const descendents = _.map("id")(option.descendents);
-      const active = _.without(descendents)(activeFilterSelectedValues);
-      const value = _.union([selection])(active);
-      toggleFilterValue({ filter, value });
-    }
-  };
-
-  const displayAll = () => {
-    const ids = _.map("id")(options);
-    setOpen(ids);
-    setDisplayed(ids);
-  };
-
-  const handleSearch = (e, { value }) => {
-    e.preventDefault();
-    setQuery(lowerDeburr(value));
-    if (!_.isEmpty(value)) {
-      displayAll();
-    }
-  };
-  const match = (name, query) => _.contains(query)(lowerDeburr(name));
-  const filterSearch = (all) => {
-    if (query) {
-      return _.filter(
-        (domain) =>
-          match(domain.name, query) ||
-          _.some((descendent) => match(descendent.name, query))(
-            domain.descendents
-          )
-      )(all);
-    }
-    return all;
-  };
-
-  const filterDisplayed = (all) =>
-    _.filter((domain) => domain.level == 0 || _.contains(domain.id)(displayed))(
-      all
-    );
-
-  const filteredOptions = _.flow(filterSearch, filterDisplayed)(options);
-
-  return (
-    <Dropdown
-      item
-      floating
-      icon={false}
-      upward={false}
-      onOpen={() => openFilter({ filter })}
-      onClose={() => closeFilter({ filter })}
-      trigger={
-        <Label key={filter}>
-          <FormattedMessage id={`filters.${filter}`} defaultMessage={filter} />
-          <Icon
-            name="delete"
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              removeFilter({ filter });
-            }}
-          />
-        </Label>
-      }
-      open={!_.isEmpty(options)}
-    >
-      <Dimmer.Dimmable dimmed={loading} as={Dropdown.Menu}>
-        <>
-          <Input
-            icon="search"
-            iconPosition="left"
-            className="search"
-            onKeyDown={(e) => {
-              if (e.key === " ") {
-                e.stopPropagation();
-              }
-            }}
-            onChange={handleSearch}
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-            }}
-          />
-          <Dropdown.Menu scrolling>
-            {_.map.convert({ cap: false })((option, i) => (
-              <DropdownMenuItem
-                key={i}
-                onOpen={handleOpen}
-                onClick={handleClick}
-                open={_.contains(option.id)(open)}
-                canOpen={_.negate(_.isEmpty)(option.children)}
-                selected={_.contains(option.id)(selected)}
-                {...option}
-              />
-            ))(filteredOptions)}
-          </Dropdown.Menu>
-        </>
-        {loading && (
-          <Dimmer active inverted>
-            <Loader size="tiny" />
-          </Dimmer>
-        )}
-      </Dimmer.Dimmable>
-    </Dropdown>
-  );
-}

package/src/components/search/HierarchyFilterDropdown.js

@@ -1,116 +0,0 @@
-import _ from "lodash/fp";
-import React from "react";
-import PropTypes from "prop-types";
-import { useHierarchy } from "@truedat/df/hooks/useHierarchies";
-import {
-  getHierarchyOptions,
-  getKeyAndParents,
-} from "@truedat/core/services/getHierarchyOptions";
-import FilterMultilevelDropdown from "./FilterMultilevelDropdown";
-
-const PopulatedHierarchyFilterDropdown = (props) => {
-  const {
-    activeValues,
-    closeFilter,
-    filter,
-    loading,
-    openFilter,
-    options,
-    removeFilter,
-    toggleFilterValue,
-  } = props;
-  const hierarchyId = _.flow(
-    _.first,
-    _.prop("value"),
-    (value) => value.split("_"),
-    _.first
-  )(options);
-
-  const { data, error, loading: hierarchyLoading } = useHierarchy(hierarchyId);
-  if (error) return null;
-  if (hierarchyLoading) return null;
-
-  const hierarchyOptions = getHierarchyOptions(data?.nodes);
-
-  const includedKeys = _.flow(
-    _.map("value"),
-    _.flatMap(getKeyAndParents(hierarchyOptions)),
-    _.uniq
-  )(options);
-
-  const filterIncludedKeys = _.filter(({ key }) =>
-    _.includes(key)(includedKeys)
-  );
-
-  const filteredChildren = _.flow(_.prop("children"), filterIncludedKeys);
-
-  const filteredOptions = _.flow(
-    filterIncludedKeys,
-    _.map((node) => ({ ...node, children: filteredChildren(node) }))
-  )(hierarchyOptions);
-
-  const idActiveValues = _.map((key) =>
-    _.flow(_.find({ key }), _.prop("id"))(filteredOptions)
-  )(activeValues);
-
-  const handleToggleFilterValue = ({ filter, value }) => {
-    const getChildrenKeys = (id) => {
-      const { key, descendents } = _.flow(
-        _.find({ id }),
-        _.pick(["key", "descendents"])
-      )(filteredOptions);
-      const descendentKeys = _.map("key")(descendents);
-      return [key, ...descendentKeys];
-    };
-    const newValue = _.flow(
-      _.flatMap(getChildrenKeys),
-      _.uniq,
-      _.reject(_.isNil)
-    )(value);
-    toggleFilterValue({ filter, value: newValue });
-  };
-
-  return (
-    <FilterMultilevelDropdown
-      activeValues={idActiveValues}
-      closeFilter={closeFilter}
-      filter={filter}
-      loading={loading}
-      openFilter={openFilter}
-      options={filteredOptions}
-      removeFilter={removeFilter}
-      toggleFilterValue={handleToggleFilterValue}
-    />
-  );
-};
-
-PopulatedHierarchyFilterDropdown.propTypes = {
-  activeValues: PropTypes.array,
-  closeFilter: PropTypes.func,
-  filter: PropTypes.string,
-  loading: PropTypes.bool,
-  openFilter: PropTypes.func,
-  options: PropTypes.array,
-  removeFilter: PropTypes.func,
-  toggleFilterValue: PropTypes.func,
-};
-
-const HierarchyFilterDropdown = (props) =>
-  _.isEmpty(props.options) ? (
-    <FilterMultilevelDropdown {...props} />
-  ) : (
-    <PopulatedHierarchyFilterDropdown {...props} />
-  );
-
-HierarchyFilterDropdown.propTypes = {
-  activeValues: PropTypes.array,
-  closeFilter: PropTypes.func,
-  filter: PropTypes.string,
-  loading: PropTypes.bool,
-  openFilter: PropTypes.func,
-  options: PropTypes.array,
-  removeFilter: PropTypes.func,
-  toggleFilterValue: PropTypes.func,
-};
-
-export default HierarchyFilterDropdown;

package/src/components/search/QualityControlFilters.js

@@ -1,60 +0,0 @@
-import _ from "lodash/fp";
-import React from "react";
-import { Dropdown } from "semantic-ui-react";
-import { FormattedMessage, useIntl } from "react-intl";
-import { i18nOrder } from "@truedat/core/services/sort";
-import { useSearchContext } from "./SearchContext";
-
-const removePrefix = _.replace(/^.*\./, "");
-
-export default function QualityControlFilters() {
-  const {
-    disabled,
-    availableFilters,
-    addFilter,
-    resetFilters,
-    loadingFilters: loading,
-  } = useSearchContext();
-
-  const { formatMessage } = useIntl();
-
-  return (
-    <Dropdown
-      button
-      className="icon"
-      disabled={disabled}
-      floating
-      icon="filter"
-      labeled
-      loading={loading}
-      scrolling
-      text={formatMessage({ id: "filters", defaultMessage: "Filters" })}
-      upward={false}
-    >
-      <Dropdown.Menu>
-        <Dropdown.Item onClick={resetFilters}>
-          <em>
-            <FormattedMessage
-              id="filters.reset"
-              defaultMessage="(reset filters)"
-            />
-          </em>
-        </Dropdown.Item>
-        {_.flow(
-          _.defaultTo([]),
-          _.sortBy(i18nOrder(formatMessage, "filters")),
-          _.map((filter) => (
-            <Dropdown.Item
-              key={filter}
-              text={formatMessage({
-                id: `filters.${filter}`,
-                defaultMessage: removePrefix(filter),
-              })}
-              onClick={() => addFilter({ filter })}
-            />
-          ))
-        )(availableFilters)}
-      </Dropdown.Menu>
-    </Dropdown>
-  );
-}

package/src/components/search/QualityControlSelectedFilters.js

@@ -1,56 +0,0 @@
-import _ from "lodash/fp";
-import React from "react";
-import { FormattedMessage } from "react-intl";
-import FilterDropdown from "./FilterDropdown";
-import FilterMultilevelDropdown from "./FilterMultilevelDropdown";
-import HierarchyFilterDropdown from "./HierarchyFilterDropdown";
-
-import SearchContext, { useSearchContext } from "./SearchContext";
-
-export default function QualityControlSelectedFilters() {
-  const context = useSearchContext();
-  const {
-    selectedFilters,
-    resetFilters,
-    filterTypes,
-    activeFilterName,
-    activeFilterValues,
-  } = context;
-
-  return (
-    <>
-      <div className="selectedFilters">
-        {_.isEmpty(selectedFilters) ? null : (
-          <>
-            <div className="appliedFilters">
-              <FormattedMessage id="search.applied_filters" />
-            </div>
-            {selectedFilters.map((filter) => {
-              const filterType = _.prop(filter)(filterTypes);
-              const options = _.isEqual(filter, activeFilterName)
-                ? activeFilterValues
-                : null;
-              return (
-                <SearchContext.Provider
-                  value={{ ...context, filter, options }}
-                  key={filter}
-                >
-                  {filterType === "domain" ? (
-                    <FilterMultilevelDropdown />
-                  ) : filterType === "hierarchy" ? (
-                    <HierarchyFilterDropdown />
-                  ) : (
-                    <FilterDropdown />
-                  )}
-                </SearchContext.Provider>
-              );
-            })}
-            <a className="resetFilters" onClick={() => resetFilters()}>
-              <FormattedMessage id="search.clear_filters" />
-            </a>
-          </>
-        )}
-      </div>
-    </>
-  );
-}

package/src/components/search/QualityControlsSearch.js

@@ -1,30 +0,0 @@
-import React from "react";
-import { Input } from "semantic-ui-react";
-import { useIntl } from "react-intl";
-import QualityControlFilters from "./QualityControlFilters";
-import QualityControlSelectedFilters from "./QualityControlSelectedFilters";
-
-import { useSearchContext } from "./SearchContext";
-
-export default function QualityControlsSearch() {
-  const { formatMessage } = useIntl();
-
-  const { query, setQuery, loadingFilters: loading } = useSearchContext();
-
-  return (
-    <>
-      <Input
-        value={query}
-        onChange={(_e, data) => setQuery(data.value)}
-        icon={{ name: "search", link: true }}
-        iconPosition="left"
-        action={<QualityControlFilters />}
-        placeholder={formatMessage({
-          id: "quality_controls.search.placeholder",
-        })}
-        loading={loading}
-      />
-      <QualityControlSelectedFilters />
-    </>
-  );
-}

package/src/components/search/SearchContext.js

@@ -1,210 +0,0 @@
-import _ from "lodash/fp";
-import React, {
-  useState,
-  useEffect,
-  useContext,
-  createContext,
-  useMemo,
-} from "react";
-import { useIntl } from "react-intl";
-
-import {
-  toFilterValues,
-  formatFilterValues,
-} from "@truedat/core/services/filters";
-import { makeOption } from "@truedat/core/services/i18n";
-
-import {
-  useQualityControlsSearch,
-  useQualityControlsFilters,
-} from "../../hooks/useQualityControls";
-
-import { useExecutionGroupsIndex } from "../../hooks/useExecutionGroups";
-
-const SearchContext = createContext();
-
-export const SearchContextProvider = (props) => {
-  const children = _.prop("children")(props);
-  const initialSortColumn = _.prop("initialSortColumn")(props);
-  const initialSortDirection = _.prop("initialSortDirection")(props);
-  const { formatMessage } = useIntl();
-
-  const [qualityControlsActions, setQualityControlsActions] = useState({});
-  const [executionGroups, setExecutionGroups] = useState([]);
-  const [qualityControlsStatus, setQualityControlsStatus] = useState();
-
-  const [canExecuteQualityControl, setCanExecuteQualityControl] =
-    useState(false);
-
-  const [loadingSearch, setLoadingSearch] = useState(true);
-  const [qualityControls, setQualityControls] = useState([]);
-
-  const [filtersPayload, setFiltersPayload] = useState([]);
-  const [loadingFilters, setLoadingFilters] = useState(true);
-  const [query, setQuery] = useState("");
-  const [activeFilterName, setActiveFilterName] = useState([]);
-  const [allActiveFilters, setAllActiveFilters] = useState({});
-
-  const [sortColumn, setSortColumn] = useState(initialSortColumn);
-  const [sortDirection, setSortDirection] = useState(initialSortDirection);
-
-  //STATE FUNCTIONS
-  const addFilter = ({ filter }) => {
-    setAllActiveFilters({ ...allActiveFilters, [filter]: [] });
-    setActiveFilterName(filter);
-  };
-  const resetFilters = () => setAllActiveFilters({});
-
-  const openFilter = ({ filter }) => setActiveFilterName(filter);
-  const closeFilter = () => {
-    setActiveFilterName(null);
-    setAllActiveFilters(_.pickBy(_.negate(_.isEmpty))(allActiveFilters));
-  };
-  const removeFilter = ({ filter }) => {
-    setAllActiveFilters(_.omit(filter)(allActiveFilters));
-    setActiveFilterName(activeFilterName == filter ? null : activeFilterName);
-  };
-
-  const toggleFilterValue = ({ filter, value }) => {
-    const values = _.propOr([], filter)(allActiveFilters);
-    const newValue = _.isArray(value)
-      ? value
-      : _.includes(value)(values)
-      ? _.without([value])(values)
-      : _.union([value])(values);
-
-    setAllActiveFilters({ ...allActiveFilters, [filter]: newValue });
-  };
-
-  //CALCULATIONS ON STATE
-  const selectedFilters = _.keys(allActiveFilters);
-
-  const filters = _.flow(
-    _.propOr({}, "data"),
-    _.omitBy(_.flow(_.propOr([], "values"), (values) => _.size(values) < 2))
-  )(filtersPayload);
-
-  // getAvailableFilters selector
-  const availableFilters = _.flow(_.keys, _.without(selectedFilters))(filters);
-
-  // getFilterTypes selector
-  const filterTypes = _.mapValues("type")(filters);
-
-  const translations = (formatMessage) => ({
-    "status.raw": (v) => formatMessage({ id: v, defaultMessage: v }),
-  });
-  const activeFilterValues = _.flow(
-    _.propOr({ values: [] }, activeFilterName),
-    ({ values, type }) => ({
-      values: _.flow(
-        _.concat(_.prop(activeFilterName)(allActiveFilters)),
-        _.uniq
-      )(values),
-      type,
-    }),
-    formatFilterValues,
-    _.map(makeOption(translations(formatMessage), activeFilterName))
-  )(filters);
-  const activeFilterSelectedValues = _.flow(
-    _.propOr([], activeFilterName),
-    toFilterValues
-  )(allActiveFilters);
-  const searchMust = useMemo(
-    () => ({
-      ..._.pickBy(_.negate(_.isEmpty))(allActiveFilters),
-      status: [qualityControlsStatus],
-      ...(canExecuteQualityControl && { executable: ["true"] }),
-    }),
-    [allActiveFilters, canExecuteQualityControl, qualityControlsStatus]
-  );
-  const filterMust = useMemo(
-    () =>
-      _.flow(
-        _.pickBy(_.negate(_.isEmpty)),
-        _.omit(activeFilterName)
-      )(allActiveFilters),
-    [allActiveFilters, activeFilterName]
-  );
-
-  const sort = useMemo(
-    () =>
-      sortColumn
-        ? {
-            [sortColumn]: sortDirection === "ascending" ? "asc" : "desc",
-          }
-        : null,
-    [sortColumn, sortDirection]
-  );
-
-  const { trigger: triggerFilters } = useQualityControlsFilters();
-  useEffect(() => {
-    setLoadingFilters(true);
-    triggerFilters({ query, must: filterMust }).then(({ data }) => {
-      setFiltersPayload(data);
-      setLoadingFilters(false);
-    });
-  }, [query, filterMust, triggerFilters]);
-
-  const { trigger: triggerSearch } = useQualityControlsSearch();
-  useEffect(() => {
-    setLoadingSearch(true);
-
-    !_.isEmpty(qualityControlsStatus) &&
-      triggerSearch({ query, must: searchMust, sort }).then(({ data }) => {
-        setQualityControlsActions(data?.actions);
-        setQualityControls(data?.data);
-        setLoadingSearch(false);
-      });
-  }, [query, searchMust, sort, triggerSearch, qualityControlsStatus]);
-
-  const { trigger: triggerListExecutionGroups } = useExecutionGroupsIndex();
-  const listExecutionGroups = () => {
-    triggerListExecutionGroups().then(({ data }) => {
-      setExecutionGroups(data?.data);
-    });
-  };
-
-  const context = {
-    disabled: false,
-    loadingFilters,
-
-    availableFilters,
-    selectedFilters,
-    filterTypes,
-
-    activeFilterName,
-    activeFilterSelectedValues,
-    activeFilterValues,
-    query,
-
-    addFilter,
-    resetFilters,
-    openFilter,
-    closeFilter,
-    removeFilter,
-    toggleFilterValue,
-    searchMust,
-    setQuery,
-
-    canExecuteQualityControl,
-    setCanExecuteQualityControl,
-    qualityControls,
-    qualityControlsActions,
-    loadingSearch,
-    listExecutionGroups,
-    executionGroups,
-
-    sortColumn,
-    sortDirection,
-    setSortColumn,
-    setSortDirection,
-    setQualityControlsStatus,
-  };
-
-  return (
-    <SearchContext.Provider value={context}>{children}</SearchContext.Provider>
-  );
-};
-
-export const useSearchContext = () => useContext(SearchContext);
-export default SearchContext;