UX Reference: Superset-Style Redesign

Persona

Alex, Data Engineer / Superset Admin Alex manages dozens of dashboards across Dev, Staging, and Prod. Alex needs to quickly move changes between environments, check if a dashboard is in sync with Git, and fix mapping issues without losing context.

Context

The current UI is "Tool-Centric" (Go to Migration Tool -> Select Dashboard). The new UI is "Resource-Centric" (Go to Dashboards -> Find "Sales" -> Click Migrate).

Happy Path: Migrating a Dashboard

Discovery: Alex opens the app and lands on the Dashboard Hub.
Selection: Alex selects "Production" from the environment dropdown. The grid populates with production dashboards.
Status Check: Alex sees that "Sales Overview" has a "Diff" status in the Git column.
Action: Alex clicks the [...] menu on the "Sales Overview" row and selects Migrate.
Configuration: A small modal appears asking for the Target Environment. Alex selects "Staging" and clicks "Start".
Monitoring: The modal closes. The "Last Task" column for "Sales Overview" changes to a Spinner.
Contextual Logs: Alex clicks the Spinner. The Task Drawer slides out from the right.
Interaction: The logs show the migration is paused because a database password is required. A password field appears inside the drawer.
Completion: Alex enters the password. The migration finishes. The drawer shows a green "Success" message. Alex closes the drawer and is still looking at the Dashboard Hub list.

Mockups

+-----------------------------------------------------------------------+
| [≡]  Superset Tools     [🔍 Search...]        [Activity (3)]  [👤 ▼] |
+-----------------------------------------------------------------------+

[≡] Hamburger: Mobile-only toggle for sidebar.
Logo: Returns to Home/Dashboard Hub.
Search: Placeholder for future global search.
Activity (3): Badge shows count of running tasks. Clicking opens Task Drawer.
User Menu: Dropdown with Profile, Settings, Logout.

Sidebar (Expanded)

+------------------+
| ▽ DASHBOARDS     |
|   Overview       |
+------------------+
| ▽ DATASETS       |
|   All Datasets   |
+------------------+
| ▽ STORAGE        |
|   Backups        |
|   Repositories   |
+------------------+
| ▽ ADMIN          |
|   Users          |
|   Roles          |
|   Settings       |
+------------------+
| [◀ Collapse]     |
+------------------+

Sidebar (Collapsed)

+---+
| D | (Dashboards - Active)
| T | (Datasets)
| S | (Storage)
+---+
| A | (Admin)
+---+
| ▶ |
+---+

Dashboard Hub Grid

+-----------------------------------------------------------------------+
| Env: [ Production (v) ]                                   [ Refresh ] |
+-----------------------------------------------------------------------+
| Title           | Git Status    | Last Task | Actions                 |
|-----------------|---------------|-----------|-------------------------|
| Sales Report    | [v] main      | [v] Done  | [ Migrate ] [ Backup ]  |
| HR Analytics    | [!] Diff      | [@] Run.. | [ Commit ]  [ ... ]     |
+-----------------------------------------------------------------------+

Settings Page (Consolidated)

+-----------------------------------------------------------------------+
| Settings                                                              |
+-----------------------------------------------------------------------+
| [Environments]  [Connections]  [LLM Providers]  [Logging]  [System]   |
+-----------------------------------------------------------------------+
|                                                                       |
|  Environments                                                         |
|  +-------------------------------------------------------------+     |
|  | Name         | URL                    | Status   | Actions |     |
|  |--------------|------------------------|----------|---------|     |
|  | Development  | http://dev.superset... | [v] OK   | [Edit]  |     |
|  | Production   | http://prod.superset...| [!] Error| [Edit]  |     |
|  +-------------------------------------------------------------+     |
|                                                                       |
+-----------------------------------------------------------------------+

Task Drawer (Active)

          +---------------------------------------+
          | Task: Migration (Sales)           [X] |
          +---------------------------------------+
          | [INFO] Exporting...                   |
          | [INFO] Validating...                  |
          | [WARN] Password required              |
          |                                       |
          | Password: [**********]                |
          | [ Resume ] [ Cancel ]                 |
          +---------------------------------------+

Error Experience

Scenario: Migration Fails

Visual Cue: The "Last Task" badge in the grid turns Red (X).
Notification: A toast message appears: "Migration Failed: Database Connection Error".
Resolution: Alex clicks the Red (X). The Task Drawer opens, scrolled to the bottom, highlighting the error in red. Alex can see the full stack trace or error message to debug.

Scenario: Environment Offline

Visual Cue: When selecting an environment, a "Connection Error" banner appears at the top of the grid.
Action: The "Refresh" button turns into a "Retry" button.

5.5 KiB Raw Blame History