From 5de970f925b786a1db5640f4990890df79403940 Mon Sep 17 00:00:00 2001
From: LiuLiu <liuliu.developer@gmail.com>
Date: Thu, 9 Jan 2025 15:39:43 -0800
Subject: [PATCH] connection form sections

---
 .../NewConnection/WelcomeMessage.tsx          |  15 +
 .../NewConnection/index.module.css            |  28 +-
 .../ConnectionsPage/NewConnection/index.tsx   | 315 ++++++++++--------
 .../NewConnection/useConfig.ts                |   2 +
 .../ConnectionsPage/index.module.css          |  14 +-
 .../pageComponents/ConnectionsPage/index.tsx  |  10 -
 6 files changed, 216 insertions(+), 168 deletions(-)
 create mode 100644 web/renderer/components/pageComponents/ConnectionsPage/NewConnection/WelcomeMessage.tsx

diff --git a/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/WelcomeMessage.tsx b/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/WelcomeMessage.tsx
new file mode 100644
index 00000000..d2ddfb6f
--- /dev/null
+++ b/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/WelcomeMessage.tsx
@@ -0,0 +1,15 @@
+import DoltLink from "@components/links/DoltLink";
+import DoltgresLink from "@components/links/DoltgresLink";
+import css from "./index.module.css";
+
+export default function WelcomeMessage() {
+  return (
+    <div className={css.welcome}>
+      <h1>Welcome to the Dolt Workbench</h1>
+      <p>
+        Connect the workbench to any MySQL or PostgreSQL compatible database.
+        Use <DoltLink /> or <DoltgresLink /> to unlock version control features.
+      </p>
+    </div>
+  );
+}
diff --git a/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/index.module.css b/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/index.module.css
index aad5e9a0..613eb292 100644
--- a/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/index.module.css
+++ b/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/index.module.css
@@ -1,11 +1,31 @@
+.container {
+  @apply py-20 bg-stone-50;
+  a {
+    @apply text-[#FF8964];
+  }
+  a:hover {
+    @apply text-coral-400;
+  }
+}
+
 .databaseForm {
-  @apply w-full max-w-xl mx-auto;
+  @apply w-full max-w-2xl mx-auto;
 
   h3 {
     @apply mb-4;
   }
 }
 
+.welcome {
+  @apply text-center;
+  h1 {
+    @apply font-semibold;
+  }
+  p {
+    @apply text-xl  my-6 leading-8;
+  }
+}
+
 .whiteContainer {
   @apply max-w-xl w-full border rounded-lg py-10 bg-white mx-auto;
 }
@@ -17,6 +37,10 @@
   }
 }
 
+.top {
+  @apply mx-10;
+}
+
 .section {
   @apply px-14 py-4;
 }
@@ -30,7 +54,7 @@
 }
 
 .middle {
-  @apply border-y pt-8;
+  @apply pt-8;
 }
 
 .or {
diff --git a/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/index.tsx b/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/index.tsx
index cfb4d87a..8b5aecc9 100644
--- a/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/index.tsx
+++ b/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/index.tsx
@@ -9,14 +9,14 @@ import {
 } from "@dolthub/react-components";
 import { DatabaseType } from "@gen/graphql-types";
 import { dockerHubRepo } from "@lib/constants";
-import { FaCaretDown } from "@react-icons/all-files/fa/FaCaretDown";
-import { FaCaretUp } from "@react-icons/all-files/fa/FaCaretUp";
 import { IoIosArrowDropleftCircle } from "@react-icons/all-files/io/IoIosArrowDropleftCircle";
 import { connections } from "@lib/urls";
 import { useRouter } from "next/router";
+import MainLayout from "@components/layouts/MainLayout";
 import cx from "classnames";
 import useConfig, { getCanSubmit } from "./useConfig";
 import css from "./index.module.css";
+import WelcomeMessage from "./WelcomeMessage";
 
 type Props = {
   canGoBack: boolean;
@@ -34,152 +34,181 @@ export default function NewConnection(props: Props) {
     : clearState;
 
   return (
-    <div className={css.databaseForm}>
-      <Loader loaded={!state.loading} />
-      {props.canGoBack && (
-        <Button.Link onClick={onCancel} className={css.goback}>
-          <IoIosArrowDropleftCircle /> back to connections
-        </Button.Link>
-      )}
-      <div className={css.whiteContainer}>
-        <form onSubmit={onSubmit}>
-          <div className={css.section}>
-            <h3>Set up new connection</h3>
-            <p className={css.instructions}>
-              View instructions for connecting to local and Docker installed
-              databases <ExternalLink href={dockerHubRepo}>here</ExternalLink>.
-            </p>
-            <FormInput
-              value={state.name}
-              onChangeString={n => setState({ name: n })}
-              label="Name"
-              placeholder="my-database (required)"
-              horizontal
-              light
-            />
-            <FormSelect
-              outerClassName={css.typeSelect}
-              className={css.typeSelectInner}
-              label="Type"
-              val={state.type}
-              onChangeValue={t => {
-                if (!t) return;
-                setState({
-                  type: t,
-                  port: t === DatabaseType.Mysql ? "3306" : "5432",
-                  username: t === DatabaseType.Mysql ? "root" : "postgres",
-                });
-              }}
-              options={[
-                { label: "MySQL/Dolt", value: DatabaseType.Mysql },
-                {
-                  label: "Postgres/Doltgres",
-                  value: DatabaseType.Postgres,
-                },
-              ]}
-              hideSelectedOptions
-              horizontal
-              light
-            />
-          </div>
-          <div className={cx(css.section, css.middle)}>
-            <FormInput
-              value={state.connectionUrl}
-              onChangeString={c => setState({ connectionUrl: c })}
-              label="URL"
-              placeholder={`${
-                state.type === DatabaseType.Mysql ? "mysql" : "postgresql"
-              }://[user]:[password]@[host]/[database]`}
-              horizontal
-              light
-            />
-            <div className={css.or}>OR</div>
-            <FormInput
-              label="Host"
-              value={state.host}
-              onChangeString={h => setState({ host: h })}
-              placeholder={state.hostPlaceholder}
-              horizontal
-              light
-            />
-            <FormInput
-              label="Port"
-              value={state.port}
-              onChangeString={p => setState({ port: p })}
-              placeholder={state.type === DatabaseType.Mysql ? "3306" : "5432"}
-              horizontal
-              light
-            />
-            <FormInput
-              label="User"
-              value={state.username}
-              onChangeString={u => setState({ username: u })}
-              placeholder="root"
-              horizontal
-              light
-            />
-            <FormInput
-              label="Password"
-              value={state.password}
-              onChangeString={p => setState({ password: p })}
-              placeholder="**********"
-              type="password"
-              horizontal
-              light
-            />
-            <FormInput
-              label="Database"
-              value={state.database}
-              onChangeString={d => setState({ database: d })}
-              placeholder="mydb"
-              horizontal
-              light
-            />
-          </div>
-          <div className={css.section}>
-            <Button.Link
-              onClick={() =>
-                setState({ showAdvancedSettings: !state.showAdvancedSettings })
-              }
-              className={css.advancedSettings}
-            >
-              {state.showAdvancedSettings ? <FaCaretUp /> : <FaCaretDown />}{" "}
-              Advanced settings
-            </Button.Link>
-            {state.showAdvancedSettings && (
-              <div>
-                <Checkbox
-                  checked={state.useSSL}
-                  onChange={() => setState({ useSSL: !state.useSSL })}
-                  name="use-ssl"
-                  label="Use SSL"
-                  description="If server does not allow insecure connections, client must use SSL/TLS."
-                  className={css.checkbox}
+    <MainLayout className={css.container}>
+      <div className={css.databaseForm}>
+        <Loader loaded={!state.loading} />
+        <WelcomeMessage />
+        <div className={css.whiteContainer}>
+          <form onSubmit={onSubmit}>
+            <div className={css.top}>
+              <h3>Set up new connection</h3>
+              <p className={css.instructions}>
+                View instructions for connecting to local and Docker installed
+                databases <ExternalLink href={dockerHubRepo}>here</ExternalLink>
+                .
+              </p>
+            </div>
+            {state.showAbout && (
+              <div className={css.section}>
+                <FormInput
+                  value={state.name}
+                  onChangeString={n => setState({ name: n })}
+                  label="Name"
+                  placeholder="my-database (required)"
+                  horizontal
+                  light
+                />
+                <FormSelect
+                  outerClassName={css.typeSelect}
+                  className={css.typeSelectInner}
+                  label="Type"
+                  val={state.type}
+                  onChangeValue={t => {
+                    if (!t) return;
+                    setState({
+                      type: t,
+                      port: t === DatabaseType.Mysql ? "3306" : "5432",
+                      username: t === DatabaseType.Mysql ? "root" : "postgres",
+                    });
+                  }}
+                  options={[
+                    { label: "MySQL/Dolt", value: DatabaseType.Mysql },
+                    {
+                      label: "Postgres/Doltgres",
+                      value: DatabaseType.Postgres,
+                    },
+                  ]}
+                  hideSelectedOptions
+                  horizontal
+                  light
+                />
+                <Button
+                  onClick={() =>
+                    setState({
+                      showConnectionDetails: true,
+                      showAbout: false,
+                      showAdvancedSettings: false,
+                    })
+                  }
+                  disabled={!state.name}
+                >
+                  Next
+                </Button>
+              </div>
+            )}
+            {state.showConnectionDetails && (
+              <div className={cx(css.section, css.middle)}>
+                <FormInput
+                  value={state.connectionUrl}
+                  onChangeString={c => setState({ connectionUrl: c })}
+                  label="URL"
+                  placeholder={`${
+                    state.type === DatabaseType.Mysql ? "mysql" : "postgresql"
+                  }://[user]:[password]@[host]/[database]`}
+                  horizontal
+                  light
                 />
-                <Checkbox
-                  checked={state.hideDoltFeatures}
-                  onChange={() =>
-                    setState({ hideDoltFeatures: !state.hideDoltFeatures })
+                <div className={css.or}>OR</div>
+                <FormInput
+                  label="Host"
+                  value={state.host}
+                  onChangeString={h => setState({ host: h })}
+                  placeholder={state.hostPlaceholder}
+                  horizontal
+                  light
+                />
+                <FormInput
+                  label="Port"
+                  value={state.port}
+                  onChangeString={p => setState({ port: p })}
+                  placeholder={
+                    state.type === DatabaseType.Mysql ? "3306" : "5432"
                   }
-                  name="hide-dolt-features"
-                  label="Hide Dolt features"
-                  description="Hides Dolt features like branches, logs, and commits for non-Dolt databases. Will otherwise be disabled."
-                  className={css.checkbox}
+                  horizontal
+                  light
+                />
+                <FormInput
+                  label="User"
+                  value={state.username}
+                  onChangeString={u => setState({ username: u })}
+                  placeholder="root"
+                  horizontal
+                  light
                 />
+                <FormInput
+                  label="Password"
+                  value={state.password}
+                  onChangeString={p => setState({ password: p })}
+                  placeholder="**********"
+                  type="password"
+                  horizontal
+                  light
+                />
+                <FormInput
+                  label="Database"
+                  value={state.database}
+                  onChangeString={d => setState({ database: d })}
+                  placeholder="mydb"
+                  horizontal
+                  light
+                />
+                <Button
+                  onClick={() =>
+                    setState({
+                      showConnectionDetails: false,
+                      showAbout: false,
+                      showAdvancedSettings: true,
+                    })
+                  }
+                  disabled={
+                    !state.connectionUrl || (!state.host && !state.port)
+                  }
+                >
+                  Next
+                </Button>
+              </div>
+            )}
+            {state.showAdvancedSettings && (
+              <div className={css.section}>
+                <div>
+                  <Checkbox
+                    checked={state.useSSL}
+                    onChange={() => setState({ useSSL: !state.useSSL })}
+                    name="use-ssl"
+                    label="Use SSL"
+                    description="If server does not allow insecure connections, client must use SSL/TLS."
+                    className={css.checkbox}
+                  />
+                  <Checkbox
+                    checked={state.hideDoltFeatures}
+                    onChange={() =>
+                      setState({ hideDoltFeatures: !state.hideDoltFeatures })
+                    }
+                    name="hide-dolt-features"
+                    label="Hide Dolt features"
+                    description="Hides Dolt features like branches, logs, and commits for non-Dolt databases. Will otherwise be disabled."
+                    className={css.checkbox}
+                  />
+                </div>
+                <ButtonsWithError
+                  error={error}
+                  onCancel={onCancel}
+                  cancelText={props.canGoBack ? "cancel" : "clear"}
+                >
+                  <Button type="submit" disabled={!getCanSubmit(state)}>
+                    Launch Workbench
+                  </Button>
+                </ButtonsWithError>
               </div>
             )}
-            <ButtonsWithError
-              error={error}
-              onCancel={onCancel}
-              cancelText={props.canGoBack ? "cancel" : "clear"}
-            >
-              <Button type="submit" disabled={!getCanSubmit(state)}>
-                Launch Workbench
-              </Button>
-            </ButtonsWithError>
-          </div>
-        </form>
+          </form>
+        </div>
+        {props.canGoBack && (
+          <Button.Link onClick={onCancel} className={css.goback}>
+            <IoIosArrowDropleftCircle /> back to connections
+          </Button.Link>
+        )}
       </div>
-    </div>
+    </MainLayout>
   );
 }
diff --git a/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/useConfig.ts b/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/useConfig.ts
index b4e9f083..a03cbfbe 100644
--- a/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/useConfig.ts
+++ b/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/useConfig.ts
@@ -19,6 +19,8 @@ const defaultState = {
   connectionUrl: "",
   hideDoltFeatures: false,
   useSSL: true,
+  showAbout: true,
+  showConnectionDetails: false,
   showAdvancedSettings: false,
   loading: false,
   type: DatabaseType.Mysql,
diff --git a/web/renderer/components/pageComponents/ConnectionsPage/index.module.css b/web/renderer/components/pageComponents/ConnectionsPage/index.module.css
index f41e333e..62d5bd6b 100644
--- a/web/renderer/components/pageComponents/ConnectionsPage/index.module.css
+++ b/web/renderer/components/pageComponents/ConnectionsPage/index.module.css
@@ -1,19 +1,7 @@
 .container {
-  @apply max-w-6xl py-24 bg-stone-50;
+  @apply max-w-6xl py-16 bg-stone-50;
 }
 
 .inner {
   @apply flex justify-between;
 }
-
-.top {
-  @apply mr-24 mt-10;
-
-  h1 {
-    @apply text-left;
-  }
-
-  p {
-    @apply text-xl max-w-lg mt-7 leading-8;
-  }
-}
diff --git a/web/renderer/components/pageComponents/ConnectionsPage/index.tsx b/web/renderer/components/pageComponents/ConnectionsPage/index.tsx
index 3e549348..f3f77597 100644
--- a/web/renderer/components/pageComponents/ConnectionsPage/index.tsx
+++ b/web/renderer/components/pageComponents/ConnectionsPage/index.tsx
@@ -1,6 +1,4 @@
 import MainLayout from "@components/layouts/MainLayout";
-import DoltLink from "@components/links/DoltLink";
-import DoltgresLink from "@components/links/DoltgresLink";
 import { QueryHandler } from "@dolthub/react-components";
 import { useStoredConnectionsQuery } from "@gen/graphql-types";
 import ExistingConnections from "./ExistingConnections";
@@ -12,14 +10,6 @@ export default function ConfigurationPage() {
   return (
     <MainLayout className={css.container}>
       <div className={css.inner}>
-        <div className={css.top}>
-          <h1>Welcome to the Dolt Workbench</h1>
-          <p>
-            Connect the workbench to any MySQL or PostgreSQL compatible
-            database. Use <DoltLink /> or <DoltgresLink /> to unlock version
-            control features.
-          </p>
-        </div>
         <QueryHandler
           result={res}
           render={data =>