From 5f1570049ccf734ece0d4ac49ffbc87c5918f5b3 Mon Sep 17 00:00:00 2001
From: LiuLiu <liuliu.developer@gmail.com>
Date: Wed, 4 Dec 2024 16:52:01 -0800
Subject: [PATCH] modal

---
 .../ForRemotes/RemotesPage/Modal.tsx          | 61 -------------------
 .../ForRemotes/RemotesPage/PullFromModal.tsx  | 55 ++++++++++++-----
 .../RemotesPage/PushToRemoteModal.tsx         | 54 ++++++++++++----
 .../ForRemotes/RemotesPage/index.module.css   |  4 ++
 4 files changed, 86 insertions(+), 88 deletions(-)
 delete mode 100644 web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/Modal.tsx

diff --git a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/Modal.tsx b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/Modal.tsx
deleted file mode 100644
index 5a4c7e4c..00000000
--- a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/Modal.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import {
-  Button,
-  FormInput,
-  ModalButtons,
-  ModalInner,
-} from "@dolthub/react-components";
-import { initialUppercase } from "@dolthub/web-utils";
-import useRole from "@hooks/useRole";
-import { ApolloErrorType } from "@lib/errors/types";
-import { SyntheticEvent } from "react";
-
-type Props = {
-  onClose: () => void;
-  branchName: string;
-  setBranchName: (d: string) => void;
-  onSubmit: (e: SyntheticEvent) => void;
-  err?: ApolloErrorType;
-  label: "pull from remote" | "push to remote";
-};
-
-export default function PullOrPushRemoteModal(props: Props) {
-  const { userHasWritePerms, writesEnabled } = useRole();
-  if (!userHasWritePerms) {
-    return (
-      <div>
-        <ModalInner>
-          <p>You must have write permissions to {props.label}.</p>
-        </ModalInner>
-        <ModalButtons onRequestClose={props.onClose} />
-      </div>
-    );
-  }
-  if (!writesEnabled) {
-    return (
-      <div>
-        <ModalInner>
-          <p>You must enable writes to {props.label}.</p>
-        </ModalInner>
-        <ModalButtons onRequestClose={props.onClose} />
-      </div>
-    );
-  }
-  return (
-    <form onSubmit={props.onSubmit}>
-      <ModalInner>
-        <FormInput
-          value={props.branchName}
-          label={`${initialUppercase(props.label)}`}
-          onChangeString={props.setBranchName}
-          placeholder="Enter remote branch name"
-          light
-        />
-      </ModalInner>
-      <ModalButtons err={props.err} onRequestClose={props.onClose}>
-        <Button type="submit" disabled={!props.branchName.length}>
-          Start
-        </Button>
-      </ModalButtons>
-    </form>
-  );
-}
diff --git a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/PullFromModal.tsx b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/PullFromModal.tsx
index f07ea8b1..cb95a2f7 100644
--- a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/PullFromModal.tsx
+++ b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/PullFromModal.tsx
@@ -1,9 +1,18 @@
 import { RemoteFragment, usePullFromRemoteMutation } from "@gen/graphql-types";
-import { ModalOuter } from "@dolthub/react-components";
+import {
+  Button,
+  FormInput,
+  ModalButtons,
+  ModalInner,
+  ModalOuter,
+} from "@dolthub/react-components";
 import { SyntheticEvent, useState } from "react";
 import useMutation from "@hooks/useMutation";
 import { DatabaseParams } from "@lib/params";
-import PullOrPushRemoteModal from "./Modal";
+import Link from "@components/links/Link";
+import { database } from "@lib/urls";
+import router from "next/router";
+import css from "./index.module.css";
 
 type Props = {
   isOpen: boolean;
@@ -19,13 +28,13 @@ export default function PullFromModal({
   params,
 }: Props) {
   const [branchName, setBranchName] = useState("");
-  const { mutateFn: pull, ...pullRes } = useMutation({
+  const { mutateFn: pull, ...res } = useMutation({
     hook: usePullFromRemoteMutation,
   });
 
   const onClose = () => {
     setIsOpen(false);
-    pullRes.setErr(undefined);
+    res.setErr(undefined);
     setBranchName("");
   };
 
@@ -38,23 +47,41 @@ export default function PullFromModal({
         branchName,
       },
     });
-    // if (!success) return;
+    if (!success) return;
+    const { href, as } = database(params);
+    router.push(href, as).catch(console.error);
   };
 
   return (
     <ModalOuter
       isOpen={isOpen}
       onRequestClose={onClose}
-      title="Create new database"
+      title="Pull from remote"
     >
-      <PullOrPushRemoteModal
-        onClose={onClose}
-        onSubmit={onSubmit}
-        branchName={branchName}
-        setBranchName={setBranchName}
-        err={pullRes.err}
-        label="pull from remote"
-      />
+      <form onSubmit={onSubmit}>
+        <ModalInner>
+          <p>
+            Fetch from remote <span className={css.bold}>{remote.name}</span> (
+            {remote.url}) and merge into current branch main. To learn more
+            about pull from a remote, see our{" "}
+            <Link href="https://docs.dolthub.com/cli-reference/cli#dolt-pull">
+              documentation
+            </Link>
+          </p>
+          <FormInput
+            value={branchName}
+            label="Remote branch name"
+            onChangeString={setBranchName}
+            placeholder="Enter remote branch name"
+            light
+          />
+        </ModalInner>
+        <ModalButtons err={res.err} onRequestClose={onClose}>
+          <Button type="submit" disabled={!branchName.length}>
+            Start pulling
+          </Button>
+        </ModalButtons>
+      </form>
     </ModalOuter>
   );
 }
diff --git a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/PushToRemoteModal.tsx b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/PushToRemoteModal.tsx
index 30a0806b..0138ea51 100644
--- a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/PushToRemoteModal.tsx
+++ b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/PushToRemoteModal.tsx
@@ -1,9 +1,18 @@
 import { RemoteFragment, usePushToRemoteMutation } from "@gen/graphql-types";
-import { ModalOuter } from "@dolthub/react-components";
+import {
+  Button,
+  FormInput,
+  ModalButtons,
+  ModalInner,
+  ModalOuter,
+} from "@dolthub/react-components";
 import { SyntheticEvent, useState } from "react";
 import useMutation from "@hooks/useMutation";
 import { DatabaseParams } from "@lib/params";
-import PullOrPushRemoteModal from "./Modal";
+import Link from "@components/links/Link";
+import { database } from "@lib/urls";
+import { useRouter } from "next/router";
+import css from "./index.module.css";
 
 type Props = {
   isOpen: boolean;
@@ -19,13 +28,14 @@ export default function PushToRemoteModal({
   params,
 }: Props) {
   const [branchName, setBranchName] = useState("");
-  const { mutateFn: push, ...pullRes } = useMutation({
+  const { mutateFn: push, ...res } = useMutation({
     hook: usePushToRemoteMutation,
   });
+  const router = useRouter();
 
   const onClose = () => {
     setIsOpen(false);
-    pullRes.setErr(undefined);
+    res.setErr(undefined);
     setBranchName("");
   };
 
@@ -38,7 +48,9 @@ export default function PushToRemoteModal({
         branchName,
       },
     });
-    // if (!success) return;
+    if (!success) return;
+    const { href, as } = database(params);
+    router.push(href, as).catch(console.error);
   };
 
   return (
@@ -47,14 +59,30 @@ export default function PushToRemoteModal({
       onRequestClose={onClose}
       title="Create new database"
     >
-      <PullOrPushRemoteModal
-        onClose={onClose}
-        onSubmit={onSubmit}
-        branchName={branchName}
-        setBranchName={setBranchName}
-        err={pullRes.err}
-        label="pull from remote"
-      />
+      <form onSubmit={onSubmit}>
+        <ModalInner>
+          <p>
+            Update remote <span className={css.bold}>{remote.name}</span> (
+            {remote.url}) with current branch main. To learn more about push to
+            a remote, see our{" "}
+            <Link href="https://docs.dolthub.com/cli-reference/cli#dolt-push">
+              documentation
+            </Link>
+          </p>
+          <FormInput
+            value={branchName}
+            label="Remote branch name"
+            onChangeString={setBranchName}
+            placeholder="Enter remote branch name"
+            light
+          />
+        </ModalInner>
+        <ModalButtons err={res.err} onRequestClose={onClose}>
+          <Button type="submit" disabled={!branchName.length}>
+            Start pushing
+          </Button>
+        </ModalButtons>
+      </form>
     </ModalOuter>
   );
 }
diff --git a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/index.module.css b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/index.module.css
index 331ed9ba..00eb3546 100644
--- a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/index.module.css
+++ b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/index.module.css
@@ -53,3 +53,7 @@
 .trashIcon {
   @apply text-red-300;
 }
+
+.bold {
+  @apply font-semibold;
+}