@datarecce/ui 0.1.29 → 0.1.31

package/recce-source/js/src/components/app/AvatarDropdown.tsx

@@ -0,0 +1,159 @@
+import MuiAvatar from "@mui/material/Avatar";
+import Box from "@mui/material/Box";
+import CircularProgress from "@mui/material/CircularProgress";
+import Divider from "@mui/material/Divider";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import Typography from "@mui/material/Typography";
+import { useQuery } from "@tanstack/react-query";
+import { type MouseEvent, useState } from "react";
+import { FaCloud, FaUser } from "react-icons/fa";
+import { RECCE_SUPPORT_CALENDAR_URL } from "@/constants/urls";
+import { cacheKeys } from "@/lib/api/cacheKeys";
+import { fetchGitHubAvatar, fetchUser } from "@/lib/api/user";
+import { useApiConfig } from "@/lib/hooks/ApiConfigContext";
+
+export default function AvatarDropdown() {
+  const { apiClient } = useApiConfig();
+  const {
+    data: user,
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: cacheKeys.user(),
+    queryFn: () => fetchUser(apiClient),
+    retry: false,
+  });
+
+  const { data: avatarUrl } = useQuery({
+    queryKey: ["github-avatar", user?.id],
+    queryFn: () => (user ? fetchGitHubAvatar(user.id) : Promise.resolve(null)),
+    enabled: !!user?.id && user.login_type === "github",
+    retry: false,
+    staleTime: 5 * 60 * 1000, // Cache for 5 minutes
+  });
+
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event: MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const showUserInfo = !isLoading && !error && user;
+
+  // Get initials for avatar fallback
+  const getInitials = (name?: string) => {
+    if (!name) return "U";
+    return name.charAt(0).toUpperCase();
+  };
+
+  return (
+    <>
+      {isLoading ? (
+        <Box
+          onClick={handleClick}
+          sx={{
+            width: 32,
+            height: 32,
+            borderRadius: "50%",
+            bgcolor: "background.paper",
+            color: "primary.main",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            cursor: "pointer",
+          }}
+        >
+          <CircularProgress size={16} />
+        </Box>
+      ) : (
+        <MuiAvatar
+          onClick={handleClick}
+          src={avatarUrl || undefined}
+          sx={{
+            width: 28,
+            height: 28,
+            cursor: "pointer",
+            outline: "1px solid white",
+            fontSize: "0.875rem",
+          }}
+        >
+          {getInitials(user?.login)}
+        </MuiAvatar>
+      )}
+      <Menu
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        slotProps={{
+          paper: {
+            sx: {
+              bgcolor: "background.paper",
+              borderColor: "divider",
+              boxShadow: 3,
+              minWidth: 180,
+            },
+          },
+        }}
+      >
+        <Box sx={{ px: 2, py: 1.5 }}>
+          {isLoading && (
+            <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+              <Typography variant="body2" color="text.primary">
+                Loading...
+              </Typography>
+              <CircularProgress size={16} />
+            </Box>
+          )}
+          {error && (
+            <Typography variant="caption" color="error">
+              Failed to load user information
+            </Typography>
+          )}
+          {showUserInfo && (
+            <>
+              <Typography variant="body2" fontWeight="600" color="text.primary">
+                {user.login}
+              </Typography>
+              {user.email && (
+                <Typography variant="caption" color="text.secondary">
+                  {user.email}
+                </Typography>
+              )}
+            </>
+          )}
+        </Box>
+        <Divider />
+        <MenuItem
+          onClick={() => {
+            window.open("https://cloud.datarecce.io/", "_blank");
+            handleClose();
+          }}
+        >
+          <ListItemIcon>
+            <FaCloud />
+          </ListItemIcon>
+          <ListItemText>Recce Cloud</ListItemText>
+        </MenuItem>
+        <MenuItem
+          onClick={() => {
+            window.open(RECCE_SUPPORT_CALENDAR_URL, "_blank");
+            handleClose();
+          }}
+        >
+          <ListItemIcon>
+            <FaUser />
+          </ListItemIcon>
+          <ListItemText>Get live support</ListItemText>
+        </MenuItem>
+      </Menu>
+    </>
+  );
+}

package/recce-source/js/src/components/app/EnvInfo.tsx

@@ -0,0 +1,357 @@
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import MuiDialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
+import Divider from "@mui/material/Divider";
+import IconButton from "@mui/material/IconButton";
+import Link from "@mui/material/Link";
+import Stack from "@mui/material/Stack";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import MuiTooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
+import { format, formatDistance, parseISO } from "date-fns";
+import { isEmpty } from "lodash";
+import React, { useEffect, useRef, useState } from "react";
+import { IoClose } from "react-icons/io5";
+import { LuExternalLink } from "react-icons/lu";
+import { LineageGraph } from "@/components/lineage/lineage";
+import {
+  type EnvironmentConfigProps,
+  trackEnvironmentConfig,
+} from "@/lib/api/track";
+import type { EnvInfo as EnvInfoType } from "@/lib/hooks/LineageGraphContext";
+import { useLineageGraphContext } from "@/lib/hooks/LineageGraphContext";
+import { IconInfo } from "../icons";
+
+export function formatTimestamp(timestamp: string): string {
+  const date = parseISO(timestamp);
+  return format(date, "yyyy-MM-dd'T'HH:mm:ss");
+}
+
+export function formatTimeToNow(timestamp: string): string {
+  const date = parseISO(timestamp);
+  return formatDistance(date, new Date(), {
+    addSuffix: true,
+  });
+}
+
+export function extractSchemas(
+  lineageGraph: LineageGraph | undefined,
+): [Set<string>, Set<string>] {
+  const baseSchemas = new Set<string>();
+  const currentSchemas = new Set<string>();
+
+  if (lineageGraph?.nodes) {
+    for (const value of Object.values(lineageGraph.nodes)) {
+      if (value.data.data.base?.schema) {
+        baseSchemas.add(value.data.data.base.schema);
+      }
+      if (value.data.data.current?.schema) {
+        currentSchemas.add(value.data.data.current.schema);
+      }
+    }
+  }
+  return [baseSchemas, currentSchemas];
+}
+
+function buildEnvironmentTrackingData(
+  envInfo: EnvInfoType | undefined,
+  reviewMode: boolean | undefined,
+  baseSchemas: Set<string>,
+  currentSchemas: Set<string>,
+): EnvironmentConfigProps {
+  const git = envInfo?.git;
+  const pr = envInfo?.pullRequest;
+  const dbtBase = envInfo?.dbt?.base;
+  const dbtCurrent = envInfo?.dbt?.current;
+
+  const trackingData: EnvironmentConfigProps = {
+    review_mode: reviewMode || false,
+    adapter_type: envInfo?.adapterType || null,
+    has_git_info: !isEmpty(git),
+    has_pr_info: !isEmpty(pr),
+  };
+
+  // DBT-specific tracking
+  if (envInfo?.adapterType === "dbt") {
+    trackingData.base = {
+      schema_count: baseSchemas.size,
+      dbt_version: dbtBase?.dbt_version || null,
+      timestamp: dbtBase?.generated_at || null,
+    };
+    trackingData.current = {
+      schema_count: currentSchemas.size,
+      dbt_version: dbtCurrent?.dbt_version || null,
+      timestamp: dbtCurrent?.generated_at || null,
+    };
+    trackingData.schemas_match =
+      baseSchemas.size === currentSchemas.size &&
+      Array.from(baseSchemas).every((s) => currentSchemas.has(s));
+  }
+
+  // SQLMesh-specific tracking
+  if (envInfo?.adapterType === "sqlmesh") {
+    trackingData.base = {
+      has_env: !!envInfo.sqlmesh?.base_env,
+    };
+    trackingData.current = {
+      has_env: !!envInfo.sqlmesh?.current_env,
+    };
+  }
+
+  return trackingData;
+}
+
+function renderInfoEntries(info: object): React.JSX.Element[] {
+  if (Object.values(info).every((value) => value === null)) {
+    return [
+      <Box key={"no info"} sx={{ ml: "10px" }}>
+        No information
+      </Box>,
+    ];
+  }
+
+  return Object.entries(info)
+    .filter(
+      ([key, value]) => key !== "url" && value !== null && value !== undefined,
+    )
+    .map(([key, value]) => (
+      <li key={key} style={{ marginLeft: "10px" }}>
+        {key}: {value}
+      </li>
+    ));
+}
+
+export function EnvInfo() {
+  const { envInfo, reviewMode, lineageGraph } = useLineageGraphContext();
+  const [open, setOpen] = useState(false);
+  const git = envInfo?.git;
+  const pr = envInfo?.pullRequest;
+  const reviewInfo = { ...git, ...pr };
+
+  const dbtBase = envInfo?.dbt?.base;
+  const dbtCurrent = envInfo?.dbt?.current;
+
+  const baseTime = dbtBase?.generated_at
+    ? formatTimestamp(dbtBase.generated_at)
+    : "";
+  const currentTime = dbtCurrent?.generated_at
+    ? formatTimestamp(dbtCurrent.generated_at)
+    : "";
+  let baseRelativeTime = "";
+  let currentRelativeTime = "";
+  if (dbtBase) {
+    baseRelativeTime = dbtBase.generated_at
+      ? formatTimeToNow(dbtBase.generated_at)
+      : "";
+  }
+  if (dbtCurrent) {
+    currentRelativeTime = dbtCurrent.generated_at
+      ? formatTimeToNow(dbtCurrent.generated_at)
+      : "";
+  }
+  const [baseSchemas, currentSchemas] = extractSchemas(lineageGraph);
+
+  // Track environment configuration once at startup
+  const hasTrackedRef = useRef(false);
+  useEffect(() => {
+    if (!hasTrackedRef.current && envInfo) {
+      hasTrackedRef.current = true;
+      const trackingData = buildEnvironmentTrackingData(
+        envInfo,
+        reviewMode,
+        baseSchemas,
+        currentSchemas,
+      );
+      trackEnvironmentConfig(trackingData);
+    }
+  }, [envInfo, reviewMode, baseSchemas, currentSchemas]);
+
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  return (
+    <>
+      <MuiTooltip title="Environment Info" placement="bottom-end">
+        <div
+          className="flex items-center hover:cursor-pointer hover:text-black"
+          onClick={handleOpen}
+        >
+          <div className="hidden text-sm lg:flex lg:flex-col">
+            <div className="flex gap-1">
+              <Typography
+                component="span"
+                sx={{ color: "warning.main" }}
+                className="no-track-pii-safe max-w-32 truncate"
+              >
+                {Array.from(baseSchemas).join(", ")}
+              </Typography>{" "}
+              ({baseRelativeTime})
+            </div>
+            <div className="flex gap-1">
+              <Typography
+                component="span"
+                sx={{ color: "primary.main" }}
+                className="no-track-pii-safe max-w-32 truncate"
+              >
+                {Array.from(currentSchemas).join(", ")}
+              </Typography>{" "}
+              ({currentRelativeTime})
+            </div>
+          </div>
+          <IconButton size="small" aria-label="Environment Info">
+            <Box
+              component={IconInfo}
+              sx={{ fontSize: 16, verticalAlign: "middle" }}
+            />
+          </IconButton>
+        </div>
+      </MuiTooltip>
+      <MuiDialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
+        <DialogTitle sx={{ display: "flex", alignItems: "center" }}>
+          Environment Information
+          <Box sx={{ flexGrow: 1 }} />
+          <IconButton size="small" onClick={handleClose}>
+            <IoClose />
+          </IconButton>
+        </DialogTitle>
+        <DialogContent>
+          <Stack direction="column" spacing={1}>
+            {reviewMode ? (
+              <Stack direction="column" spacing={0.5}>
+                <Typography variant="h6" sx={{ fontSize: "1rem" }}>
+                  Review Information
+                </Typography>
+                <ul style={{ margin: 0, paddingLeft: "20px" }}>
+                  {reviewInfo.url && (
+                    <li style={{ marginLeft: "10px" }}>
+                      url:{" "}
+                      <Link
+                        href={reviewInfo.url}
+                        target="_blank"
+                        sx={{ color: "primary.main" }}
+                      >
+                        {reviewInfo.url} <LuExternalLink />
+                      </Link>
+                    </li>
+                  )}
+                  {!isEmpty(reviewInfo) && renderInfoEntries(reviewInfo)}
+                </ul>
+              </Stack>
+            ) : (
+              <Stack direction="column" spacing={0.5}>
+                <Typography variant="h6" sx={{ fontSize: "1rem" }}>
+                  Dev Information
+                </Typography>
+                <ul style={{ margin: 0, paddingLeft: "20px" }}>
+                  {git && renderInfoEntries(git)}
+                </ul>
+              </Stack>
+            )}
+            <Divider />
+            {envInfo?.adapterType === "dbt" && (
+              <Stack direction="column" spacing={0.5}>
+                <Typography variant="h6" sx={{ fontSize: "1rem" }}>
+                  DBT
+                </Typography>
+                <TableContainer
+                  sx={{ border: 1, borderColor: "divider", maxHeight: "30rem" }}
+                >
+                  <Table size="small" stickyHeader>
+                    <TableHead>
+                      <TableRow>
+                        <TableCell />
+                        <TableCell>base</TableCell>
+                        <TableCell>current</TableCell>
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      <TableRow>
+                        <TableCell>schema</TableCell>
+                        <TableCell className="no-track-pii-safe">
+                          {Array.from(baseSchemas).map((item) => (
+                            <MuiTooltip
+                              key={item}
+                              title={item}
+                              placement="bottom"
+                            >
+                              <div className="max-w-72 truncate">{item}</div>
+                            </MuiTooltip>
+                          ))}
+                        </TableCell>
+                        <TableCell className="no-track-pii-safe">
+                          {Array.from(currentSchemas).map((item) => (
+                            <MuiTooltip
+                              key={item}
+                              title={item}
+                              placement="bottom"
+                            >
+                              <div className="max-w-72 truncate">{item}</div>
+                            </MuiTooltip>
+                          ))}
+                        </TableCell>
+                      </TableRow>
+                      <TableRow>
+                        <TableCell>version</TableCell>
+                        <TableCell>{dbtBase?.dbt_version}</TableCell>
+                        <TableCell>{dbtCurrent?.dbt_version}</TableCell>
+                      </TableRow>
+                      <TableRow>
+                        <TableCell>timestamp</TableCell>
+                        <TableCell>{baseTime}</TableCell>
+                        <TableCell>{currentTime}</TableCell>
+                      </TableRow>
+                    </TableBody>
+                  </Table>
+                </TableContainer>
+              </Stack>
+            )}
+            {envInfo?.adapterType === "sqlmesh" && (
+              <Stack direction="column" spacing={0.5}>
+                <Typography variant="h6" sx={{ fontSize: "1rem" }}>
+                  SQLMesh
+                </Typography>
+                <TableContainer
+                  sx={{ border: 1, borderColor: "divider", maxHeight: "30rem" }}
+                >
+                  <Table stickyHeader>
+                    <TableHead>
+                      <TableRow>
+                        <TableCell />
+                        <TableCell>base</TableCell>
+                        <TableCell>current</TableCell>
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      <TableRow>
+                        <TableCell>Environment</TableCell>
+                        <TableCell className="no-track-pii-safe">
+                          {envInfo.sqlmesh?.base_env}
+                        </TableCell>
+                        <TableCell className="no-track-pii-safe">
+                          {envInfo.sqlmesh?.current_env}
+                        </TableCell>
+                      </TableRow>
+                    </TableBody>
+                  </Table>
+                </TableContainer>
+              </Stack>
+            )}
+          </Stack>
+        </DialogContent>
+        <DialogActions>
+          <Button color="iochmara" onClick={handleClose}>
+            Close
+          </Button>
+        </DialogActions>
+      </MuiDialog>
+    </>
+  );
+}