@datarecce/ui 0.1.29 → 0.1.31

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

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

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

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

package/recce-source/js/app/@lineage/default.tsx

@@ -0,0 +1,20 @@
+/**
+ * @lineage Parallel Route - Default
+ *
+ * This file is rendered when navigating to routes that don't have
+ * a matching @lineage segment. It still renders LineagePage to
+ * keep it mounted (though hidden via CSS in MainLayout).
+ *
+ * This is crucial for preserving React state across navigation.
+ *
+ * @see https://nextjs.org/docs/app/api-reference/file-conventions/parallel-routes#defaultjs
+ */
+"use client";
+
+import { LineagePage } from "@/components/lineage/LineagePage";
+
+export default function LineageSlotDefault() {
+  // Still render LineagePage to keep it mounted
+  // MainLayout controls visibility via CSS display property
+  return <LineagePage />;
+}

package/recce-source/js/app/@lineage/page.tsx

@@ -0,0 +1,14 @@
+/**
+ * @lineage Parallel Route - Page
+ *
+ * This parallel route renders the LineagePage component.
+ * It is always mounted in the layout to preserve React state
+ * (React Flow graph state, zoom level, selected nodes, etc.)
+ */
+"use client";
+
+import { LineagePage } from "@/components/lineage/LineagePage";
+
+export default function LineageSlotPage() {
+  return <LineagePage />;
+}