Implement the components for the "Export Panel"

The ExportPanel first renders a "Start Export" button. Then, while
the export is running, it renders an `ExportTableLoadingBar` for
each table that is being exported. Each of thee individual
components sends its own polling request with its `taskId`
to the `await-export-to-seafowl-task` endpoint, and upon
completion of each task, sends an action to the reducer, which
handles it by updating the set of loading tasks. When the set of
loading tasks is complete, it changes the `stepperState` to
`export_complete`. If any of the tasks has an error, then the
`stepperState` changes to `export_error` which should cause all
loading bars to unmount - i.e., any error will short-circuit all
of the table loading, even if some were to complete. At that point
the user can click "start export" again.

This completes the logic necessary for import and export, and now
it's just a matter of styling the components, linking to the
Splitgraph Console, adding explanatory text, and finally rendering
a chart with the data. We'll also want to create a meta-repository
in Splitgraph for tracking which GitHub repos we've imported so far,
analogously to how we track Socrata metadata for each Socrata repo.

Author: milesrichardson

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

@@ -0,0 +1,3 @@
+.exportLoadingBars {
+  background-color: inherit;
+}

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

@@ -0,0 +1,19 @@
+import { useStepper } from "./StepperContext";
+import { ExportTableLoadingBar } from "./ExportTableLoadingBar";
+import styles from "./ExportLoadingBars.module.css";
+
+export const ExportLoadingBars = () => {
+  const [{ exportedTablesLoading }] = useStepper();
+
+  return (
+    <div className={styles.exportLoadingBars}>
+      {Array.from(exportedTablesLoading).map(({ tableName, taskId }) => (
+        <ExportTableLoadingBar
+          key={taskId}
+          tableName={tableName}
+          taskId={taskId}
+        />
+      ))}
+    </div>
+  );
+};

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

@@ -1,6 +1,19 @@
-/* ExportPanel.module.css */
-
 .exportPanel {
-  /* Style for export panel will go here */
+  /* Styles for the export panel container */
+  background: inherit;
+}
+
+.startExportButton {
+  /* Styles for the start export button */
+  background: inherit;
+}
+
+.querySeafowlButton {
+  /* Styles for the query Seafowl button */
+  background: inherit;
+}
+
+.viewReportButton {
+  /* Styles for the view report button */
   background: inherit;
 }

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

@@ -1,19 +1,77 @@
-import styles from "./ExportPanel.module.css";
+// components/ImportExportStepper/ExportPanel.tsx
+
 import { useStepper } from "./StepperContext";
+import styles from "./ExportPanel.module.css";
+import { ExportLoadingBars } from "./ExportLoadingBars";
+
+// TODO: don't hardcode this? or at least hardcode all of them and make it official
+const importedTableNames = [
+  "stargazers",
+  // NOTE: If we only specify stargazers, then stargazers_user is still included since it's a dependent table
+  "stargazers_user",
+];
 
 export const ExportPanel = () => {
-  const [{ stepperState }] = useStepper();
+  const [
+    { stepperState, exportError, splitgraphRepository, splitgraphNamespace },
+    dispatch,
+  ] = useStepper();
+
+  const handleStartExport = async () => {
+    try {
+      const response = await fetch("/api/start-export-to-seafowl", {
+        method: "POST",
+        body: JSON.stringify({
+          tables: importedTableNames.map((tableName) => ({
+            namespace: splitgraphNamespace,
+            repository: splitgraphRepository,
+            table: tableName,
+          })),
+        }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+      const data = await response.json();
 
-  const disabled =
-    stepperState !== "import_complete" &&
-    stepperState !== "awaiting_export" &&
-    stepperState !== "export_complete";
+      if (!data.tables || !data.tables.length) {
+        throw new Error("Response missing tables");
+      }
 
-  // We will fill this in later
+      dispatch({
+        type: "start_export",
+        tables: data.tables.map(
+          ({ tableName, taskId }: { tableName: string; taskId: string }) => ({
+            taskId,
+            tableName,
+          })
+        ),
+      });
+    } catch (error) {
+      dispatch({ type: "export_error", error: error.message });
+    }
+  };
 
   return (
     <div className={styles.exportPanel}>
-      {disabled ? "Export disabled" : "Export..."}
+      {exportError && <p className={styles.error}>{exportError}</p>}
+      {stepperState === "import_complete" && (
+        <button
+          className={styles.startExportButton}
+          onClick={handleStartExport}
+        >
+          Start Export
+        </button>
+      )}
+      {stepperState === "awaiting_export" && <ExportLoadingBars />}
+      {stepperState === "export_complete" && (
+        <>
+          <button className={styles.querySeafowlButton}>
+            Query Seafowl in Splitgraph Console
+          </button>
+          <button className={styles.viewReportButton}>View Report</button>
+        </>
+      )}
     </div>
   );
 };

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

@@ -0,0 +1,17 @@
+/* components/ImportExportStepper/ExportTableLoadingBar.module.css */
+
+.exportTableLoadingBar {
+  background-color: inherit;
+}
+
+.loadingBar {
+  background-color: inherit;
+}
+
+.completedBar {
+  background-color: inherit;
+}
+
+.tableName {
+  background-color: inherit;
+}

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

@@ -0,0 +1,78 @@
+import { useEffect } from "react";
+import { useStepper } from "./StepperContext";
+import styles from "./ExportTableLoadingBar.module.css";
+
+interface ExportTableLoadingBarProps {
+  tableName: string;
+  taskId: string;
+}
+
+export const ExportTableLoadingBar = ({
+  tableName,
+  taskId,
+}: React.PropsWithoutRef<ExportTableLoadingBarProps>) => {
+  const [{ stepperState, exportedTablesLoading }, dispatch] = useStepper();
+
+  useEffect(() => {
+    if (!taskId || !tableName) {
+      console.log("Don't check export until we have taskId and tableName");
+      console.table({
+        taskId,
+        tableName,
+      });
+      return;
+    }
+
+    if (stepperState !== "awaiting_export") {
+      console.log("Done waiting for export");
+      return;
+    }
+
+    const pollExportTask = async () => {
+      try {
+        const response = await fetch("/api/await-export-to-seafowl-task", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            taskId,
+          }),
+        });
+        const data = await response.json();
+
+        if (data.completed) {
+          dispatch({
+            type: "export_table_task_complete",
+            completedTable: { tableName, taskId },
+          });
+        } else if (data.error) {
+          throw new Error(data.error);
+        }
+      } catch (error) {
+        dispatch({
+          type: "export_error",
+          error: `Error exporting ${tableName}: ${error.message}`,
+        });
+      }
+    };
+
+    const interval = setInterval(pollExportTask, 3000);
+    return () => clearInterval(interval);
+  }, [stepperState, tableName, taskId, dispatch]);
+
+  const isLoading = !!Array.from(exportedTablesLoading).find(
+    (t) => t.taskId === taskId
+  );
+
+  return (
+    <div className={styles.exportTableLoadingBar}>
+      <div className={styles.loadingBar}>
+        {isLoading
+          ? `Loading ${tableName}...`
+          : `Successfully exported ${tableName}`}
+      </div>
+      <div className={styles.tableName}>{tableName}</div>
+    </div>
+  );
+};

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

@@ -51,7 +51,6 @@ export const ImportLoadingBar: React.FC<ImportLoadingBarProps> = ({
           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",

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

@@ -6,7 +6,13 @@ import styles from "./ImportPanel.module.css";
 
 export const ImportPanel = () => {
   const [
-    { stepperState, taskId, error, splitgraphNamespace, splitgraphRepository },
+    {
+      stepperState,
+      importTaskId,
+      importError,
+      splitgraphNamespace,
+      splitgraphRepository,
+    },
     dispatch,
   ] = useStepper();
   const [inputValue, setInputValue] = useState("");
@@ -76,7 +82,7 @@ export const ImportPanel = () => {
     <div className={styles.importPanel}>
       {stepperState === "unstarted" && (
         <>
-          {error && <p className={styles.error}>{error}</p>}
+          {importError && <p className={styles.error}>{importError}</p>}
           <form onSubmit={handleInputSubmit}>
             <input
               type="text"
@@ -90,7 +96,7 @@ export const ImportPanel = () => {
       )}
       {stepperState === "awaiting_import" && (
         <ImportLoadingBar
-          taskId={taskId}
+          taskId={importTaskId}
           splitgraphNamespace={splitgraphNamespace}
           splitgraphRepository={splitgraphRepository}
         />