@datarecce/ui 0.1.41 → 0.2.0

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

@@ -1,311 +0,0 @@
-/**
- * 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

@@ -1,256 +0,0 @@
-/**
- * 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

@@ -1,108 +0,0 @@
-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 /> }}
-      />
-    </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);