@truedat/core 6.6.0 → 6.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "6.6.0",
+  "version": "6.6.1",
   "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.6.0",
+    "@truedat/test": "6.6.1",
     "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": "84d52d5067ff09b8d9c9b8a9bc8018c53a8e700c"
+  "gitHead": "2fa84eee80136fa3bd394c04153e6f16d2e5a1e0"
 }

package/src/api.js

@@ -8,6 +8,6 @@ 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_GET_USER_FILTERS = "/api/:type/me";
 export const API_ACL_ENTRY = "/api/acl_entries/:id";
 export const API_ACL_RESOURCE_ENTRIES = "/api/acl_entries/:type/:id";

package/src/components/DateFilter.js

@@ -9,45 +9,45 @@ const typeOptions = ({ formatMessage }) => [
   {
     key: "since",
     text: formatMessage({ id: "dateFilter.since" }),
-    value: "since"
+    value: "since",
   },
   {
     key: "before",
     text: formatMessage({ id: "dateFilter.before" }),
-    value: "before"
+    value: "before",
   },
   {
     key: "range",
     text: formatMessage({ id: "dateFilter.range" }),
-    value: "range"
-  }
+    value: "range",
+  },
 ];
 
 const dateUnitOptions = ({ formatMessage }) => [
   {
     key: "days",
     text: formatMessage({ id: "dateFilter.days" }),
-    value: "d"
+    value: "d",
   },
   {
     key: "weeks",
     text: formatMessage({ id: "dateFilter.weeks" }),
-    value: "w"
+    value: "w",
   },
   {
     key: "months",
     text: formatMessage({ id: "dateFilter.months" }),
-    value: "M"
+    value: "M",
   },
   {
     key: "years",
     text: formatMessage({ id: "dateFilter.years" }),
-    value: "y"
-  }
+    value: "y",
+  },
 ];
 
-const validNumber = value => RegExp("^\\d+$").test(value);
-const validRange = value =>
+const validNumber = (value) => RegExp("^\\d+$").test(value);
+const validRange = (value) =>
   RegExp("^\\d{4}-\\d\\d-\\d\\d *- *\\d{4}-\\d\\d-\\d\\d$").test(value);
 
 export const DateFilter = ({
@@ -56,19 +56,21 @@ export const DateFilter = ({
   defaultValues,
   size = "small",
   name = "date",
-  dateFormat = "YYYY-MM-DD"
+  dateFormat = "YYYY-MM-DD",
 }) => {
   const intl = useIntl();
   const [type, setType] = useState(defaultValues?.type || "since");
   const [unit, setUnit] = useState(defaultValues?.unit || "d");
   const [value, setValue] = useState(defaultValues?.value || "1");
   const [range, setRange] = useState(defaultValues?.range || "");
+
   useEffect(() => {
     const valid = type === "range" ? validRange(range) : validNumber(value);
     if (valid) {
       onChange({ name, type, range, unit, value });
     }
-  }, [name, type, unit, value, range, onChange]);
+  }, [name, type, unit, value, range]);
+
   const currentDate = moment();
   return (
     <Form size={size} autoComplete="off">
@@ -125,7 +127,7 @@ DateFilter.propTypes = {
   label: PropTypes.node,
   name: PropTypes.string,
   onChange: PropTypes.func,
-  size: PropTypes.string
+  size: PropTypes.string,
 };
 
 export default DateFilter;

package/src/components/ResourceMembers.js

@@ -37,7 +37,6 @@ export const ResourceMembers = ({ type }) => {
     mutate: refreshAclEntries,
   } = useAclEntries({ type, id });
   const { aclEntries, actions } = data;
-  // debugger
   const { formatMessage } = useIntl();
   const [searchFilter, setSearchFilter] = useState("");
 

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

@@ -0,0 +1,64 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import SearchDateFilter from "@truedat/core/search/SearchDateFilter";
+import SearchContextWrapper from "@truedat/core/components/common/SearchContextWrapper";
+
+describe("<SearchDateFilter/>", () => {
+  const defaultValues = {
+    active: false,
+    name: "updated_at",
+    type: "since",
+    unit: "d",
+    value: "1",
+  };
+
+  const renderOpts = {
+    messages: {
+      en: {
+        "queryables.form.resource": "resource",
+        "queryables.resource.type": "type",
+        "queryables.resource.type.data_structure": "data_structure",
+        "queryables.resource.type.reference_dataset": "reference_dataset",
+        "queryables.resource.type.data_view": "data_view",
+        "queryables.resource.selector.data_view": "data_view",
+        "queryables.resource.selector.reference_dataset": "reference_dataset",
+        "structures.not_found.body": "body",
+        "structures.not_found.header": "header",
+        "structures.search.placeholder": "placeholder",
+        "structures.loading.header": "loading",
+        "filter.updated_at": "Updated at",
+        "dateFilter.years": "Years",
+        "dateFilter.months": "Months",
+        "dateFilter.weeks": "Weeks",
+        "dateFilter.days": "Days",
+        "dateFilter.range": "Range",
+        "dateFilter.before": "Before",
+        "dateFilter.since": "Since",
+      },
+    },
+  };
+
+  const searchProps = {
+    setDateFilters: jest.fn(),
+  };
+
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <SearchContextWrapper props={searchProps}>
+        <SearchDateFilter active={true} defaultValues={defaultValues} />,
+      </SearchContextWrapper>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("active false", () => {
+    const { container } = render(
+      <SearchContextWrapper props={searchProps}>
+        <SearchDateFilter active={false} defaultValues={defaultValues} />,
+      </SearchContextWrapper>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,183 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SearchDateFilter/> active false 1`] = `
+<div>
+  ,
+</div>
+`;
+
+exports[`<SearchDateFilter/> matches the latest snapshot 1`] = `
+<div>
+  <form
+    autocomplete="off"
+    class="ui small form"
+  >
+    <div
+      class="fields date filter"
+    >
+      <div
+        class="inline field"
+      >
+        <label>
+          Updated at
+        </label>
+        <div
+          aria-expanded="false"
+          class="ui selection dropdown"
+          role="listbox"
+          tabindex="0"
+        >
+          <div
+            aria-atomic="true"
+            aria-live="polite"
+            class="divider text"
+            role="alert"
+          >
+            Since
+          </div>
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          <div
+            class="menu transition"
+          >
+            <div
+              aria-checked="true"
+              aria-selected="true"
+              class="active selected item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                Since
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                Before
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                Range
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="field since"
+      >
+        <div
+          class="ui right labeled input"
+        >
+          <input
+            placeholder="5"
+            type="number"
+            value="1"
+          />
+          <div
+            class="ui label"
+          >
+            <div
+              aria-expanded="false"
+              class="ui dropdown"
+              role="listbox"
+              tabindex="0"
+            >
+              <div
+                aria-atomic="true"
+                aria-live="polite"
+                class="divider text"
+                role="alert"
+              >
+                Days
+              </div>
+              <i
+                aria-hidden="true"
+                class="dropdown icon"
+              />
+              <div
+                class="menu transition"
+              >
+                <div
+                  aria-checked="true"
+                  aria-selected="true"
+                  class="active selected item"
+                  role="option"
+                  style="pointer-events: all;"
+                >
+                  <span
+                    class="text"
+                  >
+                    Days
+                  </span>
+                </div>
+                <div
+                  aria-checked="false"
+                  aria-selected="false"
+                  class="item"
+                  role="option"
+                  style="pointer-events: all;"
+                >
+                  <span
+                    class="text"
+                  >
+                    Weeks
+                  </span>
+                </div>
+                <div
+                  aria-checked="false"
+                  aria-selected="false"
+                  class="item"
+                  role="option"
+                  style="pointer-events: all;"
+                >
+                  <span
+                    class="text"
+                  >
+                    Months
+                  </span>
+                </div>
+                <div
+                  aria-checked="false"
+                  aria-selected="false"
+                  class="item"
+                  role="option"
+                  style="pointer-events: all;"
+                >
+                  <span
+                    class="text"
+                  >
+                    Years
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>
+  ,
+</div>
+`;

package/src/components/common/SearchContextWrapper.js

@@ -0,0 +1,51 @@
+import React from "react";
+import PropTypes from "prop-types";
+import SearchContext from "@truedat/core/search/SearchContext";
+import SearchContextProvider from "@truedat/core/search/SearchContext";
+
+export default function SearchContextWrapper({
+  provider = true,
+  props,
+  children,
+}) {
+  const useSearch = () => ({
+    trigger: () => ({
+      then: (callback) =>
+        callback({
+          data: [],
+          headers: {},
+        }),
+    }),
+  });
+
+  const useFilters = () => ({
+    trigger: () => ({
+      then: (callback) =>
+        callback({
+          data: [],
+        }),
+    }),
+  });
+
+  const searchProps = {
+    useSearch,
+    useFilters,
+    translations: jest.fn(),
+    defaultFilters: {},
+    ...props,
+  };
+
+  return provider ? (
+    <SearchContext.Provider value={searchProps}>
+      {children}
+    </SearchContext.Provider>
+  ) : (
+    <SearchContextProvider {...searchProps}>{children}</SearchContextProvider>
+  );
+}
+
+SearchContextWrapper.propTypes = {
+  props: PropTypes.object,
+  children: PropTypes.node,
+  provider: PropTypes.bool,
+};

package/src/hooks/useUserFilters.js

@@ -18,9 +18,7 @@ import {
 export const useUserFilters = (type, scope) => {
   const url = _.flow(
     () => compile(API_GET_USER_FILTERS)({ type }),
-    _.concat(_.isUndefined(scope) ? "" : `?scope=${scope}`),
-    _.compact,
-    _.join("")
+    (baseUrl) => `${baseUrl}${scope ? `?scope=${scope}` : ""}`
   )("");
   const { data, error, mutate } = useSWR(url, apiJson);
   const userFilters = data?.data?.data;

package/src/messages/en.js

@@ -151,6 +151,7 @@ export default {
   "sidemenu.taxonomy": "Taxonomy",
   "sidemenu.templates": "Templates",
   "sidemenu.users": "Users",
+  "structures.search.placeholder": "Search structures...",
   "view.unauthorized.content":
     "If you want to update your permissions, please contact the administrator.",
   "view.unauthorized.head": "You are not authorized to view this content",

package/src/messages/es.js

@@ -155,6 +155,7 @@ export default {
   "sidemenu.taxonomy": "Dominios",
   "sidemenu.templates": "Plantillas",
   "sidemenu.users": "Usuarios",
+  "structures.search.placeholder": "Buscar estructuras...",
   "view.unauthorized.head":
     "No dispones de autorización para ver este contenido",
   "view.unauthorized.content":

package/src/search/SearchContext.js

@@ -20,27 +20,31 @@ export const SearchContextProvider = (props) => {
   const children = _.prop("children")(props);
   const initialSortColumn = _.prop("initialSortColumn")(props);
   const initialSortDirection = _.prop("initialSortDirection")(props);
-  const defaultFilters = _.prop("defaultFilters")(props);
   const useSearch = _.prop("useSearch")(props);
   const useFilters = _.prop("useFilters")(props);
-  const pageSize = _.propOr(20, "pageSize")(props);
+  const pageSize = _.propOr(7, "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 defaultFilters = useState(_.prop("defaultFilters")(props))[0];
+  const enrichSearchPayload = useState(_.prop("enrichSearchPayload")(props))[0];
 
   const { formatMessage } = useIntl();
 
   const [loading, setLoading] = useState(true);
   const [searchData, setSearchData] = useState([]);
 
-  const [filtersPayload, setFiltersPayload] = useState([]);
+  const [filtersPayload, setFiltersPayload] = useState({});
   const [loadingFilters, setLoadingFilters] = useState(true);
   const [query, setQuery] = useState("");
   const [activeFilterName, setActiveFilterName] = useState([]);
   const [allActiveFilters, setAllActiveFilters] = useState({});
   const [hiddenFilters, setHiddenFilters] = useState({});
+  const [dateFilters, setDateFilters] = useState({});
+  const [toggleDateFilter, setToggleDateFilter] = useState(false);
+
   const [filterParams, setFilterParams] = useState({});
   const [sortColumn, setSortColumn] = useState(initialSortColumn);
   const [sortDirection, setSortDirection] = useState(initialSortDirection);
@@ -104,6 +108,11 @@ export const SearchContextProvider = (props) => {
     _.omitBy(_.flow(_.propOr([], "values"), (values) => _.size(values) < 2))
   )(filtersPayload);
 
+  const allFilters = _.flow(
+    _.propOr({}, "data"),
+    _.omit(omitFilters)
+  )(filtersPayload);
+
   const availableFilters = _.flow(_.keys, _.without(selectedFilters))(filters);
   const filterTypes = _.mapValues("type")(filters);
 
@@ -129,9 +138,10 @@ export const SearchContextProvider = (props) => {
   const searchMust = useMemo(
     () => ({
       ...defaultFilters,
+      ...dateFilters,
       ..._.pickBy(_.negate(_.isEmpty))(allActiveFilters),
     }),
-    [allActiveFilters, defaultFilters]
+    [allActiveFilters, defaultFilters, dateFilters]
   );
 
   const filterMust = useMemo(
@@ -177,6 +187,7 @@ export const SearchContextProvider = (props) => {
     const filterParam = {
       ...(!_.isEmpty(query) && { query }),
       must: searchMust,
+      ...enrichSearchPayload,
       sort,
       page: page - 1,
       size,
@@ -188,7 +199,15 @@ export const SearchContextProvider = (props) => {
       setCountData(headers);
       setLoading(false);
     });
-  }, [query, searchMust, sort, defaultFilters, page, size]);
+  }, [
+    query,
+    searchMust,
+    sort,
+    defaultFilters,
+    page,
+    size,
+    enrichSearchPayload,
+  ]);
 
   const makeFiltersGroup = (filters, groups) =>
     _.groupBy((filter) =>
@@ -234,7 +253,6 @@ export const SearchContextProvider = (props) => {
     setSortDirection(query == "" ? initialSortDirection : "descending");
     setQuery(query);
   };
-
   const context = {
     disabled: false,
     loadingFilters,
@@ -264,6 +282,10 @@ export const SearchContextProvider = (props) => {
     setAllActiveFilters,
     allActiveFilters,
     filters,
+    allFilters,
+    setDateFilters,
+    toggleDateFilter,
+    setToggleDateFilter,
 
     searchData,
     loading,

package/src/search/SearchDateFilter.js

@@ -0,0 +1,35 @@
+import { isEmpty, omitBy } from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { FormattedMessage } from "react-intl";
+import DateFilter from "@truedat/core/components/DateFilter";
+import { dateFilterFormatter } from "@truedat/core/services/dateFilterFormatter";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
+
+const SearchDateFilter = ({ active, defaultValues }) => {
+  const dateFormatter = dateFilterFormatter();
+  const dateMust = (dateFilter) => omitBy(isEmpty)(dateFormatter(dateFilter));
+
+  const { setDateFilters } = useSearchContext();
+
+  const onChangeDateFilter = (e) => {
+    const dateFilterFormatted = dateMust({ active, ...e });
+    setDateFilters(dateFilterFormatted);
+  };
+
+  return active ? (
+    <DateFilter
+      label={<FormattedMessage id="filter.updated_at" />}
+      name="updated_at"
+      onChange={onChangeDateFilter}
+      defaultValues={defaultValues}
+    />
+  ) : null;
+};
+
+SearchDateFilter.propTypes = {
+  active: PropTypes.bool,
+  defaultValues: PropTypes.object,
+};
+
+export default SearchDateFilter;

package/src/search/SearchSelectedFilters.js

@@ -31,9 +31,14 @@ export default function SearchSelectedFilters() {
     userFilterScope
   );
 
-  const handleSubmit = ({ filterName, filters, isGlobal }) => {
+  const handleSubmit = ({ filterName, filters, isGlobal, scope }) => {
     const requestData = {
-      user_search_filter: { name: filterName, filters, is_global: isGlobal },
+      user_search_filter: {
+        name: filterName,
+        filters,
+        is_global: isGlobal,
+        scope: scope,
+      },
     };
     saveFilters(requestData).then(() => {
       mutate();

package/src/search/SearchWidget.js

@@ -1,29 +1,71 @@
-import React from "react";
-import { Input } from "semantic-ui-react";
+import React, { useState } from "react";
+import { Button, Icon, Input } from "semantic-ui-react";
 import { useIntl } from "react-intl";
+import PropTypes from "prop-types";
 import SearchFilters from "./SearchFilters";
 import SearchSelectedFilters from "./SearchSelectedFilters";
 import { useSearchContext } from "./SearchContext";
+import SearchDateFilter from "./SearchDateFilter";
 
-export default function SearchWidget() {
+export default function SearchWidget({ dateFilter = false }) {
   const { formatMessage } = useIntl();
 
-  const { query, setQuery, loadingFilters: loading } = useSearchContext();
+  const {
+    query,
+    setQuery,
+    loadingFilters: loading,
+    toggleDateFilter,
+    setToggleDateFilter,
+    setDateFilters,
+  } = useSearchContext();
+
+  const defaultValues = {
+    name: "updated_at",
+    type: "since",
+    unit: "d",
+    value: "1",
+  };
+
+  const onClickSearchDateFilter = () => {
+    setToggleDateFilter(!toggleDateFilter);
+    toggleDateFilter ? setDateFilters({}) : null;
+  };
 
   return (
     <>
       <Input
         value={query}
         onChange={(_e, data) => setQuery(data.value)}
-        icon={{ name: "search", link: true }}
         iconPosition="left"
-        action={<SearchFilters />}
+        action
         placeholder={formatMessage({
           id: "search.placeholder",
         })}
         loading={loading}
-      />
+      >
+        <Icon name="search" link />
+        <input />
+        {dateFilter ? (
+          <Button
+            icon="calendar alternate outline"
+            active={toggleDateFilter}
+            onClick={() => onClickSearchDateFilter()}
+          />
+        ) : null}
+
+        <SearchFilters />
+      </Input>
+
       <SearchSelectedFilters />
+
+      <SearchDateFilter
+        active={toggleDateFilter}
+        defaultValues={defaultValues}
+      />
     </>
   );
 }
+
+SearchWidget.propTypes = {
+  dateFilter: PropTypes.bool,
+};

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

@@ -3,33 +3,52 @@ import React from "react";
 import { render } from "@truedat/test/render";
 import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import SearchContext from "@truedat/core/search/SearchContext";
+import SearchContextWrapper from "@truedat/core/components/common/SearchContextWrapper";
 import SearchWidget from "../SearchWidget";
 
 const messages = {
   en: {
     "search.placeholder": "Search...",
+    "filter.updated_at": "Last changed",
+    "dateFilter.years": "Years",
+    "dateFilter.months": "Months",
+    "dateFilter.weeks": "Weeks",
+    "dateFilter.days": "Days",
+    "dateFilter.range": "Range",
+    "dateFilter.before": "Before",
+    "dateFilter.since": "Since",
   },
 };
 
 const renderOpts = { messages };
 
 const setQuery = jest.fn();
+
 const searchProps = {
   userFiltersType: "foo",
-  useFilters: jest.fn(),
-  useSearch: jest.fn(),
-  loadingFilters: false,
   query: "",
   setQuery,
+  toggleDateFilter: false,
+  setToggleDateFilter: jest.fn(),
+  setDateFilters: jest.fn(),
 };
 
 describe("<SearchWidget/>", () => {
   it("matches the latest snapshot", () => {
     const { container } = render(
-      <SearchContext.Provider value={searchProps}>
+      <SearchContextWrapper props={searchProps}>
         <SearchWidget />
-      </SearchContext.Provider>,
+      </SearchContextWrapper>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot with SearchDateFilter active", () => {
+    const { container } = render(
+      <SearchContextWrapper props={searchProps}>
+        <SearchWidget dateFilter={true} />
+      </SearchContextWrapper>,
       renderOpts
     );
     expect(container).toMatchSnapshot();
@@ -37,9 +56,9 @@ describe("<SearchWidget/>", () => {
 
   it("type in filter input filter options", async () => {
     const { getByRole } = render(
-      <SearchContext.Provider value={searchProps}>
+      <SearchContextWrapper props={searchProps}>
         <SearchWidget />
-      </SearchContext.Provider>,
+      </SearchContextWrapper>,
       renderOpts
     );
 
@@ -49,4 +68,22 @@ describe("<SearchWidget/>", () => {
       expect(setQuery).toBeCalledTimes(1);
     });
   });
+
+  it("show date filter", () => {
+    const props = {
+      dateFilter: true,
+    };
+    const newSearchProps = {
+      ...searchProps,
+      toggleDateFilter: true,
+    };
+
+    const { queryByText } = render(
+      <SearchContextWrapper props={newSearchProps}>
+        <SearchWidget {...props} />
+      </SearchContextWrapper>,
+      renderOpts
+    );
+    expect(queryByText(/Weeks/)).toBeInTheDocument();
+  });
 });

package/src/search/__tests__/__snapshots__/SearchWidget.spec.js.snap

@@ -5,17 +5,76 @@ exports[`<SearchWidget/> matches the latest snapshot 1`] = `
   <div
     class="ui action left icon input"
   >
+    <i
+      aria-hidden="true"
+      class="search link icon"
+    />
     <input
       placeholder="Search..."
       type="text"
       value=""
     />
+    <div
+      aria-expanded="false"
+      class="ui button floating labeled scrolling dropdown icon"
+      role="listbox"
+      tabindex="0"
+    >
+      <div
+        aria-atomic="true"
+        aria-live="polite"
+        class="divider text"
+        role="alert"
+      >
+        Filters
+      </div>
+      <i
+        aria-hidden="true"
+        class="filter icon"
+      />
+      <div
+        class="menu transition"
+      >
+        <div
+          class="item"
+          role="option"
+        >
+          <em>
+            (reset filters)
+          </em>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="selectedFilters"
+  />
+</div>
+`;
+
+exports[`<SearchWidget/> matches the latest snapshot with SearchDateFilter active 1`] = `
+<div>
+  <div
+    class="ui action left icon input"
+  >
     <i
       aria-hidden="true"
       class="search link icon"
     />
+    <input
+      placeholder="Search..."
+      type="text"
+      value=""
+    />
+    <button
+      class="ui icon button"
+    >
+      <i
+        aria-hidden="true"
+        class="calendar alternate outline icon"
+      />
+    </button>
     <div
-      aria-busy="false"
       aria-expanded="false"
       class="ui button floating labeled scrolling dropdown icon"
       role="listbox"

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

@@ -11,7 +11,7 @@ describe("selectors: makeDateFiltersSelector", () => {
         name,
         type: "before",
         value: "5",
-        unit: "d"
+        unit: "d",
       };
       const state = { foo };
       expect(selector(state)).toEqual({ updated_at: { lt: "now-5d" } });
@@ -23,7 +23,7 @@ describe("selectors: makeDateFiltersSelector", () => {
         name,
         type: "since",
         value: "1",
-        unit: "M"
+        unit: "M",
       };
       const state = { foo };
       expect(selector(state)).toEqual({ updated_at: { gte: "now-1M" } });
@@ -34,11 +34,11 @@ describe("selectors: makeDateFiltersSelector", () => {
         active: true,
         name,
         type: "range",
-        range: "2020-01-01 - 2020-02-02"
+        range: "2020-01-01 - 2020-02-02",
       };
       const state = { foo };
       expect(selector(state)).toEqual({
-        updated_at: { gte: "2020-01-01", lt: "2020-02-02||+1d" }
+        updated_at: { gte: "2020-01-01", lt: "2020-02-02||+1d" },
       });
     });
 

package/src/selectors/makeDateFiltersSelector.js

@@ -1,53 +1,10 @@
-import {
-  cond,
-  constant,
-  has,
-  negate,
-  propEq,
-  propOr,
-  split,
-  stubTrue,
-} from "lodash/fp";
+import { propOr } from "lodash/fp";
 import { createSelector } from "reselect";
-
-const relativeDate = ({ unit, value }) => `now-${value}${unit}`;
-const toDateRange = ([from, to]) => ({ gte: from, lt: `${to}||+1d` });
-const sinceDate = ({ name, ...props }) => ({
-  [name]: { gte: relativeDate(props) },
-});
-const untilDate = ({ name, ...props }) => ({
-  [name]: { lt: relativeDate(props) },
-});
-const dateRange = ({ name, range }) => ({
-  [name]: toDateRange(split(" - ")(range)),
-});
-
-const grantDateRange = ({ name, range }) => {
-  const [start_date, end_date] = split(",")(name);
-  const [from, to] = split(" - ")(range);
-
-  return from && to
-    ? {
-        [start_date]: { gte: from },
-        [end_date]: { lt: to },
-      }
-    : constant(empty);
-};
-
+import { dateFilterFormatter } from "@truedat/core/services/dateFilterFormatter";
 const empty = {};
-
 export const makeDateFiltersSelector = (dateFilterProp) => {
-  const dateRangeFilter =
-    dateFilterProp === "grantDateFilter" ? grantDateRange : dateRange;
   return createSelector(
     propOr(empty, dateFilterProp),
-    cond([
-      [negate(propEq("active", true)), constant(empty)],
-      [negate(has("name")), constant(empty)],
-      [propEq("type", "since"), sinceDate],
-      [propEq("type", "before"), untilDate],
-      [propEq("type", "range"), dateRangeFilter],
-      [stubTrue, constant(empty)],
-    ])
+    dateFilterFormatter(dateFilterProp)
   );
 };

package/src/services/__tests__/dateFilterFormatter.spec.js

@@ -0,0 +1,93 @@
+import { dateFilterFormatter } from "../dateFilterFormatter";
+
+describe("dateFilterFormatter", () => {
+  const dff = dateFilterFormatter();
+  const grant_dff = dateFilterFormatter("grantDateFilter");
+
+  describe("returns a selector", () => {
+    it("returns a 'since relative date' filter", () => {
+      const foo = {
+        name: "updated_at",
+        type: "since",
+        unit: "d",
+        value: "3",
+      };
+
+      const filter = dff(foo);
+
+      expect(filter == { updated_at: { gte: "now-3d" } });
+    });
+
+    it("returns a 'until relative date' filter", () => {
+      const foo = {
+        name: "updated_at",
+        type: "until",
+        unit: "y",
+        value: "2",
+      };
+
+      const filter = dff(foo);
+
+      expect(filter == { updated_at: { lt: "now-2y" } });
+    });
+
+    it("returns a 'date range filter ' filter", () => {
+      const foo = {
+        name: "updated_at",
+        type: "range",
+        range: "2024-04-10 - 2024-05-05",
+      };
+
+      const filter = dff(foo);
+
+      expect(
+        filter == { updated_at: { gte: "2024-04-17", lt: "2024-05-05||+1d" } }
+      );
+    });
+
+    it("returns a 'date range filter for grants' filter", () => {
+      const foo = {
+        name: "start_date,end_date",
+        type: "range",
+        range: "2024-04-10 - 2024-05-05",
+      };
+
+      const filter = grant_dff(foo);
+
+      expect(
+        filter ==
+          {
+            updated_at: {
+              start_date: { gte: "2024-04-17" },
+              end_date: { lt: "2024-05-05" },
+            },
+          }
+      );
+    });
+
+    it("returns an empty object if active is not true", () => {
+      const foo = {
+        name: "updated_at",
+        type: "since",
+        unit: "d",
+        value: "3",
+      };
+
+      const filter = dff(foo);
+
+      expect(filter == {});
+    });
+
+    it("returns an empty object if name is not present", () => {
+      const foo = {
+        type: "since",
+        unit: "d",
+        value: "3",
+      };
+
+      const filter = dff(foo);
+
+      expect(filter == {});
+    });
+  });
+});

package/src/services/dateFilterFormatter.js

@@ -0,0 +1,48 @@
+import {
+  cond,
+  constant,
+  has,
+  negate,
+  propEq,
+  split,
+  stubTrue,
+} from "lodash/fp";
+
+const relativeDate = ({ unit, value }) => `now-${value}${unit}`;
+const toDateRange = ([from, to]) => ({ gte: from, lt: `${to}||+1d` });
+const sinceDate = ({ name, ...props }) => ({
+  [name]: { gte: relativeDate(props) },
+});
+const untilDate = ({ name, ...props }) => ({
+  [name]: { lt: relativeDate(props) },
+});
+const dateRange = ({ name, range }) => ({
+  [name]: toDateRange(split(" - ")(range)),
+});
+
+const grantDateRange = ({ name, range }) => {
+  const [start_date, end_date] = split(",")(name);
+  const [from, to] = split(" - ")(range);
+
+  return from && to
+    ? {
+        [start_date]: { gte: from },
+        [end_date]: { lt: to },
+      }
+    : constant(empty);
+};
+
+const empty = {};
+
+export const dateFilterFormatter = (dateRangeFilter) =>
+  cond([
+    [negate(propEq("active", true)), constant(empty)],
+    [negate(has("name")), constant(empty)],
+    [propEq("type", "since"), sinceDate],
+    [propEq("type", "before"), untilDate],
+    [
+      propEq("type", "range"),
+      dateRangeFilter === "grantDateFilter" ? grantDateRange : dateRange,
+    ],
+    [stubTrue, constant(empty)],
+  ]);