@truedat/dd 8.11.6 → 8.11.9

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

@@ -0,0 +1,364 @@
+import fs from "fs";
+import path from "path";
+import { act, fireEvent, screen } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import {
+  formatMetadataValue,
+  HierarchyPath,
+  LineageInspectorPanel,
+} from "../LineageInspectorPanel";
+
+describe("<LineageInspectorPanel />", () => {
+  const createGraph = jest.fn();
+  const excludeNode = jest.fn();
+  const onClose = jest.fn();
+  const onCenterNode = jest.fn();
+  const onMinimize = jest.fn();
+  const onTogglePin = jest.fn();
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it("shows real node facts, quality and conditional resource actions", () => {
+    render(
+      <LineageInspectorPanel
+        context={{
+          type: "node",
+          node: {
+            id: "resource-1",
+            graphNodeId: "resource-1",
+            lineageKind: "resource",
+            iconName: "table",
+            name: "Orders",
+            path: ["Warehouse", "Sales"],
+            quality: "88",
+            status: "published",
+            structure_id: "structure-1",
+            systemTypeLabel: "Oracle",
+            fieldsKnown: true,
+            totalFields: 12,
+            type: "Table",
+          },
+        }}
+        createGraph={createGraph}
+        excludeNode={excludeNode}
+        levels={3}
+        onClose={onClose}
+        onCenterNode={onCenterNode}
+        onMinimize={onMinimize}
+        onTogglePin={onTogglePin}
+        pinned
+      />,
+    );
+
+    expect(screen.getByText("Orders")).toBeInTheDocument();
+    expect(
+      screen
+        .getByLabelText("Lineage inspector")
+        .querySelector(".lineage-inspector__header-icon .table.icon"),
+    ).toBeInTheDocument();
+    expect(screen.getAllByText("Warehouse › Sales › Orders")).toHaveLength(2);
+    expect(screen.getByText("Oracle")).toBeInTheDocument();
+    expect(screen.getAllByText("Table")).toHaveLength(2);
+    expect(screen.getByText("88")).toBeInTheDocument();
+    expect(screen.queryByText(/completeness/i)).not.toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Unpin focus" })).toHaveAttribute(
+      "aria-pressed",
+      "true",
+    );
+    expect(
+      screen
+        .getByRole("button", { name: "Unpin focus" })
+        .querySelector(".lineage-unpin-icon"),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Minimize inspector" }),
+    ).toHaveClass("lineage-inspector__minimize--pinned");
+    expect(screen.getByRole("button", { name: "Lineage" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Impact" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Exclude" })).toBeInTheDocument();
+    expect(
+      screen.getByRole("link", { name: "View Quality Rules" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("link", { name: "View in Data Catalog" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "Close inspector" }),
+    ).not.toBeInTheDocument();
+
+    const actions = screen
+      .getAllByRole("button")
+      .map((button) => button.getAttribute("aria-label"));
+    expect(actions).toEqual([
+      "Minimize inspector",
+      "Center in graph",
+      "Unpin focus",
+      "Exclude",
+      "Lineage",
+      "Impact",
+    ]);
+    expect(
+      screen
+        .getByLabelText("Lineage inspector")
+        .querySelector(".lineage-inspector__action-divider"),
+    ).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "Center in graph" }));
+    fireEvent.click(screen.getByRole("button", { name: "Minimize inspector" }));
+    fireEvent.click(screen.getByRole("button", { name: "Unpin focus" }));
+    fireEvent.click(screen.getByRole("button", { name: "Lineage" }));
+
+    expect(onCenterNode).toHaveBeenCalledWith("resource-1");
+    expect(onMinimize).toHaveBeenCalledTimes(1);
+    expect(onTogglePin).toHaveBeenCalledTimes(1);
+    expect(createGraph).toHaveBeenCalledWith({
+      ids: ["resource-1"],
+      isRedirected: true,
+      levels: 3,
+      type: "lineage",
+    });
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not show a Without System Group placeholder as a system fact", () => {
+    render(
+      <LineageInspectorPanel
+        context={{
+          type: "node",
+          node: {
+            id: "resource-2",
+            graphNodeId: "resource-2",
+            lineageKind: "resource",
+            name: "Orphan table",
+            systemTypeLabel: "Without System Group",
+            type: "Table",
+          },
+        }}
+        createGraph={createGraph}
+        excludeNode={excludeNode}
+        onClose={onClose}
+        onCenterNode={onCenterNode}
+        onMinimize={onMinimize}
+      />,
+    );
+
+    expect(screen.queryByText("Without System Group")).not.toBeInTheDocument();
+    expect(screen.getAllByText("Table")).toHaveLength(2);
+  });
+
+  it("keeps each grouped original available for catalogue and lineage actions", () => {
+    render(
+      <LineageInspectorPanel
+        context={{
+          type: "node",
+          node: {
+            id: "glue:/Glue/db/table/field",
+            name: "field",
+            lineageKind: "resource",
+            originals: [
+              { id: "glue:/Glue/db/table/field", structure_id: 11 },
+              {
+                id: "https://glue.region.amazonaws.com/#/account/db/table/field",
+                structure_id: 22,
+              },
+            ],
+          },
+        }}
+        createGraph={createGraph}
+        excludeNode={excludeNode}
+        onClose={onClose}
+        onMinimize={onMinimize}
+      />,
+    );
+    const selector = screen.getByRole("combobox", {
+      name: "Original resource",
+    });
+    expect(selector.options).toHaveLength(2);
+    expect(
+      screen.getByRole("link", { name: "View in Data Catalog" }).href,
+    ).toContain("11");
+    fireEvent.change(selector, {
+      target: { value: selector.options[1].value },
+    });
+    expect(
+      screen.getByRole("link", { name: "View in Data Catalog" }).href,
+    ).toContain("22");
+    fireEvent.click(screen.getByRole("button", { name: "Impact" }));
+    expect(createGraph).toHaveBeenCalledWith(
+      expect.objectContaining({
+        ids: [selector.options[1].value],
+        type: "impact",
+      }),
+    );
+  });
+
+  it("renders every edge metadata value, including nested and null values", () => {
+    render(
+      <LineageInspectorPanel
+        context={{
+          type: "edge",
+          edge: {
+            metadata: {
+              columns: ["customer_id", "id"],
+              nullable: null,
+              rule: { mode: "strict", nested: { active: true } },
+            },
+            relationType: "depends",
+            source: "source-id",
+            sourceName: "Orders",
+            target: "target-id",
+            targetName: "Customers",
+          },
+        }}
+        createGraph={createGraph}
+        excludeNode={excludeNode}
+        onClose={onClose}
+        onMinimize={onMinimize}
+      />,
+    );
+
+    expect(screen.getByText("Orders → Customers")).toBeInTheDocument();
+    expect(screen.getByText("DEPENDS")).toBeInTheDocument();
+    expect(screen.getByText("columns")).toBeInTheDocument();
+    expect(screen.getByText("nullable")).toBeInTheDocument();
+    expect(screen.getByText("—")).toBeInTheDocument();
+    expect(screen.getByText(/"nested": \{/)).toBeInTheDocument();
+    expect(screen.getByText(/"active": true/)).toBeInTheDocument();
+  });
+
+  it.each([
+    ["a column", { fieldsKnown: true, totalFields: 0, type: "Column" }, false],
+    [
+      "unknown fields",
+      { fieldsKnown: false, totalFields: 0, type: "Table" },
+      false,
+    ],
+    ["an explicit empty collection", { fields: [], type: "Table" }, true],
+    [
+      "an explicit populated collection",
+      { fields: [{}, {}], type: "Table" },
+      true,
+    ],
+  ])("handles Fields for %s", (_label, node, visible) => {
+    render(
+      <LineageInspectorPanel
+        context={{
+          type: "node",
+          node: {
+            graphNodeId: "node-1",
+            id: "node-1",
+            lineageKind: "resource",
+            name: "Node",
+            ...node,
+          },
+        }}
+        createGraph={createGraph}
+        excludeNode={excludeNode}
+        onClose={onClose}
+        onMinimize={onMinimize}
+      />,
+    );
+
+    if (visible) expect(screen.getByText("Fields")).toBeInTheDocument();
+    else expect(screen.queryByText("Fields")).not.toBeInTheDocument();
+  });
+
+  it("summarizes an overflowing path and exposes the full value on focus", () => {
+    const originalScrollHeight = Object.getOwnPropertyDescriptor(
+      HTMLElement.prototype,
+      "scrollHeight",
+    );
+    let resize;
+    let height = 60;
+
+    Object.defineProperty(HTMLElement.prototype, "scrollHeight", {
+      configurable: true,
+      get() {
+        return this.classList.contains("lineage-inspector__path--measure")
+          ? height
+          : 0;
+      },
+    });
+    global.ResizeObserver = class ResizeObserver {
+      constructor(callback) {
+        resize = callback;
+      }
+
+      disconnect() {}
+
+      observe() {}
+    };
+
+    const rendered = render(
+      <HierarchyPath parts={["Root", "Domain", "Schema", "Node"]} />,
+    );
+    const trigger = rendered.container.querySelector(
+      ".lineage-inspector__path--truncated",
+    );
+
+    expect(trigger).toHaveTextContent("Root › … › Node");
+    expect(trigger).toHaveAttribute("tabindex", "0");
+
+    fireEvent.focus(trigger);
+    act(() => jest.runOnlyPendingTimers());
+    expect(screen.getAllByText("Root › Domain › Schema › Node")).toHaveLength(
+      2,
+    );
+
+    height = 20;
+    act(() => resize());
+    expect(
+      rendered.container.querySelector(".lineage-inspector__path--truncated"),
+    ).not.toBeInTheDocument();
+
+    if (originalScrollHeight) {
+      Object.defineProperty(
+        HTMLElement.prototype,
+        "scrollHeight",
+        originalScrollHeight,
+      );
+    } else {
+      delete HTMLElement.prototype.scrollHeight;
+    }
+    delete global.ResizeObserver;
+  });
+
+  it("uses one motion token, reduced motion and the neutral detail hover", () => {
+    const styles = fs.readFileSync(
+      path.resolve(__dirname, "../../styles/LineageGraph.less"),
+      "utf8",
+    );
+
+    expect(styles).toContain("--td-lineage-inspector-motion-duration: 180ms;");
+    expect(styles).toContain("@media (prefers-reduced-motion: reduce)");
+    expect(styles).toContain(
+      ".lineage-view__header-icon > .icon,\n.lineage-inspector__header-icon > .icon",
+    );
+    expect(styles).toContain(
+      "justify-content: center;\n  margin: 0;\n  line-height: 1;",
+    );
+    expect(styles).toContain(
+      ".lineage-inspector__minimize--pinned:hover {\n  background: var(--td-graph-accent, #ed5c17);\n  color: #ffffff;",
+    );
+    expect(styles).toContain(".lineage-inspector__action--view-detail:hover");
+    expect(styles).toContain("background: #667085;");
+  });
+});
+
+describe("formatMetadataValue", () => {
+  it("formats primitives, nulls and nested objects safely", () => {
+    expect(formatMetadataValue(null)).toBe("—");
+    expect(formatMetadataValue(false)).toBe("false");
+    expect(formatMetadataValue(["a", "b"])).toBe('[\n  "a",\n  "b"\n]');
+    expect(formatMetadataValue({ nested: { score: 1 } })).toContain(
+      '"score": 1',
+    );
+  });
+});

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

@@ -0,0 +1,338 @@
+import fs from "fs";
+import path from "path";
+import { fireEvent } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import { EdgeHoverContext } from "@truedat/core/components/graph/ColoredEdge";
+import LineageResourceNode, {
+  lineageQualityLevel,
+} from "../LineageResourceNode";
+
+jest.mock("@truedat/core/components/graph/FlowPorts", () => ({
+  // eslint-disable-next-line react/prop-types
+  Handle: ({ className, id, position, type }) => (
+    <span
+      className={className}
+      data-handle-id={id}
+      data-position={position}
+      data-type={type}
+    />
+  ),
+  Position: {
+    Left: "left",
+    Right: "right",
+  },
+}));
+
+describe("<LineageResourceNode />", () => {
+  const fields = Array.from({ length: 12 }, (_, index) => ({
+    name: `field_${index + 1}`,
+    primary_key: index === 0,
+    type: index % 2 ? "STRING" : "INT",
+  }));
+
+  it("renders six fields and an accessible disclosure by default", () => {
+    const onToggleFields = jest.fn();
+    const rendered = render(
+      <LineageResourceNode
+        id="fact-orders"
+        data={{
+          fieldHandleLimit: 6,
+          fields: fields.slice(0, 6),
+          hiddenFieldsCount: 6,
+          kind: "resource",
+          label: "fact_orders",
+          systemTypeLabel: "Table",
+          onToggleFields,
+          quality: "98%",
+          status: "warning",
+          totalFields: fields.length,
+          variant: "lineage-redesigned",
+        }}
+      />,
+    );
+
+    expect(rendered.getByText("fact_orders")).toBeInTheDocument();
+    expect(rendered.getByText("Table")).toBeInTheDocument();
+    expect(rendered.getByText("field_1")).toBeInTheDocument();
+    expect(rendered.queryByText("field_7")).not.toBeInTheDocument();
+
+    const disclosure = rendered.getByRole("button", {
+      name: "+ 6 elements",
+    });
+
+    expect(disclosure).toHaveAttribute("aria-expanded", "false");
+    fireEvent.click(disclosure);
+    expect(onToggleFields).toHaveBeenCalledTimes(1);
+    expect(
+      rendered.container.querySelector('[data-handle-id="field-source-0"]'),
+    ).toBeInTheDocument();
+    expect(
+      rendered.container.querySelector('[data-handle-id="field-target-5"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("renders all expanded fields in a ten-row scroll window", () => {
+    const rendered = render(
+      <LineageResourceNode
+        id="fact-orders"
+        data={{
+          fieldHandleLimit: 10,
+          fields,
+          fieldsExpanded: true,
+          hiddenFieldsCount: 6,
+          kind: "resource",
+          label: "fact_orders",
+          onToggleFields: jest.fn(),
+          totalFields: fields.length,
+          variant: "lineage-redesigned",
+        }}
+      />,
+    );
+
+    expect(rendered.getByText("field_12")).toBeInTheDocument();
+    expect(rendered.getByRole("button", { name: "Show less" })).toHaveAttribute(
+      "aria-expanded",
+      "true",
+    );
+    expect(
+      rendered.container.querySelector(
+        ".td-lineage-resource-node__fields--scrollable",
+      ),
+    ).toBeInTheDocument();
+    expect(
+      rendered.container.querySelector('[data-handle-id="field-target-9"]'),
+    ).toBeInTheDocument();
+    expect(
+      rendered.container.querySelector('[data-handle-id="field-target-10"]'),
+    ).not.toBeInTheDocument();
+  });
+
+  it("does not invent quality or status values", () => {
+    const rendered = render(
+      <LineageResourceNode
+        id="without-metadata"
+        data={{ kind: "resource", label: "raw_table", meta: "Table" }}
+      />,
+    );
+
+    expect(rendered.queryByText(/QC/)).not.toBeInTheDocument();
+    expect(rendered.queryByTitle("Ready")).not.toBeInTheDocument();
+  });
+
+  it("renders entity type badge when entityType is provided", () => {
+    const rendered = render(
+      <LineageResourceNode
+        id="process"
+        data={{ entityType: "process", kind: "process", label: "Process" }}
+      />,
+    );
+
+    expect(
+      rendered.container.querySelector(
+        ".td-lineage-resource-node__entity-badge",
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("keeps the selected modifier used by the orange emphasis state", () => {
+    const rendered = render(
+      <LineageResourceNode
+        id="selected-resource"
+        data={{
+          isActive: true,
+          kind: "resource",
+          label: "selected_table",
+          variant: "lineage-redesigned",
+        }}
+      />,
+    );
+
+    expect(
+      rendered.container.querySelector(
+        ".td-lineage-resource-node--redesigned.td-lineage-resource-node--active",
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("marks the node under the pointer independently from related nodes", () => {
+    const rendered = render(
+      <EdgeHoverContext.Provider value={{ hoveredNodeId: "hovered-resource" }}>
+        <LineageResourceNode
+          id="hovered-resource"
+          data={{
+            kind: "resource",
+            label: "hovered_table",
+            variant: "lineage-redesigned",
+          }}
+        />
+      </EdgeHoverContext.Provider>,
+    );
+
+    expect(
+      rendered.container.querySelector(
+        ".td-lineage-resource-node--hovered:not(.td-lineage-resource-node--connected)",
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("hides the system badge when the system type is missing", () => {
+    const rendered = render(
+      <LineageResourceNode
+        id="orphan-table"
+        data={{
+          kind: "resource",
+          label: "orphan_table",
+          systemTypeLabel: "Table",
+          systemTypeLabel: "Without System Group",
+          systemTypeMissing: true,
+          variant: "lineage-redesigned",
+        }}
+      />,
+    );
+
+    expect(rendered.getByText("orphan_table")).toBeInTheDocument();
+    expect(
+      rendered.queryByText("Without System Group"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("keeps a real SYSTEM badge visible", () => {
+    const rendered = render(
+      <LineageResourceNode
+        id="system-table"
+        data={{
+          kind: "resource",
+          label: "system_table",
+          systemTypeLabel: "Table",
+          systemTypeLabel: "SYSTEM",
+          systemTypeMissing: false,
+          variant: "lineage-redesigned",
+        }}
+      />,
+    );
+
+    expect(rendered.getByText("SYSTEM")).toBeInTheDocument();
+  });
+
+  it("keeps the card geometry and scroll affordance in CSS", () => {
+    const styles = fs.readFileSync(
+      path.resolve(__dirname, "../../styles/LineageResourceNode.less"),
+      "utf8",
+    );
+
+    expect(styles).toContain("width: var(--td-lineage-node-width, 288px);");
+    expect(styles).toContain("height: 42px;");
+    expect(styles).toContain("max-height: 320px;");
+    expect(styles).toContain("box-sizing: border-box;");
+    expect(styles).toContain("scrollbar-color:");
+    expect(styles).toContain("field-type-badge");
+    expect(styles).toContain("entity-badge");
+  });
+});
+
+describe("lineageQualityLevel", () => {
+  it("maps high quality scores to good", () => {
+    expect(lineageQualityLevel("99.9%")).toBe("good");
+    expect(lineageQualityLevel(95)).toBe("good");
+    expect(lineageQualityLevel(90)).toBe("good");
+  });
+
+  it("maps mid quality scores to warning", () => {
+    expect(lineageQualityLevel(80)).toBe("warning");
+    expect(lineageQualityLevel("75%")).toBe("warning");
+  });
+
+  it("maps low quality scores to poor", () => {
+    expect(lineageQualityLevel(50)).toBe("poor");
+    expect(lineageQualityLevel("0.3")).toBe("poor");
+  });
+
+  it("returns undefined when no quality data is present", () => {
+    expect(lineageQualityLevel()).toBeUndefined();
+    expect(lineageQualityLevel(null)).toBeUndefined();
+  });
+});
+
+describe("field type badge and PK key icon", () => {
+  it("renders PK badge for primary key fields", () => {
+    const rendered = render(
+      <LineageResourceNode
+        id="table-with-pk"
+        data={{
+          fields: [{ name: "id", primary_key: true, type: "BIGINT" }],
+          kind: "resource",
+          label: "orders",
+          variant: "lineage-redesigned",
+        }}
+      />,
+    );
+
+    expect(rendered.getByText("id")).toBeInTheDocument();
+    expect(rendered.getByText("PK")).toBeInTheDocument();
+    expect(rendered.getByText("BIGINT")).toBeInTheDocument();
+    expect(
+      rendered.container.querySelector(
+        ".td-lineage-resource-node__field-type-badge",
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("renders type badge without PK for non-PK fields", () => {
+    const rendered = render(
+      <LineageResourceNode
+        id="table-no-pk"
+        data={{
+          fields: [{ name: "name", type: "VARCHAR" }],
+          kind: "resource",
+          label: "users",
+          variant: "lineage-redesigned",
+        }}
+      />,
+    );
+
+    expect(rendered.getByText("name")).toBeInTheDocument();
+    expect(rendered.queryByText("PK")).not.toBeInTheDocument();
+    expect(rendered.getByText("VARCHAR")).toBeInTheDocument();
+    expect(
+      rendered.container.querySelector(
+        ".td-lineage-resource-node__field-type-badge",
+      ),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("query origin presentation", () => {
+  it.each(["en", "es"])(
+    "keeps the origin visible while selected and hovered in %s",
+    (locale) => {
+      const rendered = render(
+        <EdgeHoverContext.Provider value={{ hoveredNodeId: "origin" }}>
+          <LineageResourceNode
+            id="origin"
+            data={{
+              label: "Orders",
+              queryOrigin: "direct",
+              focusSelected: true,
+              variant: "lineage-redesigned",
+            }}
+          />
+        </EdgeHoverContext.Provider>,
+        { locale },
+      );
+      expect(
+        rendered.getByText(
+          locale === "es" ? "Origen de consulta" : "Query origin",
+        ),
+      ).toBeInTheDocument();
+      const card = rendered.container.querySelector(
+        ".td-lineage-resource-node",
+      );
+      expect(card).toHaveClass(
+        "td-lineage-resource-node--query-origin",
+        "td-lineage-resource-node--focus-selected",
+        "td-lineage-resource-node--hovered",
+      );
+      expect(rendered.getByText("Orders")).toBeInTheDocument();
+    },
+  );
+});