@datarecce/ui 0.1.41 → 0.2.0

package/recce-source/js/README.md

@@ -1,39 +0,0 @@
-## Prerequisites
-
-1. Node (>18)
-   ```
-   nvm use 20
-   ```
-2. pnpm
-
-   ```
-   npm install -g corepack@latest
-   corepack enable
-   corepack install
-   pnpm install
-   ```
-
-## Development
-
-1. Run the python server
-
-   ```bash
-   cd my-dbt-project/
-   recce server
-   ```
-
-   The api server is run at http://localhost:8000/api
-
-2. Run the dev server
-
-   ```bash
-   pnpm dev
-   ```
-
-## Build
-
-```bash
-pnpm build
-cd ../recce/data
-git add .
-```

package/recce-source/js/app/(mainComponents)/DisplayModeToggle.tsx

@@ -1,65 +0,0 @@
-"use client";
-
-import IconButton from "@mui/material/IconButton";
-import Tooltip from "@mui/material/Tooltip";
-import { useTheme } from "next-themes";
-import { useEffect, useState } from "react";
-import { PiMoon, PiSun } from "react-icons/pi";
-
-/**
- * Display Mode Toggle - switches between light and dark themes
- *
- * Uses next-themes to persist the user's preference.
- * Default is light theme, with future support for system preference.
- */
-export default function DisplayModeToggle() {
-  const { setTheme, resolvedTheme } = useTheme();
-  const [mounted, setMounted] = useState(false);
-
-  // Avoid hydration mismatch by only rendering after mount
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  const toggleTheme = () => {
-    setTheme(resolvedTheme === "dark" ? "light" : "dark");
-  };
-
-  // Don't render anything until mounted to avoid hydration mismatch
-  if (!mounted) {
-    return (
-      <IconButton
-        size="small"
-        sx={{
-          color: "rgba(255, 255, 255, 0.8)",
-          "&:hover": { bgcolor: "rgba(255, 255, 255, 0.1)" },
-        }}
-        disabled
-      >
-        <PiSun style={{ width: 18, height: 18 }} />
-      </IconButton>
-    );
-  }
-
-  const isDark = resolvedTheme === "dark";
-
-  return (
-    <Tooltip title={isDark ? "Switch to light mode" : "Switch to dark mode"}>
-      <IconButton
-        size="small"
-        onClick={toggleTheme}
-        sx={{
-          color: "rgba(255, 255, 255, 0.8)",
-          "&:hover": { bgcolor: "rgba(255, 255, 255, 0.1)" },
-        }}
-        aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
-      >
-        {isDark ? (
-          <PiSun style={{ width: 18, height: 18 }} />
-        ) : (
-          <PiMoon style={{ width: 18, height: 18 }} />
-        )}
-      </IconButton>
-    </Tooltip>
-  );
-}

package/recce-source/js/app/(mainComponents)/NavBar.tsx

@@ -1,228 +0,0 @@
-"use client";
-
-import Box from "@mui/material/Box";
-import Tab from "@mui/material/Tab";
-import MuiTabs from "@mui/material/Tabs";
-import { useQuery } from "@tanstack/react-query";
-import NextLink from "next/link";
-import { usePathname } from "next/navigation";
-import React, { type ReactNode, useEffect, useMemo, useRef } from "react";
-import { EnvInfo } from "@/components/app/EnvInfo";
-import { Filename } from "@/components/app/Filename";
-import { StateExporter } from "@/components/app/StateExporter";
-import { TopLevelShare } from "@/components/app/StateSharing";
-import { StateSynchronizer } from "@/components/app/StateSynchronizer";
-import { cacheKeys } from "@/lib/api/cacheKeys";
-import { Check, listChecks } from "@/lib/api/checks";
-import { trackNavigation } from "@/lib/api/track";
-import { useLineageGraphContext } from "@/lib/hooks/LineageGraphContext";
-import { useRecceInstanceContext } from "@/lib/hooks/RecceInstanceContext";
-import { useRecceServerFlag } from "@/lib/hooks/useRecceServerFlag";
-
-/**
- * Route configuration for tabs
- */
-const ROUTE_CONFIG = [
-  { path: "/lineage", name: "Lineage" },
-  { path: "/query", name: "Query" },
-  { path: "/checks", name: "Checklist" },
-] as const;
-
-interface TabBadgeProps<T> {
-  queryKey: string[];
-  fetchCallback: () => Promise<T>;
-  selectCallback?: (data: T) => number;
-}
-
-function TabBadge<T>({
-  queryKey,
-  fetchCallback,
-  selectCallback,
-}: TabBadgeProps<T>): ReactNode {
-  const {
-    data: count,
-    isLoading,
-    error,
-  } = useQuery({
-    queryKey: queryKey,
-    queryFn: fetchCallback,
-    select: selectCallback,
-  });
-
-  if (isLoading || error || count === 0) {
-    return <></>;
-  }
-
-  return (
-    <Box
-      bgcolor="brand.main"
-      display="flex"
-      justifyContent="center"
-      alignItems="center"
-      p={1}
-      borderRadius="100%"
-      color="white"
-      fontWeight={700}
-      fontSize="0.75rem"
-    >
-      <span>{count}</span>
-    </Box>
-  );
-}
-
-function ChecklistBadge(): ReactNode {
-  return (
-    <TabBadge<Check[]>
-      queryKey={cacheKeys.checks()}
-      fetchCallback={listChecks}
-      selectCallback={(checks: Check[]) => {
-        return checks.filter((check) => !check.is_checked).length;
-      }}
-    />
-  );
-}
-
-// NavBar component with Next.js Link navigation
-export default function NavBar() {
-  const pathname = usePathname();
-  const { isDemoSite, isLoading, cloudMode } = useLineageGraphContext();
-  const { featureToggles } = useRecceInstanceContext();
-  const { data: flag, isLoading: isFlagLoading } = useRecceServerFlag();
-
-  // Track navigation changes with previous pathname
-  const prevPathnameRef = useRef<string | null>(null);
-  useEffect(() => {
-    if (prevPathnameRef.current && prevPathnameRef.current !== pathname) {
-      trackNavigation({ from: prevPathnameRef.current, to: pathname });
-    }
-    prevPathnameRef.current = pathname;
-  }, [pathname]);
-
-  // Get current tab value from pathname
-  const currentTab = useMemo(() => {
-    if (pathname.startsWith("/checks")) return "/checks";
-    if (pathname.startsWith("/query")) return "/query";
-    if (pathname.startsWith("/runs")) return "/runs";
-    return "/lineage";
-  }, [pathname]);
-
-  return (
-    <Box sx={{ borderBottom: "1px solid lightgray", px: "12px" }}>
-      {/* Grid layout outside Tabs so MUI Tabs can find tab children */}
-      <Box
-        sx={{
-          display: "grid",
-          gridTemplateColumns: "1fr auto 1fr",
-          width: "100%",
-          alignItems: "center",
-        }}
-      >
-        {/* Left section: Tabs */}
-        <MuiTabs
-          value={currentTab}
-          sx={{ borderBottom: "none", minHeight: "auto" }}
-        >
-          {ROUTE_CONFIG.map(({ path, name }) => {
-            const disable = name === "Query" && flag?.single_env_onboarding;
-
-            // Don't render hidden tabs
-            if (disable) {
-              return null;
-            }
-
-            if (name === "Checklist" && ChecklistBadge) {
-              return (
-                <Tab
-                  key={path}
-                  value={path}
-                  disabled={isLoading || isFlagLoading}
-                  sx={{
-                    p: 0,
-                  }}
-                  label={
-                    <Box
-                      sx={{ display: "flex", alignItems: "center", gap: "4px" }}
-                    >
-                      <NextLink
-                        href={path}
-                        style={{
-                          textDecoration: "none",
-                          color: "inherit",
-                          padding: "0.875rem 1.1875rem",
-                          display: "flex",
-                          gap: 3,
-                          alignItems: "center",
-                        }}
-                      >
-                        {name} <ChecklistBadge />
-                      </NextLink>
-                    </Box>
-                  }
-                />
-              );
-            }
-
-            return (
-              <Tab
-                key={path}
-                value={path}
-                disabled={isLoading || isFlagLoading}
-                sx={{
-                  p: 0,
-                }}
-                label={
-                  <Box
-                    sx={{ display: "flex", alignItems: "center", gap: "4px" }}
-                  >
-                    <NextLink
-                      href={path}
-                      style={{
-                        textDecoration: "none",
-                        color: "inherit",
-                        padding: "0.875rem 1.1875rem",
-                      }}
-                    >
-                      {name}
-                    </NextLink>
-                  </Box>
-                }
-              />
-            );
-          })}
-        </MuiTabs>
-
-        {/* Center section: Filename and TopLevelShare */}
-        <Box
-          sx={{
-            display: "flex",
-            alignItems: "center",
-            gap: "12px",
-            justifyContent: "center",
-          }}
-        >
-          {!isLoading && !isDemoSite && <Filename />}
-          {!isLoading &&
-            !isDemoSite &&
-            !flag?.single_env_onboarding &&
-            !featureToggles.disableShare && <TopLevelShare />}
-        </Box>
-
-        {/* Right section: EnvInfo, StateSynchronizer, StateExporter */}
-        {!isLoading && (
-          <Box
-            sx={{
-              display: "flex",
-              justifyContent: "right",
-              alignItems: "center",
-              mr: "8px",
-            }}
-          >
-            <EnvInfo />
-            {cloudMode && <StateSynchronizer />}
-            <StateExporter />
-          </Box>
-        )}
-      </Box>
-    </Box>
-  );
-}

package/recce-source/js/app/(mainComponents)/RecceVersionBadge.tsx

@@ -1,107 +0,0 @@
-import Box from "@mui/material/Box";
-import Link from "@mui/material/Link";
-import Typography from "@mui/material/Typography";
-import React, { useEffect, useMemo } from "react";
-import { toaster } from "@/components/ui/toaster";
-import { useVersionNumber } from "@/lib/api/version";
-
-export default function RecceVersionBadge() {
-  const { version, latestVersion } = useVersionNumber();
-  const versionFormatRegex = useMemo(
-    () => new RegExp("^\\d+\\.\\d+\\.\\d+$"),
-    [],
-  );
-
-  useEffect(() => {
-    if (versionFormatRegex.test(version) && version !== latestVersion) {
-      const storageKey = "recce-update-toast-shown";
-      const hasShownForThisVersion = sessionStorage.getItem(storageKey);
-      if (hasShownForThisVersion) {
-        return;
-      }
-      // Defer toast creation to next tick to avoid React's flushSync error
-      // This prevents "flushSync called from inside lifecycle method" when
-      // the toast library tries to immediately update DOM during render cycle
-      setTimeout(() => {
-        toaster.create({
-          id: "recce-update-available", // Fixed ID prevents duplicates
-          title: "Update available",
-          description: (
-            <span>
-              A new version of Recce (v{latestVersion}) is available.
-              <br />
-              Please run{" "}
-              <Box
-                component="code"
-                sx={{
-                  bgcolor: "grey.200",
-                  px: 0.5,
-                  py: 0.25,
-                  borderRadius: 0.5,
-                  fontFamily: "monospace",
-                  fontSize: "0.875em",
-                }}
-              >
-                pip install --upgrade recce
-              </Box>{" "}
-              to update Recce.
-              <br />
-              <Link
-                sx={{
-                  color: "primary.main",
-                  fontWeight: "bold",
-                  "&:hover": { textDecoration: "underline" },
-                }}
-                href={`https://github.com/DataRecce/recce/releases/tag/v${latestVersion}`}
-                target="_blank"
-              >
-                Click here to view the detail of latest release
-              </Link>
-            </span>
-          ),
-          duration: 60 * 1000,
-          closable: true,
-        });
-        sessionStorage.setItem(storageKey, "true");
-      }, 0);
-    }
-  }, [version, latestVersion, versionFormatRegex]);
-
-  if (!versionFormatRegex.test(version)) {
-    // If the version is not in the format of x.y.z, don't apply
-    return (
-      <Typography
-        component="span"
-        sx={{
-          fontSize: "sm",
-          color: "rgba(255,255,255,0.8)",
-          textTransform: "uppercase",
-          borderWidth: 1,
-          px: 1,
-          borderRadius: 0.75,
-        }}
-      >
-        {version}
-      </Typography>
-    );
-  }
-
-  // Link to the release page on GitHub if the version is in the format of x.y.z
-  return (
-    <Link
-      href={`https://github.com/DataRecce/recce/releases/tag/v${version}`}
-      sx={{
-        "&:hover": { textDecoration: "none" },
-        fontSize: "sm",
-        color: "rgba(255,255,255,0.8)",
-        textTransform: "uppercase",
-        borderWidth: 1,
-        px: 1,
-        borderRadius: 0.75,
-      }}
-      target="_blank"
-    >
-      {version}
-    </Link>
-  );
-}

package/recce-source/js/app/(mainComponents)/TopBar.tsx

@@ -1,252 +0,0 @@
-import Badge from "@mui/material/Badge";
-import Box from "@mui/material/Box";
-import Link from "@mui/material/Link";
-import Stack from "@mui/material/Stack";
-import { useTheme } from "@mui/material/styles";
-import Typography from "@mui/material/Typography";
-import React, { useState } from "react";
-import { IconType } from "react-icons";
-import { FaGithub, FaQuestionCircle, FaSlack } from "react-icons/fa";
-import { VscGitPullRequest } from "react-icons/vsc";
-import AuthModal from "@/components/AuthModal/AuthModal";
-import AvatarDropdown from "@/components/app/AvatarDropdown";
-import { IdleTimeoutBadge } from "@/components/timeout/IdleTimeoutBadge";
-import { colors } from "@/components/ui/mui-theme";
-import { useLineageGraphContext } from "@/lib/hooks/LineageGraphContext";
-import { useRecceInstanceContext } from "@/lib/hooks/RecceInstanceContext";
-import DisplayModeToggle from "./DisplayModeToggle";
-import RecceVersionBadge from "./RecceVersionBadge";
-
-interface LinkIconProps {
-  icon: IconType;
-  href: string;
-  sx?: object;
-}
-
-function LinkIcon({ icon: IconComponent, href, sx, ...props }: LinkIconProps) {
-  const theme = useTheme();
-  return (
-    <Link
-      sx={{ height: "20px", color: "common.white", ...sx }}
-      href={href}
-      target="_blank"
-      {...props}
-    >
-      <IconComponent
-        style={{ color: theme.palette.common.white, width: 20, height: 20 }}
-      />
-    </Link>
-  );
-}
-
-export default function TopBar() {
-  const { reviewMode, isDemoSite, envInfo, cloudMode } =
-    useLineageGraphContext();
-  const { featureToggles, authed } = useRecceInstanceContext();
-  const { url: prURL, id: prID } = envInfo?.pullRequest ?? {};
-  const demoPrId = prURL ? prURL.split("/").pop() : null;
-  const brandLink =
-    cloudMode || authed
-      ? "https://cloud.datarecce.io/"
-      : "https://reccehq.com/";
-  const [showModal, setShowModal] = useState(false);
-
-  return (
-    <Box
-      sx={{
-        display: "flex",
-        gap: "10px",
-        minHeight: "40px",
-        alignItems: "center",
-        bgcolor: colors.brand[400],
-      }}
-    >
-      <Link
-        href={brandLink}
-        target="_blank"
-        sx={{ "&:hover": { textDecoration: "none" } }}
-      >
-        <Box sx={{ display: "flex", gap: "10px", alignItems: "center" }}>
-          <Box
-            component="img"
-            sx={{ width: 20, height: 20, ml: "18px" }}
-            src="/logo/recce-logo-white.png"
-            alt="recce-logo-white"
-          />
-          <Typography
-            variant="h4"
-            sx={{
-              fontFamily: '"Montserrat", sans-serif',
-              color: "common.white",
-              fontSize: "1.25rem",
-            }}
-          >
-            RECCE
-          </Typography>
-        </Box>
-      </Link>
-      <DisplayModeToggle />
-      <RecceVersionBadge />
-      {(featureToggles.mode ?? reviewMode) && (
-        <Badge
-          sx={{
-            fontSize: "0.875rem",
-            color: "rgba(255,255,255,0.8)",
-            textTransform: "uppercase",
-            borderWidth: 1,
-            px: 1,
-            borderRadius: 0.75,
-            borderColor: "rgba(255,255,255,0.8)",
-          }}
-        >
-          {featureToggles.mode ?? "review mode"}
-        </Badge>
-      )}
-      {cloudMode && prID && (
-        <Badge
-          sx={{
-            fontSize: "0.875rem",
-            color: "rgba(255,255,255,0.8)",
-            textTransform: "uppercase",
-            borderWidth: 1,
-            px: 1,
-            borderRadius: 0.75,
-            borderColor: "rgba(255,255,255,0.8)",
-          }}
-        >
-          <Stack direction="row" spacing={1} alignItems="center">
-            <Box>cloud mode</Box>
-            <Box
-              sx={{
-                borderLeft: "1px solid rgba(255,255,255,0.8)",
-                pl: "8px",
-              }}
-            >
-              <Link
-                href={prURL}
-                sx={{ "&:hover": { textDecoration: "none" } }}
-                target="_blank"
-              >
-                <VscGitPullRequest
-                  style={{
-                    color: "rgba(255,255,255,0.8)",
-                    width: 12,
-                    height: 12,
-                    marginRight: 2,
-                    display: "inline",
-                    verticalAlign: "middle",
-                  }}
-                />
-                <Typography
-                  component="span"
-                  sx={{ color: "rgba(255,255,255,0.8)", display: "inline" }}
-                >{`#${String(prID)}`}</Typography>
-              </Link>
-            </Box>
-          </Stack>
-        </Badge>
-      )}
-      {isDemoSite && prURL && demoPrId && (
-        <Badge
-          sx={{
-            fontSize: "0.875rem",
-            color: "rgba(255,255,255,0.8)",
-            textTransform: "uppercase",
-            borderWidth: 1,
-            px: 1,
-            borderRadius: 0.75,
-            borderColor: "rgba(255,255,255,0.8)",
-          }}
-        >
-          <Stack direction="row" spacing={1} alignItems="center">
-            <Box>demo mode</Box>
-            <Box
-              sx={{
-                borderLeft: "1px solid rgba(255,255,255,0.8)",
-                pl: "8px",
-              }}
-            >
-              <Link
-                href={prURL}
-                sx={{ "&:hover": { textDecoration: "none" } }}
-                target="_blank"
-              >
-                <VscGitPullRequest
-                  style={{
-                    color: "rgba(255,255,255,0.8)",
-                    width: 12,
-                    height: 12,
-                    marginRight: 2,
-                    display: "inline",
-                    verticalAlign: "middle",
-                  }}
-                />
-                <Typography
-                  component="span"
-                  sx={{ color: "rgba(255,255,255,0.8)", display: "inline" }}
-                >{`#${demoPrId}`}</Typography>
-              </Link>
-            </Box>
-          </Stack>
-        </Badge>
-      )}
-      <Box sx={{ flex: 1 }} />
-
-      {(isDemoSite || featureToggles.mode === "read only") && (
-        <>
-          <LinkIcon icon={FaGithub} href="https://github.com/DataRecce/recce" />
-          <LinkIcon
-            icon={FaSlack}
-            href="https://getdbt.slack.com/archives/C05C28V7CPP"
-          />
-          <LinkIcon
-            sx={{ mr: 2 }}
-            icon={FaQuestionCircle}
-            href="https://docs.datarecce.io"
-          />
-        </>
-      )}
-      {!isDemoSite && featureToggles.mode !== "read only" && (
-        <>
-          <IdleTimeoutBadge />
-          {authed || cloudMode ? (
-            <Box sx={{ mr: 2 }}>
-              <AvatarDropdown />
-            </Box>
-          ) : (
-            <>
-              <Box
-                component="button"
-                sx={{
-                  color: "common.white",
-                  fontSize: "0.875rem",
-                  fontWeight: 600,
-                  bgcolor: "brand.700",
-                  borderRadius: 1,
-                  px: 3,
-                  py: 1,
-                  mr: 2,
-                  cursor: "pointer",
-                  border: "none",
-                }}
-                onClick={() => {
-                  setShowModal(true);
-                }}
-              >
-                Connect to Cloud
-              </Box>
-              {showModal && (
-                <AuthModal
-                  parentOpen={showModal}
-                  handleParentClose={setShowModal}
-                  ignoreCookie
-                  variant="user-profile"
-                />
-              )}
-            </>
-          )}
-        </>
-      )}
-    </Box>
-  );
-}