Make repo page have three tabs: tables, queries and charts

Author: milesrichardson

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

@@ -1,17 +1,19 @@
-import type { ButtonHTMLAttributes } from "react";
+import type { ButtonHTMLAttributes, CSSProperties } from "react";
 
 import TabButtonStyle from "./TabButton.module.css";
 
 interface TabButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   active: boolean;
   onClick: () => void;
+  size?: CSSProperties["fontSize"];
 }
 
 export const TabButton = ({
   active,
   onClick,
   disabled: alwaysDisabled,
   children,
+  size,
   ...rest
 }: React.PropsWithChildren<TabButtonProps>) => {
   const className = [
@@ -29,7 +31,11 @@ export const TabButton = ({
       className={className}
       {...rest}
     >
-      {children}
+      {typeof size !== "undefined" ? (
+        <span style={{ fontSize: size }}>{children}</span>
+      ) : (
+        children
+      )}
     </button>
   );
 };

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

@@ -46,11 +46,6 @@ export const ImportedRepoMetadata = ({
           />
         </li>
       </ul>
-      <SeafowlEmbeddedQuery
-        importedRepository={importedRepository}
-        tableName={"stargazers"}
-        makeQuery={makeStargazersTableQuery}
-      />
     </div>
   );
 };

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

@@ -7,7 +7,50 @@ import { useRouter } from "next/router";
 import type { ImportedRepository } from "../../types";
 
 import { ImportedRepoMetadata } from "../../components/RepositoryAnalytics/ImportedRepoMetadata";
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
+
+import {
+  EmbeddedQueryPreviews,
+  EmbeddedTablePreviews,
+  EmbeddedQueryPreviewHeadingAndDescription,
+  EmbeddedTablePreviewHeadingAndDescription,
+} from "../../components/EmbeddedQuery/EmbeddedPreviews";
+
+import { useQueriesToExport } from "../../lib/config/queries-to-export";
+import { useTablesToExport } from "../../lib/config/github-tables";
+import { getQueryParamAsString } from "../../lib/util";
+import { TabButton } from "../../components/EmbeddedQuery/TabButton";
+
+type ActiveTab = "charts" | "tables" | "queries";
+
+const useActiveTab = (defaultTab: ActiveTab) => {
+  const router = useRouter();
+
+  const activeTab =
+    getQueryParamAsString<ActiveTab>(router.query, "activeTab") ?? defaultTab;
+
+  const switchTab = useCallback(
+    (nextTab: ActiveTab) => {
+      if (nextTab === activeTab) {
+        return;
+      }
+
+      return router.push({
+        pathname: router.pathname,
+        query: {
+          ...router.query,
+          activeTab: nextTab,
+        },
+      });
+    },
+    [router.query]
+  );
+
+  return {
+    activeTab,
+    switchTab,
+  };
+};
 
 const useImportedRepoFromURL = () => {
   const { query } = useRouter();
@@ -43,12 +86,79 @@ const useImportedRepoFromURL = () => {
 const RepositoryAnalyticsPage = () => {
   const importedRepository = useImportedRepoFromURL();
 
+  const tablesToExport = useTablesToExport(importedRepository);
+  const queriesToExport = useQueriesToExport(importedRepository);
+
+  const { activeTab, switchTab } = useActiveTab("charts");
+
   return (
     <BaseLayout sidebar={<Sidebar />}>
       <ImportedRepoMetadata importedRepository={importedRepository} />
-      <Charts importedRepository={importedRepository} />
+      <PageTabs activeTab={activeTab} switchTab={switchTab} />
+
+      <TabPane active={activeTab === "charts"}>
+        <Charts importedRepository={importedRepository} />
+      </TabPane>
+
+      <TabPane active={activeTab === "tables"}>
+        <EmbeddedTablePreviewHeadingAndDescription exportComplete={true} />
+        <EmbeddedTablePreviews
+          useLoadingOrCompleted={() => ({ loading: false, completed: true })}
+          tablesToExport={tablesToExport}
+          splitgraphRepository={importedRepository.splitgraphRepository}
+          splitgraphNamespace={importedRepository.splitgraphNamespace}
+        />
+      </TabPane>
+
+      <TabPane active={activeTab === "queries"}>
+        <EmbeddedQueryPreviewHeadingAndDescription exportComplete={true} />
+        <EmbeddedQueryPreviews
+          useLoadingOrCompleted={() => ({ loading: false, completed: true })}
+          queriesToExport={queriesToExport}
+          splitgraphRepository={importedRepository.splitgraphRepository}
+          splitgraphNamespace={importedRepository.splitgraphNamespace}
+        />
+      </TabPane>
     </BaseLayout>
   );
 };
 
+const TabPane = ({ active, children }: { active: boolean; children: any }) => {
+  return <div style={{ display: active ? "block" : "none" }}>{children}</div>;
+};
+
+const PageTabs = ({
+  activeTab,
+  switchTab,
+}: ReturnType<typeof useActiveTab>) => {
+  return (
+    <div>
+      <TabButton
+        active={activeTab === "charts"}
+        onClick={() => switchTab("charts")}
+        style={{ marginRight: "1rem" }}
+        size="1.5rem"
+      >
+        Charts
+      </TabButton>
+      <TabButton
+        active={activeTab === "tables"}
+        onClick={() => switchTab("tables")}
+        style={{ marginRight: "1rem" }}
+        size="1.5rem"
+      >
+        Raw Tables
+      </TabButton>
+      <TabButton
+        active={activeTab === "queries"}
+        onClick={() => switchTab("queries")}
+        style={{ marginRight: "1rem" }}
+        size="1.5rem"
+      >
+        Raw Queries
+      </TabButton>
+    </div>
+  );
+};
+
 export default RepositoryAnalyticsPage;