[Docs] Roles and Tools: document UI/UX changes after Dojo → Angular migration

Goal

Document the shipped Roles and Tools Angular portlet — user-facing docs (screenshots + behavior) plus a short developer note (rollback + code paths + iframe boundaries). Depends on the FE+BE PR being merged.

Scope

User docs

• Update the Roles and Tools page on the dotCMS docs site to reflect the shipped UI
• Cover:
  • Layout: two-column shell, Home > Settings > Roles breadcrumb
  • Roles panel: New button, Filter roles search, folder icon for parent roles, shield icon for child roles, user-count badges, expand/collapse, inline + to add a child, drag-and-drop to reparent a role
  • Role detail header: role name + N users · M tools granted subtitle + Edit Role button
  • Users tab: Grant to User popover (search + click to grant), members table (NAME / EMAIL / GRANTED FROM chip showing direct vs. inherited), remove and bulk remove, empty state copy
  • Permissions tab: note this tab currently embeds the existing permissions UI inside an iframe as an interim while the Angular redesign is scoped; behavior parity with the previous portlet
  • Tools tab: note this tab currently embeds the existing Tool Groups management inside an iframe as an interim while the Angular redesign is scoped; behavior parity with the previous portlet
  • Add Role dialog: Role*, Key, Parent (default None (top level)), Can Grant checkboxes, Description
  • Edit Role dialog: same fields + Delete Role destructive action
• Capture fresh screenshots from the shipped build
• License + role gating preserved and documented (roles portlet, admin-only surfaces)

Developer note

• Short note (developer docs or repo doc) covering:
  • Rollback story: the Dojo roles portlet entry stays registered — admins revert by removing roles-beta from their layout and adding roles back
  • New Angular portlet: core-web/libs/portlets/dot-roles/
  • Data-access service: core-web/libs/data-access/src/lib/dot-roles/
  • Portlet enum: PortletID.ROLES (unchanged — Beta uses the roles-beta portletId in portlet.xml)
  • Backend gating: v1 RoleResource, PortletResource, ToolGroupResource, PermissionResource gated by requiredPortlet("roles")
  • Iframe wrapper JSPs used by the Permissions and Tools tabs, with the postMessage contract and how to swap them out for the eventual Angular replacements
  • Follow-up [Task] links for the Angular replacements of the Permissions and Tools tabs

Implementation findings (what shipped, tab-by-tab behavior notes, iframe wrapper postMessage contract, drag-to-reparent behavior) are captured in a comment below as reference material for whoever writes the docs.

Inputs

• Shipped PR: (link once merged)
• Parent epic: #36909
• Design reference: https://claude.ai/design/p/20548219-a454-4b14-becf-5dd4dc0b84a1?file=Roles.dc.html&via=share (internal — auth required)

Definition of Done

• Roles and Tools user docs page updated and published with the sections above, with fresh screenshots taken from the shipped build
• Developer note published in the appropriate developer docs location (or repo doc), including the iframe wrapper postMessage contract and Angular-replacement follow-up links
• Docs page cross-linked from this issue and from epic #36909

Start by reading the Angular portlet at core-web/libs/portlets/dot-roles/ and its data-access service at core-web/libs/data-access/src/lib/dot-roles/, then review the listed RoleResource, PortletResource, ToolGroupResource, and PermissionResource entry points. Done means publishing the updated Roles and Tools user page with fresh screenshots and a developer note covering rollback, iframe postMessage behavior, gating, and replacement follow-up links.