Merge pull request #41 from dolthub/taylor/improvements

Start workbench without default db
dolthub · Nov 8, 2023 · b308ae5 · b308ae5
2 parents 7d902f4 + d655ea0
commit b308ae5
Show file tree

Hide file tree

Showing 16 changed files with 157 additions and 63 deletions.
diff --git a/packages/graphql-server/schema.gql b/packages/graphql-server/schema.gql
@@ -281,7 +281,7 @@ enum DiffRowType {
 type Mutation {
   createBranch(databaseName: String!, newBranchName: String!, fromRefName: String!): Branch!
   deleteBranch(databaseName: String!, branchName: String!): Boolean!
-  addDatabaseConnection(url: String, useEnv: Boolean, hideDoltFeatures: Boolean): String!
+  addDatabaseConnection(url: String, useEnv: Boolean, hideDoltFeatures: Boolean): String
   createDatabase(databaseName: String!): Boolean!
   resetDatabase: Boolean!
   loadDataFile(tableName: String!, refName: String!, databaseName: String!, importOp: ImportOperation!, fileType: FileType!, file: Upload!, modifier: LoadDataModifier): Boolean!

diff --git a/packages/graphql-server/src/branches/branch.resolver.ts b/packages/graphql-server/src/branches/branch.resolver.ts
@@ -75,7 +75,7 @@ export class BranchResolver {
       const branch = await query(branchQuery, [args.branchName]);
       if (!branch.length) return undefined;
       return fromDoltBranchesRow(args.databaseName, branch[0]);
-    });
+    }, args.databaseName);
   }
 
   @Query(_returns => Branch, { nullable: true })
@@ -102,7 +102,7 @@ export class BranchResolver {
       return {
         list: branches.map(b => fromDoltBranchesRow(args.databaseName, b)),
       };
-    });
+    }, args.databaseName);
   }
 
   @Query(_returns => Branch, { nullable: true })
@@ -118,15 +118,15 @@ export class BranchResolver {
       const branch = await query(branchQuery, [args.newBranchName]);
       if (!branch.length) throw new Error("Created branch not found");
       return fromDoltBranchesRow(args.databaseName, branch[0]);
-    });
+    }, args.databaseName);
   }
 
   @Mutation(_returns => Boolean)
   async deleteBranch(@Args() args: BranchArgs): Promise<boolean> {
     return this.dss.query(async query => {
       await query(callDeleteBranch, [args.branchName]);
       return true;
-    });
+    }, args.databaseName);
   }
 
   @ResolveField(_returns => Table, { nullable: true })

diff --git a/packages/graphql-server/src/databases/database.resolver.ts b/packages/graphql-server/src/databases/database.resolver.ts
@@ -89,10 +89,10 @@ export class DatabaseResolver {
     }
   }
 
-  @Mutation(_returns => String)
+  @Mutation(_returns => String, { nullable: true })
   async addDatabaseConnection(
     @Args() args: AddDatabaseConnectionArgs,
-  ): Promise<string> {
+  ): Promise<string | undefined> {
     if (args.useEnv) {
       const url = this.configService.get("DATABASE_URL");
       if (!url) throw new Error("DATABASE_URL not found in env");
@@ -111,7 +111,7 @@ export class DatabaseResolver {
     }
 
     const db = await this.currentDatabase();
-    if (!db) throw new Error("database not found");
+    if (!db) return undefined;
     return db;
   }
 

diff --git a/packages/web/components/layouts/MainLayout/index.module.css b/packages/web/components/layouts/MainLayout/index.module.css
@@ -0,0 +1,12 @@
+.layout {
+  @apply bg-ld-grey h-full;
+  min-height: 100vh;
+}
+
+.container {
+  @apply max-w-2xl py-40 px-4 mx-auto;
+
+  h1 {
+    @apply mb-6 text-center;
+  }
+}
diff --git a/packages/web/components/layouts/MainLayout/index.tsx b/packages/web/components/layouts/MainLayout/index.tsx
@@ -0,0 +1,20 @@
+import Navbar from "@components/Navbar";
+import cx from "classnames";
+import { ReactNode } from "react";
+import css from "./index.module.css";
+
+type Props = {
+  children: ReactNode;
+  className?: string;
+};
+
+export default function MainLayout(props: Props) {
+  return (
+    <div className={css.layout}>
+      <Navbar home />
+      <main className={cx(css.container, props.className)}>
+        {props.children}
+      </main>
+    </div>
+  );
+}
diff --git a/packages/web/components/pageComponents/ConfigurationPage/AddConnectionOptions.tsx b/packages/web/components/pageComponents/ConfigurationPage/AddConnectionOptions.tsx
@@ -5,7 +5,7 @@ import {
   useAddDatabaseConnectionMutation,
   useHasDatabaseEnvQuery,
 } from "@gen/graphql-types";
-import { database } from "@lib/urls";
+import { maybeDatabase } from "@lib/urls";
 import { useRouter } from "next/router";
 import { SyntheticEvent, useState } from "react";
 import Form from "./Form";
@@ -28,9 +28,7 @@ function Inner(props: InnerProps) {
       if (!db.data) {
         return;
       }
-      const { href, as } = database({
-        databaseName: db.data.addDatabaseConnection,
-      });
+      const { href, as } = maybeDatabase(db.data.addDatabaseConnection);
       router.push(href, as).catch(console.error);
     } catch (_) {
       // Handled by res.error

diff --git a/packages/web/components/pageComponents/ConfigurationPage/Form.tsx b/packages/web/components/pageComponents/ConfigurationPage/Form.tsx
@@ -4,7 +4,7 @@ import CustomCheckbox from "@components/CustomCheckbox";
 import FormInput from "@components/FormInput";
 import Loader from "@components/Loader";
 import { useAddDatabaseConnectionMutation } from "@gen/graphql-types";
-import { database as databaseUrl } from "@lib/urls";
+import { maybeDatabase } from "@lib/urls";
 import { FaCaretDown } from "@react-icons/all-files/fa/FaCaretDown";
 import { FaCaretUp } from "@react-icons/all-files/fa/FaCaretUp";
 import { useRouter } from "next/router";
@@ -44,9 +44,7 @@ export default function Form(props: Props) {
       if (!db.data) {
         return;
       }
-      const { href, as } = databaseUrl({
-        databaseName: db.data.addDatabaseConnection,
-      });
+      const { href, as } = maybeDatabase(db.data.addDatabaseConnection);
       router.push(href, as).catch(console.error);
     } catch (_) {
       // Handled by res.error
@@ -64,7 +62,6 @@ export default function Form(props: Props) {
             onChangeString={setConnUrl}
             label="Connection string"
             placeholder="mysql://[username]:[password]@[host]/[database]"
-            light
           />
           <Button type="submit" disabled={!connUrl}>
             Go
@@ -138,7 +135,7 @@ export default function Form(props: Props) {
             </div>
           )}
           <ButtonsWithError error={res.error} onCancel={onCancel} left>
-            <Button type="submit" disabled={!host || !database || !username}>
+            <Button type="submit" disabled={!host || !username}>
               Launch Workbench
             </Button>
           </ButtonsWithError>

diff --git a/packages/web/components/pageComponents/ConfigurationPage/index.module.css b/packages/web/components/pageComponents/ConfigurationPage/index.module.css
@@ -1,12 +1,8 @@
 .container {
-  @apply max-w-6xl mx-auto my-24 px-4;
+  @apply max-w-6xl py-24 bg-ld-grey;
 }
 
 .top {
-  h1 {
-    @apply mb-6 text-center;
-  }
-
   p {
     @apply text-lg text-center max-w-xl mx-auto my-10;
   }
@@ -21,15 +17,15 @@
 }
 
 .quickStart {
-  @apply bg-ld-lightblue border rounded p-6 m-10 max-w-lg w-full;
+  @apply bg-white border rounded p-6 m-10 max-w-lg w-full;
 }
 
 .or {
   @apply font-semibold mt-32 text-lg;
 }
 
 .databaseConfig {
-  @apply m-10 max-w-xl w-full border rounded p-6;
+  @apply m-10 max-w-xl w-full border rounded p-6 bg-white;
 }
 
 .checkbox {

diff --git a/packages/web/components/pageComponents/ConfigurationPage/index.tsx b/packages/web/components/pageComponents/ConfigurationPage/index.tsx
@@ -1,23 +1,20 @@
-import Navbar from "@components/Navbar";
+import MainLayout from "@components/layouts/MainLayout";
 import DoltLink from "@components/links/DoltLink";
 import AddConnectionOptions from "./AddConnectionOptions";
 import css from "./index.module.css";
 
 export default function ConfigurationPage() {
   return (
-    <div>
-      <Navbar home />
-      <main className={css.container}>
-        <div className={css.top}>
-          <h1>Configure Database</h1>
-          <p>
-            Connect to the workbench using any MySQL-compatible database. Use{" "}
-            <DoltLink>Dolt</DoltLink> to unlock version control features, like
-            branch, commits, and merge.
-          </p>
-        </div>
-        <AddConnectionOptions />
-      </main>
-    </div>
+    <MainLayout className={css.container}>
+      <div className={css.top}>
+        <h1>Configure Database</h1>
+        <p>
+          Connect to the workbench using any MySQL-compatible database. Use{" "}
+          <DoltLink>Dolt</DoltLink> to unlock version control features, like
+          branch, commits, and merge.
+        </p>
+      </div>
+      <AddConnectionOptions />
+    </MainLayout>
   );
 }
diff --git a/packages/web/components/pageComponents/DatabasesPage/index.module.css b/packages/web/components/pageComponents/DatabasesPage/index.module.css
@@ -0,0 +1,33 @@
+.container {
+  p {
+    @apply text-lg text-center mb-10;
+  }
+}
+
+.database {
+  @apply bg-white w-full border my-2 px-4 py-2 rounded flex justify-between;
+
+  &:hover {
+    @apply border-acc-grey;
+  }
+}
+
+.button {
+  @apply bg-acc-hoverlinkblue text-white my-6 px-4 py-1.5 text-base rounded button-shadow;
+
+  &:hover {
+    @apply text-white bg-acc-linkblue button-shadow-hover;
+  }
+}
+
+.go {
+  @apply hidden;
+}
+
+.database:hover .go {
+  @apply flex items-center;
+
+  svg {
+    @apply ml-2;
+  }
+}
diff --git a/packages/web/components/pageComponents/DatabasesPage/index.tsx b/packages/web/components/pageComponents/DatabasesPage/index.tsx
@@ -0,0 +1,35 @@
+import CreateDatabase from "@components/CreateDatabase";
+import MainLayout from "@components/layouts/MainLayout";
+import Link from "@components/links/Link";
+import { useDatabasesQuery } from "@gen/graphql-types";
+import { database } from "@lib/urls";
+import { FaChevronRight } from "@react-icons/all-files/fa/FaChevronRight";
+import css from "./index.module.css";
+
+export default function DatabasesPage() {
+  const res = useDatabasesQuery();
+
+  return (
+    <MainLayout className={css.container}>
+      <h1>Choose a database</h1>
+      <p>
+        Choose an existing database or create a new database to get started.
+      </p>
+      <ul>
+        {res.data?.databases.map(db => (
+          <li key={db}>
+            <Link {...database({ databaseName: db })}>
+              <div className={css.database}>
+                <span>{db}</span>
+                <span className={css.go}>
+                  Go <FaChevronRight />
+                </span>
+              </div>
+            </Link>
+          </li>
+        ))}
+      </ul>
+      <CreateDatabase buttonClassName={css.button} />
+    </MainLayout>
+  );
+}
diff --git a/packages/web/components/pageComponents/HomePage/index.module.css b/packages/web/components/pageComponents/HomePage/index.module.css
@@ -1,10 +1,4 @@
-.container {
-  @apply max-w-2xl mx-auto my-40 px-4;
-
-  h1 {
-    @apply mb-6 text-center;
-  }
-
+.inner {
   p {
     @apply text-lg text-center;
   }

diff --git a/packages/web/components/pageComponents/HomePage/index.tsx b/packages/web/components/pageComponents/HomePage/index.tsx
@@ -1,14 +1,14 @@
 import Button from "@components/Button";
 import Loader from "@components/Loader";
-import Navbar from "@components/Navbar";
+import MainLayout from "@components/layouts/MainLayout";
 import DoltLink from "@components/links/DoltLink";
 import Link from "@components/links/Link";
 import {
   useAddDatabaseConnectionMutation,
   useHasDatabaseEnvQuery,
 } from "@gen/graphql-types";
 import useEffectAsync from "@hooks/useEffectAsync";
-import { database } from "@lib/urls";
+import { maybeDatabase } from "@lib/urls";
 import { useRouter } from "next/router";
 import css from "./index.module.css";
 
@@ -25,20 +25,17 @@ export default function HomePage() {
       if (!db.data) {
         return;
       }
-      const { href, as } = database({
-        databaseName: db.data.addDatabaseConnection,
-      });
+      const { href, as } = maybeDatabase(db.data.addDatabaseConnection);
       router.push(href, as).catch(console.error);
     } catch (_) {
       // Handled by res.error
     }
   }, [res.data?.hasDatabaseEnv]);
 
   return (
-    <div>
-      <Navbar home />
+    <MainLayout>
       <Loader loaded={!res.loading && !addRes.loading} />
-      <main className={css.container}>
+      <div className={css.inner}>
         <h1>Welcome to the Dolt Workbench</h1>
         <p>
           Connect to the workbench using any MySQL-compatible database. Use{" "}
@@ -50,7 +47,7 @@ export default function HomePage() {
             <Button>Get Started</Button>
           </Link>
         </p>
-      </main>
-    </div>
+      </div>
+    </MainLayout>
   );
 }
diff --git a/packages/web/gen/graphql-types.tsx b/packages/web/gen/graphql-types.tsx
@@ -193,7 +193,7 @@ export enum LoadDataModifier {
 
 export type Mutation = {
   __typename?: 'Mutation';
-  addDatabaseConnection: Scalars['String']['output'];
+  addDatabaseConnection?: Maybe<Scalars['String']['output']>;
   createBranch: Branch;
   createDatabase: Scalars['Boolean']['output'];
   createTag: Tag;
@@ -783,7 +783,7 @@ export type AddDatabaseConnectionMutationVariables = Exact<{
 }>;
 
 
-export type AddDatabaseConnectionMutation = { __typename?: 'Mutation', addDatabaseConnection: string };
+export type AddDatabaseConnectionMutation = { __typename?: 'Mutation', addDatabaseConnection?: string | null };
 
 export type HasDatabaseEnvQueryVariables = Exact<{ [key: string]: never; }>;
 

diff --git a/packages/web/lib/urls.ts b/packages/web/lib/urls.ts
@@ -1,14 +1,18 @@
+import Maybe from "./Maybe";
 import * as ps from "./params";
 import { Route } from "./urlUtils";
 
 const ENCODE = true;
 export type DatabaseUrl = (p: ps.DatabaseParams) => Route;
 export type RefUrl = (p: ps.RefParams) => Route;
 
-export const database = (p: ps.DatabaseParams): Route => {
-  const d = new Route("/database");
-  return d.addDynamic("databaseName", p.databaseName);
-};
+export const databases = new Route("/database");
+
+export const database = (p: ps.DatabaseParams): Route =>
+  databases.addDynamic("databaseName", p.databaseName);
+
+export const maybeDatabase = (databaseName?: Maybe<string>): Route =>
+  databaseName ? database({ databaseName }) : databases;
 
 export const query = (p: ps.RefParams): Route =>
   database(p).addStatic("query").addDynamic("refName", p.refName, ENCODE);