lablup / lablup/backend.ai-webui

Open user settings in a modal over the current page instead of a separate page

Closed
#9,595 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
133
Forks
81
Avg merge
1d 12h
Merged PRs (30d)
355

Description

`/usersettings` is a full page today: opening Preferences or Logs navigates away from whatever the user was doing, and coming back means navigating again. Settings are a detour from the task at hand, not a destination.

Make the settings surface a modal that opens over the current page, the way a desktop app's settings window does: a category rail on the left, the selected pane on the right, and the page the user was on still behind it.

### Scope

- A dialog built on `BAIModal`, with the four existing categories as a left rail: General, Logs, Login Sessions, Login History.
- Driven by a `?settings=` query param on the current location, so refresh restores it, Back closes it in one press, and the URL stays shareable.
- `/usersettings` stays a real route, as a shim that converts the legacy `?tab=` deep links onto the param. It cannot be deleted: `ContainerCommitModal` stores `to: '/usersettings?tab=logs'` as a string in a notification.
- Below the `md` breakpoint the dialog goes fullscreen and the rail becomes a drill-down with a back button.

### Constraints

No functional regression. Every setting, the log list, login sessions and history, and the child modals opened from General (My Keypair, SSH Keypair Management, both shell script editors, the reset confirmations) keep working exactly as they do now, with the same `data-testid`s. This is a UI/UX change only.

### Out of scope

- Regrouping the four categories into a finer rail.
- Updating the user manual, which still describes a page with four tabs. The `#user-settings` / `#general-tab` / `#logs-tab` headings must stay byte-identical either way, because the help button resolves its anchors against them.

JIRA Issue: FR-3903

Contributor guide

No contributing guide indexed for this repository

Research direction

Start at the existing /usersettings route and the BAIModal entry point; inspect how the four categories, child modals, and legacy ?tab= links are currently wired. Done means the settings modal preserves the current page, query-param navigation and route shim work, the responsive drill-down behaves as specified, and existing settings, data-testid values, and child modals remain functional.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Clearly specified
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.