with cancel

dolthub · Jan 10, 2025 · dff3c25 · dff3c25
1 parent 911e374
commit dff3c25
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 25 deletions.
diff --git a/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/About.tsx b/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/About.tsx
@@ -1,20 +1,28 @@
 import {
   Button,
+  ButtonsWithError,
   FormInput,
   FormSelect,
   useTabsContext,
 } from "@dolthub/react-components";
 import { DatabaseType } from "@gen/graphql-types";
-import css from "./index.module.css";
+import { useRouter } from "next/router";
+import { connections } from "@lib/urls";
 import { useConfigContext } from "./context/config";
+import css from "./index.module.css";
 
 export default function About() {
   const { state, setState } = useConfigContext();
   const { activeTabIndex, setActiveTabIndex } = useTabsContext();
+  const router = useRouter();
 
   const onNext = () => {
     setActiveTabIndex(activeTabIndex + 1);
   };
+  const onCancel = () => {
+    const { href, as } = connections;
+    router.push(href, as).catch(console.error);
+  };
 
   return (
     <form onSubmit={onNext} className={css.form}>
@@ -50,9 +58,11 @@ export default function About() {
         hideSelectedOptions
         light
       />
-      <Button type="submit" disabled={!state.name} className={css.button}>
-        Next
-      </Button>
+      <ButtonsWithError onCancel={onCancel} className={css.buttons}>
+        <Button type="submit" disabled={!state.name} className={css.button}>
+          Next
+        </Button>
+      </ButtonsWithError>
     </form>
   );
 }
diff --git a/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/Advanced.tsx b/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/Advanced.tsx
@@ -1,11 +1,24 @@
-import { Button, Checkbox, ErrorMsg, Tooltip } from "@dolthub/react-components";
+import {
+  Button,
+  ButtonsWithError,
+  Checkbox,
+  Tooltip,
+} from "@dolthub/react-components";
+import { connections } from "@lib/urls";
+import { useRouter } from "next/router";
 import css from "./index.module.css";
 import { useConfigContext } from "./context/config";
 import { getCanSubmit } from "./context/utils";
 
 export default function Advanced() {
   const { state, setState, error, onSubmit } = useConfigContext();
   const { canSubmit, message } = getCanSubmit(state);
+  const router = useRouter();
+
+  const onCancel = () => {
+    const { href, as } = connections;
+    router.push(href, as).catch(console.error);
+  };
 
   return (
     <form onSubmit={onSubmit} className={css.form}>
@@ -25,18 +38,23 @@ export default function Advanced() {
         description="Hides Dolt features like branches, logs, and commits for non-Dolt databases. Will otherwise be disabled."
         className={css.checkbox}
       />
-      <Button
-        type="submit"
-        disabled={!canSubmit}
-        className={css.button}
-        data-tooltip-id="submit-message"
-        data-tooltip-content={message}
-        data-tooltip-hidden={canSubmit}
+      <ButtonsWithError
+        onCancel={onCancel}
+        className={css.buttons}
+        error={error}
       >
-        Launch Workbench
-      </Button>
-      <Tooltip id="submit-message" />
-      <ErrorMsg err={error} />
+        <Button
+          type="submit"
+          disabled={!canSubmit}
+          className={css.button}
+          data-tooltip-id="submit-message"
+          data-tooltip-content={message}
+          data-tooltip-hidden={canSubmit}
+        >
+          Launch Workbench
+        </Button>
+        <Tooltip id="submit-message" />
+      </ButtonsWithError>
     </form>
   );
 }
diff --git a/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/Connection.tsx b/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/Connection.tsx
@@ -1,18 +1,29 @@
-import { Button, FormInput, useTabsContext } from "@dolthub/react-components";
+import {
+  Button,
+  ButtonsWithError,
+  FormInput,
+  useTabsContext,
+} from "@dolthub/react-components";
 import { DatabaseType } from "@gen/graphql-types";
 import { SyntheticEvent } from "react";
+import { useRouter } from "next/router";
+import { connections } from "@lib/urls";
 import css from "./index.module.css";
 import { useConfigContext } from "./context/config";
 
 export default function Connection() {
   const { state, setState } = useConfigContext();
   const { activeTabIndex, setActiveTabIndex } = useTabsContext();
+  const router = useRouter();
 
   const onNext = (e: SyntheticEvent) => {
     e.preventDefault();
     setActiveTabIndex(activeTabIndex + 1);
   };
-
+  const onCancel = () => {
+    const { href, as } = connections;
+    router.push(href, as).catch(console.error);
+  };
   return (
     <form onSubmit={onNext} className={css.form}>
       <FormInput
@@ -73,13 +84,15 @@ export default function Connection() {
         light
         labelClassName={css.label}
       />
-      <Button
-        type="submit"
-        disabled={!state.connectionUrl || (!state.host && !state.port)}
-        className={css.button}
-      >
-        Next
-      </Button>
+      <ButtonsWithError onCancel={onCancel} className={css.buttons}>
+        <Button
+          type="submit"
+          disabled={!state.connectionUrl || (!state.host && !state.port)}
+          className={css.button}
+        >
+          Next
+        </Button>
+      </ButtonsWithError>
     </form>
   );
 }
diff --git a/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/index.module.css b/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/index.module.css
@@ -118,3 +118,10 @@
     @apply bg-coral-400;
   }
 }
+
+.buttons button:last-child {
+  @apply text-[#FF8964];
+  &:hover {
+    @apply text-coral-400;
+  }
+}