@truedat/qx 8.2.0 → 8.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/qx",
-  "version": "8.2.0",
+  "version": "8.2.2",
   "description": "Truedat Web Quality Experience package",
   "sideEffects": false,
   "module": "src/index.js",
@@ -53,7 +53,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.2.0",
+    "@truedat/test": "8.2.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -86,5 +86,5 @@
     "semantic-ui-react": "^3.0.0-beta.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "a0b6d89f64e82602a1f3c5e250691526fe0c558a"
+  "gitHead": "ef27133e5868b9aad2d95d7f2c69f36063d4327b"
 }

package/src/components/qualityControls/ConceptLinkNew.js

@@ -0,0 +1,38 @@
+import { lazy, use } from "react";
+import { Header } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import QxContext from "../QxContext";
+import { makeTagOptionsSelector } from "@truedat/core/selectors";
+import { linkTo } from "@truedat/core/routes";
+
+const ConceptLinkForm = lazy(
+  () => import("@truedat/lm/components/ConceptLinkForm")
+);
+
+const selectTagOptions = makeTagOptionsSelector("quality_control");
+
+const ConceptLinkNew = () => {
+  const { formatMessage } = useIntl();
+  const { qualityControl } = use(QxContext);
+  return (
+    <>
+      <Header
+        as="h4"
+        content={formatMessage({
+          id: "quality_controls.relation.new.concept.header",
+        })}
+      />
+      <ConceptLinkForm
+        targetId={qualityControl.id}
+        targetType="quality_control"
+        redirectUrl={linkTo.QUALITY_CONTROL_CONCEPTS({
+          id: qualityControl.id,
+          version: qualityControl.version,
+        })}
+        selectTagOptions={selectTagOptions}
+      />
+    </>
+  );
+};
+
+export default ConceptLinkNew;

package/src/components/qualityControls/ConceptLinks.js

@@ -0,0 +1,15 @@
+import { lazy, use } from "react";
+import QxContext from "../QxContext";
+
+const QualityControlConcepts = lazy(
+  () => import("@truedat/lm/components/QualityControlConcepts")
+);
+
+const ConceptLinks = () => {
+  const { qualityControl, actions } = use(QxContext);
+  return (
+    <QualityControlConcepts qualityControl={qualityControl} actions={actions} />
+  );
+};
+
+export default ConceptLinks;

package/src/components/qualityControls/QualityControlActions.js

@@ -114,7 +114,13 @@ export default function QualityControlActions() {
 
   const availableActions = _.flow(
     _.reject((action) =>
-      _.includes(action, ["delete_score", "update_main", "execute"])
+      _.includes(action, [
+        "delete_score",
+        "update_main",
+        "execute",
+        "link_to_business_concept",
+        "link_to_data_structure",
+      ])
     ),
     _.map((action) => {
       const actionIcon = {

package/src/components/qualityControls/QualityControlHeader.js

@@ -1,9 +1,11 @@
 import _ from "lodash/fp";
+import { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
 import { useParams, Outlet } from "react-router";
 import { Header, Icon, Segment, Grid, Label } from "semantic-ui-react";
 import { colorForStatus } from "@truedat/core/services/statusColor";
+import { useRelations } from "@truedat/lm/hooks/useRelations";
 
 import { useQualityControl } from "../../hooks/useQualityControls";
 import QxContext from "../QxContext";
@@ -23,10 +25,51 @@ export default function QualityControlHeader({ children }) {
     ? ["play", "green"]
     : ["pause", "orange"];
 
+  const qualityControlId = qualityControl?.id;
+  const { trigger: searchRelations, isMutating: searchingRelations } =
+    useRelations();
+  const [conceptLinkCount, setConceptLinkCount] = useState(0);
+  const [structureLinkCount, setStructureLinkCount] = useState(0);
+
+  useEffect(() => {
+    if (qualityControlId) {
+      const conceptLinksPayload = {
+        must: {
+          target_id: qualityControlId,
+          target_type: "quality_control",
+          source_type: "business_concept",
+        },
+        size: 0,
+      };
+      const structureLinksPayload = {
+        must: {
+          source_id: qualityControlId,
+          source_type: "quality_control",
+          target_type: "data_structure",
+        },
+        size: 0,
+      };
+
+      Promise.all([
+        searchRelations(conceptLinksPayload),
+        searchRelations(structureLinksPayload),
+      ]).then(([conceptResponse, structureResponse]) => {
+        const conceptCount = parseInt(
+          conceptResponse?.headers?.["x-total-count"] || "0"
+        );
+        const structureCount = parseInt(
+          structureResponse?.headers?.["x-total-count"] || "0"
+        );
+        setConceptLinkCount(conceptCount);
+        setStructureLinkCount(structureCount);
+      });
+    }
+  }, [qualityControlId, searchRelations]);
+
   return (
     <QxContext value={context}>
       <QualityControlCrumbs qualityControl={qualityControl} />
-      <Segment loading={loading}>
+      <Segment loading={loading || searchingRelations}>
         {!_.isEmpty(qualityControl) ? (
           <>
             <Grid>
@@ -70,7 +113,11 @@ export default function QualityControlHeader({ children }) {
                 id={`quality_control.status.${qualityControl.status}`}
               />
             </Label>
-            <QualityControlTabs />
+            <QualityControlTabs
+              conceptLinkCount={conceptLinkCount}
+              structureLinkCount={structureLinkCount}
+              actions={actions}
+            />
             {children ? children : <Outlet />}
           </>
         ) : null}

package/src/components/qualityControls/QualityControlRoutes.js

@@ -1,6 +1,6 @@
 import { Route, Routes, useParams } from "react-router";
 import { SearchContextProvider } from "@truedat/core/search/SearchContext";
-// This is only for information purposes, we are not using these routes in the code
+// This is only for information purposes, don't remove
 import {
   QUALITY_CONTROLS_DEPRECATED,
   QUALITY_CONTROLS_DRAFTS,
@@ -12,7 +12,6 @@ import {
   QUALITY_CONTROL_HISTORY,
   QUALITY_CONTROL_SCORES,
 } from "@truedat/core/routes";
-
 import {
   useQualityControlsSearch,
   useQualityControlsFilters,
@@ -25,6 +24,10 @@ import QualityControlScores from "./QualityControlScores";
 import NewQualityControl from "./NewQualityControl";
 import EditQualityControl from "./EditQualityControl";
 import NewDraftQualityControl from "./NewDraftQualityControl";
+import ConceptLinks from "./ConceptLinks";
+import ConceptLinkNew from "./ConceptLinkNew";
+import StructureLinks from "./StructureLinks";
+import StructureLinkNew from "./StructureLinkNew";
 import { ScoreContextProvider } from "../scores/ScoreContext";
 import QualityControlEvents from "./QualityControlEvents";
 
@@ -94,6 +97,14 @@ export default function QualityControlRoutes() {
 
       <Route path=":id/version/:version" element={<QualityControlHeader />}>
         <Route index element={<QualityControl />} />
+        <Route path="links/concepts">
+          <Route index element={<ConceptLinks />} />
+          <Route path="new" element={<ConceptLinkNew />} />
+        </Route>
+        <Route path="links/structures">
+          <Route index element={<StructureLinks />} />
+          <Route path="new" element={<StructureLinkNew />} />
+        </Route>
         <Route path="history" element={<QualityControlHistory />} />
         <Route path="scores" element={<LoaderQualityControlScores />} />
         <Route path="events" element={<QualityControlEvents />} />

package/src/components/qualityControls/QualityControlTabs.js

@@ -1,39 +1,80 @@
+import _ from "lodash/fp";
+import PropTypes from "prop-types";
 import { Menu } from "semantic-ui-react";
 import { Link, useLocation } from "react-router";
 import { useParams } from "react-router";
 import { FormattedMessage } from "react-intl";
 import { linkTo } from "@truedat/core/routes";
 
-export default function QualityControlTabs() {
+export default function QualityControlTabs({
+  actions,
+  conceptLinkCount = 0,
+  structureLinkCount = 0,
+}) {
   const { pathname } = useLocation();
   const urlParams = useParams();
+  const canCreateConceptLink = _.includes("link_to_business_concept")(actions);
+  const canCreateStructureLink = _.includes("link_to_data_structure")(actions);
 
   const tabs = [
     {
-      url: linkTo.QUALITY_CONTROL(urlParams),
+      url: [linkTo.QUALITY_CONTROL(urlParams)],
       text: "quality_control.tabs.quality_control",
+      display: true,
     },
     {
-      url: linkTo.QUALITY_CONTROL_HISTORY(urlParams),
+      url: [
+        linkTo.QUALITY_CONTROL_CONCEPTS(urlParams),
+        linkTo.QUALITY_CONTROL_CONCEPT_LINKS_NEW(urlParams),
+      ],
+      text: "quality_control.tabs.concept_links",
+      display: conceptLinkCount !== 0 || canCreateConceptLink,
+    },
+    {
+      url: [
+        linkTo.QUALITY_CONTROL_STRUCTURES(urlParams),
+        linkTo.QUALITY_CONTROL_STRUCTURE_LINKS_NEW(urlParams),
+      ],
+      text: "quality_control.tabs.structure_links",
+      display: structureLinkCount !== 0 || canCreateStructureLink,
+    },
+    {
+      url: [linkTo.QUALITY_CONTROL_HISTORY(urlParams)],
       text: "quality_control.tabs.history",
+      display: true,
     },
     {
-      url: linkTo.QUALITY_CONTROL_SCORES(urlParams),
+      url: [linkTo.QUALITY_CONTROL_SCORES(urlParams)],
       text: "quality_control.tabs.scores",
+      display: true,
     },
     {
-      url: linkTo.QUALITY_CONTROL_EVENTS(urlParams),
+      url: [linkTo.QUALITY_CONTROL_EVENTS(urlParams)],
       text: "quality_control.tabs.events",
+      display: true,
     },
   ];
 
   return (
     <Menu attached="top" pointing secondary tabular>
-      {tabs.map(({ url, text }, key) => (
-        <Menu.Item key={key} active={pathname === url} as={Link} to={url}>
-          <FormattedMessage id={text} />
-        </Menu.Item>
-      ))}
+      {tabs
+        .filter(({ display }) => display)
+        .map(({ url, text }, key) => (
+          <Menu.Item
+            key={key}
+            active={_.includes(pathname)(url)}
+            as={Link}
+            to={url[0]}
+          >
+            <FormattedMessage id={text} />
+          </Menu.Item>
+        ))}
     </Menu>
   );
 }
+
+QualityControlTabs.propTypes = {
+  actions: PropTypes.array,
+  conceptLinkCount: PropTypes.number,
+  structureLinkCount: PropTypes.number,
+};

package/src/components/qualityControls/StructureLinkNew.js

@@ -0,0 +1,38 @@
+import { lazy, use } from "react";
+import { Header } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import QxContext from "../QxContext";
+import { makeTagOptionsSelector } from "@truedat/core/selectors";
+import { linkTo } from "@truedat/core/routes";
+
+const StructureLinkForm = lazy(
+  () => import("@truedat/lm/components/StructureLinkForm")
+);
+
+const selectTagOptions = makeTagOptionsSelector("quality_control");
+
+const StructureLinkNew = () => {
+  const { formatMessage } = useIntl();
+  const { qualityControl } = use(QxContext);
+  return (
+    <>
+      <Header
+        as="h4"
+        content={formatMessage({
+          id: "quality_controls.relation.new.structure.header",
+        })}
+      />
+      <StructureLinkForm
+        sourceId={qualityControl.id}
+        sourceType="quality_control"
+        redirectUrl={linkTo.QUALITY_CONTROL_STRUCTURES({
+          id: qualityControl.id,
+          version: qualityControl.version,
+        })}
+        selectTagOptions={selectTagOptions}
+      />
+    </>
+  );
+};
+
+export default StructureLinkNew;

package/src/components/qualityControls/StructureLinks.js

@@ -0,0 +1,18 @@
+import { lazy, use } from "react";
+import QxContext from "../QxContext";
+
+const QualityControlStructures = lazy(
+  () => import("@truedat/lm/components/QualityControlStructures")
+);
+
+const StructureLinks = () => {
+  const { qualityControl, actions } = use(QxContext);
+  return (
+    <QualityControlStructures
+      qualityControl={qualityControl}
+      actions={actions}
+    />
+  );
+};
+
+export default StructureLinks;

package/src/components/qualityControls/__tests__/ConceptLinkNew.spec.js

@@ -0,0 +1,63 @@
+import { render, waitForLoad } from "@truedat/test/render";
+import ConceptLinkNew from "../ConceptLinkNew";
+import QxContext from "../../QxContext";
+
+jest.mock("react-intl", () => ({
+  ...jest.requireActual("react-intl"),
+  useIntl: () => ({
+    formatMessage: ({ id }) => id,
+  }),
+}));
+
+jest.mock("@truedat/core/selectors", () => ({
+  makeTagOptionsSelector: jest.fn(() => jest.fn(() => [])),
+}));
+
+jest.mock("@truedat/core/routes", () => ({
+  linkTo: {
+    QUALITY_CONTROL_CONCEPTS: jest.fn(
+      ({ id, version }) =>
+        `/qualityControls/${id}/version/${version}/links/concepts`
+    ),
+  },
+}));
+
+jest.mock("@truedat/lm/components/ConceptLinkForm", () =>
+  jest.fn(() => <div>ConceptLinkForm</div>)
+);
+
+const qualityControl = {
+  id: 10,
+  version: 1,
+  name: "Test Quality Control",
+};
+
+const context = {
+  qualityControl,
+};
+
+describe("<ConceptLinkNew />", () => {
+  it("matches the latest snapshot", async () => {
+    const rendered = render(
+      <QxContext value={context}>
+        <ConceptLinkNew />
+      </QxContext>
+    );
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders header and ConceptLinkForm", async () => {
+    const rendered = render(
+      <QxContext value={context}>
+        <ConceptLinkNew />
+      </QxContext>
+    );
+    await waitForLoad(rendered);
+
+    expect(
+      rendered.getByText("quality_controls.relation.new.concept.header")
+    ).toBeInTheDocument();
+    expect(rendered.getByText("ConceptLinkForm")).toBeInTheDocument();
+  });
+});

package/src/components/qualityControls/__tests__/ConceptLinks.spec.js

@@ -0,0 +1,43 @@
+import { render, waitForLoad } from "@truedat/test/render";
+import ConceptLinks from "../ConceptLinks";
+import QxContext from "../../QxContext";
+
+jest.mock("@truedat/lm/components/QualityControlConcepts", () =>
+  jest.fn(() => <div>QualityControlConcepts</div>)
+);
+
+const qualityControl = {
+  id: 10,
+  version: 1,
+  name: "Test Quality Control",
+};
+
+const actions = ["link_to_business_concept"];
+
+const context = {
+  qualityControl,
+  actions,
+};
+
+describe("<ConceptLinks />", () => {
+  it("matches the latest snapshot", async () => {
+    const rendered = render(
+      <QxContext value={context}>
+        <ConceptLinks />
+      </QxContext>
+    );
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders QualityControlConcepts", async () => {
+    const rendered = render(
+      <QxContext value={context}>
+        <ConceptLinks />
+      </QxContext>
+    );
+    await waitForLoad(rendered);
+
+    expect(rendered.getByText("QualityControlConcepts")).toBeInTheDocument();
+  });
+});

package/src/components/qualityControls/__tests__/QualityControlHeader.spec.js

@@ -1,13 +1,23 @@
+import { waitFor } from "@testing-library/react";
 import { render, waitForLoad } from "@truedat/test/render";
 import { useQualityControl } from "@truedat/qx/hooks/useQualityControls";
 import QualityControlHeader from "../QualityControlHeader";
 import { qualityControlData } from "./__fixtures__/qualityControlHelper";
 
+const mockSearchRelations = jest.fn();
+
 jest.mock("react-router", () => ({
   ...jest.requireActual("react-router"),
   useParams: () => ({ id: "8", version: "1" }),
 }));
 
+jest.mock("@truedat/lm/hooks/useRelations", () => ({
+  useRelations: () => ({
+    trigger: mockSearchRelations,
+    isMutating: false,
+  }),
+}));
+
 jest.mock("@truedat/qx/hooks/useQualityControls", () => {
   const { qualityControlData } = jest.requireActual(
     "@truedat/qx/components/qualityControls/__tests__/__fixtures__/qualityControlHelper"
@@ -49,6 +59,34 @@ jest.mock("@truedat/qx/hooks/useQualityControls", () => {
 });
 
 describe("<QualityControlHeader />", () => {
+  const defaultMockImplementation = () => ({
+    data: {
+      data: qualityControlData(),
+      _actions: [
+        "deprecate",
+        "create_draft",
+        "toggle_active",
+        "delete_score",
+        "update_main",
+        "execute",
+        "delete",
+      ],
+    },
+    loading: false,
+    mutate: jest.fn(),
+  });
+
+  beforeEach(() => {
+    useQualityControl.mockImplementation(defaultMockImplementation);
+    mockSearchRelations.mockResolvedValue({
+      headers: { "x-total-count": "5" },
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   it("matches the latest snapshot with control quality active", async () => {
     const rendered = render(<QualityControlHeader />);
     await waitForLoad(rendered);
@@ -78,4 +116,116 @@ describe("<QualityControlHeader />", () => {
 
     expect(rendered.queryByText(".header")).not.toBeInTheDocument();
   });
+
+  it("fetches concept and structure link counts", async () => {
+    useQualityControl.mockImplementation(() => ({
+      data: {
+        data: qualityControlData(),
+        _actions: [],
+      },
+      loading: false,
+      mutate: jest.fn(),
+    }));
+
+    mockSearchRelations
+      .mockResolvedValueOnce({
+        headers: { "x-total-count": "10" },
+      })
+      .mockResolvedValueOnce({
+        headers: { "x-total-count": "7" },
+      });
+
+    const rendered = render(<QualityControlHeader />);
+    await waitForLoad(rendered);
+
+    await waitFor(() => {
+      expect(mockSearchRelations).toHaveBeenCalledTimes(2);
+    });
+
+    expect(mockSearchRelations).toHaveBeenCalledWith({
+      must: {
+        target_id: qualityControlData().id,
+        target_type: "quality_control",
+        source_type: "business_concept",
+      },
+      size: 0,
+    });
+
+    expect(mockSearchRelations).toHaveBeenCalledWith({
+      must: {
+        source_id: qualityControlData().id,
+        source_type: "quality_control",
+        target_type: "data_structure",
+      },
+      size: 0,
+    });
+  });
+
+  it("handles missing x-total-count header gracefully", async () => {
+    useQualityControl.mockImplementation(() => ({
+      data: {
+        data: qualityControlData(),
+        _actions: [],
+      },
+      loading: false,
+      mutate: jest.fn(),
+    }));
+
+    mockSearchRelations.mockResolvedValue({
+      headers: {},
+    });
+
+    const rendered = render(<QualityControlHeader />);
+    await waitForLoad(rendered);
+
+    await waitFor(() => {
+      expect(mockSearchRelations).toHaveBeenCalled();
+    });
+
+    expect(rendered.container).toBeInTheDocument();
+  });
+
+  it("fetches counts with correct payloads and updates state", async () => {
+    useQualityControl.mockImplementation(() => ({
+      data: {
+        data: qualityControlData(),
+        _actions: [],
+      },
+      loading: false,
+      mutate: jest.fn(),
+    }));
+
+    mockSearchRelations
+      .mockResolvedValueOnce({
+        headers: { "x-total-count": "15" },
+      })
+      .mockResolvedValueOnce({
+        headers: { "x-total-count": "23" },
+      });
+
+    const rendered = render(<QualityControlHeader />);
+    await waitForLoad(rendered);
+
+    await waitFor(() => {
+      expect(mockSearchRelations).toHaveBeenCalledTimes(2);
+    });
+
+    expect(mockSearchRelations).toHaveBeenNthCalledWith(1, {
+      must: {
+        target_id: qualityControlData().id,
+        target_type: "quality_control",
+        source_type: "business_concept",
+      },
+      size: 0,
+    });
+
+    expect(mockSearchRelations).toHaveBeenNthCalledWith(2, {
+      must: {
+        source_id: qualityControlData().id,
+        source_type: "quality_control",
+        target_type: "data_structure",
+      },
+      size: 0,
+    });
+  });
 });

package/src/components/qualityControls/__tests__/StructureLinkNew.spec.js

@@ -0,0 +1,93 @@
+import { render, waitForLoad } from "@truedat/test/render";
+import StructureLinkNew from "../StructureLinkNew";
+import QxContext from "../../QxContext";
+
+jest.mock("react-intl", () => ({
+  ...jest.requireActual("react-intl"),
+  useIntl: () => ({
+    formatMessage: ({ id }) => id,
+  }),
+}));
+
+jest.mock("@truedat/core/selectors", () => ({
+  makeTagOptionsSelector: jest.fn(() => jest.fn(() => [])),
+}));
+
+jest.mock("@truedat/core/routes", () => ({
+  linkTo: {
+    QUALITY_CONTROL_STRUCTURES: jest.fn(
+      ({ id, version }) =>
+        `/qualityControls/${id}/version/${version}/links/structures`
+    ),
+  },
+}));
+
+jest.mock("@truedat/lm/components/StructureLinkForm", () =>
+  jest.fn(({ sourceId, sourceType, redirectUrl, selectTagOptions }) => (
+    <div>
+      <div>StructureLinkForm</div>
+      <div data-testid="source-id">{sourceId}</div>
+      <div data-testid="source-type">{sourceType}</div>
+      <div data-testid="redirect-url">{redirectUrl}</div>
+      <div data-testid="has-select-tag-options">
+        {selectTagOptions ? "true" : "false"}
+      </div>
+    </div>
+  ))
+);
+
+const qualityControl = {
+  id: 10,
+  version: 1,
+  name: "Test Quality Control",
+};
+
+const context = {
+  qualityControl,
+};
+
+describe("<StructureLinkNew />", () => {
+  it("matches the latest snapshot", async () => {
+    const rendered = render(
+      <QxContext value={context}>
+        <StructureLinkNew />
+      </QxContext>
+    );
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders header and StructureLinkForm", async () => {
+    const rendered = render(
+      <QxContext value={context}>
+        <StructureLinkNew />
+      </QxContext>
+    );
+    await waitForLoad(rendered);
+
+    expect(
+      rendered.getByText("quality_controls.relation.new.structure.header")
+    ).toBeInTheDocument();
+    expect(rendered.getByText("StructureLinkForm")).toBeInTheDocument();
+  });
+
+  it("passes correct props to StructureLinkForm", async () => {
+    const rendered = render(
+      <QxContext value={context}>
+        <StructureLinkNew />
+      </QxContext>
+    );
+    await waitForLoad(rendered);
+
+    expect(rendered.getByTestId("source-id").textContent).toBe("10");
+    expect(rendered.getByTestId("source-type").textContent).toBe(
+      "quality_control"
+    );
+    expect(rendered.getByTestId("redirect-url").textContent).toContain(
+      "/qualityControls/10/version/1/links/structures"
+    );
+    expect(rendered.getByTestId("has-select-tag-options").textContent).toBe(
+      "true"
+    );
+  });
+});

package/src/components/qualityControls/__tests__/StructureLinks.spec.js

@@ -0,0 +1,79 @@
+import { render, waitForLoad } from "@truedat/test/render";
+import StructureLinks from "../StructureLinks";
+import QxContext from "../../QxContext";
+
+jest.mock("@truedat/lm/components/QualityControlStructures", () =>
+  jest.fn(({ qualityControl, actions }) => (
+    <div>
+      <div>QualityControlStructures</div>
+      <div data-testid="quality-control-id">{qualityControl?.id}</div>
+      <div data-testid="quality-control-name">{qualityControl?.name}</div>
+      <div data-testid="actions-count">{actions?.length || 0}</div>
+    </div>
+  ))
+);
+
+const qualityControl = {
+  id: 10,
+  version: 1,
+  name: "Test Quality Control",
+};
+
+const actions = ["link_to_data_structure"];
+
+const context = {
+  qualityControl,
+  actions,
+};
+
+describe("<StructureLinks />", () => {
+  it("matches the latest snapshot", async () => {
+    const rendered = render(
+      <QxContext value={context}>
+        <StructureLinks />
+      </QxContext>
+    );
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders QualityControlStructures", async () => {
+    const rendered = render(
+      <QxContext value={context}>
+        <StructureLinks />
+      </QxContext>
+    );
+    await waitForLoad(rendered);
+
+    expect(rendered.getByText("QualityControlStructures")).toBeInTheDocument();
+  });
+
+  it("passes qualityControl and actions to QualityControlStructures", async () => {
+    const rendered = render(
+      <QxContext value={context}>
+        <StructureLinks />
+      </QxContext>
+    );
+    await waitForLoad(rendered);
+
+    expect(rendered.getByTestId("quality-control-id").textContent).toBe("10");
+    expect(rendered.getByTestId("quality-control-name").textContent).toBe(
+      "Test Quality Control"
+    );
+    expect(rendered.getByTestId("actions-count").textContent).toBe("1");
+  });
+
+  it("handles missing actions gracefully", async () => {
+    const contextWithoutActions = {
+      qualityControl,
+    };
+    const rendered = render(
+      <QxContext value={contextWithoutActions}>
+        <StructureLinks />
+      </QxContext>
+    );
+    await waitForLoad(rendered);
+
+    expect(rendered.getByTestId("actions-count").textContent).toBe("0");
+  });
+});

package/src/components/qualityControls/__tests__/__snapshots__/ConceptLinkNew.spec.js.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ConceptLinkNew /> matches the latest snapshot 1`] = `
+<div>
+  <h4
+    class="ui header"
+  >
+    quality_controls.relation.new.concept.header
+  </h4>
+  <div>
+    ConceptLinkForm
+  </div>
+</div>
+`;

package/src/components/qualityControls/__tests__/__snapshots__/ConceptLinks.spec.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ConceptLinks /> matches the latest snapshot 1`] = `
+<div>
+  <div>
+    QualityControlConcepts
+  </div>
+</div>
+`;

package/src/components/qualityControls/__tests__/__snapshots__/StructureLinkNew.spec.js.snap

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<StructureLinkNew /> matches the latest snapshot 1`] = `
+<div>
+  <h4
+    class="ui header"
+  >
+    quality_controls.relation.new.structure.header
+  </h4>
+  <div>
+    <div>
+      StructureLinkForm
+    </div>
+    <div
+      data-testid="source-id"
+    >
+      10
+    </div>
+    <div
+      data-testid="source-type"
+    >
+      quality_control
+    </div>
+    <div
+      data-testid="redirect-url"
+    >
+      /qualityControls/10/version/1/links/structures
+    </div>
+    <div
+      data-testid="has-select-tag-options"
+    >
+      true
+    </div>
+  </div>
+</div>
+`;

package/src/components/qualityControls/__tests__/__snapshots__/StructureLinks.spec.js.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<StructureLinks /> matches the latest snapshot 1`] = `
+<div>
+  <div>
+    <div>
+      QualityControlStructures
+    </div>
+    <div
+      data-testid="quality-control-id"
+    >
+      10
+    </div>
+    <div
+      data-testid="quality-control-name"
+    >
+      Test Quality Control
+    </div>
+    <div
+      data-testid="actions-count"
+    >
+      1
+    </div>
+  </div>
+</div>
+`;