@truedat/bg 8.11.2 → 8.11.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/bg",
-  "version": "8.11.2",
+  "version": "8.11.4",
   "description": "Truedat Web Business Glossary",
   "sideEffects": [
     "**/*.css",
@@ -57,7 +57,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.11.2",
+    "@truedat/test": "8.11.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -90,5 +90,5 @@
     "semantic-ui-react": "^3.0.0-beta.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "5c0ce3c555de4c9e89021b4d0ab785ed27a87305"
+  "gitHead": "a80d09c5a9a8f88a4f20dce8a1c79a6db0d281c4"
 }

package/src/concepts/components/ConceptRoutes.js

@@ -15,8 +15,6 @@ import {
   CONCEPTS_PENDING,
   CONCEPTS_DEPRECATED,
   CONCEPTS_SUBSCOPE,
-  CONCEPTS_SIDEMENU_MANAGEMENT_LINKS,
-  CONCEPTS_SIDEMENU_MANAGEMENT_UPLOADS,
   CONCEPTS_SIDEMENU_SUBSCOPE,
   CONCEPTS_SIDEMENU_SUBSCOPE_PENDING,
   CONCEPTS_SIDEMENU_SUBSCOPE_DEPRECATED,

package/src/concepts/components/__tests__/ConceptRow.spec.js

@@ -1,7 +1,11 @@
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
 import { ConceptRow } from "../ConceptRow";
 import { getConceptColumns } from "../../selectors";
 
+jest.mock("../../../hooks/useDomains", () => ({
+  useDomains: () => ({ data: [] }),
+}));
+
 describe("<ConceptRow />", () => {
   it("matches the latest snapshot", () => {
     const columns = getConceptColumns({ conceptColumns: null }).concepts;
@@ -44,4 +48,35 @@ describe("<ConceptRow />", () => {
     const link = wrapper.getByText("foo");
     expect(link).toHaveAttribute("href", "/concepts/12/versions/42");
   });
+
+  it("renders the full domain path in the domain title", async () => {
+    const columns = getConceptColumns({ conceptColumns: null }).concepts;
+    const concept = {
+      business_concept_id: "12",
+      id: "42",
+      name: "foo",
+      status: "draft",
+      domain: { id: 122, name: "Lollipop City" },
+      domain_parents: [
+        { id: 122, name: "Lollipop City" },
+        { id: 120, name: "Happyland" },
+      ],
+    };
+    const rendered = render(
+      <table>
+        <tbody>
+          <ConceptRow concept={concept} columns={columns} />
+        </tbody>
+      </table>,
+    );
+    await waitForLoad(rendered);
+    const domain = rendered.container.querySelector(
+      'span[data-domain-path="Happyland › Lollipop City"]',
+    );
+    expect(domain).toHaveTextContent("Lollipop City");
+    expect(
+      domain.querySelector("i.domain-path-info-icon.info.circle.icon"),
+    ).not.toBeNull();
+    expect(rendered.container.querySelector("td[title]")).toBeNull();
+  });
 });

package/src/concepts/components/__tests__/__snapshots__/ConceptLinksManagement.spec.js.snap

@@ -283,7 +283,9 @@ exports[`<ConceptsLinksManagement /> matches the latest snapshot 1`] = `
                       <td
                         class=""
                       >
-                        bar
+                        <span>
+                          bar
+                        </span>
                       </td>
                       <td
                         class=""

package/src/concepts/components/__tests__/__snapshots__/ConceptsPanel.spec.js.snap

@@ -114,7 +114,9 @@ exports[`<ConceptsPanel /> matches latest snapshot 1`] = `
           <td
             class=""
           >
-            domain
+            <span>
+              domain
+            </span>
           </td>
           <td
             class="center aligned"

package/src/concepts/relations/components/ConceptSelector.js

@@ -15,6 +15,7 @@ import {
   SearchContextProvider,
   useSearchContext,
 } from "@truedat/core/search/SearchContext";
+import { DomainTooltip } from "../../../taxonomy/components/DomainPath";
 import ConceptsPagination from "../../components/ConceptsPagination";
 import { mapStatusColor } from "../../constants/mappings";
 import { translations } from "../../utils/filterOptions";
@@ -46,7 +47,10 @@ const ConceptSelectorRow = ({
   positive,
   extraColumns = [],
 }) => {
-  const { name, status, domain } = concept;
+  const { name, status, domain, domain_parents } = concept;
+  const domainWithParents = domain
+    ? { ...domain, parents: [...(domain_parents || [])].reverse() }
+    : domain;
   return (
     <Table.Row
       disabled={disabled}
@@ -55,7 +59,7 @@ const ConceptSelectorRow = ({
       positive={positive}
     >
       <Table.Cell content={name} />
-      <Table.Cell content={domain?.name} />
+      <Table.Cell content={<DomainTooltip domain={domainWithParents} />} />
       <Table.Cell
         content={
           <Label color={mapStatusColor[status]}>

package/src/concepts/relations/components/__tests__/ConceptSelector.spec.js

@@ -8,6 +8,10 @@ const concept = {
   id: 1,
   name: "foo",
   domain: { id: 1, name: "bar" },
+  domain_parents: [
+    { id: 1, name: "bar" },
+    { id: 0, name: "root" },
+  ],
   status: "draft",
   business_concept_id: 1,
   last_change_at: "2020-01-01T00:00:00.000Z",
@@ -19,6 +23,10 @@ const data = {
       id: 1,
       name: "foo",
       domain: { id: 1, name: "bar" },
+      domain_parents: [
+        { id: 1, name: "bar" },
+        { id: 0, name: "root" },
+      ],
       status: "draft",
       business_concept_id: 1,
       last_change_at: "2020-01-01T00:00:00.000Z",
@@ -65,6 +73,10 @@ jest.mock("@truedat/bg/concepts/hooks/useConcepts", () => {
 
 jest.mock("@truedat/core/hooks/useUserFilters");
 
+jest.mock("@truedat/bg/hooks/useDomains", () => ({
+  useDomains: () => ({ data: [] }),
+}));
+
 describe("<ConceptSelector />", () => {
   const handleConceptSelected = jest.fn();
 
@@ -127,6 +139,10 @@ describe("<ConceptSelectorTable />", () => {
     id: 1,
     name: "foo",
     domain: { id: 1, name: "bar" },
+    domain_parents: [
+      { id: 1, name: "bar" },
+      { id: 0, name: "root" },
+    ],
     status: "draft",
     business_concept_id: 1,
     last_change_at: "2020-01-01T00:00:00.000Z",
@@ -171,6 +187,14 @@ describe("<ConceptSelectorTable />", () => {
     expect(rendered.container).toMatchSnapshot();
   });
 
+  it("renders the domain path tooltip", async () => {
+    const rendered = render(<ConceptSelectorTable {...props} />);
+    await waitForLoad(rendered);
+    expect(
+      rendered.container.querySelector('span[data-domain-path="root › bar"]'),
+    ).toHaveTextContent("bar");
+  });
+
   test("renders Message when there are no concepts and no selectedConcept", () => {
     const rendered = render(
       <ConceptSelectorTable

package/src/concepts/relations/components/__tests__/__snapshots__/ConceptRelationForm.spec.js.snap

@@ -222,7 +222,9 @@ exports[`<ConceptRelationForm /> matches the latest snapshot 1`] = `
           <td
             class=""
           >
-            foo domain
+            <span>
+              foo domain
+            </span>
           </td>
           <td
             class=""
@@ -245,7 +247,9 @@ exports[`<ConceptRelationForm /> matches the latest snapshot 1`] = `
           <td
             class=""
           >
-            foo domain
+            <span>
+              foo domain
+            </span>
           </td>
           <td
             class=""

package/src/concepts/relations/components/__tests__/__snapshots__/ConceptSelector.spec.js.snap

@@ -184,7 +184,16 @@ exports[`<ConceptSelector /> matches the latest snapshot 1`] = `
           <td
             class=""
           >
-            bar
+            <span
+              class="domain-path-trigger"
+              data-domain-path="root › bar"
+            >
+              bar
+              <i
+                aria-label="Subdomain"
+                class="blue info circle icon domain-path-info-icon"
+              />
+            </span>
           </td>
           <td
             class=""
@@ -249,7 +258,16 @@ exports[`<ConceptSelectorTable /> matches the latest snapshot 1`] = `
         <td
           class=""
         >
-          bar
+          <span
+            class="domain-path-trigger"
+            data-domain-path="root › bar"
+          >
+            bar
+            <i
+              aria-label="Subdomain"
+              class="blue info circle icon domain-path-info-icon"
+            />
+          </span>
         </td>
         <td
           class=""

package/src/concepts/selectors/getConceptColumns.js

@@ -5,6 +5,7 @@ import { createSelector } from "reselect";
 import Moment from "react-moment";
 import { Link } from "react-router";
 import { linkTo } from "@truedat/core/routes";
+import { DomainTooltip } from "../../taxonomy/components/DomainPath";
 
 const ConceptLink = (concept) =>
   concept?.id ? (
@@ -20,6 +21,11 @@ const dateDecorator = ({ date }) => (
   <Moment locale="es" date={date} format="YYYY-MM-DD HH:mm" />
 );
 
+const domainSelector = ({ domain, domain_parents }) =>
+  domain
+    ? { ...domain, parents: [...(domain_parents || [])].reverse() }
+    : domain;
+
 export const defaultConceptColumns = [
   {
     name: "name",
@@ -31,7 +37,8 @@ export const defaultConceptColumns = [
   {
     name: "domain",
     sort: { name: "domain.name.sort" },
-    fieldSelector: _.path("domain.name"),
+    fieldSelector: domainSelector,
+    fieldDecorator: (domain) => <DomainTooltip domain={domain} />,
     width: 3,
   },
   {

package/src/taxonomy/components/DomainPath.js

@@ -0,0 +1,86 @@
+import _ from "lodash/fp";
+import PropTypes from "prop-types";
+import { Icon, Popup } from "semantic-ui-react";
+import { ascendants } from "@truedat/core/services/tree";
+import { useDomains } from "../../hooks/useDomains";
+
+export { useDomains };
+
+const domainKey = ({ id, name } = {}) =>
+  _.isNil(id) ? `name:${name}` : `id:${id}`;
+
+const uniqueDomains = (domains) => {
+  const keys = new Set();
+  return domains.filter((domain) => {
+    if (_.isEmpty(domain)) return false;
+    const key = domainKey(domain);
+    if (keys.has(key)) return false;
+    keys.add(key);
+    return true;
+  });
+};
+
+const sameDomain = (left, right) => {
+  if (!_.isNil(left?.id) && !_.isNil(right?.id)) {
+    return `${left.id}` === `${right.id}`;
+  }
+  return left?.name === right?.name;
+};
+
+const pathFromParents = (domain) => {
+  const parents = domain?.parents;
+  return _.isEmpty(parents)
+    ? []
+    : uniqueDomains([
+        ...parents.filter((parent) => !sameDomain(parent, domain)),
+        domain,
+      ]);
+};
+
+export const useDomainPath = (domain) => {
+  const { data: domains } = useDomains();
+  if (_.isEmpty(domain)) return [];
+
+  if (!_.isNil(domain.id) && !_.isEmpty(domains)) {
+    const self = domains.find(({ id }) => `${id}` === `${domain.id}`);
+    if (self) {
+      return ascendants(self.id, domains)
+        .map((id) => domains.find((item) => `${item.id}` === `${id}`))
+        .filter(Boolean);
+    }
+  }
+
+  return pathFromParents(domain);
+};
+
+export const DomainTooltip = ({ domain }) => {
+  const path = useDomainPath(domain);
+  if (_.isEmpty(domain)) return null;
+  if (path.length <= 1) return <span>{domain.name}</span>;
+
+  const content = _.flow(_.map("name"), _.join(" › "))(path);
+  return (
+    <Popup
+      className="domain-path-popup"
+      content={content}
+      trigger={
+        <span className="domain-path-trigger" data-domain-path={content}>
+          {domain.name}
+          <Icon
+            aria-label="Subdomain"
+            className="domain-path-info-icon"
+            color="blue"
+            name="info circle"
+          />
+        </span>
+      }
+      on="hover"
+      position="top center"
+      basic
+    />
+  );
+};
+
+DomainTooltip.propTypes = {
+  domain: PropTypes.object,
+};

package/src/taxonomy/components/__tests__/DomainPath.spec.js

@@ -0,0 +1,179 @@
+import { render, waitForLoad } from "@truedat/test/render";
+import { renderHook } from "@testing-library/react";
+import { useDomainPath, DomainTooltip } from "../DomainPath";
+
+const mockDomains = [
+  { id: 1, name: "Root" },
+  { id: 2, name: "Level1", parent_id: 1 },
+  { id: 3, name: "Level2", parent_id: 2 },
+];
+
+jest.mock("../../../hooks/useDomains", () => ({
+  useDomains: () => ({ data: mockDomains }),
+}));
+
+describe("useDomainPath", () => {
+  it("returns empty array for null domain", () => {
+    const { result } = renderHook(() => useDomainPath(null));
+    expect(result.current).toEqual([]);
+  });
+
+  it("returns empty array for undefined domain", () => {
+    const { result } = renderHook(() => useDomainPath(undefined));
+    expect(result.current).toEqual([]);
+  });
+
+  it("returns empty array for empty object", () => {
+    const { result } = renderHook(() => useDomainPath({}));
+    expect(result.current).toEqual([]);
+  });
+
+  it("returns path from canonical tree when domain id exists", () => {
+    const domain = { id: 3, name: "Level2" };
+    const { result } = renderHook(() => useDomainPath(domain));
+    expect(result.current).toHaveLength(3);
+    expect(result.current.map((d) => d.name)).toEqual([
+      "Root",
+      "Level1",
+      "Level2",
+    ]);
+  });
+
+  it("returns path from parents when domain id not in tree", () => {
+    const domain = {
+      id: 999,
+      name: "Unknown",
+      parents: [
+        { id: 1, name: "Root" },
+        { id: 2, name: "Level1" },
+      ],
+    };
+    const { result } = renderHook(() => useDomainPath(domain));
+    expect(result.current).toHaveLength(3);
+    expect(result.current.map((d) => d.name)).toEqual([
+      "Root",
+      "Level1",
+      "Unknown",
+    ]);
+  });
+
+  it("returns path from parents when domain has no id", () => {
+    const domain = {
+      name: "NoId",
+      parents: [
+        { id: 1, name: "Root" },
+        { id: 2, name: "Level1" },
+      ],
+    };
+    const { result } = renderHook(() => useDomainPath(domain));
+    expect(result.current).toHaveLength(3);
+    expect(result.current.map((d) => d.name)).toEqual([
+      "Root",
+      "Level1",
+      "NoId",
+    ]);
+  });
+
+  it("returns empty array when parents are empty", () => {
+    const domain = { id: 999, name: "Orphan", parents: [] };
+    const { result } = renderHook(() => useDomainPath(domain));
+    expect(result.current).toEqual([]);
+  });
+
+  it("deduplicates domains in path", () => {
+    const domain = {
+      id: 2,
+      name: "Level1",
+      parents: [
+        { id: 1, name: "Root" },
+        { id: 2, name: "Level1" },
+      ],
+    };
+    const { result } = renderHook(() => useDomainPath(domain));
+    expect(result.current).toHaveLength(2);
+    expect(result.current.map((d) => d.name)).toEqual(["Root", "Level1"]);
+  });
+});
+
+describe("DomainTooltip", () => {
+  it("returns null for null domain", async () => {
+    const rendered = render(<DomainTooltip domain={null} />);
+    await waitForLoad(rendered);
+    expect(rendered.container.firstChild).toBeNull();
+  });
+
+  it("returns null for undefined domain", async () => {
+    const rendered = render(<DomainTooltip domain={undefined} />);
+    await waitForLoad(rendered);
+    expect(rendered.container.firstChild).toBeNull();
+  });
+
+  it("returns null for empty object", async () => {
+    const rendered = render(<DomainTooltip domain={{}} />);
+    await waitForLoad(rendered);
+    expect(rendered.container.firstChild).toBeNull();
+  });
+
+  it("renders simple span when path has only one element", async () => {
+    const domain = { id: 1, name: "Root" };
+    const rendered = render(<DomainTooltip domain={domain} />);
+    await waitForLoad(rendered);
+    const span = rendered.container.querySelector("span");
+    expect(span).toHaveTextContent("Root");
+    expect(span.getAttribute("data-domain-path")).toBeNull();
+  });
+
+  it("renders Popup with full path when path has multiple elements", async () => {
+    const domain = { id: 3, name: "Level2" };
+    const rendered = render(<DomainTooltip domain={domain} />);
+    await waitForLoad(rendered);
+    const trigger = rendered.container.querySelector(
+      'span[data-domain-path="Root › Level1 › Level2"]',
+    );
+    expect(trigger).not.toBeNull();
+    expect(trigger).toHaveTextContent("Level2");
+    expect(
+      trigger.querySelector("i.domain-path-info-icon.info.circle.icon"),
+    ).not.toBeNull();
+  });
+
+  it("renders Popup with path from parents when domain not in tree", async () => {
+    const domain = {
+      id: 999,
+      name: "Unknown",
+      parents: [
+        { id: 1, name: "Root" },
+        { id: 2, name: "Level1" },
+      ],
+    };
+    const rendered = render(<DomainTooltip domain={domain} />);
+    await waitForLoad(rendered);
+    const trigger = rendered.container.querySelector(
+      'span[data-domain-path="Root › Level1 › Unknown"]',
+    );
+    expect(trigger).not.toBeNull();
+    expect(trigger).toHaveTextContent("Unknown");
+  });
+
+  describe("snapshots", () => {
+    it("matches snapshot for null domain", async () => {
+      const rendered = render(<DomainTooltip domain={null} />);
+      await waitForLoad(rendered);
+      expect(rendered.container).toMatchSnapshot();
+    });
+
+    it("matches snapshot for single element path", async () => {
+      const domain = { id: 1, name: "Root" };
+      const rendered = render(<DomainTooltip domain={domain} />);
+      await waitForLoad(rendered);
+      expect(rendered.container).toMatchSnapshot();
+    });
+
+    it("matches snapshot for multi-element path", async () => {
+      const domain = { id: 3, name: "Level2" };
+      const rendered = render(<DomainTooltip domain={domain} />);
+      await waitForLoad(rendered);
+      expect(rendered.container).toMatchSnapshot();
+    });
+  });
+});

package/src/taxonomy/components/__tests__/__snapshots__/DomainPath.spec.js.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DomainTooltip snapshots matches snapshot for multi-element path 1`] = `
+<div>
+  <span
+    class="domain-path-trigger"
+    data-domain-path="Root › Level1 › Level2"
+  >
+    Level2
+    <i
+      aria-label="Subdomain"
+      class="blue info circle icon domain-path-info-icon"
+    />
+  </span>
+</div>
+`;
+
+exports[`DomainTooltip snapshots matches snapshot for null domain 1`] = `<div />`;
+
+exports[`DomainTooltip snapshots matches snapshot for single element path 1`] = `
+<div>
+  <span>
+    Root
+  </span>
+</div>
+`;

package/src/taxonomy/styles/DomainPath.less

@@ -0,0 +1,25 @@
+.ui.popup.domain-path-popup {
+  --domain-path-bg: #1f1f1f;
+  --domain-path-glow: rgba(255, 255, 255, 0.35);
+
+  max-width: none !important;
+  width: max-content;
+  white-space: nowrap !important;
+  padding: 0.6em 1em !important;
+  background: var(--domain-path-bg) !important;
+  color: #fff !important;
+  border-radius: 10px !important;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
+}
+
+.ui.popup.domain-path-popup::before {
+  border-color: var(--domain-path-bg) transparent transparent !important;
+}
+
+.domain-path-trigger:hover {
+  text-shadow: 0 0 8px var(--domain-path-glow);
+}
+
+.domain-path-trigger .domain-path-info-icon {
+  margin-left: 0.4em;
+}