Navigate to db page after adding connection

mathesar_ui/src/systems/connections/AddConnection.svelte

@@ -84,7 +84,8 @@
     movie_collection: $_('sample_data_movies_help'),
   };
 
-  export let onExit: () => void;
+  export let onCancel: () => void;
+  export let onSuccess: (c: Connection) => void;
 
   $: availableConnectionsToReuse = $generalConnections;
   $: defaultConnectionToReuse =
@@ -254,8 +255,8 @@
 
   async function saveConnectionDetails() {
     try {
-      await create();
-      onExit();
+      const connection = await create();
+      onSuccess(connection);
       toast.success($_('connection_added_successfully'));
     } catch (e) {
       toast.fromError(e);
@@ -415,7 +416,7 @@
     <FormSubmit
       {form}
       catchErrors
-      onCancel={() => onExit()}
+      {onCancel}
       onProceed={saveConnectionDetails}
       proceedButton={{ label: $_('add_connection') }}
       cancelButton={{ label: $_('cancel') }}

mathesar_ui/src/systems/connections/AddConnectionModal.svelte

@@ -1,19 +1,32 @@
 <script lang="ts">
   import { _ } from 'svelte-i18n';
+  import { router } from 'tinro';
 
   import {
     ControlledModal,
     type ModalController,
   } from '@mathesar-component-library';
+  import type { Connection } from '@mathesar/api/connections';
+  import { getDatabasePageUrl } from '@mathesar/routes/urls';
   import AddConnection from './AddConnection.svelte';
 
   export let controller: ModalController;
+
+  function handleCancel() {
+    controller.close();
+  }
+
+  function handleSuccess(connection: Connection) {
+    controller.close();
+    const url = getDatabasePageUrl(connection.id);
+    router.goto(url);
+  }
 </script>
 
 <ControlledModal
   {controller}
   size="large"
   title={$_('new_postgresql_database_connection')}
 >
-  <AddConnection onExit={() => controller.close()} />
+  <AddConnection onCancel={handleCancel} onSuccess={handleSuccess} />
 </ControlledModal>