Db connection UI

mathesar/urls.py

@@ -53,6 +53,9 @@
     path('administration/users/', views.admin_home, name='admin_users_home'),
     path('administration/users/<user_id>/', views.admin_home, name='admin_users_edit'),
     path('administration/update/', views.admin_home, name='admin_update'),
+    path('administration/db-connection/', views.list_database_connection, name='list_database_connection'),
+    path('administration/db-connection/add/', views.add_database_connection, name='add_database_connection'),
+    path('administration/db-connection/edit/<db_name>/', views.edit_database_connection, name='edit_database_connection'),
     path('shares/tables/<slug>/', views.shared_table, name='shared_table'),
     path('shares/explorations/<slug>/', views.shared_query, name='shared_query'),
     path('db/', views.home, name='db_home'),

mathesar/views.py

@@ -80,7 +80,12 @@ def get_database_list(request):
     failed_db_data = []
     for db in permission_restricted_failed_db_qs:
         failed_db_data.append({
+            'id': db.id,
+            'username': db.username,
+            'port': db.port,
+            'host': db.host,
             'name': db.name,
+            'db_name': db.db_name,
             'editable': db.editable,
             'error': 'Error connecting to the database'
         })
@@ -301,6 +306,28 @@ def schemas(request, db_name):
     })
 
 
+@login_required
+def list_database_connection(request):
+    return render(request, 'mathesar/index.html', {
+        'common_data': get_common_data(request)
+    })
+
+
+@login_required
+def add_database_connection(request):
+    return render(request, 'mathesar/index.html', {
+        'common_data': get_common_data(request)
+    })
+
+
+@login_required
+def edit_database_connection(request, db_name):
+    database = get_current_database(request, db_name)
+    return render(request, 'mathesar/index.html', {
+        'common_data': get_common_data(request, database, None)
+    })
+
+
 def shared_table(request, slug):
     shared_table_link = SharedTable.get_by_slug(slug) if is_valid_uuid_v4(slug) else None
     table = shared_table_link.table if shared_table_link else None

mathesar_ui/src/AppTypes.ts

@@ -1,12 +1,28 @@
 import type { TreeItem } from '@mathesar-component-library/types';
 
-export interface Database {
+interface BaseDatabase {
   id: number;
   name: string;
+  editable: boolean;
+  username: string;
+  host: string;
+  port: string;
+  db_name: string;
+}
+
+export interface DatabaseWithConnectionError extends BaseDatabase {
+  error: string;
+}
+
+export interface SuccessfullyConnectedDatabase extends BaseDatabase {
   deleted: boolean;
   supported_types: string[];
 }
 
+export type Database =
+  | SuccessfullyConnectedDatabase
+  | DatabaseWithConnectionError;
+
 export interface DBObjectEntry {
   id: number;
   name: string;

mathesar_ui/src/api/databaseConnection.ts

@@ -0,0 +1,38 @@
+import type { SuccessfullyConnectedDatabase } from '@mathesar/AppTypes';
+import { deleteAPI, patchAPI, postAPI } from './utils/requestUtils';
+
+export interface NewConnection {
+  name: string;
+  db_name: string;
+  username: string;
+  host: string;
+  port: string;
+  password: string;
+}
+
+export type ConnectionUpdates = Partial<Omit<NewConnection, 'name'>>;
+
+function add(connectionDetails: NewConnection) {
+  return postAPI<SuccessfullyConnectedDatabase>(
+    '/api/db/v0/databases/',
+    connectionDetails,
+  );
+}
+
+function update(databaseId: number, updates: ConnectionUpdates) {
+  return patchAPI<SuccessfullyConnectedDatabase>(
+    `/api/db/v0/databases/${databaseId}/`,
+    updates,
+  );
+}
+
+function deleteConnection(databaseId: number, removeMathesarSchemas = false) {
+  const param = removeMathesarSchemas ? '?del_msar_schemas=True' : '';
+  return deleteAPI(`/api/db/v0/databases/${databaseId}/${param}`);
+}
+
+export default {
+  add,
+  update,
+  delete: deleteConnection,
+};

mathesar_ui/src/api/users.ts

@@ -1,4 +1,7 @@
-import type { Database, SchemaEntry } from '@mathesar/AppTypes';
+import type {
+  SuccessfullyConnectedDatabase,
+  SchemaEntry,
+} from '@mathesar/AppTypes';
 import {
   deleteAPI,
   getAPI,
@@ -18,7 +21,7 @@ export type UserRole = 'viewer' | 'editor' | 'manager';
 
 export interface DatabaseRole {
   id: number;
-  database: Database['id'];
+  database: SuccessfullyConnectedDatabase['id'];
   role: UserRole;
 }
 
@@ -73,7 +76,7 @@ function resetPassword(userId: User['id'], password: string) {
 
 function addDatabaseRole(
   userId: User['id'],
-  databaseId: Database['id'],
+  databaseId: SuccessfullyConnectedDatabase['id'],
   role: UserRole,
 ) {
   return postAPI<DatabaseRole>('/api/ui/v0/database_roles/', {

mathesar_ui/src/component-library/common/styles/variables.scss

@@ -83,6 +83,7 @@
   --size-ultra-large: 2.074rem; //2.074rem/33.18px
   --size-super-ultra-large: 2.488rem; //2.488rem/39.81px
 
+  --border-radius-xs: 0.071rem; //1px
   --border-radius-s: 0.142rem; //2px
   --border-radius-m: 0.285rem; //4px
   --border-radius-l: 0.571rem; //8px

mathesar_ui/src/components/breadcrumb/DatabaseSelector.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { Database } from '@mathesar/AppTypes';
+  import type { SuccessfullyConnectedDatabase } from '@mathesar/AppTypes';
   import { iconDatabase } from '@mathesar/icons';
   import { getDatabasePageUrl } from '@mathesar/routes/urls';
   import {
@@ -10,7 +10,7 @@
   import type { BreadcrumbSelectorEntry } from './breadcrumbTypes';
 
   function makeBreadcrumbSelectorItem(
-    dbEntry: Database,
+    dbEntry: SuccessfullyConnectedDatabase,
   ): BreadcrumbSelectorEntry {
     return {
       type: 'simple',
@@ -23,7 +23,7 @@
     };
   }
 
-  $: databases = [...$dbStore.data.values()];
+  $: databases = [...$dbStore.successfulConnections.values()];
 </script>
 
 <BreadcrumbSelector

mathesar_ui/src/components/breadcrumb/EntitySelector.svelte

@@ -6,7 +6,10 @@
   } from '@mathesar/stores/tables';
   import type { TableEntry } from '@mathesar/api/types/tables';
   import { getExplorationPageUrl } from '@mathesar/routes/urls';
-  import type { Database, SchemaEntry } from '@mathesar/AppTypes';
+  import type {
+    SuccessfullyConnectedDatabase,
+    SchemaEntry,
+  } from '@mathesar/AppTypes';
   import { iconTable } from '@mathesar/icons';
   import { queries as queriesStore } from '@mathesar/stores/queries';
   import type { QueryInstance } from '@mathesar/api/types/queries';
@@ -18,7 +21,7 @@
     BreadcrumbSelectorEntryForTable,
   } from './breadcrumbTypes';
 
-  export let database: Database;
+  export let database: SuccessfullyConnectedDatabase;
   export let schema: SchemaEntry;
 
   function makeTableBreadcrumbSelectorItem(

mathesar_ui/src/components/breadcrumb/SchemaSelector.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
-  import type { Database, SchemaEntry } from '@mathesar/AppTypes';
+  import type {
+    SuccessfullyConnectedDatabase,
+    SchemaEntry,
+  } from '@mathesar/AppTypes';
   import { iconSchema } from '@mathesar/icons';
   import { getSchemaPageUrl } from '@mathesar/routes/urls';
   import {
@@ -9,7 +12,7 @@
   import BreadcrumbSelector from './BreadcrumbSelector.svelte';
   import type { BreadcrumbSelectorEntry } from './breadcrumbTypes';
 
-  export let database: Database;
+  export let database: SuccessfullyConnectedDatabase;
 
   function makeBreadcrumbSelectorItem(
     schemaEntry: SchemaEntry,

mathesar_ui/src/components/breadcrumb/breadcrumbTypes.ts

@@ -1,6 +1,10 @@
 import type { QueryInstance } from '@mathesar/api/types/queries';
 import type { TableEntry } from '@mathesar/api/types/tables';
-import type { Database, SchemaEntry } from '@mathesar/AppTypes';
+import type {
+  SuccessfullyConnectedDatabase,
+  Database,
+  SchemaEntry,
+} from '@mathesar/AppTypes';
 import type {
   ComponentAndProps,
   IconProps,
@@ -13,13 +17,13 @@ export interface BreadcrumbItemDatabase {
 
 export interface BreadcrumbItemSchema {
   type: 'schema';
-  database: Database;
+  database: SuccessfullyConnectedDatabase;
   schema: SchemaEntry;
 }
 
 export interface BreadcrumbItemTable {
   type: 'table';
-  database: Database;
+  database: SuccessfullyConnectedDatabase;
   schema: SchemaEntry;
   table: TableEntry;
 }
@@ -33,7 +37,7 @@ export interface BreadcrumbItemSimple {
 
 export interface BreadcrumbItemRecord {
   type: 'record';
-  database: Database;
+  database: SuccessfullyConnectedDatabase;
   schema: SchemaEntry;
   table: TableEntry;
   record: {
@@ -44,7 +48,7 @@ export interface BreadcrumbItemRecord {
 
 export interface BreadcrumbItemExploration {
   type: 'exploration';
-  database: Database;
+  database: SuccessfullyConnectedDatabase;
   schema: SchemaEntry;
   query: Pick<QueryInstance, 'id' | 'name'>;
 }

mathesar_ui/src/systems/users-and-permissions/UserFormInput.svelte → mathesar_ui/src/components/form/GridFormInput.svelte

@@ -7,7 +7,7 @@
   } from '@mathesar-component-library';
   import { Field, type FieldStore } from '@mathesar/components/form';
   import type { ComponentWithProps } from '@mathesar-component-library/types';
-  import UserFormInputRow from './UserFormInputRow.svelte';
+  import GridFormInputRow from './GridFormInputRow.svelte';
 
   const labelController = new LabelController();
   $: setLabelControllerInContext(labelController);
@@ -22,7 +22,7 @@
   export let bypassRow = false;
 </script>
 
-<UserFormInputRow bypass={bypassRow}>
+<GridFormInputRow bypass={bypassRow}>
   <div class="left cell">
     <Label controller={labelController}>
       {label}
@@ -39,7 +39,7 @@
       </div>
     {/if}
   </div>
-</UserFormInputRow>
+</GridFormInputRow>
 
 <style lang="scss">
   .left {
@@ -48,5 +48,12 @@
     justify-content: end;
     margin-right: var(--size-large);
     padding-top: var(--size-ultra-small);
+    margin-left: var(--size-large);
+  }
+
+  .help {
+    color: var(--slate-500);
+    margin-top: var(--size-extreme-small);
+    font-size: var(--size-small);
   }
 </style>

mathesar_ui/src/pages/admin-users/AdminNavigation.svelte

@@ -1,10 +1,15 @@
 <script lang="ts">
   import { active } from 'tinro';
   import { Menu, MenuItemContents } from '@mathesar-component-library';
-  import { iconSettingsMajor, iconMultipleUsers } from '@mathesar/icons';
+  import {
+    iconSettingsMajor,
+    iconMultipleUsers,
+    iconDatabase,
+  } from '@mathesar/icons';
   import {
     ADMIN_UPDATE_PAGE_URL,
     ADMIN_USERS_PAGE_URL,
+    DATABASE_CONNECTION_LIST_URL,
   } from '@mathesar/routes/urls';
   import { getReleaseDataStoreFromContext } from '@mathesar/stores/releases';
 
@@ -36,12 +41,22 @@
     >
       <MenuItemContents icon={iconMultipleUsers}>Users</MenuItemContents>
     </a>
+    <a
+      role="menuitem"
+      href={DATABASE_CONNECTION_LIST_URL}
+      class="menu-item menu-item-link"
+      use:active
+    >
+      <MenuItemContents icon={iconDatabase}
+        >Database Connection</MenuItemContents
+      >
+    </a>
   </Menu>
 </div>
 
 <style lang="scss">
   .admin-navigation {
-    font-size: var(--text-size-large);
+    font-size: var(--text-size-base);
     --min-width: 100%;
     --Menu__item-border-radius: var(--border-radius-m);
     --Menu__item-hover-background: var(--sand-100);

mathesar_ui/src/pages/data-explorer/DataExplorerPage.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import { router } from 'tinro';
-  import type { Database, SchemaEntry } from '@mathesar/AppTypes';
+  import type {
+    SuccessfullyConnectedDatabase,
+    SchemaEntry,
+  } from '@mathesar/AppTypes';
   import LayoutWithHeader from '@mathesar/layouts/LayoutWithHeader.svelte';
   import { DataExplorer } from '@mathesar/systems/data-explorer';
   import type { QueryManager } from '@mathesar/systems/data-explorer/types';
@@ -13,7 +16,7 @@
 
   const userProfile = getUserProfileStoreFromContext();
 
-  export let database: Database;
+  export let database: SuccessfullyConnectedDatabase;
   export let schema: SchemaEntry;
   export let queryManager: QueryManager;