@truedat/core 5.3.2 → 5.4.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [5.3.3] 2023-03-13
+
+### Added
+
+- [TD-3806] Hierarchy Selector
+
 ## [5.3.2] 2023-03-13
 
 ### Fixed
@@ -12,6 +18,8 @@
 
 - [TD-5509] Structure to structure link form Routes
 
+## [5.2.9] 2023-02-28
+
 ### Added
 
 - [TD-5599] Submenu and Routes for Tasks

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "5.3.2",
+  "version": "5.4.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.3.2",
+    "@truedat/test": "5.3.3",
     "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": "ea33c4f9396f3843573b2508a93473bb3d98ee65"
+  "gitHead": "e8b1b4b4323f098ac213ecbd53fe6a005254a672"
 }

package/src/components/HierarchySelector.js

@@ -0,0 +1,52 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { useHierarchy } from "@truedat/df/hooks/useHierarchies";
+import { accentInsensitivePathOrder } from "../services/sort";
+import { stratify, flatten } from "../services/tree";
+import TreeSelector from "./TreeSelector";
+
+const HierarchySelector = ({
+  multiple,
+  hierarchy: hierarchyId,
+  onLoad,
+  value,
+  ...props
+}) => {
+  const { formatMessage } = useIntl();
+
+  const { data: data, error, loading } = useHierarchy(hierarchyId);
+  if (error) return null;
+  if (loading) return null;
+  onLoad(loading);
+
+  const options = _.flow(
+    _.propOr([], "nodes"),
+    _.sortBy(accentInsensitivePathOrder("name")),
+    stratify({}),
+    flatten
+  )(data);
+
+  return (
+    <TreeSelector
+      options={options}
+      placeholder={formatMessage({
+        id: multiple
+          ? "hierarchy.multiple.placeholder"
+          : "hierarchy.selector.placeholder",
+      })}
+      value={value}
+      multiple={multiple}
+      {...props}
+    />
+  );
+};
+
+HierarchySelector.propTypes = {
+  multiple: PropTypes.bool,
+  onLoad: PropTypes.func,
+  value: PropTypes.oneOfType([PropTypes.array, PropTypes.number]),
+};
+
+export default HierarchySelector;

package/src/components/TreeSelector.js

@@ -12,6 +12,11 @@ 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,
@@ -51,6 +56,7 @@ const toggle = (id) => (value) =>
   _.includes(id)(value) ? _.without([id])(value) : _.union([id])(value);
 
 const labelValues = _.cond([
+  [_.isNumber, _.castArray],
   [_.isArray, _.identity],
   [_.isEmpty, _.constant([])],
   [_.isString, _.castArray],
@@ -85,7 +91,7 @@ export const TreeSelector = ({
   }, [options, open, value]);
 
   const handleOpen = (id) => {
-    const option = _.find({ id })(options);
+    const option = _.find({ id })(maybeMapKeys(options));
     const isOpen = _.contains(id)(open);
     const childIds = _.map("id")(option.children);
     const descendentIds = descendents(option);
@@ -129,7 +135,7 @@ export const TreeSelector = ({
     <SelectedLabels
       disabled={disabled}
       placeholder={placeholder}
-      options={options}
+      options={maybeMapKeys(options)}
       onClick={handleClick}
       value={labelValues(value)}
     />
@@ -140,6 +146,7 @@ export const TreeSelector = ({
   const items = _.flow(
     filterSearch,
     filterDisplayed,
+    maybeMapKeys,
     _.map((option) => (
       <DropdownMenuItem
         key={option?.id}
@@ -156,6 +163,7 @@ export const TreeSelector = ({
 
   return (
     <Form.Dropdown
+      className="fix-dropdown-selector"
       error={error}
       floating
       label={label}

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

@@ -0,0 +1,91 @@
+import React from "react";
+import { waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import HierarchySelector from "../HierarchySelector";
+import en from "../../messages/en";
+
+const hierarchy = {
+  id: 123,
+  nodes: [
+    {
+      id: 1,
+      parentId: null,
+      name: "foo",
+    },
+    {
+      id: 2,
+      parentId: 1,
+      name: "bar",
+    },
+  ],
+};
+
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useParams: () => ({ id: 123 }),
+}));
+
+jest.mock("@truedat/df/hooks/useHierarchies", () => {
+  const originalModule = jest.requireActual("@truedat/df/hooks/useHierarchies");
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useHierarchy: jest.fn(() => ({
+      data: hierarchy,
+      loading: false,
+    })),
+  };
+});
+
+const renderOpts = {
+  messages: {
+    en: {
+      ...en,
+    },
+  },
+  fallback: "lazy",
+};
+const props = {
+  hierarchy,
+  loading: false,
+  multiple: true,
+  onChange: jest.fn(),
+  onLoad: jest.fn(),
+  hierarchy: 123,
+};
+
+describe("<HierarchySelector />", () => {
+  it("matches latest snapshot", async () => {
+    const { container, queryByText } = render(
+      <HierarchySelector {...props} />,
+      renderOpts
+    );
+    await waitFor(() => {
+      expect(queryByText(/foo/)).toBeInTheDocument();
+    });
+    expect(container).toMatchSnapshot();
+  });
+
+  it("calls onChange with selected values", async () => {
+    const { getByText, getByRole } = render(
+      <HierarchySelector {...props} />,
+      renderOpts
+    );
+
+    await waitFor(() => {
+      expect(getByText(/Select Hierarchies/)).toBeTruthy();
+    });
+
+    userEvent.click(getByText(/Select Hierarchies/));
+
+    await waitFor(() => {
+      expect(getByRole("option", { name: /foo/i })).toBeTruthy();
+    });
+
+    userEvent.click(getByRole("option", { name: /foo/i }));
+    expect(props.onChange.mock.calls.length).toBe(1);
+    expect(props.onChange.mock.calls[0][1]).toEqual({ value: [1] });
+  });
+});

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

@@ -97,7 +97,7 @@ exports[`<CatalogMenu /> matches the latest snapshot 1`] = `
         <a
           aria-checked="false"
           class="item"
-          href="/bulk_update_template_content_events"
+          href="/bulkUpdateTemplateContentEvents"
           name="structures_upload_events"
           role="option"
         >

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

@@ -3,7 +3,7 @@
 exports[`<DomainSelector /> matches latest snapshot 1`] = `
 <div>
   <div
-    class="field"
+    class="field fix-dropdown-selector"
   >
     <div
       aria-expanded="false"

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

@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<HierarchySelector /> matches latest snapshot 1`] = `
+<div>
+  <div
+    class="field fix-dropdown-selector"
+  >
+    <div
+      aria-expanded="false"
+      aria-multiselectable="true"
+      class="ui floating multiple dropdown"
+      role="listbox"
+      tabindex="0"
+    >
+      <label>
+        Select Hierarchies
+      </label>
+      <i
+        aria-hidden="true"
+        class="dropdown icon"
+      />
+      <div
+        class="menu transition"
+      >
+        <div
+          class="ui left icon input search"
+        >
+          <input
+            type="text"
+          />
+          <i
+            aria-hidden="true"
+            class="search icon"
+          />
+        </div>
+        <div
+          class="scrolling menu transition"
+        >
+          <div
+            aria-selected="false"
+            class="item"
+            role="option"
+          >
+            <div
+              style="margin-left: 0px;"
+            >
+              <i
+                aria-hidden="true"
+                class="plus icon"
+              />
+              foo
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

@@ -3,7 +3,7 @@
 exports[`<TreeSelector /> matches latest snapshot 1`] = `
 <div>
   <div
-    class="field"
+    class="field fix-dropdown-selector"
   >
     <div
       aria-expanded="false"

package/src/components/index.js

@@ -23,6 +23,7 @@ import FiltersLoader from "./FiltersLoader";
 import GlossaryMenu from "./GlossaryMenu";
 import GrantMenu from "./GrantMenu";
 import GroupActions from "./GroupActions";
+import HierarchySelector from "./HierarchySelector";
 import HistoryBackButton from "./HistoryBackButton";
 import IngestMenu from "./IngestMenu";
 import LineageMenu from "./LineageMenu";
@@ -75,6 +76,7 @@ export {
   GlossaryMenu,
   GrantMenu,
   GroupActions,
+  HierarchySelector,
   HistoryBackButton,
   IngestMenu,
   LineageMenu,

package/src/messages/en.js

@@ -56,7 +56,8 @@ export default {
   "form.validation.required": "{prop} is required",
   "form.validation.minLength": "{prop} must have at least {value} characters",
   "form.validation.email.invalid": "Invalid email address",
-
+  "hierarchy.multiple.placeholder": "Select Hierarchies",
+  "hierarchy.selector.placeholder": "Select Hierarchy",
   "i18n.actions.createMessage": "Create message",
 
   "i18n.message.form.messageId.placeholder": "Message ID",

package/src/messages/es.js

@@ -56,7 +56,8 @@ export default {
   "form.validation.required": "{prop} es un campo requerido",
   "form.validation.minLength": "{prop} debe tener al menos {value} elementos",
   "form.validation.email.invalid": "Dirección de email inválida",
-
+  "hierarchy.multiple.placeholder": "Seleccionar Jerarquías",
+  "hierarchy.selector.placeholder": "Seleccionar Jerarquía",
   "i18n.actions.createMessage": "Crear mensaje",
 
   "i18n.message.form.messageId.placeholder": "Id del mensaje",

package/src/routes.js

@@ -174,8 +174,8 @@ export const SOURCE_JOBS = "/sources/:sourceId/jobs";
 export const SOURCE_JOBS_NEW = "/sources/:sourceId/jobs/new";
 export const STRUCTURE = "/structures/:id";
 export const STRUCTURES = "/structures";
-export const STRUCTURES_BULK_UPDATE = "/structures/bulk_update";
-export const STRUCTURES_UPLOAD_EVENTS = "/bulk_update_template_content_events";
+export const STRUCTURES_BULK_UPDATE = "/structures/bulkUpdate";
+export const STRUCTURES_UPLOAD_EVENTS = "/bulkUpdateTemplateContentEvents";
 export const STRUCTURE_CHILDREN = "/structures/:id/children";
 export const STRUCTURE_EVENTS = "/structures/:id/events";
 export const STRUCTURE_GRANTS = "/structures/:id/grants";