@datarecce/ui 0.1.41 → 0.2.0

package/recce-source/js/src/components/check/SchemaDiffView.tsx

@@ -1,290 +0,0 @@
-import Box from "@mui/material/Box";
-import List from "@mui/material/List";
-import ListItem from "@mui/material/ListItem";
-import { useTheme } from "@mui/material/styles";
-import { useQuery } from "@tanstack/react-query";
-import React, { forwardRef, useMemo, useState } from "react";
-import { IconType } from "react-icons";
-import { cacheKeys } from "@/lib/api/cacheKeys";
-import { Check } from "@/lib/api/checks";
-import { select } from "@/lib/api/select";
-import { useApiConfig } from "@/lib/hooks/ApiConfigContext";
-import { useLineageGraphContext } from "@/lib/hooks/LineageGraphContext";
-import { type DataGridHandle } from "../data-grid/ScreenshotDataGrid";
-import { LineageGraphNode } from "../lineage/lineage";
-import {
-  getIconForChangeStatus,
-  getIconForResourceType,
-} from "../lineage/styles";
-import { findByRunType } from "../run/registry";
-import { SchemaView } from "../schema/SchemaView";
-import { isSchemaChanged } from "../schema/schemaDiff";
-import { HSplit } from "../split/Split";
-
-interface SchemaDiffViewProps {
-  check: Check;
-}
-
-export interface SchemaDiffParams {
-  node_id?: string | string[];
-  select?: string;
-  exclude?: string;
-  view_mode?: "all" | "changed_models";
-  packages?: string[];
-}
-
-const NodelistItem = ({
-  node,
-  selected,
-  onSelect,
-  schemaChanged,
-  isDark,
-}: {
-  node: LineageGraphNode;
-  selected: boolean;
-  onSelect: (nodeId: string) => void;
-  schemaChanged: boolean;
-  isDark: boolean;
-}) => {
-  const { icon } = getIconForResourceType(node.data.resourceType);
-  const { base, current } = node.data.data;
-
-  let statusIcon: IconType | undefined;
-  let statusColor: string | undefined;
-
-  if (schemaChanged) {
-    statusIcon = findByRunType("schema_diff").icon;
-    statusColor = getIconForChangeStatus("modified").color;
-  } else if (!base && current) {
-    statusIcon = getIconForChangeStatus("added").icon;
-    statusColor = getIconForChangeStatus("added").color;
-  } else if (base && !current) {
-    statusIcon = getIconForChangeStatus("removed").icon;
-    statusColor = getIconForChangeStatus("removed").color;
-  }
-
-  return (
-    <ListItem disablePadding>
-      <Box
-        sx={{
-          display: "flex",
-          width: "100%",
-          fontSize: "10pt",
-          p: "5px 8px",
-          cursor: "pointer",
-          "&:hover": { bgcolor: isDark ? "grey.700" : "grey.200" },
-          bgcolor: selected ? (isDark ? "grey.800" : "grey.100") : "inherit",
-          alignItems: "center",
-          gap: "5px",
-        }}
-        onClick={() => {
-          onSelect(node.id);
-        }}
-      >
-        {icon && <Box component={icon} />}
-        <Box
-          sx={{
-            flex: 1,
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap",
-            overflow: "hidden",
-          }}
-        >
-          {node.data.name}
-        </Box>
-
-        {statusIcon && statusColor && (
-          <Box component={statusIcon} sx={{ color: statusColor }} />
-        )}
-      </Box>
-    </ListItem>
-  );
-};
-
-export function PrivateSchemaDiffView(
-  { check }: SchemaDiffViewProps,
-  ref: React.Ref<DataGridHandle>,
-) {
-  const theme = useTheme();
-  const isDark = theme.palette.mode === "dark";
-  const { apiClient } = useApiConfig();
-  const { lineageGraph } = useLineageGraphContext();
-  const params = check.params as SchemaDiffParams;
-
-  const queryKey = [...cacheKeys.check(check.check_id), "select"];
-
-  const { isLoading, error, data } = useQuery({
-    queryKey,
-    queryFn: async () =>
-      select(
-        {
-          select: params.select,
-          exclude: params.exclude,
-          packages: params.packages,
-          view_mode: params.view_mode,
-        },
-        apiClient,
-      ),
-    refetchOnMount: true,
-    enabled: !params.node_id,
-  });
-
-  const [nodes, changedNodes] = useMemo(() => {
-    const selectedNodes: LineageGraphNode[] = [];
-    const changedNodes: string[] = [];
-    const addedNodes: string[] = [];
-    const removedNodes: string[] = [];
-
-    if (params.node_id) {
-      const nodeIds =
-        params.node_id instanceof Array ? params.node_id : [params.node_id];
-      for (const nodeId of nodeIds) {
-        const node = lineageGraph?.nodes[nodeId];
-        if (node) {
-          selectedNodes.push(node);
-        }
-      }
-    } else {
-      for (const nodeId of data?.nodes ?? []) {
-        const node = lineageGraph?.nodes[nodeId];
-        if (node) {
-          selectedNodes.push(node);
-        }
-      }
-    }
-
-    // filter that the resourec_type is mode,seed, source, or snapshot
-    const filteredNodes = selectedNodes.filter(
-      (node) =>
-        node.data.resourceType === "model" ||
-        node.data.resourceType === "seed" ||
-        node.data.resourceType === "source" ||
-        node.data.resourceType === "snapshot",
-    );
-
-    for (const node of filteredNodes) {
-      if (
-        isSchemaChanged(
-          node.data.data.base?.columns,
-          node.data.data.current?.columns,
-        )
-      ) {
-        changedNodes.push(node.id);
-      } else if (!node.data.data.base && node.data.data.current) {
-        addedNodes.push(node.id);
-      } else if (node.data.data.base && !node.data.data.current) {
-        removedNodes.push(node.id);
-      }
-    }
-    function sortScore(node: LineageGraphNode) {
-      if (changedNodes.includes(node.id)) {
-        return 3;
-      }
-      if (addedNodes.includes(node.id)) {
-        return 2;
-      }
-      if (removedNodes.includes(node.id)) {
-        return 1;
-      }
-      return 0;
-    }
-
-    //sort the selectedNodes from schemaChange and node name
-    filteredNodes.sort((a, b) => {
-      const scoreA = sortScore(a);
-      const scoreB = sortScore(b);
-      if (scoreA !== scoreB) {
-        return scoreB - scoreA;
-      } else {
-        return a.data.name.localeCompare(b.data.name);
-      }
-    });
-
-    return [filteredNodes, changedNodes];
-  }, [params.node_id, data?.nodes, lineageGraph]);
-
-  const [selected, setSelected] = useState<number>(0);
-
-  if (isLoading) {
-    return (
-      <Box
-        sx={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          bgcolor: isDark ? "grey.900" : "grey.50",
-          height: "100%",
-        }}
-      >
-        Loading...
-      </Box>
-    );
-  } else if (error) {
-    return (
-      <Box
-        sx={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          bgcolor: isDark ? "grey.900" : "grey.50",
-          height: "100%",
-        }}
-        className="no-track-pii-safe"
-      >
-        Error: {error.message}
-      </Box>
-    );
-  } else if (nodes.length == 0) {
-    return (
-      <Box
-        sx={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          bgcolor: isDark ? "grey.900" : "grey.50",
-          height: "100%",
-        }}
-      >
-        No nodes matched
-      </Box>
-    );
-  } else if (selected < nodes.length) {
-    const node = nodes[selected];
-    return (
-      <HSplit sizes={[80, 20]} minSize={30} style={{ height: "100%" }}>
-        <SchemaView
-          base={node.data.data.base}
-          current={node.data.data.current}
-          enableScreenshot={true}
-          showMenu={false}
-          ref={ref}
-        />
-        <List
-          sx={{
-            overflow: "auto",
-            bgcolor: "background.paper",
-            listStyle: "none",
-          }}
-        >
-          {nodes.map((node, i) => (
-            <NodelistItem
-              key={node.id}
-              node={node}
-              schemaChanged={changedNodes.includes(node.id)}
-              selected={i === selected}
-              isDark={isDark}
-              onSelect={() => {
-                setSelected(i);
-              }}
-            />
-          ))}
-        </List>
-      </HSplit>
-    );
-  }
-
-  // TODO: handle the edge case where the node is not found
-  return <></>;
-}
-
-export const SchemaDiffView = forwardRef(PrivateSchemaDiffView);

package/recce-source/js/src/components/check/check.ts

@@ -1,25 +0,0 @@
-import { stripIndent } from "common-tags";
-import { Check } from "@/lib/api/checks";
-import { RunParamTypes } from "@/lib/api/types";
-
-export function buildTitle(check: Check) {
-  return `${check.is_checked ? "✅ " : ""}${check.name}`;
-}
-
-export function buildDescription(check: Check) {
-  return (check.description ?? "") || "_(no description)_";
-}
-
-export function buildQuery(check: Check<RunParamTypes>) {
-  const params = check.params;
-  let sqlTemplate = "";
-  if (params && "sql_template" in params) {
-    sqlTemplate = params.sql_template;
-  }
-  return stripIndent`
-    **SQL**
-    \`\`\`sql
-    ${sqlTemplate}
-    \`\`\`
-    `;
-}

package/recce-source/js/src/components/check/timeline/CheckTimeline.tsx

@@ -1,163 +0,0 @@
-/**
- * CheckTimeline - Main timeline/conversation panel for a check.
- *
- * Displays a chronological list of events (comments, state changes)
- * and provides an input for adding new comments.
- *
- * This component is only rendered when connected to Recce Cloud.
- */
-
-import Box from "@mui/material/Box";
-import CircularProgress from "@mui/material/CircularProgress";
-import Divider from "@mui/material/Divider";
-import Stack from "@mui/material/Stack";
-import { useTheme } from "@mui/material/styles";
-import Typography from "@mui/material/Typography";
-import { useQuery } from "@tanstack/react-query";
-import { cacheKeys } from "@/lib/api/cacheKeys";
-import { fetchUser } from "@/lib/api/user";
-import { useApiConfig } from "@/lib/hooks/ApiConfigContext";
-import { useCheckEvents } from "@/lib/hooks/useCheckEvents";
-import { CommentInput } from "./CommentInput";
-import { TimelineEvent } from "./TimelineEvent";
-
-interface CheckTimelineProps {
-  checkId: string;
-}
-
-export function CheckTimeline({ checkId }: CheckTimelineProps) {
-  const theme = useTheme();
-  const isDark = theme.palette.mode === "dark";
-  const { apiClient } = useApiConfig();
-  const {
-    events,
-    isLoading,
-    error,
-    createComment,
-    isCreatingComment,
-    updateComment,
-    deleteComment,
-  } = useCheckEvents(checkId);
-
-  // Get current user for determining edit/delete permissions
-  const { data: currentUser } = useQuery({
-    queryKey: cacheKeys.user(),
-    queryFn: () => fetchUser(apiClient),
-    retry: false,
-  });
-
-  const handleCreateComment = (content: string) => {
-    createComment(content);
-  };
-
-  const handleEditComment = async (eventId: string, content: string) => {
-    await updateComment({ eventId, content });
-  };
-
-  const handleDeleteComment = async (eventId: string) => {
-    await deleteComment(eventId);
-  };
-
-  if (isLoading) {
-    return (
-      <Box
-        sx={{
-          height: "100%",
-          p: 4,
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-        }}
-      >
-        <CircularProgress size={20} />
-      </Box>
-    );
-  }
-
-  if (error) {
-    return (
-      <Box
-        sx={{
-          height: "100%",
-          p: 4,
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-        }}
-      >
-        <Typography sx={{ fontSize: "0.875rem", color: "error.main" }}>
-          Failed to load timeline
-        </Typography>
-      </Box>
-    );
-  }
-
-  return (
-    <Stack
-      sx={{
-        height: "100%",
-        alignItems: "stretch",
-        borderLeft: "1px solid",
-        borderColor: isDark ? "grey.700" : "grey.200",
-      }}
-      spacing={0}
-    >
-      {/* Header */}
-      <Box
-        sx={{
-          px: 3,
-          py: 2,
-          borderBottom: "1px solid",
-          borderColor: isDark ? "grey.700" : "grey.200",
-        }}
-      >
-        <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
-          Activity
-        </Typography>
-      </Box>
-
-      {/* Events List - Scrollable */}
-      <Box sx={{ flex: 1, overflowY: "auto", px: 3, py: 2 }}>
-        {events.length === 0 ? (
-          <Typography sx={{ fontSize: "0.875rem", color: "grey.500" }}>
-            No activity yet
-          </Typography>
-        ) : (
-          <Stack sx={{ alignItems: "stretch" }} spacing={0}>
-            {events.map((event, index) => (
-              <Box key={event.id}>
-                <TimelineEvent
-                  event={event}
-                  currentUserId={currentUser?.id}
-                  onEdit={handleEditComment}
-                  onDelete={handleDeleteComment}
-                />
-                {index < events.length - 1 && (
-                  <Divider
-                    sx={{ borderColor: isDark ? "grey.700" : "grey.100" }}
-                  />
-                )}
-              </Box>
-            ))}
-          </Stack>
-        )}
-      </Box>
-
-      {/* Comment Input - Fixed at bottom */}
-      <Box
-        sx={{
-          px: 3,
-          py: 3,
-          borderTop: "1px solid",
-          borderColor: isDark ? "grey.700" : "grey.200",
-          bgcolor: isDark ? "grey.900" : "grey.50",
-        }}
-      >
-        <CommentInput
-          onSubmit={handleCreateComment}
-          isSubmitting={isCreatingComment}
-        />
-      </Box>
-    </Stack>
-  );
-}

package/recce-source/js/src/components/check/timeline/CommentInput.tsx

@@ -1,84 +0,0 @@
-/**
- * CommentInput - Text area for adding new comments to a check timeline.
- */
-
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import Stack from "@mui/material/Stack";
-import { useTheme } from "@mui/material/styles";
-import TextField from "@mui/material/TextField";
-import { useState } from "react";
-
-interface CommentInputProps {
-  onSubmit: (content: string) => void;
-  isSubmitting?: boolean;
-  placeholder?: string;
-}
-
-export function CommentInput({
-  onSubmit,
-  isSubmitting = false,
-  placeholder = "Add a comment...",
-}: CommentInputProps) {
-  const theme = useTheme();
-  const isDark = theme.palette.mode === "dark";
-  const [content, setContent] = useState("");
-
-  const handleSubmit = () => {
-    const trimmed = content.trim();
-    if (trimmed) {
-      onSubmit(trimmed);
-      setContent("");
-    }
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
-    // Submit on Cmd+Enter or Ctrl+Enter
-    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
-      e.preventDefault();
-      handleSubmit();
-    }
-  };
-
-  return (
-    <Box>
-      <TextField
-        value={content}
-        onChange={(e) => setContent(e.target.value)}
-        onKeyDown={handleKeyDown}
-        placeholder={placeholder}
-        size="small"
-        multiline
-        fullWidth
-        minRows={3}
-        disabled={isSubmitting}
-        sx={{
-          "& .MuiOutlinedInput-root": {
-            bgcolor: "background.paper",
-            "&:hover .MuiOutlinedInput-notchedOutline": {
-              borderColor: isDark ? "grey.500" : "grey.400",
-            },
-            "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-              borderColor: "iochmara.400",
-              boxShadow: "0 0 0 1px #4299E1",
-            },
-          },
-          "& .MuiOutlinedInput-notchedOutline": {
-            borderColor: isDark ? "grey.600" : undefined,
-          },
-        }}
-      />
-      <Stack direction="row" justifyContent="flex-end" sx={{ mt: 2 }}>
-        <Button
-          size="small"
-          color="iochmara"
-          variant="contained"
-          onClick={handleSubmit}
-          disabled={!content.trim() || isSubmitting}
-        >
-          {isSubmitting ? "Submitting..." : "Comment"}
-        </Button>
-      </Stack>
-    </Box>
-  );
-}