Skip to content

Persist active user settings tab in URL hash#3194

Open
Sabr1n4W wants to merge 9 commits into
developfrom
3169-user-settings-tab-is-not-persisted-when-switching-between-edit-and-view-mode
Open

Persist active user settings tab in URL hash#3194
Sabr1n4W wants to merge 9 commits into
developfrom
3169-user-settings-tab-is-not-persisted-when-switching-between-edit-and-view-mode

Conversation

@Sabr1n4W
Copy link
Copy Markdown
Contributor

@Sabr1n4W Sabr1n4W commented Jun 2, 2026

Fixes #3169

Type

  • Bugfix
  • Feature
  • Documentation
  • Refactoring (e.g. Style updates, Test implementation, etc.)
  • Other (please describe):

Checklist

  • Code updated to current develop branch head
  • Passes CI checks
  • Is a part of an issue
  • Tests added for the bugfix or newly implemented feature, describe below why if not
  • Changelog is updated
  • Documentation of code and features exists

Changes

  • Persist active user settings tab in URL hash
    • This makes sure that the tab is preserved when reloading the page, saving changes or switching between edit and view mode
  • Refactor UserTabSection similar to the approach used in RoomTabSection

Summary by CodeRabbit

  • New Features
    • User settings pages now preserve your selected tab across reloads, saving, and switching between edit and view modes.
  • Tests
    • End-to-end tests updated and expanded to assert tab-preserving behavior, redirects, and handling of invalid tab hashes across profiles and admin user flows.

@Sabr1n4W Sabr1n4W self-assigned this Jun 2, 2026
@Sabr1n4W Sabr1n4W added the UI User Interface label Jun 2, 2026
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Jun 2, 2026

Review Change Stack

Walkthrough

This PR persists the active user settings tab in the URL hash. UserTabSection reads/writes hash-params.tab and emits changes; AdminUsersView includes the tab hash in navigation and redirects; E2E tests and CHANGELOG updated to assert and document the behavior.

Changes

Tab Persistence in User Settings

Layer / File(s) Summary
Tab state management in UserTabSection component
resources/js/components/UserTabSection.vue
UserTabSection renders tabs from a computed availableTabs, initializes activeTab from URL hash-params.tab, syncs changes to hashParams.tab, and emits activeTabChanged.
AdminUsersView tab state wiring
resources/js/views/AdminUsersView.vue
Adds currentUserTab and tabHash, listens for active-tab-changed, and includes hash: tabHash in edit/cancel navigation and post-update redirects.
Admin pages E2E test coverage
tests/Frontend/e2e/AdminUsers*.cy.js, tests/Frontend/e2e/AdminUsersView*.cy.js, tests/Frontend/e2e/AdminUsersViewUserActions.cy.js
E2E specs updated to navigate/assert via `#tab=base
Profile pages E2E test coverage
tests/Frontend/e2e/UserProfile*.cy.js
Profile E2E tests navigate directly to /profile#tab=..., assert URL hash presence, and include an invalid-hash fallback test.
Changelog documentation
CHANGELOG.md
Adds Unreleased entry noting tab persistence and reference links to related issues.

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested labels: frontend, Complete - Waiting for review

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title 'Persist active user settings tab in URL hash' is concise, clear, and accurately describes the main objective of the pull request.
Linked Issues check ✅ Passed The code changes fully implement the requirements from issue #3169 by persisting the active tab via URL hash across page reloads, mode switches, and save operations.
Out of Scope Changes check ✅ Passed All changes are directly related to persisting the user settings tab in the URL hash; no out-of-scope modifications were introduced.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check ✅ Passed The pull request description follows the template structure with fixes reference, type selection, completed checklist, and clear change descriptions.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch 3169-user-settings-tab-is-not-persisted-when-switching-between-edit-and-view-mode

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@codecov
Copy link
Copy Markdown

codecov Bot commented Jun 2, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.13%. Comparing base (667335a) to head (78b58e6).

Additional details and impacted files
@@            Coverage Diff             @@
##             develop    #3194   +/-   ##
==========================================
  Coverage      97.13%   97.13%           
  Complexity      1948     1948           
==========================================
  Files            476      476           
  Lines          16492    16500    +8     
  Branches        2402     2401    -1     
==========================================
+ Hits           16020    16028    +8     
  Misses           472      472           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

@cypress
Copy link
Copy Markdown

cypress Bot commented Jun 2, 2026

PILOS    Run #3079

Run Properties:  status check passed Passed #3079  •  git commit 78b58e681e: Persist active user settings tab in URL hash
Project PILOS
Branch Review 3169-user-settings-tab-is-not-persisted-when-switching-between-edit-and-view-mode
Run status status check passed Passed #3079
Run duration 07m 30s
Commit git commit 78b58e681e: Persist active user settings tab in URL hash
Committer Sabrina Wüst
View all properties for this run ↗︎

Test results
Tests that failed  Failures 0
Tests that were flaky  Flaky 0
Tests that did not run due to a developer annotating a test with .skip  Pending 0
Tests that did not run due to a failure in a mocha hook  Skipped 0
Tests that passed  Passing 635
View all changes introduced in this branch ↗︎

@Sabr1n4W Sabr1n4W marked this pull request as ready for review June 2, 2026 08:05
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@resources/js/views/AdminUsersView.vue`:
- Line 64: currentUserTab is initialized only after UserTabSection emits which
ignores direct URL hashes; change it to derive its initial value from the router
hash and keep it in sync. Initialize currentUserTab (or tabHash if present) from
useRoute().hash (or route.hash) on component setup, add a watcher on route.hash
to update currentUserTab when the URL changes, and ensure emissions from
UserTabSection still update the same ref so links and post-save redirects use
the route hash as the source of truth. Update all places referencing
currentUserTab (including the edit/cancel link builders and post-save redirect
logic) so they read from this ref derived from the route hash.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 7e14ec17-4a53-44dc-ae70-9cc55dd539a3

📥 Commits

Reviewing files that changed from the base of the PR and between 6d074e9 and 942dc3f.

📒 Files selected for processing (13)
  • CHANGELOG.md
  • resources/js/components/UserTabSection.vue
  • resources/js/views/AdminUsersView.vue
  • tests/Frontend/e2e/AdminUsersEdit.cy.js
  • tests/Frontend/e2e/AdminUsersEditBase.cy.js
  • tests/Frontend/e2e/AdminUsersEditEmail.cy.js
  • tests/Frontend/e2e/AdminUsersEditOthers.cy.js
  • tests/Frontend/e2e/AdminUsersEditSecurity.cy.js
  • tests/Frontend/e2e/AdminUsersView.cy.js
  • tests/Frontend/e2e/AdminUsersViewUserActions.cy.js
  • tests/Frontend/e2e/UserProfileEmail.cy.js
  • tests/Frontend/e2e/UserProfileOthers.cy.js
  • tests/Frontend/e2e/UserProfileSecurity.cy.js

@update-user="updateUser"
@busy="(state) => (isBusy = state)"
@loading-action="(state) => (isLoadingAction = state)"
@active-tab-changed="(tab) => (currentUserTab = tab)"
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Initialize the tab from the route hash instead of defaulting to "base".

currentUserTab only changes after UserTabSection emits, so on direct visits/reloads like ...#tab=email this view still builds edit/cancel links and the post-save redirect with #tab=base. That means the tab can still reset even though the URL already contains the correct tab. Make the route hash the source of truth here (useRoute().hash or a watcher on it) and derive tabHash from that state.

Suggested direction
-import { ref, computed, inject, watch } from "vue";
+import { ref, computed, inject, watch } from "vue";
 import { useUserPermissions } from "../composables/useUserPermission.js";
 import { useSettingsStore } from "../stores/settings";
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";

 const router = useRouter();
+const route = useRoute();
 ...
-const currentUserTab = ref("base");
+const currentUserTab = computed(() => {
+  const params = new URLSearchParams(route.hash.replace(/^`#/`, ""));
+  return params.get("tab") ?? "base";
+});

 const tabHash = computed(() => {
-  return "`#tab`=" + currentUserTab.value;
+  return "`#tab`=" + currentUserTab.value;
 });

If you still want a local ref, initialize it from route.hash and watch route.hash so browser navigation and direct hashed loads stay in sync.

Also applies to: 81-104, 118-122

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@resources/js/views/AdminUsersView.vue` at line 64, currentUserTab is
initialized only after UserTabSection emits which ignores direct URL hashes;
change it to derive its initial value from the router hash and keep it in sync.
Initialize currentUserTab (or tabHash if present) from useRoute().hash (or
route.hash) on component setup, add a watcher on route.hash to update
currentUserTab when the URL changes, and ensure emissions from UserTabSection
still update the same ref so links and post-save redirects use the route hash as
the source of truth. Update all places referencing currentUserTab (including the
edit/cancel link builders and post-save redirect logic) so they read from this
ref derived from the route hash.

Sabr1n4W added 3 commits June 5, 2026 16:37
…-tab-is-not-persisted-when-switching-between-edit-and-view-mode

# Conflicts:
#	CHANGELOG.md
…-tab-is-not-persisted-when-switching-between-edit-and-view-mode
@Sabr1n4W Sabr1n4W requested a review from samuelwei June 5, 2026 15:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

UI User Interface

Projects

None yet

Development

Successfully merging this pull request may close these issues.

User settings tab is not persisted when switching between edit and view mode

1 participant