@datarecce/ui 0.1.41 → 0.2.0

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

@@ -1,198 +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 IconButton from "@mui/material/IconButton";
-import Stack from "@mui/material/Stack";
-import { useTheme } from "@mui/material/styles";
-import MuiTooltip from "@mui/material/Tooltip";
-import Typography from "@mui/material/Typography";
-import { useQueryClient } from "@tanstack/react-query";
-import React, { ChangeEvent, useCallback, useRef, useState } from "react";
-import { IoClose } from "react-icons/io5";
-import { PiInfo } from "react-icons/pi";
-import { toaster } from "@/components/ui/toaster";
-import { cacheKeys } from "@/lib/api/cacheKeys";
-import { importState } from "@/lib/api/state";
-import { trackStateAction } from "@/lib/api/track";
-import { useApiConfig } from "@/lib/hooks/ApiConfigContext";
-import {
-  useLineageGraphContext,
-  useRunsAggregated,
-} from "@/lib/hooks/LineageGraphContext";
-import { useRecceInstanceContext } from "@/lib/hooks/RecceInstanceContext";
-import { useAppLocation } from "@/lib/hooks/useAppRouter";
-import { IconImport } from "../icons";
-
-export function StateImporter({ checksOnly = true }: { checksOnly?: boolean }) {
-  const theme = useTheme();
-  const isDark = theme.palette.mode === "dark";
-  const { featureToggles } = useRecceInstanceContext();
-  const queryClient = useQueryClient();
-  const { apiClient } = useApiConfig();
-  const hiddenFileInput = useRef<HTMLInputElement>(null);
-  const cancelRef = useRef<HTMLButtonElement>(null);
-  const [selectedFile, setSelectedFile] = useState<File | null>(null);
-  const [open, setOpen] = useState(false);
-  const [location, setLocation] = useAppLocation();
-  const [, refetchRunsAggregated] = useRunsAggregated();
-
-  const handleImport = useCallback(async () => {
-    if (!selectedFile) {
-      return;
-    }
-
-    try {
-      const { runs, checks } = await importState(
-        selectedFile,
-        checksOnly,
-        apiClient,
-      );
-      refetchRunsAggregated();
-      await queryClient.invalidateQueries({ queryKey: cacheKeys.checks() });
-      await queryClient.invalidateQueries({ queryKey: cacheKeys.runs() });
-      if (location.includes("/checks")) {
-        setLocation("/checks");
-      }
-      const description = checksOnly
-        ? `${checks} checks imported successfully`
-        : `${runs} runs and ${checks} checks imported successfully`;
-      toaster.create({
-        description: description,
-        type: "info",
-        duration: 5000,
-        closable: true,
-      });
-    } catch (error) {
-      console.error("Import failed", error);
-      toaster.create({
-        title: "Import failed",
-        description: String(error),
-        type: "error",
-        duration: 5000,
-        closable: true,
-      });
-    }
-
-    setOpen(false);
-  }, [
-    queryClient,
-    selectedFile,
-    location,
-    setLocation,
-    refetchRunsAggregated,
-    checksOnly,
-    apiClient,
-  ]);
-
-  const handleClick = () => {
-    if (hiddenFileInput.current) {
-      hiddenFileInput.current.click();
-    }
-  };
-
-  const handleFileSelect = (event: ChangeEvent<HTMLInputElement>) => {
-    if (event.target.files?.length === 1) {
-      setSelectedFile(event.target.files[0]);
-      setOpen(true);
-    }
-
-    if (hiddenFileInput.current) {
-      hiddenFileInput.current.value = "";
-    }
-  };
-
-  const handleClose = () => setOpen(false);
-
-  const warningSubject = checksOnly ? "checks" : "runs and checks";
-  const { isDemoSite } = useLineageGraphContext();
-  return (
-    <>
-      <MuiTooltip
-        title={
-          "Import Checklist from State File" +
-          (isDemoSite ? " (Disabled in the demo site)" : "")
-        }
-      >
-        <IconButton
-          sx={{
-            pt: "6px",
-            color: isDark ? "grey.300" : "grey.600",
-            "&:hover": { color: isDark ? "grey.100" : "grey.800" },
-          }}
-          aria-label="Import state"
-          onClick={() => {
-            handleClick();
-            trackStateAction({ name: "import" });
-          }}
-          disabled={featureToggles.disableImportStateFile || isDemoSite}
-        >
-          <Box component={IconImport} sx={{ fontSize: 20 }} />
-        </IconButton>
-      </MuiTooltip>
-      <input
-        type="file"
-        style={{ display: "none" }}
-        ref={hiddenFileInput}
-        onChange={handleFileSelect}
-      />
-      <MuiDialog
-        open={open}
-        onClose={handleClose}
-        maxWidth="sm"
-        fullWidth
-        aria-labelledby="import-dialog-title"
-      >
-        <DialogTitle
-          id="import-dialog-title"
-          sx={{ display: "flex", alignItems: "center", fontWeight: "bold" }}
-        >
-          Import state
-          <Box sx={{ flexGrow: 1 }} />
-          <IconButton size="small" onClick={handleClose}>
-            <IoClose />
-          </IconButton>
-        </DialogTitle>
-        <DialogContent>
-          <Stack
-            direction="column"
-            spacing={1}
-            sx={{ px: "5px", borderRadius: 1 }}
-          >
-            <Stack direction="row" alignItems="center" spacing={0.5}>
-              <Box component={PiInfo} sx={{ color: "error.main" }} />
-              <Typography
-                component="span"
-                sx={{ fontWeight: 500, color: "error.main" }}
-              >
-                Caution!
-              </Typography>
-            </Stack>
-            <Typography>
-              The current {warningSubject} will be{" "}
-              <Typography component="span" sx={{ fontWeight: 600 }}>
-                merged
-              </Typography>{" "}
-              with the imported state
-            </Typography>
-          </Stack>
-        </DialogContent>
-        <DialogActions>
-          <Button ref={cancelRef} onClick={handleClose}>
-            Cancel
-          </Button>
-          <Button
-            color="iochmara"
-            variant="contained"
-            onClick={handleImport}
-            sx={{ ml: "5px" }}
-          >
-            Import
-          </Button>
-        </DialogActions>
-      </MuiDialog>
-    </>
-  );
-}

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

@@ -1,145 +0,0 @@
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import IconButton from "@mui/material/IconButton";
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { useEffect, useState } from "react";
-import { PiCheckCircle, PiCopy } from "react-icons/pi";
-import { TbCloudUpload } from "react-icons/tb";
-import { useCopyToClipboard, useInterval } from "usehooks-ts";
-import AuthModal from "@/components/AuthModal/AuthModal";
-import { trackShareState } from "@/lib/api/track";
-import { useRecceInstanceContext } from "@/lib/hooks/RecceInstanceContext";
-import { useRecceShareStateContext } from "@/lib/hooks/RecceShareStateContext";
-import { useClipBoardToast } from "@/lib/hooks/useClipBoardToast";
-
-const LOADING_MESSAGES = [
-  "Processing...", // 0-30s
-  "Still processing, please wait...", // 30-60s
-  "Almost there, thanks for your patience...", // 60s+
-];
-
-export function TopLevelShare() {
-  const { successToast, failToast } = useClipBoardToast();
-  const [, copyToClipboard] = useCopyToClipboard();
-  const { authed } = useRecceInstanceContext();
-  const { shareUrl, isLoading, error, handleShareClick } =
-    useRecceShareStateContext();
-  const [showModal, setShowModal] = useState(false);
-  const [messageIndex, setMessageIndex] = useState(0);
-  const [prevIsLoading, setPrevIsLoading] = useState(isLoading);
-
-  // Reset message index when loading starts (during render)
-  if (isLoading !== prevIsLoading) {
-    setPrevIsLoading(isLoading);
-    if (isLoading) {
-      // Loading just started, reset to 0
-      setMessageIndex(0);
-    }
-  }
-
-  // Increment message index every 30 seconds while loading
-  useInterval(
-    () => {
-      setMessageIndex((prev) =>
-        Math.min(prev + 1, LOADING_MESSAGES.length - 1),
-      );
-    },
-    isLoading ? 30000 : null,
-  );
-
-  // Show error toast when sharing fails
-  useEffect(() => {
-    if (error) {
-      failToast("Failed to share state", error);
-    }
-  }, [error, failToast]);
-
-  const handleCopy = async () => {
-    try {
-      await copyToClipboard(String(shareUrl));
-      successToast("Copied the link to clipboard");
-    } catch (error) {
-      failToast("Failed to copy the link", error);
-    }
-  };
-
-  if (!authed) {
-    return (
-      <Stack direction="row" sx={{ flex: 1, alignItems: "center" }}>
-        <Button
-          size="xsmall"
-          color="neutral"
-          variant="outlined"
-          onClick={() => {
-            setShowModal(true);
-          }}
-          startIcon={<TbCloudUpload />}
-        >
-          Share
-        </Button>
-        {showModal && (
-          <AuthModal
-            parentOpen={showModal}
-            handleParentClose={setShowModal}
-            ignoreCookie
-            variant="enable-share"
-          />
-        )}
-      </Stack>
-    );
-  }
-
-  return (
-    <Stack direction="row" sx={{ flex: 1, alignItems: "center", gap: "5px" }}>
-      <Button
-        size="xsmall"
-        variant="outlined"
-        color="neutral"
-        startIcon={<TbCloudUpload />}
-        endIcon={
-          shareUrl ? (
-            <Box component={PiCheckCircle} sx={{ color: "success.main" }} />
-          ) : undefined
-        }
-        onClick={async () => {
-          await handleShareClick();
-          trackShareState({ name: "create" });
-        }}
-        disabled={isLoading}
-      >
-        {isLoading ? "Sharing..." : "Share"}
-      </Button>
-      {isLoading && (
-        <Typography sx={{ fontSize: 14, color: "grey.500" }}>
-          {LOADING_MESSAGES[messageIndex]}
-        </Typography>
-      )}
-      <Stack direction="row" spacing={0.5} alignItems="center">
-        {shareUrl && (
-          <>
-            <Box
-              sx={{
-                overflowX: "auto",
-                whiteSpace: "nowrap",
-                maxWidth: "350px",
-              }}
-            >
-              <Typography sx={{ fontSize: 14 }}>{shareUrl}</Typography>
-            </Box>
-            <IconButton
-              size="small"
-              aria-label="Copy the share URL"
-              onClick={async () => {
-                await handleCopy();
-                trackShareState({ name: "copy" });
-              }}
-            >
-              <PiCopy />
-            </IconButton>
-          </>
-        )}
-      </Stack>
-    </Stack>
-  );
-}

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

@@ -1,205 +0,0 @@
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import CircularProgress from "@mui/material/CircularProgress";
-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 FormControlLabel from "@mui/material/FormControlLabel";
-import IconButton from "@mui/material/IconButton";
-import Radio from "@mui/material/Radio";
-import RadioGroup from "@mui/material/RadioGroup";
-import Stack from "@mui/material/Stack";
-import MuiTooltip from "@mui/material/Tooltip";
-import Typography from "@mui/material/Typography";
-import { useQueryClient } from "@tanstack/react-query";
-import React, { useCallback, useState } from "react";
-import { IoClose } from "react-icons/io5";
-import { PiInfo } from "react-icons/pi";
-import { toaster } from "@/components/ui/toaster";
-import { cacheKeys } from "@/lib/api/cacheKeys";
-import { isStateSyncing, SyncStateInput, syncState } from "@/lib/api/state";
-import { useApiConfig } from "@/lib/hooks/ApiConfigContext";
-import { useAppLocation } from "@/lib/hooks/useAppRouter";
-import { useRecceInstanceInfo } from "@/lib/hooks/useRecceInstanceInfo";
-import { IconSync } from "../icons";
-
-function isCheckDetailPage(href: string): boolean {
-  const pattern =
-    /^\/checks\/([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12})$/;
-  return pattern.test(href);
-}
-
-export function StateSpinner() {
-  return (
-    <MuiTooltip title="Syncing">
-      <Box sx={{ mx: "10px" }}>
-        <CircularProgress size={20} />
-      </Box>
-    </MuiTooltip>
-  );
-}
-
-export function StateSynchronizer() {
-  const [isSyncing, setSyncing] = useState(false);
-  const queryClient = useQueryClient();
-  const { apiClient } = useApiConfig();
-  const [location, setLocation] = useAppLocation();
-  const [open, setOpen] = useState(false);
-  const [syncOption, setSyncOption] = useState<
-    "overwrite" | "revert" | "merge" | ""
-  >("");
-  const { data: instanceInfo } = useRecceInstanceInfo();
-
-  const handleClose = () => setOpen(false);
-
-  const handleSync = useCallback(
-    async (input: SyncStateInput) => {
-      setOpen(false);
-      setSyncing(true);
-
-      const response = await syncState(input, apiClient);
-      if (response.status === "conflict") {
-        setOpen(true);
-        setSyncing(false);
-        return;
-      }
-
-      while (await isStateSyncing(apiClient)) {
-        await new Promise((resolve) => setTimeout(resolve, 1000));
-      }
-
-      toaster.create({
-        description: "Sync Completed",
-        type: "success",
-        duration: 5000,
-        closable: true,
-      });
-
-      setSyncing(false);
-      setSyncOption("");
-
-      await queryClient.invalidateQueries({ queryKey: cacheKeys.lineage() });
-      await queryClient.invalidateQueries({ queryKey: cacheKeys.checks() });
-      await queryClient.invalidateQueries({ queryKey: cacheKeys.runs() });
-
-      if (isCheckDetailPage(location)) {
-        setLocation("/checks");
-      }
-    },
-    [queryClient, location, setLocation, apiClient],
-  );
-
-  if (isSyncing) return <StateSpinner />;
-  return (
-    <>
-      <MuiTooltip title="Sync with Cloud">
-        <IconButton
-          size="small"
-          aria-label="Sync state"
-          onClick={() =>
-            handleSync(instanceInfo?.session_id ? { method: "merge" } : {})
-          }
-        >
-          <Box
-            component={IconSync}
-            sx={{ fontSize: 16, verticalAlign: "middle" }}
-          />
-        </IconButton>
-      </MuiTooltip>
-      <MuiDialog open={open} onClose={handleClose}>
-        <DialogTitle
-          sx={{ display: "flex", alignItems: "center", fontWeight: "bold" }}
-        >
-          Sync with Cloud
-          <Box sx={{ flexGrow: 1 }} />
-          <IconButton size="small" onClick={handleClose}>
-            <IoClose />
-          </IconButton>
-        </DialogTitle>
-        <DialogContent>
-          <Typography>
-            New changes have been detected in the cloud. Please choose a method
-            to sync your state
-          </Typography>
-          <Box sx={{ mt: "5px" }}>
-            <RadioGroup
-              value={syncOption}
-              onChange={(e) => {
-                setSyncOption(
-                  e.target.value as "merge" | "overwrite" | "revert",
-                );
-              }}
-            >
-              <Stack direction="column">
-                {/* Merge */}
-                <FormControlLabel
-                  value="merge"
-                  control={<Radio />}
-                  label={
-                    <Stack direction="row" alignItems="center">
-                      Merge
-                      <MuiTooltip title="This will merge the local and remote states.">
-                        <Box
-                          component={PiInfo}
-                          sx={{ ml: 2, cursor: "pointer" }}
-                        />
-                      </MuiTooltip>
-                    </Stack>
-                  }
-                />
-
-                {/* Overwrite */}
-                <FormControlLabel
-                  value="overwrite"
-                  control={<Radio />}
-                  label={
-                    <Stack direction="row" alignItems="center">
-                      Overwrite
-                      <MuiTooltip title="This will overwrite the remote state file with the local state.">
-                        <Box
-                          component={PiInfo}
-                          sx={{ ml: 2, cursor: "pointer" }}
-                        />
-                      </MuiTooltip>
-                    </Stack>
-                  }
-                />
-
-                {/* Revert */}
-                <FormControlLabel
-                  value="revert"
-                  control={<Radio />}
-                  label={
-                    <Stack direction="row" alignItems="center">
-                      Revert
-                      <MuiTooltip title="This will discard local changes and revert to the cloud state.">
-                        <Box
-                          component={PiInfo}
-                          sx={{ ml: 2, cursor: "pointer" }}
-                        />
-                      </MuiTooltip>
-                    </Stack>
-                  }
-                />
-              </Stack>
-            </RadioGroup>
-          </Box>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={handleClose} sx={{ mr: 1 }}>
-            Cancel
-          </Button>
-          <Button
-            color="iochmara"
-            variant="contained"
-            onClick={() => handleSync({ method: syncOption || undefined })}
-            disabled={!syncOption}
-          >
-            Sync
-          </Button>
-        </DialogActions>
-      </MuiDialog>
-    </>
-  );
-}