web: Docker instructions

dolthub · Nov 28, 2023 · 0c20bb9 · 0c20bb9
1 parent 6a12b3f
commit 0c20bb9
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 9 deletions.
diff --git a/web/components/Navbar/index.tsx b/web/components/Navbar/index.tsx
@@ -1,6 +1,7 @@
 import DocsLink from "@components/links/DocsLink";
 import ExternalLink from "@components/links/ExternalLink";
 import Link from "@components/links/Link";
+import { dockerHubRepo, workbenchGithubRepo } from "@lib/constants";
 import { FaDocker } from "@react-icons/all-files/fa/FaDocker";
 import { FaGithub } from "@react-icons/all-files/fa/FaGithub";
 import css from "./index.module.css";
@@ -24,16 +25,10 @@ export default function Navbar() {
 
         <div className={css.right}>
           <div className={css.hubLinks}>
-            <ExternalLink
-              href="https://github.com/dolthub/dolt-workbench"
-              className={css.link}
-            >
+            <ExternalLink href={workbenchGithubRepo} className={css.link}>
               <FaGithub /> GitHub
             </ExternalLink>
-            <ExternalLink
-              href="https://hub.docker.com/r/dolthub/dolt-workbench"
-              className={css.link}
-            >
+            <ExternalLink href={dockerHubRepo} className={css.link}>
               <FaDocker /> Docker Hub
             </ExternalLink>
           </div>

diff --git a/web/components/pageComponents/ConnectionsPage/NewConnection/index.module.css b/web/components/pageComponents/ConnectionsPage/NewConnection/index.module.css
@@ -2,7 +2,7 @@
   @apply w-full max-w-xl;
 
   h3 {
-    @apply mb-8;
+    @apply mb-4;
   }
 }
 
@@ -33,3 +33,7 @@
 .checkbox {
   @apply mt-7 mb-10 text-sm;
 }
+
+.instructions {
+  @apply mb-8;
+}
diff --git a/web/components/pageComponents/ConnectionsPage/NewConnection/index.tsx b/web/components/pageComponents/ConnectionsPage/NewConnection/index.tsx
@@ -3,6 +3,8 @@ import ButtonsWithError from "@components/ButtonsWithError";
 import CustomCheckbox from "@components/CustomCheckbox";
 import FormInput from "@components/FormInput";
 import Loader from "@components/Loader";
+import ExternalLink from "@components/links/ExternalLink";
+import { dockerHubRepo } from "@lib/constants";
 import { FaCaretDown } from "@react-icons/all-files/fa/FaCaretDown";
 import { FaCaretUp } from "@react-icons/all-files/fa/FaCaretUp";
 import cx from "classnames";
@@ -38,6 +40,10 @@ export default function NewConnection(props: Props) {
         <form onSubmit={onSubmit}>
           <div className={css.section}>
             <h3>Set up new connection</h3>
+            <p className={css.instructions}>
+              View instructions for connecting to local and Docker installed
+              databases <ExternalLink href={dockerHubRepo}>here</ExternalLink>.
+            </p>
             <div className={css.nameInput}>
               <FormInput
                 value={state.name}

diff --git a/web/lib/constants.ts b/web/lib/constants.ts
@@ -1,3 +1,5 @@
 export const discordLink = "https://discord.gg/gqr7K4VNKe";
 export const docsLink = "https://docs.dolthub.com";
 export const doltGithubRepo = "https://github.com/dolthub/dolt";
+export const workbenchGithubRepo = "https://github.com/dolthub/dolt-workbench";
+export const dockerHubRepo = "https://hub.docker.com/r/dolthub/dolt-workbench";