Persist active user settings tab in URL hash#3194
Conversation
…-tab-is-not-persisted-when-switching-between-edit-and-view-mode
WalkthroughThis PR persists the active user settings tab in the URL hash. UserTabSection reads/writes ChangesTab Persistence in User Settings
🎯 3 (Moderate) | ⏱️ ~25 minutes Suggested labels: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. 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. 🚀 New features to boost your workflow:
|
PILOS
|
||||||||||||||||||||||||||||
| Project |
PILOS
|
| Branch Review |
3169-user-settings-tab-is-not-persisted-when-switching-between-edit-and-view-mode
|
| Run status |
|
| Run duration | 07m 30s |
| Commit |
|
| Committer | Sabrina Wüst |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
|
|
0
|
|
|
0
|
|
|
0
|
|
|
0
|
|
|
635
|
| View all changes introduced in this branch ↗︎ | |
There was a problem hiding this comment.
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
📒 Files selected for processing (13)
CHANGELOG.mdresources/js/components/UserTabSection.vueresources/js/views/AdminUsersView.vuetests/Frontend/e2e/AdminUsersEdit.cy.jstests/Frontend/e2e/AdminUsersEditBase.cy.jstests/Frontend/e2e/AdminUsersEditEmail.cy.jstests/Frontend/e2e/AdminUsersEditOthers.cy.jstests/Frontend/e2e/AdminUsersEditSecurity.cy.jstests/Frontend/e2e/AdminUsersView.cy.jstests/Frontend/e2e/AdminUsersViewUserActions.cy.jstests/Frontend/e2e/UserProfileEmail.cy.jstests/Frontend/e2e/UserProfileOthers.cy.jstests/Frontend/e2e/UserProfileSecurity.cy.js
| @update-user="updateUser" | ||
| @busy="(state) => (isBusy = state)" | ||
| @loading-action="(state) => (isLoadingAction = state)" | ||
| @active-tab-changed="(tab) => (currentUserTab = tab)" |
There was a problem hiding this comment.
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.
…-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
Fixes #3169
Type
Checklist
Changes
UserTabSectionsimilar to the approach used inRoomTabSectionSummary by CodeRabbit