@datarecce/ui 0.1.30 → 0.1.32

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

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

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

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

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