Merge pull request #350 from dolthub/liuliu/reorganize-connections-pages

Web: connections and connection configuration page redesign
dolthub · Jan 24, 2025 · 730a223 · 730a223
2 parents 08a2bbb + 3af7806
commit 730a223
Show file tree

Hide file tree

Showing 35 changed files with 999 additions and 496 deletions.
diff --git a/web/package.json b/web/package.json
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@apollo/client": "^3.9.9",
-    "@dolthub/react-components": "^0.2.6",
+    "@dolthub/react-components": "^0.2.8",
     "@dolthub/react-contexts": "^0.1.0",
     "@dolthub/react-hooks": "^0.1.7",
     "@dolthub/web-utils": "^0.1.8",

diff --git a/web/renderer/components/ConnectionsAndDatabases/Popup.tsx b/web/renderer/components/ConnectionsAndDatabases/Popup.tsx
@@ -4,6 +4,8 @@ import cx from "classnames";
 import Link from "@components/links/Link";
 import { ErrorMsg, SmallLoader } from "@dolthub/react-components";
 import CreateDatabase from "@components/CreateDatabase";
+import { AiOutlinePlusCircle } from "@react-icons/all-files/ai/AiOutlinePlusCircle";
+import { connections, newConnection } from "@lib/urls";
 import { FiTool } from "@react-icons/all-files/fi/FiTool";
 import { StateType } from "./useSelectedConnection";
 import DatabaseItem from "./DatabaseItem";
@@ -30,9 +32,14 @@ export default function Popup({
       <div className={css.top}>
         <div className={cx(css.header, css.left)}>
           <span>CONNECTIONS</span>
-          <Link href="/connections">
-            <FiTool className={css.wrench} />
-          </Link>
+          <div className={css.icons}>
+            <Link {...connections}>
+              <FiTool className={css.wrench} />
+            </Link>
+            <Link {...newConnection}>
+              <AiOutlinePlusCircle className={css.plus} />
+            </Link>
+          </div>
         </div>
         <div className={cx(css.header, css.right)}>
           <span>DATABASES</span>

diff --git a/web/renderer/components/ConnectionsAndDatabases/index.module.css b/web/renderer/components/ConnectionsAndDatabases/index.module.css
@@ -54,8 +54,16 @@
   @apply border-none rounded-bl;
 }
 
+.icons {
+  @apply flex;
+}
+
 .wrench {
-  @apply w-4 h-4 border border-sky-400 rounded-full p-[0.1rem] -rotate-90;
+  @apply w-5 h-5 border border-sky-400 rounded-full p-[0.1rem] -rotate-90;
+}
+
+.top .plus {
+  @apply ml-2 w-[21px] h-[21px];
 }
 
 .connectionTop {

diff --git a/web/renderer/components/ConnectionsAndDatabases/index.tsx b/web/renderer/components/ConnectionsAndDatabases/index.tsx
@@ -9,6 +9,7 @@ import {
 import Link from "@components/links/Link";
 import { FiDatabase } from "@react-icons/all-files/fi/FiDatabase";
 import { excerpt } from "@dolthub/web-utils";
+import { connections } from "@lib/urls";
 import cx from "classnames";
 import useSelectedConnection from "./useSelectedConnection";
 import Popup from "./Popup";
@@ -84,7 +85,7 @@ export default function ConnectionsAndDatabases(props: Props) {
         data.currentConnection ? (
           <Inner {...props} connection={data.currentConnection} />
         ) : (
-          <Link href="/connections" className={css.connectionError}>
+          <Link {...connections} className={css.connectionError}>
             Connections
           </Link>
         )

diff --git a/web/renderer/components/CreateDatabase/index.tsx b/web/renderer/components/CreateDatabase/index.tsx
@@ -8,7 +8,6 @@ import {
 import useMutation from "@hooks/useMutation";
 import { database } from "@lib/urls";
 import { AiOutlinePlusCircle } from "@react-icons/all-files/ai/AiOutlinePlusCircle";
-import { AiOutlinePlus } from "@react-icons/all-files/ai/AiOutlinePlus";
 import cx from "classnames";
 import { useRouter } from "next/router";
 import { SyntheticEvent, useState } from "react";
@@ -56,8 +55,11 @@ export default function CreateDatabase(props: Props) {
         onClick={() => setIsOpen(true)}
         className={cx(css.createDB, props.buttonClassName)}
       >
-        {props.showText ? <AiOutlinePlus /> : <AiOutlinePlusCircle />}
-        {props.showText && <span className={css.text}>Create database</span>}
+        {props.showText ? (
+          <span className={css.text}>Create Database</span>
+        ) : (
+          <AiOutlinePlusCircle />
+        )}
       </Button.Link>
       <ModalOuter
         isOpen={isOpen}

diff --git a/web/renderer/components/FormSelectForRefs/DoltDisabledSelector.tsx b/web/renderer/components/FormSelectForRefs/DoltDisabledSelector.tsx
@@ -11,7 +11,7 @@ type Props = {
 export default function DoltDisabledSelector(props: Props) {
   return (
     <div className={css.disabledWrapper}>
-      {props.showLabel && <span className={css.label}>Branch</span>}
+      {props.showLabel && <span className={css.label}>Branch:</span>}
       <div
         className={cx(css.doltDisabled, css.branchAndTagSelect)}
         data-tooltip-content="Use Dolt to enable branches"

diff --git a/web/renderer/components/FormSelectForRefs/index.module.css b/web/renderer/components/FormSelectForRefs/index.module.css
@@ -19,11 +19,11 @@
 }
 
 .label {
-  @apply inline-block mt-2 mr-2 text-storm-50 font-normal text-sm w-[3.3rem];
+  @apply inline-block mr-2 text-storm-50 font-normal text-sm w-[3.3rem];
 }
 
 .branchLabel {
-  @apply mt-2 mr-2 text-storm-50 font-normal text-sm w-[3.3rem];
+  @apply my-auto mr-2 text-storm-50 font-normal text-sm w-[3.3rem];
 }
 
 .doltDisabled {

diff --git a/web/renderer/components/Navbar/index.tsx b/web/renderer/components/Navbar/index.tsx
@@ -7,6 +7,7 @@ import { dockerHubRepo, workbenchGithubRepo } from "@lib/constants";
 import { ExternalLink, MobileNavbar } from "@dolthub/react-components";
 import { FaGithub } from "@react-icons/all-files/fa/FaGithub";
 import { FaDocker } from "@react-icons/all-files/fa/FaDocker";
+import { connections } from "@lib/urls";
 import DocsLink from "@components/links/DocsLink";
 import css from "./index.module.css";
 
@@ -70,7 +71,7 @@ function Inner({ params, setNoDrag }: InnerProps) {
         logo={<Logo imgSrc="/images/dolt-workbench.png" />}
         bgColor="bg-storm-600"
       >
-        <Link href="/connections">Connections</Link>
+        <Link {...connections}>Connections</Link>
         <RightLinks />
       </MobileNavbar>
     </>

diff --git a/web/renderer/components/SchemaDiagramButton/index.module.css b/web/renderer/components/SchemaDiagramButton/index.module.css
@@ -1,5 +1,5 @@
 .diagram {
-  @apply flex text-white text-base bg-[#FF8964] px-6 items-center;
+  @apply flex text-white text-base bg-coral-300 px-6 items-center;
   &:hover {
     @apply bg-coral-400;
   }

diff --git a/web/renderer/components/TableList/index.module.css b/web/renderer/components/TableList/index.module.css
@@ -8,7 +8,7 @@
     @apply flex my-8 mx-3 text-sm text-white font-normal;
 
     &:hover {
-      @apply text-[#FF8964];
+      @apply text-coral-300;
     }
 
     svg {

diff --git a/web/renderer/components/pageComponents/ConnectionsPage/ExistingConnections/Item.tsx b/web/renderer/components/pageComponents/ConnectionsPage/ExistingConnections/Item.tsx
@@ -2,42 +2,62 @@ import { getDatabaseType } from "@components/DatabaseTypeLabel";
 import { Button, ErrorMsg, Loader } from "@dolthub/react-components";
 import { DatabaseConnectionFragment } from "@gen/graphql-types";
 import { IoMdClose } from "@react-icons/all-files/io/IoMdClose";
+import Image from "next/legacy/image";
 import cx from "classnames";
+import { DatabaseTypeLabel } from "@components/ConnectionsAndDatabases/DatabaseTypeLabel";
 import useAddConnection from "./useAddConnection";
 import css from "./index.module.css";
 
 type Props = {
   conn: DatabaseConnectionFragment;
-  onDeleteClicked?: (n: string) => void;
+  onDeleteClicked: (n: string) => void;
+  borderClassName: string;
+  shorterLine: boolean;
 };
 
-export default function Item({ conn, onDeleteClicked }: Props) {
+export default function Item({
+  conn,
+  onDeleteClicked,
+  borderClassName,
+  shorterLine,
+}: Props) {
   const { onAdd, err, loading } = useAddConnection(conn);
-
+  const type = getDatabaseType(conn.type ?? undefined, !!conn.isDolt);
   return (
     <>
-      <li key={conn.name} className={css.connection}>
-        <Button.Link onClick={onAdd}>{conn.name}</Button.Link>
-        <span className={css.right}>
-          <DatabaseTypeLabel conn={conn} />
-          {onDeleteClicked && (
-            <Button.Link onClick={() => onDeleteClicked(conn.name)}>
+      <li key={conn.name} className={css.connectionContainer}>
+        <div
+          className={cx(css.line, css[borderClassName], {
+            [css.shorterLine]: shorterLine,
+          })}
+        />
+        <div className={css.connection}>
+          <div className={cx(css.left, css[type.toLowerCase()])}>
+            <Image
+              src="/images/database-icon.png"
+              alt="DatabaseIcon"
+              height={51}
+              width={51}
+            />
+          </div>
+          <div className={css.right}>
+            <Button.Link
+              onClick={() => onDeleteClicked(conn.name)}
+              className={css.delete}
+            >
               <IoMdClose />
             </Button.Link>
-          )}
-        </span>
+            <div className={css.typeAndName}>
+              <DatabaseTypeLabel conn={conn} />
+              <Button.Link onClick={onAdd} className={css.name}>
+                {conn.name}
+              </Button.Link>
+            </div>
+          </div>
+        </div>
       </li>
       <Loader loaded={!loading} />
       <ErrorMsg err={err} className={css.err} />
     </>
   );
 }
-
-type LabelProps = {
-  conn: DatabaseConnectionFragment;
-};
-
-export function DatabaseTypeLabel({ conn }: LabelProps) {
-  const type = getDatabaseType(conn.type ?? undefined, !!conn.isDolt);
-  return <span className={cx(css.label, css[type.toLowerCase()])}>{type}</span>;
-}