Merge pull request #329 from dolthub/liuliu/remote-types

Web: UI for different remote types

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,11 +32,10 @@ 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 = getDbLink(databaseDetails?.doltDatabaseDetails);
   const [remoteName, setRemoteName] = useState("");
   const [remoteUrl, setRemoteUrl] = useState("");
+  const [type, setType] = useState(RemoteType.DoltHub);
   const {
     mutateFn: addRemote,
     err,
@@ -73,12 +74,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 +107,16 @@ export default function AddRemoteForm(props: Props): JSX.Element {
   );
 }
 
-type ReturnType = {
-  dbLink: JSX.Element;
-  urlPlaceHolder: string;
-};
-
-function getDbNameAndLink(dbDetails?: DoltDatabaseDetails): ReturnType {
+function getDbLink(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>;
 }

web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/Radios.tsx

@@ -0,0 +1,38 @@
+import { Radio } from "@dolthub/react-components";
+import css from "./index.module.css";
+
+export enum RemoteType {
+  DoltHub,
+  DoltLab,
+  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="DoltLab"
+        checked={props.type === RemoteType.DoltLab}
+        onChange={() => props.setType(RemoteType.DoltLab)}
+        label="DoltLab"
+      />
+      <Radio
+        name="Other"
+        checked={props.type === RemoteType.Other}
+        onChange={() => props.setType(RemoteType.Other)}
+        label="Other"
+      />
+    </div>
+  );
+}

web/renderer/components/pageComponents/DatabasePage/ForRemotes/AddRemotePage/RemoteUrl.tsx

@@ -0,0 +1,76 @@
+import { FormInput } from "@dolthub/react-components";
+import { useState } from "react";
+import { RemoteType } from "./Radios";
+import css from "./index.module.css";
+
+type Props = {
+  type: RemoteType;
+  remoteUrl: string;
+  setRemoteUrl: (t: string) => void;
+  currentDbName: string;
+};
+
+const dolthubHost = "https://doltremoteapi.dolthub.com";
+
+export default function RemoteUrl({
+  type,
+  remoteUrl,
+  setRemoteUrl,
+  currentDbName,
+}: Props) {
+  const [ownerName, setOwnerName] = useState("");
+  const [dbName, setDbName] = useState(currentDbName);
+  const [host, setHost] = useState("");
+  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>
+      {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(
+            `${type === RemoteType.DoltHub ? dolthubHost : host}/${s}/${dbName}`,
+          );
+        }}
+        label="Owner Name"
+        placeholder="Owner of your database, i.e. dolthub"
+        className={css.input}
+      />
+      <FormInput
+        value={dbName}
+        onChangeString={(s: string) => {
+          setDbName(s);
+          setRemoteUrl(
+            `${type === RemoteType.DoltHub ? dolthubHost : host}/${ownerName}/${s}`,
+          );
+        }}
+        label="Database Name"
+        placeholder="Name of your database, i.e. example-db"
+        className={css.input}
+      />
+    </div>
+  );
+}

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;
+}