Skip to content

feat: redesign admin user and group edit panels - #3489

Merged
AlexAndBear merged 3 commits into
mainfrom
refactor/compare-save-dialog
Sep 30, 2026
Merged

AlexAndBear merged 3 commits into
mainfrom
refactor/compare-save-dialog

Conversation

@AlexAndBear

@AlexAndBear AlexAndBear commented Sep 29, 2026 •

Copy link
Copy Markdown
Member

Description

Redesigns the edit panels for users and groups in the admin settings and simplifies the code behind the Revert/Save dialog.

Screenshots

Before After
Users before-user after-user
Groups before-group after-group

Layout

  • Sections instead of one long form: the user form is split into "Profile" (user name, name, email), "Access" (password, login, role, quota) and "Membership" (groups). Groups get a "Group" section. Each section is a rounded card with the same background as the sidebar's "no selection" panel. Why: related fields are grouped, so the form is easier to scan.
  • Revert/Save at the bottom: the panel now fills the sidebar height, and the Revert/Save row always sits at the bottom. Why: the actions have a fixed place and don't jump around depending on the form length.
  • Same paddings as the details panel: the cards line up with the details panel of the same user or group. Why: switching between Details and Edit no longer shifts the content.
  • "Login allowed" is a switch under the password: instead of a select with "Allowed"/"Forbidden". Why: it's a yes/no setting, and a switch shows that directly.
  • Consistent field spacing: Role and Personal quota now reserve a message line like the text inputs. OcSelect didn't give its message line a height, so fix-message-line had no effect when the line was empty. It now uses the same mt-1 min-h-4.5 as OcTextInput. Why: all fields have the same vertical rhythm.
  • Check icon for "Changes saved", and the message goes back to the initial state after 3 seconds. Why: a stale "Changes saved" is misleading once the user moves on.
  • User details follow the form order: in the details panel, Login now comes before Role, and "Quota" is renamed to "Personal quota" like in the form. Why: the same fields appear in the same order with the same names in both panels.

Code

  • No more global event bus for the saved state: CompareSaveDialog used to subscribe to sidebar.entity.saved, and the edit panels published that event after saving. The dialog now gets a saved prop (v-model:saved). Why: the state is local to the panel, and the dialog no longer reacts to saves from anywhere else in the app. Its two watchers for resetting the state are gone too.
  • Removed a dead publish: TagsSelect published sidebar.entity.saved, but nothing was listening to it.
  • Removed dead components: UserInfoBox and GroupInfoBox were no longer registered after the sidebar header refactoring and only rendered as unknown elements. The tags and the files are removed.
  • Groups EditPanel uses <script setup>: it was a mix of Options API and setup() with an emits that was never emitted. Why: it now follows the project conventions and matches the Users panel.
  • Smaller cleanups: the Users panel compares against user directly instead of a cloneDeep copy, and invalidFormData uses some().
  • Password is cleared on Revert: OcTextInputPassword copied its value prop into a local ref only once, so resetting it from outside had no effect. It now syncs changes of value.

Notes for reviewers

  • CompareSaveDialog and OcSelect are part of the public web-pkg/design-system packages. Extensions that published sidebar.entity.saved to show "Changes saved" need to pass the saved prop instead, and selects with fix-message-line or a description now get the same message-line spacing as text inputs.
  • The form validation is unchanged: formData.*.valid stays, because it keeps Save disabled while the async "already exists" check is running.
  • The sidebar sub-panel body now passes flex-1 flex-col down to the panel component, so sub-panels can fill the height. I checked the file sharing panel, which looks unchanged.

Related Issue

  • Fixes <issue_link>

How Has This Been Tested?

  • test environment: local dev setup (Vite dev server + OpenCloud backend via docker-compose), Chromium; Vitest
  • test case 1: edit a group: rename it, "Unsaved changes" appears, Save shows "Changes saved" with a check icon, which resets after 3 seconds
  • test case 2: edit a user: toggle "Login allowed" (dialog shows unsaved changes, toggling back shows no changes), save, the list shows "Forbidden", toggle back and save
  • test case 3: type a password and click Revert: the password field is cleared and the dialog shows "No changes"
  • test case 4: the Details and Edit panels have the same paddings, the Revert/Save row is at the bottom of the sidebar
  • test case 5: the file sharing sub-panel in the files app looks unchanged
  • test case 6: new unit tests for the saved prop and its timeout in CompareSaveDialog and for syncing the value in OcTextInputPassword; the full unit test suite, type check, lint and format pass
  • test case 7: the e2e helper for changing "Login allowed" is updated to the switch (not run locally)

Types of changes

  • Bugfix
  • Enhancement (a change that doesn't break existing code or deployments)
  • Breaking change (a modification that affects current functionality)
  • Technical debt (addressing code that needs refactoring or improvements)
  • Tests (adding or improving tests)
  • Documentation (updates or additions to documentation)
  • Maintenance (like dependency updates or tooling adjustments)

@AlexAndBear
AlexAndBear merged commit 23c3031 into main Sep 30, 2026
31 checks passed
@AlexAndBear
AlexAndBear deleted the refactor/compare-save-dialog branch September 30, 2026 09:26
openclouders pushed a commit that referenced this pull request Sep 30, 2026
* feat: redesign admin user and group edit panels

* fix: increase spacing between user edit panel sections

* fix: align user details sidebar with edit form order
@openclouders openclouders mentioned this pull request Sep 30, 2026
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

2 participants