@truedat/core 8.4.2 → 8.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "8.4.2",
+  "version": "8.4.3",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "module": "src/index.js",
@@ -51,7 +51,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.4.2",
+    "@truedat/test": "8.4.3",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -97,5 +97,5 @@
     "swr": "^2.3.3",
     "turndown": "^7.2.2"
   },
-  "gitHead": "6ce335c57b6311c56828ce132b816322aa79d9ea"
+  "gitHead": "4c27fe8b467a2b0b26f69d4931d85d8bdf674e6d"
 }

package/src/components/DomainSearchFilter.js

@@ -0,0 +1,213 @@
+import _ from "lodash/fp";
+import { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { FormattedMessage } from "react-intl";
+import {
+  Label,
+  Icon,
+  Input,
+  Dropdown,
+  Dimmer,
+  Loader,
+} from "semantic-ui-react";
+import { lowerDeburr } from "../services/sort";
+import DomainSearchFilterItem from "./DomainSearchFilterItem";
+
+export const DomainSearchFilter = ({
+  name,
+  activeValues,
+  closeFilter,
+  filter,
+  loading,
+  openFilter,
+  options,
+  removeFilter,
+  toggleFilterValue,
+}) => {
+  const [selected, setSelected] = useState();
+  const [query, setQuery] = useState();
+  const [open, setOpen] = useState([]);
+  const [displayed, setDisplayed] = useState([]);
+
+  useEffect(() => {
+    const activeOptions = _.filter((option) =>
+      _.includes(option.id)(activeValues)
+    )(options);
+
+    _.flow(_.map("id"), _.uniq, setSelected)(activeOptions);
+    if (_.isEmpty(open) && _.isEmpty(displayed)) {
+      const withAncestors = _.flow(
+        _.reduce(
+          (acc, option) => [...acc, ..._.map("id")(option.ancestors)],
+          []
+        ),
+        _.uniq
+      )(activeOptions);
+      setOpen(withAncestors);
+      setDisplayed([..._.map("id")(activeOptions), ...withAncestors]);
+    }
+  }, [activeValues, options]);
+
+  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 descendentIds = _.map("id")(option.descendents);
+    const treeIds = [selection, ...descendentIds];
+    const value = _.includes(selection)(activeValues)
+      ? _.without(treeIds)(activeValues)
+      : _.union(treeIds)(activeValues);
+    toggleFilterValue({ filter, value });
+  };
+
+  const handleToggleChildren = (_e, selection) => {
+    const option = _.find({ id: selection })(options);
+    if (!option) return;
+    const descendentIds = _.map("id")(option.descendents);
+    if (_.isEmpty(descendentIds)) return;
+    const allSelected = _.every((id) => _.includes(id)(activeValues))(
+      descendentIds
+    );
+    const value = allSelected
+      ? _.without(descendentIds)(activeValues)
+      : _.union(descendentIds)(activeValues);
+    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 = (value, currentQuery) =>
+    _.contains(currentQuery)(lowerDeburr(value));
+  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 || "domainSearchFilter"}
+      className="domain-search-filter"
+      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) => (
+              <DomainSearchFilterItem
+                key={i}
+                onOpen={handleOpen}
+                onClick={handleClick}
+                open={_.contains(option.id)(open)}
+                canOpen={_.negate(_.isEmpty)(option.children)}
+                selected={_.contains(option.id)(selected)}
+                onToggleChildren={handleToggleChildren}
+                toggleChildrenOn={_.every((id) => _.includes(id)(activeValues))(
+                  _.map("id")(option.descendents)
+                )}
+                partialSelected={
+                  !_.contains(option.id)(selected) &&
+                  _.some((id) => _.includes(id)(selected))(
+                    _.map("id")(option.descendents)
+                  )
+                }
+                {...option}
+              />
+            ))(filteredOptions)}
+          </Dropdown.Menu>
+        </>
+        {loading && (
+          <Dimmer active inverted>
+            <Loader size="tiny" />
+          </Dimmer>
+        )}
+      </Dimmer.Dimmable>
+    </Dropdown>
+  );
+};
+
+DomainSearchFilter.propTypes = {
+  name: PropTypes.string,
+  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 DomainSearchFilter;

package/src/components/DomainSearchFilterItem.js

@@ -0,0 +1,129 @@
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { Icon, Dropdown } from "semantic-ui-react";
+
+const ToggleChildrenButton = ({ toggleChildrenOn, onClick }) => {
+  const { formatMessage } = useIntl();
+  const state = toggleChildrenOn ? "on" : "off";
+
+  const icon = formatMessage({
+    id: `domain.selector.toggleChildren.${state}.icon`,
+    defaultMessage: toggleChildrenOn ? "toggle on" : "toggle off",
+  }).replace("none", "");
+
+  const label = formatMessage({
+    id: `domain.selector.toggleChildren.${state}.label`,
+    defaultMessage: "none",
+  }).replace("none", "");
+
+  const hoverText = formatMessage({
+    id: `domain.selector.toggleChildren.${state}.hover`,
+    defaultMessage: "none",
+  }).replace("none", "");
+
+  if (!icon && !label) return null;
+
+  return (
+    <button type="button" className="toggle-children" onClick={onClick}>
+      <span title={hoverText} className="toggle-children-content">
+        {icon && <Icon name={icon} />}
+        {label && <span>{label}</span>}
+      </span>
+    </button>
+  );
+};
+
+ToggleChildrenButton.propTypes = {
+  toggleChildrenOn: PropTypes.bool,
+  onClick: PropTypes.func,
+};
+
+export const DomainSearchFilterItem = ({
+  id,
+  canOpen,
+  onOpen,
+  onClick,
+  onToggleChildren,
+  selected,
+  toggleChildrenOn = false,
+  partialSelected = false,
+  open,
+  name,
+  level,
+  disabled = false,
+  className,
+}) => {
+  const { formatMessage } = useIntl();
+
+  const handleOpen = (e) => {
+    e && e.preventDefault();
+    e && e.stopPropagation();
+    onOpen(id);
+  };
+
+  const handleClick = (e) => {
+    e && e.preventDefault();
+    e && e.stopPropagation();
+    onClick(e, id);
+  };
+
+  const handleToggleChildren = (e) => {
+    e && e.preventDefault();
+    e && e.stopPropagation();
+    onToggleChildren && onToggleChildren(e, id);
+  };
+
+  const itemStyle = {
+    marginLeft: `${20 * level}px`,
+    paddingLeft: !canOpen ? "25px" : "5px",
+  };
+
+  return (
+    <Dropdown.Item onClick={handleClick} className={className}>
+      <div className="item-content" style={itemStyle}>
+        {canOpen ? (
+          <Icon
+            name={open ? "chevron down" : "chevron right"}
+            onClick={handleOpen}
+          />
+        ) : null}
+        <Icon
+          name={
+            selected
+              ? "check square outline"
+              : partialSelected
+                ? "minus square outline"
+                : "square outline"
+          }
+        />
+        <span style={{ opacity: disabled ? 0.45 : 1 }} title={name}>
+          {name}
+        </span>
+        {canOpen && onToggleChildren ? (
+          <ToggleChildrenButton
+            toggleChildrenOn={toggleChildrenOn}
+            onClick={handleToggleChildren}
+          />
+        ) : null}
+      </div>
+    </Dropdown.Item>
+  );
+};
+
+DomainSearchFilterItem.propTypes = {
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  canOpen: PropTypes.bool,
+  className: PropTypes.string,
+  onOpen: PropTypes.func,
+  onClick: PropTypes.func,
+  onToggleChildren: PropTypes.func,
+  selected: PropTypes.bool,
+  toggleChildrenOn: PropTypes.bool,
+  partialSelected: PropTypes.bool,
+  open: PropTypes.bool,
+  name: PropTypes.string,
+  level: PropTypes.number,
+  disabled: PropTypes.bool,
+};
+
+export default DomainSearchFilterItem;

package/src/components/SelectedFilters.js

@@ -6,6 +6,7 @@ import FilterDropdown from "./FilterDropdown";
 import FilterMultilevelDropdown from "./FilterMultilevelDropdown";
 import HierarchyFilterDropdown from "./HierarchyFilterDropdown";
 import SearchFilterDropdown from "./SearchFilterDropdown";
+import DomainSearchFilter from "./DomainSearchFilter";
 import ModalSaveFilter from "./ModalSaveFilter";
 import UserFilters from "./UserFilters";
 
@@ -30,6 +31,7 @@ export const SelectedFilters = ({
   userFilterScope,
   searchFiltersPropsMapping,
   searchFilterDispacher,
+  useDomainSearchFilter,
 }) => {
   const { pathname } = useLocation();
   const taxonomyPathRegex = /^\/domains\/(\d+)\/\w+$/;
@@ -77,7 +79,11 @@ export const SelectedFilters = ({
 
               switch (filterType) {
                 case "domain":
-                  return <FilterMultilevelDropdown {...props} />;
+                  return useDomainSearchFilter ? (
+                    <DomainSearchFilter {...props} />
+                  ) : (
+                    <FilterMultilevelDropdown {...props} />
+                  );
                 case "hierarchy":
                   return <HierarchyFilterDropdown {...props} />;
                 case "search":
@@ -131,6 +137,7 @@ SelectedFilters.propTypes = {
   userFilterScope: PropTypes.string,
   searchFiltersPropsMapping: PropTypes.object,
   searchFilterDispacher: PropTypes.func,
+  useDomainSearchFilter: PropTypes.bool,
 };
 
 export default SelectedFilters;

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

@@ -0,0 +1,187 @@
+import { fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import { DomainSearchFilter } from "../DomainSearchFilter";
+
+jest.mock("../DomainSearchFilterItem", () => {
+  const MockDomainSearchFilterItem = ({
+    id,
+    name,
+    onOpen,
+    onClick,
+    onToggleChildren,
+  }) => (
+    <div>
+      <span>{name}</span>
+      <button type="button" onClick={() => onOpen(id)}>
+        {`open-${id}`}
+      </button>
+      <button type="button" onClick={(e) => onClick(e, id)}>
+        {`select-${id}`}
+      </button>
+      <button type="button" onClick={(e) => onToggleChildren(e, id)}>
+        {`toggle-${id}`}
+      </button>
+    </div>
+  );
+
+  return {
+    __esModule: true,
+    DomainSearchFilterItem: MockDomainSearchFilterItem,
+    default: MockDomainSearchFilterItem,
+  };
+});
+
+describe("<DomainSearchFilter />", () => {
+  const getProps = (overrides = {}) => ({
+    filter: "taxonomy",
+    activeValues: [],
+    closeFilter: jest.fn(),
+    openFilter: jest.fn(),
+    removeFilter: jest.fn(),
+    toggleFilterValue: jest.fn(),
+    loading: false,
+    options: [
+      {
+        id: 1,
+        name: "Domain 1",
+        level: 0,
+        ancestors: [],
+        children: [{ id: 2, name: "Domain 2", level: 1 }],
+        descendents: [{ id: 2, name: "Domain 2", level: 1 }],
+      },
+      {
+        id: 2,
+        name: "Domain 2",
+        level: 1,
+        ancestors: [{ id: 1, name: "Domain 1" }],
+        children: [],
+        descendents: [],
+      },
+    ],
+    ...overrides,
+  });
+
+  it("matches the latest snapshot", () => {
+    const rendered = render(<DomainSearchFilter {...getProps()} />);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("calls removeFilter when delete is clicked", async () => {
+    const props = getProps();
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(<DomainSearchFilter {...props} />);
+
+    await user.click(rendered.container.querySelector(".delete.icon"));
+
+    expect(props.removeFilter).toHaveBeenCalledWith({ filter: "taxonomy" });
+  });
+
+  it("calls toggleFilterValue adding selected option and descendents", async () => {
+    const props = getProps();
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(<DomainSearchFilter {...props} />);
+
+    await user.click(rendered.getByText(/select-1/i));
+
+    expect(props.toggleFilterValue).toHaveBeenCalledWith({
+      filter: "taxonomy",
+      value: [1, 2],
+    });
+  });
+
+  it("calls toggleFilterValue removing selected option and descendents", async () => {
+    const props = getProps({ activeValues: [1, 2] });
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(<DomainSearchFilter {...props} />);
+
+    await user.click(rendered.getByText(/select-1/i));
+
+    expect(props.toggleFilterValue).toHaveBeenCalledWith({
+      filter: "taxonomy",
+      value: [],
+    });
+  });
+
+  it("calls toggleFilterValue adding descendents from toggle children", async () => {
+    const props = getProps();
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(<DomainSearchFilter {...props} />);
+
+    await user.click(rendered.getByText(/toggle-1/i));
+
+    expect(props.toggleFilterValue).toHaveBeenCalledWith({
+      filter: "taxonomy",
+      value: [2],
+    });
+  });
+
+  it("calls toggleFilterValue removing descendents from toggle children", async () => {
+    const props = getProps({ activeValues: [2] });
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(<DomainSearchFilter {...props} />);
+
+    await user.click(rendered.getByText(/toggle-1/i));
+
+    expect(props.toggleFilterValue).toHaveBeenCalledWith({
+      filter: "taxonomy",
+      value: [],
+    });
+  });
+
+  it("shows child domains when searching by descendent name", async () => {
+    const props = getProps();
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(<DomainSearchFilter {...props} />);
+    const searchInput = rendered.container.querySelector(".search input");
+
+    expect(rendered.queryByText(/domain 2/i)).not.toBeInTheDocument();
+
+    await user.type(searchInput, "domain 2");
+
+    expect(rendered.getByText(/domain 2/i)).toBeInTheDocument();
+  });
+
+  it("does not expand all domains when search value is empty", () => {
+    const props = getProps();
+    const rendered = render(<DomainSearchFilter {...props} />);
+    const searchInput = rendered.container.querySelector(".search input");
+
+    fireEvent.change(searchInput, { target: { value: "" } });
+
+    expect(rendered.queryByText(/domain 2/i)).not.toBeInTheDocument();
+  });
+
+  it("stops propagation on space keydown in search input", async () => {
+    const props = getProps();
+    const user = userEvent.setup({ delay: null });
+    const onKeyDown = jest.fn();
+    const rendered = render(
+      <div onKeyDown={onKeyDown}>
+        <DomainSearchFilter {...props} />
+      </div>
+    );
+    const searchInput = rendered.container.querySelector(".search input");
+
+    await user.click(searchInput);
+    await user.keyboard(" ");
+
+    expect(onKeyDown).not.toHaveBeenCalled();
+  });
+
+  it("prevents default and stops propagation on search input click", async () => {
+    const props = getProps();
+    const user = userEvent.setup({ delay: null });
+    const onClick = jest.fn();
+    const rendered = render(
+      <div onClick={onClick}>
+        <DomainSearchFilter {...props} />
+      </div>
+    );
+    const searchInput = rendered.container.querySelector(".search input");
+
+    await user.click(searchInput);
+
+    expect(onClick).not.toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,106 @@
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import { DomainSearchFilterItem } from "../DomainSearchFilterItem";
+
+describe("<DomainSearchFilterItem />", () => {
+  const getProps = (overrides = {}) => ({
+    id: 1,
+    canOpen: true,
+    onOpen: jest.fn(),
+    onClick: jest.fn(),
+    onToggleChildren: jest.fn(),
+    selected: false,
+    toggleChildrenOn: false,
+    partialSelected: false,
+    open: false,
+    name: "Domain 1",
+    level: 0,
+    disabled: false,
+    ...overrides,
+  });
+
+  it("matches the latest snapshot", () => {
+    const rendered = render(<DomainSearchFilterItem {...getProps()} />);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("matches snapshot when selected is true", () => {
+    const rendered = render(
+      <DomainSearchFilterItem {...getProps()} selected={true} />
+    );
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("matches snapshot when partial selected is true", () => {
+    const rendered = render(
+      <DomainSearchFilterItem
+        {...getProps()}
+        selected={false}
+        partialSelected={true}
+      />
+    );
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("calls onOpen when chevron icon is clicked", async () => {
+    const props = getProps({ canOpen: true, open: false });
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(<DomainSearchFilterItem {...props} />);
+
+    await user.click(rendered.container.querySelector(".chevron.right.icon"));
+
+    expect(props.onOpen).toHaveBeenCalledWith(1);
+  });
+
+  it("calls onClick with event and id when item is clicked", async () => {
+    const props = getProps();
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(<DomainSearchFilterItem {...props} />);
+
+    await user.click(rendered.getByText(/domain 1/i));
+
+    expect(props.onClick).toHaveBeenCalledTimes(1);
+    expect(props.onClick.mock.calls[0][1]).toBe(1);
+  });
+
+  it("calls onToggleChildren when toggle icon is clicked", async () => {
+    const props = getProps({ canOpen: true, toggleChildrenOn: false });
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(<DomainSearchFilterItem {...props} />);
+
+    await user.click(rendered.container.querySelector(".toggle-children"));
+
+    expect(props.onToggleChildren).toHaveBeenCalledTimes(1);
+    expect(props.onToggleChildren.mock.calls[0][1]).toBe(1);
+  });
+
+  it("does not render chevron and toggle icons when canOpen is false", () => {
+    const rendered = render(
+      <DomainSearchFilterItem {...getProps({ canOpen: false })} />
+    );
+
+    expect(
+      rendered.container.querySelector(".chevron.right.icon")
+    ).not.toBeInTheDocument();
+    expect(
+      rendered.container.querySelector(".toggle-children")
+    ).not.toBeInTheDocument();
+  });
+
+  it("does not render the toggle button when icon and label i18n are none", () => {
+    const messages = {
+      en: {
+        "domain.selector.toggleChildren.off.icon": "none",
+        "domain.selector.toggleChildren.off.label": "none",
+      },
+    };
+    const rendered = render(
+      <DomainSearchFilterItem {...getProps({ canOpen: true })} />,
+      { messages }
+    );
+
+    expect(
+      rendered.container.querySelector(".toggle-children")
+    ).not.toBeInTheDocument();
+  });
+});