No databases message, README

README.md

@@ -3,13 +3,21 @@
 A SQL workbench for your MySQL-compatible database. Use [Dolt](https://doltdb.com) to unlock
 powerful version control features, such as branches, commits, and merge.
 
-## Getting started with Docker
+## Getting started
+
+The easiest way to get started is to use Docker. Assuming you have Docker
+[installed](https://www.docker.com/get-started/) and running, you can simply pull and run
+the image.
 
 ```
-% docker compose up --build
+% docker pull dolthub/dolt-workbench:combined
+% docker run -p 9002:9002 -p 3000:3000 dolthub/dolt-workbench:combined
 ```
 
-Navigate to http://localhost:3002 to enter database information.
+Navigate to http://localhost:3000 to enter your database information.
+
+You can find more in-depth instructions o n
+[Docker Hub](https://hub.docker.com/repository/docker/taylorbantle1/dolt-workbench).
 
 ## Getting started from source
 
@@ -46,3 +54,9 @@ web % yarn dev
 ```
 
 Open your browser to [localhost:3002](http://localhost:3002).
+
+## Building the Docker images
+
+```
+% docker compose build
+```

web/components/pageComponents/DatabasesPage/index.module.css

@@ -1,7 +1,5 @@
-.container {
-  p {
-    @apply text-lg text-center mb-10;
-  }
+.desc {
+  @apply text-lg text-center mb-10;
 }
 
 .database {
@@ -12,6 +10,10 @@
   }
 }
 
+.noDbs {
+  @apply text-lg;
+}
+
 .button {
   @apply bg-acc-hoverlinkblue text-white my-6 px-4 py-1.5 text-base rounded button-shadow;
 

web/components/pageComponents/DatabasesPage/index.tsx

@@ -4,31 +4,38 @@ import Link from "@components/links/Link";
 import { useDatabasesQuery } from "@gen/graphql-types";
 import { database } from "@lib/urls";
 import { FaChevronRight } from "@react-icons/all-files/fa/FaChevronRight";
+import cx from "classnames";
 import css from "./index.module.css";
 
 export default function DatabasesPage() {
   const res = useDatabasesQuery();
 
   return (
-    <MainLayout className={css.container}>
+    <MainLayout>
       <h1>Choose a database</h1>
-      <p>
+      <p className={css.desc}>
         Choose an existing database or create a new database to get started.
       </p>
-      <ul>
-        {res.data?.databases.map(db => (
-          <li key={db}>
-            <Link {...database({ databaseName: db })}>
-              <div className={css.database}>
-                <span>{db}</span>
-                <span className={css.go}>
-                  Go <FaChevronRight />
-                </span>
-              </div>
-            </Link>
-          </li>
-        ))}
-      </ul>
+      {res.data?.databases.length ? (
+        <ul>
+          {res.data.databases.map(db => (
+            <li key={db}>
+              <Link {...database({ databaseName: db })}>
+                <div className={css.database}>
+                  <span>{db}</span>
+                  <span className={css.go}>
+                    Go <FaChevronRight />
+                  </span>
+                </div>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <p className={cx(css.noDbs, css.database)}>
+          No databases found. Create a database to get started.
+        </p>
+      )}
       <CreateDatabase buttonClassName={css.button} />
     </MainLayout>
   );