Merge pull request #3326 from mathesar-foundation/db_connections_page

Db Connections page and Welcome page

mathesar/urls.py

@@ -53,12 +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'),
+    path('connections/', views.connections, name='connections'),
     path('db/<db_name>/', views.schemas, name='schemas'),
     path('i18n/', include('django.conf.urls.i18n')),
     re_path(

mathesar/views.py

@@ -283,12 +283,24 @@ def reflect_all(_):
 
 @login_required
 def home(request):
-    database = get_current_database(request, None)
-    if database is None:
+    connection_list = get_database_list(request)
+    number_of_connections = len(connection_list)
+    if number_of_connections > 1:
+        return redirect('connections')
+    elif number_of_connections == 1:
+        db = connection_list[0]
+        return redirect('schemas', db_name=db['nickname'])
+    else:
         return render(request, 'mathesar/index.html', {
-            'common_data': get_common_data(request, database)
+            'common_data': get_common_data(request)
         })
-    return redirect('schemas', db_name=database.name)
+
+
+@login_required
+def connections(request):
+    return render(request, 'mathesar/index.html', {
+        'common_data': get_common_data(request)
+    })
 
 
 @login_required
@@ -322,28 +334,6 @@ 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/App.svelte

@@ -150,6 +150,13 @@
     font-weight: 500;
   }
 
+  hr {
+    margin: 0;
+    border: 0;
+    border-top: 1px solid var(--slate-200);
+    display: block;
+  }
+
   a {
     color: inherit;
   }

mathesar_ui/src/AppTypes.ts

@@ -1,5 +1,6 @@
 import type { TreeItem } from '@mathesar-component-library/types';
 
+/** @deprecated Use either Connection or ConnectionModel interface instead */
 export interface Database {
   id: number;
   nickname: string;

mathesar_ui/src/api/connections.ts

@@ -0,0 +1,53 @@
+import type { Database } from '@mathesar/AppTypes';
+import {
+  getAPI,
+  patchAPI,
+  type PaginatedResponse,
+  deleteAPI,
+  addQueryParamsToUrl,
+} from './utils/requestUtils';
+
+export type Connection = Database;
+
+interface ConnectionWithPassword extends Connection {
+  password: string;
+}
+
+export type UpdatableConnectionProperties = Omit<
+  ConnectionWithPassword,
+  'id' | 'nickname'
+>;
+
+function list() {
+  return getAPI<PaginatedResponse<Connection>>(
+    '/api/db/v0/connections/?limit=500',
+  );
+}
+
+function update(
+  connectionId: Connection['id'],
+  properties: Partial<UpdatableConnectionProperties>,
+) {
+  return patchAPI<Connection>(
+    `/api/db/v0/connections/${connectionId}/`,
+    properties,
+  );
+}
+
+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/component-library/common/styles/variables.scss

@@ -76,12 +76,12 @@
   --size-xx-small: 0.5715rem; // 8px
   --size-x-small: 0.7143rem; // 10px
   --size-small: 0.8572rem; // 12px
-  --size-base: 1rem; // 1rem/16.00px
-  --size-large: 1.2rem; //1.44rem/23.04px
-  --size-x-large: 1.44rem; // 1.44rem/23.04px
-  --size-xx-large: 1.728rem; // 1.728rem/27.65px
-  --size-ultra-large: 2.074rem; //2.074rem/33.18px
-  --size-super-ultra-large: 2.488rem; //2.488rem/39.81px
+  --size-base: 1rem; // 14px
+  --size-large: 1.2rem; // 16.8px
+  --size-x-large: 1.44rem; // 20.2px
+  --size-xx-large: 1.728rem; // 24.2px
+  --size-ultra-large: 2.074rem; // 29px
+  --size-super-ultra-large: 2.488rem; // 34.8px
 
   --border-radius-xs: 0.071rem; //1px
   --border-radius-s: 0.142rem; //2px

mathesar_ui/src/component-library/icon/Icon.svelte

@@ -66,8 +66,9 @@
 <svg
   version="1.1"
   viewBox="0 0 {viewBoxWidth} {viewBoxHeight}"
-  width={size}
-  height={size}
+  style:font-size={size}
+  width="1em"
+  height="1em"
   class={faClasses}
   class:fa-spin={spin}
   class:fa-pulse={pulse}

mathesar_ui/src/component-library/icon/__meta__/Icon.test.ts

@@ -25,8 +25,7 @@ test('renders icon with size prop as height and width', () => {
 
   const icon = getByRole('presentation');
   expect(icon).toBeInTheDocument();
-  expect(icon).toHaveAttribute('width', '20px');
-  expect(icon).toHaveAttribute('height', '20px');
+  expect(icon).toHaveAttribute('style', 'font-size: 20px;');
 });
 
 test('renders icon based on passed props', () => {

mathesar_ui/src/component-library/tutorial/Tutorial.svelte

@@ -4,9 +4,11 @@
 </script>
 
 <div class={['tutorial', classes].join(' ')}>
-  <div class="title-and-meta">
-    <div class="title"><slot name="title" /></div>
-  </div>
+  {#if $$slots.title}
+    <div class="title-and-meta">
+      <div class="title"><slot name="title" /></div>
+    </div>
+  {/if}
   {#if $$slots.body}
     <div class="body"><slot name="body" /></div>
   {/if}

mathesar_ui/src/components/AppHeader.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { router } from 'tinro';
+  import { _ } from 'svelte-i18n';
   import { preloadCommonData } from '@mathesar/utils/preloadData';
   import {
     DropdownMenu,
@@ -12,6 +13,7 @@
   import ButtonMenuItem from '@mathesar/component-library/menu/ButtonMenuItem.svelte';
   import {
     iconAddNew,
+    iconConnection,
     iconDatabase,
     iconExploration,
     iconLogout,
@@ -21,6 +23,7 @@
   } from '@mathesar/icons';
   import {
     ADMIN_URL,
+    CONNECTIONS_URL,
     getDatabasePageUrl,
     getDataExplorerPageUrl,
     getImportPageUrl,
@@ -126,6 +129,9 @@
             {$userProfile.getDisplayName()}
           </LinkMenuItem>
           <MenuDivider />
+          <LinkMenuItem icon={iconConnection} href={CONNECTIONS_URL}>
+            {$_('database_connections')}
+          </LinkMenuItem>
           {#if $userProfile.isSuperUser}
             <LinkMenuItem
               icon={iconSettingsMajor}

mathesar_ui/src/components/DocsLink.svelte

@@ -5,10 +5,12 @@
   https://docs.mathesar.org
 -->
 <script lang="ts">
+  import { getDocsLink } from '@mathesar/routes/urls';
+
   /** Should begin with a forward slash */
   export let path: string;
 
-  $: href = `https://docs.mathesar.org${path}`;
+  $: href = getDocsLink(path);
 </script>
 
 <a {href} target="_blank">

mathesar_ui/src/components/EntityContainerWithFilterBar.svelte

@@ -17,6 +17,7 @@
   .container {
     display: flex;
     flex-direction: column;
+    align-self: stretch;
 
     > :global(* + *) {
       margin-top: 1rem;

mathesar_ui/src/components/breadcrumb/Breadcrumb.svelte

@@ -5,7 +5,6 @@
 
   const items = getBreadcrumbItemsFromContext();
 
-  $: showRoot = $items.every((i) => i.type !== 'database');
   /**
    * When we have lots of items, tell each one that they can simplify
    * themselves on narrow viewports.
@@ -14,11 +13,9 @@
 </script>
 
 <div class="breadcrumb">
-  {#if showRoot}
-    <LogoAndNameWithLink href="/" />
-  {/if}
+  <LogoAndNameWithLink href="/" {hasResponsiveAbridgement} />
   {#each $items as item}
-    <BreadcrumbItem {item} {hasResponsiveAbridgement} />
+    <BreadcrumbItem {item} />
   {/each}
 </div>
 

mathesar_ui/src/components/breadcrumb/BreadcrumbItem.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { _ } from 'svelte-i18n';
   import DatabaseName from '@mathesar/components/DatabaseName.svelte';
   import SchemaName from '@mathesar/components/SchemaName.svelte';
   import TableName from '@mathesar/components/TableName.svelte';
@@ -8,32 +9,33 @@
     getExplorationPageUrl,
     getRecordPageUrl,
     getSchemaPageUrl,
+    CONNECTIONS_URL,
   } from '@mathesar/routes/urls';
   import { StringOrComponent } from '@mathesar/component-library';
-  import { iconExploration, iconRecord } from '@mathesar/icons';
+  import { iconExploration, iconRecord, iconConnection } from '@mathesar/icons';
   import { getLinkForTableItem } from '@mathesar/utils/tables';
   import BreadcrumbLink from './BreadcrumbLink.svelte';
   import type { BreadcrumbItem } from './breadcrumbTypes';
   import DatabaseSelector from './DatabaseSelector.svelte';
   import EntitySelector from './EntitySelector.svelte';
   import SchemaSelector from './SchemaSelector.svelte';
-  import LogoAndNameWithLink from './LogoAndNameWithLink.svelte';
   import BreadcrumbRecordSelector from './BreadcrumbRecordSelector.svelte';
   import BreadcrumbPageSeparator from './BreadcrumbPageSeparator.svelte';
   import RecordSummary from '../RecordSummary.svelte';
 
   export let item: BreadcrumbItem;
-  /** When true, this item will hide some of its UI for narrow viewports */
-  export let hasResponsiveAbridgement = false;
 </script>
 
-{#if item.type === 'database'}
-  <div class="breadcrumb-item">
-    <LogoAndNameWithLink
-      href={getDatabasePageUrl(item.database.nickname)}
-      {hasResponsiveAbridgement}
-    />
+{#if item.type === 'connectionList'}
+  <DatabaseSelector />
+  <div class="breadcrumb-item truncate">
+    <BreadcrumbLink href={CONNECTIONS_URL}>
+      <NameWithIcon icon={iconConnection}>
+        {$_('connections')}
+      </NameWithIcon>
+    </BreadcrumbLink>
   </div>
+{:else if item.type === 'database'}
   <DatabaseSelector />
   <div class="breadcrumb-item truncate">
     <BreadcrumbLink href={getDatabasePageUrl(item.database.nickname)}>