@truedat/dd 4.54.9 → 4.54.11

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [4.54.11] 2022-11-14
+
+### Added
+
+- [TD-5038] Links between structures tab
+
+## [4.54.10] 2022-11-10
+
+### Added
+
+- [TD-5037] Highlights fields changes in structure notes
+
 ## [4.54.8] 2022-10-28
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "4.54.9",
+  "version": "4.54.11",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.54.9",
+    "@truedat/test": "4.54.11",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -88,9 +88,9 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.0",
-    "@truedat/auth": "4.54.9",
-    "@truedat/core": "4.54.9",
-    "@truedat/df": "4.54.9",
+    "@truedat/auth": "4.54.11",
+    "@truedat/core": "4.54.11",
+    "@truedat/df": "4.54.11",
     "lodash": "^4.17.21",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.8.1",
@@ -112,5 +112,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "27f711249723050708a6f6f4de3ab5029069c4d7"
+  "gitHead": "72603ee10a5ad665f0c742e33a6014de94c4ba53"
 }

package/src/api/queries.js

@@ -119,3 +119,48 @@ export const STRUCTURE_NOTES_QUERY = gql`
     }
   }
 `;
+
+export const STRUCTURE_STRUCTURE_LINKS_QUERY = gql`
+  query DataStructureLinks($id: ID!) {
+    dataStructure(id: $id) {
+      id
+      dataStructureLinks {
+        labels {
+          name
+        }
+        source {
+          id
+          currentVersion {
+            name
+            pathWithIds {
+              data_structure_id
+              name
+            }
+          }
+          system {
+            id
+            name
+          }
+        }
+        target {
+          id
+          currentVersion {
+            name
+            pathWithIds {
+              data_structure_id
+              name
+            }
+          }
+          system {
+            id
+            name
+          }
+        }
+      }
+      currentVersion {
+        id
+        name
+      }
+    }
+  }
+`;

package/src/components/StructureCrumbs.js

@@ -30,7 +30,7 @@ export const SystemCrumb = ({ id, name }) => (
 );
 
 SystemCrumb.propTypes = {
-  id: PropTypes.number,
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   name: PropTypes.string,
 };
 
@@ -44,31 +44,24 @@ export const AncestorCrumb = ({ name, id }) => (
 );
 
 AncestorCrumb.propTypes = {
-  id: PropTypes.number,
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   name: PropTypes.string,
 };
 
-export const StructureCrumb = ({ name, id, version }) =>
-  _.isNil(version) ? (
-    <Breadcrumb.Section active content={name} />
+export const StructureCrumb = ({ name, id, isStructureCrumbActive }) => {
+  return isStructureCrumbActive ? (
+    <Breadcrumb.Section as={Link} to={linkTo.STRUCTURE({ id })} active>
+      {name}
+    </Breadcrumb.Section>
   ) : (
-    <>
-      <Breadcrumb.Section
-        as={Link}
-        to={linkTo.STRUCTURE({ id })}
-        active={false}
-      >
-        {name}
-      </Breadcrumb.Section>
-      <Breadcrumb.Divider icon="right angle" />
-    </>
+    <Breadcrumb.Section active content={name} />
   );
+};
 
 StructureCrumb.propTypes = {
-  id: PropTypes.number,
-  alias: PropTypes.string,
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   name: PropTypes.string,
-  version: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  isStructureCrumbActive: PropTypes.bool,
 };
 
 export const VersionCrumb = ({ version }) => (
@@ -88,6 +81,7 @@ export const StructureCrumbs = ({
   alias,
   name,
   version,
+  isStructureCrumbActive,
 }) =>
   name ? (
     <Breadcrumb>
@@ -106,6 +100,7 @@ export const StructureCrumbs = ({
         name={_.defaultTo(name)(alias)}
         id={id}
         version={version}
+        isStructureCrumbActive={isStructureCrumbActive}
       />
       {_.isNil(version) ? null : <VersionCrumb id={id} version={version} />}
     </Breadcrumb>
@@ -113,12 +108,13 @@ export const StructureCrumbs = ({
 
 StructureCrumbs.propTypes = {
   ancestry: PropTypes.array,
-  id: PropTypes.number,
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   name: PropTypes.string,
   alias: PropTypes.string,
   field: PropTypes.object,
   system: PropTypes.object,
   version: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  isStructureCrumbActive: PropTypes.bool,
 };
 
 const mapStateToProps = ({

package/src/components/StructureNotes.js

@@ -77,6 +77,7 @@ const StructureNote = ({ structureNote, template, structure, notesSize }) => {
         <DynamicFormViewer
           template={template}
           content={structureNote.df_content}
+          diff={structureNote._diff}
         />
       )}
     </Segment>

package/src/components/StructureStructureLinks.js

@@ -0,0 +1,167 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { FormattedMessage } from "react-intl";
+import { Table, Grid } from "semantic-ui-react";
+import { columnDecorator } from "@truedat/core/services";
+import { Loading } from "@truedat/core/components";
+import { useQuery } from "@apollo/client";
+import { useParams } from "react-router-dom";
+import { StructureCrumbs } from "../components/StructureCrumbs";
+import { STRUCTURE_STRUCTURE_LINKS_QUERY } from "../api/queries";
+
+// An arrow with labels
+export const Edge = ({ structureId, structureLink }) => (
+  <svg
+    viewBox="0 0 100 10"
+    xmlns="http://www.w3.org/2000/svg"
+    width="200"
+    height="40"
+  >
+    <defs>
+      <marker
+        id="arrow"
+        markerWidth="6"
+        markerHeight="5"
+        refX="0"
+        refY="2"
+        orient="auto"
+        markerUnits="strokeWidth"
+      >
+        <path d="M0,0 L0,4 L5,2 z" fill="#7d6060" />
+      </marker>
+    </defs>
+    <path
+      id="p0"
+      markerEnd="url(#arrow)"
+      fill="none"
+      d={
+        structureId === structureLink?.source.id
+          ? "M 0,10 h 90"
+          : structureId === structureLink?.target.id
+          ? "M 95,10 h -90"
+          : ""
+      }
+      strokeWidth="1"
+      stroke="#871f1f"
+    />
+    <path id="path-for-text" fill="none" d="M 0,4 h 90" />
+    <text fontSize="8">
+      <textPath
+        startOffset="50%"
+        y="10%"
+        textAnchor="middle"
+        dominantBaseline="middle"
+        href="#path-for-text"
+      >
+        {_.flow(
+          _.map((label) => label?.name),
+          _.join(", ")
+        )(structureLink?.labels)}
+      </textPath>
+    </text>
+  </svg>
+);
+
+Edge.propTypes = {
+  structureId: PropTypes.string,
+  structureLink: PropTypes.object,
+};
+
+export const StructureStructureLinks = ({
+  structureId,
+  currentVersion,
+  structureLinks,
+}) => {
+  const columns = [
+    {
+      header: "structureLink.currentStructure",
+      fieldSelector: () => currentVersion.name,
+    },
+    {
+      header: "structureLink.label",
+      fieldSelector: (structureLink) => Edge({ structureId, structureLink }),
+    },
+    {
+      header: "structureLink.relatedStructure",
+      fieldSelector: (structureLink) =>
+        _.flow(
+          () =>
+            structureId !== structureLink?.source.id
+              ? structureLink.source
+              : structureId !== structureLink?.target.id
+              ? structureLink.target
+              : null,
+          (relatedStructure) => (
+            <StructureCrumbs
+              {...{
+                id: relatedStructure?.id,
+                name: relatedStructure?.currentVersion.name,
+                system: relatedStructure?.system,
+                ancestry: relatedStructure?.currentVersion.pathWithIds,
+                isStructureCrumbActive: true,
+              }}
+            />
+          )
+        )(structureId, structureLink),
+    },
+  ];
+
+  const headerRow = columns.map(({ header }, key) => (
+    <Table.HeaderCell
+      key={key}
+      content={header ? <FormattedMessage id={header} /> : null}
+    />
+  ));
+
+  const renderBodyRow = (structureLink) => (
+    <Table.Row key={`${structureLink.source.id}_${structureLink.target.id}`}>
+      {columns.map((column, i) => (
+        <Table.Cell
+          key={i}
+          textAlign={_.prop("textAlign")(column)}
+          content={columnDecorator(column)(structureLink)}
+        />
+      ))}
+    </Table.Row>
+  );
+
+  return (
+    <Grid>
+      {!_.isEmpty(structureLinks) && (
+        <Grid.Column width={16}>
+          <Table
+            headerRow={headerRow}
+            renderBodyRow={renderBodyRow}
+            tableData={structureLinks}
+          />
+        </Grid.Column>
+      )}
+    </Grid>
+  );
+};
+
+StructureStructureLinks.propTypes = {
+  structureId: PropTypes.string,
+  currentVersion: PropTypes.object,
+  structureLinks: PropTypes.array,
+};
+
+export const StructuresStructureLinksLoader = () => {
+  const { id } = useParams();
+  const { loading, error, data } = useQuery(STRUCTURE_STRUCTURE_LINKS_QUERY, {
+    fetchPolicy: "cache-and-network",
+    variables: { id },
+  });
+  if (error) return null;
+  if (loading) return <Loading />;
+  return (
+    <StructureStructureLinks
+      structureId={data?.dataStructure?.id}
+      structureLinks={data?.dataStructure?.dataStructureLinks}
+      currentVersion={data?.dataStructure?.currentVersion}
+    />
+  );
+};
+
+export default StructuresStructureLinksLoader;

package/src/components/StructureTabPane.js

@@ -21,6 +21,7 @@ import StructureParentRelations from "./StructureParentRelations";
 import StructureVersions from "./StructureVersions";
 import StructureMetadata from "./StructureMetadata";
 import StructureNotesLoader from "./StructureNotesLoader";
+import StructureStructureLinks from "./StructureStructureLinks";
 
 const StructureLinks = React.lazy(() =>
   import("@truedat/lm/components/StructureLinks")
@@ -36,46 +37,49 @@ const RuleImplementationsTable = React.lazy(() =>
   import("@truedat/dq/components/RuleImplementationsTable")
 );
 
-export const StructureTabPane = ({ activeTab, tabVisibility }) => (
-  <ErrorBoundary>
-    {activeTab === "fields" && <StructureFields />}
-    {activeTab === "notes" && (
-      <>
-        <StructureNotesLoader scope="dd" />
+export const StructureTabPane = ({ activeTab, tabVisibility }) => {
+  return (
+    <ErrorBoundary>
+      {activeTab === "fields" && <StructureFields />}
+      {activeTab === "notes" && (
+        <>
+          <StructureNotesLoader scope="dd" />
+          <Switch>
+            <Route
+              path={STRUCTURE_NOTES_EDIT}
+              render={() => <StructureNotesEdit />}
+            />
+            <Route render={() => <StructureNotes />} />
+          </Switch>
+        </>
+      )}
+      {activeTab === "grants" && tabVisibility.grants && <StructureGrants />}
+      {activeTab === "links" && (
         <Switch>
           <Route
-            path={STRUCTURE_NOTES_EDIT}
-            render={() => <StructureNotesEdit />}
+            path={STRUCTURE_LINKS_NEW}
+            render={() => <StructureRelationForm />}
           />
-          <Route render={() => <StructureNotes />} />
+          <Route render={() => <StructureLinks />} />
         </Switch>
-      </>
-    )}
-    {activeTab === "grants" && tabVisibility.grants && <StructureGrants />}
-    {activeTab === "links" && (
-      <Switch>
-        <Route
-          path={STRUCTURE_LINKS_NEW}
-          render={() => <StructureRelationForm />}
-        />
-        <Route render={() => <StructureLinks />} />
-      </Switch>
-    )}
-    {activeTab === "profile" && tabVisibility.profile && <StructureProfile />}
-    {activeTab === "parents" && <StructureParentRelations />}
-    {activeTab === "children" && <StructureChildrenRelations />}
-    {activeTab === "versions" && <StructureVersions />}
-    {activeTab === "events" && <StructureEvents />}
-    {activeTab === "rules" && tabVisibility.rules && (
-      <RuleImplementationsTable withoutColumns={["status"]} />
-    )}
-    {activeTab === "metadata" && tabVisibility.metadata && (
-      <StructureMetadata />
-    )}
-    {activeTab === "lineage" && <StructureLineage />}
-    {activeTab === "impact" && <StructureImpact />}
-  </ErrorBoundary>
-);
+      )}
+      {activeTab === "structureLinks" && <StructureStructureLinks />}
+      {activeTab === "profile" && tabVisibility.profile && <StructureProfile />}
+      {activeTab === "parents" && <StructureParentRelations />}
+      {activeTab === "children" && <StructureChildrenRelations />}
+      {activeTab === "versions" && <StructureVersions />}
+      {activeTab === "events" && <StructureEvents />}
+      {activeTab === "rules" && tabVisibility.rules && (
+        <RuleImplementationsTable withoutColumns={["status"]} />
+      )}
+      {activeTab === "metadata" && tabVisibility.metadata && (
+        <StructureMetadata />
+      )}
+      {activeTab === "lineage" && <StructureLineage />}
+      {activeTab === "impact" && <StructureImpact />}
+    </ErrorBoundary>
+  );
+};
 
 StructureTabPane.propTypes = {
   activeTab: PropTypes.string,

package/src/components/StructureTabPaneRoutes.js

@@ -7,6 +7,7 @@ import {
   STRUCTURE_GRANTS,
   STRUCTURE_IMPACT,
   STRUCTURE_LINEAGE,
+  STRUCTURE_LINKED_STRUCTURES,
   STRUCTURE_LINKS,
   STRUCTURE_METADATA,
   STRUCTURE_NOTES,
@@ -24,6 +25,7 @@ export const StructureTabPaneRoutes = ({}) => (
     <Route path={STRUCTURE_VERSION_VERSIONS} component={StructureTabPane} />
     <Route path={STRUCTURE_VERSION} component={StructureTabPane} />
     <Route path={STRUCTURE_PROFILE} component={StructureTabPane} />
+    <Route path={STRUCTURE_LINKED_STRUCTURES} component={StructureTabPane} />
     <Route path={STRUCTURE_LINKS} component={StructureTabPane} />
     <Route path={STRUCTURE_VERSIONS} component={StructureTabPane} />
     <Route path={STRUCTURE_EVENTS} component={StructureTabPane} />

package/src/components/StructureTabRoutes.js

@@ -8,6 +8,7 @@ import {
   STRUCTURE_IMPACT,
   STRUCTURE_LINEAGE,
   STRUCTURE_LINKS,
+  STRUCTURE_LINKED_STRUCTURES,
   STRUCTURE_NOTES,
   STRUCTURE_PARENTS,
   STRUCTURE_PROFILE,
@@ -25,6 +26,7 @@ export const StructureTabRoutes = () => (
     <Route path={STRUCTURE_VERSION} component={StructureTabs} />
     <Route path={STRUCTURE_PROFILE} component={StructureTabs} />
     <Route path={STRUCTURE_LINKS} component={StructureTabs} />
+    <Route path={STRUCTURE_LINKED_STRUCTURES} component={StructureTabs} />
     <Route path={STRUCTURE_VERSIONS} component={StructureTabs} />
     <Route path={STRUCTURE_EVENTS} component={StructureTabs} />
     <Route path={STRUCTURE_METADATA} component={StructureTabs} />

package/src/components/StructureTabs.js

@@ -30,6 +30,7 @@ export const StructureTabs = ({
     impact,
     lineage,
     links,
+    structureLinks,
     metadata,
     notes,
     parents,
@@ -105,6 +106,15 @@ export const StructureTabs = ({
       content: links ? formatMessage({ id: "tabs.dd.links" }) : false,
       key: "links",
     },
+    {
+      active: activeTab === "structureLinks",
+      as: Link,
+      to: linkTo.STRUCTURE_LINKED_STRUCTURES(structure),
+      content: structureLinks
+        ? formatMessage({ id: "tabs.dd.structureLinks" })
+        : false,
+      key: "structureLinks",
+    },
     {
       active: activeTab === "lineage",
       as: Link,

package/src/components/__tests__/StructureNotes.spec.js

@@ -47,4 +47,63 @@ describe("<StructureNotes />", () => {
 
     expect(container).toMatchSnapshot();
   });
+
+  it("matches the latest snapshot with draft structure note", async () => {
+    const props = {
+      structure: { id: 1 },
+      structureNotes: { _actions: { foo: "bar" }, loading: false },
+      activeStructureNotes: [
+        {
+          id: 3,
+          status: "draft",
+          df_content: { foo: "xyz" },
+          version: "3",
+          _diff: ["foo"],
+        },
+        {
+          id: 2,
+          status: "published",
+          df_content: { foo: "bar" },
+          version: "2",
+        },
+      ],
+      versionedStructureNotes: [
+        {
+          id: 1,
+          status: "versioned",
+          df_content: { foo: "bar1" },
+          version: "1",
+        },
+      ],
+      template: {
+        id: 2,
+        content: [
+          {
+            fields: [
+              {
+                cardinality: "?",
+                default: "",
+                label: "foo",
+                name: "foo",
+                type: "string",
+                values: null,
+                widget: "text",
+                value: "foo value",
+                required: false,
+              },
+            ],
+            name: "foo group",
+          },
+        ],
+        scope: "dd",
+      },
+      doStructureNoteAction: () => {},
+    };
+    const { findByText, container } = render(<StructureNotes {...props} />);
+    expect(container).toMatchSnapshot();
+
+    userEvent.click(await findByText("Show content"));
+
+    expect(container).toMatchSnapshot();
+  });
 });

package/src/components/__tests__/StructureStructureLinks.spec.js

@@ -0,0 +1,161 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
+import { useParams } from "react-router-dom";
+import { STRUCTURE_STRUCTURE_LINKS_QUERY } from "../../api/queries";
+import StructureStructureLinks from "../StructureStructureLinks";
+
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useParams: jest.fn(),
+}));
+
+const dataStructureWithLinks = {
+  currentVersion: {
+    id: "212416",
+    name: "CMESANO",
+  },
+  dataStructureLinks: [
+    {
+      labels: [
+        {
+          name: "copy",
+        },
+      ],
+      source: {
+        currentVersion: {
+          name: "CMESANO",
+          pathWithIds: [
+            {
+              data_structure_id: "114207",
+              name: "SRV_DS2P.PRO.SANTALUCIA.ES",
+            },
+            {
+              data_structure_id: "58050",
+              name: "SIISDS2",
+            },
+            {
+              data_structure_id: "58045",
+              name: "INPAHEM_SINIEPAGO",
+            },
+          ],
+        },
+        id: "60217",
+        system: {
+          id: "2",
+          name: "Oracle producción solvencia",
+        },
+      },
+      target: {
+        currentVersion: {
+          name: "NIDSINIE",
+          pathWithIds: [
+            {
+              data_structure_id: "114207",
+              name: "SRV_DS2P.PRO.SANTALUCIA.ES",
+            },
+            {
+              data_structure_id: "58050",
+              name: "SIISDS2",
+            },
+            {
+              data_structure_id: "58045",
+              name: "INPAHEM_SINIEPAGO",
+            },
+          ],
+        },
+        id: "60218",
+        system: {
+          id: "2",
+          name: "Oracle producción solvencia",
+        },
+      },
+    },
+    {
+      labels: [
+        {
+          name: "label_1_1",
+        },
+        {
+          name: "label_1_2",
+        },
+      ],
+      source: {
+        currentVersion: {
+          name: "ivalindm",
+          pathWithIds: [
+            {
+              data_structure_id: "147587",
+              name: "bdrs",
+            },
+            {
+              data_structure_id: "151648",
+              name: "inpahem_siniepago",
+            },
+          ],
+        },
+        id: "151674",
+        system: {
+          id: "11",
+          name: "Azure Databricks",
+        },
+      },
+      target: {
+        currentVersion: {
+          name: "CMESANO",
+          pathWithIds: [
+            {
+              data_structure_id: "114207",
+              name: "SRV_DS2P.PRO.SANTALUCIA.ES",
+            },
+            {
+              data_structure_id: "58050",
+              name: "SIISDS2",
+            },
+            {
+              data_structure_id: "58045",
+              name: "INPAHEM_SINIEPAGO",
+            },
+          ],
+        },
+        id: "60217",
+        system: {
+          id: "2",
+          name: "Oracle producción solvencia",
+        },
+      },
+    },
+  ],
+  id: "60217",
+};
+
+const linksMock = {
+  request: {
+    query: STRUCTURE_STRUCTURE_LINKS_QUERY,
+    variables: { id: 60217 },
+  },
+  result: { data: { dataStructure: dataStructureWithLinks } },
+};
+
+describe("<StructureStructureLinks />", () => {
+  const props = { dataStructureWithLinks };
+
+  it("matches the latest snapshot", async () => {
+    const renderOpts = {
+      routes: ["/structures/60217/structureLinks"],
+      mocks: [linksMock],
+    };
+    useParams.mockImplementation(() => ({
+      id: 60217,
+    }));
+    const { container, findByText, getByRole, queryByText, debug } = render(
+      <StructureStructureLinks {...props} />,
+      renderOpts
+    );
+    await waitFor(() => {
+      expect(getByRole("link", { name: /NIDSINIE/i })).toBeInTheDocument();
+      expect(getByRole("link", { name: /ivalindm/i })).toBeInTheDocument();
+    });
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -143,3 +143,140 @@ exports[`<StructureNotes /> matches the latest snapshot 3`] = `
   </div>
 </div>
 `;
+
+exports[`<StructureNotes /> matches the latest snapshot with draft structure note 1`] = `
+<div>
+  <div
+    class="ui bottom attached segment"
+  >
+    <div
+      class="ui segment"
+    >
+      <div
+        style="display: flex; justify-content: space-between; align-items: center;"
+      >
+        <div>
+          <div
+            class="ui label basic"
+          >
+            Draft
+          </div>
+          <div
+            class="ui label basic"
+          >
+            Version: 3
+          </div>
+        </div>
+        <div>
+          <button
+            class="ui button"
+          >
+            Show content
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ui segment"
+    >
+      <div
+        style="display: flex; justify-content: space-between; align-items: center;"
+      >
+        <div>
+          <div
+            class="ui label basic"
+          >
+            Published
+          </div>
+          <div
+            class="ui label basic"
+          >
+            Version: 2
+          </div>
+        </div>
+        <div />
+      </div>
+      <div>
+        DynamicFormViewer
+      </div>
+    </div>
+    <div>
+      <button
+        class="ui button"
+      >
+        Show previous versions
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<StructureNotes /> matches the latest snapshot with draft structure note 2`] = `
+<div>
+  <div
+    class="ui bottom attached segment"
+  >
+    <div
+      class="ui segment"
+    >
+      <div
+        style="display: flex; justify-content: space-between; align-items: center;"
+      >
+        <div>
+          <div
+            class="ui label basic"
+          >
+            Draft
+          </div>
+          <div
+            class="ui label basic"
+          >
+            Version: 3
+          </div>
+        </div>
+        <div>
+          <button
+            class="ui button"
+          >
+            Hide content
+          </button>
+        </div>
+      </div>
+      <div>
+        DynamicFormViewer
+      </div>
+    </div>
+    <div
+      class="ui segment"
+    >
+      <div
+        style="display: flex; justify-content: space-between; align-items: center;"
+      >
+        <div>
+          <div
+            class="ui label basic"
+          >
+            Published
+          </div>
+          <div
+            class="ui label basic"
+          >
+            Version: 2
+          </div>
+        </div>
+        <div />
+      </div>
+      <div>
+        DynamicFormViewer
+      </div>
+    </div>
+    <div>
+      <button
+        class="ui button"
+      >
+        Show previous versions
+      </button>
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,287 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<StructureStructureLinks /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui grid"
+  >
+    <div
+      class="sixteen wide column"
+    >
+      <table
+        class="ui table"
+      >
+        <thead
+          class=""
+        >
+          <tr
+            class=""
+          >
+            <th
+              class=""
+            >
+              Current structure
+            </th>
+            <th
+              class=""
+            >
+              Relation label
+            </th>
+            <th
+              class=""
+            >
+              Related structure
+            </th>
+          </tr>
+        </thead>
+        <tbody
+          class=""
+        >
+          <tr
+            class=""
+          >
+            <td
+              class=""
+            >
+              CMESANO
+            </td>
+            <td
+              class=""
+            >
+              <svg
+                height="40"
+                viewBox="0 0 100 10"
+                width="200"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <defs>
+                  <marker
+                    id="arrow"
+                    markerHeight="5"
+                    markerUnits="strokeWidth"
+                    markerWidth="6"
+                    orient="auto"
+                    refX="0"
+                    refY="2"
+                  >
+                    <path
+                      d="M0,0 L0,4 L5,2 z"
+                      fill="#7d6060"
+                    />
+                  </marker>
+                </defs>
+                <path
+                  d="M 0,10 h 90"
+                  fill="none"
+                  id="p0"
+                  marker-end="url(#arrow)"
+                  stroke="#871f1f"
+                  stroke-width="1"
+                />
+                <path
+                  d="M 0,4 h 90"
+                  fill="none"
+                  id="path-for-text"
+                />
+                <text
+                  font-size="8"
+                >
+                  <textpath
+                    dominant-baseline="middle"
+                    href="#path-for-text"
+                    startOffset="50%"
+                    text-anchor="middle"
+                    y="10%"
+                  >
+                    copy
+                  </textpath>
+                </text>
+              </svg>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class="ui breadcrumb"
+              >
+                <a
+                  class="section"
+                  href="/structures"
+                >
+                  Structures
+                </a>
+                <i
+                  aria-hidden="true"
+                  class="right angle icon divider"
+                />
+                <a
+                  class="section"
+                  href="/systems/2/structures"
+                >
+                  Oracle producción solvencia
+                </a>
+                <i
+                  aria-hidden="true"
+                  class="right angle icon divider"
+                />
+                <a
+                  class="section"
+                  href="/structures/114207"
+                >
+                  SRV_DS2P.PRO.SANTALUCIA.ES
+                </a>
+                <i
+                  aria-hidden="true"
+                  class="right angle icon divider"
+                />
+                <a
+                  class="section"
+                  href="/structures/58050"
+                >
+                  SIISDS2
+                </a>
+                <i
+                  aria-hidden="true"
+                  class="right angle icon divider"
+                />
+                <a
+                  class="section"
+                  href="/structures/58045"
+                >
+                  INPAHEM_SINIEPAGO
+                </a>
+                <i
+                  aria-hidden="true"
+                  class="right angle icon divider"
+                />
+                <a
+                  class="active section"
+                  href="/structures/60218"
+                >
+                  NIDSINIE
+                </a>
+              </div>
+            </td>
+          </tr>
+          <tr
+            class=""
+          >
+            <td
+              class=""
+            >
+              CMESANO
+            </td>
+            <td
+              class=""
+            >
+              <svg
+                height="40"
+                viewBox="0 0 100 10"
+                width="200"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <defs>
+                  <marker
+                    id="arrow"
+                    markerHeight="5"
+                    markerUnits="strokeWidth"
+                    markerWidth="6"
+                    orient="auto"
+                    refX="0"
+                    refY="2"
+                  >
+                    <path
+                      d="M0,0 L0,4 L5,2 z"
+                      fill="#7d6060"
+                    />
+                  </marker>
+                </defs>
+                <path
+                  d="M 95,10 h -90"
+                  fill="none"
+                  id="p0"
+                  marker-end="url(#arrow)"
+                  stroke="#871f1f"
+                  stroke-width="1"
+                />
+                <path
+                  d="M 0,4 h 90"
+                  fill="none"
+                  id="path-for-text"
+                />
+                <text
+                  font-size="8"
+                >
+                  <textpath
+                    dominant-baseline="middle"
+                    href="#path-for-text"
+                    startOffset="50%"
+                    text-anchor="middle"
+                    y="10%"
+                  >
+                    label_1_1, label_1_2
+                  </textpath>
+                </text>
+              </svg>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class="ui breadcrumb"
+              >
+                <a
+                  class="section"
+                  href="/structures"
+                >
+                  Structures
+                </a>
+                <i
+                  aria-hidden="true"
+                  class="right angle icon divider"
+                />
+                <a
+                  class="section"
+                  href="/systems/11/structures"
+                >
+                  Azure Databricks
+                </a>
+                <i
+                  aria-hidden="true"
+                  class="right angle icon divider"
+                />
+                <a
+                  class="section"
+                  href="/structures/147587"
+                >
+                  bdrs
+                </a>
+                <i
+                  aria-hidden="true"
+                  class="right angle icon divider"
+                />
+                <a
+                  class="section"
+                  href="/structures/151648"
+                >
+                  inpahem_siniepago
+                </a>
+                <i
+                  aria-hidden="true"
+                  class="right angle icon divider"
+                />
+                <a
+                  class="active section"
+                  href="/structures/151674"
+                >
+                  ivalindm
+                </a>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;

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

@@ -18,6 +18,10 @@ exports[`<StructureTabRoutes /> matches the latest snapshot 1`] = `
     component={[Function]}
     path="/structures/:id/links"
   />
+  <Route
+    component={[Function]}
+    path="/structures/:id/structureLinks"
+  />
   <Route
     component={[Function]}
     path="/structures/:id/versions"

package/src/components/index.js

@@ -17,6 +17,7 @@ import StructureFilters from "./StructureFilters";
 import StructureFiltersLoader from "./StructureFiltersLoader";
 import StructureItem from "./StructureItem";
 import StructureItemRoot from "./StructureItemRoot";
+import StructureStructureLinks from "./StructureStructureLinks";
 import StructureLoader from "./StructureLoader";
 import StructureNav from "./StructureNav";
 import StructureNotes from "./StructureNotes";
@@ -70,6 +71,7 @@ export {
   StructureFiltersLoader,
   StructureItem,
   StructureItemRoot,
+  StructureStructureLinks,
   StructureLoader,
   StructureNav,
   StructureNotes,

package/src/messages/en.js

@@ -371,6 +371,9 @@ export default {
   "structure.version.version": "Version {version}",
   "structureDomain.actions.update": "Update",
   "structureDomain.actions.update.inherit": "Apply on children",
+  "structureLink.currentStructure": "Current structure",
+  "structureLink.label": "Relation label",
+  "structureLink.relatedStructure": "Related structure",
   "structureSelector.union.criteria": "Union criteria",
   "structureSelector.union.type": "Union type",
   "structureTag.comment": "Comments",
@@ -551,6 +554,7 @@ export default {
   "tabs.dd.impact": "Impact",
   "tabs.dd.lineage": "Lineage",
   "tabs.dd.links": "Linkage",
+  "tabs.dd.structureLinks": "Linked structures",
   "tabs.dd.metadata": "Metadata",
   "tabs.dd.parents": "Parents",
   "tabs.dd.profile": "Profiling",

package/src/messages/es.js

@@ -379,6 +379,9 @@ export default {
   "structure.version.version": "Versión {version}",
   "structureDomain.actions.update": "Actualizar",
   "structureDomain.actions.update.inherit": "Aplicar en hijos",
+  "structureLink.currentStructure": "Estructura actual",
+  "structureLink.label": "Etiqueta de relación",
+  "structureLink.relatedStructure": "Estructura relacionada",
   "structureSelector.union.criteria": "Criterio de unión",
   "structureSelector.union.type": "Tipo de unión",
   "structureTag.comment": "Comentario",
@@ -567,6 +570,7 @@ export default {
   "tabs.dd.impact": "Impacto",
   "tabs.dd.lineage": "Linaje",
   "tabs.dd.links": "Vinculación",
+  "tabs.dd.structureLinks": "Vinculación estructuras",
   "tabs.dd.metadata": "Metadata",
   "tabs.dd.parents": "Padres",
   "tabs.dd.profile": "Perfilado",

package/src/reducers/__tests__/structureNotes.spec.js

@@ -7,7 +7,7 @@ describe("reducers: structureNotes", () => {
   const initialState = {
     structureNotes: [],
     _actions: {},
-    loading: false
+    loading: false,
   };
 
   it("should provide the initial state", () => {

package/src/reducers/structure.js

@@ -21,6 +21,7 @@ const structureFields = (fn) =>
 const structureVersionFields = _.pick([
   "class",
   "classes",
+  "data_structure_link_count",
   "data_structure_type",
   "degree",
   "deleted_at",

package/src/selectors/getActiveTab.js

@@ -8,6 +8,7 @@ import {
   STRUCTURE_NOTES_EDIT,
   STRUCTURE_PARENTS,
   STRUCTURE_PROFILE,
+  STRUCTURE_LINKED_STRUCTURES,
   STRUCTURE_RULES,
   STRUCTURE_LINKS,
   STRUCTURE_LINKS_NEW,
@@ -43,6 +44,7 @@ export const getActiveTab = (tabVisibility, path) => {
     [_.eq(STRUCTURE_METADATA), _.constant("metadata")],
     [_.eq(STRUCTURE_PARENTS), _.constant("parents")],
     [_.eq(STRUCTURE_PROFILE), _.constant("profile")],
+    [_.eq(STRUCTURE_LINKED_STRUCTURES), _.constant("structureLinks")],
     [_.eq(STRUCTURE_RULES), _.constant("rules")],
     [_.eq(STRUCTURE_LINKS), _.constant("links")],
     [_.eq(STRUCTURE_LINKS_NEW), _.constant("links")],

package/src/selectors/getTabVisibility.js

@@ -36,6 +36,8 @@ const notesTabVisible = ({ templatesLoading, templates, structure }) =>
   )(templates);
 
 const versionsTabVisible = notEmptyPath("structureVersions");
+const structureLinksTabVisible = (state) =>
+  state?.structure?.data_structure_link_count > 0;
 const rulesTabVisible = (state) => state?.structure?.implementation_count > 0;
 const lineageTabVisible = _.anyPass([_.path("structure.degree.in")]);
 const impactTabVisible = _.anyPass([_.path("structure.degree.out")]);
@@ -48,6 +50,7 @@ export const getTabVisibility = (state) => ({
   fields: fieldsTabVisible(state),
   profile: profileTabVisible(state),
   links: linksTabVisible(state),
+  structureLinks: structureLinksTabVisible(state),
   notes: notesTabVisible(state),
   metadata: !_.isEmpty(metadataViewsSelector(state)),
   versions: versionsTabVisible(state),