@datarecce/ui 0.1.29 → 0.1.31

package/recce-source/js/src/components/run/RunView.tsx

@@ -0,0 +1,196 @@
+import MuiAlert from "@mui/material/Alert";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import CircularProgress from "@mui/material/CircularProgress";
+import Stack from "@mui/material/Stack";
+import { useTheme } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
+import React, { forwardRef } from "react";
+import { ErrorBoundary } from "@/components/errorboundary/ErrorBoundary";
+import {
+  RefTypes,
+  RegistryEntry,
+  ViewOptionTypes,
+} from "@/components/run/registry";
+import { Run } from "@/lib/api/types";
+import ResultErrorFallback from "@/lib/result/ResultErrorFallback";
+import { RunResultViewProps } from "./types";
+
+// Define an error type
+interface ApiError {
+  response?: {
+    data?: {
+      detail?: string;
+    };
+  };
+}
+
+interface RunViewProps<VO = ViewOptionTypes> {
+  isRunning?: boolean;
+  run?: Run;
+  error?: Error | null;
+  progress?: Run["progress"];
+  isAborting?: boolean;
+  isCheckDetail?: boolean;
+  onCancel?: () => void;
+  onExecuteRun?: () => void;
+  viewOptions?: VO;
+  onViewOptionsChanged?: (viewOptions: VO) => void;
+  RunResultView?: RegistryEntry["RunResultView"] | undefined;
+  children?: (params: RunResultViewProps) => React.ReactNode;
+}
+
+export const RunView = forwardRef(
+  (
+    {
+      isRunning,
+      isAborting,
+      progress,
+      error,
+      run,
+      onCancel,
+      viewOptions,
+      onViewOptionsChanged,
+      RunResultView,
+      children,
+      onExecuteRun,
+    }: RunViewProps,
+    ref: React.Ref<RefTypes>,
+  ) => {
+    const theme = useTheme();
+    const errorMessage =
+      (error as ApiError | undefined)?.response?.data?.detail ?? run?.error;
+
+    if (errorMessage) {
+      return (
+        <MuiAlert severity="error">
+          Error: <span className="no-track-pii-safe">{errorMessage}</span>
+        </MuiAlert>
+      );
+    }
+
+    if (isRunning ?? run?.status === "running") {
+      let loadingMessage = "Loading...";
+      if (progress?.message) {
+        loadingMessage = progress.message;
+      } else if (run?.progress?.message) {
+        loadingMessage = run.progress.message;
+      }
+
+      const progressValue =
+        progress?.percentage != null ? progress.percentage * 100 : undefined;
+
+      return (
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            p: "1rem",
+            height: "100%",
+            bgcolor: theme.palette.mode === "dark" ? "grey.900" : "grey.50",
+          }}
+        >
+          <Stack spacing={2} alignItems="center">
+            <Stack direction="row" alignItems="center" spacing={1}>
+              {progressValue == null ? (
+                <CircularProgress size={32} />
+              ) : (
+                <Box sx={{ position: "relative", display: "inline-flex" }}>
+                  <CircularProgress
+                    variant="determinate"
+                    value={progressValue}
+                    size={32}
+                  />
+                  <Box
+                    sx={{
+                      top: 0,
+                      left: 0,
+                      bottom: 0,
+                      right: 0,
+                      position: "absolute",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                    }}
+                  >
+                    <Typography
+                      variant="caption"
+                      component="div"
+                      sx={{ fontSize: "0.6rem" }}
+                    >
+                      {`${Math.round(progressValue)}%`}
+                    </Typography>
+                  </Box>
+                </Box>
+              )}
+
+              {isAborting ? (
+                <Typography>Aborting...</Typography>
+              ) : (
+                <Typography className="no-track-pii-safe">
+                  {loadingMessage}
+                </Typography>
+              )}
+            </Stack>
+            {!isAborting && (
+              <Button variant="contained" onClick={onCancel} size="small">
+                Cancel
+              </Button>
+            )}
+          </Stack>
+        </Box>
+      );
+    }
+
+    if (!run) {
+      return (
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            bgcolor: theme.palette.mode === "dark" ? "grey.900" : "grey.50",
+            height: "100%",
+          }}
+        >
+          <CircularProgress size={32} />
+        </Box>
+      );
+    }
+
+    if (children && RunResultView) {
+      throw new Error(
+        "RunView requires either a children or a RunResultView prop, but not both.",
+      );
+    }
+    if (!children && !RunResultView) {
+      throw new Error(
+        "RunView requires at least one of children or RunResultView prop.",
+      );
+    }
+
+    return (
+      <Box
+        sx={{
+          height: "100%",
+          contain: "layout",
+          overflow: "auto",
+        }}
+        className="no-track-pii-safe"
+      >
+        {RunResultView && (run.error ?? run.result) && (
+          <ErrorBoundary fallback={ResultErrorFallback}>
+            <RunResultView
+              ref={ref}
+              run={run}
+              viewOptions={viewOptions}
+              onViewOptionsChanged={onViewOptionsChanged}
+            />
+          </ErrorBoundary>
+        )}
+        {children?.({ run, viewOptions, onViewOptionsChanged })}
+      </Box>
+    );
+  },
+);

package/recce-source/js/src/components/run/registry.ts

@@ -0,0 +1,214 @@
+import React, {
+  ComponentType,
+  ForwardRefExoticComponent,
+  RefAttributes,
+} from "react";
+import { IconType } from "react-icons";
+import { LuChartBarBig } from "react-icons/lu";
+import { MdFormatListNumberedRtl, MdSchema } from "react-icons/md";
+import {
+  TbAlignBoxLeftStretch,
+  TbBrandStackshare,
+  TbChartHistogram,
+  TbEyeEdit,
+  TbEyeSearch,
+  TbSql,
+} from "react-icons/tb";
+import { DiffViewOptions } from "@/components/run/RunToolbar";
+import { QueryDiffViewOptions, QueryViewOptions } from "@/lib/api/adhocQuery";
+import { LineageDiffViewOptions } from "@/lib/api/lineagecheck";
+import {
+  HistogramDiffParams,
+  ProfileDiffViewOptions,
+  TopKDiffParams,
+} from "@/lib/api/profile";
+import { AxiosQueryParams } from "@/lib/api/types";
+import { ValueDiffDetailViewOptions } from "@/lib/api/valuediff";
+import { type DataGridHandle } from "../data-grid/ScreenshotDataGrid";
+import { HistogramDiffForm } from "../histogram/HistogramDiffForm";
+import { HistogramDiffResultView } from "../histogram/HistogramDiffResultView";
+import {
+  ProfileDiffForm,
+  ProfileDiffFormParams,
+} from "../profile/ProfileDiffForm";
+import {
+  ProfileDiffResultView,
+  ProfileResultView,
+} from "../profile/ProfileDiffResultView";
+import { QueryDiffResultView } from "../query/QueryDiffResultView";
+import { QueryResultView } from "../query/QueryResultView";
+import {
+  RowCountDiffResultView,
+  RowCountResultView,
+} from "../rowcount/RowCountDiffResultView";
+import { TopKDiffForm } from "../top-k/TopKDiffForm";
+import { TopKDiffResultView } from "../top-k/TopKDiffResultView";
+import { ValueDiffDetailResultView } from "../valuediff/ValueDiffDetailResultView";
+import { ValueDiffForm, ValueDiffFormParams } from "../valuediff/ValueDiffForm";
+import { ValueDiffResultView } from "../valuediff/ValueDiffResultView";
+import { RunFormProps, RunResultViewProps } from "./types";
+
+export type ViewOptionTypes =
+  | LineageDiffViewOptions
+  | DiffViewOptions
+  | QueryViewOptions
+  | QueryDiffViewOptions
+  | ProfileDiffViewOptions
+  | ValueDiffDetailViewOptions;
+
+export type RunType =
+  | "simple"
+  | "query"
+  | "query_base"
+  | "query_diff"
+  | "value_diff"
+  | "value_diff_detail"
+  | "schema_diff"
+  | "profile"
+  | "profile_diff"
+  | "row_count"
+  | "row_count_diff"
+  | "lineage_diff"
+  | "top_k_diff"
+  | "histogram_diff"
+  | "sandbox";
+
+export type RefTypes = React.Ref<DataGridHandle> | React.Ref<HTMLDivElement>;
+export type RunFormParamTypes =
+  | ProfileDiffFormParams
+  | ValueDiffFormParams
+  | TopKDiffParams
+  | HistogramDiffParams
+  | AxiosQueryParams;
+
+export interface RegistryEntry<PT = RefTypes, VO = ViewOptionTypes> {
+  title: string;
+  icon: IconType;
+  RunResultView?: ForwardRefExoticComponent<
+    RunResultViewProps<VO> & RefAttributes<PT>
+  >;
+  RunForm?: ComponentType<RunFormProps<RunFormParamTypes>>;
+}
+
+interface RunRegistry {
+  query: RegistryEntry<DataGridHandle, QueryViewOptions>;
+  query_base: RegistryEntry<DataGridHandle, QueryViewOptions>;
+  query_diff: RegistryEntry<DataGridHandle, QueryDiffViewOptions>;
+  row_count: RegistryEntry<DataGridHandle>;
+  row_count_diff: RegistryEntry<DataGridHandle>;
+  profile: RegistryEntry<DataGridHandle, ProfileDiffViewOptions>;
+  profile_diff: RegistryEntry<DataGridHandle, ProfileDiffViewOptions>;
+  value_diff: RegistryEntry<DataGridHandle>;
+  value_diff_detail: RegistryEntry<DataGridHandle, ValueDiffDetailViewOptions>;
+  top_k_diff: RegistryEntry<HTMLDivElement>;
+  histogram_diff: RegistryEntry<HTMLDivElement>;
+  lineage_diff: RegistryEntry<never>; // No RunResultView
+  schema_diff: RegistryEntry<never>; // No RunResultView
+  sandbox: RegistryEntry<never>; // No RunResultView
+  simple: RegistryEntry<never>; // No RunResultView
+}
+
+export function runTypeHasRef(runType: RunType) {
+  const typeHasRef = [
+    "query",
+    "query_base",
+    "query_diff",
+    "row_count",
+    "row_count_diff",
+    "profile",
+    "profile_diff",
+    "value_diff",
+    "value_diff_detail",
+    "top_k_diff",
+    "histogram_diff",
+  ];
+  return typeHasRef.includes(runType);
+}
+
+const registry: RunRegistry = {
+  lineage_diff: {
+    title: "Lineage Diff",
+    icon: TbBrandStackshare,
+  },
+  schema_diff: {
+    title: "Schema Diff",
+    icon: MdSchema,
+  },
+  query: {
+    title: "Query",
+    icon: TbSql,
+    RunResultView: QueryResultView,
+  },
+  query_base: {
+    title: "Query Base",
+    icon: TbSql,
+    RunResultView: QueryResultView,
+  },
+  query_diff: {
+    title: "Query Diff",
+    icon: TbSql,
+    RunResultView: QueryDiffResultView,
+  },
+  row_count: {
+    title: "Row Count",
+    icon: MdFormatListNumberedRtl,
+    RunResultView: RowCountResultView,
+  },
+  row_count_diff: {
+    title: "Row Count Diff",
+    icon: MdFormatListNumberedRtl,
+    RunResultView: RowCountDiffResultView,
+  },
+  profile: {
+    title: "Profile",
+    icon: TbEyeSearch,
+    RunResultView: ProfileResultView,
+    RunForm: ProfileDiffForm,
+  },
+  profile_diff: {
+    title: "Profile Diff",
+    icon: TbEyeSearch,
+    RunResultView: ProfileDiffResultView,
+    RunForm: ProfileDiffForm,
+  },
+  value_diff: {
+    title: "Value Diff",
+    icon: TbAlignBoxLeftStretch,
+    RunResultView: ValueDiffResultView,
+    RunForm: ValueDiffForm,
+  },
+  value_diff_detail: {
+    title: "Value Diff Detail",
+    icon: TbAlignBoxLeftStretch,
+    RunResultView: ValueDiffDetailResultView,
+    RunForm: ValueDiffForm,
+  },
+  top_k_diff: {
+    title: "Top-K Diff",
+    icon: LuChartBarBig,
+    RunResultView: TopKDiffResultView,
+    RunForm: TopKDiffForm,
+  },
+  histogram_diff: {
+    title: "Histogram Diff",
+    icon: TbChartHistogram,
+    RunResultView: HistogramDiffResultView,
+    RunForm: HistogramDiffForm,
+  },
+  sandbox: {
+    title: "Sandbox",
+    icon: TbEyeEdit,
+    // No specific RunResultView for sandbox, use QueryDiffResultView
+  },
+  simple: {
+    title: "Simple",
+    icon: TbEyeEdit,
+    // No specific RunResultView for simple, use undefined
+  },
+};
+
+export const findByRunType = <T extends RunType>(
+  runType: T,
+): RunRegistry[T] => {
+  return registry[runType];
+};

package/recce-source/js/src/components/run/types.ts

@@ -0,0 +1,14 @@
+import { ViewOptionTypes } from "@/components/run/registry";
+import { Run } from "@/lib/api/types";
+
+export interface RunFormProps<PT> {
+  params: Partial<PT>;
+  onParamsChanged: (params: Partial<PT>) => void;
+  setIsReadyToExecute: (isReadyToExecute: boolean) => void;
+}
+
+export interface RunResultViewProps<VO = ViewOptionTypes> {
+  run: Run;
+  viewOptions?: VO;
+  onViewOptionsChanged?: (viewOptions: VO) => void;
+}

package/recce-source/js/src/components/schema/ColumnNameCell.test.tsx

@@ -0,0 +1,169 @@
+// js/src/components/schema/ColumnNameCell.test.tsx
+
+import CssBaseline from "@mui/material/CssBaseline";
+import { ThemeProvider } from "@mui/material/styles";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import { lightTheme as theme } from "@/components/ui/mui-theme";
+import { NodeData } from "@/lib/api/info";
+import { SchemaDiffRow } from "@/lib/dataGrid/generators/toSchemaDataGrid";
+import { ColumnNameCell } from "./ColumnNameCell";
+
+// Mock dependencies
+jest.mock("@/lib/hooks/RecceActionContext", () => ({
+  useRecceActionContext: () => ({ runAction: jest.fn() }),
+}));
+
+jest.mock("@/lib/hooks/RecceInstanceContext", () => ({
+  useRecceInstanceContext: () => ({
+    featureToggles: { disableDatabaseQuery: false },
+  }),
+}));
+
+jest.mock("../lineage/LineageViewContext", () => ({
+  useLineageViewContext: () => undefined,
+}));
+
+// ============================================================================
+// Test Utilities
+// ============================================================================
+
+const createMockModel = (resourceType = "model"): NodeData =>
+  ({
+    id: "model.test.users",
+    name: "users",
+    resource_type: resourceType,
+    columns: {},
+  }) as NodeData;
+
+const createMockRow = (
+  overrides: Partial<SchemaDiffRow> = {},
+): SchemaDiffRow => ({
+  name: "user_id",
+  baseIndex: 1,
+  currentIndex: 1,
+  baseType: "INT",
+  currentType: "INT",
+  __status: undefined,
+  ...overrides,
+});
+
+/**
+ * Wrapper component that provides MUI theme context
+ */
+function TestWrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      {children}
+    </ThemeProvider>
+  );
+}
+
+/**
+ * Custom render function with MUI provider
+ */
+function renderWithMui(ui: React.ReactElement) {
+  return render(ui, { wrapper: TestWrapper });
+}
+
+// ============================================================================
+// Tests
+// ============================================================================
+
+describe("ColumnNameCell", () => {
+  describe("showMenu prop", () => {
+    test("renders menu button when showMenu is true (default)", () => {
+      renderWithMui(
+        <ColumnNameCell model={createMockModel()} row={createMockRow()} />,
+      );
+
+      // The kebab menu button should be present
+      const menuButton = screen.getByRole("button");
+      expect(menuButton).toBeInTheDocument();
+    });
+
+    test("renders menu button when showMenu is explicitly true", () => {
+      renderWithMui(
+        <ColumnNameCell
+          model={createMockModel()}
+          row={createMockRow()}
+          showMenu={true}
+        />,
+      );
+
+      const menuButton = screen.getByRole("button");
+      expect(menuButton).toBeInTheDocument();
+    });
+
+    test("does not render menu button when showMenu is false", () => {
+      renderWithMui(
+        <ColumnNameCell
+          model={createMockModel()}
+          row={createMockRow()}
+          showMenu={false}
+        />,
+      );
+
+      // The kebab menu button should not be present
+      const menuButton = screen.queryByRole("button");
+      expect(menuButton).not.toBeInTheDocument();
+    });
+
+    test("does not render menu for source resource type regardless of showMenu", () => {
+      renderWithMui(
+        <ColumnNameCell
+          model={createMockModel("source")}
+          row={createMockRow()}
+          showMenu={true}
+        />,
+      );
+
+      const menuButton = screen.queryByRole("button");
+      expect(menuButton).not.toBeInTheDocument();
+    });
+
+    test("does not render menu when singleEnv is true regardless of showMenu", () => {
+      renderWithMui(
+        <ColumnNameCell
+          model={createMockModel()}
+          row={createMockRow()}
+          singleEnv={true}
+          showMenu={true}
+        />,
+      );
+
+      const menuButton = screen.queryByRole("button");
+      expect(menuButton).not.toBeInTheDocument();
+    });
+  });
+
+  describe("column name display", () => {
+    test("renders column name", () => {
+      renderWithMui(
+        <ColumnNameCell
+          model={createMockModel()}
+          row={createMockRow({ name: "email_address" })}
+          showMenu={false}
+        />,
+      );
+
+      expect(screen.getByText("email_address")).toBeInTheDocument();
+    });
+
+    test("renders spinner when cllRunning is true", () => {
+      renderWithMui(
+        <ColumnNameCell
+          model={createMockModel()}
+          row={createMockRow()}
+          cllRunning={true}
+          showMenu={false}
+        />,
+      );
+
+      // MUI CircularProgress renders with role="progressbar"
+      const spinner = screen.getByRole("progressbar");
+      expect(spinner).toBeInTheDocument();
+    });
+  });
+});