@truedat/core 7.0.5 → 7.0.7

package/src/components/TreeSelector.js

@@ -12,11 +12,6 @@ export const match =
     _.contains(query)(lowerDeburr(name));
 export const matchAny = recursiveMatch(match);
 
-const maybeMapKeys = _.map((option) => ({
-  ...option,
-  id: _.has("key")(option) ? option.key : option.id,
-}));
-
 export const SelectedLabels = ({
   disabled,
   onClick,
@@ -64,50 +59,83 @@ const labelValues = _.cond([
 ]);
 
 export const TreeSelector = ({
+  allNodesOpen,
   check = false,
+  className = "",
   disabled = false,
   error,
   label,
   labels = false,
   multiple = false,
   name,
+  notDropdown,
   onBlur,
   onChange,
   options,
   minDepth = 0,
+  ascendants,
   placeholder,
   required = false,
-  value: initialValue,
+  value,
 }) => {
-  const [value, setValue] = useState(
-    _.defaultTo(multiple ? [] : null)(initialValue)
-  );
   const [query, setQuery] = useState();
-  const [open, setOpen] = useState([]);
+  const [open, setOpen] = useState(null);
   const [displayed, setDisplayed] = useState([]);
+  const [currentAllNodesOpen, setCurrentAllNodesOpen] = useState(false);
 
-  useEffect(() => {
-    if (initialValue !== value)
-      setValue(_.defaultTo(multiple ? [] : null)(initialValue));
-  }, [initialValue]);
+  const selected = (optionId) =>
+    multiple ? _.contains(optionId)(value) : value === optionId;
 
   useEffect(() => {
+    if (!_.isEqual(currentAllNodesOpen, allNodesOpen)) {
+      if (allNodesOpen) {
+        const allNodeIds = _.map("id", options);
+        setOpen(allNodeIds);
+        setDisplayed(allNodeIds);
+        setCurrentAllNodesOpen(allNodesOpen);
+      } else {
+        setOpen([]);
+        setDisplayed([]);
+        setCurrentAllNodesOpen(allNodesOpen);
+      }
+      return;
+    }
+
     const ids = childIds(open)(options);
-    setDisplayed((displayed) => _.union(displayed)(ids));
-  }, [options, open, value]);
+    const missingAscendants = _.difference(ascendants, open);
+    setDisplayed(_.union(displayed)(ids));
+
+    if (missingAscendants.length > 0) {
+      setOpen(_.union(open, ascendants));
+      missingAscendants.forEach((ancestorId) => handleOpen(ancestorId));
+    }
+    if (notDropdown && value && open && !open.find((v) => v === value)) {
+      handleOpen(value);
+    }
+  }, [options, open, ascendants, allNodesOpen]);
+
+  useEffect(() => {
+    if (notDropdown && value && open && !open.find((v) => v === value)) {
+      handleOpen(value);
+    }
+  }, [value]);
 
   const handleOpen = (id) => {
-    const option = _.find({ id })(maybeMapKeys(options));
-    const isOpen = _.contains(id)(open);
-    const childIds = _.map("id")(option.children);
-    const descendentIds = descendents(option);
-
-    if (isOpen) {
-      setOpen(_.without([id, ...descendentIds])(open));
-      setDisplayed(_.without(descendentIds)(displayed));
-    } else {
-      setOpen(_.union([id])(open));
-      setDisplayed(_.union(childIds)(displayed));
+    const option = _.find({ id })(options);
+    if (option) {
+      const isOpen = _.contains(id)(open);
+      const childIds = _.map("id")(option.children);
+      const descendentIds = descendents(option);
+
+      if (isOpen) {
+        const subTree = [id, ...descendentIds];
+        const collapsible = !_.some(selected)(subTree);
+        collapsible && setOpen(_.without(subTree)(open));
+        collapsible && setDisplayed(_.without(descendentIds)(displayed));
+      } else {
+        setOpen(_.union([id])(open));
+        setDisplayed(_.union(childIds)(displayed));
+      }
     }
   };
 
@@ -120,14 +148,16 @@ export const TreeSelector = ({
   const handleSearch = (e, { value }) => {
     e.preventDefault();
     setQuery(lowerDeburr(value));
-    if (!_.isEmpty(value)) {
+    if (_.isEmpty(value)) {
+      setOpen([]);
+      setDisplayed([]);
+    } else {
       displayAll();
     }
   };
 
   const handleClick = (e, id) => {
     const nextValue = multiple ? toggle(id)(value) : value === id ? null : id;
-    setValue(nextValue);
     onChange && onChange(e, { value: nextValue });
   };
 
@@ -141,7 +171,7 @@ export const TreeSelector = ({
     <SelectedLabels
       disabled={disabled}
       placeholder={placeholder}
-      options={maybeMapKeys(options)}
+      options={options}
       onClick={handleClick}
       value={labelValues(value)}
     />
@@ -154,7 +184,6 @@ export const TreeSelector = ({
   const items = _.flow(
     filterSearch,
     filterDisplayed,
-    maybeMapKeys,
     _.map((option) => (
       <DropdownMenuItem
         key={option?.id}
@@ -165,32 +194,21 @@ export const TreeSelector = ({
         canOpen={!_.isEmpty(option.children)}
         level={option.level}
         disabled={!isEnabled(option, minDepth)}
-        selected={multiple ? _.contains(option.id)(value) : value === option.id}
+        selected={selected(option.id)}
+        className={ascendants?.includes(String(option?.id)) ? "ascendant" : ""}
         {...option}
       />
     ))
   )(options);
 
-  return (
-    <Form.Dropdown
-      className="fix-dropdown-selector"
-      error={error}
-      floating
-      label={label}
-      multiple={multiple}
-      name={name}
-      onBlur={onBlur}
-      required={required}
-      trigger={trigger}
-      upward={false}
-      value={value}
-      disabled={disabled}
-    >
-      <Dropdown.Menu>
+  const renderTreeSelector = () => {
+    const content = (
+      <Dropdown.Menu className={notDropdown ? className : ""}>
         <Input
+          fluid
           icon="search"
           iconPosition="left"
-          className="search"
+          className={`search ${notDropdown ? "notDropdownInput" : ""}`}
           onKeyDown={(e) => {
             if (e.key === " ") {
               e.stopPropagation();
@@ -202,20 +220,52 @@ export const TreeSelector = ({
             e.stopPropagation();
           }}
         />
-        <Dropdown.Menu scrolling>{items}</Dropdown.Menu>
+        <Dropdown.Menu
+          scrolling
+          className={notDropdown ? "notDropdownSelector" : ""}
+        >
+          {items}
+        </Dropdown.Menu>
       </Dropdown.Menu>
-    </Form.Dropdown>
-  );
+    );
+
+    return !notDropdown ? (
+      <Form.Dropdown
+        className={`fix-dropdown-selector ${!notDropdown ? className : ""}`}
+        error={error}
+        floating
+        label={label}
+        multiple={multiple}
+        name={name}
+        onBlur={onBlur}
+        required={required}
+        trigger={trigger}
+        upward={false}
+        value={value}
+        disabled={disabled}
+      >
+        {content}
+      </Form.Dropdown>
+    ) : (
+      <>{content}</>
+    );
+  };
+
+  return renderTreeSelector();
 };
 
 TreeSelector.propTypes = {
+  allNodeIds: PropTypes.bool,
+  ascendants: PropTypes.array,
   check: PropTypes.bool,
+  className: PropTypes.string,
   disabled: PropTypes.bool,
   error: PropTypes.bool,
   label: PropTypes.string,
   labels: PropTypes.bool,
   multiple: PropTypes.bool,
   name: PropTypes.string,
+  notDropdown: PropTypes.bool,
   onBlur: PropTypes.func,
   onChange: PropTypes.func,
   options: PropTypes.array,

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

@@ -4,7 +4,7 @@ import { AddResourceMember } from "../AddResourceMember";
 
 const props = {
   type: "domain",
-  id: 1,
+  id: "1",
   onSuccess: jest.fn(),
 };
 

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

@@ -12,7 +12,24 @@ const renderOpts = { mocks: [domainsMock(variables)] };
 
 describe("<DomainSelector />", () => {
   it("matches latest snapshot", async () => {
-    const props = { action, onChange: jest.fn() };
+    const props = { action, onChange: jest.fn(), className: "test className" };
+    const { container, queryByText } = render(
+      <DomainSelector {...props} />,
+      renderOpts
+    );
+    await waitFor(() => {
+      expect(queryByText(/fooDomain/)).toBeInTheDocument();
+    });
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches latest snapshot with notDropdow parameter", async () => {
+    const props = {
+      action,
+      onChange: jest.fn(),
+      className: "test className",
+      notDropdown: true,
+    };
     const { container, queryByText } = render(
       <DomainSelector {...props} />,
       renderOpts

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

@@ -33,14 +33,18 @@ describe("<DropdownMenuItem />", () => {
       messages: {},
     });
 
-    userEvent.click(container.querySelector('[class="plus icon"]'));
+    userEvent.click(
+      container.querySelector('[class="chevron circle down icon"]')
+    );
     await waitFor(() => {
       expect(onOpen).toHaveBeenCalledWith(id);
     });
     rerender(<DropdownMenuItem {...{ ...props, open: true }} />);
 
     await waitFor(() => {
-      expect(container.querySelector('[class="minus icon"]')).toBeTruthy();
+      expect(
+        container.querySelector('[class="chevron circle right icon"]')
+      ).toBeTruthy();
     });
   });
 

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

@@ -66,15 +66,21 @@ describe("<FilterMultilevelDropdown />", () => {
 
     userEvent.click(getByRole("listbox"));
 
-    userEvent.click(container.querySelector('[class="plus icon"]'));
+    userEvent.click(
+      container.querySelector('[class="chevron circle down icon"]')
+    );
     await waitFor(() => {
       expect(getByRole("option", { name: /Domain 2/i })).toBeTruthy();
     });
-    userEvent.click(container.querySelector('[class="minus icon"]'));
+    userEvent.click(
+      container.querySelector('[class="chevron circle right icon"]')
+    );
     await waitFor(() => {
       expect(queryByText(/Domain 2/)).toBeFalsy();
     });
-    userEvent.click(container.querySelector('[class="plus icon"]'));
+    userEvent.click(
+      container.querySelector('[class="chevron circle down icon"]')
+    );
     // Select value
     userEvent.click(getByRole("option", { name: /Domain 2/i }));
     await waitFor(() => {
@@ -120,7 +126,9 @@ describe("<FilterMultilevelDropdown />", () => {
       expect(getByRole("option", { name: /Domain 3/i })).toBeTruthy();
     });
 
-    userEvent.click(container.querySelector('[class="plus icon"]'));
+    userEvent.click(
+      container.querySelector('[class="chevron circle down icon"]')
+    );
 
     await waitFor(() => {
       expect(getByRole("option", { name: /Domain 1/i })).toBeTruthy();

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

@@ -0,0 +1,42 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import Hierarchy from "../Hierarchy";
+import en from "../../../../df/src/messages/en";
+
+const hierarchy = {
+  id: 1,
+  name: "Baggins",
+  description: "bar",
+  nodes: [
+    {
+      id: 11,
+      name: "Fosco",
+      parentId: null,
+    },
+    {
+      id: 12,
+      name: "Fosco children",
+      parentId: 11,
+    },
+  ],
+};
+const props = { hierarchy: hierarchy, isEditionMode: false };
+
+const renderOpts = {
+  messages: { en: en },
+};
+
+describe("<Hierarchy />", () => {
+  it("matches the last snapshot with edition mode false", () => {
+    const { container } = render(<Hierarchy {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches snapshot with edition mode", () => {
+    const { container } = render(
+      <Hierarchy {...{ ...props, isEditionMode: true }} />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -98,15 +98,21 @@ describe("<HierarchyFilterDropdown />", () => {
 
     userEvent.click(getByRole("listbox"));
 
-    userEvent.click(container.querySelector('[class="plus icon"]'));
+    userEvent.click(
+      container.querySelector('[class="chevron circle down icon"]')
+    );
     await waitFor(() => {
       expect(getByRole("option", { name: /bar/i })).toBeTruthy();
     });
-    userEvent.click(container.querySelector('[class="minus icon"]'));
+    userEvent.click(
+      container.querySelector('[class="chevron circle right icon"]')
+    );
     await waitFor(() => {
       expect(queryByText(/bar/)).toBeFalsy();
     });
-    userEvent.click(container.querySelector('[class="plus icon"]'));
+    userEvent.click(
+      container.querySelector('[class="chevron circle down icon"]')
+    );
     // Select value
     userEvent.click(getByRole("option", { name: /bar/i }));
     await waitFor(() => {

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

@@ -0,0 +1,203 @@
+import _ from "lodash/fp";
+import React from "react";
+import { render } from "@truedat/test/render";
+import HierarchyNodeFinder from "../HierarchyNodeFinder";
+
+jest.mock("@apollo/client", () => ({
+  ...jest.requireActual("@apollo/client"),
+  useQuery: jest.fn(),
+}));
+
+const nodes = [
+  {
+    description: "No tiene padre",
+    domain_group: null,
+    external_id: "1",
+    id: 1,
+    name: "element_1",
+    parent_id: null,
+    parents: null,
+    type: null,
+  },
+  {
+    description: "No tiene padre",
+    domain_group: null,
+    external_id: "2",
+    id: 2,
+    name: "element_2",
+    parent_id: null,
+    parents: null,
+    type: null,
+  },
+  {
+    description: "el padre es element_2",
+    domain_group: null,
+    external_id: "3",
+    id: 3,
+    name: "element_3",
+    parent_id: 2,
+    parents: null,
+    type: null,
+  },
+  {
+    description: "el padre es element_2",
+    domain_group: null,
+    external_id: "4",
+    id: 4,
+    name: "element_4",
+    parent_id: 2,
+    parents: null,
+    type: null,
+  },
+  {
+    description: "No tiene padre",
+    domain_group: null,
+    external_id: "5",
+    id: 5,
+    name: "element_5",
+    parent_id: null,
+    parents: null,
+    type: null,
+  },
+  {
+    description: "el padre es element_5",
+    domain_group: null,
+    external_id: "6",
+    id: 6,
+    name: "element_6",
+    parent_id: 5,
+    parents: null,
+    type: null,
+  },
+  {
+    description: "el padre es element_6",
+    domain_group: null,
+    external_id: "7",
+    id: 7,
+    name: "element_7",
+    parent_id: 6,
+    parents: null,
+    type: null,
+  },
+];
+const idSelectedNode = 7;
+
+const props = {
+  nodes,
+  idSelectedNode,
+};
+
+const renderOpts = {
+  messages: {
+    en: {
+      "domains.notExist": "notExistDomains",
+      "domain.selector.placeholder": "Select a domain...",
+      "actions.open.all": "Open all",
+    },
+  },
+};
+
+describe("HierarchyNodeFinder", () => {
+  it("matches the latest snapshot", () => {
+    require("@apollo/client").useQuery.mockReturnValue({
+      loading: false,
+      error: null,
+      data: {
+        domains: [
+          {
+            __typename: "Domain",
+            id: "1",
+            external_id: "element_1",
+            name: "element_1",
+            parentId: null,
+            actions: [],
+          },
+          {
+            __typename: "Domain",
+            id: "2",
+            name: "element_2",
+            external_id: "element_2",
+            parentId: null,
+            actions: [],
+          },
+          {
+            __typename: "Domain",
+            id: "3",
+            external_id: "element_3",
+            name: "element_3",
+            parentId: "2",
+            actions: [],
+          },
+          {
+            __typename: "Domain",
+            id: "4",
+            external_id: "element_4",
+            name: "element_4",
+            parentId: "2",
+            actions: [],
+          },
+          {
+            __typename: "Domain",
+            id: "5",
+            external_id: "element_5",
+            name: "element_5",
+            parentId: null,
+            actions: [],
+          },
+          {
+            __typename: "Domain",
+            id: "6",
+            external_id: "element_6",
+            name: "element_6",
+            parentId: "5",
+            actions: [],
+          },
+          {
+            __typename: "Domain",
+            id: "7",
+            external_id: "element_7",
+            name: "element_7",
+            parentId: "6",
+            actions: [],
+          },
+        ],
+      },
+    });
+    const { container } = render(
+      <HierarchyNodeFinder {...props} />,
+      renderOpts
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("should return 'no nodes' messages if node list empty", async () => {
+    const customProps = { ...props, nodes: [] };
+    const { findByText } = render(
+      <HierarchyNodeFinder {...customProps} />,
+      renderOpts
+    );
+
+    expect(await findByText("notExistDomains")).toBeInTheDocument();
+  });
+
+  it("should return 'no nodes' messages if node list undefined", async () => {
+    const customProps = { ...props, nodes: undefined };
+    const { findByText } = render(
+      <HierarchyNodeFinder {...customProps} />,
+      renderOpts
+    );
+
+    expect(await findByText("notExistDomains")).toBeInTheDocument();
+  });
+
+  it("should return 'no nodes' messages if node list null", async () => {
+    const customProps = { ...props, nodes: null };
+    const { findByText } = render(
+      <HierarchyNodeFinder {...customProps} />,
+      renderOpts
+    );
+
+    expect(await findByText("notExistDomains")).toBeInTheDocument();
+  });
+});

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

@@ -11,7 +11,6 @@ jest.spyOn(React, "useContext").mockImplementation(() => intl);
 jest.mock("@truedat/core/hooks/useAclEntries");
 jest.mock("react-router-dom", () => ({
   ...jest.requireActual("react-router-dom"),
-  useParams: () => ({ id: 1 }),
 }));
 
 jest.mock("@truedat/core/hooks/useAclEntries", () => ({
@@ -74,7 +73,7 @@ describe("<ResourceMembers />", () => {
     ],
   };
 
-  const props = { type: "domain" };
+  const props = { type: "domain", id: 1 };
 
   useAclEntries.mockReturnValue({
     data: { ...aclEntries, actions: { canCreate: true } },