@truedat/core 6.1.0 → 6.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "6.1.0",
+  "version": "6.1.2",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -35,7 +35,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "6.0.5",
+    "@truedat/test": "6.1.2",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -117,5 +117,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "0e2dd260284f95d075f53ec5df1111606b5ecd0d"
+  "gitHead": "34f3dad97550142a4a23048fee3214ce04e957bf"
 }

package/src/components/Pagination.js

@@ -28,7 +28,7 @@ Pagination.propTypes = {
   activePage: PropTypes.number,
   selectPage: PropTypes.func,
   size: PropTypes.string,
-  totalPages: PropTypes.number
+  totalPages: PropTypes.number,
 };
 
 export default Pagination;

package/src/search/FilterDropdown.js

@@ -0,0 +1,76 @@
+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/search/FilterItem.js

@@ -0,0 +1,49 @@
+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/search/FilterMultilevelDropdown.js

@@ -0,0 +1,202 @@
+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 {
+    name,
+    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
+      name={name || "filterMultilevelDropdown"}
+      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/search/HierarchyFilterDropdown.js

@@ -0,0 +1,95 @@
+import _ from "lodash/fp";
+import React from "react";
+import { useHierarchy } from "@truedat/df/hooks/useHierarchies";
+import {
+  getHierarchyOptions,
+  getKeyAndParents,
+} from "@truedat/core/services/getHierarchyOptions";
+import FilterMultilevelDropdown from "./FilterMultilevelDropdown";
+import SearchContext, { useSearchContext } from "./SearchContext";
+
+const PopulatedHierarchyFilterDropdown = () => {
+  const context = useSearchContext();
+
+  const { filter, options, toggleFilterValue, activeFilterSelectedValues } =
+    context;
+  const hierarchyId = _.flow(
+    _.reject((item) => _.values(item).includes(undefined)),
+    _.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)
+  )(activeFilterSelectedValues);
+
+  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 (
+    <SearchContext.Provider
+      value={{
+        ...context,
+        name: "hierarchyFilterDropdown",
+        filter,
+        options: filteredOptions,
+        activeFilterSelectedValues: idActiveValues,
+        toggleFilterValue: handleToggleFilterValue,
+      }}
+      key={filter}
+    >
+      <FilterMultilevelDropdown />
+    </SearchContext.Provider>
+  );
+};
+
+const HierarchyFilterDropdown = () => {
+  const { options } = useSearchContext();
+
+  return _.isEmpty(options) ? (
+    <FilterMultilevelDropdown />
+  ) : (
+    <PopulatedHierarchyFilterDropdown />
+  );
+};
+
+export default HierarchyFilterDropdown;

package/src/search/SearchContext.js

@@ -0,0 +1,234 @@
+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";
+
+const SearchContext = createContext();
+
+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 { formatMessage } = useIntl();
+
+  const [loading, setLoading] = useState(true);
+  const [searchData, setSearchData] = 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 [sortColumn, setSortColumn] = useState(initialSortColumn);
+  const [sortDirection, setSortDirection] = useState(initialSortDirection);
+  const [page, setPage] = useState(1);
+  const [size, setSize] = useState(pageSize);
+  const [count, setCount] = useState(0);
+
+  //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 });
+  };
+
+  const toggleHiddenFilterValue = ({ filter, value }) => {
+    const values = _.propOr([], filter)(hiddenFilters);
+    const newValue = _.isArray(value)
+      ? value
+      : _.includes(value)(values)
+      ? _.without([value])(values)
+      : _.union([value])(values);
+
+    console.log("toggleHiddenFilterValue", values, newValue);
+    setHiddenFilters({ ...hiddenFilters, [filter]: newValue });
+  };
+
+  //CALCULATIONS ON STATE
+
+  const selectPage = (props) => {
+    setPage(props.activePage);
+  };
+
+  const setCountData = (headers) => {
+    setCount(parseInt(_.propOr("0", "x-total-count")(headers)));
+  };
+  const selectedFilters = _.keys(allActiveFilters);
+
+  const filters = _.flow(
+    _.propOr({}, "data"),
+    _.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 }) => ({
+      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(
+    () => ({
+      ...defaultFilters,
+      ..._.pickBy(_.negate(_.isEmpty))(allActiveFilters),
+    }),
+    [allActiveFilters, defaultFilters]
+  );
+
+  const filterMust = useMemo(
+    () => ({
+      ...defaultFilters,
+      ..._.flow(
+        _.pickBy(_.negate(_.isEmpty)),
+        _.omit(activeFilterName)
+      )(allActiveFilters),
+    }),
+
+    [allActiveFilters, activeFilterName, defaultFilters]
+  );
+
+  const sort = useMemo(
+    () =>
+      sortColumn
+        ? {
+            [sortColumn]: sortDirection === "ascending" ? "asc" : "desc",
+          }
+        : null,
+    [sortColumn, sortDirection]
+  );
+  const { trigger: triggerFilters } = useFilters();
+  useEffect(() => {
+    setLoadingFilters(true);
+
+    const filterParam = {
+      ...(!_.isEmpty(query) && { query }),
+      must: filterMust,
+    };
+    triggerFilters(filterParam).then(({ data }) => {
+      setFiltersPayload(data);
+      setLoadingFilters(false);
+    });
+  }, [query, filterMust, triggerFilters]);
+
+  const { trigger: triggerSearch } = useSearch();
+  useEffect(() => {
+    setLoading(true);
+
+    const filterParam = {
+      ...(!_.isEmpty(query) && { query }),
+      must: searchMust,
+      sort,
+      page: page - 1,
+      size,
+    };
+    triggerSearch(filterParam).then(({ data, headers }) => {
+      setSearchData(data);
+      setCountData(headers);
+      setLoading(false);
+    });
+  }, [query, searchMust, sort, triggerSearch, defaultFilters, page]);
+
+  const context = {
+    disabled: false,
+    loadingFilters,
+
+    availableFilters,
+    selectedFilters,
+    filterTypes,
+
+    activeFilterName,
+    activeFilterSelectedValues,
+    activeFilterValues,
+    defaultFilters,
+    hiddenFilters,
+    query,
+    filterMust,
+
+    addFilter,
+    resetFilters,
+    openFilter,
+    closeFilter,
+    removeFilter,
+    toggleFilterValue,
+    toggleHiddenFilterValue,
+    searchMust,
+    setQuery,
+
+    searchData,
+    loading,
+
+    sortColumn,
+    sortDirection,
+    setSortColumn,
+    setSortDirection,
+    selectPage,
+    setSize,
+    count,
+    page,
+    size,
+  };
+
+  return (
+    <SearchContext.Provider value={context}>{children}</SearchContext.Provider>
+  );
+};
+
+export const useSearchContext = () => useContext(SearchContext);
+export default SearchContext;

package/src/search/SearchFilters.js

@@ -0,0 +1,60 @@
+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 SearchFilters() {
+  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/search/SearchSelectedFilters.js

@@ -0,0 +1,55 @@
+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 SearchSelectedFilters() {
+  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/search/SearchWidget.js

@@ -0,0 +1,30 @@
+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";
+
+export default function SearchWidget() {
+  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={<SearchFilters />}
+        placeholder={formatMessage({
+          id: "search.placeholder",
+        })}
+        loading={loading}
+      />
+      <SearchSelectedFilters />
+    </>
+  );
+}

package/src/truedatConfig.js

@@ -0,0 +1,15 @@
+/*
+ * Global configuration object written by td-web and read by td-web-modules.
+ * Using this instead of a global variable. This is written just once, so
+ * no need for propagation of change with Redux Store.
+ */
+
+// eslint-disable-next-line fp/no-let
+let config = {};
+
+function setConfig(newConfig) {
+  // eslint-disable-next-line fp/no-mutation
+  config = newConfig;
+}
+
+export { config, setConfig };