Redesign roles page - #760
Draft
timja wants to merge 2 commits into
Draft
Conversation
There was a problem hiding this comment.
Pull request overview
This PR continues the role-strategy UI redesign by replacing the legacy table-based Manage Roles and Permission Templates pages with React/Vite-driven pages, and adds supporting server-side bootstrap JSON plus automated UI/unit tests.
Changes:
- Replaced the Jelly/table-based Manage Roles and Permission Templates UIs with React pages mounted from
settings-subpage. - Added server-side JSON bootstrap endpoints in
RoleStrategyConfigto render pages without additional round trips. - Introduced frontend tooling (Vite/TS/ESLint/Prettier/Vitest) and Playwright-based end-to-end UI tests for the redesigned pages.
Reviewed changes
Copilot reviewed 63 out of 74 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| vitest.config.ts | Adds Vitest configuration for frontend unit tests. |
| vite.config.ts | Defines Vite build (multiple entrypoints) outputting bundles under src/main/webapp/js/bundles. |
| tsconfig.json | TypeScript compiler configuration for the frontend sources. |
| pom.xml | Adds Node/npm version properties and Playwright Java test dependency. |
| package.json | Adds frontend toolchain scripts (build/lint/test) and dependencies. |
| eslint.config.js | Adds ESLint configuration for TS/React with import sorting and hooks rules. |
| .prettierrc.json | Adds Prettier formatting rules. |
| .prettierignore | Configures Prettier to target frontend sources and ignore generated assets. |
| .mvn_exec_node | Adds (empty) marker file for Node execution. |
| .gitignore | Ignores Node artifacts and generated Vite bundles. |
| .gitattributes | Normalizes text/binary handling and line endings across the repo. |
| src/test/java/org/jenkinsci/plugins/rolestrategy/playwright/config/PlaywrightConfig.java | Configures Playwright JUnit to run headless by default. |
| src/test/java/org/jenkinsci/plugins/rolestrategy/playwright/helpers/UITestHelper.java | Adds shared RBAC seeding + login helpers for UI tests. |
| src/test/java/org/jenkinsci/plugins/rolestrategy/playwright/pages/RoleStrategyPage.java | Adds shared page-object base for dialog/confirm handling. |
| src/test/java/org/jenkinsci/plugins/rolestrategy/playwright/pages/PermissionTemplatesPage.java | Adds page object for the new Permission Templates UI. |
| src/test/java/org/jenkinsci/plugins/rolestrategy/playwright/pages/ManageRolesPage.java | Adds page object for the new Manage Roles UI. |
| src/test/java/org/jenkinsci/plugins/rolestrategy/playwright/PermissionTemplatesUITest.java | Adds Playwright E2E coverage for Permission Templates. |
| src/test/java/org/jenkinsci/plugins/rolestrategy/playwright/ManageRolesUITest.java | Adds Playwright E2E coverage for Manage Roles. |
| src/main/webapp/js/tableTemplates.js | Removes legacy Permission Templates table UI JavaScript. |
| src/main/webapp/js/tableManage.js | Removes legacy Manage Roles table UI JavaScript. |
| src/main/webapp/js/table.js | Re-formats existing shared table utilities (no functional change). |
| src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/permission-templates.jelly | Replaces Jelly table page with React mount + bootstrap attrs + module bundle. |
| src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-roles.jelly | Replaces Jelly table page with React mount + bootstrap attrs + module bundle. |
| src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-project-roles.jelly | Removes legacy project roles table partial. |
| src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-project-roles_fr.properties | Removes legacy French strings tied to deleted Jelly UI. |
| src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-global-roles.jelly | Removes legacy global roles table partial. |
| src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-global-roles_fr.properties | Removes legacy French strings tied to deleted Jelly UI. |
| src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-agent-roles.jelly | Removes legacy agent roles table partial. |
| src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/assign-project-roles.jelly | Normalizes formatting (no functional change). |
| src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/assign-global-roles.jelly | Normalizes formatting (no functional change). |
| src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/assign-agent-roles.jelly | Normalizes formatting (no functional change). |
| src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleBasedAuthorizationStrategy/help.html | Normalizes formatting (no functional change). |
| src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleBasedAuthorizationStrategy/help_fr.html | Normalizes formatting (no functional change). |
| src/main/java/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig.java | Adds bootstrap JSON producers for React pages (templates, roles, permission groups, permissions). |
| src/main/frontend/types.d.ts | Adds TS declarations for Jenkins globals (crumb, dialog) used by the frontend. |
| src/main/frontend/setupTests.ts | Adds Vitest/JSDOM setup including IntersectionObserver mock. |
| src/main/frontend/permission-templates/TemplateDialog.tsx | Adds add/edit dialog for permission templates. |
| src/main/frontend/permission-templates/PermissionTemplatesPage.tsx | Adds main React page for permission templates (search/filter/cards/dialogs). |
| src/main/frontend/permission-templates/index.tsx | Mounts the Permission Templates React app and reads bootstrap data. |
| src/main/frontend/manage-roles/RoleCards.tsx | Renders role cards per scope (collapse/search/filter/edit/delete). |
| src/main/frontend/manage-roles/ManageRolesPage.tsx | Adds main React page for Manage Roles (sections + global search/filter + add dialog). |
| src/main/frontend/manage-roles/index.tsx | Mounts the Manage Roles React app and reads bootstrap data. |
| src/main/frontend/manage-roles/EditRoleDialog.tsx | Adds edit dialog for roles (pattern/template/permissions). |
| src/main/frontend/manage-roles/AddRoleDialog.tsx | Adds add-role dialog including scope selection and template prefill. |
| src/main/frontend/common/utils/impliedPermissions.ts | Implements implied-permission computation for UI disabling/labels. |
| src/main/frontend/common/utils/impliedPermissions.spec.ts | Adds unit tests for implied-permission computation. |
| src/main/frontend/common/utils/confirm.ts | Adds confirm helper that prefers Jenkins dialog and falls back to window.confirm. |
| src/main/frontend/common/utils/bootstrap.ts | Adds helper for parsing embedded bootstrap JSON from DOM attributes. |
| src/main/frontend/common/types/template.ts | Defines shared PermissionTemplate type for the UI. |
| src/main/frontend/common/types/role.ts | Defines shared Role types used by the Manage Roles UI. |
| src/main/frontend/common/types/permission.ts | Defines shared Permission/PermissionGroup types. |
| src/main/frontend/common/types/bootstrap.ts | Defines bootstrap payload types for React pages. |
| src/main/frontend/common/styles/role-strategy.scss | Adds shared styling for cards/dialogs/filter/search and role sections. |
| src/main/frontend/common/components/Tooltip.tsx | Adds shared Tippy wrapper consistent with Jenkins tooltip theme. |
| src/main/frontend/common/components/SearchWithFilter.tsx | Adds search input + permission filter dropdown component. |
| src/main/frontend/common/components/SearchInput.tsx | Adds search input matching Jenkins core markup. |
| src/main/frontend/common/components/RadioGroup.tsx | Adds Jenkins-styled vertical radio group component. |
| src/main/frontend/common/components/PermissionList.tsx | Adds grouped permission checkbox list with filtering and implied-state handling. |
| src/main/frontend/common/components/icons/TrashIcon.tsx | Adds inline SVG icon for delete actions. |
| src/main/frontend/common/components/icons/SearchIcon.tsx | Adds inline SVG icon for search inputs. |
| src/main/frontend/common/components/icons/HelpCircleIcon.tsx | Adds inline SVG icon for permission help tooltips. |
| src/main/frontend/common/components/icons/FilterIcon.tsx | Adds inline SVG icon for filter dropdown trigger. |
| src/main/frontend/common/components/icons/EditIcon.tsx | Adds inline SVG icon for edit actions. |
| src/main/frontend/common/components/icons/CloseIcon.tsx | Adds inline SVG icon for dialog close button. |
| src/main/frontend/common/components/icons/ChevronDownIcon.tsx | Adds inline SVG icon for card expand/collapse. |
| src/main/frontend/common/components/IconButton.tsx | Adds icon-only Jenkins button with tooltip. |
| src/main/frontend/common/components/HelpIcon.tsx | Adds help icon component showing tooltip text. |
| src/main/frontend/common/components/Dialog.tsx | Adds React dialog wrapper on <dialog> using Jenkins dialog styling. |
| src/main/frontend/common/components/Card.tsx | Adds expandable card component used by roles/templates. |
| src/main/frontend/common/components/AssignedPermissions.tsx | Adds read-only assigned-permissions chip list (including implied perms). |
| src/main/frontend/common/components/AppBarButton.tsx | Adds hook to bind Jelly-rendered app-bar buttons to React handlers. |
| src/main/frontend/common/api/strategy.ts | Adds client wrapper for role-strategy POST endpoints. |
| src/main/frontend/common/api/client.ts | Adds low-level POST form client with crumb header support. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+23
to
+26
| export interface ManageRolesBootstrap { | ||
| roles: BootstrapRoles; | ||
| permissionGroups: BootstrapPermissionGroups; | ||
| permissionTemplates: PermissionTemplate[]; |
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.
PR 2/3 part of #758
Testing done
Submitter checklist