Add Stepper component with ImportPanel and ExportPanel

Implement the import panel and stub out the export panel,
using a single Stepper component and a react context with
a reducer for managing the state. Implement the fetch requests
to start the import, and also to await the import.

Co-Authored by GPT-4 ;)

Author: milesrichardson

examples/nextjs-import-airbyte-github-export-seafowl/components/BaseLayout.module.css

@@ -34,4 +34,5 @@
   /* add additional styles for your content area */
   color: var(--text);
   background-color: var(--background);
+  padding: 24px;
 }

examples/nextjs-import-airbyte-github-export-seafowl/components/ImportExportStepper/ExportPanel.module.css

@@ -0,0 +1,6 @@
+/* ExportPanel.module.css */
+
+.exportPanel {
+  /* Style for export panel will go here */
+  background: inherit;
+}

examples/nextjs-import-airbyte-github-export-seafowl/components/ImportExportStepper/ExportPanel.tsx

@@ -0,0 +1,19 @@
+import styles from "./ExportPanel.module.css";
+import { useStepper } from "./StepperContext";
+
+export const ExportPanel = () => {
+  const [{ stepperState }] = useStepper();
+
+  const disabled =
+    stepperState !== "import_complete" &&
+    stepperState !== "awaiting_export" &&
+    stepperState !== "export_complete";
+
+  // We will fill this in later
+
+  return (
+    <div className={styles.exportPanel}>
+      {disabled ? "Export disabled" : "Export..."}
+    </div>
+  );
+};

examples/nextjs-import-airbyte-github-export-seafowl/components/ImportExportStepper/ImportLoadingBar.tsx

@@ -0,0 +1,74 @@
+import { useEffect } from "react";
+import { useStepper } from "./StepperContext";
+
+type ImportLoadingBarProps = {
+  taskId: string;
+  splitgraphNamespace: string;
+  splitgraphRepository: string;
+};
+
+export const ImportLoadingBar: React.FC<ImportLoadingBarProps> = ({
+  taskId,
+  splitgraphNamespace,
+  splitgraphRepository,
+}) => {
+  const [{ stepperState }, dispatch] = useStepper();
+
+  useEffect(() => {
+    if (!taskId || !splitgraphNamespace || !splitgraphRepository) {
+      console.log("Don't check import until we have all the right variables");
+      console.table({
+        taskId: taskId ?? "no task id",
+        splitgraphNamespace: splitgraphNamespace ?? "no namespace",
+        splitgraphRepository: splitgraphRepository ?? "no repo",
+      });
+      return;
+    }
+
+    if (stepperState !== "awaiting_import") {
+      console.log("Done waiting");
+      return;
+    }
+
+    const checkImportStatus = async () => {
+      try {
+        const response = await fetch("/api/await-import-from-github", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            taskId,
+            splitgraphNamespace,
+            splitgraphRepository,
+          }),
+        });
+        const data = await response.json();
+
+        if (data.completed) {
+          dispatch({ type: "import_complete" });
+        } else if (data.error) {
+          dispatch({ type: "import_error", error: data.error });
+        }
+      } catch (error) {
+        console.error("Error occurred during import task status check:", error);
+        dispatch({
+          type: "import_error",
+          error: "An error occurred during the import process",
+        });
+      }
+    };
+
+    const interval = setInterval(checkImportStatus, 3000);
+
+    return () => clearInterval(interval);
+  }, [
+    stepperState,
+    taskId,
+    splitgraphNamespace,
+    splitgraphRepository,
+    dispatch,
+  ]);
+
+  return <div>Loading...</div>;
+};

examples/nextjs-import-airbyte-github-export-seafowl/components/ImportExportStepper/ImportPanel.module.css

@@ -0,0 +1,10 @@
+.importPanel {
+  background: inherit;
+}
+
+.error {
+  background-color: var(--danger);
+  padding: 8px;
+  border: 1px solid var(--sidebar);
+  margin-bottom: 8px;
+}

examples/nextjs-import-airbyte-github-export-seafowl/components/ImportExportStepper/ImportPanel.tsx

@@ -0,0 +1,105 @@
+import { useState } from "react";
+import { useStepper } from "./StepperContext";
+import { ImportLoadingBar } from "./ImportLoadingBar";
+
+import styles from "./ImportPanel.module.css";
+
+export const ImportPanel = () => {
+  const [
+    { stepperState, taskId, error, splitgraphNamespace, splitgraphRepository },
+    dispatch,
+  ] = useStepper();
+  const [inputValue, setInputValue] = useState("");
+
+  const handleInputSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!isValidRepoName(inputValue)) {
+      dispatch({
+        type: "import_error",
+        error:
+          "Invalid GitHub repository name. Format must be 'namespace/repository'",
+      });
+      return;
+    }
+
+    const [githubNamespace, githubRepository] = inputValue.split("/");
+
+    try {
+      const response = await fetch(`/api/start-import-from-github`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ githubSourceRepository: inputValue }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Network response was not ok");
+      }
+
+      const data = await response.json();
+
+      if (!data.taskId) {
+        throw new Error("Response missing taskId");
+      }
+
+      if (!data.destination || !data.destination.splitgraphNamespace) {
+        throw new Error("Response missing destination.splitgraphNamespace");
+      }
+
+      if (!data.destination || !data.destination.splitgraphRepository) {
+        throw new Error("Response missing destination.splitgraphRepository");
+      }
+
+      dispatch({
+        type: "start_import",
+        repository: {
+          namespace: githubNamespace,
+          repository: githubRepository,
+        },
+        taskId: data.taskId,
+        splitgraphRepository: data.destination.splitgraphRepository as string,
+        splitgraphNamespace: data.destination.splitgraphNamespace as string,
+      });
+    } catch (error) {
+      dispatch({ type: "import_error", error: error.message });
+    }
+  };
+
+  const isValidRepoName = (repoName: string) => {
+    // A valid GitHub repo name should contain exactly one '/'
+    return /^[\w-.]+\/[\w-.]+$/.test(repoName);
+  };
+
+  return (
+    <div className={styles.importPanel}>
+      {stepperState === "unstarted" && (
+        <>
+          {error && <p className={styles.error}>{error}</p>}
+          <form onSubmit={handleInputSubmit}>
+            <input
+              type="text"
+              placeholder="Enter repository name"
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+            />
+            <button type="submit">Start Import</button>
+          </form>
+        </>
+      )}
+      {stepperState === "awaiting_import" && (
+        <ImportLoadingBar
+          taskId={taskId}
+          splitgraphNamespace={splitgraphNamespace}
+          splitgraphRepository={splitgraphRepository}
+        />
+      )}
+      {stepperState === "import_complete" && (
+        <div>
+          <p>Import Complete</p>
+        </div>
+      )}
+    </div>
+  );
+};

examples/nextjs-import-airbyte-github-export-seafowl/components/ImportExportStepper/Stepper.module.css

@@ -0,0 +1,4 @@
+.stepper {
+  /* Add styling as necessary */
+  background: inherit;
+}

examples/nextjs-import-airbyte-github-export-seafowl/components/ImportExportStepper/Stepper.tsx

@@ -0,0 +1,16 @@
+import { StepperContextProvider } from "./StepperContext";
+import { ImportPanel } from "./ImportPanel"; // will create this component later
+import { ExportPanel } from "./ExportPanel"; // will create this component later
+
+import styles from "./Stepper.module.css";
+
+export const Stepper = () => {
+  return (
+    <StepperContextProvider>
+      <div className={styles.stepper}>
+        <ImportPanel />
+        <ExportPanel />
+      </div>
+    </StepperContextProvider>
+  );
+};

examples/nextjs-import-airbyte-github-export-seafowl/components/ImportExportStepper/StepperContext.tsx

@@ -0,0 +1,34 @@
+// StepperContext.tsx
+import React, { useReducer, useContext, ReactNode } from "react";
+import {
+  StepperState,
+  StepperAction,
+  initialState,
+  stepperReducer,
+} from "./stepper-states";
+
+// Define the context
+const StepperContext = React.createContext<
+  [StepperState, React.Dispatch<StepperAction>] | undefined
+>(undefined);
+
+export const StepperContextProvider: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const [state, dispatch] = useReducer(stepperReducer, initialState);
+
+  return (
+    <StepperContext.Provider value={[state, dispatch]}>
+      {children}
+    </StepperContext.Provider>
+  );
+};
+
+// Custom hook for using the stepper context
+export const useStepper = () => {
+  const context = useContext(StepperContext);
+  if (!context) {
+    throw new Error("useStepper must be used within a StepperContextProvider");
+  }
+  return context;
+};

examples/nextjs-import-airbyte-github-export-seafowl/components/ImportExportStepper/stepper-states.ts

@@ -0,0 +1,93 @@
+// stepper-states.ts
+export type GitHubRepository = { namespace: string; repository: string };
+
+// Define the state
+export type StepperState = {
+  stepperState:
+    | "unstarted"
+    | "awaiting_import"
+    | "import_complete"
+    | "awaiting_export"
+    | "export_complete";
+  repository?: GitHubRepository | null;
+  taskId?: string | null;
+  error?: string;
+  tables?: { taskId: string }[] | null;
+  splitgraphRepository?: string;
+  splitgraphNamespace?: string;
+};
+
+// Define the actions
+export type StepperAction =
+  | {
+      type: "start_import";
+      repository: GitHubRepository;
+      taskId: string;
+      splitgraphRepository: string;
+      splitgraphNamespace: string;
+    }
+  | { type: "import_complete" }
+  | { type: "start_export"; tables: { taskId: string }[] }
+  | { type: "export_complete" }
+  | { type: "import_error"; error: string }
+  | { type: "reset" };
+
+// Initial state
+export const initialState: StepperState = {
+  stepperState: "unstarted",
+  repository: null,
+  splitgraphRepository: null,
+  splitgraphNamespace: null,
+  taskId: null,
+  tables: null,
+};
+
+// Reducer function
+export const stepperReducer = (
+  state: StepperState,
+  action: StepperAction
+): StepperState => {
+  console.log("Got action", action, "prev state:", state);
+  switch (action.type) {
+    case "start_import":
+      return {
+        ...state,
+        stepperState: "awaiting_import",
+        repository: action.repository,
+        taskId: action.taskId,
+        splitgraphNamespace: action.splitgraphNamespace,
+        splitgraphRepository: action.splitgraphRepository,
+      };
+    case "import_complete":
+      return {
+        ...state,
+        stepperState: "import_complete",
+      };
+    case "start_export":
+      return {
+        ...state,
+        stepperState: "awaiting_export",
+        tables: action.tables,
+      };
+    case "export_complete":
+      return {
+        ...state,
+        stepperState: "export_complete",
+      };
+    case "import_error":
+      return {
+        ...state,
+        splitgraphRepository: null,
+        splitgraphNamespace: null,
+        taskId: null,
+        stepperState: "unstarted",
+        error: action.error,
+      };
+
+    case "reset":
+      return initialState;
+
+    default:
+      return state;
+  }
+};