@datarecce/ui 0.1.40 → 0.2.0

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

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

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