@truedat/df 6.5.4 → 6.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/df",
-  "version": "6.5.4",
+  "version": "6.5.5",
   "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": "6.5.4",
+    "@truedat/test": "6.5.5",
     "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": "6.5.4",
-    "@truedat/core": "6.5.4",
+    "@truedat/auth": "6.5.5",
+    "@truedat/core": "6.5.5",
     "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": "ca29de8f75c143bb950bb8c9fc8a4d96c97464fb"
+  "gitHead": "b55faef0ee852d0d2282c29272d3c7cb530be45a"
 }

package/src/components/DynamicFieldValue.js

@@ -19,7 +19,6 @@ export const DynamicFieldValue = ({
   isChanged,
 }) => {
   const { formatMessage } = useIntl();
-
   return (
     <List.Item>
       <List.Header

package/src/components/widgets/HierarchyPreview.js

@@ -1,12 +1,43 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import { Label } from "semantic-ui-react";
+import {
+  Label,
+  Popup,
+  PopupContent,
+  PopupHeader,
+  List,
+  ListItem,
+} from "semantic-ui-react";
 
-export const HierarchyPreview = ({ hierarchyValue }) =>
+const createBulletedList = (path) => {
+  if (!path) return null;
+  const items = path.split("/").filter((item) => item.trim() !== "");
+
+  const bultListedItems = (index) => {
+    if (index === items.length - 2) {
+      return <ListItem>{items[index]}</ListItem>;
+    } else {
+      return (
+        <ListItem>
+          {items[index]}
+          <List.List>{bultListedItems(index + 1)}</List.List>
+        </ListItem>
+      );
+    }
+  };
+  return <List size="tiny">{bultListedItems(0)}</List>;
+};
+
+const HierarchyPreview = ({ hierarchyValue }) =>
   _.flow(
     _.reject(_.isNull),
-    _.map(({ id, name }) => <Label key={id}>{name}</Label>)
+    _.map(({ id, name, path }) => (
+      <Popup key={id} trigger={<Label content={name} />}>
+        <PopupHeader></PopupHeader>
+        <PopupContent>{createBulletedList(path)}</PopupContent>
+      </Popup>
+    ))
   )(hierarchyValue);
 
 HierarchyPreview.propTypes = {

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import HierarchyPreview from "../HierarchyPreview";
+
+describe("<HierarchyPreview />", () => {
+  const props = {
+    hierarchyValue: [
+      {
+        id: "1",
+        name: "xyz",
+        path: "/foo foo/bar/baz/xyz",
+      },
+    ],
+  };
+  it("matches the latest snapshot", () => {
+    const { container } = render(<HierarchyPreview {...props} />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("show tooltip", async () => {
+    const { getByText, debug } = render(<HierarchyPreview {...props} />);
+    userEvent.hover(await getByText("xyz"));
+    await waitFor(() => expect(getByText("baz")).toBeInTheDocument());
+    debug();
+  });
+});

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<HierarchyPreview /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui label"
+  >
+    xyz
+  </div>
+</div>
+`;