@datarecce/ui 0.1.41 → 0.2.0

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

@@ -1,70 +0,0 @@
-import Box from "@mui/material/Box";
-import { useTheme } from "@mui/material/styles";
-import _ from "lodash";
-import { ReactNode } from "react";
-import { PiWarning } from "react-icons/pi";
-import { colors } from "@/components/ui/mui-theme";
-import { RunResultViewProps } from "./types";
-
-export interface DiffViewOptions {
-  changed_only?: boolean;
-}
-
-interface RunToolbarProps<VO> extends RunResultViewProps<VO> {
-  warnings?: string[];
-  children?: ReactNode;
-}
-
-export const RunToolbar = ({
-  warnings,
-  children,
-}: RunToolbarProps<DiffViewOptions>) => {
-  const theme = useTheme();
-  const isDark = theme.palette.mode === "dark";
-  const hasWarnings = warnings && warnings.length > 0;
-
-  return (
-    <Box
-      sx={{
-        display: "flex",
-        borderBottom: "1px solid",
-        borderColor: "divider",
-        justifyContent: "flex-end",
-        gap: "5px",
-        alignItems: "center",
-        px: "10px",
-        bgcolor: hasWarnings
-          ? isDark
-            ? colors.amber[900]
-            : colors.amber[100]
-          : "inherit",
-        color: hasWarnings
-          ? isDark
-            ? colors.amber[200]
-            : colors.amber[800]
-          : "inherit",
-      }}
-    >
-      <Box
-        sx={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "flex-start",
-          gap: 0,
-        }}
-      >
-        {warnings?.map((warning) => (
-          <Box key={_.uniqueId(`-${warning}`)}>
-            <PiWarning
-              color={isDark ? colors.amber[400] : colors.amber[600]}
-              style={{ verticalAlign: "middle", marginRight: 4 }}
-            />
-            {warning}
-          </Box>
-        ))}
-      </Box>
-      <Box sx={{ flex: 1, minHeight: "32px" }} />
-      {children}
-    </Box>
-  );
-};

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

@@ -1,196 +0,0 @@
-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

@@ -1,214 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

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