web: Fix new connection

dolthub · Nov 28, 2023 · fc5df01 · fc5df01
1 parent 0cfb3a4
commit fc5df01
Show file tree

Hide file tree

Showing 2 changed files with 111 additions and 94 deletions.
diff --git a/web/components/pageComponents/ConnectionsPage/NewConnection/index.module.css b/web/components/pageComponents/ConnectionsPage/NewConnection/index.module.css
@@ -7,11 +7,15 @@
 }
 
 .whiteContainer {
-  @apply max-w-xl w-full border rounded-lg py-10 px-16 bg-white mx-auto;
+  @apply max-w-xl w-full border rounded-lg py-10 bg-white mx-auto;
 }
 
-.nameInput {
-  @apply pb-4 mb-8 border-b;
+.section {
+  @apply px-14 py-4;
+}
+
+.middle {
+  @apply border-y pt-8;
 }
 
 .or {

diff --git a/web/components/pageComponents/ConnectionsPage/NewConnection/index.tsx b/web/components/pageComponents/ConnectionsPage/NewConnection/index.tsx
@@ -5,6 +5,7 @@ import FormInput from "@components/FormInput";
 import Loader from "@components/Loader";
 import { FaCaretDown } from "@react-icons/all-files/fa/FaCaretDown";
 import { FaCaretUp } from "@react-icons/all-files/fa/FaCaretUp";
+import cx from "classnames";
 import css from "./index.module.css";
 import useConfig from "./useConfig";
 
@@ -18,7 +19,6 @@ export default function NewConnection(props: Props) {
   const canSubmit =
     state.name && (state.connectionUrl || (state.host && state.username));
   const isDocker = location.origin === "http://localhost:3000";
-  console.log(location);
 
   const onCancel = props.canGoBack
     ? () => {
@@ -31,100 +31,113 @@ export default function NewConnection(props: Props) {
       <Loader loaded={!state.loading} />
       <div className={css.whiteContainer}>
         <form onSubmit={onSubmit}>
-          <h3>Set up new connection</h3>
-          <div className={css.nameInput}>
+          <div className={css.section}>
+            <h3>Set up new connection</h3>
+            <div className={css.nameInput}>
+              <FormInput
+                value={state.name}
+                onChangeString={n => setState({ name: n })}
+                label="Name"
+                placeholder="my-database (required)"
+                horizontal
+                light
+              />
+            </div>
+          </div>
+          <div className={cx(css.section, css.middle)}>
+            <FormInput
+              value={state.connectionUrl}
+              onChangeString={c => setState({ connectionUrl: c })}
+              label="URL"
+              placeholder="mysql://[user]:[password]@[host]/[database]"
+              horizontal
+              light
+            />
+            <div className={css.or}>OR</div>
+            <FormInput
+              label="Host"
+              value={state.host}
+              onChangeString={h => setState({ host: h })}
+              placeholder={isDocker ? "host.docker.internal" : "127.0.0.1"}
+              horizontal
+              light
+            />
+            <FormInput
+              label="Port"
+              value={state.port}
+              onChangeString={p => setState({ port: p })}
+              placeholder="3306"
+              horizontal
+              light
+            />
+            <FormInput
+              label="User"
+              value={state.username}
+              onChangeString={u => setState({ username: u })}
+              placeholder="root"
+              horizontal
+              light
+            />
             <FormInput
-              value={state.name}
-              onChangeString={n => setState({ name: n })}
-              label="Name"
-              placeholder="mydatabase (required)"
+              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>
-          <FormInput
-            value={state.connectionUrl}
-            onChangeString={c => setState({ connectionUrl: c })}
-            label="URL"
-            placeholder="mysql://[username]:[password]@[host]/[database]"
-            horizontal
-          />
-          <div className={css.or}>OR</div>
-          <FormInput
-            label="Host"
-            value={state.host}
-            onChangeString={h => setState({ host: h })}
-            placeholder={isDocker ? "host.docker.internal" : "127.0.0.1"}
-            horizontal
-          />
-          <FormInput
-            label="Port"
-            value={state.port}
-            onChangeString={p => setState({ port: p })}
-            placeholder="3306"
-            horizontal
-          />
-          <FormInput
-            label="Username"
-            value={state.username}
-            onChangeString={u => setState({ username: u })}
-            placeholder="root"
-            horizontal
-          />
-          <FormInput
-            label="Password"
-            value={state.password}
-            onChangeString={p => setState({ password: p })}
-            placeholder="**********"
-            type="password"
-            horizontal
-          />
-          <FormInput
-            label="Database"
-            value={state.database}
-            onChangeString={d => setState({ database: d })}
-            placeholder="mydb"
-            horizontal
-          />
-          <Button.Link
-            onClick={() =>
-              setState({ showAdvancedSettings: !state.showAdvancedSettings })
-            }
-            className={css.advancedSettings}
-          >
-            {state.showAdvancedSettings ? <FaCaretUp /> : <FaCaretDown />}{" "}
-            Advanced settings
-          </Button.Link>
-          {state.showAdvancedSettings && (
-            <div>
-              <CustomCheckbox
-                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}
-              />
-              <CustomCheckbox
-                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 MySQL databases. Will otherwise be disabled."
-                className={css.checkbox}
-              />
-            </div>
-          )}
-          <ButtonsWithError
-            error={error}
-            onCancel={onCancel}
-            cancelText={props.canGoBack ? "cancel" : "clear"}
-          >
-            <Button type="submit" disabled={!canSubmit}>
-              Launch Workbench
-            </Button>
-          </ButtonsWithError>
+          <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>
+                <CustomCheckbox
+                  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}
+                />
+                <CustomCheckbox
+                  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 MySQL databases. Will otherwise be disabled."
+                  className={css.checkbox}
+                />
+              </div>
+            )}
+            <ButtonsWithError
+              error={error}
+              onCancel={onCancel}
+              cancelText={props.canGoBack ? "cancel" : "clear"}
+            >
+              <Button type="submit" disabled={!canSubmit}>
+                Launch Workbench
+              </Button>
+            </ButtonsWithError>
+          </div>
         </form>
       </div>
     </div>