Repository: mathesar-foundation/mathesar

Issue:
Front end work to re-organize DB connections
Per the [DB Connections Page Specs](https://wiki.mathesar.org/design/specs/connections-page/), we need the following changes.

## Database page

- Remove this sidebar

    ![image](https://github.com/centerofci/mathesar/assets/42411/0f603ca2-e2f8-4609-995e-2c7e7e22d6a4)

## Connections page

- Modify route
    - Old: `/administration/db-connection/`
    - New: `/connections/`

- Ensure the header navigation breadcrumb includes: the elephant and name, then the database switcher dropdown, then a "Connections" breadcrumb entry with the [plug](https://fontawesome.com/icons/plug?f=classic&s=solid) icon.

- Implement new page content design ([Figma](https://www.figma.com/file/xHb5oIqye3fnXtb2heRH34/Styling?type=design&node-id=6423-3425&mode=design&t=6oHGsZBIh0abNt5X-0))

    ![image](https://github.com/centerofci/mathesar/assets/42411/999b0d28-e88f-4357-b423-18a9b005f936)

- Leave an empty placeholder modal for the "New Database Connection" form, as to be implemented in #3311.

- Re-organize components to better suit the new location of this page

- Navigation

    - Add "Manage Connections" link within the database switcher dropdown

        ![image](https://github.com/centerofci/mathesar/assets/42411/a14ac7b9-9826-43ce-a43c-de97f0e2d789)

    - Add "Database Connections" link within the top right menu

        ![image](https://github.com/centerofci/mathesar/assets/42411/ba59e208-573c-4acc-9ada-9a017e10c458)

    - Remove "Database Connection" section from Administration navigation

        ![image](https://github.com/centerofci/mathesar/assets/42411/c29bade0-6f7e-429b-8fb8-0c897e398d12)


## Root route

- Modify redirection logic
    - Old: redirect to the database page for the connection with the highest id
    - New: If there is one and only one connection, then redirect to the database page for that connection. Otherwise, redirect to `/connections/`

## Navigation header

- Simplify the elephant logo and "Mathesar" text alongside it.

    - Currently, it's a hyperlink with a dynamic href depending on the current page. For any pages within a database connection, it points to the database page, and for other pages it points to the root route.
    - Instead, it should _always_ point directly to the root route. (No more dynamic behavior.) The navigation behavior when clicking it will then be subject to the redirection logic described above.

---

> **Note**
>
> This ticket is labeled "frontend" because the majority of the changes here are strictly frontend changes. However it will also require a tiny bit of backend changes for the page routing adjustments.



Discussion:
hello can you give me a reply on issue #3289
Hello @seancolsen I would like to work on this issue. Can you please assign it to me.
No @dikwickley, this issue is already assigned.

Resolving patch:
diff --git a/mathesar/urls.py b/mathesar/urls.py
--- a/mathesar/urls.py
+++ b/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(
diff --git a/mathesar/views.py b/mathesar/views.py
--- a/mathesar/views.py
+++ b/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


Test patch:
diff --git a/mathesar_ui/src/component-library/icon/__meta__/Icon.test.ts b/mathesar_ui/src/component-library/icon/__meta__/Icon.test.ts
--- a/mathesar_ui/src/component-library/icon/__meta__/Icon.test.ts
+++ b/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', () => {