@truedat/dd 8.7.4 → 8.7.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "8.7.4",
+  "version": "8.7.5",
   "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.7.5",
     "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": "c6330f05c6d7eb7b601ff861385deedb257efc3d"
 }

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/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/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%;
+}