Implement new UI for disconnecting DBs

mathesar_ui/src/api/rpc/databases.ts

@@ -44,6 +44,8 @@ export interface RawDatabasePrivilegesForRole {
   direct: DatabasePrivilege[];
 }
 
+export type SystemSchema = 'msar' | '__msar' | 'mathesar_types';
+
 export const databases = {
   get: rpcMethodTypeContainer<
     {
@@ -69,6 +71,10 @@ export const databases = {
     disconnect: rpcMethodTypeContainer<
       {
         database_id: RawDatabase['id'];
+        schemas_to_remove?: SystemSchema[];
+        strict?: boolean;
+        role_name?: string;
+        password?: string;
       },
       void
     >(),

mathesar_ui/src/component-library/button/Button.scss

@@ -13,7 +13,6 @@
     #000 0 0 0 0,
     #000 0 0 0 0,
     rgba(0, 0, 0, 0.05) 0 1px 2px 0;
-  font-weight: var(--font-weight-medium);
   position: relative;
   padding: var(--input-padding);
   box-sizing: border-box;

mathesar_ui/src/component-library/fieldset/Fieldset.scss

@@ -4,7 +4,6 @@
 
   legend {
     padding: 0;
-    font-weight: var(--font-weight-medium);
     margin-bottom: 0.5rem;
   }
   legend:empty {

mathesar_ui/src/component-library/labeled-input/LabeledInput.scss

@@ -5,7 +5,6 @@
   .label {
     display: inline-block;
     color: var(--slate-800);
-    font-weight: var(--font-weight-medium);
   }
   .input {
     display: block;

mathesar_ui/src/components/DocsLink.svelte

@@ -24,6 +24,7 @@
     tablePermissions: '/user-guide/tables/#permissions',
     schemas: '/user-guide/schemas/',
     userAdmin: '/user-guide/users/#admin',
+    dataTypes: '/user-guide/data-types/',
   };
   type Page = keyof typeof pages;
 

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

@@ -173,6 +173,7 @@
   "database_access_connect_help": "Can access the database",
   "database_access_create_help": "Can access the database and create new schemas",
   "database_disconnect_failed": "Unable to disconnect database",
+  "database_disconnect_form_into": "This will remove the database from Mathesar.",
   "database_disconnect_success": "The database has been disconnected successfully",
   "database_name": "Database Name",
   "database_new_items_scroll_hint": "Scroll or click here to see the database.",
@@ -227,14 +228,17 @@
   "disconnect_database_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.",
   "disconnect_database_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.",
   "disconnect_database_with_name": "Disconnect Database [identifier]?",
+  "disconnect_named_database": "Disconnect [databaseName] Database",
   "display_language": "Display Language",
   "display_name": "Display Name",
   "documentation_and_resources": "Documentation & Resources",
+  "drop_not_yet_implemented": "Dropping databases from within Mathesar is not yet implemented. You can use PostgreSQL directly to drop the database if needed. See this [link](issue) for more information.",
   "drop_role": "Drop Role",
   "drop_role_name": "Drop role [name]",
   "drop_role_name_question": "Drop role [name]?",
   "drop_role_warning": "This role will be dropped on the database server and will not be available for any databases configured on the same server.",
   "drop_role_with_identifier": "Drop Role [identifier]?",
+  "drop_the_database_from_pg": "Drop the database from PostgreSQL",
   "edit": "Edit",
   "edit_child_roles_for_parent": "Edit [parent] child roles",
   "edit_connection": "Edit Connection",
@@ -334,6 +338,7 @@
   "join_community_chat": "Join Community Chat",
   "join_email_list": "Join Email List",
   "keep_first_row_as_data": "Set generic column names, keeping the first row as data",
+  "keep_the_database_in_pg": "Keep the database in PostgreSQL",
   "known_connection": "Known connection",
   "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.",
   "last_checked": "Last checked",
@@ -456,6 +461,7 @@
   "open_table_record": "Open a Record from [tableName]",
   "operation_requires_pg_user_have_createdb": "This operation requires the \"{username}\" PostgreSQL user to have CREATEDB privileges.",
   "or": "or",
+  "outside_of_mathesar": "Outside of Mathesar",
   "overridden": "Overridden",
   "overview": "Overview",
   "owner": "Owner",
@@ -544,11 +550,21 @@
   "remove_configuration_for_identifier": "Remove Configuration for [identifier]?",
   "remove_filters": "{count, plural, one {Remove Filter} other {Remove {count} Filters}}",
   "remove_grouping": "Remove Grouping",
+  "remove_internal_schemas": "Remove Mathesar's internal schemas",
+  "remove_internal_schemas_help_1": "When checked, this will remove the \"msar\" and \"__msar\" schemas from the database.",
+  "remove_internal_schemas_help_2": "These schemas contain functions only necessary for the Mathesar application and can safely be deleted when disconnecting a database. You can easily reinstall them by reconnecting the database to Mathesar.",
+  "remove_internal_schemas_help_3": "See our [link](documentation) to learn more about Mathesar's internal schemas.",
   "remove_old_link_create_new": "Remove old link and create a new link?",
   "remove_sorting_type": "Remove {sortingType} Sorting",
   "remove_stored_password": "Remove Stored Password",
   "remove_stored_password_for_identifier": "Remove Stored Password for [identifier]?",
   "remove_stored_password_help": "Removing this stored password will prevent collaborators assigned to this role from accessing databases on server ''{server}''.",
+  "remove_types_schema": "Remove Mathesar's custom data types",
+  "remove_types_schema_help_1": "When checked, this will attempt to remove the \"mathesar_types\" schema from the database.",
+  "remove_types_schema_help_2": "This schema contains custom PostgreSQL data types that Mathesar uses for Email, Money, and URL types.",
+  "remove_types_schema_help_3": "If you have any data using these types, and you attempt to remove the types by checking this box, then the entire process of disconnecting the database will fail with an error. In this case, all your data will be preserved and no changes will be made.",
+  "remove_types_schema_help_4": "You can safely leave these types in your database if you so choose.",
+  "remove_types_schema_help_5": "See our [link](documentation) to learn more about Mathesar data types.",
   "removing_role_configuration_warning": "Removing this configuration will prevent collaborators assigned to this role from accessing databases on server ''{server}''.",
   "reset": "Reset",
   "restrict_to_unique": "Restrict to Unique",
@@ -771,6 +787,8 @@
   "use_custom_template": "Use Custom Template",
   "use_default": "Use Default",
   "use_existing_pg_user": "Use an existing PostgreSQL user",
+  "use_role_to_remove_schemas": "Specify a role to use when removing schemas",
+  "use_role_to_remove_schemas_help": "If your Mathesar internal schemas require extra privileges to remove, you may specify a role to use here. This role and password will not be stored in Mathesar.",
   "use_text_for_all_columns": "Use \"Text\" for all column data types",
   "user": "User",
   "user_name": "User name",

mathesar_ui/src/pages/database/DatabasePageWrapper.svelte

@@ -3,7 +3,6 @@
   import { router } from 'tinro';
 
   import AppSecondaryHeader from '@mathesar/components/AppSecondaryHeader.svelte';
-  import PhraseContainingIdentifier from '@mathesar/components/PhraseContainingIdentifier.svelte';
   import SeeDocsToLearnMore from '@mathesar/components/SeeDocsToLearnMore.svelte';
   import { DatabaseRouteContext } from '@mathesar/contexts/DatabaseRouteContext';
   import {
@@ -20,10 +19,8 @@
     getDatabasePageSchemasSectionUrl,
     getDatabasePageSettingsSectionUrl,
   } from '@mathesar/routes/urls';
-  import { confirm } from '@mathesar/stores/confirmation';
   import { databasesStore } from '@mathesar/stores/databases';
   import { modal } from '@mathesar/stores/modal';
-  import { toast } from '@mathesar/stores/toast';
   import { getUserProfileStoreFromContext } from '@mathesar/stores/userProfile';
   import UpgradeDatabaseModal from '@mathesar/systems/databases/upgrade-database/UpgradeDatabaseModal.svelte';
   import { preloadCommonData } from '@mathesar/utils/preloadData';
@@ -36,6 +33,7 @@
     TabContainer,
   } from '@mathesar-component-library';
 
+  import DisconnectDatabaseModal from './disconnect/DisconnectDatabaseModal.svelte';
   import DatabasePermissionsModal from './permissions/DatabasePermissionsModal.svelte';
 
   const databaseRouteContext = DatabaseRouteContext.get();
@@ -44,13 +42,14 @@
 
   const commonData = preloadCommonData();
 
   $: currentRoleOwnsDatabase =
     $underlyingDatabase.resolvedValue?.currentAccess.currentRoleOwns;
   $: isDatabaseInInternalServer =
     database.server.host === commonData.internal_db.host &&
     database.server.port === commonData.internal_db.port;
 
   const permissionsModal = modal.spawnModalController();
+  const disconnectModal = modal.spawnModalController<Database>();
   const reinstallModal = modal.spawnModalController<Database>();
 
   const userProfileStore = getUserProfileStoreFromContext();
@@ -76,39 +75,6 @@
   export function setSection(_section: Section) {
     section = _section;
   }
-
-  async function disconnectDatabase() {
-    await confirm({
-      title: {
-        component: PhraseContainingIdentifier,
-        props: {
-          identifier: database.name,
-          wrappingString: $_('disconnect_database_with_name'),
-        },
-      },
-      body: [
-        $_('action_cannot_be_undone'),
-        $_('disconnect_database_info'),
-        $_('disconnect_database_db_delete_info'),
-        $_('are_you_sure_to_proceed'),
-      ],
-      proceedButton: {
-        label: $_('disconnect_database'),
-        icon: undefined,
-      },
-      onProceed: async () => {
-        await databasesStore.disconnectDatabase(database);
-      },
-      onSuccess: () => {
-        toast.success($_('database_disconnect_success'));
-        router.goto('/');
-      },
-      onError: (e) =>
-        toast.error({
-          message: `${$_('database_disconnect_failed')} ${e.message}`,
-        }),
-    });
-  }
 </script>
 
 <svelte:head>
@@ -145,7 +111,10 @@
           icon={iconMoreActions}
           preferredPlacement="bottom-end"
         >
-          <ButtonMenuItem icon={iconDeleteMajor} on:click={disconnectDatabase}>
+          <ButtonMenuItem
+            icon={iconDeleteMajor}
+            on:click={() => disconnectModal.open(database)}
+          >
             {$_('disconnect_database')}
           </ButtonMenuItem>
           <ButtonMenuItem
@@ -203,6 +172,13 @@
 
 <DatabasePermissionsModal controller={permissionsModal} />
 <UpgradeDatabaseModal controller={reinstallModal} isReinstall />
+<DisconnectDatabaseModal
+  controller={disconnectModal}
+  disconnect={async (opts) => {
+    await databasesStore.disconnectDatabase(opts);
+    router.goto('/');
+  }}
+/>
 
 <style>
   .tab-container {