address PR comments

Author: eric-richardson1

web/renderer/components/CloneDatabaseForm/index.module.css

@@ -1,4 +1,4 @@
-.form .checkbox {
+.form {
   svg {
     @apply -top-1;
   }

web/renderer/components/CreateDatabaseOrSchemaModal/index.module.css

@@ -0,0 +1,3 @@
+.radios {
+  @apply mb-6;
+}

web/renderer/components/CreateDatabaseOrSchemaModal/index.tsx

@@ -10,7 +10,7 @@ import useRole from "@hooks/useRole";
 import { ApolloErrorType } from "@lib/errors/types";
 import { SyntheticEvent, useState } from "react";
 import CloneDatabaseForm from "@components/CloneDatabaseForm";
-import css from "@components/CloneDatabaseForm/index.module.css";
+import css from "./index.module.css";
 
 type InnerProps = {
   onClose: () => void;
@@ -52,24 +52,24 @@ export default function CreateDatabaseOrSchemaModal(props: InnerProps) {
       <ModalInner>
         {props.isDolt && (
           <>
-            <Radio
-              checked={!cloneDolt}
-              onChange={() => {
-                setCloneDolt(false);
-              }}
-              name="create-database"
-              label="Create a new database"
-              className={css.checkbox}
-            />
-            <Radio
-              checked={cloneDolt}
-              onChange={() => {
-                setCloneDolt(true);
-              }}
-              name="clone-dolt-server"
-              label="Clone a remote Dolt database from DoltHub"
-              className={css.checkbox}
-            />
+            <div className={css.radios}>
+              <Radio
+                checked={!cloneDolt}
+                onChange={() => {
+                  setCloneDolt(false);
+                }}
+                name="create-database"
+                label="Create a new database"
+              />
+              <Radio
+                checked={cloneDolt}
+                onChange={() => {
+                  setCloneDolt(true);
+                }}
+                name="clone-dolt-server"
+                label="Clone a remote Dolt database from DoltHub"
+              />
+            </div>
             {cloneDolt && <CloneDatabaseForm />}
           </>
         )}

web/renderer/components/GoBack/index.test.tsx

@@ -10,7 +10,7 @@ describe("tests GoBack", () => {
     setup(<GoBack url={mockRoute} pageName="Test Page" />);
 
     expect(screen.getByRole("link")).toBeInTheDocument();
-    expect(screen.getByText("Back to Test Page")).toBeInTheDocument();
+    expect(screen.getByText("back to Test Page")).toBeInTheDocument();
   });
 
   it("renders with mobile styles when isMobile is true", () => {
@@ -58,7 +58,7 @@ describe("tests GoBack", () => {
   it("renders with different page names", () => {
     setup(<GoBack url={mockRoute} pageName="Dashboard" />);
 
-    expect(screen.getByText("Back to Dashboard")).toBeInTheDocument();
+    expect(screen.getByText("back to Dashboard")).toBeInTheDocument();
   });
 
   it("combines all props correctly", () => {
@@ -79,6 +79,6 @@ describe("tests GoBack", () => {
 
     const link = screen.getByRole("link");
     expect(link).toHaveAttribute("href", "/test");
-    expect(screen.getByText("Back to Complex Page")).toBeInTheDocument();
+    expect(screen.getByText("back to Complex Page")).toBeInTheDocument();
   });
 });

web/renderer/components/GoBack/index.tsx

@@ -22,7 +22,7 @@ export default function GoBack(props: Props) {
     >
       <Link {...props.url}>
         <IoIosArrowDropleftCircle />
-        <span>{props.pageName ? `Back to ${props.pageName}` : "Back"}</span>
+        <span>{props.pageName ? `back to ${props.pageName}` : "back"}</span>
       </Link>
     </div>
   );

web/renderer/components/pageComponents/ConnectionsPage/NewConnection/About.tsx

@@ -60,7 +60,7 @@ export default function About() {
             }}
             name="existing-dolt-server"
             label="Connect to an existing Dolt server"
-            className={css.checkbox}
+            className={css.radio}
           />
           <Radio
             checked={connectionOption === ConnectionOption.New}
@@ -75,7 +75,7 @@ export default function About() {
             name="start-dolt-server"
             label="Start a fresh Dolt server"
             description="Run a Dolt SQL server hosted directly within the Workbench. The app supports only one internal server instance, but this restriction does not apply to external Dolt server connections."
-            className={css.checkbox}
+            className={css.radio}
           />
           <Radio
             checked={connectionOption === ConnectionOption.Clone}
@@ -90,7 +90,7 @@ export default function About() {
             }}
             name="clone-dolt-server"
             label="Clone a remote Dolt database from DoltHub"
-            className={css.checkbox}
+            className={css.radio}
           />
         </>
       )}
@@ -146,7 +146,7 @@ export default function About() {
             }}
             label="Connection Name"
             labelClassName={css.label}
-            placeholder="my-database (required)"
+            placeholder="my-connection (required)"
             light
             data-cy="connection-name-input"
           />

web/renderer/components/pageComponents/ConnectionsPage/NewConnection/StartDoltServerForm.tsx

@@ -7,7 +7,8 @@ import {
 } from "@dolthub/react-components";
 import { useConfigContext } from "./context/config";
 import css from "./index.module.css";
-import { ReactNode, useState } from "react";
+import { ReactNode } from "react";
+import { DisabledReturnType } from "@pageComponents/ConnectionsPage/NewConnection/context/utils";
 
 type Props = {
   disabledForConnection: boolean;
@@ -21,10 +22,9 @@ export default function StartDoltServerForm({
   const { state, setState, error, setErr, onStartDoltServer } =
     useConfigContext();
 
-  const [databaseName, setDatabaseName] = useState("");
   const { disabled, message } = getDisabled(
     disabledForConnection,
-    databaseName,
+    state.database,
     disabledForConnectionMessage,
   );
 
@@ -53,9 +53,10 @@ export default function StartDoltServerForm({
         labelClassName={css.label}
       />
       <FormInput
-        value={databaseName}
+        value={state.database}
         onChangeString={db => {
-          setDatabaseName(db);
+          setState({ database: db });
+          setErr(undefined);
         }}
         label="Database Name"
         labelClassName={css.label}
@@ -77,7 +78,7 @@ export default function StartDoltServerForm({
                 type="submit"
                 disabled={disabled || state.loading}
                 className={css.button}
-                onClick={async e => onStartDoltServer(e, databaseName)}
+                onClick={onStartDoltServer}
               >
                 Start and Connect to Dolt Server
                 <SmallLoader
@@ -100,7 +101,7 @@ function getDisabled(
   disabledForConnection: boolean,
   databaseName: string,
   disabledForConnectionMessage?: ReactNode,
-) {
+): DisabledReturnType {
   if (disabledForConnection) {
     return { disabled: true, message: disabledForConnectionMessage };
   }

web/renderer/components/pageComponents/ConnectionsPage/NewConnection/context/config.tsx

@@ -96,15 +96,15 @@ export function ConfigProvider({ children }: Props) {
     }
   };
 
-  const onStartDoltServer = async (e: SyntheticEvent, databaseName: string) => {
+  const onStartDoltServer = async (e: SyntheticEvent) => {
     e.preventDefault();
     setState({ loading: true });
     try {
       const result = await window.ipc.invoke(
         "start-dolt-server",
         state.name.trim(),
         state.port,
-        databaseName,
+        state.database,
         !state.cloneDolt,
       );
 

web/renderer/components/pageComponents/ConnectionsPage/NewConnection/context/state.ts

@@ -44,7 +44,7 @@ export type ConfigContextType = {
   setErr: SetApolloErrorType;
   clearState: () => void;
   storedConnections?: DatabaseConnectionFragment[];
-  onStartDoltServer: (e: SyntheticEvent, databaseName: string) => Promise<void>;
+  onStartDoltServer: (e: SyntheticEvent) => Promise<void>;
   onCloneDoltHubDatabase: (
     e: SyntheticEvent,
     owner: string,

web/renderer/components/pageComponents/ConnectionsPage/NewConnection/index.module.css

@@ -105,7 +105,8 @@
   }
 }
 
-.checkbox {
+.checkbox,
+.radio {
   @apply mb-3 text-sm w-full;
 }