@datarecce/ui 0.1.40 → 0.2.0

package/recce-source/js/src/components/run/RunResultPane.tsx

@@ -1,454 +0,0 @@
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import Divider from "@mui/material/Divider";
-import IconButton from "@mui/material/IconButton";
-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 Stack from "@mui/material/Stack";
-import { useTheme } from "@mui/material/styles";
-import Tab from "@mui/material/Tab";
-import Tabs from "@mui/material/Tabs";
-import Typography from "@mui/material/Typography";
-import { useQueryClient } from "@tanstack/react-query";
-import { type MouseEvent, ReactNode, Ref, useCallback, useState } from "react";
-import { IoClose } from "react-icons/io5";
-import { PiCaretDown, PiCheck, PiCopy, PiRepeat } from "react-icons/pi";
-import { TbCloudUpload } from "react-icons/tb";
-import YAML from "yaml";
-import AuthModal from "@/components/AuthModal/AuthModal";
-import { CodeEditor } from "@/components/editor";
-import { cacheKeys } from "@/lib/api/cacheKeys";
-import { createCheckByRun } from "@/lib/api/checks";
-import { trackCopyToClipboard, trackShareState } from "@/lib/api/track";
-import {
-  AxiosQueryParams,
-  isQueryBaseRun,
-  isQueryDiffRun,
-  isQueryRun,
-  RunParamTypes,
-} from "@/lib/api/types";
-import { useApiConfig } from "@/lib/hooks/ApiConfigContext";
-import { useRecceActionContext } from "@/lib/hooks/RecceActionContext";
-import { useRecceInstanceContext } from "@/lib/hooks/RecceInstanceContext";
-import { useRecceShareStateContext } from "@/lib/hooks/RecceShareStateContext";
-import { useCopyToClipboardButton } from "@/lib/hooks/ScreenShot";
-import { useAppLocation } from "@/lib/hooks/useAppRouter";
-import { useRun } from "@/lib/hooks/useRun";
-import {
-  LearnHowLink,
-  RecceNotification,
-} from "../onboarding-guide/Notification";
-import SqlEditor, { DualSqlEditor } from "../query/SqlEditor";
-import { RunStatusAndDate } from "./RunStatusAndDate";
-import { RunView } from "./RunView";
-import {
-  findByRunType,
-  RefTypes,
-  RegistryEntry,
-  runTypeHasRef,
-  ViewOptionTypes,
-} from "./registry";
-
-interface RunPageProps {
-  onClose?: () => void;
-  disableAddToChecklist?: boolean;
-  isSingleEnvironment?: boolean;
-}
-
-const _ParamView = (data: { type: string; params: RunParamTypes }) => {
-  const muiTheme = useTheme();
-  const isDark = muiTheme.palette.mode === "dark";
-  const yaml = YAML.stringify(data, null, 2);
-  return (
-    <CodeEditor
-      value={yaml}
-      language="yaml"
-      readOnly={true}
-      lineNumbers={false}
-      wordWrap={true}
-      fontSize={14}
-      height="100%"
-      theme={isDark ? "dark" : "light"}
-      className="no-track-pii-safe"
-    />
-  );
-};
-
-const SingleEnvironmentSetupNotification = ({
-  runType,
-}: {
-  runType?: string;
-}) => {
-  const [open, setOpen] = useState(true);
-
-  if (!open) {
-    return <></>;
-  }
-
-  const handleClose = () => setOpen(false);
-  switch (runType) {
-    case "row_count":
-      return (
-        <RecceNotification onClose={handleClose}>
-          <Typography>
-            Enable row count diffing, and other Recce features, by configuring a
-            base dbt environment to compare against. <LearnHowLink />
-          </Typography>
-        </RecceNotification>
-      );
-    case "profile":
-      return (
-        <RecceNotification onClose={handleClose}>
-          <Typography>
-            Enable data-profile diffing, and other Recce features, by
-            configuring a base dbt environment to compare against.{" "}
-            <LearnHowLink />
-          </Typography>
-        </RecceNotification>
-      );
-    default:
-      return <></>;
-  }
-};
-
-const RunResultShareMenu = ({
-  disableCopyToClipboard,
-  onCopyToClipboard,
-  onMouseEnter,
-  onMouseLeave,
-}: {
-  disableCopyToClipboard: boolean;
-  onCopyToClipboard: () => Promise<void>;
-  onMouseEnter: () => void;
-  onMouseLeave: () => void;
-}) => {
-  const { authed } = useRecceInstanceContext();
-  const { handleShareClick } = useRecceShareStateContext();
-  const [showModal, setShowModal] = useState(false);
-  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
-  const open = Boolean(anchorEl);
-
-  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  return (
-    <>
-      <Button
-        size="small"
-        variant="outlined"
-        color="neutral"
-        onClick={handleClick}
-        endIcon={<PiCaretDown />}
-        sx={{ textTransform: "none" }}
-      >
-        Share
-      </Button>
-      <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
-        <MenuItem
-          onClick={async () => {
-            await onCopyToClipboard();
-            handleClose();
-          }}
-          onMouseEnter={onMouseEnter}
-          onMouseLeave={onMouseLeave}
-          disabled={disableCopyToClipboard}
-        >
-          <ListItemIcon>
-            <PiCopy />
-          </ListItemIcon>
-          <ListItemText>Copy to Clipboard</ListItemText>
-        </MenuItem>
-        <Divider />
-        {authed ? (
-          <MenuItem
-            onClick={async () => {
-              await handleShareClick();
-              trackShareState({ name: "create" });
-              handleClose();
-            }}
-          >
-            <ListItemIcon>
-              <TbCloudUpload />
-            </ListItemIcon>
-            <ListItemText>Share to Cloud</ListItemText>
-          </MenuItem>
-        ) : (
-          <MenuItem
-            onClick={() => {
-              setShowModal(true);
-              handleClose();
-            }}
-          >
-            <ListItemIcon>
-              <TbCloudUpload />
-            </ListItemIcon>
-            <ListItemText>Share</ListItemText>
-          </MenuItem>
-        )}
-      </Menu>
-      {showModal && (
-        <AuthModal
-          parentOpen={showModal}
-          handleParentClose={setShowModal}
-          ignoreCookie
-          variant="enable-share"
-        />
-      )}
-    </>
-  );
-};
-
-type TabValueItems = "result" | "params" | "query";
-
-export const PrivateLoadableRunView = ({
-  runId,
-  onClose,
-  isSingleEnvironment,
-}: {
-  runId?: string;
-  onClose?: () => void;
-  isSingleEnvironment?: boolean;
-}) => {
-  const { featureToggles } = useRecceInstanceContext();
-  const { runAction } = useRecceActionContext();
-  const { error, run, onCancel, isRunning } = useRun(runId);
-  const [viewOptions, setViewOptions] = useState<ViewOptionTypes>();
-  const [tabValue, setTabValue] = useState<TabValueItems>("result");
-  const _disableAddToChecklist = isSingleEnvironment;
-  const showSingleEnvironmentSetupNotification = isSingleEnvironment;
-
-  let RunResultView: RegistryEntry["RunResultView"] | undefined;
-  if (run && runTypeHasRef(run.type)) {
-    RunResultView = findByRunType(run.type)
-      .RunResultView as RegistryEntry["RunResultView"];
-  }
-
-  const handleRerun = useCallback(() => {
-    if (run) {
-      runAction(run.type, run.params as unknown as AxiosQueryParams);
-    }
-  }, [run, runAction]);
-
-  const isQuery =
-    run?.type === "query" ||
-    run?.type === "query_diff" ||
-    run?.type === "query_base";
-  const { ref, onCopyToClipboard, onMouseEnter, onMouseLeave } =
-    useCopyToClipboardButton();
-  const disableCopyToClipboard =
-    !runId || !run?.result || !!error || tabValue !== "result";
-
-  return (
-    <Box sx={{ display: "flex", flexDirection: "column", height: "100%" }}>
-      {showSingleEnvironmentSetupNotification && (
-        <SingleEnvironmentSetupNotification runType={run?.type} />
-      )}
-      <Box
-        sx={{
-          display: "flex",
-          alignItems: "center",
-          borderBottom: 1,
-          borderColor: "divider",
-          mb: "1px",
-        }}
-      >
-        <Tabs
-          value={tabValue}
-          onChange={(_, newValue) => setTabValue(newValue as TabValueItems)}
-        >
-          <Tab label="Result" value="result" />
-          <Tab label="Params" value="params" />
-          {isQuery && <Tab label="Query" value="query" />}
-        </Tabs>
-        <Box sx={{ flexGrow: 1 }} />
-        <Stack
-          direction="row"
-          spacing={1}
-          sx={{ overflow: "hidden", pr: 1 }}
-          alignItems="center"
-        >
-          {run && <RunStatusAndDate run={run} />}
-          <Button
-            variant="outlined"
-            color="neutral"
-            disabled={
-              !runId || isRunning || featureToggles.disableDatabaseQuery
-            }
-            size="small"
-            onClick={handleRerun}
-            startIcon={<PiRepeat />}
-            sx={{ textTransform: "none" }}
-          >
-            Rerun
-          </Button>
-          {featureToggles.disableShare ? (
-            <Button
-              variant="outlined"
-              color="neutral"
-              disabled={
-                !runId || !run?.result || !!error || tabValue !== "result"
-              }
-              onMouseEnter={onMouseEnter}
-              onMouseLeave={onMouseLeave}
-              size="small"
-              onClick={onCopyToClipboard}
-              startIcon={<PiCopy />}
-              sx={{ textTransform: "none" }}
-            >
-              Copy to Clipboard
-            </Button>
-          ) : (
-            <RunResultShareMenu
-              disableCopyToClipboard={disableCopyToClipboard}
-              onCopyToClipboard={async () => {
-                await onCopyToClipboard();
-                trackCopyToClipboard({
-                  type: run?.type ?? "unknown",
-                  from: "run",
-                });
-              }}
-              onMouseEnter={onMouseEnter}
-              onMouseLeave={onMouseLeave}
-            />
-          )}
-
-          <AddToCheckButton
-            runId={runId}
-            viewOptions={viewOptions as Record<string, unknown>}
-          />
-
-          <IconButton
-            size="small"
-            onClick={() => {
-              if (onClose) {
-                onClose();
-              }
-            }}
-          >
-            <IoClose />
-          </IconButton>
-        </Stack>
-      </Box>
-      {tabValue === "result" && (
-        <RunView
-          ref={ref as unknown as Ref<RefTypes>}
-          error={error}
-          run={run}
-          onCancel={onCancel}
-          viewOptions={viewOptions}
-          onViewOptionsChanged={setViewOptions}
-          RunResultView={RunResultView}
-        />
-      )}
-
-      {tabValue === "params" && run && (
-        <_ParamView type={run.type} params={run.params} />
-      )}
-
-      {tabValue === "query" &&
-        run &&
-        run.params &&
-        (isQueryRun(run) || isQueryBaseRun(run) || isQueryDiffRun(run)) &&
-        (isQueryDiffRun(run) ? (
-          <DualSqlEditor
-            value={run.params.sql_template}
-            baseValue={run.params.base_sql_template}
-            options={{ readOnly: true }}
-          />
-        ) : (
-          <SqlEditor
-            value={run.params.sql_template}
-            options={{ readOnly: true }}
-          />
-        ))}
-    </Box>
-  );
-};
-
-export const RunResultPane = ({
-  onClose,
-  isSingleEnvironment,
-}: RunPageProps) => {
-  const { runId } = useRecceActionContext();
-
-  return (
-    <PrivateLoadableRunView
-      runId={runId}
-      onClose={onClose}
-      isSingleEnvironment={isSingleEnvironment}
-    />
-  );
-};
-
-interface AddToCheckButtonProps {
-  runId?: string;
-  viewOptions: Record<string, unknown>;
-}
-
-function AddToCheckButton({
-  runId,
-  viewOptions,
-}: AddToCheckButtonProps): ReactNode {
-  const { featureToggles } = useRecceInstanceContext();
-  const { error, run } = useRun(runId);
-  const queryClient = useQueryClient();
-  const [, setLocation] = useAppLocation();
-  const { apiClient } = useApiConfig();
-
-  const checkId = run?.check_id;
-
-  const handleGoToCheck = useCallback(() => {
-    if (!checkId) {
-      return;
-    }
-
-    setLocation(`/checks/?id=${checkId}`);
-  }, [checkId, setLocation]);
-
-  const handleAddToChecklist = useCallback(async () => {
-    if (!runId) {
-      return;
-    }
-    const check = await createCheckByRun(runId, viewOptions, apiClient);
-
-    await queryClient.invalidateQueries({ queryKey: cacheKeys.checks() });
-    setLocation(`/checks/?id=${check.check_id}`);
-  }, [runId, setLocation, queryClient, viewOptions, apiClient]);
-
-  if (featureToggles.disableUpdateChecklist) {
-    return <></>;
-  }
-  if (run?.check_id) {
-    return (
-      <Button
-        disabled={!runId || !run.result || !!error}
-        size="small"
-        variant="contained"
-        onClick={handleGoToCheck}
-        startIcon={<PiCheck />}
-        sx={{ textTransform: "none" }}
-      >
-        Go to Check
-      </Button>
-    );
-  }
-  return (
-    <Button
-      disabled={!runId || !run?.result || !!error}
-      size="small"
-      variant="contained"
-      onClick={handleAddToChecklist}
-      startIcon={<PiCheck />}
-      sx={{ textTransform: "none" }}
-    >
-      Add to Checklist
-    </Button>
-  );
-}

package/recce-source/js/src/components/run/RunStatusAndDate.tsx

@@ -1,106 +0,0 @@
-import Box from "@mui/material/Box";
-import CircularProgress from "@mui/material/CircularProgress";
-import Typography from "@mui/material/Typography";
-import { format } from "date-fns";
-import { token } from "@/components/ui/mui-theme";
-import { Run } from "@/lib/api/types";
-
-export function formatRunDate(date: Date | null) {
-  const today = new Date();
-  const yesterday = new Date();
-  yesterday.setDate(today.getDate() - 1);
-  if (date == null) {
-    return null;
-  }
-
-  if (today.toDateString() === date.toDateString()) {
-    return "Today";
-  } else if (yesterday.toDateString() === date.toDateString()) {
-    return "Yesterday";
-  } else {
-    return format(date, "MMM d");
-  }
-}
-
-export function formatRunDateTime(date: Date | null) {
-  const today = new Date();
-  const yesterday = new Date();
-  yesterday.setDate(today.getDate() - 1);
-  if (date == null) {
-    return null;
-  }
-
-  if (today.toDateString() === date.toDateString()) {
-    return "Today, " + format(date, "HH:mm");
-  } else if (yesterday.toDateString() === date.toDateString()) {
-    return "Yesterday, " + format(date, "HH:mm");
-  } else {
-    return format(date, "MMM d, HH:mm");
-  }
-}
-
-export const RunStatusAndDate = ({ run }: { run: Run }) => {
-  const isRunning = run.status === "running";
-
-  let status = run.status;
-  if (!status) {
-    if (run.result) {
-      status = "finished";
-    } else if (run.error) {
-      status = "failed";
-    }
-  }
-
-  let color: string;
-  let message: string;
-  if (status === "finished") {
-    color = "green";
-    message = "Finished";
-  } else if (status === "failed") {
-    color = "red";
-    message = "Failed";
-  } else if (status === "cancelled") {
-    color = "gray";
-    message = "Cancelled";
-  } else if (status === "running") {
-    color = "blue";
-    message = "Running";
-  } else {
-    color = "green";
-    message = "Finished";
-  }
-  const dateTime = run.run_at ? formatRunDateTime(new Date(run.run_at)) : null;
-
-  return (
-    <Box
-      sx={{
-        display: "flex",
-        justifyContent: "start",
-        fontSize: "11pt",
-        color: "grey.500",
-        gap: "3px",
-        alignItems: "center",
-        overflow: "hidden",
-      }}
-    >
-      {isRunning && <CircularProgress size={12} color="primary" />}
-      <Typography
-        component="span"
-        sx={{ fontWeight: 500, color: token(`colors.${color}.400`) }}
-      >
-        {message}
-      </Typography>
-      <Typography component="span">•</Typography>
-      <Typography
-        component="span"
-        sx={{
-          textOverflow: "ellipsis",
-          overflow: "hidden",
-          whiteSpace: "nowrap",
-        }}
-      >
-        {dateTime}
-      </Typography>
-    </Box>
-  );
-};

package/recce-source/js/src/components/run/RunToolbar.tsx

@@ -1,70 +0,0 @@
-import Box from "@mui/material/Box";
-import { useTheme } from "@mui/material/styles";
-import _ from "lodash";
-import { ReactNode } from "react";
-import { PiWarning } from "react-icons/pi";
-import { colors } from "@/components/ui/mui-theme";
-import { RunResultViewProps } from "./types";
-
-export interface DiffViewOptions {
-  changed_only?: boolean;
-}
-
-interface RunToolbarProps<VO> extends RunResultViewProps<VO> {
-  warnings?: string[];
-  children?: ReactNode;
-}
-
-export const RunToolbar = ({
-  warnings,
-  children,
-}: RunToolbarProps<DiffViewOptions>) => {
-  const theme = useTheme();
-  const isDark = theme.palette.mode === "dark";
-  const hasWarnings = warnings && warnings.length > 0;
-
-  return (
-    <Box
-      sx={{
-        display: "flex",
-        borderBottom: "1px solid",
-        borderColor: "divider",
-        justifyContent: "flex-end",
-        gap: "5px",
-        alignItems: "center",
-        px: "10px",
-        bgcolor: hasWarnings
-          ? isDark
-            ? colors.amber[900]
-            : colors.amber[100]
-          : "inherit",
-        color: hasWarnings
-          ? isDark
-            ? colors.amber[200]
-            : colors.amber[800]
-          : "inherit",
-      }}
-    >
-      <Box
-        sx={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "flex-start",
-          gap: 0,
-        }}
-      >
-        {warnings?.map((warning) => (
-          <Box key={_.uniqueId(`-${warning}`)}>
-            <PiWarning
-              color={isDark ? colors.amber[400] : colors.amber[600]}
-              style={{ verticalAlign: "middle", marginRight: 4 }}
-            />
-            {warning}
-          </Box>
-        ))}
-      </Box>
-      <Box sx={{ flex: 1, minHeight: "32px" }} />
-      {children}
-    </Box>
-  );
-};