@truedat/core 6.3.3 → 6.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "6.3.3",
+  "version": "6.3.5",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -36,7 +36,7 @@
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "6.3.3",
+    "@truedat/test": "6.3.4",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -118,5 +118,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "ee40175932833d26f2d0ca297ce5a3a26fb71cb2"
+  "gitHead": "2cacdf1fc99746cb4f8dca7d770662c0d96c5bb7"
 }

package/src/api.js

@@ -6,5 +6,8 @@ export const API_MESSAGE = "/api/messages/:id";
 export const API_MESSAGES = "/api/messages";
 export const API_REINDEX_GRANTS = "/api/grants/search/reindex_all";
 export const API_REINDEX_STRUCTURES = "/api/data_structures/search/reindex_all";
+export const API_USER_FILTERS = "/api/:type";
+export const API_USER_FILTER = "/api/:type/:id";
+export const API_GET_USER_FILTERS = "/api/:type/user/me";
 export const API_ACL_ENTRY = "/api/acl_entries/:id";
 export const API_ACL_RESOURCE_ENTRIES = "/api/acl_entries/:type/:id";

package/src/components/FilterItem.js

@@ -16,6 +16,11 @@ const FilterItemText = ({ filterName, text }) =>
     </i>
   );
 
+FilterItemText.propTypes = {
+  filterName: PropTypes.string,
+  text: PropTypes.string,
+};
+
 const preventDefault = (e, callback) => {
   e && e.preventDefault();
   e && e.stopPropagation();

package/src/components/ModalSaveFilter.js

@@ -41,7 +41,7 @@ export const ModalSaveFilter = ({ saveFilters, activeFilters, scope }) => {
     e.preventDefault();
     saveFilters({
       filters: activeFilters,
-      filterName: filterName,
+      filterName,
       scope,
       isGlobal,
     });

package/src/components/SearchFilterDropdown.js

@@ -145,7 +145,7 @@ SearchFilterDropdown.propTypes = {
   filter: PropTypes.string,
   FilterDataLoader: PropTypes.node,
   loaderProps: PropTypes.object,
-  FilterItem: PropTypes.object,
+  FilterItem: PropTypes.func,
   openFilter: PropTypes.func,
   removeFilter: PropTypes.func,
   toggleFilterValue: PropTypes.func,

package/src/components/UserFilter.js

@@ -0,0 +1,103 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { Label, Icon } from "semantic-ui-react";
+import { FormattedMessage } from "react-intl";
+import { useAuthorized } from "@truedat/core/hooks";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
+import { useUserFiltersDelete } from "../hooks/useUserFilters";
+import { ConfirmModal } from "./ConfirmModal";
+
+export const UserFilter = ({
+  userFilter,
+  disabled,
+  selectedUserFilter,
+  mutate,
+  setSelectedUserFilter,
+}) => {
+  const authorized = useAuthorized();
+  const { userFiltersType, resetFilters, setAllActiveFilters } =
+    useSearchContext();
+
+  const isGlobal = _.prop("is_global")(userFilter);
+
+  const { trigger: deleteUserFilter } = useUserFiltersDelete(
+    userFilter.id,
+    userFiltersType
+  );
+
+  const handleDelete = () => {
+    deleteUserFilter().then(() => {
+      mutate();
+    });
+  };
+
+  return (
+    <Label
+      basic={selectedUserFilter == userFilter.name ? false : true}
+      circular
+      className={isGlobal ? "global" : null}
+    >
+      <span
+        onClick={
+          disabled
+            ? null
+            : (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (selectedUserFilter == userFilter.name) {
+                  resetFilters();
+                  setSelectedUserFilter("");
+                } else {
+                  setAllActiveFilters(userFilter.filters);
+                  setSelectedUserFilter(userFilter.name);
+                }
+              }
+        }
+        className="userFilter"
+      >
+        {userFilter.name}
+      </span>
+
+      {!isGlobal || authorized ? (
+        <ConfirmModal
+          icon="trash"
+          trigger={
+            <Icon
+              className="selectable"
+              color="grey"
+              size="small"
+              name="trash alternate outline"
+            />
+          }
+          header={
+            <FormattedMessage id="search.filters.actions.delete.confirmation.header" />
+          }
+          content={
+            <FormattedMessage
+              id="search.filters.actions.delete.confirmation.content"
+              values={{
+                name: (
+                  <b>
+                    <i>{userFilter.name}</i>
+                  </b>
+                ),
+              }}
+            />
+          }
+          onConfirm={() => handleDelete()}
+        />
+      ) : null}
+    </Label>
+  );
+};
+
+UserFilter.propTypes = {
+  userFilter: PropTypes.object,
+  disabled: PropTypes.bool,
+  mutate: PropTypes.func,
+  selectedUserFilter: PropTypes.func,
+  resetFilters: PropTypes.func,
+};
+
+export default UserFilter;

package/src/hooks/useUserFilters.js

@@ -0,0 +1,39 @@
+import _ from "lodash/fp";
+import { compile } from "path-to-regexp";
+import useSWR from "swr";
+import useSWRMutations from "swr/mutation";
+import { accentInsensitivePathOrder } from "@truedat/core/services/sort";
+import {
+  apiJson,
+  apiJsonDelete,
+  apiJsonPost,
+} from "@truedat/core/services/api";
+
+import {
+  API_USER_FILTERS,
+  API_USER_FILTER,
+  API_GET_USER_FILTERS,
+} from "../api";
+
+export const useUserFilters = (type, scope) => {
+  const url = _.flow(
+    () => compile(API_GET_USER_FILTERS)({ type }),
+    _.concat(_.isUndefined(scope) ? "" : `?scope=${scope}`),
+    _.compact,
+    _.join("")
+  )("");
+  const { data, error, mutate } = useSWR(url, apiJson);
+  const userFilters = data?.data?.data;
+  _.sortBy(accentInsensitivePathOrder("name"))(userFilters);
+  return { userFilters, error, loading: !error && !data, mutate };
+};
+
+export const useUserFiltersCreate = (type) => {
+  const url = compile(API_USER_FILTERS)({ type });
+  return useSWRMutations(url, (url, { arg }) => apiJsonPost(url, arg));
+};
+
+export const useUserFiltersDelete = (id, type) => {
+  const url = compile(API_USER_FILTER)({ id, type });
+  return useSWRMutations(url, (url, { arg }) => apiJsonDelete(url, arg));
+};

package/src/search/FilterDropdown.js

@@ -15,7 +15,6 @@ export default function FilterDropdown() {
     filter,
     options,
     activeFilterSelectedValues,
-
     openFilter,
     closeFilter,
     removeFilter,

package/src/search/FilterMultilevelDropdown.js

@@ -21,7 +21,6 @@ export default function FilterMultilevelDropdown() {
     filter,
     options,
     activeFilterSelectedValues,
-
     openFilter,
     closeFilter,
     removeFilter,

package/src/search/HierarchyFilterDropdown.js

@@ -13,6 +13,7 @@ const PopulatedHierarchyFilterDropdown = () => {
 
   const { filter, options, toggleFilterValue, activeFilterSelectedValues } =
     context;
+
   const hierarchyId = _.flow(
     _.reject((item) => _.values(item).includes(undefined)),
     _.first,
@@ -57,11 +58,13 @@ const PopulatedHierarchyFilterDropdown = () => {
       const descendentKeys = _.map("key")(descendents);
       return [key, ...descendentKeys];
     };
+
     const newValue = _.flow(
       _.flatMap(getChildrenKeys),
       _.uniq,
       _.reject(_.isNil)
     )(value);
+
     toggleFilterValue({ filter, value: newValue });
   };
 
@@ -72,8 +75,8 @@ const PopulatedHierarchyFilterDropdown = () => {
         name: "hierarchyFilterDropdown",
         filter,
         options: filteredOptions,
-        activeFilterSelectedValues: idActiveValues,
         toggleFilterValue: handleToggleFilterValue,
+        activeFilterSelectedValues: idActiveValues,
       }}
       key={filter}
     >
@@ -84,7 +87,6 @@ const PopulatedHierarchyFilterDropdown = () => {
 
 const HierarchyFilterDropdown = () => {
   const { options } = useSearchContext();
-
   return _.isEmpty(options) ? (
     <FilterMultilevelDropdown />
   ) : (

package/src/search/SearchContext.js

@@ -24,6 +24,11 @@ export const SearchContextProvider = (props) => {
   const useSearch = _.prop("useSearch")(props);
   const useFilters = _.prop("useFilters")(props);
   const pageSize = _.propOr(20, "pageSize")(props);
+  const userFiltersType = _.prop("userFiltersType")(props);
+  const userFilterScope = _.prop("userFilterScope")(props);
+  const omitFilters = _.propOr([], "omitFilters")(props);
+  const translations = _.propOr(() => ({}), "translations")(props);
+  const filtersGroup = _.propOr([], "filtersGroup")(props);
 
   const { formatMessage } = useIntl();
 
@@ -37,6 +42,7 @@ export const SearchContextProvider = (props) => {
   const [allActiveFilters, setAllActiveFilters] = useState({});
   const [hiddenFilters, setHiddenFilters] = useState({});
 
+  const [filterParams, setFilterParams] = useState({});
   const [sortColumn, setSortColumn] = useState(initialSortColumn);
   const [sortDirection, setSortDirection] = useState(initialSortDirection);
   const [page, setPage] = useState(1);
@@ -95,16 +101,13 @@ export const SearchContextProvider = (props) => {
 
   const filters = _.flow(
     _.propOr({}, "data"),
+    _.omit(omitFilters),
     _.omitBy(_.flow(_.propOr([], "values"), (values) => _.size(values) < 2))
   )(filtersPayload);
 
   const availableFilters = _.flow(_.keys, _.without(selectedFilters))(filters);
   const filterTypes = _.mapValues("type")(filters);
 
-  const translations = (formatMessage) => ({
-    "status.raw": (v) => formatMessage({ id: v, defaultMessage: v }),
-  });
-
   const activeFilterValues = _.flow(
     _.propOr({ values: [] }, activeFilterName),
     ({ values, type }) => ({
@@ -152,7 +155,9 @@ export const SearchContextProvider = (props) => {
         : null,
     [sortColumn, sortDirection]
   );
+
   const { trigger: triggerFilters } = useFilters();
+
   useEffect(() => {
     setLoadingFilters(true);
 
@@ -164,9 +169,10 @@ export const SearchContextProvider = (props) => {
       setFiltersPayload(data);
       setLoadingFilters(false);
     });
-  }, [query, filterMust, triggerFilters]);
+  }, [query, filterMust]);
 
   const { trigger: triggerSearch } = useSearch();
+
   useEffect(() => {
     setLoading(true);
 
@@ -177,18 +183,47 @@ export const SearchContextProvider = (props) => {
       page: page - 1,
       size,
     };
+    setFilterParams(filterParam);
+
     triggerSearch(filterParam).then(({ data, headers }) => {
       setSearchData(data);
       setCountData(headers);
       setLoading(false);
     });
-  }, [query, searchMust, sort, triggerSearch, defaultFilters, page]);
+  }, [query, searchMust, sort, defaultFilters, page, size]);
+
+  const makeFiltersGroup = (filters, groups) =>
+    _.groupBy((filter) =>
+      _.flow(
+        _.find(([_group, fields]) => _.contains(filter)(fields)),
+        _.prop("[0]")
+      )(groups)
+    )(filters);
+
+  const filtersByGroup = makeFiltersGroup(availableFilters, filtersGroup);
+
+  const groupWithoutFilters = (groups) =>
+    _.flow(
+      _.prop("[0]"),
+      (groupName) => _.prop(groupName)(filtersByGroup),
+      _.isEmpty
+    )(groups);
+
+  const availableGroupedFilters = _.flow(
+    (groups) => _.concat(groups, [[undefined, []]]),
+    _.reject(groupWithoutFilters),
+    _.map(([groupName, _filters]) => [
+      groupName,
+      _.prop(groupName)(filtersByGroup),
+    ])
+  )(filtersGroup);
 
   const context = {
     disabled: false,
     loadingFilters,
 
     availableFilters,
+    availableGroupedFilters,
     selectedFilters,
     filterTypes,
 
@@ -209,6 +244,9 @@ export const SearchContextProvider = (props) => {
     toggleHiddenFilterValue,
     searchMust,
     setQuery,
+    setAllActiveFilters,
+    allActiveFilters,
+    filters,
 
     searchData,
     loading,
@@ -222,6 +260,11 @@ export const SearchContextProvider = (props) => {
     count,
     page,
     size,
+    sort,
+    filterParams,
+
+    userFiltersType,
+    userFilterScope,
   };
 
   return (

package/src/search/SearchFilters.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React from "react";
+import React, { Fragment } from "react";
 import { Dropdown } from "semantic-ui-react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { i18nOrder } from "@truedat/core/services/sort";
@@ -10,7 +10,7 @@ const removePrefix = _.replace(/^.*\./, "");
 export default function SearchFilters() {
   const {
     disabled,
-    availableFilters,
+    availableGroupedFilters,
     addFilter,
     resetFilters,
     loadingFilters: loading,
@@ -40,20 +40,36 @@ export default function SearchFilters() {
             />
           </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)}
+        {_.map.convert({ cap: false })(([groupName, filters], idx) => (
+          <Fragment key={idx}>
+            {idx == 0 ? null : <Dropdown.Divider />}
+            {groupName ? (
+              <Dropdown.Header key={groupName}>
+                <b>
+                  <FormattedMessage
+                    id={`filters.group.header.${groupName}`}
+                    defaultMessage={groupName}
+                  />
+                </b>
+              </Dropdown.Header>
+            ) : null}
+
+            {_.flow(
+              _.defaultTo([]),
+              _.sortBy(i18nOrder(formatMessage, "filters")),
+              _.map((filter) => (
+                <Dropdown.Item
+                  key={filter}
+                  text={formatMessage({
+                    id: `filters.${filter}`,
+                    defaultMessage: removePrefix(filter),
+                  })}
+                  onClick={() => addFilter({ filter })}
+                />
+              ))
+            )(filters)}
+          </Fragment>
+        ))(availableGroupedFilters)}
       </Dropdown.Menu>
     </Dropdown>
   );

package/src/search/SearchSelectedFilters.js

@@ -1,6 +1,9 @@
 import _ from "lodash/fp";
-import React from "react";
+import React, { useState } from "react";
 import { FormattedMessage } from "react-intl";
+import { useUserFilters, useUserFiltersCreate } from "../hooks/useUserFilters";
+import ModalSaveFilter from "../components/ModalSaveFilter";
+import UserFilters from "./UserFilters";
 import FilterDropdown from "./FilterDropdown";
 import FilterMultilevelDropdown from "./FilterMultilevelDropdown";
 import HierarchyFilterDropdown from "./HierarchyFilterDropdown";
@@ -14,10 +17,37 @@ export default function SearchSelectedFilters() {
     filterTypes,
     activeFilterName,
     activeFilterValues,
+    allActiveFilters,
+    userFiltersType,
+    userFilterScope,
   } = context;
+  const [selectedUserFilter, setSelectedUserFilter] = useState();
+  const { trigger: saveFilters } = useUserFiltersCreate(userFiltersType);
+  const { userFilters, loading, mutate } = useUserFilters(
+    userFiltersType,
+    userFilterScope
+  );
+
+  const handleSubmit = ({ filterName, filters, isGlobal }) => {
+    const requestData = {
+      user_search_filter: { name: filterName, filters, is_global: isGlobal },
+    };
+    saveFilters(requestData).then(() => {
+      mutate();
+    });
+  };
 
   return (
     <>
+      {!_.isEmpty(userFilters) ? (
+        <UserFilters
+          mutate={mutate}
+          userFilters={userFilters}
+          disabled={loading}
+          setSelectedUserFilter={setSelectedUserFilter}
+          selectedUserFilter={selectedUserFilter}
+        />
+      ) : null}
       <div className="selectedFilters">
         {_.isEmpty(selectedFilters) ? null : (
           <>
@@ -29,6 +59,7 @@ export default function SearchSelectedFilters() {
               const options = _.isEqual(filter, activeFilterName)
                 ? activeFilterValues
                 : null;
+
               return (
                 <SearchContext.Provider
                   value={{ ...context, filter, options }}
@@ -44,9 +75,20 @@ export default function SearchSelectedFilters() {
                 </SearchContext.Provider>
               );
             })}
-            <a className="resetFilters" onClick={() => resetFilters()}>
+            <a
+              className="resetFilters"
+              onClick={() => {
+                resetFilters();
+                setSelectedUserFilter("");
+              }}
+            >
               <FormattedMessage id="search.clear_filters" />
             </a>
+            <ModalSaveFilter
+              saveFilters={handleSubmit}
+              activeFilters={allActiveFilters}
+              scope={userFilterScope}
+            />
           </>
         )}
       </div>

package/src/search/SearchWidget.js

@@ -1,10 +1,9 @@
 import React from "react";
 import { Input } from "semantic-ui-react";
 import { useIntl } from "react-intl";
-import SearchFilters from "@truedat/core/search/SearchFilters";
-import SearchSelectedFilters from "@truedat/core/search/SearchSelectedFilters";
-
-import { useSearchContext } from "@truedat/core/search/SearchContext";
+import SearchFilters from "./SearchFilters";
+import SearchSelectedFilters from "./SearchSelectedFilters";
+import { useSearchContext } from "./SearchContext";
 
 export default function SearchWidget() {
   const { formatMessage } = useIntl();

package/src/search/UserFilter.js

@@ -0,0 +1,103 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { Label, Icon } from "semantic-ui-react";
+import { FormattedMessage } from "react-intl";
+import { useAuthorized } from "@truedat/core/hooks";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
+import { useUserFiltersDelete } from "../hooks/useUserFilters";
+import { ConfirmModal } from "./ConfirmModal";
+
+export const UserFilter = ({
+  userFilter,
+  disabled,
+  selectedUserFilter,
+  mutate,
+  setSelectedUserFilter,
+}) => {
+  const authorized = useAuthorized();
+  const { userFiltersType, resetFilters, setAllActiveFilters } =
+    useSearchContext();
+
+  const isGlobal = _.prop("is_global")(userFilter);
+
+  const { trigger: deleteUserFilter } = useUserFiltersDelete(
+    userFilter.id,
+    userFiltersType
+  );
+
+  const handleDelete = () => {
+    deleteUserFilter().then(() => {
+      mutate();
+    });
+  };
+
+  return (
+    <Label
+      basic={selectedUserFilter == userFilter.name ? false : true}
+      circular
+      className={isGlobal ? "global" : null}
+    >
+      <span
+        onClick={
+          disabled
+            ? null
+            : (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (selectedUserFilter == userFilter.name) {
+                  resetFilters();
+                  setSelectedUserFilter("");
+                } else {
+                  setAllActiveFilters(userFilter.filters);
+                  setSelectedUserFilter(userFilter.name);
+                }
+              }
+        }
+        className="userFilter"
+      >
+        {userFilter.name}
+      </span>
+
+      {!isGlobal || authorized ? (
+        <ConfirmModal
+          icon="trash"
+          trigger={
+            <Icon
+              className="selectable"
+              color="grey"
+              size="small"
+              name="trash alternate outline"
+            />
+          }
+          header={
+            <FormattedMessage id="search.filters.actions.delete.confirmation.header" />
+          }
+          content={
+            <FormattedMessage
+              id="search.filters.actions.delete.confirmation.content"
+              values={{
+                name: (
+                  <b>
+                    <i>{userFilter.name}</i>
+                  </b>
+                ),
+              }}
+            />
+          }
+          onConfirm={() => handleDelete()}
+        />
+      ) : null}
+    </Label>
+  );
+};
+
+UserFilter.propTypes = {
+  userFilter: PropTypes.object,
+  disabled: PropTypes.bool,
+  mutate: PropTypes.func,
+  selectedUserFilter: PropTypes.func,
+  resetFilters: PropTypes.func,
+};
+
+export default UserFilter;

package/src/search/UserFilters.js

@@ -0,0 +1,136 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { Label, Icon } from "semantic-ui-react";
+import { FormattedMessage } from "react-intl";
+import { useAuthorized } from "@truedat/core/hooks";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
+import { useUserFiltersDelete } from "../hooks/useUserFilters";
+import { ConfirmModal } from "../components/ConfirmModal";
+
+export const DeleteModal = ({ userFilter, userFiltersType, mutate }) => {
+  const { trigger: deleteUserFilter } = useUserFiltersDelete(
+    userFilter.id,
+    userFiltersType
+  );
+  const handleDelete = () => {
+    deleteUserFilter().then(() => {
+      mutate();
+    });
+  };
+  return (
+    <ConfirmModal
+      icon="trash"
+      trigger={
+        <Icon
+          className="selectable"
+          color="grey"
+          size="small"
+          name="trash alternate outline"
+        />
+      }
+      header={
+        <FormattedMessage id="search.filters.actions.delete.confirmation.header" />
+      }
+      content={
+        <FormattedMessage
+          id="search.filters.actions.delete.confirmation.content"
+          values={{
+            name: (
+              <b>
+                <i>{userFilter.name}</i>
+              </b>
+            ),
+          }}
+        />
+      }
+      onConfirm={() => {
+        handleDelete();
+      }}
+    />
+  );
+};
+
+DeleteModal.propTypes = {
+  userFilter: PropTypes.object,
+  userFiltersType: PropTypes.string,
+  mutate: PropTypes.func,
+};
+
+export const UserFilters = ({
+  mutate,
+  userFilters,
+  disabled,
+  setSelectedUserFilter,
+  selectedUserFilter,
+}) => {
+  const authorized = useAuthorized();
+  const { userFiltersType, resetFilters, setAllActiveFilters } =
+    useSearchContext();
+
+  const sortedUserFilters = _.orderBy(
+    ["is_global", "id"],
+    ["desc", "asc"]
+  )(userFilters);
+
+  return _.isEmpty(userFilters) ? null : (
+    <div className="selectedFilters">
+      {sortedUserFilters.map((userFilter, key) => {
+        const isGlobal = _.prop("is_global")(userFilter);
+
+        return (
+          <Label
+            basic={selectedUserFilter == userFilter.name ? false : true}
+            circular
+            className={isGlobal ? "global" : null}
+            key={key}
+          >
+            <span
+              onClick={
+                disabled
+                  ? null
+                  : (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      if (selectedUserFilter == userFilter.name) {
+                        resetFilters();
+                        setSelectedUserFilter(null);
+                      } else {
+                        setAllActiveFilters(
+                          _.propOr({}, "filters")(userFilter)
+                        );
+                        setSelectedUserFilter(userFilter.name);
+                      }
+                    }
+              }
+              className="userFilter"
+            >
+              {userFilter.name}
+            </span>
+
+            {!isGlobal || authorized ? (
+              <DeleteModal
+                userFilter={userFilter}
+                userFiltersType={userFiltersType}
+                mutate={mutate}
+              />
+            ) : null}
+          </Label>
+        );
+      })}
+    </div>
+  );
+};
+
+UserFilters.propTypes = {
+  selectedUserFilter: PropTypes.string,
+  userFilters: PropTypes.array,
+  disabled: PropTypes.bool,
+  userFilterScope: PropTypes.string,
+  mutate: PropTypes.func,
+  applyUserFilter: PropTypes.func,
+  deleteUserFilter: PropTypes.func,
+  resetFilters: PropTypes.func,
+};
+
+export default UserFilters;