Implement sidebar and stub out page for imported repository to show the charts

The sidebar queries the DDN from the client-side with `useSql` from `@madatdata/react`,
using the default anonymous (thus read-only) credential to query the "metadata table"
that includes the list of repositories that have had a succesful import, and it links
to a page for each one, which is currently a stub but where we will show the chart(s)
with Observable Plot.

Author: milesrichardson

examples/nextjs-import-airbyte-github-export-seafowl/.env

@@ -0,0 +1,7 @@
+# This file contains public environment variables and is therefore checked into the repo
+# For secret environment variables, see `.env.local` which is _not_ checked into the repo
+# Read env-vars.d.ts for expected variable names
+# See more: https://nextjs.org/docs/app/building-your-application/configuring/environment-variables
+
+NEXT_PUBLIC_SPLITGRAPH_GITHUB_ANALYTICS_META_REPOSITORY=github-analytics-metadata
+NEXT_PUBLIC_SPLITGRAPH_GITHUB_ANALYTICS_META_COMPLETED_TABLE=completed_repositories

examples/nextjs-import-airbyte-github-export-seafowl/.env.test.local

@@ -8,7 +8,7 @@ SPLITGRAPH_API_KEY="********************************"
 SPLITGRAPH_API_SECRET="********************************"
 
 # This should match the username associated with the API key
-SPLITGRAPH_GITHUB_ANALYTICS_META_NAMESPACE="*****"
+NEXT_PUBLIC_SPLITGRAPH_GITHUB_ANALYTICS_META_NAMESPACE="*****"
 
 # Create a GitHub token that can query the repositories you want to connect
 # For example, a token with read-only access to public repos is sufficient

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

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

examples/nextjs-import-airbyte-github-export-seafowl/components/RepositoryAnalytics/Charts.tsx

@@ -0,0 +1,31 @@
+import style from "./Charts.module.css";
+
+import type { ImportedRepository } from "../../types";
+
+export interface ChartsProps {
+  importedRepository: ImportedRepository;
+}
+
+export const Charts = ({
+  importedRepository: {
+    githubNamespace,
+    githubRepository,
+    splitgraphNamespace,
+    splitgraphRepository,
+  },
+}: ChartsProps) => {
+  return (
+    <div className={style.charts}>
+      Chart for{" "}
+      <a href={`https://github.com/${githubNamespace}/${githubRepository}`}>
+        github.com/{githubNamespace}/{githubRepository}
+      </a>
+      , based on{" "}
+      <a
+        href={`https://www.splitgraph.com/${splitgraphNamespace}/${splitgraphRepository}`}
+      >
+        splitgraph.com/{splitgraphNamespace}/{splitgraphRepository}
+      </a>
+    </div>
+  );
+};

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

@@ -1,29 +1,78 @@
-import React from "react";
+import React, { useMemo } from "react";
 import Link from "next/link";
 import styles from "./Sidebar.module.css";
+import { useSql } from "@madatdata/react";
 
-export interface GitHubRepository {
-  namespace: string;
-  repository: string;
-}
+import type { ImportedRepository } from "../types";
 
-interface SidebarProps {
-  repositories: GitHubRepository[];
-}
+const META_REPOSITORY =
+  process.env.NEXT_PUBLIC_SPLITGRAPH_GITHUB_ANALYTICS_META_REPOSITORY;
+const META_NAMESPACE =
+  process.env.NEXT_PUBLIC_SPLITGRAPH_GITHUB_ANALYTICS_META_NAMESPACE;
+const META_TABLE =
+  process.env.NEXT_PUBLIC_SPLITGRAPH_GITHUB_ANALYTICS_META_COMPLETED_TABLE;
+
+const useImportedRepositories = (): ImportedRepository[] => {
+  const { response, error } = useSql<{
+    githubNamespace: string;
+    githubRepository: string;
+    splitgraphNamespace: string;
+    splitgraphRepository: string;
+  }>(
+    `
+    WITH ordered_repos AS (
+      SELECT
+          github_namespace,
+          github_repository,
+          splitgraph_namespace,
+          splitgraph_repository,
+          completed_at
+      FROM "${META_NAMESPACE}/${META_REPOSITORY}"."${META_TABLE}"
+      ORDER BY completed_at DESC
+    )
+    SELECT DISTINCT
+        github_namespace AS "githubNamespace",
+        github_repository AS "githubRepository",
+        splitgraph_namespace AS "splitgraphNamespace",
+        splitgraph_repository AS "splitgraphRepository"
+    FROM ordered_repos;
+    `
+  );
+
+  const repositories = useMemo(() => {
+    if (error) {
+      console.warn("Error fetching repositories:", error);
+      return [];
+    }
+
+    if (!response) {
+      console.warn("No response received");
+      return [];
+    }
+
+    return response.rows ?? [];
+  }, [error, response]);
+
+  return repositories;
+};
+
+export const Sidebar = () => {
+  const repositories = useImportedRepositories();
 
-export const Sidebar = ({ repositories }: React.PropsWithRef<SidebarProps>) => {
   return (
     <aside className={styles.sidebar}>
       <div className={styles.importButtonContainer}>
-        <Link href="/start-import" className={styles.importButton}>
+        <Link href="/" className={styles.importButton}>
           Import Your Repository
         </Link>
       </div>
       <ul className={styles.repoList}>
         {repositories.map((repo, index) => (
           <li key={index}>
-            <Link href={`/${repo.namespace}/${repo.repository}`}>
-              {repo.namespace}/{repo.repository}
+            <Link
+              href={`/${repo.githubNamespace}/${repo.githubRepository}?splitgraphNamespace=${repo.splitgraphNamespace}&splitgraphRepository=${repo.splitgraphRepository}`}
+            >
+              {repo.githubNamespace}/{repo.githubRepository}
             </Link>
           </li>
         ))}

examples/nextjs-import-airbyte-github-export-seafowl/env-vars.d.ts

@@ -41,7 +41,7 @@ namespace NodeJS {
     /**
      * The namespace of the repository in Splitgraph where metadata is stored
      * containing the state of imported GitHub repositories, which should contain
-     * the repository `SPLITGRAPH_GITHUB_ANALYTICS_META_REPOSITORY`.
+     * the repository `NEXT_PUBLIC_SPLITGRAPH_GITHUB_ANALYTICS_META_REPOSITORY`.
      *
      * This should be defined in `.env.local`, since it's not checked into Git
      * and can vary between users. It should match the username associated with
@@ -52,15 +52,15 @@ namespace NodeJS {
      * ```
      * miles/splitgraph-github-analytics.completed_repositories
      * ^^^^^
-     * SPLITGRAPH_GITHUB_ANALYTICS_META_NAMESPACE=miles
+     * NEXT_PUBLIC_SPLITGRAPH_GITHUB_ANALYTICS_META_NAMESPACE=miles
      * ```
      */
-    SPLITGRAPH_GITHUB_ANALYTICS_META_NAMESPACE: string;
+    NEXT_PUBLIC_SPLITGRAPH_GITHUB_ANALYTICS_META_NAMESPACE: string;
 
     /**
      * The repository (no namespace) in Splitgraph where metadata is stored
      * containing the state of imported GitHub repositories, which should be a
-     * repository contained inside `SPLITGRAPH_GITHUB_ANALYTICS_META_NAMESPACE`.
+     * repository contained inside `NEXT_PUBLIC_SPLITGRAPH_GITHUB_ANALYTICS_META_NAMESPACE`.
      *
      * This is defined by default in `.env` which is checked into Git.
      *
@@ -69,10 +69,10 @@ namespace NodeJS {
      * ```
      * miles/splitgraph-github-analytics.completed_repositories
      *       ^^^^^^^^^^^^^^^^^^^^^^^^^^^
-     *       SPLITGRAPH_GITHUB_ANALYTICS_META_REPOSITORY=splitgraph-github-analytics
+     *       NEXT_PUBLIC_SPLITGRAPH_GITHUB_ANALYTICS_META_REPOSITORY=splitgraph-github-analytics
      * ```
      */
-    SPLITGRAPH_GITHUB_ANALYTICS_META_REPOSITORY: string;
+    NEXT_PUBLIC_SPLITGRAPH_GITHUB_ANALYTICS_META_REPOSITORY: string;
 
     /**
      * The name of the table containing completed repositories, which are inserted
@@ -86,9 +86,9 @@ namespace NodeJS {
      * ```
      * miles/splitgraph-github-analytics.completed_repositories
      *                                   ^^^^^^^^^^^^^^^^^^^^^^
-     *       SPLITGRAPH_GITHUB_ANALYTICS_META_COMPLETED_TABLE=completed_repositories
+     *       NEXT_PUBLIC_SPLITGRAPH_GITHUB_ANALYTICS_META_COMPLETED_TABLE=completed_repositories
      * ```
      */
-    SPLITGRAPH_GITHUB_ANALYTICS_META_COMPLETED_TABLE: string;
+    NEXT_PUBLIC_SPLITGRAPH_GITHUB_ANALYTICS_META_COMPLETED_TABLE: string;
   }
 }

examples/nextjs-import-airbyte-github-export-seafowl/pages/[github_namespace]/[github_repository].tsx

@@ -0,0 +1,39 @@
+import { BaseLayout } from "../../components/BaseLayout";
+
+import { Sidebar } from "../../components/Sidebar";
+import { Charts } from "../../components/RepositoryAnalytics/Charts";
+import { useRouter } from "next/router";
+
+import type { ImportedRepository } from "../../types";
+
+const useImportedRepoFromURL = () => {
+  const { query } = useRouter();
+
+  return (
+    [
+      ["github_namespace", "githubNamespace"],
+      ["github_repository", "githubRepository"],
+      ["splitgraphNamespace", "splitgraphNamespace"],
+      ["splitgraphRepository", "splitgraphRepository"],
+    ] as [string, keyof ImportedRepository][]
+  ).reduce((acc, [queryParam, repoKey]) => {
+    if (!query[queryParam] || Array.isArray(query[queryParam])) {
+      throw new Error(`Invalid query params: unexpected type of ${queryParam}`);
+    }
+
+    return {
+      ...acc,
+      [repoKey]: query[queryParam] as string,
+    };
+  }, {} as ImportedRepository);
+};
+
+const RepositoryAnalyticsPage = () => {
+  return (
+    <BaseLayout sidebar={<Sidebar />}>
+      <Charts importedRepository={useImportedRepoFromURL()} />
+    </BaseLayout>
+  );
+};
+
+export default RepositoryAnalyticsPage;

examples/nextjs-import-airbyte-github-export-seafowl/pages/_app.tsx

@@ -1,7 +1,19 @@
 import type { AppProps } from "next/app";
+import { SqlProvider, makeSplitgraphHTTPContext } from "@madatdata/react";
+import { useMemo } from "react";
+
 import "../components/global-styles/reset.css";
 import "../components/global-styles/theme.css";
 
 export default function GitHubAnalyticsApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  const splitgraphDataContext = useMemo(
+    () => makeSplitgraphHTTPContext({ credential: null }),
+    []
+  );
+
+  return (
+    <SqlProvider dataContext={splitgraphDataContext}>
+      <Component {...pageProps} />
+    </SqlProvider>
+  );
 }

examples/nextjs-import-airbyte-github-export-seafowl/pages/api/mark-import-export-complete.ts

@@ -18,9 +18,12 @@ export type MarkImportExportCompleteResponseData =
   | MarkImportExportCompleteSuccessResponse
   | { error: string };
 
-const META_NAMESPACE = process.env.SPLITGRAPH_GITHUB_ANALYTICS_META_NAMESPACE;
-const META_REPOSITORY = process.env.SPLITGRAPH_GITHUB_ANALYTICS_META_REPOSITORY;
-const META_TABLE = process.env.SPLITGRAPH_GITHUB_ANALYTICS_META_COMPLETED_TABLE;
+const META_NAMESPACE =
+  process.env.NEXT_PUBLIC_SPLITGRAPH_GITHUB_ANALYTICS_META_NAMESPACE;
+const META_REPOSITORY =
+  process.env.NEXT_PUBLIC_SPLITGRAPH_GITHUB_ANALYTICS_META_REPOSITORY;
+const META_TABLE =
+  process.env.NEXT_PUBLIC_SPLITGRAPH_GITHUB_ANALYTICS_META_COMPLETED_TABLE;
 
 /**
  * To manually send a request, example:
@@ -42,7 +45,7 @@ export default async function handler(
   if (!META_NAMESPACE) {
     res.status(400).json({
       error:
-        "Missing env var: SPLITGRAPH_GITHUB_ANALYTICS_META_NAMESPACE " +
+        "Missing env var: NEXT_PUBLIC_SPLITGRAPH_GITHUB_ANALYTICS_META_NAMESPACE " +
         "Is it in .env.local or Vercel secrets?",
     });
     return;
@@ -51,7 +54,7 @@ export default async function handler(
   if (!META_REPOSITORY) {
     res.status(400).json({
       error:
-        "Missing env var: SPLITGRAPH_GITHUB_ANALYTICS_META_REPOSITORY " +
+        "Missing env var: NEXT_PUBLIC_SPLITGRAPH_GITHUB_ANALYTICS_META_REPOSITORY " +
         "Is it in .env or Vercel environment variables?",
     });
     return;
@@ -125,7 +128,7 @@ const markImportExportAsComplete = async ({
   // NOTE: We also assume that META_NAMESPACE is the same as destination namespace
   if (!username || username !== META_NAMESPACE) {
     throw new Error(
-      "Authenticated user does not match SPLITGRAPH_GITHUB_ANALYTICS_META_NAMESPACE"
+      "Authenticated user does not match NEXT_PUBLIC_SPLITGRAPH_GITHUB_ANALYTICS_META_NAMESPACE"
     );
   }
 

examples/nextjs-import-airbyte-github-export-seafowl/pages/index.tsx

@@ -1,53 +1,14 @@
-import { SqlProvider, makeSplitgraphHTTPContext } from "@madatdata/react";
-import { useMemo } from "react";
-
 import { BaseLayout } from "../components/BaseLayout";
 
-import { Sidebar, type GitHubRepository } from "../components/Sidebar";
+import { Sidebar } from "../components/Sidebar";
 import { Stepper } from "../components/ImportExportStepper/Stepper";
 
-const SplitgraphSampleQuery = () => {
-  const splitgraphDataContext = useMemo(
-    () => makeSplitgraphHTTPContext({ credential: null }),
-    []
-  );
-
-  // Uses splitgraph.com by default (anon access supported for public data)
+const ImportPage = () => {
   return (
-    <SqlProvider dataContext={splitgraphDataContext}>
-      <BaseLayout sidebar={<Sidebar repositories={sampleRepositories} />}>
-        <Stepper />
-      </BaseLayout>
-    </SqlProvider>
+    <BaseLayout sidebar={<Sidebar />}>
+      <Stepper />
+    </BaseLayout>
   );
 };
 
-export default SplitgraphSampleQuery;
-
-const sampleRepositories: GitHubRepository[] = [
-  { namespace: "OpenTech", repository: "data-structures" },
-  { namespace: "AiSolutions", repository: "machine-learning-api" },
-  { namespace: "DevToolsInc", repository: "react-components" },
-  { namespace: "QuantumComputing", repository: "quantum-algorithms" },
-  { namespace: "GlobalNetworks", repository: "network-optimization" },
-  { namespace: "CyberSec", repository: "firewall-config" },
-  { namespace: "DataSci", repository: "data-analysis" },
-  { namespace: "WebDevCo", repository: "responsive-templates" },
-  { namespace: "CloudNet", repository: "cloud-infrastructure" },
-  { namespace: "AiData", repository: "neural-networks" },
-  { namespace: "DistributedSys", repository: "microservices-arch" },
-  { namespace: "KernelDev", repository: "os-development" },
-  { namespace: "FrontEndMagic", repository: "vue-utilities" },
-  { namespace: "BackEndLogix", repository: "nodejs-server" },
-  { namespace: "Securitech", repository: "encryption-utils" },
-  { namespace: "FullStack", repository: "end-to-end-app" },
-  { namespace: "DBMasters", repository: "database-design" },
-  { namespace: "MobileApps", repository: "android-development" },
-  { namespace: "GameFactory", repository: "game-engine" },
-  { namespace: "WebAssembly", repository: "wasm-runtime" },
-  { namespace: "RoboLogic", repository: "robot-navigation" },
-  { namespace: "IoTDesign", repository: "iot-devices" },
-  { namespace: "BlockchainTech", repository: "blockchain-network" },
-  { namespace: "CryptoCoins", repository: "cryptocurrency" },
-  { namespace: "VRWorld", repository: "vr-applications" },
-];
+export default ImportPage;