Implement Delete database connection UI

mathesar_ui/src/api/connections.ts

@@ -1,5 +1,11 @@
 import type { Database } from '@mathesar/AppTypes';
-import { getAPI, patchAPI, type PaginatedResponse } from './utils/requestUtils';
+import {
+  getAPI,
+  patchAPI,
+  type PaginatedResponse,
+  deleteAPI,
+  addQueryParamsToUrl,
+} from './utils/requestUtils';
 
 export type Connection = Database;
 
@@ -28,7 +34,20 @@ function update(
   );
 }
 
+function deleteConnection(
+  connectionId: Connection['id'],
+  deleteMathesarSchemas = false,
+) {
+  const params = { del_msar_schemas: deleteMathesarSchemas };
+  const url = addQueryParamsToUrl(
+    `/api/db/v0/connections/${connectionId}/`,
+    params,
+  );
+  return deleteAPI(url);
+}
+
 export default {
   list,
   update,
+  delete: deleteConnection,
 };

mathesar_ui/src/i18n/languages/en/dict.json

@@ -1,12 +1,14 @@
 {
   "actions": "Actions",
+  "action_cannot_be_undone": "This action cannot be undone",
   "add_database_connection": "Add Database Connection",
   "change_password": "Change Password",
   "change_password_leave_empty_help": "If you want to change your password, enter a new one below. Otherwise, just leave the field blank.",
   "choose_connection": "Choose a Database Connection",
   "connect_with_community_help": "Connect with Mathesar users and contributors in our community chat. Share ideas, get help, and contribute to discussions.",
   "connection_name": "Connection Name",
   "connection_updated_successfully": "The connection has been successfully updated",
+  "connection_deleted_successfully": "The connection has been successfully deleted",
   "connections": "Connections",
   "connections_matching_search": "{count, plural, one {{count} connection matches [searchValue]} other {{count} connections match [searchValue]}}",
   "copy_and_paste_text": "Copy and Paste Text",
@@ -15,6 +17,11 @@
   "database_connections": "Database Connections",
   "database_name": "Database Name",
   "delete": "Delete",
+  "delete_associated_mathesar_schemas_help": "Delete associated Mathesar schemas (includes all dependent database objects)",
+  "delete_connection": "Delete Connection",
+  "delete_connection_info": "The database will not be deleted and will still be accessible outside Mathesar. You may choose to reconnect to it in the future; however, upon disconnecting you will lose Mathesar-specific metadata such as saved explorations, customized column display options, and customized record summary templates.",
+  "delete_connection_db_delete_info": "If you would like to delete the database too, you will need to do so from outside Mathesar by deleting it directly in PostgreSQL.",
+  "delete_connection_with_name": "Delete [connectionName] Database Connection?",
   "disconnect": "Disconnect",
   "documentation_and_resources": "Documentation & Resources",
   "edit": "Edit",
@@ -26,6 +33,7 @@
   "import": "Import",
   "join_community_chat": "Join Community Chat",
   "large_data_takes_time_warning": "Large data sets can sometimes take several minutes to process. Please do not leave this page or close the browser tab while the import is in progress.",
+  "learn_implications_deleting_mathesar_schemas": "Learn more about the implications of deleting Mathesar schemas.",
   "linking_table": "Linking Table",
   "manage_connections": "Manage Connections",
   "many_to_many": "Many to Many",
@@ -51,6 +59,7 @@
   "upload_a_file": "Upload a file",
   "user_needs_create_connect_privileges": "The user will need to have CONNECT and CREATE privileges.",
   "username": "Username",
+  "using_custom_types": "Using custom types?",
   "welcome_to_mathesar_user": "Welcome to Mathesar, {user}!",
   "why_is_this_needed": "Why is this needed?"
 }

mathesar_ui/src/pages/connections/ConnectionRow.svelte

@@ -3,16 +3,27 @@
   import { Icon, Button } from '@mathesar-component-library';
   import { iconEdit, iconDeleteMajor } from '@mathesar/icons';
   import { modal } from '@mathesar/stores/modal';
-  import { EditConnectionModal } from '@mathesar/systems/connections';
-  import type { ConnectionModel } from '@mathesar/stores/databases';
+  import {
+    EditConnectionModal,
+    DeleteConnectionModal,
+  } from '@mathesar/systems/connections';
+  import type { Connection } from '@mathesar/api/connections';
+  import { getDatabasePageUrl } from '@mathesar/routes/urls';
+  import { iconConnection } from '@mathesar/icons';
 
   const editConnectionModalController = modal.spawnModalController();
+  const deleteConnectionModalController = modal.spawnModalController();
 
-  export let connection: ConnectionModel;
+  export let connection: Connection;
 </script>
 
 <div data-identifier="connection-row" class="grid-row">
-  <span>{connection.nickname}</span>
+  <span>
+    <a href={getDatabasePageUrl(connection.nickname)}>
+      <Icon {...iconConnection} />
+      {connection.nickname}
+    </a>
+  </span>
   <span>{connection.database}</span>
   <span>{connection.username}</span>
   <span>{connection.host}</span>
@@ -25,14 +36,21 @@
       <Icon {...iconEdit} />
       <span>{$_('edit')}</span>
     </Button>
-    <Button appearance="outline-primary">
+    <Button
+      appearance="outline-primary"
+      on:click={() => deleteConnectionModalController.open()}
+    >
       <Icon {...iconDeleteMajor} />
-      <span>{$_('disconnect')}</span>
+      <span>{$_('delete')}</span>
     </Button>
   </div>
 </div>
 
 <EditConnectionModal controller={editConnectionModalController} {connection} />
+<DeleteConnectionModal
+  controller={deleteConnectionModalController}
+  {connection}
+/>
 
 <style lang="scss">
   [data-identifier='connection-row'] {

mathesar_ui/src/pages/connections/ConnectionsPage.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
   import { _ } from 'svelte-i18n';
   import { AnchorButton, Icon } from '@mathesar-component-library';
-  import {
-    connectionsStore,
-    type ConnectionModel,
-  } from '@mathesar/stores/databases';
+  import { connectionsStore } from '@mathesar/stores/databases';
+  import type { Connection } from '@mathesar/api/connections';
   import LayoutWithHeader from '@mathesar/layouts/LayoutWithHeader.svelte';
   import { iconAddNew } from '@mathesar/icons';
   import Errors from '@mathesar/components/Errors.svelte';
@@ -19,14 +17,14 @@
   $: connections = connectionsStore.connections;
   $: connectionsRequestStatus = connectionsStore.requestStatus;
 
-  function isMatch(connection: ConnectionModel, q: string) {
+  function isMatch(connection: Connection, q: string) {
     return (
       connection.nickname.toLowerCase().includes(q) ||
       connection.database.toLowerCase().includes(q)
     );
   }
 
-  function filterConnections(_connections: ConnectionModel[], query: string) {
+  function filterConnections(_connections: Connection[], query: string) {
     return _connections.filter((connection) => {
       if (query) {
         const sanitizedQuery = query.trim().toLowerCase();

mathesar_ui/src/pages/database/DatabaseDetails.svelte

@@ -31,12 +31,13 @@
   import { labeledCount } from '@mathesar/utils/languageUtils';
   import EntityContainerWithFilterBar from '@mathesar/components/EntityContainerWithFilterBar.svelte';
   import LinkMenuItem from '@mathesar/component-library/menu/LinkMenuItem.svelte';
+  import { DeleteConnectionModal } from '@mathesar/systems/connections';
+  import { CONNECTIONS_URL } from '@mathesar/routes/urls';
   import { router } from 'tinro';
   import AddEditSchemaModal from './AddEditSchemaModal.svelte';
   import DbAccessControlModal from './DbAccessControlModal.svelte';
   import SchemaRow from './SchemaRow.svelte';
   import { deleteSchemaConfirmationBody } from './__help__/databaseHelp';
-  import DeleteDatabaseConnectionConfirmationModal from './DeleteDatabaseConnectionConfirmationModal.svelte';
 
   const addEditModal = modal.spawnModalController();
   const accessControlModal = modal.spawnModalController();
@@ -116,11 +117,6 @@
       isReflectionRunning = false;
     }
   }
-
-  async function handleSuccessfulDeleteConnection() {
-    // await reloadDatabases();
-    router.goto('/');
-  }
 </script>
 
 <AppSecondaryHeader
@@ -236,10 +232,10 @@
   />
 
   <DbAccessControlModal controller={accessControlModal} {database} />
-  <DeleteDatabaseConnectionConfirmationModal
+  <DeleteConnectionModal
     controller={deleteConnectionModal}
-    {database}
-    on:success={handleSuccessfulDeleteConnection}
+    connection={database}
+    on:delete={() => router.goto(CONNECTIONS_URL)}
   />
 {/if}
 

mathesar_ui/src/stores/databases.ts

@@ -1,6 +1,12 @@
 /* eslint-disable max-classes-per-file */
 
-import { writable, derived, type Writable, type Readable } from 'svelte/store';
+import {
+  writable,
+  derived,
+  type Writable,
+  type Readable,
+  get,
+} from 'svelte/store';
 import { preloadCommonData } from '@mathesar/utils/preloadData';
 import connectionsApi, {
   type Connection,
@@ -11,7 +17,7 @@ import type { MakeWritablePropertiesReadable } from '@mathesar/utils/typeUtils';
 
 const commonData = preloadCommonData();
 
-export class ConnectionModel {
+class ConnectionModel {
   readonly id: Connection['id'];
 
   readonly nickname: Connection['nickname'];
@@ -96,7 +102,7 @@ class ConnectionsStore {
   async updateConnection(
     connectionId: Connection['id'],
     properties: Partial<UpdatableConnectionProperties>,
-  ) {
+  ): Promise<Connection> {
     const updatedConnection = await connectionsApi.update(
       connectionId,
       properties,
@@ -112,6 +118,27 @@ class ConnectionsStore {
     );
     return newConnectionModel;
   }
+
+  async deleteConnection(
+    connectionId: Connection['id'],
+    deleteMathesarSchemas = false,
+  ) {
+    const connections = get(this.connections);
+    const connectionToDelete = connections.find(
+      (conn) => conn.id === connectionId,
+    );
+    const otherConnectionsUseSameDb = !!connections.find(
+      (conn) =>
+        conn.id !== connectionId &&
+        conn.database === connectionToDelete?.database,
+    );
+    const mathesarSchemasShouldBeDeleted =
+      !otherConnectionsUseSameDb && deleteMathesarSchemas;
+    await connectionsApi.delete(connectionId, mathesarSchemasShouldBeDeleted);
+    this.connections.update((conns) =>
+      conns.filter((conn) => conn.id !== connectionId),
+    );
+  }
 }
 
 export const connectionsStore: MakeWritablePropertiesReadable<ConnectionsStore> =