@truedat/df 5.0.1 → 5.0.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [5.0.2] 2023-01-26
+
+### Added
+
+- [TD-3805] Hierarchy functionality
+
 ## [4.59.6] 2023-01-13
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/df",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "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.0.1",
+    "@truedat/test": "5.0.2",
     "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.0.1",
-    "@truedat/core": "5.0.1",
+    "@truedat/auth": "5.0.2",
+    "@truedat/core": "5.0.2",
     "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": "7eda377af42b503fda5e1f0e8cebcaf4d38dec32"
+  "gitHead": "627767d6f31541ef09a077d7e535fb488a05700c"
 }

package/src/api/hierarchies.js

@@ -0,0 +1,4 @@
+const API_HIERARCHIES = "/api/hierarchies";
+const API_HIERARCHY = "/api/hierarchies/:id";
+
+export { API_HIERARCHIES, API_HIERARCHY };

package/src/components/hierarchies/Hierarchies.js

@@ -0,0 +1,43 @@
+import React from "react";
+import { Table } from "semantic-ui-react";
+import { Link } from "react-router-dom";
+import { Loading } from "@truedat/core/components";
+import { FormattedMessage } from "react-intl";
+import { linkTo } from "@truedat/core/routes";
+import { useHierarchies } from "../../hooks/useHierarchies";
+
+export const Hierarchies = () => {
+  const { data: hierarchies, loading } = useHierarchies();
+  return loading ? (
+    <Loading />
+  ) : hierarchies.length == 0 ? null : (
+    <Table celled>
+      <Table.Header>
+        <Table.Row>
+          <Table.HeaderCell>
+            <FormattedMessage id="hierarchy.name" />
+          </Table.HeaderCell>
+          <Table.HeaderCell>
+            <FormattedMessage id="hierarchy.description" />
+          </Table.HeaderCell>
+        </Table.Row>
+      </Table.Header>
+
+      <Table.Body>
+        {hierarchies.map((hierarchy) => {
+          const { id, name, description } = hierarchy;
+          return (
+            <Table.Row key={id}>
+              <Table.Cell>
+                <Link to={linkTo.HIERARCHY({ hierarchyId: id })}>{name}</Link>
+              </Table.Cell>
+              <Table.Cell>{description}</Table.Cell>
+            </Table.Row>
+          );
+        })}
+      </Table.Body>
+    </Table>
+  );
+};
+
+export default Hierarchies;

package/src/components/hierarchies/HierarchiesView.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { Button, Header, Icon, Segment } from "semantic-ui-react";
+import { Link } from "react-router-dom";
+import { FormattedMessage } from "react-intl";
+import { HIERARCHY_CREATE } from "@truedat/core/routes";
+import Hierarchies from "./Hierarchies";
+
+export const HierarchiesView = () => (
+  <Segment>
+    <Header as="h2">
+      <Button
+        floated="right"
+        primary
+        as={Link}
+        to={HIERARCHY_CREATE}
+        content={<FormattedMessage id="hierarchy.create" />}
+      />
+      <Icon circular name="tree" />
+      <Header.Content>
+        <FormattedMessage id="hierarchies.header" />
+        <Header.Subheader>
+          <FormattedMessage id="hierarchies.subheader" />
+        </Header.Subheader>
+      </Header.Content>
+    </Header>
+    <Segment attached="bottom">
+      <Hierarchies />
+    </Segment>
+  </Segment>
+);
+
+export default HierarchiesView;

package/src/components/hierarchies/Hierarchy.js

@@ -0,0 +1,301 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { Icon, Grid, Label, Input, Form } from "semantic-ui-react";
+import { DescriptionInput } from "@truedat/core/components";
+
+const ListHierarchyItem = ({
+  node,
+  hierarchy,
+  onChange,
+  addNode,
+  removeNode,
+  isEditionMode,
+}) => {
+  const { formatMessage } = useIntl();
+  const { id, name, error, editionStatus, description } = node;
+  const [expanded, setExpanded] = useState(false);
+  const [mouseOver, setMouseOver] = useState(false);
+  const generation = hierarchy.nodes.filter((n) => n.parentId == id);
+  const hasChildren = !generation.length == 0;
+
+  return (
+    <li
+      key={id}
+      onMouseOver={() => setMouseOver(true)}
+      onMouseOut={() => setMouseOver(false)}
+    >
+      <Icon
+        className="li_trash"
+        size="large"
+        name="cut"
+        title={formatMessage({ id: "hierarchy.delete_node" })}
+        style={{
+          cursor: "pointer",
+          visibility:
+            isEditionMode && !hasChildren && mouseOver ? "visible" : "hidden",
+        }}
+        onClick={() => removeNode(id)}
+      />
+
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "self-start",
+        }}
+      >
+        <div>
+          <Input
+            labelPosition="left"
+            type="text"
+            placeholder={formatMessage({ id: "hierarchy.node" })}
+            value={name == null ? "" : name}
+            error={error}
+            style={isEditionMode ? {} : { opacity: 1 }}
+            disabled={!isEditionMode}
+            onChange={(_e, { value }) =>
+              onChange(id, { name: value, description: description })
+            }
+          >
+            {!hasChildren ? (
+              isEditionMode && mouseOver && name && name != "" ? (
+                <Label
+                  basic
+                  title={formatMessage({ id: "hierarchy.add_child" })}
+                  onClick={() => {
+                    addNode(id, null);
+                    setExpanded(true);
+                  }}
+                >
+                  <Icon
+                    fitted
+                    name="times circle outline"
+                    style={{ transform: "rotate(45deg)", cursor: "pointer" }}
+                    color={
+                      editionStatus == "dirty"
+                        ? "orange"
+                        : editionStatus == "added"
+                        ? "green"
+                        : null
+                    }
+                  />
+                </Label>
+              ) : (
+                <Label basic>
+                  <Icon
+                    fitted
+                    name="circle outline"
+                    color={
+                      editionStatus == "dirty"
+                        ? "orange"
+                        : editionStatus == "added"
+                        ? "green"
+                        : null
+                    }
+                  />
+                </Label>
+              )
+            ) : (
+              <Label basic title={expanded ? "Collapse" : "Expand"}>
+                <Icon
+                  fitted
+                  onClick={() => setExpanded(!expanded)}
+                  style={{ cursor: "pointer" }}
+                  color={
+                    editionStatus == "dirty"
+                      ? "orange"
+                      : editionStatus == "added"
+                      ? "green"
+                      : null
+                  }
+                  name={expanded ? "dot circle outline" : "circle"}
+                />
+              </Label>
+            )}
+            <input />
+          </Input>
+        </div>
+
+        <div className="description_wrapper">
+          <DescriptionInput
+            disabled={!isEditionMode}
+            value={description}
+            onChange={(_e, { value }) =>
+              onChange(id, { name: name, description: value })
+            }
+          />
+        </div>
+      </div>
+      {generation.length == 0 || !expanded ? null : (
+        <ListHierarchy
+          hierarchy={hierarchy}
+          parentId={id}
+          onItemChange={onChange}
+          addNode={addNode}
+          removeNode={removeNode}
+          isEditionMode={isEditionMode}
+        />
+      )}
+    </li>
+  );
+};
+
+ListHierarchyItem.propTypes = {
+  node: PropTypes.object,
+  hierarchy: PropTypes.object,
+  onChange: PropTypes.func,
+  addNode: PropTypes.func,
+  removeNode: PropTypes.func,
+  isEditionMode: PropTypes.bool,
+};
+
+const ListHierarchy = ({
+  hierarchy,
+  parentId = null,
+  onItemChange,
+  addNode,
+  removeNode,
+  isEditionMode,
+}) => {
+  const { formatMessage } = useIntl();
+  const [newNodeName, setNewNodeName] = useState();
+  const generation = hierarchy.nodes.filter(
+    (node) => node.parentId == parentId
+  );
+  const addNodeTo = (id = null) => (
+    <Form
+      onSubmit={() => {
+        addNode(id, newNodeName);
+        setNewNodeName("");
+      }}
+    >
+      <Input
+        labelPosition={newNodeName && newNodeName !== "" ? "right" : null}
+        onChange={(_e, { value }) => setNewNodeName(value)}
+        placeholder={formatMessage({ id: "hierarchy.new_node" })}
+        value={newNodeName}
+      >
+        <input />
+
+        {!newNodeName || newNodeName == "" ? null : (
+          <Label
+            style={{ cursor: "pointer" }}
+            onClick={() => {
+              addNode(id, newNodeName);
+              setNewNodeName("");
+            }}
+          >
+            {formatMessage({ id: "hierarchy.add" })}
+          </Label>
+        )}
+      </Input>
+    </Form>
+  );
+
+  return generation.length == 0 ? (
+    isEditionMode ? (
+      <ul className="wtree expanded">
+        <li>{addNodeTo()}</li>
+      </ul>
+    ) : null
+  ) : (
+    <ul className="wtree expanded">
+      {generation.map((node) => {
+        return (
+          <ListHierarchyItem
+            key={node.id}
+            node={node}
+            hierarchy={hierarchy}
+            onChange={onItemChange}
+            addNode={addNode}
+            removeNode={removeNode}
+            isEditionMode={isEditionMode}
+          />
+        );
+      })}
+      {isEditionMode ? (
+        <li className="add_node" key={generation.length}>
+          <div>{addNodeTo(parentId)}</div>
+        </li>
+      ) : null}
+    </ul>
+  );
+};
+
+ListHierarchy.propTypes = {
+  hierarchy: PropTypes.object,
+  parentId: PropTypes.number,
+  onItemChange: PropTypes.func,
+  addNode: PropTypes.func,
+  removeNode: PropTypes.func,
+  isEditionMode: PropTypes.bool,
+};
+
+const Hierarchy = ({
+  addNode,
+  hierarchy,
+  parentId = null,
+  updateMetadata,
+  updateNode,
+  removeNode,
+  isEditionMode,
+}) => {
+  const { formatMessage } = useIntl();
+  return (
+    <Grid.Column>
+      <Grid.Row>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "self-start",
+          }}
+        >
+          <Input
+            type="text"
+            placeholder={formatMessage({ id: "hierarchy.name" })}
+            disabled={!isEditionMode}
+            style={isEditionMode ? {} : { opacity: 1 }}
+            value={hierarchy.name}
+            onChange={(_e, { value }) =>
+              updateMetadata({
+                name: value,
+                description: hierarchy.description,
+              })
+            }
+          />
+          <div className="description_wrapper">
+            <DescriptionInput
+              disabled={!isEditionMode}
+              value={hierarchy.description}
+              onChange={(_e, { value }) =>
+                updateMetadata({ name: hierarchy.name, description: value })
+              }
+            />
+          </div>
+        </div>
+      </Grid.Row>
+      <ListHierarchy
+        hierarchy={hierarchy}
+        parentId={parentId}
+        onItemChange={updateNode}
+        addNode={addNode}
+        removeNode={removeNode}
+        isEditionMode={isEditionMode}
+      />
+    </Grid.Column>
+  );
+};
+
+Hierarchy.propTypes = {
+  addNode: PropTypes.func,
+  hierarchy: PropTypes.object,
+  parentId: PropTypes.number,
+  updateMetadata: PropTypes.func,
+  updateNode: PropTypes.func,
+  removeNode: PropTypes.func,
+  isEditionMode: PropTypes.bool,
+};
+
+export default Hierarchy;

package/src/components/hierarchies/HierarchyCrumbs.js

@@ -0,0 +1,22 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Breadcrumb } from "semantic-ui-react";
+import { Link } from "react-router-dom";
+import { FormattedMessage } from "react-intl";
+import { HIERARCHIES } from "@truedat/core/routes";
+
+export const HierarchyCrumbs = ({ name }) => (
+  <Breadcrumb>
+    <Breadcrumb.Section as={Link} to={HIERARCHIES} active={false}>
+      <FormattedMessage id="navigation.hierarchies" />
+    </Breadcrumb.Section>
+    <Breadcrumb.Divider icon="right angle" />
+    <Breadcrumb.Section active>{name}</Breadcrumb.Section>
+  </Breadcrumb>
+);
+
+HierarchyCrumbs.propTypes = {
+  name: PropTypes.string,
+};
+
+export default HierarchyCrumbs;

package/src/components/hierarchies/HierarchyRoutes.js

@@ -0,0 +1,105 @@
+import React from "react";
+import { Route, Switch } from "react-router-dom";
+import { Unauthorized } from "@truedat/core/components";
+import { useAuthorized } from "@truedat/core/hooks";
+import { useParams } from "react-router-dom";
+import { useHistory } from "react-router-dom";
+import {
+  linkTo,
+  HIERARCHY,
+  HIERARCHY_EDIT,
+  HIERARCHY_CREATE,
+  HIERARCHIES,
+} from "@truedat/core/routes";
+import {
+  useInitialHiearchy,
+  useHierarchy,
+  useHierarchyPatch,
+  useHierarchyPost,
+  useHierarchyDelete,
+} from "../../hooks/useHierarchies";
+
+import HierarchiesView from "./HierarchiesView";
+import HierarchyView from "./HierarchyView";
+
+const HierarchyEdit = () => {
+  const history = useHistory();
+  const navigateToDetail = ({ id: id }) =>
+    history.push(linkTo.HIERARCHY({ hierarchyId: id }));
+  const { hierarchyId } = useParams();
+  const { trigger: patch } = useHierarchyPatch(hierarchyId, navigateToDetail);
+  const { data: originalHierarchy, loading } = useHierarchy(hierarchyId);
+  return originalHierarchy ? (
+    <HierarchyView
+      isEditionMode={true}
+      onSubmit={patch}
+      originalHierarchy={originalHierarchy}
+      loading={loading}
+    />
+  ) : null;
+};
+
+const HierarchyNew = () => {
+  const history = useHistory();
+  const navigateToDetail = ({ id: id }) =>
+    history.push(linkTo.HIERARCHY({ hierarchyId: id }));
+  const { trigger: post } = useHierarchyPost(navigateToDetail);
+  const { data: originalHierarchy, loading } = useInitialHiearchy();
+  return (
+    <HierarchyView
+      isEditionMode={true}
+      onSubmit={post}
+      originalHierarchy={originalHierarchy}
+      loading={loading}
+    />
+  );
+};
+
+const HierarchyDetail = () => {
+  const history = useHistory();
+  const navigateToList = () => history.push(linkTo.HIERARCHIES());
+  const { hierarchyId } = useParams();
+  const { trigger: onDelete } = useHierarchyDelete(hierarchyId, navigateToList);
+  const { data: originalHierarchy, loading } = useHierarchy(hierarchyId);
+  return originalHierarchy ? (
+    <HierarchyView
+      isEditionMode={false}
+      originalHierarchy={originalHierarchy}
+      loading={loading}
+      onDelete={onDelete}
+    />
+  ) : null;
+};
+
+export const HierarchyRoutes = () => {
+  const authorized = useAuthorized();
+  return (
+    <Route
+      path={HIERARCHIES}
+      render={() => (
+        <Switch>
+          <Route
+            exact
+            path={HIERARCHY_EDIT}
+            render={() => (authorized ? <HierarchyEdit /> : <Unauthorized />)}
+          />
+          <Route
+            exact
+            path={HIERARCHY_CREATE}
+            render={() => (authorized ? <HierarchyNew /> : <Unauthorized />)}
+          />
+          <Route
+            exact
+            path={HIERARCHY}
+            render={() => (authorized ? <HierarchyDetail /> : <Unauthorized />)}
+          />
+          <Route
+            render={() => (authorized ? <HierarchiesView /> : <Unauthorized />)}
+          />
+        </Switch>
+      )}
+    />
+  );
+};
+
+export default HierarchyRoutes;