From c247421f51d6a4b23c0dcc76e76209d59d9f1fbc Mon Sep 17 00:00:00 2001
From: LiuLiu <liuliu.developer@gmail.com>
Date: Tue, 17 Dec 2024 14:03:15 -0800
Subject: [PATCH 1/4] radios

---
 .../AddRemotePage/AddRemoteForm.tsx           | 38 ++++++-------
 .../ForRemotes/AddRemotePage/Radios.tsx       | 31 ++++++++++
 .../ForRemotes/AddRemotePage/RemoteUrl.tsx    | 56 +++++++++++++++++++
 .../ForRemotes/AddRemotePage/index.module.css |  8 +++
 4 files changed, 111 insertions(+), 22 deletions(-)
 create mode 100644 web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/Radios.tsx
 create mode 100644 web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/RemoteUrl.tsx

diff --git a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/AddRemoteForm.tsx b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/AddRemoteForm.tsx
index 7eaddec7..b8828866 100644
--- a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/AddRemoteForm.tsx
+++ b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/AddRemoteForm.tsx
@@ -21,6 +21,8 @@ import { getDatabaseType } from "@components/DatabaseTypeLabel";
 import DoltLink from "@components/links/DoltLink";
 import DoltgresLink from "@components/links/DoltgresLink";
 import css from "./index.module.css";
+import Radios, { RemoteType } from "./Radios";
+import RemoteUrl from "./RemoteUrl";
 
 type Props = {
   params: DatabaseParams;
@@ -30,9 +32,7 @@ export default function AddRemoteForm(props: Props): JSX.Element {
   const router = useRouter();
   const { data: databaseDetails, loading: databaseDetailsLoading } =
     useDoltDatabaseDetailsQuery();
-  const { dbLink, urlPlaceHolder } = getDbNameAndLink(
-    databaseDetails?.doltDatabaseDetails,
-  );
+  const dbLink = getDbNameAndLink(databaseDetails?.doltDatabaseDetails);
   const [remoteName, setRemoteName] = useState("");
   const [remoteUrl, setRemoteUrl] = useState("");
   const {
@@ -62,6 +62,8 @@ export default function AddRemoteForm(props: Props): JSX.Element {
     router.push(href, as).catch(console.error);
   };
 
+  const [type, setType] = useState(RemoteType.DoltHub);
+
   return (
     <div>
       <form onSubmit={onSubmit}>
@@ -73,12 +75,13 @@ export default function AddRemoteForm(props: Props): JSX.Element {
             placeholder="i.e. origin"
             className={css.input}
           />
-          <FormInput
-            value={remoteUrl}
-            onChangeString={setRemoteUrl}
-            label="Add remote url"
-            placeholder={urlPlaceHolder}
-            className={css.input}
+          <span className={css.label}>Remote type</span>
+          <Radios type={type} setType={setType} />
+          <RemoteUrl
+            type={type}
+            remoteUrl={remoteUrl}
+            setRemoteUrl={setRemoteUrl}
+            currentDbName={props.params.databaseName}
           />
           <ButtonsWithError
             onCancel={goToRemotesPage}
@@ -105,25 +108,16 @@ export default function AddRemoteForm(props: Props): JSX.Element {
   );
 }
 
-type ReturnType = {
-  dbLink: JSX.Element;
-  urlPlaceHolder: string;
-};
-
-function getDbNameAndLink(dbDetails?: DoltDatabaseDetails): ReturnType {
+function getDbNameAndLink(dbDetails?: DoltDatabaseDetails): JSX.Element {
   const type = getDatabaseType(
     dbDetails?.type ?? undefined,
     !!dbDetails?.isDolt,
   );
-  const universalUrl = "i.e. https://url-of-remote.com";
   if (type === "Dolt") {
-    return {
-      dbLink: <DoltLink />,
-      urlPlaceHolder: "i.e. https://doltremoteapi.dolthub.com/owner/repo",
-    };
+    return <DoltLink />;
   }
   if (type === "DoltgreSQL") {
-    return { dbLink: <DoltgresLink />, urlPlaceHolder: universalUrl };
+    return <DoltgresLink />;
   }
-  return { dbLink: <span>{type}</span>, urlPlaceHolder: universalUrl };
+  return <span>{type}</span>;
 }
diff --git a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/Radios.tsx b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/Radios.tsx
new file mode 100644
index 00000000..bbebda2b
--- /dev/null
+++ b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/Radios.tsx
@@ -0,0 +1,31 @@
+import { Radio } from "@dolthub/react-components";
+import css from "./index.module.css";
+
+export enum RemoteType {
+  DoltHub,
+  Other,
+}
+
+type Props = {
+  type: RemoteType;
+  setType: (t: RemoteType) => void;
+};
+
+export default function Radios(props: Props) {
+  return (
+    <div className={css.radios}>
+      <Radio
+        name="DoltHub"
+        checked={props.type === RemoteType.DoltHub}
+        onChange={() => props.setType(RemoteType.DoltHub)}
+        label="DoltHub"
+      />
+      <Radio
+        name="Other"
+        checked={props.type === RemoteType.Other}
+        onChange={() => props.setType(RemoteType.Other)}
+        label="Other"
+      />
+    </div>
+  );
+}
diff --git a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/RemoteUrl.tsx b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/RemoteUrl.tsx
new file mode 100644
index 00000000..64327a23
--- /dev/null
+++ b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/RemoteUrl.tsx
@@ -0,0 +1,56 @@
+import { FormInput } from "@dolthub/react-components";
+import { RemoteType } from "./Radios";
+import css from "./index.module.css";
+import { useState } from "react";
+
+type Props = {
+  type: RemoteType;
+  remoteUrl: string;
+  setRemoteUrl: (t: string) => void;
+  currentDbName: string;
+};
+
+export default function RemoteUrl({
+  type,
+  remoteUrl,
+  setRemoteUrl,
+  currentDbName,
+}: Props) {
+  const [ownerName, setOwnerName] = useState("");
+  const [dbName, setDbName] = useState(currentDbName);
+  if (type === RemoteType.Other) {
+    return (
+      <FormInput
+        value={remoteUrl}
+        onChangeString={setRemoteUrl}
+        label="Add remote url"
+        placeholder="i.e. https://url-of-remote.com"
+        className={css.input}
+      />
+    );
+  }
+  return (
+    <div>
+      <FormInput
+        value={ownerName}
+        onChangeString={(s: string) => {
+          setOwnerName(s);
+          setRemoteUrl(`https://doltremoteapi.dolthub.com/${s}/${dbName}`);
+        }}
+        label="Owner Name"
+        placeholder="i.e. dolthub"
+        className={css.input}
+      />
+      <FormInput
+        value={dbName}
+        onChangeString={(s: string) => {
+          setDbName(s);
+          setRemoteUrl(`https://doltremoteapi.dolthub.com/${ownerName}/${s}`);
+        }}
+        label="Database Name"
+        placeholder="i.e. example-db"
+        className={css.input}
+      />
+    </div>
+  );
+}
diff --git a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/index.module.css b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/index.module.css
index df39b339..0f7db138 100644
--- a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/index.module.css
+++ b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/index.module.css
@@ -6,6 +6,10 @@
   @apply max-w-2xl mx-auto;
 }
 
+.label {
+  @apply text-base font-semibold py-2;
+}
+
 .input {
   @apply mt-4 px-0;
   input {
@@ -20,3 +24,7 @@
 .text {
   @apply text-sm text-stone-500 mb-5 max-w-xl mt-4;
 }
+
+.radios {
+  @apply flex justify-between w-72 mt-2;
+}

From 21d5379c400cfc003801a469038fefe5a00a5fc5 Mon Sep 17 00:00:00 2001
From: LiuLiu <liuliu.developer@gmail.com>
Date: Tue, 17 Dec 2024 14:20:45 -0800
Subject: [PATCH 2/4] lint

---
 .../DatabasePage/ForRemotes/AddRemotePage/RemoteUrl.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/RemoteUrl.tsx b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/RemoteUrl.tsx
index 64327a23..e62e8175 100644
--- a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/RemoteUrl.tsx
+++ b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/RemoteUrl.tsx
@@ -1,7 +1,7 @@
 import { FormInput } from "@dolthub/react-components";
+import { useState } from "react";
 import { RemoteType } from "./Radios";
 import css from "./index.module.css";
-import { useState } from "react";
 
 type Props = {
   type: RemoteType;

From 26b006e561cfb2af10d084c7394c0bca1b3544ae Mon Sep 17 00:00:00 2001
From: LiuLiu <liuliu.developer@gmail.com>
Date: Wed, 18 Dec 2024 12:57:10 -0800
Subject: [PATCH 3/4] doltlab radio, host

---
 .../AddRemotePage/AddRemoteForm.tsx           |  7 ++---
 .../ForRemotes/AddRemotePage/Radios.tsx       |  7 +++++
 .../ForRemotes/AddRemotePage/RemoteUrl.tsx    | 28 ++++++++++++++++---
 3 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/AddRemoteForm.tsx b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/AddRemoteForm.tsx
index b8828866..c9125eb1 100644
--- a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/AddRemoteForm.tsx
+++ b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/AddRemoteForm.tsx
@@ -32,9 +32,10 @@ export default function AddRemoteForm(props: Props): JSX.Element {
   const router = useRouter();
   const { data: databaseDetails, loading: databaseDetailsLoading } =
     useDoltDatabaseDetailsQuery();
-  const dbLink = getDbNameAndLink(databaseDetails?.doltDatabaseDetails);
+  const dbLink = getDbLink(databaseDetails?.doltDatabaseDetails);
   const [remoteName, setRemoteName] = useState("");
   const [remoteUrl, setRemoteUrl] = useState("");
+  const [type, setType] = useState(RemoteType.DoltHub);
   const {
     mutateFn: addRemote,
     err,
@@ -62,8 +63,6 @@ export default function AddRemoteForm(props: Props): JSX.Element {
     router.push(href, as).catch(console.error);
   };
 
-  const [type, setType] = useState(RemoteType.DoltHub);
-
   return (
     <div>
       <form onSubmit={onSubmit}>
@@ -108,7 +107,7 @@ export default function AddRemoteForm(props: Props): JSX.Element {
   );
 }
 
-function getDbNameAndLink(dbDetails?: DoltDatabaseDetails): JSX.Element {
+function getDbLink(dbDetails?: DoltDatabaseDetails): JSX.Element {
   const type = getDatabaseType(
     dbDetails?.type ?? undefined,
     !!dbDetails?.isDolt,
diff --git a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/Radios.tsx b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/Radios.tsx
index bbebda2b..84d14818 100644
--- a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/Radios.tsx
+++ b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/Radios.tsx
@@ -3,6 +3,7 @@ import css from "./index.module.css";
 
 export enum RemoteType {
   DoltHub,
+  DoltLab,
   Other,
 }
 
@@ -20,6 +21,12 @@ export default function Radios(props: Props) {
         onChange={() => props.setType(RemoteType.DoltHub)}
         label="DoltHub"
       />
+      <Radio
+        name="DoltLab"
+        checked={props.type === RemoteType.DoltLab}
+        onChange={() => props.setType(RemoteType.DoltLab)}
+        label="DoltLab"
+      />
       <Radio
         name="Other"
         checked={props.type === RemoteType.Other}
diff --git a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/RemoteUrl.tsx b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/RemoteUrl.tsx
index e62e8175..295b299e 100644
--- a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/RemoteUrl.tsx
+++ b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/RemoteUrl.tsx
@@ -10,6 +10,8 @@ type Props = {
   currentDbName: string;
 };
 
+const dolthubHost = "https://doltremoteapi.dolthub.com";
+
 export default function RemoteUrl({
   type,
   remoteUrl,
@@ -18,6 +20,7 @@ export default function RemoteUrl({
 }: Props) {
   const [ownerName, setOwnerName] = useState("");
   const [dbName, setDbName] = useState(currentDbName);
+  const [host, setHost] = useState("");
   if (type === RemoteType.Other) {
     return (
       <FormInput
@@ -29,26 +32,43 @@ export default function RemoteUrl({
       />
     );
   }
+
   return (
     <div>
+      {type === RemoteType.DoltLab && (
+        <FormInput
+          value={host}
+          onChangeString={(s: string) => {
+            setHost(s);
+            setRemoteUrl(`${s}/${ownerName}/${dbName}`);
+          }}
+          label="Host"
+          placeholder="Url of your host, i.e. https://doltlab.dolthub.com:50051"
+          className={css.input}
+        />
+      )}
       <FormInput
         value={ownerName}
         onChangeString={(s: string) => {
           setOwnerName(s);
-          setRemoteUrl(`https://doltremoteapi.dolthub.com/${s}/${dbName}`);
+          setRemoteUrl(
+            `${type === RemoteType.DoltHub ? dolthubHost : host}/${s}/${dbName}`,
+          );
         }}
         label="Owner Name"
-        placeholder="i.e. dolthub"
+        placeholder="Owner of your database on DoltHub, i.e. dolthub"
         className={css.input}
       />
       <FormInput
         value={dbName}
         onChangeString={(s: string) => {
           setDbName(s);
-          setRemoteUrl(`https://doltremoteapi.dolthub.com/${ownerName}/${s}`);
+          setRemoteUrl(
+            `${type === RemoteType.DoltHub ? dolthubHost : host}/${ownerName}/${s}`,
+          );
         }}
         label="Database Name"
-        placeholder="i.e. example-db"
+        placeholder="Name of your database on DoltHub, i.e. example-db"
         className={css.input}
       />
     </div>

From e9b7a1a072cf1014fa7ca22e8877da58e7b2f51e Mon Sep 17 00:00:00 2001
From: LiuLiu <liuliu.developer@gmail.com>
Date: Wed, 18 Dec 2024 13:03:17 -0800
Subject: [PATCH 4/4] copy

---
 .../DatabasePage/ForRemotes/AddRemotePage/RemoteUrl.tsx       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/RemoteUrl.tsx b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/RemoteUrl.tsx
index 295b299e..145a2fac 100644
--- a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/RemoteUrl.tsx
+++ b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/RemoteUrl.tsx
@@ -56,7 +56,7 @@ export default function RemoteUrl({
           );
         }}
         label="Owner Name"
-        placeholder="Owner of your database on DoltHub, i.e. dolthub"
+        placeholder="Owner of your database, i.e. dolthub"
         className={css.input}
       />
       <FormInput
@@ -68,7 +68,7 @@ export default function RemoteUrl({
           );
         }}
         label="Database Name"
-        placeholder="Name of your database on DoltHub, i.e. example-db"
+        placeholder="Name of your database, i.e. example-db"
         className={css.input}
       />
     </div>