Some web UI fixes

web/components/SqlDataTable/index.tsx

@@ -15,13 +15,12 @@ import {
 } from "@gen/graphql-types";
 import useSessionQueryHistory from "@hooks/useSessionQueryHistory";
 import { SqlQueryParams } from "@lib/params";
-import { isMutation } from "@lib/parseSqlQuery";
-import { refetchSqlUpdateQueriesCacheEvict } from "@lib/refetchQueries";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import SqlMessage from "./SqlMessage";
 import { isReadOnlyDatabaseRevisionError } from "./SqlMessage/utils";
 import WorkingDiff from "./WorkingDiff";
 import css from "./index.module.css";
+import useSqlQuery from "./useSqlQuery";
 
 type Props = {
   params: SqlQueryParams;
@@ -37,25 +36,7 @@ type InnerProps = Props & {
 };
 
 function Inner(props: InnerProps) {
-  const { addMutation } = useSessionQueryHistory();
-  const isMut = isMutation(props.params.q);
-
-  useEffect(() => {
-    if (!isMut) return;
-    addMutation(props.params.q);
-  }, [props.params.q]);
-
-  useEffect(() => {
-    if (!isMut) return;
-    if (props.gqlError) return;
-    // Need timeout here so that queries are not refetched before sql query has
-    // time to finish
-    setTimeout(() => {
-      props.client
-        .refetchQueries(refetchSqlUpdateQueriesCacheEvict)
-        .catch(console.error);
-    }, 300);
-  }, [props.gqlError, isMut, props.client]);
+  const isMut = useSqlQuery(props.params, props.client, props.gqlError);
 
   const msg = <SqlMessage {...props} rowsLen={props.rows?.length ?? 0} />;
   return (

web/components/SqlDataTable/useSqlQuery.ts

@@ -0,0 +1,54 @@
+import {
+  ApolloClient,
+  ApolloError,
+  NormalizedCacheObject,
+} from "@apollo/client";
+import useSessionQueryHistory from "@hooks/useSessionQueryHistory";
+import { SqlQueryParams } from "@lib/params";
+import { isMutation } from "@lib/parseSqlQuery";
+import { refetchSqlUpdateQueriesCacheEvict } from "@lib/refetchQueries";
+import { databases } from "@lib/urls";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+
+export default function useSqlQuery(
+  params: SqlQueryParams,
+  client: ApolloClient<NormalizedCacheObject>,
+  gqlError?: ApolloError,
+): boolean {
+  const router = useRouter();
+  const { addMutation } = useSessionQueryHistory();
+  const isMut = isMutation(params.q);
+
+  useEffect(() => {
+    if (!isMut) return;
+    addMutation(params.q);
+  }, [params.q]);
+
+  useEffect(() => {
+    if (!isMut) return;
+    if (gqlError) return;
+    // Need timeout here so that queries are not refetched before sql query has
+    // time to finish
+    setTimeout(() => {
+      client
+        .refetchQueries(refetchSqlUpdateQueriesCacheEvict)
+        .catch(console.error);
+    }, 300);
+  }, [gqlError, isMut, client]);
+
+  useEffect(() => {
+    if (gqlError) {
+      return;
+    }
+    const lower = params.q.toLowerCase();
+    if (
+      lower.includes("drop database") &&
+      lower.includes(params.databaseName)
+    ) {
+      router.push(databases.hrefPathname()).catch(console.error);
+    }
+  }, [params.q, params.databaseName, gqlError]);
+
+  return isMut;
+}

web/components/pageComponents/DatabasesPage/index.tsx

@@ -1,42 +1,58 @@
 import CreateDatabase from "@components/CreateDatabase";
+import ErrorMsg from "@components/ErrorMsg";
+import Loader from "@components/Loader";
 import MainLayout from "@components/layouts/MainLayout";
 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 { useRouter } from "next/router";
+import { useEffect } from "react";
 import css from "./index.module.css";
 
 export default function DatabasesPage() {
   const res = useDatabasesQuery();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!res.data) return;
+    if (res.data.databases.length === 1) {
+      const { href, as } = database({ databaseName: res.data.databases[0] });
+      router.push(href, as).catch(console.error);
+    }
+  }, [res.data?.databases]);
 
   return (
     <MainLayout>
-      <h1>Choose a database</h1>
-      <p className={css.desc}>
-        Choose an existing database or create a new database to get started.
-      </p>
-      {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.
+      <Loader loaded={!res.loading}>
+        <h1>Choose a database</h1>
+        <p className={css.desc}>
+          Choose an existing database or create a new database to get started.
         </p>
-      )}
-      <CreateDatabase buttonClassName={css.button} />
+        {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} />
+        <ErrorMsg err={res.error} />
+      </Loader>
     </MainLayout>
   );
 }

web/lib/refetchQueries.ts

@@ -122,6 +122,7 @@ export const refetchSqlUpdateQueriesCacheEvict: RefetchOptions = {
       "schemaDiff",
       "doltProcedures",
       "doltSchemas",
+      "databases",
     ].forEach(fieldName => {
       cache.evict({ fieldName });
     });