@datarecce/ui 0.1.30 → 0.1.32

package/recce-source/js/src/lib/hooks/RecceActionContext.tsx

@@ -0,0 +1,269 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { usePathname } from "next/navigation";
+import React, {
+  ComponentType,
+  createContext,
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import { RunModal } from "@/components/run/RunModal";
+import {
+  findByRunType,
+  RegistryEntry,
+  RunFormParamTypes,
+  RunType,
+} from "@/components/run/registry";
+import { RunFormProps } from "@/components/run/types";
+import { toaster } from "@/components/ui/toaster";
+import { useApiConfig } from "@/lib/hooks/ApiConfigContext";
+import { useAppLocation } from "@/lib/hooks/useAppRouter";
+import { cacheKeys } from "../api/cacheKeys";
+import { SubmitRunTrackProps, searchRuns, submitRun } from "../api/runs";
+import { AxiosQueryParams, Run, RunParamTypes } from "../api/types";
+
+export interface RecceActionOptions {
+  showForm: boolean;
+  showLast?: boolean;
+  trackProps?: SubmitRunTrackProps;
+}
+
+export interface RecceActionContextType {
+  runAction: (
+    type: RunType,
+    params?: AxiosQueryParams,
+    actionOptions?: RecceActionOptions,
+  ) => void;
+  runId?: string;
+  showRunId: (runId: string, refreshHistory?: boolean) => void;
+  isRunResultOpen: boolean;
+  closeRunResult: () => void;
+  isHistoryOpen: boolean;
+  closeHistory: () => void;
+  showHistory: () => void;
+  setHistoryOpen: Dispatch<SetStateAction<boolean>>;
+  clearRunResult: () => void;
+}
+
+export const RecceActionContext = createContext<RecceActionContextType>({
+  runAction: () => {
+    return void 0;
+  },
+  showRunId: (runId: string) => {
+    return void 0;
+  },
+  isRunResultOpen: false,
+  closeRunResult: () => {
+    return void 0;
+  },
+  isHistoryOpen: false,
+  closeHistory: () => {
+    return void 0;
+  },
+  showHistory: () => {
+    return void 0;
+  },
+  setHistoryOpen: (v) => {
+    return void 0;
+  },
+  clearRunResult: () => {
+    return void 0;
+  },
+});
+
+interface RecceActionContextProviderProps {
+  children: React.ReactNode;
+}
+
+const useCloseModalEffect = (onClose: () => void) => {
+  const pathname = usePathname();
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: Specifically run in location changes
+  useEffect(() => {
+    onClose();
+  }, [onClose, pathname]);
+};
+
+interface RunActionInternal {
+  session: string;
+  title: string;
+  type: RunType;
+  params?: RunFormParamTypes;
+  lastRun?: Run;
+  options?: RecceActionOptions;
+  RunForm?: ComponentType<RunFormProps<RunFormParamTypes>>;
+}
+
+export function RecceActionContextProvider({
+  children,
+}: RecceActionContextProviderProps) {
+  const { apiClient } = useApiConfig();
+  const [action, setAction] = useState<RunActionInternal>();
+
+  // Modal state
+  const [isModalOpen, setModalOpen] = useState(false);
+  const onModalOpen = useCallback(() => setModalOpen(true), []);
+  const onModalClose = useCallback(() => setModalOpen(false), []);
+
+  // Run result pane state
+  const [isRunResultOpen, setRunResultOpen] = useState(false);
+  const onResultPaneOpen = useCallback(() => setRunResultOpen(true), []);
+  const closeRunResult = useCallback(() => setRunResultOpen(false), []);
+
+  // History state
+  const [isHistoryOpen, setHistoryOpen] = useState(false);
+  const showHistory = useCallback(() => setHistoryOpen(true), []);
+  const closeHistory = useCallback(() => setHistoryOpen(false), []);
+
+  const [runId, setRunId] = useState<string>();
+  const [location, setLocation] = useAppLocation();
+  const queryClient = useQueryClient();
+
+  const showRunId = useCallback(
+    async (runId: string, refreshHistory?: boolean) => {
+      setRunId(runId);
+      onResultPaneOpen();
+
+      if (refreshHistory !== false) {
+        await queryClient.invalidateQueries({ queryKey: cacheKeys.runs() });
+      }
+    },
+    [onResultPaneOpen, queryClient],
+  );
+
+  const clearRunResult = useCallback(() => {
+    setRunId(undefined);
+    closeRunResult();
+  }, [closeRunResult]);
+
+  const runAction = useCallback(
+    async (
+      type: RunType,
+      params?: AxiosQueryParams,
+      options?: RecceActionOptions,
+    ) => {
+      try {
+        const session = new Date().getTime().toString();
+        let lastRun = undefined;
+        if (options?.showLast) {
+          const runs = await searchRuns(type, params, 1, apiClient);
+          if (runs.length === 1) {
+            lastRun = runs[0];
+          }
+        }
+
+        const run = findByRunType(type);
+        const RunResultView = run.RunResultView as
+          | RegistryEntry["RunResultView"]
+          | undefined;
+        const { title, RunForm } = run;
+        if (RunResultView === undefined) {
+          throw new Error(`Run type ${type} does not have a result view`);
+        }
+
+        if (RunForm == undefined || !options?.showForm) {
+          const { run_id } = await submitRun(
+            type,
+            params,
+            {
+              nowait: true,
+              trackProps: options?.trackProps,
+            },
+            apiClient,
+          );
+          await showRunId(run_id);
+          await queryClient.invalidateQueries({ queryKey: cacheKeys.runs() });
+          if (location.startsWith("/lineage")) {
+            setLocation("/lineage");
+          }
+        } else {
+          setAction({
+            session,
+            title,
+            type,
+            params,
+            lastRun,
+            options,
+            RunForm,
+          });
+          onModalOpen();
+        }
+      } catch (e: unknown) {
+        toaster.create({
+          title: "Failed to submit a run",
+          description: e instanceof Error ? e.message : undefined,
+          type: "error",
+          duration: 5000,
+          closable: true,
+        });
+      }
+    },
+    [onModalOpen, showRunId, location, setLocation, queryClient, apiClient],
+  );
+  useCloseModalEffect(onModalClose);
+
+  const handleExecute = async (type: RunType, params: RunParamTypes) => {
+    try {
+      onModalClose();
+      const { run_id } = await submitRun(
+        type,
+        params,
+        {
+          nowait: true,
+          trackProps: action?.options?.trackProps,
+        },
+        apiClient,
+      );
+      await showRunId(run_id);
+    } catch (e: unknown) {
+      toaster.create({
+        title: "Failed to submit a run",
+        description: e instanceof Error ? e.message : undefined,
+        type: "error",
+        duration: 5000,
+        closable: true,
+      });
+    }
+  };
+
+  return (
+    <RecceActionContext.Provider
+      value={{
+        runAction,
+        runId,
+        showRunId,
+        isRunResultOpen,
+        closeRunResult,
+        isHistoryOpen,
+        closeHistory,
+        showHistory,
+        setHistoryOpen,
+        clearRunResult,
+      }}
+    >
+      {action && (
+        <RunModal
+          key={action.session}
+          isOpen={isModalOpen}
+          onClose={onModalClose}
+          onExecute={handleExecute}
+          title={action.title}
+          type={action.type}
+          params={action.params}
+          initialRun={action.lastRun}
+          RunForm={
+            action.options?.showForm && action.RunForm
+              ? action.RunForm
+              : undefined
+          }
+        />
+      )}
+      {children}
+    </RecceActionContext.Provider>
+  );
+}
+
+export const useRecceActionContext = () => useContext(RecceActionContext);

package/recce-source/js/src/lib/hooks/RecceCheckContext.tsx

@@ -0,0 +1,33 @@
+import React, { createContext, useContext } from "react";
+
+export interface CheckContext {
+  latestSelectedCheckId: string;
+  setLatestSelectedCheckId: (selectCheckId: string) => void;
+}
+
+interface CheckContextProps {
+  children: React.ReactNode;
+}
+
+const RecceCheckContext = createContext<CheckContext>({
+  latestSelectedCheckId: "",
+  setLatestSelectedCheckId: () => {
+    return void 0;
+  },
+});
+
+export function RecceCheckContextProvider({ children }: CheckContextProps) {
+  const [selectCheckId, setSelectCheckId] = React.useState<string>("");
+  return (
+    <RecceCheckContext.Provider
+      value={{
+        setLatestSelectedCheckId: setSelectCheckId,
+        latestSelectedCheckId: selectCheckId,
+      }}
+    >
+      {children}
+    </RecceCheckContext.Provider>
+  );
+}
+
+export const useRecceCheckContext = () => useContext(RecceCheckContext);

package/recce-source/js/src/lib/hooks/RecceContextProvider.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { LineageGraphContextProvider } from "./LineageGraphContext";
+import { RecceActionContextProvider } from "./RecceActionContext";
+import { RecceCheckContextProvider } from "./RecceCheckContext";
+import { RecceInstanceInfoProvider } from "./RecceInstanceContext";
+import {
+  RecceQueryContextProvider,
+  RowCountStateContextProvider,
+} from "./RecceQueryContext";
+import { RecceShareStateContextProvider } from "./RecceShareStateContext";
+
+interface RecceContextProps {
+  children: React.ReactNode;
+}
+
+/**
+ * Main context provider for Recce application.
+ *
+ * For custom API configuration (e.g., recce-cloud), wrap this provider
+ * with ApiConfigProvider:
+ *
+ * ```tsx
+ * <ApiConfigProvider
+ *   apiPrefix="/api/v2/sessions/abc123"
+ *   authToken="eyJ..."
+ * >
+ *   <RecceContextProvider>
+ *     {children}
+ *   </RecceContextProvider>
+ * </ApiConfigProvider>
+ * ```
+ *
+ * When used without ApiConfigProvider (OSS mode), hooks will use
+ * the default axios client with standard /api/* endpoints.
+ */
+export default function RecceContextProvider({ children }: RecceContextProps) {
+  return (
+    <RecceInstanceInfoProvider>
+      <RecceShareStateContextProvider>
+        <RecceQueryContextProvider>
+          <LineageGraphContextProvider>
+            <RowCountStateContextProvider>
+              <RecceActionContextProvider>
+                <RecceCheckContextProvider>
+                  {children}
+                </RecceCheckContextProvider>
+              </RecceActionContextProvider>
+            </RowCountStateContextProvider>
+          </LineageGraphContextProvider>
+        </RecceQueryContextProvider>
+      </RecceShareStateContextProvider>
+    </RecceInstanceInfoProvider>
+  );
+}

package/recce-source/js/src/lib/hooks/RecceInstanceContext.tsx

@@ -0,0 +1,129 @@
+import { createContext, useContext, useState } from "react";
+import { useRecceInstanceInfo } from "./useRecceInstanceInfo";
+
+export type RecceFeatureMode = "read only" | "metadata only" | null;
+
+interface RecceFeatureToggles {
+  mode: RecceFeatureMode;
+  disableSaveToFile: boolean;
+  disableExportStateFile: boolean;
+  disableImportStateFile: boolean;
+  disableUpdateChecklist: boolean;
+  disableDatabaseQuery: boolean;
+  disableViewActionDropdown: boolean;
+  disableNodeActionDropdown: boolean;
+  disableShare: boolean;
+}
+
+const defaultFeatureToggles: RecceFeatureToggles = {
+  mode: null,
+  disableSaveToFile: false,
+  disableExportStateFile: false,
+  disableImportStateFile: false,
+  disableUpdateChecklist: false,
+  disableDatabaseQuery: false,
+  disableViewActionDropdown: false,
+  disableNodeActionDropdown: false,
+  disableShare: false,
+};
+
+interface InstanceInfoType {
+  singleEnv: boolean;
+  authed: boolean;
+  featureToggles: RecceFeatureToggles;
+  lifetimeExpiredAt?: Date;
+  shareUrl?: string;
+  sessionId?: string;
+}
+
+const defaultValue: InstanceInfoType = {
+  singleEnv: false,
+  authed: false,
+  lifetimeExpiredAt: undefined,
+  featureToggles: defaultFeatureToggles,
+  shareUrl: undefined,
+  sessionId: undefined,
+};
+
+const InstanceInfo = createContext<InstanceInfoType>(defaultValue);
+
+export function RecceInstanceInfoProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { data: instanceInfo, isLoading } = useRecceInstanceInfo();
+  const [featureToggles, setFeatureToggles] = useState<RecceFeatureToggles>(
+    defaultFeatureToggles,
+  );
+  const [singleEnv, setSingleEnv] = useState<boolean>(false);
+  const [authed, setAuthed] = useState<boolean>(false);
+  const [lifetimeExpiredAt, setLifetimeExpiredAt] = useState<Date>();
+  const [shareUrl, setShareUrl] = useState<string>();
+  const [sessionId, setSessionId] = useState<string>();
+  const [prevInstanceInfo, setPrevInstanceInfo] = useState(instanceInfo);
+
+  // Adjust state during render when instanceInfo changes
+  if (!isLoading && instanceInfo && instanceInfo !== prevInstanceInfo) {
+    setPrevInstanceInfo(instanceInfo);
+
+    setSingleEnv(instanceInfo.single_env);
+    setAuthed(instanceInfo.authed);
+    setShareUrl(instanceInfo.share_url);
+    setSessionId(instanceInfo.session_id);
+
+    if (instanceInfo.lifetime_expired_at) {
+      setLifetimeExpiredAt(new Date(instanceInfo.lifetime_expired_at));
+      console.log("lifetime expired at", instanceInfo.lifetime_expired_at);
+    }
+
+    // Set feature toggles based on instanceInfo
+    const toggles = { ...defaultFeatureToggles };
+    if (instanceInfo.server_mode === "read-only") {
+      toggles.mode = "read only";
+      toggles.disableSaveToFile = true;
+      toggles.disableExportStateFile = true;
+      toggles.disableImportStateFile = true;
+      toggles.disableUpdateChecklist = true;
+      toggles.disableDatabaseQuery = true;
+      toggles.disableViewActionDropdown = true;
+      toggles.disableNodeActionDropdown = true;
+      toggles.disableShare = true;
+    } else if (instanceInfo.server_mode === "preview") {
+      toggles.mode = "metadata only";
+      toggles.disableSaveToFile = true;
+      toggles.disableExportStateFile = true;
+      toggles.disableImportStateFile = true;
+      toggles.disableUpdateChecklist = false;
+      toggles.disableDatabaseQuery = true;
+      toggles.disableViewActionDropdown = false;
+      toggles.disableNodeActionDropdown = false;
+      toggles.disableShare = true;
+    }
+    if (instanceInfo.single_env) {
+      toggles.disableUpdateChecklist = true;
+      toggles.disableShare = true;
+    }
+    if (instanceInfo.cloud_instance) {
+      toggles.disableShare = true;
+    }
+    setFeatureToggles(toggles);
+  }
+
+  return (
+    <InstanceInfo.Provider
+      value={{
+        featureToggles,
+        singleEnv,
+        authed,
+        lifetimeExpiredAt,
+        shareUrl,
+        sessionId,
+      }}
+    >
+      {children}
+    </InstanceInfo.Provider>
+  );
+}
+
+export const useRecceInstanceContext = () => useContext(InstanceInfo);

package/recce-source/js/src/lib/hooks/RecceQueryContext.tsx

@@ -0,0 +1,98 @@
+import React, { createContext, useContext } from "react";
+
+export interface QueryContext {
+  sqlQuery: string;
+  setSqlQuery: (sqlQuery: string) => void;
+  primaryKeys: string[] | undefined;
+  setPrimaryKeys: (primaryKeys: string[] | undefined) => void;
+  isCustomQueries: boolean;
+  setCustomQueries: (isCustomQueries: boolean) => void;
+  baseSqlQuery?: string;
+  setBaseSqlQuery?: (baseSqlQuery: string) => void;
+}
+
+export const defaultSqlQuery = 'select * from {{ ref("mymodel") }}';
+
+const defaultQueryContext: QueryContext = {
+  sqlQuery: defaultSqlQuery,
+  setSqlQuery: () => {
+    return void 0;
+  },
+  primaryKeys: undefined,
+  setPrimaryKeys: () => {
+    return void 0;
+  },
+  isCustomQueries: false,
+  setCustomQueries: () => {
+    return void 0;
+  },
+  baseSqlQuery: defaultSqlQuery,
+  setBaseSqlQuery: () => {
+    return void 0;
+  },
+};
+
+const RecceQueryContext = createContext(defaultQueryContext);
+
+interface QueryContextProps {
+  children: React.ReactNode;
+}
+
+export function RecceQueryContextProvider({ children }: QueryContextProps) {
+  const [sqlQuery, setSqlQuery] = React.useState<string>(defaultSqlQuery);
+  const [baseSqlQuery, setBaseSqlQuery] =
+    React.useState<string>(defaultSqlQuery);
+  const [isCustomQueries, setCustomQueries] = React.useState<boolean>(false);
+  const [primaryKeys, setPrimaryKeys] = React.useState<string[] | undefined>();
+  return (
+    <RecceQueryContext.Provider
+      value={{
+        setSqlQuery,
+        sqlQuery,
+        setPrimaryKeys,
+        primaryKeys,
+        isCustomQueries,
+        setCustomQueries,
+        baseSqlQuery,
+        setBaseSqlQuery,
+      }}
+    >
+      {children}
+    </RecceQueryContext.Provider>
+  );
+}
+
+export const useRecceQueryContext = () => useContext(RecceQueryContext);
+
+export interface RowCountStateContext {
+  isNodesFetching: string[];
+  setIsNodesFetching: (nodes: string[]) => void;
+}
+
+const defaultRowCountStateContext: RowCountStateContext = {
+  isNodesFetching: [],
+  setIsNodesFetching: () => {
+    return void 0;
+  },
+};
+
+const RowCountStateContext = createContext(defaultRowCountStateContext);
+
+interface RowCountStateContextProps {
+  children: React.ReactNode;
+}
+
+export function RowCountStateContextProvider({
+  children,
+}: RowCountStateContextProps) {
+  const [isNodesFetching, setIsNodesFetching] = React.useState<string[]>([]);
+  return (
+    <RowCountStateContext.Provider
+      value={{ isNodesFetching, setIsNodesFetching }}
+    >
+      {children}
+    </RowCountStateContext.Provider>
+  );
+}
+
+export const useRowCountStateContext = () => useContext(RowCountStateContext);

package/recce-source/js/src/lib/hooks/RecceShareStateContext.tsx

@@ -0,0 +1,59 @@
+import React, { createContext, useContext, useState } from "react";
+import { shareState } from "@/lib/api/state";
+import { useApiConfig } from "./ApiConfigContext";
+
+interface ShareStateProps {
+  shareUrl?: string;
+  isLoading: boolean;
+  error?: string;
+  handleShareClick: () => Promise<void>;
+}
+
+const ShareState = createContext<ShareStateProps | undefined>(undefined);
+
+export function RecceShareStateContextProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [shareUrl, setShareUrl] = useState<string>();
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string>();
+  const { apiClient } = useApiConfig();
+
+  const handleShareClick = async () => {
+    setIsLoading(true);
+    setError(undefined);
+    setShareUrl(undefined);
+    try {
+      const response = await shareState(apiClient);
+      if (response.status !== "success") {
+        setError(response.message);
+        return;
+      }
+      setShareUrl(response.share_url);
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <ShareState.Provider
+      value={{ shareUrl, isLoading, error, handleShareClick }}
+    >
+      {children}
+    </ShareState.Provider>
+  );
+}
+
+export const useRecceShareStateContext = () => {
+  const context = useContext(ShareState);
+  if (!context) {
+    throw new Error(
+      "useRecceShareStateContext must be used within a RecceShareStateContextProvider",
+    );
+  }
+  return context;
+};