@datarecce/ui 0.1.30 → 0.1.32

package/recce-source/js/src/components/routing/LineageStatePreservation.test.tsx

@@ -0,0 +1,311 @@
+/**
+ * Integration tests for Lineage State Preservation
+ *
+ * Tests that the lineage page remains mounted (preserving React state)
+ * when navigating between tabs, using the parallel route pattern.
+ */
+
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React, { useEffect, useRef, useState } from "react";
+
+/**
+ * Mock component that simulates LineagePage with internal state
+ * This helps us verify that state is preserved across navigation
+ */
+const MockLineagePageWithState = ({
+  onMount,
+  onUnmount,
+}: {
+  onMount?: () => void;
+  onUnmount?: () => void;
+}) => {
+  const [zoomLevel, setZoomLevel] = useState(1);
+  const [selectedNodes, setSelectedNodes] = useState<string[]>([]);
+  const mountCountRef = useRef(0);
+
+  useEffect(() => {
+    mountCountRef.current += 1;
+    onMount?.();
+
+    return () => {
+      onUnmount?.();
+    };
+  }, [onMount, onUnmount]);
+
+  return (
+    <div data-testid="lineage-page">
+      <div data-testid="mount-count">{mountCountRef.current}</div>
+      <div data-testid="zoom-level">{zoomLevel}</div>
+      <div data-testid="selected-nodes">{selectedNodes.join(",")}</div>
+      <button
+        data-testid="zoom-in"
+        onClick={() => setZoomLevel((z) => z + 0.1)}
+      >
+        Zoom In
+      </button>
+      <button
+        data-testid="select-node"
+        onClick={() => setSelectedNodes((n) => [...n, `node-${n.length + 1}`])}
+      >
+        Select Node
+      </button>
+    </div>
+  );
+};
+
+/**
+ * Mock MainLayout that simulates the parallel route behavior
+ * The lineage slot is always rendered, visibility controlled by CSS
+ */
+const MockMainLayout = ({
+  lineageSlot,
+  children,
+  currentPath,
+}: {
+  lineageSlot: React.ReactNode;
+  children: React.ReactNode;
+  currentPath: string;
+}) => {
+  const isLineageRoute = currentPath === "/lineage" || currentPath === "/";
+
+  return (
+    <div data-testid="main-layout">
+      {/* Lineage parallel route - always mounted, visibility controlled */}
+      <div
+        data-testid="lineage-slot"
+        style={{ display: isLineageRoute ? "block" : "none" }}
+      >
+        {lineageSlot}
+      </div>
+
+      {/* Regular children for other routes */}
+      {!isLineageRoute && <div data-testid="children-slot">{children}</div>}
+    </div>
+  );
+};
+
+describe("Lineage State Preservation", () => {
+  it("keeps lineage slot mounted when navigating away", () => {
+    const onMount = jest.fn();
+    const onUnmount = jest.fn();
+
+    const { rerender } = render(
+      <MockMainLayout
+        currentPath="/lineage"
+        lineageSlot={
+          <MockLineagePageWithState onMount={onMount} onUnmount={onUnmount} />
+        }
+      >
+        <div>Other Content</div>
+      </MockMainLayout>,
+    );
+
+    // Lineage should be mounted initially
+    expect(onMount).toHaveBeenCalledTimes(1);
+    expect(screen.getByTestId("lineage-page")).toBeInTheDocument();
+    expect(screen.getByTestId("lineage-slot")).toHaveStyle({
+      display: "block",
+    });
+
+    // Navigate to /query
+    rerender(
+      <MockMainLayout
+        currentPath="/query"
+        lineageSlot={
+          <MockLineagePageWithState onMount={onMount} onUnmount={onUnmount} />
+        }
+      >
+        <div data-testid="query-content">Query Content</div>
+      </MockMainLayout>,
+    );
+
+    // Lineage should still be in DOM but hidden
+    expect(onUnmount).not.toHaveBeenCalled();
+    expect(screen.getByTestId("lineage-page")).toBeInTheDocument();
+    expect(screen.getByTestId("lineage-slot")).toHaveStyle({ display: "none" });
+
+    // Mount count should still be 1 (not remounted)
+    expect(screen.getByTestId("mount-count")).toHaveTextContent("1");
+  });
+
+  it("preserves zoom state when navigating between tabs", async () => {
+    const user = userEvent.setup();
+
+    const { rerender } = render(
+      <MockMainLayout
+        currentPath="/lineage"
+        lineageSlot={<MockLineagePageWithState />}
+      >
+        <div>Other Content</div>
+      </MockMainLayout>,
+    );
+
+    // Initial zoom level
+    expect(screen.getByTestId("zoom-level")).toHaveTextContent("1");
+
+    // Zoom in twice
+    await user.click(screen.getByTestId("zoom-in"));
+    await user.click(screen.getByTestId("zoom-in"));
+
+    expect(screen.getByTestId("zoom-level")).toHaveTextContent("1.2");
+
+    // Navigate to /checks
+    rerender(
+      <MockMainLayout
+        currentPath="/checks"
+        lineageSlot={<MockLineagePageWithState />}
+      >
+        <div data-testid="checks-content">Checks Content</div>
+      </MockMainLayout>,
+    );
+
+    // Zoom level should be preserved (component is hidden but not unmounted)
+    expect(screen.getByTestId("zoom-level")).toHaveTextContent("1.2");
+
+    // Navigate back to /lineage
+    rerender(
+      <MockMainLayout
+        currentPath="/lineage"
+        lineageSlot={<MockLineagePageWithState />}
+      >
+        <div>Other Content</div>
+      </MockMainLayout>,
+    );
+
+    // Zoom level should still be 1.2
+    expect(screen.getByTestId("zoom-level")).toHaveTextContent("1.2");
+    expect(screen.getByTestId("lineage-slot")).toHaveStyle({
+      display: "block",
+    });
+  });
+
+  it("preserves selected nodes when navigating between tabs", async () => {
+    const user = userEvent.setup();
+
+    const { rerender } = render(
+      <MockMainLayout
+        currentPath="/lineage"
+        lineageSlot={<MockLineagePageWithState />}
+      >
+        <div>Other Content</div>
+      </MockMainLayout>,
+    );
+
+    // Select some nodes
+    await user.click(screen.getByTestId("select-node"));
+    await user.click(screen.getByTestId("select-node"));
+
+    expect(screen.getByTestId("selected-nodes")).toHaveTextContent(
+      "node-1,node-2",
+    );
+
+    // Navigate away
+    rerender(
+      <MockMainLayout
+        currentPath="/query"
+        lineageSlot={<MockLineagePageWithState />}
+      >
+        <div>Query Content</div>
+      </MockMainLayout>,
+    );
+
+    // Navigate back
+    rerender(
+      <MockMainLayout
+        currentPath="/lineage"
+        lineageSlot={<MockLineagePageWithState />}
+      >
+        <div>Other Content</div>
+      </MockMainLayout>,
+    );
+
+    // Selected nodes should be preserved
+    expect(screen.getByTestId("selected-nodes")).toHaveTextContent(
+      "node-1,node-2",
+    );
+  });
+
+  it("does not remount lineage component during navigation cycle", () => {
+    const onMount = jest.fn();
+    const onUnmount = jest.fn();
+
+    const { rerender } = render(
+      <MockMainLayout
+        currentPath="/lineage"
+        lineageSlot={
+          <MockLineagePageWithState onMount={onMount} onUnmount={onUnmount} />
+        }
+      >
+        <div>Other Content</div>
+      </MockMainLayout>,
+    );
+
+    expect(onMount).toHaveBeenCalledTimes(1);
+
+    // Navigate through multiple routes
+    const routes = ["/query", "/checks", "/lineage", "/query", "/lineage"];
+
+    routes.forEach((route) => {
+      rerender(
+        <MockMainLayout
+          currentPath={route}
+          lineageSlot={
+            <MockLineagePageWithState onMount={onMount} onUnmount={onUnmount} />
+          }
+        >
+          <div>{route} Content</div>
+        </MockMainLayout>,
+      );
+    });
+
+    // Should still only have mounted once
+    expect(onMount).toHaveBeenCalledTimes(1);
+    expect(onUnmount).not.toHaveBeenCalled();
+    expect(screen.getByTestId("mount-count")).toHaveTextContent("1");
+  });
+
+  it("shows children content when not on lineage route", () => {
+    render(
+      <MockMainLayout
+        currentPath="/checks"
+        lineageSlot={<MockLineagePageWithState />}
+      >
+        <div data-testid="checks-page">Checks Page Content</div>
+      </MockMainLayout>,
+    );
+
+    expect(screen.getByTestId("checks-page")).toBeInTheDocument();
+    expect(screen.getByTestId("children-slot")).toBeInTheDocument();
+  });
+
+  it("hides children content when on lineage route", () => {
+    render(
+      <MockMainLayout
+        currentPath="/lineage"
+        lineageSlot={<MockLineagePageWithState />}
+      >
+        <div data-testid="other-content">Other Content</div>
+      </MockMainLayout>,
+    );
+
+    expect(screen.queryByTestId("children-slot")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("other-content")).not.toBeInTheDocument();
+  });
+});
+
+describe("Parallel Route Visibility Logic", () => {
+  it.each([
+    ["/lineage", true],
+    ["/", true],
+    ["/query", false],
+    ["/checks", false],
+    ["/checks?id=abc", false],
+    ["/runs/123", false],
+  ])("isLineageRoute for path '%s' should be %s", (path, expected) => {
+    const pathname = path.split("?")[0]; // Remove query params
+    const isLineageRoute = pathname === "/lineage" || pathname === "/";
+
+    expect(isLineageRoute).toBe(expected);
+  });
+});

package/recce-source/js/src/components/routing/Navigation.test.tsx

@@ -0,0 +1,256 @@
+/**
+ * Integration tests for tab navigation
+ *
+ * Tests that navigation between main routes works correctly
+ */
+
+import CssBaseline from "@mui/material/CssBaseline";
+import { ThemeProvider } from "@mui/material/styles";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen, waitFor } from "@testing-library/react";
+import React, { ReactNode } from "react";
+import { lightTheme as theme } from "@/components/ui/mui-theme";
+
+// Create a fresh QueryClient for each test
+const createTestQueryClient = () =>
+  new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+        // Disable refetching to avoid act() warnings
+        refetchOnWindowFocus: false,
+        refetchOnMount: false,
+      },
+    },
+  });
+
+// Mock the context providers and their values
+const mockLineageGraphContext = {
+  lineageGraph: null,
+  retchLineageGraph: jest.fn(),
+  envInfo: null,
+  reviewMode: false,
+  cloudMode: false,
+  fileMode: false,
+  fileName: null,
+  isDemoSite: false,
+  isCodespace: false,
+  error: null,
+  supportTasks: null,
+  isActionAvailable: jest.fn(() => true),
+  isLoading: false,
+  runsAggregated: null,
+  refetchRunsAggregated: jest.fn(),
+};
+
+const mockRecceInstanceContext = {
+  featureToggles: {
+    mode: null,
+    disableShare: false,
+  },
+};
+
+let mockRecceServerFlagData = {
+  single_env_onboarding: false,
+};
+
+// Mock the hooks used by NavBar
+jest.mock("@/lib/hooks/LineageGraphContext", () => ({
+  useLineageGraphContext: () => mockLineageGraphContext,
+}));
+
+jest.mock("@/lib/hooks/RecceInstanceContext", () => ({
+  useRecceInstanceContext: () => mockRecceInstanceContext,
+}));
+
+jest.mock("@/lib/hooks/useRecceServerFlag", () => ({
+  useRecceServerFlag: () => ({
+    data: mockRecceServerFlagData,
+    isLoading: false,
+  }),
+}));
+
+jest.mock("@/lib/api/track", () => ({
+  trackNavigation: jest.fn(),
+}));
+
+jest.mock("@/lib/api/checks", () => ({
+  listChecks: jest.fn(() => Promise.resolve([])),
+}));
+
+// Mock components that might cause issues in tests
+jest.mock("@/components/app/EnvInfo", () => ({
+  EnvInfo: () => <div data-testid="env-info">EnvInfo</div>,
+}));
+
+jest.mock("@/components/app/Filename", () => ({
+  Filename: () => <div data-testid="filename">Filename</div>,
+}));
+
+jest.mock("@/components/app/StateExporter", () => ({
+  StateExporter: () => <div data-testid="state-exporter">StateExporter</div>,
+}));
+
+jest.mock("@/components/app/StateSharing", () => ({
+  TopLevelShare: () => <div data-testid="top-level-share">TopLevelShare</div>,
+}));
+
+jest.mock("@/components/app/StateSynchronizer", () => ({
+  StateSynchronizer: () => (
+    <div data-testid="state-synchronizer">StateSynchronizer</div>
+  ),
+}));
+
+// Import after mocks are set up
+import NavBar from "app/(mainComponents)/NavBar";
+
+/**
+ * Test wrapper that provides all necessary context providers
+ */
+function TestWrapper({ children }: { children: ReactNode }) {
+  const queryClient = createTestQueryClient();
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        {children}
+      </ThemeProvider>
+    </QueryClientProvider>
+  );
+}
+
+/**
+ * Custom render function that includes providers
+ */
+function renderWithProviders(ui: React.ReactElement) {
+  return render(ui, { wrapper: TestWrapper });
+}
+
+describe("NavBar Tab Navigation", () => {
+  beforeEach(() => {
+    global.mockNextNavigation.reset();
+    jest.clearAllMocks();
+    // Reset the mock data
+    mockRecceServerFlagData = {
+      single_env_onboarding: false,
+    };
+  });
+
+  it("renders all navigation tabs", async () => {
+    global.mockNextNavigation.setPathname("/lineage");
+
+    renderWithProviders(<NavBar />);
+
+    // Wait for any async state updates to complete
+    await waitFor(() => {
+      expect(screen.getByText("Lineage")).toBeInTheDocument();
+    });
+
+    expect(screen.getByText("Query")).toBeInTheDocument();
+  });
+
+  it("highlights Lineage tab when on /lineage route", async () => {
+    global.mockNextNavigation.setPathname("/lineage");
+
+    renderWithProviders(<NavBar />);
+
+    await waitFor(() => {
+      const lineageTab = screen
+        .getByText("Lineage")
+        .closest("button, a, [role='tab']");
+      expect(lineageTab).toBeInTheDocument();
+    });
+  });
+
+  it("hides Query tab when single_env_onboarding is true", async () => {
+    // Update mock data before rendering
+    mockRecceServerFlagData.single_env_onboarding = true;
+
+    global.mockNextNavigation.setPathname("/lineage");
+
+    renderWithProviders(<NavBar />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Lineage")).toBeInTheDocument();
+    });
+
+    // Query tab should be hidden or not visible
+    const queryTab = screen.queryByText("Query");
+    // Either the tab is not in document, or it has hidden attribute
+    if (queryTab) {
+      const parentElement = queryTab.closest("[hidden], [data-hidden='true']");
+      expect(parentElement).toBeTruthy();
+    }
+  });
+
+  it("tabs have correct href attributes for navigation", async () => {
+    global.mockNextNavigation.setPathname("/lineage");
+
+    renderWithProviders(<NavBar />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Lineage")).toBeInTheDocument();
+    });
+
+    const lineageLink = screen.getByText("Lineage").closest("a");
+    const queryLink = screen.getByText("Query").closest("a");
+
+    expect(lineageLink).toHaveAttribute("href", "/lineage");
+    expect(queryLink).toHaveAttribute("href", "/query");
+  });
+
+  it("renders correctly on /query route", async () => {
+    global.mockNextNavigation.setPathname("/query");
+
+    renderWithProviders(<NavBar />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Query")).toBeInTheDocument();
+    });
+  });
+});
+
+describe("Route Path Matching", () => {
+  beforeEach(() => {
+    global.mockNextNavigation.reset();
+  });
+
+  it("correctly identifies /lineage as lineage route", () => {
+    const pathname = "/lineage";
+    const isLineageRoute = pathname === "/lineage" || pathname === "/";
+
+    expect(isLineageRoute).toBe(true);
+  });
+
+  it("correctly identifies / as lineage route", () => {
+    const pathname = "/";
+    // @ts-expect-error This is valid test code
+    const isLineageRoute = pathname === "/lineage" || pathname === "/";
+
+    expect(isLineageRoute).toBe(true);
+  });
+
+  it("correctly identifies /query as not lineage route", () => {
+    const pathname = "/query";
+    // @ts-expect-error This is valid test code
+    const isLineageRoute = pathname === "/lineage" || pathname === "/";
+
+    expect(isLineageRoute).toBe(false);
+  });
+
+  it("correctly identifies /checks as not lineage route", () => {
+    const pathname = "/checks";
+    // @ts-expect-error This is valid test code
+    const isLineageRoute = pathname === "/lineage" || pathname === "/";
+
+    expect(isLineageRoute).toBe(false);
+  });
+
+  it("correctly identifies /checks?id=xxx as checks route", () => {
+    const pathname = "/checks";
+    const isChecksRoute = pathname.startsWith("/checks");
+
+    expect(isChecksRoute).toBe(true);
+  });
+});

package/recce-source/js/src/components/rowcount/RowCountDiffResultView.tsx

@@ -0,0 +1,109 @@
+import Box from "@mui/material/Box";
+import { useTheme } from "@mui/material/styles";
+import { forwardRef, Ref, useMemo } from "react";
+import { isRowCountDiffRun, isRowCountRun, Run } from "@/lib/api/types";
+import { createDataGrid } from "@/lib/dataGrid/dataGridFactory";
+import {
+  type DataGridHandle,
+  EmptyRowsRenderer,
+  ScreenshotDataGrid,
+} from "../data-grid/ScreenshotDataGrid";
+import { RunResultViewProps } from "../run/types";
+
+// ============================================================================
+// Shared Component
+// ============================================================================
+
+interface RowCountGridViewProps {
+  run: Run;
+  typeGuard: (run: Run) => boolean;
+  expectedType: string;
+}
+
+function _RowCountGridView(
+  { run, typeGuard, expectedType }: RowCountGridViewProps,
+  ref: Ref<DataGridHandle>,
+) {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
+
+  if (!typeGuard(run)) {
+    throw new Error(`Run type must be ${expectedType}`);
+  }
+
+  const gridData = useMemo(() => {
+    return createDataGrid(run) ?? { columns: [], rows: [] };
+  }, [run]);
+
+  if (gridData.rows.length === 0) {
+    return (
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          bgcolor: isDark ? "grey.900" : "grey.50",
+          height: "100%",
+        }}
+      >
+        No nodes matched
+      </Box>
+    );
+  }
+
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", height: "100%" }}>
+      <ScreenshotDataGrid
+        ref={ref}
+        style={{
+          blockSize: "auto",
+          maxHeight: "100%",
+          overflow: "auto",
+          fontSize: "0.875rem",
+          borderWidth: 1,
+        }}
+        columns={gridData.columns}
+        rows={gridData.rows}
+        renderers={{ noRowsFallback: <EmptyRowsRenderer /> }}
+        className="rdg-light"
+      />
+    </Box>
+  );
+}
+
+const RowCountGridView = forwardRef(_RowCountGridView);
+
+// ============================================================================
+// Exported Components
+// ============================================================================
+
+function _RowCountDiffResultView(
+  { run }: RunResultViewProps,
+  ref: Ref<DataGridHandle>,
+) {
+  return (
+    <RowCountGridView
+      ref={ref}
+      run={run}
+      typeGuard={isRowCountDiffRun}
+      expectedType="row_count_diff"
+    />
+  );
+}
+
+function _RowCountResultView(
+  { run }: RunResultViewProps,
+  ref: Ref<DataGridHandle>,
+) {
+  return (
+    <RowCountGridView
+      ref={ref}
+      run={run}
+      typeGuard={isRowCountRun}
+      expectedType="row_count"
+    />
+  );
+}
+
+export const RowCountDiffResultView = forwardRef(_RowCountDiffResultView);
+export const RowCountResultView = forwardRef(_RowCountResultView);

package/recce-source/js/src/components/rowcount/delta.ts

@@ -0,0 +1,11 @@
+export function deltaPercentageString(base: number, current: number) {
+  if (base < current) {
+    const p = ((current - base) / base) * 100;
+    return `+${p >= 0.1 ? p.toFixed(1) : " <0.1 "}%`;
+  } else if (base > current) {
+    const p = ((base - current) / base) * 100;
+    return `-${p >= 0.1 ? p.toFixed(1) : " <0.1 "}%`;
+  } else {
+    return "0 %";
+  }
+}