feat(frontend/permissions): hide sections + buttons users can't access (closes #365)

[cristim]

Summary

• Adds frontend/src/permissions.ts — a hasPermission(verb, resource) helper that consults the /api/auth/session response to derive what the current session can do.
• Adds frontend/src/permissions.generated.ts — role-default capability sets generated from Go source via cmd/gen-permissions/main.go, so frontend defaults stay in sync with backend RBAC without manual copying.
• Conditionally hides the sidebar Admin tab, bulk Purchase / Create Plan buttons on Recommendations, plan write actions, Exchange buttons on RI Exchange, and Settings write controls based on session permissions rather than toasting "admin access required" on click.
• Adds permission-focused Jest test suites for each gated section (plans, recommendations, riexchange, settings) plus a permissions.test.ts unit test for the helper itself.

Test plan

• cd frontend && npm test — all permission test suites pass
• Log in as a non-admin user: Admin sidebar tab is hidden, bulk purchase buttons absent, Exchange buttons absent, Settings fields read-only
• Log in as admin: all controls visible

Closes #365

Summary by CodeRabbit

Release Notes

• New Features
  • Added role-based permission gating across the application, restricting admin-exclusive features based on user role
  • Settings page now enforces read-only mode for non-admin users
  • Plans, recommendations, and RI Exchange features now respect user permissions for creation, editing, and execution

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

This PR implements comprehensive role-based permission gating across the frontend by adding a backend-to-frontend permission code generator, a TypeScript permission helper module, and permission-aware UI gating throughout plans, recommendations, RI Exchange, settings, and navigation based on user roles and permissions.

Changes

Role-based permission gating implementation

Layer / File(s)	Summary
Backend-to-frontend permission code generation cmd/gen-permissions/main.go, frontend/src/permissions.generated.ts, .pre-commit-config.yaml	Go generator converts backend default permission constants into three TypeScript readonly permission sets (ADMIN_PERMS, USER_PERMS, READONLY_PERMS). Pre-commit hook validates generated file stays in sync with backend and generator.
Permission helper module and type contracts frontend/src/permissions.ts, frontend/src/auth.ts, frontend/src/__tests__/permissions.test.ts	Core canAccess(action, resource) and getRolePermissions(role) helpers with closed-union Action and Resource types. Auth module delegates isAdmin() to the canonical permissions implementation. Comprehensive unit tests cover all roles and permission scenarios.
Shared permission model update frontend/src/users/userList.ts	Update role-to-permission mapping to use shared getRolePermissions() helper instead of hardcoded role-switch logic, establishing single source of truth.
Plans page permission gating frontend/src/plans.ts, frontend/src/__tests__/plans-permissions.test.ts, frontend/src/__tests__/plans.test.ts	Gate create/update/delete buttons based on create:plans, update:plans, delete:plans permissions; hide New Plan button and row actions for unauthorized users while keeping History visible. Test mock adds default admin user for consistent test context.
Recommendations page permission gating frontend/src/recommendations.ts, frontend/src/__tests__/recommendations-permissions.test.ts, frontend/src/__tests__/recommendations.test.ts	Hide Purchase and Create Plan buttons in bottom action box via hidden property based on execute:purchases and create:plans permissions. Test mock adds default admin user and comprehensive role-based button visibility tests.
RI Exchange and Settings permission gating frontend/src/riexchange.ts, frontend/src/settings.ts, frontend/src/__tests__/riexchange-permissions.test.ts, frontend/src/__tests__/settings-permissions.test.ts	Hide RI Exchange action columns and buttons for non-admin users; gate settings form writes by disabling controls and hiding Save/Reset for non-admin sessions. Comprehensive tests verify visibility gating across all roles.
Navigation and top-level UI gating frontend/src/index.html, frontend/src/styles/base.css, frontend/src/__tests__/html.test.ts	Add admin-only CSS class to Admin tab button to hide it for non-admin users. Update visibility CSS rule to use display: revert for proper cascade behavior. Add regression test asserting Admin button has correct class.

Sequence Diagram(s)

sequenceDiagram
    participant User as Non-Admin User
    participant UI as Page UI
    participant canAccess as canAccess(action, resource)
    participant state as state.getCurrentUser()
    participant PermSet as getRolePermissions(role)
    
    User->>UI: Navigate to Plans page
    UI->>canAccess: check 'create:plans'
    canAccess->>state: read current user role
    state-->>canAccess: role='user'
    canAccess->>PermSet: lookup 'user' permissions
    PermSet-->>canAccess: USER_PERMS (no 'create:plans')
    canAccess-->>UI: false
    UI->>UI: Hide 'Create Plan' button
    UI-->>User: Page renders without create button

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

• LeanerCloud/CUDly#275: Modifies recommendations bottom action box behavior, main PR gates buttons via permission checks while retrieved PR updates them based on purchase target selection.
• LeanerCloud/CUDly#452: Same permission-gating work across frontend—permissions module, permission helpers, canAccess checks, and admin-only UI class—likely a related or duplicate effort.
• LeanerCloud/CUDly#299: Adds backend RBAC changes including new approve-own/approve-any permissions that will be reflected in the frontend-generated permissions.generated.ts file.

🐰 Permissions now speak their mind,
Hiding buttons users can't find,
No more toasts of sad "denied"—
Just UI that's clear, focused, and tried! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 71.43% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately reflects the main change: implementing permission-based visibility for UI sections and buttons that users cannot access.
Linked Issues check	✅ Passed	All acceptance criteria from issue #365 are addressed: canAccess helper created with tests, effectivePermissions refactored, Admin dropdown hidden, Plans/Recommendations/RI Exchange/Settings actions gated, and no permission-denied toasts.
Out of Scope Changes check	✅ Passed	All changes are directly aligned with issue #365 scope: permissions helper, UI gating, and supporting test infrastructure. CSS display fix and pre-commit codegen are necessary supporting changes.

_{✏️ 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 fix/issue-365-hide-admin-ui

⚔️ Resolve merge conflicts

• Resolve merge conflict in branch fix/issue-365-hide-admin-ui

---

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

[cristim]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[cristim]

@coderabbitai full review

[coderabbitai]

✅ Actions performed

Full review triggered.

[cristim]

Superseded by #452, which merged the identical fix/issue-365-hide-admin-ui payload on 2026-05-14 (commit d448d72). This PR was opened 6 days later still pointing at the pre-squash commits, so its diff against current base is effectively empty (17 of 20 touched files are byte-identical to base; the #365 gating is verified live in base). Closing as a stale duplicate; no work is lost. See #365.