disconnect database flow ux fixes

mathesar_ui/src/pages/database-connection/DatabaseConnectionsList.svelte

@@ -12,7 +12,6 @@
   import EntityContainerWithFilterBar from '@mathesar/components/EntityContainerWithFilterBar.svelte';
   import { AnchorButton, Icon } from '@mathesar/component-library';
   import { labeledCount } from '@mathesar/utils/languageUtils';
-  import { isSuccessfullyConnectedDatabase } from '@mathesar/utils/database';
   import DatabaseConnectionSkeleton from './DatabaseConnectionSkeleton.svelte';
   import { makeSimplePageTitle } from '../pageTitleUtils';
   import DatabaseConnectionItem from './DatabaseConnectionItem.svelte';
@@ -24,9 +23,6 @@
   $: databasesLoadError = $databases.error;
 
   function isMatch(database: Database, q: string) {
-    if (!isSuccessfullyConnectedDatabase(database)) {
-      return database.name.toLowerCase().includes(q);
-    }
     return (
       database.name.toLowerCase().includes(q) ||
       database.db_name.toLowerCase().includes(q)

mathesar_ui/src/pages/database-connection/EditDatabaseConnection.svelte

@@ -1,19 +1,27 @@
 <script lang="ts">
   import AppendBreadcrumb from '@mathesar/components/breadcrumb/AppendBreadcrumb.svelte';
-  import { iconEdit } from '@mathesar/icons';
+  import { iconDeleteMajor, iconEdit } from '@mathesar/icons';
   import { toast } from '@mathesar/stores/toast';
   import {
     getDatabaseConnectionEditUrl,
     getDatabasePageUrl,
   } from '@mathesar/routes/urls';
-  import { reloadDatabases } from '@mathesar/stores/databases';
+  import { databases, reloadDatabases } from '@mathesar/stores/databases';
   import { reflectApi } from '@mathesar/api/reflect';
   import { router } from 'tinro';
   import FormBox from '../admin-users/FormBox.svelte';
   import DatabaseConnectionForm from './DatabaseConnectionForm.svelte';
+  import DeleteDatabaseConnectionConfirmationModal from '../database/DeleteDatabaseConnectionConfirmationModal.svelte';
+  import { modal } from '@mathesar/stores/modal';
+  import Button from '@mathesar/component-library/button/Button.svelte';
+  import { Icon } from '@mathesar/component-library';
 
   export let databaseName: string;
 
+  const deleteConnectionModal = modal.spawnModalController();
+
+  $: database = $databases.data.find((db) => db.name === databaseName);
+
   async function handleSuccess() {
     toast.success(`${databaseName} updated successfully!`);
 
@@ -26,6 +34,11 @@
       router.goto(getDatabasePageUrl(databaseName));
     }
   }
+
+  async function handleSuccessfulDeleteConnection() {
+    await reloadDatabases();
+    router.goto('/');
+  }
 </script>
 
 <AppendBreadcrumb
@@ -42,3 +55,21 @@
 <FormBox>
   <DatabaseConnectionForm {databaseName} onUpdate={handleSuccess} />
 </FormBox>
+
+{#if database}
+  <FormBox>
+    <Button
+      on:click={() => deleteConnectionModal.open()}
+      danger
+      appearance="default"
+    >
+      <Icon {...iconDeleteMajor} />
+      <span>Disconnect Database</span>
+    </Button>
+  </FormBox>
+  <DeleteDatabaseConnectionConfirmationModal
+    controller={deleteConnectionModal}
+    {database}
+    on:success={handleSuccessfulDeleteConnection}
+  />
+{/if}

mathesar_ui/src/pages/database/ConnectionError.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { DatabaseWithConnectionError } from '@mathesar/AppTypes';
   import { States } from '@mathesar/api/utils/requestUtils';
   import { Button, Icon, iconLoading } from '@mathesar/component-library';
   import AnchorButton from '@mathesar/component-library/anchorButton/AnchorButton.svelte';
@@ -7,20 +8,20 @@
   import { getDatabaseConnectionEditUrl } from '@mathesar/routes/urls';
   import { refetchSchemasForDB, schemas } from '@mathesar/stores/schemas';
 
-  export let databaseName: string;
+  export let database: DatabaseWithConnectionError;
 
   $: ({ state } = $schemas);
 
   async function handleRetry() {
-    void refetchSchemasForDB(databaseName);
+    void refetchSchemasForDB(database.name);
   }
 </script>
 
 <ErrorBox fullWidth>
-  <p>Error connecting to the database</p>
+  <p>{database.error}</p>
   <div class="action-buttons">
     <AnchorButton
-      href={getDatabaseConnectionEditUrl(databaseName)}
+      href={getDatabaseConnectionEditUrl(database.name)}
       appearance="secondary"
     >
       <Icon {...iconEdit} />

mathesar_ui/src/pages/database/DatabaseDetails.svelte

@@ -185,7 +185,7 @@
               icon={iconDeleteMajor}
               on:click={() => deleteConnectionModal.open()}
             >
-              Delete Connection
+              Disconnect Database
             </ButtonMenuItem>
           {/if}
         </DropdownMenu>
@@ -199,7 +199,7 @@
     <h2 class="schema-list-title">Schemas ({schemasMap.size})</h2>
   </div>
   {#if !isSuccessfullyConnectedDatabase(database)}
-    <ConnectionError databaseName={database.name} />
+    <ConnectionError {database} />
   {:else}
     <EntityContainerWithFilterBar
       searchPlaceholder="Search Schemas"