fix(ui): invitations/org surfaces polish — app-level nudge, toolbar slot, card rhythm#4301
Merged
Merged
Conversation
…ite buttons into the card title Adds an optional named #toolbar slot to core.datatable.component between the title spacer and the search field (named toolbar, not actions, to avoid colliding with the dynamic per-row slots resolved via header.slotName || header.value). Members tab: the Add member button moves from its own row above the card into the toolbar slot, fixing the misalignment with the Details card (data-test org-add-member-open preserved for e2e). Admin Invitations: the Invite button moves into the same slot (top-right of the card, no search on that table) like other admin tabs.
New organizations.pendingInvitationsNudge component mounted in app.vue next to the suggested-join banner: on login (watch isLoggedIn, immediate, once per session) it fetches the user's pending owner_add invitations and shows a centered snackbar (location=center, 8s) with a View action routing to /users/organizations. Replaces the page-local nudge in user.organizations.view (which only showed if the invitee happened to visit My Organizations); the persistent pending list there stays the durable surface. Logout re-arms the nudge for the next session; accepting an invitation drains the shared store list and hides it automatically.
…d gutter mt-4 (16px) -> mt-3 (12px) on the Pending Join Requests and Roles & Permissions cards so the vertical card gaps match the 12px row/column gutter rhythm.
…otices into loginNotices
|
Warning Review limit reached
More reviews will be available in 46 minutes and 8 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more credits in the billing tab to continue. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (2)
WalkthroughThis PR consolidates post-login user feedback surfaces by introducing a toolbar slot pattern for datatable action buttons, unifying suggested-join and pending-invitations nudges into a single component, and removing the legacy component-local nudge from UserOrganizationsView. The refactoring updates the root app component and multiple feature modules. ChangesPost-login nudge consolidation and toolbar slot pattern
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
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 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 @@
## master #4301 +/- ##
=======================================
Coverage 99.58% 99.58%
=======================================
Files 32 32
Lines 1219 1219
Branches 360 360
=======================================
Hits 1214 1214
Misses 5 5 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Pull request overview
This PR consolidates post-login organization notices into a single app-level component and polishes organization/admin surfaces by standardizing card-title actions via a new coreDataTableComponent #toolbar slot.
Changes:
- Replace page-local pending-invitations snackbar + suggested-join banner with a unified app-level
organizations.loginNoticescomponent mounted inapp.vue. - Add
#toolbarslot support tocore.datatable.componentand migrate “Add member” / “Invite” actions into the datatable card title. - Adjust organization general-tab card spacing (
mt-4→mt-3) for consistent rhythm.
Reviewed changes
Copilot reviewed 14 out of 14 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| src/modules/users/views/user.organizations.view.vue | Removes component-local login nudge; relies on app-level notices + shared pending-invitations store state. |
| src/modules/users/tests/user.organizations.view.unit.tests.js | Drops tests that asserted the old view-local nudge behavior. |
| src/modules/organizations/components/organizations.suggestedJoinBanner.component.vue | Deletes the standalone suggested-join banner (replaced by consolidated login notices). |
| src/modules/organizations/tests/organizations.suggestedJoinBanner.component.unit.tests.js | Removes unit tests for the deleted suggested-join banner. |
| src/modules/organizations/components/organizations.loginNotices.component.vue | Adds unified app-level login notices (suggested join + pending-invitations nudge). |
| src/modules/organizations/tests/organizations.loginNotices.component.unit.tests.js | Adds unit tests for the unified login notices behaviors. |
| src/modules/core/components/core.datatable.component.vue | Adds #toolbar slot inside v-card-title to host card-level actions. |
| src/modules/core/tests/core.datatable.component.unit.tests.js | Adds tests for #toolbar slot rendering and non-collision with row #actions. |
| src/modules/organizations/components/organizations.members.component.vue | Moves “Add member” into the datatable card-title toolbar slot for alignment. |
| src/modules/organizations/tests/organizations.members.component.unit.tests.js | Updates datatable stub to render the new #toolbar slot. |
| src/modules/invitations/views/invitations.admin.view.vue | Moves “Invite” button into datatable toolbar slot for consistent admin layout. |
| src/modules/invitations/tests/invitations.admin.view.unit.tests.js | Updates datatable stub to render #toolbar slot. |
| src/modules/organizations/components/organization.general.tab.vue | Adjusts card spacing (mt-3) for consistent vertical rhythm. |
| src/modules/app/app.vue | Mounts organizationsLoginNotices at the app level (replacing suggested-join banner). |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 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 `@src/modules/app/app.vue`:
- Line 39: The app core is directly referencing the optional component
organizationsLoginNotices (and similar optional components at the same
locations), violating the core-module boundary; remove direct imports/usage of
organizationsLoginNotices from the App component and instead render it via the
optional-module self-registration mechanism (e.g., resolve or lookup a
registered optional component by name at runtime or use a plugin-provided
dynamic placeholder), so the core does not hard-code the optional module name;
update App.vue to call the dynamic resolver/placeholder API used by optional
modules and ensure organizations module self-registers that component under the
agreed name (organizationsLoginNotices) so it appears when present.
In
`@src/modules/organizations/components/organizations.loginNotices.component.vue`:
- Around line 135-162: Add a JSDoc block above the component's data function
describing its purpose (one-line summary) and include an `@returns` tag that
documents the returned reactive state object (describe keys: suggested with
visible:boolean, loading:boolean,
feedback:{visible:boolean,color:string,text:string}, and nudge with
announced:boolean,dismissed:boolean). Keep the header concise, include no `@param`
since data takes no args, and ensure the JSDoc is placed immediately above the
data() declaration.
- Around line 211-214: The async watcher handler for isLoggedIn (the async
function named handler in the watcher definition) lacks a JSDoc `@returns`; update
the JSDoc for that handler to include a `@returns` annotation indicating the async
return type (e.g. `@returns` {Promise<void>} or the actual Promise<T> if it
returns a value). Locate the isLoggedIn watcher and its handler and add the
matching `@returns` line so it complies with the async function documentation
guideline.
🪄 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: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: a763fb92-aefa-4eac-960e-cdebb24167bc
📒 Files selected for processing (14)
src/modules/app/app.vuesrc/modules/core/components/core.datatable.component.vuesrc/modules/core/tests/core.datatable.component.unit.tests.jssrc/modules/invitations/tests/invitations.admin.view.unit.tests.jssrc/modules/invitations/views/invitations.admin.view.vuesrc/modules/organizations/components/organization.general.tab.vuesrc/modules/organizations/components/organizations.loginNotices.component.vuesrc/modules/organizations/components/organizations.members.component.vuesrc/modules/organizations/components/organizations.suggestedJoinBanner.component.vuesrc/modules/organizations/tests/organizations.loginNotices.component.unit.tests.jssrc/modules/organizations/tests/organizations.members.component.unit.tests.jssrc/modules/organizations/tests/organizations.suggestedJoinBanner.component.unit.tests.jssrc/modules/users/tests/user.organizations.view.unit.tests.jssrc/modules/users/views/user.organizations.view.vue
💤 Files with no reviewable changes (3)
- src/modules/organizations/tests/organizations.suggestedJoinBanner.component.unit.tests.js
- src/modules/organizations/components/organizations.suggestedJoinBanner.component.vue
- src/modules/users/tests/user.organizations.view.unit.tests.js
The component imports config directly from @/config to gate the nudge fetch on config.organizations. Without mocking this path, a clean checkout without the generated src/config/index.js can fail to import the SFC and the nudge logic is silently skipped. Mock is self-contained and shares the same shape as the lib/services/config mock already present.
Collaborator
Author
|
@coderabbitai resolve |
✅ Action performedComments resolved and changes approved. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
User-feedback UI polish (epic #3808 surfaces, tested live 2026-06-11)
organizations.loginNotices.component.vue, mounted once in app.vue) per follow-up feedback — 21 merged tests, both old components deleted.#toolbarslot on the core datatable (namedtoolbar—actionswould collide with the dynamic per-row slots): card-title actions land left of the search field. Add-member button moved inside the members card (no more layout shift; the two org cards align). e2e selectororg-add-member-openpreserved.mt-4→mt-3on Pending Requests + Roles & Permissions) matching the grid gutter.#toolbarslot + harmonized with the add-member reference (tonal variant, MD3 typography, sized icon).Zero custom CSS (Vuetify utilities + props only), FA icons. Lint clean, build green, all touched suites green (the 2 billing snapshots fail locally only — Vuetify drift, green in CI).
Sibling issues filed from the same feedback: #4296 (activity tab search/actions), #4297 (mailer banner → readiness), Node#3836 (readiness badge analysis).
Part of #3808.
Summary by CodeRabbit
New Features
Improvements