refactor, 1 tab, no destroy

dolthub · Feb 19, 2025 · fffa8d8 · fffa8d8
1 parent 771f229
commit fffa8d8
Show file tree

Hide file tree

Showing 9 changed files with 218 additions and 175 deletions.
diff --git a/graphql-server/src/databases/database.resolver.ts b/graphql-server/src/databases/database.resolver.ts
@@ -150,8 +150,6 @@ export class DatabaseResolver {
     } catch (error) {
       console.error("Error checking connection:", error.message);
       return { active: false };
-    } finally {
-      await ds.destroy();
     }
   }
 

diff --git a/web/main/background.ts b/web/main/background.ts
@@ -229,6 +229,7 @@ ipcMain.handle(
   "start-dolt-server",
   async (_, connectionName: string, port: string, init?: boolean) => {
     try {
+      console.log("start-dolt-server", connectionName, port, init);
       doltServerProcess = await startServer(
         mainWindow,
         connectionName,
@@ -277,7 +278,6 @@ ipcMain.handle(
 ipcMain.handle("remove-dolt-connection", async (_, connectionName: string) => {
   try {
     // if doltServerProcess is running, kill it
-    console.log("kill doltServerProcess", doltServerProcess);
     if (doltServerProcess) {
       doltServerProcess.kill("SIGTERM");
       // Wait for process to exit

diff --git a/web/renderer/components/pageComponents/ConnectionsPage/ExistingConnections/Item.tsx b/web/renderer/components/pageComponents/ConnectionsPage/ExistingConnections/Item.tsx
@@ -40,11 +40,11 @@ export default function Item({
           conn.port,
           false,
         );
-        await onAdd();
       } catch (error) {
         setStartDoltServerError(new Error(`${error}`));
       }
     }
+    await onAdd();
   };
 
   return (

diff --git a/...enderer/components/pageComponents/ConnectionsPage/ExistingConnections/useAddConnection.ts b/...enderer/components/pageComponents/ConnectionsPage/ExistingConnections/useAddConnection.ts
@@ -40,7 +40,7 @@ export default function useAddConnection(
 
   return {
     onAdd,
-    err: res.error,
+    err: res.error || doltServerStatus.error,
     loading: res.loading,
     doltServerIsActive: !!doltServerStatus.data?.doltServerStatus.active,
   };

diff --git a/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/About.tsx b/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/About.tsx
@@ -4,73 +4,35 @@ import {
   Checkbox,
   FormInput,
   FormSelect,
-  Tooltip,
   useTabsContext,
 } from "@dolthub/react-components";
-import { useEffect, useState } from "react";
-import { DatabaseConnectionFragment, DatabaseType } from "@gen/graphql-types";
+import { useState } from "react";
+import { DatabaseType } from "@gen/graphql-types";
 import { useConfigContext } from "./context/config";
 import css from "./index.module.css";
-import { ConfigState } from "./context/state";
+import StartDoltServerForm from "./StartDoltServerForm";
 
 const forElectron = process.env.NEXT_PUBLIC_FOR_ELECTRON === "true";
 
 export default function About() {
-  const {
-    state,
-    setState,
-    onSubmit,
-    error: connectErr,
-    setErr: setConnectErr,
-    storedConnections,
-  } = useConfigContext();
+  const { state, setState, error, setErr } = useConfigContext();
 
   const { activeTabIndex, setActiveTabIndex } = useTabsContext();
-  const [err, setErr] = useState<Error | undefined>(undefined);
   const [startDoltServer, setStartDoltServer] = useState(false);
 
   const onNext = () => {
     setActiveTabIndex(activeTabIndex + 1);
   };
 
-  useEffect(() => {
-    if (forElectron) {
-      window.ipc.getDoltServerError(async (msg: string) => {
-        setErr(Error(msg));
-      });
-    }
-  }, []);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    try {
-      const result = await window.ipc.invoke(
-        "start-dolt-server",
-        state.name,
-        state.port,
-        true,
-      );
-
-      if (result !== "success") {
-        setErr(Error(result));
-        throw new Error(result);
-      }
-      await onSubmit(e);
-    } catch (error) {
-      console.log("error", error);
-      setErr(Error(` ${error}`));
-    }
-  };
-
   return (
     <form onSubmit={onNext} className={css.form}>
       {forElectron && (
         <Checkbox
           checked={startDoltServer}
-          onChange={() => {
+          onChange={e => {
             setState({
               useSSL: startDoltServer,
-              port: startDoltServer ? "" : state.port,
+              port: e.target.checked ? "" : state.port,
               isLocalDolt: !startDoltServer,
             });
             setStartDoltServer(!startDoltServer);
@@ -81,122 +43,55 @@ export default function About() {
           className={css.checkbox}
         />
       )}
-      <FormInput
-        value={state.name}
-        onChangeString={n => {
-          setState({ name: n });
-          setErr(undefined);
-        }}
-        label="Name"
-        labelClassName={css.label}
-        placeholder="my-database (required)"
-        light
-      />
-      {!startDoltServer && (
-        <FormSelect
-          outerClassName={css.typeSelect}
-          className={css.typeSelectInner}
-          labelClassName={css.label}
-          label="Type"
-          val={state.type}
-          onChangeValue={t => {
-            if (!t) return;
-            setErr(undefined);
-            setConnectErr(undefined);
-            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
-          light
-        />
-      )}
-      {startDoltServer && (
-        <FormInput
-          label="Port"
-          value={state.port}
-          onChangeString={p => {
-            setState({ port: p });
-            setErr(undefined);
-            setConnectErr(undefined);
-          }}
-          placeholder="Enter port number"
-          light
-          labelClassName={css.label}
-        />
-      )}
-      <ButtonsWithError error={err || connectErr}>
-        {startDoltServer ? (
-          <>
-            <Button
-              type="submit"
-              disabled={
-                getStartLocalDoltServerDisabled(state, storedConnections)
-                  .disabled
-              }
-              className={css.button}
-              onClick={handleSubmit}
-              data-tooltip-content={
-                getStartLocalDoltServerDisabled(state, storedConnections)
-                  .message
-              }
-              data-tooltip-id="add-local-dolt-server"
-            >
-              Start and Connect to Dolt Server
+      {startDoltServer ? (
+        <StartDoltServerForm />
+      ) : (
+        <>
+          <FormInput
+            value={state.name}
+            onChangeString={n => {
+              setState({ name: n });
+              setErr(undefined);
+            }}
+            label="Name"
+            labelClassName={css.label}
+            placeholder="my-database (required)"
+            light
+          />
+
+          <FormSelect
+            outerClassName={css.typeSelect}
+            className={css.typeSelectInner}
+            labelClassName={css.label}
+            label="Type"
+            val={state.type}
+            onChangeValue={t => {
+              if (!t) return;
+              setErr(undefined);
+              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
+            light
+          />
+
+          <ButtonsWithError error={error}>
+            <Button type="submit" disabled={!state.name} className={css.button}>
+              Next
             </Button>
-            <Tooltip
-              id="add-local-dolt-server"
-              className={css.tooltip}
-              place="bottom"
-            />
-          </>
-        ) : (
-          <Button type="submit" disabled={!state.name} className={css.button}>
-            Next
-          </Button>
-        )}
-      </ButtonsWithError>
+          </ButtonsWithError>
+        </>
+      )}
     </form>
   );
 }
-
-type DisabledReturnType = {
-  disabled: boolean;
-  message?: string;
-};
-
-function getStartLocalDoltServerDisabled(
-  state: ConfigState,
-  connections?: DatabaseConnectionFragment[],
-): DisabledReturnType {
-  const disabled =
-    !state.name ||
-    !state.port ||
-    !!connections?.some(connection => connection.isLocalDolt);
-  if (!disabled) {
-    return { disabled };
-  }
-  if (!state.name) {
-    return { disabled, message: "Connection name is required." };
-  }
-  if (!state.port) {
-    return { disabled, message: "Port is required." };
-  }
-  if (connections?.some(connection => connection.isLocalDolt)) {
-    return {
-      disabled,
-      message:
-        "Already have one internal dolt server instance, remove it before adding a new one.",
-    };
-  }
-  return { disabled };
-}
diff --git a/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/ConnectionTabs.tsx b/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/ConnectionTabs.tsx
@@ -16,17 +16,23 @@ import { useConfigContext } from "./context/config";
 import { ConfigState } from "./context/state";
 
 export default function ConnectionTabs() {
-  const { setErr } = useConfigContext();
+  const { setErr, state } = useConfigContext();
   const clearErr = () => setErr(undefined);
 
   return (
     <Tabs initialActiveIndex={0} afterSetTabIndex={clearErr}>
       <TabList className={css.tabList}>
-        {["About", "Connection", "Advanced"].map((tab, i) => (
-          <CustomTab key={tab} index={i}>
-            {tab}
-          </CustomTab>
-        ))}
+        {state.isLocalDolt
+          ? [
+              <CustomTab key="About" index={0}>
+                About
+              </CustomTab>,
+            ]
+          : ["About", "Connection", "Advanced"].map((tab, i) => (
+              <CustomTab key={tab} index={i}>
+                {tab}
+              </CustomTab>
+            ))}
       </TabList>
       <CustomTabPanel index={0}>
         <About />