@truedat/dd 8.7.4 → 8.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "8.7.4",
+  "version": "8.8.0",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "module": "src/index.js",
@@ -51,7 +51,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.7.4",
+    "@truedat/test": "8.8.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -86,5 +86,5 @@
     "svg-pan-zoom": "^3.6.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "74bf59ddf29e05b518dc206271c4f1215d66a942"
+  "gitHead": "006b9cd6486cd37976d4dc06ede1a48e37175f30"
 }

package/src/components/StructureTabPane.js

@@ -106,8 +106,10 @@ export const StructureTabPane = ({ path }) => {
       {activeTab === "metadata" && tabVisibility.metadata && (
         <StructureMetadata />
       )}
-      {activeTab === "lineage" && <StructureLineage />}
-      {activeTab === "impact" && <StructureImpact />}
+      {activeTab === "lineage" && tabVisibility?.lineage && (
+        <StructureLineage />
+      )}
+      {activeTab === "impact" && tabVisibility?.impact && <StructureImpact />}
       {<CustomTab tabs={customTabs} activeTab={activeTab} />}
     </ErrorBoundary>
   );

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

@@ -40,21 +40,9 @@ exports[`<StructureTabPane /> renders correctly with grants tab 1`] = `
 </div>
 `;
 
-exports[`<StructureTabPane /> renders correctly with impact tab 1`] = `
-<div>
-  <div>
-    StructureImpact
-  </div>
-</div>
-`;
+exports[`<StructureTabPane /> renders correctly with impact tab 1`] = `<div />`;
 
-exports[`<StructureTabPane /> renders correctly with lineage tab 1`] = `
-<div>
-  <div>
-    StructureLineage
-  </div>
-</div>
-`;
+exports[`<StructureTabPane /> renders correctly with lineage tab 1`] = `<div />`;
 
 exports[`<StructureTabPane /> renders correctly with links tab 1`] = `
 <div>

package/src/selectors/__tests__/getBusinessConceptsLinksToStructuresColumnsSelector.spec.js

@@ -20,4 +20,26 @@ describe("selectors: getBusinessConceptsLinksToStructuresColumns", () => {
       defaultBusinessConceptsLinksToStructuresColumns.length,
     );
   });
+
+  it("should render path as text", () => {
+    const res = getBusinessConceptsLinksToStructuresColumns({});
+    const pathIndex = res.findIndex(({ name }) => name === "path");
+    const pathColumn = res[pathIndex];
+
+    expect(pathIndex).toBeGreaterThan(-1);
+    expect(pathColumn.fieldDecorator(["system", "group", "field"])).toEqual(
+      "system › group › field",
+    );
+  });
+
+  it("should style dates through a class instead of inline styles", () => {
+    const res = getBusinessConceptsLinksToStructuresColumns({});
+    const dateColumn = res.find(({ name }) => name === "updated_at");
+    const date = dateColumn.fieldDecorator("2026-06-15T10:00:00Z");
+
+    expect(date.props.className).toContain(
+      "business-concept-links__date-label",
+    );
+    expect(date.props.style).toBeUndefined();
+  });
 });

package/src/selectors/__tests__/getTabVisibility.spec.js

@@ -14,21 +14,45 @@ describe("selectors: getTabVisibility", () => {
     });
   });
 
-  it("should include lineage iff structure has in degree", () => {
+  it("should include lineage iff structure has in degree and user has view_lineage permission", () => {
     expect(
-      getTabVisibility({ structure: { degree: { in: 1 } } }),
+      getTabVisibility({
+        structure: { degree: { in: 1 } },
+        userPermissions: { view_lineage: true },
+      }),
     ).toMatchObject({ lineage: true });
     expect(
-      getTabVisibility({ structure: { degree: { in: 0 } } }),
+      getTabVisibility({
+        structure: { degree: { in: 0 } },
+        userPermissions: { view_lineage: true },
+      }),
+    ).toMatchObject({ lineage: false });
+    expect(
+      getTabVisibility({
+        structure: { degree: { in: 1 } },
+        userPermissions: { view_lineage: false },
+      }),
     ).toMatchObject({ lineage: false });
   });
 
-  it("should include impact iff structure has out degree", () => {
+  it("should include impact iff structure has out degree and user has view_lineage permission", () => {
     expect(
-      getTabVisibility({ structure: { degree: { out: 1 } } }),
+      getTabVisibility({
+        structure: { degree: { out: 1 } },
+        userPermissions: { view_lineage: true },
+      }),
     ).toMatchObject({ impact: true });
     expect(
-      getTabVisibility({ structure: { degree: { out: 0 } } }),
+      getTabVisibility({
+        structure: { degree: { out: 0 } },
+        userPermissions: { view_lineage: true },
+      }),
+    ).toMatchObject({ impact: false });
+    expect(
+      getTabVisibility({
+        structure: { degree: { out: 1 } },
+        userPermissions: { view_lineage: false },
+      }),
     ).toMatchObject({ impact: false });
   });
 
@@ -249,4 +273,60 @@ describe("selectors: getTabVisibility", () => {
       }),
     ).toMatchObject({ roles: true });
   });
+
+  describe("acceptance criteria: lineage and impact tab visibility", () => {
+    it("1a: without permission + with data -> tabs hidden", () => {
+      expect(
+        getTabVisibility({
+          structure: { degree: { in: 1, out: 1 } },
+          userPermissions: { view_lineage: false },
+        }),
+      ).toMatchObject({ lineage: false, impact: false });
+    });
+
+    it("1b: without permission + without data -> tabs hidden", () => {
+      expect(
+        getTabVisibility({
+          structure: { degree: { in: 0, out: 0 } },
+          userPermissions: { view_lineage: false },
+        }),
+      ).toMatchObject({ lineage: false, impact: false });
+    });
+
+    it("2a: with permission in dom A + data in dom A -> tabs visible", () => {
+      expect(
+        getTabVisibility({
+          structure: { degree: { in: 1, out: 1 } },
+          userPermissions: { view_lineage: true },
+        }),
+      ).toMatchObject({ lineage: true, impact: true });
+    });
+
+    it("2c: with permission in dom A + without data in dom A -> tabs hidden", () => {
+      expect(
+        getTabVisibility({
+          structure: { degree: { in: 0, out: 0 } },
+          userPermissions: { view_lineage: true },
+        }),
+      ).toMatchObject({ lineage: false, impact: false });
+    });
+
+    it("2e: with permission in dom A and B + data -> tabs visible", () => {
+      expect(
+        getTabVisibility({
+          structure: { degree: { in: 1, out: 1 } },
+          userPermissions: { view_lineage: true },
+        }),
+      ).toMatchObject({ lineage: true, impact: true });
+    });
+
+    it("2f: with permission in dom A and B + without data -> tabs hidden", () => {
+      expect(
+        getTabVisibility({
+          structure: { degree: { in: 0, out: 0 } },
+          userPermissions: { view_lineage: true },
+        }),
+      ).toMatchObject({ lineage: false, impact: false });
+    });
+  });
 });

package/src/selectors/getBusinessConceptsLinksToStructuresColumnsSelector.js

@@ -3,6 +3,7 @@ import { Link } from "react-router";
 import { createSelector } from "reselect";
 import { FormattedMessage } from "react-intl";
 import Moment from "react-moment";
+import { Icon, Label } from "semantic-ui-react";
 import { linkTo } from "@truedat/core/routes";
 
 const typeTranslateDecorator = ({ type }) => (
@@ -10,7 +11,10 @@ const typeTranslateDecorator = ({ type }) => (
 );
 
 const dateDecorator = (date) => (
-  <Moment locale="es" date={date} format="YYYY-MM-DD HH:mm" />
+  <Label className="alert info business-concept-links__date-label">
+    <Icon name="info circle" color="blue" />
+    <Moment locale="es" date={date} format="YYYY-MM-DD HH:mm" />
+  </Label>
 );
 
 const relationTypeDecorator = _.map((relationTag) => (
@@ -20,39 +24,34 @@ const relationTypeDecorator = _.map((relationTag) => (
     defaultMessage={relationTag}
   />
 ));
-const pathDecorator = (path) => (
-  <span title={_.join(" › ")(path)}>
-    {_.flow(_.join(" › "), _.truncate({ length: 90 }))(path)}{" "}
-  </span>
-);
+const pathDecorator = _.flow(_.defaultTo([]), _.join(" › "));
 
 export const defaultBusinessConceptsLinksToStructuresColumns = [
   {
     name: "name",
-    width: 2,
   },
   {
     name: "type",
     fieldSelector: _.pick(["type"]),
     fieldDecorator: typeTranslateDecorator,
-    width: 1,
   },
   {
     name: "system",
     fieldSelector: _.path("system.name"),
-    width: 1,
   },
   {
     name: "relation.relation_type_name",
     fieldSelector: _.path("tags"),
     fieldDecorator: relationTypeDecorator,
-    width: 1,
   },
-  { name: "group", width: 1 },
+  {
+    name: "path",
+    fieldDecorator: pathDecorator,
+  },
   {
     name: "updated_at",
     fieldDecorator: dateDecorator,
-    width: 1,
+    textAlign: "center",
   },
   {
     name: "relationTags.props.expandable",
@@ -71,11 +70,6 @@ export const defaultBusinessConceptsLinksToStructuresColumns = [
         </Link>
       );
     },
-    width: 1,
-  },
-  {
-    name: "path",
-    fieldDecorator: pathDecorator,
   },
 ];
 

package/src/selectors/getTabVisibility.js

@@ -50,9 +50,13 @@ const rulesTabVisible = (state) =>
   state?.structure?.implementation_count > 0 &&
   state?.userPermissions?.view_quality;
 
-const lineageTabVisible = _.anyPass([_.path("structure.degree.in")]);
+const lineageTabVisible = (state) =>
+  state?.userPermissions?.view_lineage &&
+  _.anyPass([_.path("structure.degree.in")])(state);
 
-const impactTabVisible = _.anyPass([_.path("structure.degree.out")]);
+const impactTabVisible = (state) =>
+  state?.userPermissions?.view_lineage &&
+  _.anyPass([_.path("structure.degree.out")])(state);
 
 const parentsTabVisible = _.conformsTo({ parentRelations: notEmpty });
 

package/src/styles/BusinessConceptLinks.less

@@ -0,0 +1,26 @@
+.ui.label.business-concept-links__date-label {
+  background-color: #dbeafe;
+  border-color: #bfdbfe;
+  color: #1f2937;
+  white-space: nowrap;
+}
+
+.business-concept-links__icon-popup {
+  max-width: 420px;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.business-concept-links__icon-trigger {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.ui.icon.business-concept-links__icon {
+  cursor: default;
+  margin: 0;
+  max-width: 100%;
+}