@truedat/df 5.3.2 → 5.4.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [5.3.3] 2023-03-13
+
+### Added
+
+- [TD-3805] Hierarchy widget functionality
+
 ## [5.0.5] 2023-01-27
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/df",
-  "version": "5.3.2",
+  "version": "5.4.0",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,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",
@@ -87,8 +87,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.1",
-    "@truedat/auth": "5.3.2",
-    "@truedat/core": "5.3.2",
+    "@truedat/auth": "5.4.0",
+    "@truedat/core": "5.4.0",
     "decode-uri-component": "^0.2.2",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.8.1",
@@ -109,5 +109,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "ea33c4f9396f3843573b2508a93473bb3d98ee65"
+  "gitHead": "e8b1b4b4323f098ac213ecbd53fe6a005254a672"
 }

package/src/components/DynamicFieldValue.js

@@ -4,6 +4,7 @@ import PropTypes from "prop-types";
 import { FormattedMessage, useIntl } from "react-intl";
 import { Icon, List, Container } from "semantic-ui-react";
 import DomainPreview from "./widgets/DomainPreview";
+import HierarchyPreview from "./widgets/HierarchyPreview";
 import SystemPreview from "./widgets/SystemPreview";
 import FieldViewerValue from "./FieldViewerValue";
 import "../styles/fieldGroupDetail.less";
@@ -48,6 +49,8 @@ export const DynamicFieldValue = ({
           )
         ) : type == "domain" ? (
           <DomainPreview domainIds={_.castArray(value)} />
+        ) : type == "hierarchy" ? (
+          <HierarchyPreview hierarchyValue={_.castArray(value)} />
         ) : _.isArray(value) ? (
           type == "table" ? (
             <FieldViewerValue type={type} value={value} values={values} />

package/src/components/widgets/DropdownField.js

@@ -5,6 +5,7 @@ import { connect } from "react-redux";
 import { Dimmer, Loader } from "semantic-ui-react";
 import DropdownDataLoader from "./DropdownDataLoader";
 import DomainDropdown from "./DomainDropdown";
+import HierarchyDropdown from "./HierarchyDropdown";
 import StandardDropdown from "./StandardDropdown";
 
 export const DropdownField = ({ field, loading, onChange, scope }) => {
@@ -13,6 +14,8 @@ export const DropdownField = ({ field, loading, onChange, scope }) => {
     <Dimmer.Dimmable dimmed={loading}>
       {type === "domain" ? (
         <DomainDropdown field={field} onChange={onChange} scope={scope} />
+      ) : type === "hierarchy" ? (
+        <HierarchyDropdown field={field} onChange={onChange} />
       ) : (
         <>
           <DropdownDataLoader type={type} />

package/src/components/widgets/HierarchyDropdown.js

@@ -0,0 +1,56 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { Form } from "semantic-ui-react";
+import { HierarchySelector } from "@truedat/core/components";
+
+const pickId = _.cond([
+  [_.eq(""), _.constant(null)],
+  [_.isString, _.identity],
+  [_.conformsTo({ id: _.isString }), _.flow(_.prop("id"))],
+  [_.stubTrue, _.constant(null)],
+]);
+
+const idOrIds = _.cond([
+  [_.isArray, _.flow(_.map(pickId), _.reject(_.isNil))],
+  [_.stubTrue, pickId],
+]);
+
+export const HierarchyDropdown = ({
+  field: {
+    name,
+    cardinality,
+    value: currentValue,
+    values: { hierarchy },
+  },
+  onChange,
+}) => {
+  const [loading, setLoading] = useState(false);
+  const handleLoad = () => setLoading(false);
+  const handleChange = (e, { value }) => {
+    return onChange(e, { name, value: idOrIds(value) });
+  };
+
+  const multiple = _.includes(cardinality)(["+", "*"]);
+
+  return (
+    <>
+      {loading ? <Form.Input loading /> : null}
+      <HierarchySelector
+        multiple={multiple}
+        onChange={handleChange}
+        onLoad={handleLoad}
+        value={idOrIds(currentValue)}
+        hierarchy={hierarchy}
+        labels
+      />
+    </>
+  );
+};
+
+HierarchyDropdown.propTypes = {
+  field: PropTypes.object,
+  onChange: PropTypes.func,
+};
+
+export default HierarchyDropdown;

package/src/components/widgets/HierarchyPreview.js

@@ -0,0 +1,13 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { Label } from "semantic-ui-react";
+
+export const HierarchyPreview = ({ hierarchyValue }) =>
+  _.map(({ id, name }) => <Label key={id}>{name}</Label>)(hierarchyValue);
+
+HierarchyPreview.propTypes = {
+  hierarchyValue: PropTypes.arrayOf(PropTypes.object).isRequired,
+};
+
+export default HierarchyPreview;

package/src/components/widgets/__tests__/HierarchyDropdown.spec.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import HierarchyDropdown from "../HierarchyDropdown";
+
+describe("<HierarchyDropdown />", () => {
+  const props = {
+    field: {
+      name: "foo",
+      cardinality: "*",
+      value: "",
+      values: { hierarchy: 50 },
+    },
+    onChange: jest.fn(),
+  };
+  it("matches the latest snapshot", async () => {
+    const { container } = render(<HierarchyDropdown {...props} />);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/widgets/__tests__/__snapshots__/HierarchyDropdown.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<HierarchyDropdown /> matches the latest snapshot 1`] = `<div />`;

package/src/hooks/useHierarchies.js

@@ -79,6 +79,7 @@ const toFront = (hierarchy) => {
           _.map((node) => {
             return {
               id: node.node_id,
+              key: node.key,
               parentId: node.parent_id,
               name: node.name,
               description: node.description,

package/src/messages/en.js

@@ -72,6 +72,7 @@ export default {
   "template.field.type.domain": "Domain",
   "template.field.type.enriched_text": "Enriched text",
   "template.field.type.float": "Float",
+  "template.field.type.hierarchy": "Hierarchy",
   "template.field.type.image": "Image",
   "template.field.type.integer": "Integer",
   "template.field.type.string": "String",
@@ -96,6 +97,7 @@ export default {
   "template.field.values.file_types": "File types",
   "template.field.values.fixed_tuple": "Key/Value list",
   "template.field.values.fixed": "Fixed list",
+  "template.field.values.hierarchy": "Select hierarchy",
   "template.field.values.none": "Free text",
   "template.field.values.role_groups": "Users or Groups of a Role",
   "template.field.values.role_users": "Users of a Role",

package/src/messages/es.js

@@ -72,6 +72,7 @@ export default {
   "template.field.type.domain": "Dominio",
   "template.field.type.enriched_text": "Texto enriquecido",
   "template.field.type.float": "Decimal",
+  "template.field.type.hierarchy": "Jerarquía",
   "template.field.type.image": "Imagen",
   "template.field.type.integer": "Entero",
   "template.field.type.string": "Cadena de Texto",
@@ -96,6 +97,7 @@ export default {
   "template.field.values.file_types": "Tipos de ficheros",
   "template.field.values.fixed_tuple": "Lista de código/descripción",
   "template.field.values.fixed": "Lista fija",
+  "template.field.values.hierarchy": "Seleccionar jerarquía",
   "template.field.values.none": "Texto libre",
   "template.field.values.role_groups": "Usuarios o grupos de un Role",
   "template.field.values.role_users": "Usuarios de un Role",

package/src/templates/components/templateForm/FieldForm.js

@@ -2,7 +2,7 @@ import _ from "lodash/fp";
 import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
-import { Form, Button, Divider, Segment, Checkbox } from "semantic-ui-react";
+import { Form, Button, Divider, Segment } from "semantic-ui-react";
 import ValuesField from "./ValuesField";
 import ConditionalFieldForm from "./ConditionalFieldForm";
 import MandatoryConditional from "./MandatoryConditional";
@@ -19,6 +19,8 @@ const typeFromKey = (keys) =>
     ? "role_groups"
     : _.includes("role_users")(keys)
     ? "role_users"
+    : _.includes("hierarchy")(keys)
+    ? "hierarchy"
     : _.first(keys);
 
 const defaultType = (values) => _.flow(_.map("value"), _.first)(values);

package/src/templates/components/templateForm/HierarchiesList.js

@@ -0,0 +1,66 @@
+import _ from "lodash/fp";
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { Form } from "semantic-ui-react";
+import { useHierarchies } from "../../../hooks/useHierarchies";
+
+export const HierarchiesList = ({
+  hierarchies,
+  onChange,
+  values: value,
+  loading,
+}) => {
+  const { formatMessage } = useIntl();
+
+  const handleChange = (_e, { value }) => onChange(value);
+
+  const options = _.flow(
+    _.map(({ id, name }) => ({ text: name, value: id })),
+    _.sortBy("text")
+  )(hierarchies);
+
+  return (
+    <Form.Group size="small" widths="equal">
+      <Form.Dropdown
+        required
+        selection
+        label={
+          value === ""
+            ? ""
+            : formatMessage({ id: "template.field.type.hierarchy" })
+        }
+        loading={loading}
+        placeholder={formatMessage({
+          id: "template.field.values.hierarchy",
+        })}
+        onChange={handleChange}
+        options={options}
+        value={value}
+      />
+    </Form.Group>
+  );
+};
+
+HierarchiesList.propTypes = {
+  hierarchies: PropTypes.array,
+  onChange: PropTypes.func,
+  onDefaultValueChange: PropTypes.func,
+  values: PropTypes.number,
+  loading: PropTypes.bool,
+};
+
+export const HierarchiesListLoader = (props) => {
+  const { data: hierarchies, error, loading } = useHierarchies();
+
+  if (error) return null;
+  return (
+    <HierarchiesList
+      {...props}
+      hierarchies={hierarchies || []}
+      loading={loading}
+    />
+  );
+};
+
+export default HierarchiesListLoader;

package/src/templates/components/templateForm/ValuesField.js

@@ -31,7 +31,7 @@ export const ValuesField = ({
     ? null
     : valueSegment(values, keyType, fieldType) && (
         <Segment>
-          {_.size(values) > 1 && (
+          {_.size(values) > 1 ? (
             <Form.Dropdown
               fluid
               selection
@@ -41,8 +41,8 @@ export const ValuesField = ({
               required
               options={valueTypes(values)}
             />
-          )}
-          {keyType && (
+          ) : null}
+          {keyType ? (
             <ValuesSelector
               cardinality={field?.cardinality}
               defaultField={defaultField}
@@ -53,8 +53,8 @@ export const ValuesField = ({
               type={keyType}
               values={_.path(`values.${keyType}`)(field)}
             />
-          )}
-          {_.includes(keyType)(["fixed", "fixed_tuple"]) && (
+          ) : null}
+          {_.includes(keyType)(["fixed", "fixed_tuple"]) ? (
             <Form.Checkbox
               name={subscribableField}
               label={formatMessage({ id: "template.field.subscribable" })}
@@ -63,7 +63,7 @@ export const ValuesField = ({
                 onChange(null, { name, value })
               }
             />
-          )}
+          ) : null}
           <DefaultValue
             defaultField={defaultField}
             field={field}

package/src/templates/components/templateForm/ValuesSelector.js

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import { Form } from "semantic-ui-react";
 import DependentDomain from "./DependentDomain";
 import SwitchListForm from "./SwitchListForm";
+import HierarchiesList from "./HierarchiesList";
 import ValuesListForm from "./ValuesListForm";
 import { listFormat } from "./valueDefinitions";
 
@@ -26,14 +27,14 @@ export const ValuesSelector = ({
   };
   return (
     <>
-      {listFormat(type) && (
+      {listFormat(type) ? (
         <ValuesListForm
           type={type}
           values={values || []}
           onChange={onValueChange}
         />
-      )}
-      {type === "switch" && (
+      ) : null}
+      {type === "switch" ? (
         <SwitchListForm
           cardinality={cardinality}
           defaultValue={defaultValue}
@@ -42,8 +43,8 @@ export const ValuesSelector = ({
           onDefaultValueChange={onDefaultValueChange}
           onChange={onValueChange}
         />
-      )}
-      {type === "domain" && (
+      ) : null}
+      {type === "domain" ? (
         <DependentDomain
           cardinality={cardinality}
           defaultValue={defaultValue}
@@ -51,8 +52,8 @@ export const ValuesSelector = ({
           onDefaultValueChange={onDefaultValueChange}
           values={values || {}}
         />
-      )}
-      {type === "role_users" && (
+      ) : null}
+      {type === "role_users" ? (
         <Form.Input
           value={values || ""}
           placeholder={formatMessage({
@@ -60,8 +61,8 @@ export const ValuesSelector = ({
           })}
           onChange={(e, { value }) => onValueChange(value)}
         />
-      )}
-      {type === "role_groups" && (
+      ) : null}
+      {type === "role_groups" ? (
         <Form.Input
           value={values || ""}
           placeholder={formatMessage({
@@ -69,7 +70,14 @@ export const ValuesSelector = ({
           })}
           onChange={(e, { value }) => onValueChange(value)}
         />
-      )}
+      ) : null}
+      {type === "hierarchy" ? (
+        <HierarchiesList
+          onChange={onValueChange}
+          onDefaultValueChange={onDefaultValueChange}
+          values={values || {}}
+        />
+      ) : null}
     </>
   );
 };

package/src/templates/components/templateForm/__tests__/__snapshots__/FieldForm.spec.js.snap

@@ -1230,6 +1230,11 @@ exports[`<FieldForm /> renders ValuesField and manages onChange 1`] = `
             "text": "template.field.type.user_group",
             "value": "user_group",
           },
+          Object {
+            "key": "hierarchy",
+            "text": "template.field.type.hierarchy",
+            "value": "hierarchy",
+          },
         ]
       }
       required={true}

package/src/templates/components/templateForm/valueDefinitions.js

@@ -10,12 +10,14 @@ const valueTypes = [
   { id: "template.field.values.table_columns", value: "table_columns" },
   { id: "template.field.values.file_types", value: "file_types" },
   { id: "template.field.values.domain", value: "domain" },
+  { id: "template.field.values.hierarchy", value: "hierarchy" },
 ];
 
 const selectableValues = {
   string: ["domain", "fixed", "fixed_tuple", "switch"],
   user: ["role_users"],
   user_group: ["role_groups"],
+  hierarchy: ["hierarchy"],
 };
 
 const eligibleValues = {
@@ -48,7 +50,9 @@ export const defaultValue = (type, fieldType) =>
 export const valuesSelector = (type) =>
   type &&
   (listFormat(type) ||
-    ["domain", "switch", "role_users", "role_groups"].includes(type));
+    ["domain", "switch", "role_users", "role_groups", "hierarchy"].includes(
+      type
+    ));
 
 export const valueSegment = (values, type, fieldType) =>
   _.size(values) > 1 || valuesSelector(type) || defaultValue(type, fieldType);

package/src/templates/components/templateForm/widgetDefinitions.js

@@ -61,7 +61,7 @@ export const WIDGETS = [
     text: "Dropdown",
     icon: "arrow down",
     cardinalities: ["?", "1", "*", "+"],
-    types: ["string", "system", "domain", "user", "user_group"],
+    types: ["string", "system", "domain", "user", "user_group", "hierarchy"],
   },
   {
     key: "radio",