database type

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

@@ -5,14 +5,18 @@ import {
   Loader,
 } from "@dolthub/react-components";
 import { useReactiveWidth } from "@dolthub/react-hooks";
-import { useAddRemoteMutation } from "@gen/graphql-types";
+import {
+  useAddRemoteMutation,
+  useDoltDatabaseDetailsQuery,
+} from "@gen/graphql-types";
 import useMutation from "@hooks/useMutation";
 import { DatabaseParams } from "@lib/params";
 import { refetchRemoteQueries } from "@lib/refetchQueries";
 import { remotes } from "@lib/urls";
 import { useRouter } from "next/router";
 import { SyntheticEvent, useState } from "react";
 import Link from "@components/links/Link";
+import { getDatabaseType } from "@components/DatabaseTypeLabel";
 import css from "./index.module.css";
 
 type Props = {
@@ -21,6 +25,12 @@ type Props = {
 
 export default function AddRemoteForm(props: Props): JSX.Element {
   const router = useRouter();
+  const { data: databaseDetails, loading: databaseDetailsLoading } =
+    useDoltDatabaseDetailsQuery();
+  const type = getDatabaseType(
+    databaseDetails?.doltDatabaseDetails.type ?? undefined,
+    !!databaseDetails?.doltDatabaseDetails.isDolt,
+  );
   const [remoteName, setRemoteName] = useState("");
   const [remoteUrl, setRemoteUrl] = useState("");
   const {
@@ -79,15 +89,15 @@ export default function AddRemoteForm(props: Props): JSX.Element {
             </Button>
           </ButtonsWithError>
           <p className={css.text}>
-            A remote is a [Dolt|Doltgres] database in another location, usually
-            on a different, network accessible host. To learn more about
-            configuring a remote for your database, see our{" "}
+            A remote is a {type} database in another location, usually on a
+            different, network accessible host. To learn more about configuring
+            a remote for your database, see our{" "}
             <Link href="https://docs.dolthub.com/concepts/dolt/git/remotes">
               documentation
             </Link>
           </p>
         </div>
-        <Loader loaded={!loading} />
+        <Loader loaded={!loading && !databaseDetailsLoading} />
       </form>
     </div>
   );