@datarecce/ui 0.1.40 → 0.2.0

package/recce-source/js/src/components/ui/dataGrid/schemaCells.tsx

@@ -1,142 +0,0 @@
-/**
- * @file schemaCells.tsx
- * @description Cell components and render functions for Schema grid views
- */
-
-import type { ICellRendererParams } from "ag-grid-community";
-import React from "react";
-import { ColumnNameCell } from "@/components/schema/ColumnNameCell";
-import { NodeData } from "@/lib/api/info";
-import { RowObjectType } from "@/lib/api/types";
-import type {
-  SchemaDiffRow,
-  SchemaRow,
-} from "@/lib/dataGrid/generators/toSchemaDataGrid";
-
-// ============================================================================
-// Render Functions for toSchemaDataGrid.ts
-// ============================================================================
-
-/**
- * Creates a cellRenderer function for schema diff column names
- */
-export function createColumnNameRenderer(
-  node: NodeData,
-  cllRunningMap?: Map<string, boolean>,
-  showMenu?: boolean,
-): (params: ICellRendererParams<SchemaDiffRow>) => React.ReactNode {
-  return (params) => {
-    const row = params.data;
-    if (!row) return null;
-    return (
-      <ColumnNameCell
-        model={node}
-        row={row}
-        cllRunning={cllRunningMap?.get(row.name) ?? false}
-        showMenu={showMenu}
-      />
-    );
-  };
-}
-
-/**
- * Creates a cellRenderer function for single-env schema column names
- */
-export function createSingleEnvColumnNameRenderer(
-  node: NodeData,
-  cllRunningMap?: Map<string, boolean>,
-  showMenu?: boolean,
-): (params: ICellRendererParams<SchemaRow>) => React.ReactNode {
-  return (params) => {
-    const row = params.data;
-    if (!row) return null;
-    return (
-      <ColumnNameCell
-        model={node}
-        row={row}
-        cllRunning={cllRunningMap?.get(row.name) ?? false}
-        singleEnv
-        showMenu={showMenu}
-      />
-    );
-  };
-}
-
-// ============================================================================
-// Merged Column Render Functions for Compressed Schema View
-// ============================================================================
-
-/**
- * Renders the merged index column.
- * Shows currentIndex for normal/added rows, baseIndex for removed rows.
- */
-export function renderIndexCell(
-  params: ICellRendererParams<RowObjectType>,
-): React.ReactNode {
-  if (!params.data) {
-    return null;
-  }
-  const row = params.data;
-
-  const { baseIndex, currentIndex } = row;
-  const isRemoved = currentIndex === undefined;
-  const value = isRemoved
-    ? baseIndex !== undefined
-      ? baseIndex
-      : "-"
-    : currentIndex !== undefined
-      ? currentIndex
-      : "-";
-  return <span>{value}</span>;
-}
-
-// Memoized version for performance optimization
-export const MemoizedRenderIndexCell = React.memo(renderIndexCell);
-MemoizedRenderIndexCell.displayName = "MemoizedRenderIndexCell";
-
-/**
- * Renders the merged type column with badges for type changes.
- * - Type changed: shows red badge (base) + green badge (current) inline
- * - Added row: shows currentType
- * - Removed row: shows baseType
- * - No change: shows currentType (same as baseType)
- */
-export function renderTypeCell(
-  params: ICellRendererParams<RowObjectType>,
-): React.ReactNode {
-  if (!params.data) {
-    return null;
-  }
-  const row = params.data;
-
-  const { baseType, currentType, baseIndex, currentIndex } = row;
-  const isAdded = baseIndex === undefined;
-  const isRemoved = currentIndex === undefined;
-  const isTypeChanged = !isAdded && !isRemoved && baseType !== currentType;
-
-  if (isTypeChanged) {
-    return (
-      <span>
-        <span
-          className="type-badge type-badge-removed"
-          title={`Base type: ${baseType}`}
-        >
-          {baseType}
-        </span>
-        <span
-          className="type-badge type-badge-added"
-          title={`Current type: ${currentType}`}
-        >
-          {currentType}
-        </span>
-      </span>
-    );
-  }
-
-  // For added rows, show currentType; for removed rows, show baseType
-  return <span>{isRemoved ? baseType : currentType}</span>;
-}
-
-// Memoized version for performance optimization
-export const MemoizedRenderTypeCell = React.memo(renderTypeCell);
-MemoizedRenderTypeCell.displayName = "MemoizedRenderTypeCell";

package/recce-source/js/src/components/ui/dataGrid/valueDiffCells.test.tsx

@@ -1,178 +0,0 @@
-/**
- * @file valueDiffCells.test.tsx
- * @description Tests for Value Diff cell components
- *
- * Tests cover:
- * - PrimaryKeyIndicatorCell rendering
- * - MatchedPercentCell formatting
- * - ValueDiffColumnNameCell rendering and context menu
- */
-
-import CssBaseline from "@mui/material/CssBaseline";
-import { ThemeProvider } from "@mui/material/styles";
-import { render, screen } from "@testing-library/react";
-import React, { ReactNode } from "react";
-import { lightTheme as theme } from "@/components/ui/mui-theme";
-import {
-  MatchedPercentCell,
-  PrimaryKeyIndicatorCell,
-  ValueDiffColumnNameCell,
-} from "./valueDiffCells";
-
-// ============================================================================
-// Mocks
-// ============================================================================
-
-jest.mock("@/lib/hooks/RecceActionContext", () => ({
-  useRecceActionContext: () => ({
-    runAction: jest.fn(),
-  }),
-}));
-
-jest.mock("@/lib/hooks/RecceInstanceContext", () => ({
-  useRecceInstanceContext: () => ({
-    featureToggles: {
-      disableDatabaseQuery: false,
-    },
-  }),
-}));
-
-// ============================================================================
-// Test Wrapper
-// ============================================================================
-
-/**
- * Test wrapper that provides MUI ThemeProvider context
- */
-function TestWrapper({ children }: { children: ReactNode }) {
-  return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      {children}
-    </ThemeProvider>
-  );
-}
-
-/**
- * Custom render function that includes providers
- */
-function renderWithProviders(ui: React.ReactElement) {
-  return render(ui, { wrapper: TestWrapper });
-}
-
-// ============================================================================
-// PrimaryKeyIndicatorCell Tests
-// ============================================================================
-
-describe("PrimaryKeyIndicatorCell", () => {
-  test("renders key icon when column is a primary key", () => {
-    const { container } = renderWithProviders(
-      <PrimaryKeyIndicatorCell
-        columnName="user_id"
-        primaryKeys={["user_id", "order_id"]}
-      />,
-    );
-
-    // Check that icon is rendered (VscKey icon)
-    const icon = container.querySelector("svg");
-    expect(icon).toBeInTheDocument();
-  });
-
-  test("renders empty when column is not a primary key", () => {
-    const { container } = renderWithProviders(
-      <PrimaryKeyIndicatorCell
-        columnName="email"
-        primaryKeys={["user_id", "order_id"]}
-      />,
-    );
-
-    // Should not have an icon
-    const icon = container.querySelector("svg");
-    expect(icon).not.toBeInTheDocument();
-  });
-
-  test("handles empty primary keys array", () => {
-    const { container } = renderWithProviders(
-      <PrimaryKeyIndicatorCell columnName="user_id" primaryKeys={[]} />,
-    );
-
-    const icon = container.querySelector("svg");
-    expect(icon).not.toBeInTheDocument();
-  });
-});
-
-// ============================================================================
-// MatchedPercentCell Tests
-// ============================================================================
-
-describe("MatchedPercentCell", () => {
-  test("renders 'N/A' for null value", () => {
-    renderWithProviders(<MatchedPercentCell value={null} />);
-    expect(screen.getByText("N/A")).toBeInTheDocument();
-  });
-
-  test("renders 'N/A' for undefined value", () => {
-    renderWithProviders(<MatchedPercentCell value={undefined} />);
-    expect(screen.getByText("N/A")).toBeInTheDocument();
-  });
-
-  test("renders '100.00 %' for 1.0", () => {
-    renderWithProviders(<MatchedPercentCell value={1.0} />);
-    expect(screen.getByText("100.00 %")).toBeInTheDocument();
-  });
-
-  test("renders '0.00 %' for 0", () => {
-    renderWithProviders(<MatchedPercentCell value={0} />);
-    expect(screen.getByText("0.00 %")).toBeInTheDocument();
-  });
-
-  test("renders '~99.99 %' for values slightly below 100%", () => {
-    renderWithProviders(<MatchedPercentCell value={0.99995} />);
-    expect(screen.getByText("~99.99 %")).toBeInTheDocument();
-  });
-
-  test("renders '~0.01 %' for values slightly above 0%", () => {
-    renderWithProviders(<MatchedPercentCell value={0.00005} />);
-    expect(screen.getByText("~0.01 %")).toBeInTheDocument();
-  });
-
-  test("renders formatted percentage for normal values", () => {
-    renderWithProviders(<MatchedPercentCell value={0.9542} />);
-    expect(screen.getByText("95.42 %")).toBeInTheDocument();
-  });
-
-  test("renders formatted percentage with two decimal places", () => {
-    renderWithProviders(<MatchedPercentCell value={0.12345} />);
-    expect(screen.getByText("12.35 %")).toBeInTheDocument();
-  });
-});
-
-// ============================================================================
-// ValueDiffColumnNameCell Tests
-// ============================================================================
-
-describe("ValueDiffColumnNameCell", () => {
-  test("renders column name", () => {
-    renderWithProviders(
-      <ValueDiffColumnNameCell
-        column="email"
-        params={{ model: "users", primary_key: "id" }}
-      />,
-    );
-
-    expect(screen.getByText("email")).toBeInTheDocument();
-  });
-
-  test("renders context menu trigger button", () => {
-    renderWithProviders(
-      <ValueDiffColumnNameCell
-        column="email"
-        params={{ model: "users", primary_key: "id" }}
-      />,
-    );
-
-    // Should have a button for the context menu
-    const button = screen.getByRole("button");
-    expect(button).toBeInTheDocument();
-  });
-});

package/recce-source/js/src/components/ui/dataGrid/valueDiffCells.tsx

@@ -1,275 +0,0 @@
-/**
- * @file valueDiffCells.tsx
- * @description Cell components and render functions for Value Diff summary grid
- *
- * Provides specialized cell renderers for the value diff summary view:
- * - PrimaryKeyIndicatorCell: Shows key icon for primary key columns
- * - ValueDiffColumnNameCell: Column name with context menu for drill-down
- * - MatchedPercentCell: Formatted percentage display
- *
- * Also exports render functions for use in toValueDataGrid.ts generator.
- */
-
-import Box from "@mui/material/Box";
-import IconButton from "@mui/material/IconButton";
-import ListSubheader from "@mui/material/ListSubheader";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import type { ICellRendererParams } from "ag-grid-community";
-import React, { MouseEvent, useState } from "react";
-import { PiDotsThreeVertical } from "react-icons/pi";
-import { VscKey } from "react-icons/vsc";
-import { RowObjectType } from "@/lib/api/types";
-import { ValueDiffParams } from "@/lib/api/valuediff";
-import {
-  RecceActionOptions,
-  useRecceActionContext,
-} from "@/lib/hooks/RecceActionContext";
-import { useRecceInstanceContext } from "@/lib/hooks/RecceInstanceContext";
-
-// ============================================================================
-// PrimaryKeyIndicatorCell
-// ============================================================================
-
-export interface PrimaryKeyIndicatorCellProps {
-  /** The column name to check */
-  columnName: string;
-  /** List of primary key column names */
-  primaryKeys: string[];
-}
-
-/**
- * Cell component that displays a key icon for primary key columns
- *
- * @example
- * <PrimaryKeyIndicatorCell
- *   columnName="user_id"
- *   primaryKeys={["user_id", "order_id"]}
- * />
- */
-export function PrimaryKeyIndicatorCell({
-  columnName,
-  primaryKeys,
-}: PrimaryKeyIndicatorCellProps) {
-  const isPrimaryKey = primaryKeys.includes(columnName);
-
-  return (
-    <Box
-      sx={{
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        height: "100%",
-      }}
-    >
-      {isPrimaryKey && <VscKey />}
-    </Box>
-  );
-}
-
-// ============================================================================
-// ValueDiffColumnNameCell
-// ============================================================================
-
-export interface ValueDiffColumnNameCellProps {
-  /** The column name to display */
-  column: string;
-  /** Parameters from the value_diff run */
-  params: ValueDiffParams;
-}
-
-/**
- * Cell component for column names with context menu for drill-down actions
- *
- * @description Renders the column name with a context menu that provides:
- * - "Show mismatched values..." - Opens form to configure detail view
- * - "Show mismatched values for '{column}'" - Directly shows mismatches for this column
- *
- * @example
- * <ValueDiffColumnNameCell
- *   column="email"
- *   params={{ model: "users", primary_key: "id" }}
- * />
- */
-export function ValueDiffColumnNameCell({
-  params,
-  column,
-}: ValueDiffColumnNameCellProps) {
-  const { runAction } = useRecceActionContext();
-  const { featureToggles } = useRecceInstanceContext();
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  const menuOpen = Boolean(anchorEl);
-
-  const handleMenuClick = (event: MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleMenuClose = () => {
-    setAnchorEl(null);
-  };
-
-  const handleValueDiffDetail = (
-    paramsOverride?: Partial<ValueDiffParams>,
-    options?: RecceActionOptions,
-  ) => {
-    const newParams = {
-      ...params,
-      ...paramsOverride,
-    };
-
-    runAction("value_diff_detail", newParams, options);
-  };
-
-  return (
-    <Box sx={{ display: "flex" }}>
-      <Box
-        sx={{
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap",
-        }}
-      >
-        {column}
-      </Box>
-      <Box sx={{ flex: 1 }} />
-
-      <IconButton
-        aria-label="Column options"
-        className="row-context-menu"
-        size="small"
-        disabled={featureToggles.disableDatabaseQuery}
-        onClick={handleMenuClick}
-      >
-        <PiDotsThreeVertical />
-      </IconButton>
-      <Menu
-        anchorEl={anchorEl}
-        open={menuOpen}
-        onClose={handleMenuClose}
-        slotProps={{
-          list: { sx: { lineHeight: "20px" } },
-        }}
-      >
-        <ListSubheader sx={{ fontSize: "8pt", lineHeight: "20px" }}>
-          Action
-        </ListSubheader>
-        <MenuItem
-          onClick={() => {
-            handleValueDiffDetail({}, { showForm: true });
-            handleMenuClose();
-          }}
-          sx={{ fontSize: "10pt" }}
-        >
-          Show mismatched values...
-        </MenuItem>
-        <MenuItem
-          onClick={() => {
-            handleValueDiffDetail({ columns: [column] }, { showForm: false });
-            handleMenuClose();
-          }}
-          sx={{ fontSize: "10pt" }}
-        >
-          Show mismatched values for &apos;{column}&apos;
-        </MenuItem>
-      </Menu>
-    </Box>
-  );
-}
-
-// ============================================================================
-// MatchedPercentCell
-// ============================================================================
-
-export interface MatchedPercentCellProps {
-  /** The percentage value (0-1 scale) */
-  value: number | undefined | null;
-}
-
-/**
- * Cell component for displaying match percentage with special formatting
- *
- * @description Formats the percentage value with special handling for edge cases:
- * - Values > 99.99% but < 100%: Shows "~99.99 %"
- * - Values > 0% but < 0.01%: Shows "~0.01 %"
- * - null/undefined: Shows "N/A"
- * - Other values: Shows "XX.XX %"
- *
- * @example
- * <MatchedPercentCell value={0.9542} />  // "95.42 %"
- * <MatchedPercentCell value={0.99999} /> // "~99.99 %"
- * <MatchedPercentCell value={null} />    // "N/A"
- */
-export function MatchedPercentCell({ value }: MatchedPercentCellProps) {
-  let displayValue = "N/A";
-
-  if (value != null) {
-    if (value > 0.9999 && value < 1) {
-      displayValue = "~99.99 %";
-    } else if (value < 0.0001 && value > 0) {
-      displayValue = "~0.01 %";
-    } else {
-      displayValue = `${(value * 100).toFixed(2)} %`;
-    }
-  }
-
-  return <Box sx={{ textAlign: "right" }}>{displayValue}</Box>;
-}
-
-// ============================================================================
-// Render Functions for toValueDataGrid.ts
-// ============================================================================
-
-/**
- * Creates a cellRenderer function for the primary key indicator column
- *
- * @param primaryKeys - List of primary key column names
- * @returns A cellRenderer function compatible with AG Grid
- */
-export function createPrimaryKeyIndicatorRenderer(
-  primaryKeys: string[],
-): (params: ICellRendererParams<RowObjectType>) => React.ReactNode {
-  return (params) => {
-    const row = params.data;
-    if (!row) return null;
-    return (
-      <PrimaryKeyIndicatorCell
-        columnName={String(row["0"])}
-        primaryKeys={primaryKeys}
-      />
-    );
-  };
-}
-
-/**
- * Creates a cellRenderer function for the column name column
- *
- * @param params - ValueDiffParams from the run
- * @returns A cellRenderer function compatible with AG Grid
- */
-export function createColumnNameRenderer(
-  params: ValueDiffParams,
-): (cellParams: ICellRendererParams<RowObjectType>) => React.ReactNode {
-  return (cellParams) => {
-    const row = cellParams.data;
-    const field = cellParams.colDef?.field ?? "";
-    if (!row) return null;
-    return (
-      <ValueDiffColumnNameCell column={String(row[field])} params={params} />
-    );
-  };
-}
-
-/**
- * cellRenderer function for the matched percentage column
- *
- * @param params - ICellRendererParams from AG Grid
- * @returns React node displaying formatted percentage
- */
-export function renderMatchedPercentCell(
-  params: ICellRendererParams<RowObjectType>,
-): React.ReactNode {
-  const row = params.data;
-  const field = params.colDef?.field ?? "";
-  if (!row) return null;
-  return <MatchedPercentCell value={row[field] as number} />;
-}