@datarecce/ui 0.1.40 → 0.2.0

package/recce-source/js/app/MainLayout.tsx

@@ -1,170 +0,0 @@
-/**
- * MainLayout - Handles parallel route visibility and main app structure
- *
- * This component manages the visibility of the @lineage parallel route
- * while keeping it mounted to preserve React state (React Flow graph state, etc.)
- */
-
-"use client";
-
-import Box from "@mui/material/Box";
-import CircularProgress from "@mui/material/CircularProgress";
-import { usePathname } from "next/navigation";
-import React, { ReactNode, Suspense, useEffect } from "react";
-import AuthModal from "@/components/AuthModal/AuthModal";
-import { RunList } from "@/components/run/RunList";
-import { RunResultPane } from "@/components/run/RunResultPane";
-import { HSplit, VSplit } from "@/components/split/Split";
-import { trackInit } from "@/lib/api/track";
-import { useLineageGraphContext } from "@/lib/hooks/LineageGraphContext";
-import { useRecceActionContext } from "@/lib/hooks/RecceActionContext";
-import { useRecceInstanceContext } from "@/lib/hooks/RecceInstanceContext";
-import { useRecceServerFlag } from "@/lib/hooks/useRecceServerFlag";
-import "@fontsource/montserrat/800.css";
-import NavBar from "app/(mainComponents)/NavBar";
-import TopBar from "app/(mainComponents)/TopBar";
-
-interface MainLayoutProps {
-  children: ReactNode;
-  /** Parallel route slot from @lineage */
-  lineage: ReactNode;
-}
-
-function MainContentLoading(): ReactNode {
-  return (
-    <Box
-      sx={{
-        display: "flex",
-        height: "100%",
-        alignItems: "center",
-        justifyContent: "center",
-        contain: "size",
-      }}
-    >
-      <Box
-        sx={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          height: "100%",
-        }}
-      >
-        <CircularProgress size={48} />
-      </Box>
-    </Box>
-  );
-}
-
-export function MainLayout({ children, lineage }: MainLayoutProps) {
-  const pathname = usePathname();
-  const { isDemoSite, isLoading, isCodespace } = useLineageGraphContext();
-  const { featureToggles } = useRecceInstanceContext();
-
-  // Determine if lineage route is active (handle trailing slashes)
-  const normalizedPath = pathname.replace(/\/$/, "") || "/";
-  const isLineageRoute =
-    normalizedPath === "/lineage" || normalizedPath === "/";
-
-  useEffect(() => {
-    trackInit();
-  }, []);
-
-  return (
-    <Box
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        height: "100vh",
-        overflow: "hidden",
-      }}
-    >
-      <TopBar />
-      <NavBar />
-      <Main isLineageRoute={isLineageRoute} lineage={lineage}>
-        {children}
-      </Main>
-      {!isLoading &&
-        !isDemoSite &&
-        !isCodespace &&
-        featureToggles.mode === null && <AuthModal />}
-    </Box>
-  );
-}
-
-// Main content area with parallel route handling
-interface MainProps {
-  children: ReactNode;
-  lineage: ReactNode;
-  isLineageRoute: boolean;
-}
-
-function Main({ children, lineage, isLineageRoute }: MainProps) {
-  const { isRunResultOpen, isHistoryOpen, closeRunResult } =
-    useRecceActionContext();
-  const { data: flag } = useRecceServerFlag();
-  const pathname = usePathname();
-
-  const _isRunResultOpen = isRunResultOpen && !pathname.startsWith("/checks");
-  const _isHistoryOpen = isHistoryOpen && !pathname.startsWith("/checks");
-
-  return (
-    <HSplit
-      sizes={[0, 100]}
-      minSize={_isHistoryOpen ? 300 : 0}
-      gutterSize={_isHistoryOpen ? 5 : 0}
-      style={{ height: "100%" }}
-    >
-      {/* suppressHydrationWarning: react-split adds inline styles after mount */}
-      <Box style={{ contain: "size" }} suppressHydrationWarning>
-        {_isHistoryOpen && <RunList />}
-      </Box>
-      <VSplit
-        sizes={_isRunResultOpen ? [50, 50] : [100, 0]}
-        minSize={_isRunResultOpen ? 100 : 0}
-        gutterSize={_isRunResultOpen ? 5 : 0}
-        style={{ flex: "1", contain: "size" }}
-      >
-        <Suspense fallback={<MainContentLoading />}>
-          {/* suppressHydrationWarning: react-split adds inline styles (height, width)
-              to children after mount, causing expected server/client mismatches */}
-          <Box
-            sx={{
-              p: 0,
-              contain: "content",
-              height: "100%",
-              position: "relative",
-            }}
-            suppressHydrationWarning
-          >
-            {/*
-             * Lineage parallel route - always mounted but visibility controlled
-             * This replaces the old RouteAlwaysMount pattern
-             */}
-            <Box
-              sx={{
-                display: isLineageRoute ? "block" : "none",
-                height: "100%",
-                position: isLineageRoute ? "relative" : "absolute",
-                inset: 0,
-              }}
-            >
-              {lineage}
-            </Box>
-
-            {/* Other route content */}
-            {!isLineageRoute && children}
-          </Box>
-        </Suspense>
-        {/* suppressHydrationWarning: react-split adds inline styles after mount */}
-        <Box sx={{ height: "100%" }} suppressHydrationWarning>
-          {_isRunResultOpen ? (
-            <RunResultPane
-              onClose={closeRunResult}
-              isSingleEnvironment={!!flag?.single_env_onboarding}
-            />
-          ) : null}
-        </Box>
-      </VSplit>
-    </HSplit>
-  );
-}

package/recce-source/js/app/Providers.tsx

@@ -1,49 +0,0 @@
-/**
- * Application Providers
- *
- * Wraps the application with necessary context providers.
- * Updated to remove Wouter Router - now using Next.js App Router.
- *
- * Migration Note: Both Chakra UI (Provider) and MUI (MuiProvider) are included
- * to support the gradual migration from Chakra to MUI. Once migration is
- * complete, the Chakra Provider can be removed.
- */
-
-"use client";
-
-import { QueryClientProvider } from "@tanstack/react-query";
-import { ThemeProvider as NextThemesProvider } from "next-themes";
-import { ReactNode } from "react";
-import { MuiProvider } from "@/components/ui/mui-provider";
-import { Toaster } from "@/components/ui/toaster";
-import { reactQueryClient } from "@/lib/api/axiosClient";
-import { IdleTimeoutProvider } from "@/lib/hooks/IdleTimeoutContext";
-import RecceContextProvider from "@/lib/hooks/RecceContextProvider";
-import { MainLayout } from "./MainLayout";
-
-interface ProvidersProps {
-  children: ReactNode;
-  /** Parallel route slot for lineage page */
-  lineage: ReactNode;
-}
-
-export default function Providers({ children, lineage }: ProvidersProps) {
-  return (
-    <NextThemesProvider
-      attribute="class"
-      defaultTheme="light"
-      enableSystem={false}
-    >
-      <MuiProvider enableCssBaseline>
-        <QueryClientProvider client={reactQueryClient}>
-          <IdleTimeoutProvider>
-            <RecceContextProvider>
-              <MainLayout lineage={lineage}>{children}</MainLayout>
-              <Toaster />
-            </RecceContextProvider>
-          </IdleTimeoutProvider>
-        </QueryClientProvider>
-      </MuiProvider>
-    </NextThemesProvider>
-  );
-}

package/recce-source/js/app/checks/page.tsx

@@ -1,296 +0,0 @@
-"use client";
-
-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 { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useSearchParams } from "next/navigation";
-import React, {
-  ReactNode,
-  Suspense,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
-import { StateImporter } from "@/components/app/StateImporter";
-import { CheckDetail } from "@/components/check/CheckDetail";
-import { CheckEmptyState } from "@/components/check/CheckEmptyState";
-import { CheckList } from "@/components/check/CheckList";
-import { HSplit } from "@/components/split/Split";
-import { cacheKeys } from "@/lib/api/cacheKeys";
-import { listChecks, reorderChecks } from "@/lib/api/checks";
-import { useApiConfig } from "@/lib/hooks/ApiConfigContext";
-import { useRecceCheckContext } from "@/lib/hooks/RecceCheckContext";
-import { useAppLocation } from "@/lib/hooks/useAppRouter";
-
-/**
- * Wrapper component that handles the Suspense boundary for useSearchParams
- */
-export default function CheckPageWrapper(): ReactNode {
-  return (
-    <Suspense fallback={<CheckPageLoading />}>
-      <CheckPageContent />
-    </Suspense>
-  );
-}
-
-/**
- * Loading fallback - shows minimal UI while search params are being read
- */
-function CheckPageLoading(): ReactNode {
-  const theme = useTheme();
-  const isDark = theme.palette.mode === "dark";
-  const borderColor = isDark ? "grey.700" : "grey.300";
-
-  return (
-    <HSplit style={{ height: "100%" }} minSize={50} sizes={[20, 80]}>
-      <Box
-        sx={{
-          borderRight: "1px solid",
-          borderRightColor: borderColor,
-          height: "100%",
-        }}
-        style={{ contain: "size" }}
-      >
-        <Box
-          sx={{
-            height: "100%",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-          }}
-        >
-          <CircularProgress size={20} />
-        </Box>
-      </Box>
-      <Box>
-        <Box
-          sx={{
-            height: "100%",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-          }}
-        >
-          <CircularProgress size={20} />
-        </Box>
-      </Box>
-    </HSplit>
-  );
-}
-
-function CheckPageContent(): ReactNode {
-  const theme = useTheme();
-  const isDark = theme.palette.mode === "dark";
-  const borderColor = isDark ? "grey.700" : "grey.300";
-  const [, setLocation] = useAppLocation();
-  const searchParams = useSearchParams();
-  const checkId = searchParams.get("id");
-  const { latestSelectedCheckId, setLatestSelectedCheckId } =
-    useRecceCheckContext();
-  const queryClient = useQueryClient();
-  const { apiClient } = useApiConfig();
-  const selectedItem = checkId;
-
-  useEffect(() => {
-    if (selectedItem) {
-      setLatestSelectedCheckId(selectedItem);
-    }
-  }, [selectedItem, setLatestSelectedCheckId]);
-
-  const {
-    isLoading,
-    error,
-    data: checks,
-    status,
-    refetch: refetchCheckList,
-  } = useQuery({
-    queryKey: cacheKeys.checks(),
-    queryFn: () => listChecks(apiClient),
-    refetchOnMount: true,
-  });
-
-  const handleSelectItem = useCallback(
-    (checkId: string) => {
-      setLocation(`/checks/?id=${checkId}`);
-    },
-    [setLocation],
-  );
-
-  const [orderedChecks, setOrderedChecks] = useState(checks ?? []);
-  const [prevChecks, setPrevChecks] = useState(checks);
-
-  // Sync orderedChecks with checks when checks data changes (during render)
-  if (checks !== prevChecks) {
-    setPrevChecks(checks);
-    setOrderedChecks(checks ?? []);
-  }
-
-  const { mutate: changeChecksOrder } = useMutation({
-    mutationFn: (order: { source: number; destination: number }) =>
-      reorderChecks(order, apiClient),
-    onSuccess: async () => {
-      await queryClient.invalidateQueries({ queryKey: cacheKeys.checks() });
-    },
-  });
-
-  const handleDragEnd = useCallback(
-    (source: number, destination: number) => {
-      const updatedItems = [...orderedChecks];
-      const [reorderedItem] = updatedItems.splice(source, 1);
-      updatedItems.splice(destination, 0, reorderedItem);
-
-      changeChecksOrder({
-        source,
-        destination,
-      });
-
-      setOrderedChecks(updatedItems);
-    },
-    [orderedChecks, changeChecksOrder],
-  );
-
-  // Memoized validation to avoid duplicate checks.some() calls
-  const isValidSelection = useMemo(
-    () =>
-      Boolean(
-        selectedItem &&
-          checks?.some((check) => check.check_id === selectedItem),
-      ),
-    [selectedItem, checks],
-  );
-
-  useEffect(() => {
-    if (status !== "success" || checks.length === 0) {
-      return;
-    }
-
-    if (!isValidSelection) {
-      // No selection or invalid selection - redirect to a valid check
-      // First try latestSelectedCheckId if it's valid
-      const isValidLatestSelectedCheckId =
-        latestSelectedCheckId &&
-        checks.some((check) => check.check_id === latestSelectedCheckId);
-
-      if (isValidLatestSelectedCheckId) {
-        setLocation(`/checks/?id=${latestSelectedCheckId}`, { replace: true });
-      } else {
-        // Fall back to the first check
-        setLocation(`/checks/?id=${checks[0].check_id}`, { replace: true });
-      }
-    }
-  }, [status, isValidSelection, checks, setLocation, latestSelectedCheckId]);
-
-  if (isLoading) {
-    return null;
-  }
-
-  if (error) {
-    return (
-      <Box>
-        Error: <span className="no-track-pii-safe">{error.message}</span>
-      </Box>
-    );
-  }
-
-  if (!checks?.length) {
-    return (
-      <HSplit style={{ height: "100%" }} minSize={50} sizes={[20, 80]}>
-        <Box
-          sx={{
-            borderRight: "1px solid",
-            borderRightColor: borderColor,
-            height: "100%",
-          }}
-          style={{ contain: "size" }}
-        >
-          <Stack
-            sx={{ height: "100%", alignItems: "stretch" }}
-            style={{ contain: "strict" }}
-            spacing={0}
-          >
-            <Box
-              sx={{
-                display: "flex",
-                justifyContent: "flex-end",
-                p: "0px 10px",
-              }}
-            >
-              <StateImporter checksOnly />
-            </Box>
-            <Divider />
-            <Box
-              sx={{
-                height: "100%",
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-              }}
-            >
-              <Box sx={{ textAlign: "center", color: "grey.500" }}>
-                No checks
-              </Box>
-            </Box>
-          </Stack>
-        </Box>
-        <Box>
-          <Box
-            sx={{
-              height: "100%",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-            }}
-          >
-            <CheckEmptyState />
-          </Box>
-        </Box>
-      </HSplit>
-    );
-  }
-
-  return (
-    <HSplit style={{ height: "100%" }} minSize={50} sizes={[20, 80]}>
-      <Box
-        sx={{
-          borderRight: "1px solid",
-          borderRightColor: borderColor,
-          height: "100%",
-        }}
-        style={{ contain: "size" }}
-      >
-        <Stack
-          sx={{ height: "100%", alignItems: "stretch" }}
-          style={{ contain: "strict" }}
-          spacing={0}
-        >
-          <Box
-            sx={{ display: "flex", justifyContent: "flex-end", p: "0px 10px" }}
-          >
-            <StateImporter checksOnly />
-          </Box>
-          <Divider />
-          <CheckList
-            checks={orderedChecks}
-            selectedItem={selectedItem}
-            onCheckSelected={handleSelectItem}
-            onChecksReordered={handleDragEnd}
-          />
-        </Stack>
-      </Box>
-      <Box sx={{ height: "100%" }}>
-        {/* isValidSelection already checks selectedItem, but TS needs explicit check for type narrowing */}
-        {isValidSelection && selectedItem && (
-          <CheckDetail
-            key={selectedItem}
-            checkId={selectedItem}
-            refreshCheckList={refetchCheckList}
-          />
-        )}
-      </Box>
-    </HSplit>
-  );
-}

package/recce-source/js/app/error.tsx

@@ -1,93 +0,0 @@
-/**
- * Next.js App Router Error Boundary
- *
- * This file handles runtime errors within route segments.
- * It automatically wraps the route segment in a React Error Boundary.
- *
- * @see https://nextjs.org/docs/app/building-your-application/routing/error-handling
- */
-
-"use client";
-
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import Typography from "@mui/material/Typography";
-import * as Sentry from "@sentry/nextjs";
-import { useEffect } from "react";
-
-interface ErrorProps {
-  error: Error & { digest?: string };
-  reset: () => void;
-}
-
-// biome-ignore lint/suspicious/noShadowRestrictedNames: https://nextjs.org/docs/app/api-reference/file-conventions/error
-export default function Error({ error, reset }: ErrorProps) {
-  useEffect(() => {
-    // Log the error to Sentry
-    Sentry.captureException(error, {
-      tags: {
-        errorBoundary: "app",
-        digest: error.digest,
-      },
-      extra: {
-        componentStack: error.stack,
-      },
-    });
-
-    // Also log to console for development
-    console.error("App Error Boundary caught error:", error);
-  }, [error]);
-
-  return (
-    <Box
-      sx={{
-        height: "100%",
-        bgcolor: "grey.50",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-      }}
-    >
-      <Box
-        sx={{
-          p: 2,
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "flex-start",
-          bgcolor: "white",
-          border: "solid lightgray 1px",
-          borderRadius: "8px",
-          minHeight: "200px",
-          boxShadow: 3,
-        }}
-      >
-        <Typography variant="h6" sx={{ width: "800px", mb: 2 }}>
-          You have encountered an error
-        </Typography>
-
-        <Box sx={{ flex: 1, fontSize: "10pt", color: "grey.600", mb: 2 }}>
-          {error.message || String(error)}
-        </Box>
-
-        {error.digest && (
-          <Box sx={{ fontSize: "9pt", color: "grey.400", mb: 2 }}>
-            Error ID: {error.digest}
-          </Box>
-        )}
-
-        <Button
-          sx={{ justifySelf: "center", alignSelf: "center", mt: "20px" }}
-          color="iochmara"
-          variant="contained"
-          size="small"
-          onClick={() => {
-            // Attempt to recover by re-rendering the route segment
-            reset();
-          }}
-        >
-          Try again
-        </Button>
-      </Box>
-    </Box>
-  );
-}