@truedat/core 5.7.5 → 5.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "5.7.5",
+  "version": "5.8.0",
   "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": "5.7.5",
+    "@truedat/test": "5.8.0",
     "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": "f4ae9f5fba9c949e1d3cfb12939aa330a81e6d93"
+  "gitHead": "dd51c78f3143413ec2bc9a77001d3b648fe92d0a"
 }

package/src/components/DropdownMenuItem.js

@@ -12,6 +12,7 @@ export const DropdownMenuItem = ({
   open,
   name,
   level,
+  disabled = false,
 }) => {
   const handleOpen = (e) => {
     e && e.preventDefault();
@@ -36,7 +37,7 @@ export const DropdownMenuItem = ({
         {check && (
           <Icon name={selected ? "check square outline" : "square outline"} />
         )}
-        {name}
+        <span style={{ opacity: disabled ? 0.45 : 1 }}>{name}</span>
       </div>
     </Dropdown.Item>
   );
@@ -52,6 +53,7 @@ DropdownMenuItem.propTypes = {
   open: PropTypes.bool,
   name: PropTypes.string,
   level: PropTypes.number,
+  disabled: PropTypes.bool,
 };
 
 export default DropdownMenuItem;

package/src/components/HierarchySelector.js

@@ -9,14 +9,14 @@ import TreeSelector from "./TreeSelector";
 
 const HierarchySelector = ({
   multiple,
-  hierarchy: hierarchyId,
+  hierarchy,
   onLoad,
   value,
   ...props
 }) => {
   const { formatMessage } = useIntl();
+  const { data: data, error, loading } = useHierarchy(hierarchy.id);
 
-  const { data: data, error, loading } = useHierarchy(hierarchyId);
   if (error) return null;
   if (loading) return null;
   onLoad(loading);
@@ -31,6 +31,7 @@ const HierarchySelector = ({
   return (
     <TreeSelector
       options={options}
+      minDepth={_.pathOr(0, "min_depth")(hierarchy)}
       placeholder={formatMessage({
         id: multiple
           ? "hierarchy.multiple.placeholder"
@@ -46,6 +47,7 @@ const HierarchySelector = ({
 HierarchySelector.propTypes = {
   multiple: PropTypes.bool,
   onLoad: PropTypes.func,
+  hierarchy: PropTypes.object,
   value: PropTypes.oneOfType([PropTypes.array, PropTypes.number]),
 };
 

package/src/components/TreeSelector.js

@@ -74,6 +74,7 @@ export const TreeSelector = ({
   onBlur,
   onChange,
   options,
+  minDepth = 0,
   placeholder,
   required = false,
   value: initialValue,
@@ -143,6 +144,8 @@ export const TreeSelector = ({
     <label>{placeholder}</label>
   );
 
+  const isEnabled = ({ level }, minDepth) => level >= minDepth;
+
   const items = _.flow(
     filterSearch,
     filterDisplayed,
@@ -152,9 +155,11 @@ export const TreeSelector = ({
         key={option?.id}
         check={check}
         onOpen={handleOpen}
-        onClick={handleClick}
+        onClick={isEnabled(option, minDepth) ? handleClick : () => {}}
         open={_.contains(option.id)(open)}
         canOpen={!_.isEmpty(option.children)}
+        level={option.level}
+        disabled={!isEnabled(option, minDepth)}
         selected={multiple ? _.contains(option.id)(value) : value === option.id}
         {...option}
       />
@@ -208,6 +213,7 @@ TreeSelector.propTypes = {
   onBlur: PropTypes.func,
   onChange: PropTypes.func,
   options: PropTypes.array,
+  minDepth: PropTypes.number,
   placeholder: PropTypes.string,
   required: PropTypes.bool,
   value: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),

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

@@ -53,7 +53,7 @@ const props = {
   multiple: true,
   onChange: jest.fn(),
   onLoad: jest.fn(),
-  hierarchy: 123,
+  hierarchy: { hierarchy_id: 123, depth: 0 },
 };
 
 describe("<HierarchySelector />", () => {

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

@@ -61,4 +61,166 @@ describe("<TreeSelector />", () => {
     expect(props.onChange.mock.calls.length).toBe(1);
     expect(props.onChange.mock.calls[0][1]).toEqual({ value: "1" });
   });
+
+  it("select node with allowed depth (multiple)", async () => {
+    const minDepth = 2;
+
+    const props = {
+      onChange: jest.fn(),
+      options,
+      placeholder: "Select a domain",
+      minDepth: minDepth,
+    };
+
+    const { getByText, getByRole } = render(
+      <TreeSelector multiple {...props} />,
+      renderOpts
+    );
+    userEvent.click(getByText("Select a domain"));
+
+    await waitFor(() => {
+      expect(getByRole("option", { name: /foo/i })).toBeTruthy();
+    });
+
+    userEvent.click(
+      getByRole("option", { name: /foo/i }).querySelector(
+        'i[class="plus icon"]'
+      )
+    );
+
+    await waitFor(() => {
+      expect(getByRole("option", { name: /bar/i })).toBeTruthy();
+    });
+
+    userEvent.click(
+      getByRole("option", { name: /bar/i }).querySelector(
+        'i[class="plus icon"]'
+      )
+    );
+
+    await waitFor(() => {
+      expect(getByRole("option", { name: /baz/i })).toBeTruthy();
+    });
+
+    userEvent.click(getByRole("option", { name: /baz/i }));
+    expect(props.onChange.mock.calls.length).toBe(1);
+    expect(props.onChange.mock.calls[0][1]).toEqual({ value: ["3"] });
+    expect(props.options.find((op) => op.id === "3") >= minDepth);
+  });
+
+  it("select node with forbidden depth (multiple)", async () => {
+    const minDepth = 2;
+
+    const props = {
+      onChange: jest.fn(),
+      options,
+      placeholder: "Select a domain",
+      minDepth: minDepth,
+    };
+
+    const { getByText, getByRole } = render(
+      <TreeSelector multiple {...props} />,
+      renderOpts
+    );
+    userEvent.click(getByText("Select a domain"));
+
+    await waitFor(() => {
+      expect(getByRole("option", { name: /foo/i })).toBeTruthy();
+    });
+
+    userEvent.click(
+      getByRole("option", { name: /foo/i }).querySelector(
+        'i[class="plus icon"]'
+      )
+    );
+
+    await waitFor(() => {
+      expect(getByRole("option", { name: /bar/i })).toBeTruthy();
+    });
+
+    userEvent.click(getByRole("option", { name: /bar/i }));
+
+    expect(props.onChange.mock.calls.length).toBe(0);
+  });
+
+  it("select node with allowed depth (single)", async () => {
+    const minDepth = 2;
+
+    const props = {
+      onChange: jest.fn(),
+      options,
+      placeholder: "Select a domain",
+      minDepth: minDepth,
+    };
+
+    const { getByText, getByRole } = render(
+      <TreeSelector {...props} />,
+      renderOpts
+    );
+    userEvent.click(getByText("Select a domain"));
+
+    await waitFor(() => {
+      expect(getByRole("option", { name: /foo/i })).toBeTruthy();
+    });
+
+    userEvent.click(
+      getByRole("option", { name: /foo/i }).querySelector(
+        'i[class="plus icon"]'
+      )
+    );
+
+    await waitFor(() => {
+      expect(getByRole("option", { name: /bar/i })).toBeTruthy();
+    });
+
+    userEvent.click(
+      getByRole("option", { name: /bar/i }).querySelector(
+        'i[class="plus icon"]'
+      )
+    );
+
+    await waitFor(() => {
+      expect(getByRole("option", { name: /baz/i })).toBeTruthy();
+    });
+
+    userEvent.click(getByRole("option", { name: /baz/i }));
+    expect(props.onChange.mock.calls.length).toBe(1);
+    expect(props.onChange.mock.calls[0][1]).toEqual({ value: "3" });
+    expect(props.options.find((op) => op.id === "3") >= minDepth);
+  });
+
+  it("select node with forbidden depth (single)", async () => {
+    const minDepth = 2;
+
+    const props = {
+      onChange: jest.fn(),
+      options,
+      placeholder: "Select a domain",
+      minDepth: minDepth,
+    };
+
+    const { getByText, getByRole } = render(
+      <TreeSelector {...props} />,
+      renderOpts
+    );
+    userEvent.click(getByText("Select a domain"));
+
+    await waitFor(() => {
+      expect(getByRole("option", { name: /foo/i })).toBeTruthy();
+    });
+
+    userEvent.click(
+      getByRole("option", { name: /foo/i }).querySelector(
+        'i[class="plus icon"]'
+      )
+    );
+
+    await waitFor(() => {
+      expect(getByRole("option", { name: /bar/i })).toBeTruthy();
+    });
+
+    userEvent.click(getByRole("option", { name: /bar/i }));
+
+    expect(props.onChange.mock.calls.length).toBe(0);
+  });
 });

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

@@ -48,7 +48,11 @@ exports[`<DomainSelector /> matches latest snapshot 1`] = `
                 aria-hidden="true"
                 class="plus icon"
               />
-              barDomain
+              <span
+                style="opacity: 1;"
+              >
+                barDomain
+              </span>
             </div>
           </div>
           <div
@@ -63,7 +67,11 @@ exports[`<DomainSelector /> matches latest snapshot 1`] = `
                 aria-hidden="true"
                 class="icon"
               />
-              bazDomain
+              <span
+                style="opacity: 1;"
+              >
+                bazDomain
+              </span>
             </div>
           </div>
           <div
@@ -78,7 +86,11 @@ exports[`<DomainSelector /> matches latest snapshot 1`] = `
                 aria-hidden="true"
                 class="icon"
               />
-              fooDomain
+              <span
+                style="opacity: 1;"
+              >
+                fooDomain
+              </span>
             </div>
           </div>
         </div>

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

@@ -16,7 +16,11 @@ exports[`<DropdownMenuItem /> matches the latest snapshot 1`] = `
         aria-hidden="true"
         class="square outline icon"
       />
-      foo
+      <span
+        style="opacity: 1;"
+      >
+        foo
+      </span>
     </div>
   </div>
 </div>

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

@@ -50,7 +50,11 @@ exports[`<FilterMultilevelDropdown /> matches the latest snapshot 1`] = `
               aria-hidden="true"
               class="square outline icon"
             />
-            Domain 1
+            <span
+              style="opacity: 1;"
+            >
+              Domain 1
+            </span>
           </div>
         </div>
         <div
@@ -69,7 +73,11 @@ exports[`<FilterMultilevelDropdown /> matches the latest snapshot 1`] = `
               aria-hidden="true"
               class="square outline icon"
             />
-            Domain 3
+            <span
+              style="opacity: 1;"
+            >
+              Domain 3
+            </span>
           </div>
         </div>
       </div>

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

@@ -50,7 +50,11 @@ exports[`<HierarchyFilterDropdown /> matches the latest snapshot 1`] = `
               aria-hidden="true"
               class="square outline icon"
             />
-            foo
+            <span
+              style="opacity: 1;"
+            >
+              foo
+            </span>
           </div>
         </div>
       </div>

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

@@ -48,7 +48,11 @@ exports[`<HierarchySelector /> matches latest snapshot 1`] = `
                 aria-hidden="true"
                 class="plus icon"
               />
-              foo
+              <span
+                style="opacity: 1;"
+              >
+                foo
+              </span>
             </div>
           </div>
         </div>

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

@@ -48,7 +48,11 @@ exports[`<TreeSelector /> matches latest snapshot 1`] = `
                 aria-hidden="true"
                 class="plus icon"
               />
-              foo
+              <span
+                style="opacity: 1;"
+              >
+                foo
+              </span>
             </div>
           </div>
         </div>