@truedat/lm 8.7.4 → 8.8.0

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

@@ -92,11 +92,11 @@ exports[`<ImplementationLinks /> matches the latest snapshot 1`] = `
                 class=""
               >
                 <button
-                  class="ui red mini basic icon button"
+                  class="ui red mini basic compact icon button relation-actions__delete-button"
                 >
                   <i
                     aria-hidden="true"
-                    class="red trash alternate outline icon"
+                    class="red trash alternate outline small icon relation-actions__delete-icon"
                   />
                 </button>
               </td>
@@ -185,11 +185,11 @@ exports[`<ImplementationLinks /> matches the latest snapshot when implementation
                 class=""
               >
                 <button
-                  class="ui red mini basic icon button"
+                  class="ui red mini basic compact icon button relation-actions__delete-button"
                 >
                   <i
                     aria-hidden="true"
-                    class="red trash alternate outline icon"
+                    class="red trash alternate outline small icon relation-actions__delete-icon"
                   />
                 </button>
               </td>

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

@@ -27,24 +27,30 @@ exports[`<LinksPane /> matches the latest snapshot 1`] = `
         >
           Master title
         </h3>
-        <table
-          class="ui table"
+        <div
+          class="links-pane__table-scroll"
         >
-          <thead
-            class=""
+          <table
+            class="ui celled sortable unstackable compact table links-pane__table"
+            style="--links-pane-table-min-width: 0px;"
           >
-            <tr
+            <colgroup />
+            <thead
               class=""
-            />
-          </thead>
-          <tbody
-            class=""
-          >
-            <tr
+            >
+              <tr
+                class=""
+              />
+            </thead>
+            <tbody
               class=""
-            />
-          </tbody>
-        </table>
+            >
+              <tr
+                class=""
+              />
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
   </div>
@@ -78,43 +84,95 @@ exports[`<LinksPane /> should display note columns only when note values are pre
         >
           Master title
         </h3>
-        <table
-          class="ui table"
+        <div
+          class="links-pane__table-scroll"
         >
-          <thead
-            class=""
+          <table
+            class="ui celled sortable unstackable compact table links-pane__table"
+            style="--links-pane-table-min-width: 384px;"
           >
-            <tr
+            <colgroup>
+              <col
+                class="links-pane__column"
+                style="--links-pane-column-width: 264px;"
+              />
+              <col
+                class="links-pane__column"
+                style="--links-pane-column-width: 120px;"
+              />
+            </colgroup>
+            <thead
               class=""
             >
-              <th
+              <tr
                 class=""
               >
-                Foo
-              </th>
-            </tr>
-          </thead>
-          <tbody
-            class=""
-          >
-            <tr
+                <th
+                  class="links-pane__cell links-pane__cell--header links-pane__cell--wrap"
+                  style="--links-pane-column-width: 264px;"
+                >
+                  <span
+                    class="links-pane__filter-label"
+                  >
+                    <span
+                      class="links-pane__filter-label-text"
+                    >
+                      Name
+                    </span>
+                  </span>
+                </th>
+                <th
+                  class="links-pane__cell links-pane__cell--header"
+                  style="--links-pane-column-width: 120px;"
+                >
+                  <span
+                    class="links-pane__filter-label"
+                  >
+                    <span
+                      class="links-pane__filter-label-text"
+                    >
+                      Foo
+                    </span>
+                  </span>
+                </th>
+              </tr>
+            </thead>
+            <tbody
               class=""
             >
-              <td
+              <tr
                 class=""
               >
-                baz
-              </td>
-            </tr>
-            <tr
-              class=""
-            >
-              <td
+                <td
+                  class="links-pane__cell links-pane__cell--wrap"
+                  style="--links-pane-column-width: 264px;"
+                >
+                  Structure 1
+                </td>
+                <td
+                  class="links-pane__cell"
+                  style="--links-pane-column-width: 120px;"
+                >
+                  baz
+                </td>
+              </tr>
+              <tr
                 class=""
-              />
-            </tr>
-          </tbody>
-        </table>
+              >
+                <td
+                  class="links-pane__cell links-pane__cell--wrap"
+                  style="--links-pane-column-width: 264px;"
+                >
+                  Structure 2
+                </td>
+                <td
+                  class="links-pane__cell"
+                  style="--links-pane-column-width: 120px;"
+                />
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
   </div>

package/src/hooks/__tests__/useFilteredLinks.spec.js

@@ -0,0 +1,116 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { renderHook } from "@testing-library/react";
+import { useFilteredLinks } from "../useFilteredLinks";
+
+jest.mock(
+  "@truedat/core/services",
+  () => {
+    const lodashFp = require("lodash/fp");
+    return {
+      columnDecorator: () => () => null,
+      columnPredicate: () => () => true,
+    };
+  },
+  { virtual: true },
+);
+
+describe("useFilteredLinks", () => {
+  const enrichedLinks = [
+    { id: 1, name: "Alpha", tags: ["main"], type: "column" },
+    { id: 2, name: "Beta", tags: ["secondary"], type: "table" },
+    { id: 3, name: "Gamma", tags: ["main"], type: "field" },
+    { id: 4, name: "Delta", tags: ["secondary"], type: "column" },
+  ];
+
+  it("returns all links when no filters are selected", () => {
+    const { result } = renderHook(() =>
+      useFilteredLinks({
+        enrichedLinks,
+        selectedTypes: [],
+        selectedRelationTypes: [],
+      }),
+    );
+
+    expect(result.current.filteredLinks).toHaveLength(4);
+    expect(result.current.typeOptions).toEqual(["column", "field", "table"]);
+    expect(result.current.relationTypeOptions).toEqual(["main", "secondary"]);
+  });
+
+  it("filters links by type", () => {
+    const { result } = renderHook(() =>
+      useFilteredLinks({
+        enrichedLinks,
+        selectedTypes: ["column"],
+        selectedRelationTypes: [],
+      }),
+    );
+
+    expect(result.current.filteredLinks).toHaveLength(2);
+    expect(result.current.filteredLinks.map((l) => l.name)).toEqual([
+      "Alpha",
+      "Delta",
+    ]);
+  });
+
+  it("filters links by relation type", () => {
+    const { result } = renderHook(() =>
+      useFilteredLinks({
+        enrichedLinks,
+        selectedTypes: [],
+        selectedRelationTypes: ["main"],
+      }),
+    );
+
+    expect(result.current.filteredLinks).toHaveLength(2);
+    expect(result.current.filteredLinks.map((l) => l.name)).toEqual([
+      "Alpha",
+      "Gamma",
+    ]);
+  });
+
+  it("combines type and relation type filters", () => {
+    const { result } = renderHook(() =>
+      useFilteredLinks({
+        enrichedLinks,
+        selectedTypes: ["column"],
+        selectedRelationTypes: ["main"],
+      }),
+    );
+
+    expect(result.current.filteredLinks).toHaveLength(1);
+    expect(result.current.filteredLinks.map((l) => l.name)).toEqual(["Alpha"]);
+  });
+
+  it("includes empty option for links without tags", () => {
+    const linksWithEmpty = [
+      { id: 1, name: "Alpha", tags: ["main"] },
+      { id: 2, name: "Beta", tags: [] },
+      { id: 3, name: "Gamma" },
+    ];
+
+    const { result } = renderHook(() =>
+      useFilteredLinks({
+        enrichedLinks: linksWithEmpty,
+        selectedTypes: [],
+        selectedRelationTypes: [],
+      }),
+    );
+
+    expect(result.current.relationTypeOptions).toEqual(["", "main"]);
+  });
+
+  it("updates typeOptions based on relationType filter", () => {
+    const { result } = renderHook(() =>
+      useFilteredLinks({
+        enrichedLinks,
+        selectedTypes: [],
+        selectedRelationTypes: ["secondary"],
+      }),
+    );
+
+    expect(result.current.typeOptions).toEqual(["column", "table"]);
+  });
+});

package/src/hooks/__tests__/useSortedLinks.spec.js

@@ -0,0 +1,129 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { renderHook } from "@testing-library/react";
+import { useSortedLinks } from "../useSortedLinks";
+
+jest.mock(
+  "@truedat/core/services",
+  () => {
+    const lodashFp = require("lodash/fp");
+    return {
+      columnDecorator: (column) => (obj) => {
+        const { fieldSelector, fieldDecorator, name } = column || {};
+        const field = lodashFp.isFunction(fieldSelector)
+          ? fieldSelector(obj)
+          : lodashFp.path(lodashFp.defaultTo(name)(fieldSelector))(obj);
+        return lodashFp.isFunction(fieldDecorator)
+          ? fieldDecorator(field)
+          : field;
+      },
+      columnPredicate: () => () => true,
+    };
+  },
+  { virtual: true },
+);
+
+describe("useSortedLinks", () => {
+  const columns = [
+    { name: "name" },
+    { name: "relation.relation_type_name", fieldSelector: (link) => link.tags },
+    { name: "type" },
+  ];
+
+  const links = [
+    { id: 1, name: "Zulu", tags: ["secondary"], type: "field" },
+    { id: 2, name: "Alpha", tags: ["main"], type: "table" },
+    { id: 3, name: "Beta", tags: ["main"], type: "column" },
+  ];
+
+  it("sorts by relation type then type when no sort column", () => {
+    const sort = { column: null, direction: "ascending" };
+
+    const { result } = renderHook(() => useSortedLinks(links, columns, sort));
+
+    expect(result.current.map((l) => l.name)).toEqual([
+      "Beta",
+      "Alpha",
+      "Zulu",
+    ]);
+  });
+
+  it("sorts by type when relation type column is not present", () => {
+    const typeOnlyColumns = [{ name: "name" }, { name: "type" }];
+    const typeLinks = [
+      { id: 1, name: "Zulu", type: "table" },
+      { id: 2, name: "Alpha", type: "column" },
+    ];
+    const sort = { column: null, direction: "ascending" };
+
+    const { result } = renderHook(() =>
+      useSortedLinks(typeLinks, typeOnlyColumns, sort),
+    );
+
+    expect(result.current.map((l) => l.name)).toEqual(["Alpha", "Zulu"]);
+  });
+
+  it("sorts by default fallback when no sortable columns exist", () => {
+    const noSortColumns = [{ name: "_actions" }];
+    const fallbackLinks = [
+      { id: 1, business_concept_id: 10, name: "Beta" },
+      { id: 2, business_concept_id: 5, name: "Alpha" },
+    ];
+    const sort = { column: null, direction: "ascending" };
+
+    const { result } = renderHook(() =>
+      useSortedLinks(fallbackLinks, noSortColumns, sort),
+    );
+
+    expect(result.current.map((l) => l.name)).toEqual(["Alpha", "Beta"]);
+  });
+
+  it("sorts ascending by a specific column", () => {
+    const sort = { column: "name", direction: "ascending" };
+
+    const { result } = renderHook(() => useSortedLinks(links, columns, sort));
+
+    expect(result.current.map((l) => l.name)).toEqual([
+      "Alpha",
+      "Beta",
+      "Zulu",
+    ]);
+  });
+
+  it("sorts descending by a specific column", () => {
+    const sort = { column: "name", direction: "descending" };
+
+    const { result } = renderHook(() => useSortedLinks(links, columns, sort));
+
+    expect(result.current.map((l) => l.name)).toEqual([
+      "Zulu",
+      "Beta",
+      "Alpha",
+    ]);
+  });
+
+  it("recomputes when sort changes", () => {
+    const { result, rerender } = renderHook(
+      ({ sort }) => useSortedLinks(links, columns, sort),
+      {
+        initialProps: { sort: { column: "name", direction: "ascending" } },
+      },
+    );
+
+    expect(result.current.map((l) => l.name)).toEqual([
+      "Alpha",
+      "Beta",
+      "Zulu",
+    ]);
+
+    rerender({ sort: { column: "name", direction: "descending" } });
+
+    expect(result.current.map((l) => l.name)).toEqual([
+      "Zulu",
+      "Beta",
+      "Alpha",
+    ]);
+  });
+});

package/src/hooks/__tests__/useStructureNotes.spec.js

@@ -0,0 +1,138 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { renderHook, waitFor } from "@testing-library/react";
+import { useDataStructureSearch } from "@truedat/dd/hooks/useStructures";
+import { useStructureNotes } from "../useStructureNotes";
+
+jest.mock(
+  "@truedat/dd/hooks/useStructures",
+  () => ({
+    useDataStructureSearch: jest.fn(),
+  }),
+  { virtual: true },
+);
+
+describe("useStructureNotes", () => {
+  beforeEach(() => {
+    const mockTrigger = jest.fn().mockResolvedValue({
+      data: {
+        data: [
+          { id: 123, note: { status: "published", content: "Test note" } },
+          { id: 456, note: { status: "draft", content: "Another note" } },
+        ],
+      },
+    });
+
+    useDataStructureSearch.mockReturnValue({
+      trigger: mockTrigger,
+    });
+  });
+
+  it("returns links unchanged if no data_structure resources", () => {
+    const links = [
+      { id: 1, resource_type: "other", resource_id: 123, name: "Other 1" },
+    ];
+
+    const { result } = renderHook(() => useStructureNotes(links));
+
+    expect(result.current).toEqual(links);
+  });
+
+  it("fetches and enriches data_structure links with notes", async () => {
+    const links = [
+      {
+        id: 1,
+        resource_type: "data_structure",
+        resource_id: 123,
+        name: "Structure 1",
+      },
+      {
+        id: 2,
+        resource_type: "data_structure",
+        resource_id: 456,
+        name: "Structure 2",
+      },
+    ];
+
+    const { result } = renderHook(() => useStructureNotes(links));
+
+    await waitFor(() => {
+      expect(result.current[0].note).toEqual({
+        status: "published",
+        content: "Test note",
+      });
+    });
+  });
+
+  it("calls trigger with correct structure IDs", async () => {
+    const mockTrigger = jest.fn().mockResolvedValue({
+      data: {
+        data: [],
+      },
+    });
+
+    useDataStructureSearch.mockReturnValue({
+      trigger: mockTrigger,
+    });
+
+    const links = [
+      {
+        id: 1,
+        resource_type: "data_structure",
+        resource_id: 123,
+        name: "Structure 1",
+      },
+    ];
+
+    renderHook(() => useStructureNotes(links));
+
+    await waitFor(() => {
+      expect(mockTrigger).toHaveBeenCalledWith({
+        must: { ids: [123] },
+        page: 0,
+        size: 1,
+      });
+    });
+  });
+
+  it("does not call trigger if no data_structure links", () => {
+    const mockTrigger = jest.fn();
+
+    useDataStructureSearch.mockReturnValue({
+      trigger: mockTrigger,
+    });
+
+    const links = [
+      { id: 1, resource_type: "other", resource_id: 123, name: "Other 1" },
+    ];
+
+    renderHook(() => useStructureNotes(links));
+
+    expect(mockTrigger).not.toHaveBeenCalled();
+  });
+
+  it("handles API errors gracefully", async () => {
+    const mockTrigger = jest.fn().mockRejectedValue(new Error("API Error"));
+
+    useDataStructureSearch.mockReturnValue({
+      trigger: mockTrigger,
+    });
+
+    const links = [
+      {
+        id: 1,
+        resource_type: "data_structure",
+        resource_id: 123,
+        name: "Structure 1",
+      },
+    ];
+
+    const { result } = renderHook(() => useStructureNotes(links));
+
+    await waitFor(() => {
+      expect(result.current).toEqual(links);
+    });
+  });
+});

package/src/hooks/__tests__/useTruncatedPopup.spec.js

@@ -0,0 +1,109 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { renderHook, act } from "@testing-library/react";
+import { useTruncatedPopup } from "../useTruncatedPopup";
+
+describe("useTruncatedPopup", () => {
+  it("initializes with closed popup", () => {
+    const { result } = renderHook(() => useTruncatedPopup());
+
+    expect(result.current.popupOpen).toBe(false);
+    expect(result.current.popupContent).toBe("");
+    expect(result.current.cellRef.current).toBeNull();
+  });
+
+  it("opens popup when content overflows", () => {
+    const { result } = renderHook(() => useTruncatedPopup());
+
+    const mockCell = {
+      textContent: "Long text that overflows",
+      scrollWidth: 200,
+      clientWidth: 100,
+    };
+
+    act(() => {
+      result.current.handleMouseEnter({ currentTarget: mockCell });
+    });
+
+    expect(result.current.popupOpen).toBe(true);
+    expect(result.current.popupContent).toBe("Long text that overflows");
+  });
+
+  it("does not open popup when content fits", () => {
+    const { result } = renderHook(() => useTruncatedPopup());
+
+    const mockCell = {
+      textContent: "Short text",
+      scrollWidth: 100,
+      clientWidth: 100,
+    };
+
+    act(() => {
+      result.current.handleMouseEnter({ currentTarget: mockCell });
+    });
+
+    expect(result.current.popupOpen).toBe(false);
+  });
+
+  it("sets popupContent to empty string when textContent is empty", () => {
+    const { result } = renderHook(() => useTruncatedPopup());
+
+    const mockCell = {
+      textContent: "   ",
+      scrollWidth: 200,
+      clientWidth: 100,
+    };
+
+    act(() => {
+      result.current.handleMouseEnter({ currentTarget: mockCell });
+    });
+
+    expect(result.current.popupOpen).toBe(false);
+  });
+
+  it("closes popup on mouse leave", () => {
+    const { result } = renderHook(() => useTruncatedPopup());
+
+    const mockCell = {
+      textContent: "Long text",
+      scrollWidth: 200,
+      clientWidth: 100,
+    };
+
+    act(() => {
+      result.current.handleMouseEnter({ currentTarget: mockCell });
+    });
+
+    expect(result.current.popupOpen).toBe(true);
+
+    act(() => {
+      result.current.handleMouseLeave();
+    });
+
+    expect(result.current.popupOpen).toBe(false);
+  });
+
+  it("manually closes popup via setPopupOpen", () => {
+    const { result } = renderHook(() => useTruncatedPopup());
+
+    const mockCell = {
+      textContent: "Long text",
+      scrollWidth: 200,
+      clientWidth: 100,
+    };
+
+    act(() => {
+      result.current.handleMouseEnter({ currentTarget: mockCell });
+    });
+
+    expect(result.current.popupOpen).toBe(true);
+
+    act(() => {
+      result.current.setPopupOpen(false);
+    });
+
+    expect(result.current.popupOpen).toBe(false);
+  });
+});