@truedat/core 5.16.4 → 5.17.1

package/package.json

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

package/src/components/AvailableFilters.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React from "react";
+import React, { Fragment } from "react";
 import PropTypes from "prop-types";
 import { Dropdown } from "semantic-ui-react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -7,14 +7,41 @@ import { i18nOrder } from "../services/sort";
 
 const removePrefix = _.replace(/^.*\./, "");
 
+const makeFiltersGroup = (filters, groups) =>
+  _.groupBy((filter) =>
+    _.flow(
+      _.find(([_group, fields]) => _.contains(filter)(fields)),
+      _.prop("[0]")
+    )(groups)
+  )(filters);
+
 export const AvailableFilters = ({
   addFilter,
   disabled,
   filters,
   loading,
   resetFilters,
+  filtersGroup = [],
 }) => {
   const { formatMessage } = useIntl();
+  const filtersByGroup = makeFiltersGroup(filters, filtersGroup);
+
+  const groupWithoutFilters = (groups) =>
+    _.flow(
+      _.prop("[0]"),
+      (groupName) => _.prop(groupName)(filtersByGroup),
+      _.isEmpty
+    )(groups);
+
+  const groups = _.flow(
+    (groups) => _.concat(groups, [[undefined, []]]),
+    _.reject(groupWithoutFilters),
+    _.map(([groupName, _filters]) => [
+      groupName,
+      _.prop(groupName)(filtersByGroup),
+    ])
+  )(filtersGroup);
+
   return (
     <Dropdown
       button
@@ -37,20 +64,36 @@ export const AvailableFilters = ({
             />
           </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 })}
-            />
-          ))
-        )(filters)}
+        {_.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>
+        ))(groups)}
       </Dropdown.Menu>
     </Dropdown>
   );
@@ -62,6 +105,7 @@ AvailableFilters.propTypes = {
   filters: PropTypes.array,
   resetFilters: PropTypes.func,
   loading: PropTypes.bool,
+  filtersGroup: PropTypes.array,
 };
 
 export default AvailableFilters;

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

@@ -1,45 +1,59 @@
 import _ from "lodash/fp";
 import React from "react";
-import { shallow } from "enzyme";
-import { Dropdown } from "semantic-ui-react";
-import { intl } from "@truedat/test/intl-stub";
+import { render } from "@truedat/test/render";
+import userEvent from "@testing-library/user-event";
+import { waitFor } from "@testing-library/react";
 import { AvailableFilters } from "../AvailableFilters";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
 describe("<AvailableFilters/>", () => {
+  const resetFilters = jest.fn();
+  const addFilter = jest.fn();
+
   const getProps = () => ({
-    addFilter: jest.fn(),
-    resetFilters: jest.fn(),
-    filters: ["foo"],
+    addFilter,
+    resetFilters,
+    filters: ["foo", "bar", "xyz"],
   });
 
   it("matches the latest snapshot", () => {
     const props = getProps();
-    const wrapper = shallow(<AvailableFilters {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<AvailableFilters {...props} />);
+    expect(container).toMatchSnapshot();
   });
 
-  it("dispatches resetFilters when first item is clicked", () => {
+  it("dispatches resetFilters when first item is clicked", async () => {
     const props = getProps();
-    const wrapper = shallow(<AvailableFilters {...props} />);
+    const { queryByText } = render(<AvailableFilters {...props} />);
 
-    expect(props.resetFilters.mock.calls.length).toBe(0);
-    const items = wrapper.find(Dropdown.Item);
-    expect(items.length).toBe(1 + _.size(props.filters));
-    items.first().simulate("click");
-    expect(props.resetFilters.mock.calls.length).toBe(1);
+    expect(queryByText(/reset all filters/i)).toBeInTheDocument();
+    expect(resetFilters.mock.calls.length).toBe(0);
+    userEvent.click(await queryByText(/reset all filters/i));
+    await waitFor(() => expect(resetFilters.mock.calls.length).toBe(1));
   });
 
-  it("dispatches addFilter when last item is clicked", () => {
+  it("dispatches addFilter when last item is clicked", async () => {
     const props = getProps();
-    const wrapper = shallow(<AvailableFilters {...props} />);
+    const { queryByText } = render(<AvailableFilters {...props} />);
 
     expect(props.addFilter.mock.calls.length).toBe(0);
-    const items = wrapper.find(Dropdown.Item);
-    items.last().simulate("click");
+    userEvent.click(await queryByText(/foo/i));
     expect(props.addFilter.mock.calls.length).toBe(1);
   });
+
+  it("group by filters", async () => {
+    const filtersGroup = [
+      ["important", ["xyz"]],
+      ["grupNan", ["inexist_filter"]],
+    ];
+
+    const props = {
+      addFilter,
+      resetFilters,
+      filters: ["foo", "bar", "xyz"],
+      filtersGroup,
+    };
+    const { queryByText } = render(<AvailableFilters {...props} />);
+    expect(queryByText(/important/i)).toBeInTheDocument();
+    expect(queryByText(/grupNan/i)).not.toBeInTheDocument();
+  });
 });

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

@@ -1,45 +1,67 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<AvailableFilters/> matches the latest snapshot 1`] = `
-<Dropdown
-  additionLabel="Add "
-  additionPosition="top"
-  button={true}
-  className="icon"
-  closeOnBlur={true}
-  closeOnEscape={true}
-  deburr={false}
-  floating={true}
-  icon="filter"
-  labeled={true}
-  minCharacters={1}
-  noResultsMessage="No results found."
-  openOnFocus={true}
-  renderLabel={[Function]}
-  scrolling={true}
-  searchInput="text"
-  selectOnBlur={true}
-  selectOnNavigation={true}
-  text="filters"
-  upward={false}
-  wrapSelection={true}
->
-  <DropdownMenu>
-    <DropdownItem
-      onClick={[MockFunction]}
+<div>
+  <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"
     >
-      <em>
-        <MemoizedFormattedMessage
-          defaultMessage="(reset filters)"
-          id="filters.reset"
-        />
-      </em>
-    </DropdownItem>
-    <DropdownItem
-      key="foo"
-      onClick={[Function]}
-      text="foo"
+      Filters
+    </div>
+    <i
+      aria-hidden="true"
+      class="filter icon"
     />
-  </DropdownMenu>
-</Dropdown>
+    <div
+      class="menu transition"
+    >
+      <div
+        class="item"
+        role="option"
+      >
+        <em>
+          (reset all filters)
+        </em>
+      </div>
+      <div
+        class="item"
+        role="option"
+      >
+        <span
+          class="text"
+        >
+          bar
+        </span>
+      </div>
+      <div
+        class="item"
+        role="option"
+      >
+        <span
+          class="text"
+        >
+          foo
+        </span>
+      </div>
+      <div
+        class="item"
+        role="option"
+      >
+        <span
+          class="text"
+        >
+          xyz
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
 `;