feat(PermissionShield): add context icons, bottom-left badge placement, and disabled hover cursor

[rishiraj38]

Description

This PR enhances PermissionShield and adds new reusable identity icons in Sistent:

1. Identity Context Icons in Tooltip: Added RoleKeyIcon, OrgHierarchyIcon, and UsersIcon to the user-context section of PermissionShield tooltips (rendered next to User, Org, and Role(s) labels).
2. New Icon Exports: Created and exported RoleKeyIcon, OrgHierarchyIcon, and UsersIcon in @sistent/sistent (src/icons/), matching the canonical Meshery identity icon definitions.
3. Shield Badge Repositioning: Moved the variant="badge" shield indicator on buttons from top-right to bottom-left (bottom: -6, left: -6).
4. Disabled Cursor Hover: Added cursor: 'not-allowed' to the PermissionShield wrapper so hovering over a permission-restricted element provides immediate disabled visual feedback.

Signed commits

• Yes, I signed my commits.

Summary by CodeRabbit

• New Features
  • Added visual icons for users, organizational hierarchy, and roles.
  • Permission details now display these icons alongside User, Org, and Role labels.
• UI Improvements
  • Permission-restricted badges now show a “not allowed” cursor.
  • Security indicators have improved badge placement for clearer visibility.

[coderabbitai]

📝 Walkthrough

Walkthrough

Three configurable SVG icons are added and exported through the icon barrel. PermissionShield now displays them beside User, Org, and Role(s) tooltip labels, sets a disabled badge cursor, and positions the security indicator at the bottom-left.

Changes

Permission context icons

Layer / File(s)	Summary
Add and export context icons src/icons/OrgHierarchy/*, src/icons/RoleKey/*, src/icons/Users/*, src/icons/index.ts	Adds configurable OrgHierarchyIcon, RoleKeyIcon, and UsersIcon components with module and barrel exports.
Integrate icons into PermissionShield src/custom/permissions.tsx	Adds icons and shared styling to the User, Org, and Role(s) tooltip rows, sets badge wrappers to not-allowed, and moves the security indicator from top-right to bottom-left.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

• layer5io/sistent#1743: Also changes the PermissionShield badge security overlay from top-right to bottom-left.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main UI and icon changes in PermissionShield.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/custom/permissions.tsx (1)

293-299: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Mark the context icons as decorative.

These icons duplicate the adjacent User, Org, and Role(s) text. Pass aria-hidden="true" to each SVG so assistive technology does not treat them as separate unlabeled graphics.

Also applies to: 312-318, 330-336

🤖 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 `@src/custom/permissions.tsx` around lines 293 - 299, Mark the UsersIcon and
the corresponding organization and role context icons as decorative by passing
aria-hidden="true" to each SVG component, covering the instances near the User,
Org, and Role(s) labels.

🤖 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/custom/permissions.tsx`:
- Around line 24-26: Update CONTEXT_ICON_COLOR usage in the tooltip icon
rendering to resolve the active Sistent theme’s semantic secondary-text/icon
token at render time instead of using the hard-coded `#9E9E9E` value. Use the
existing Sistent theme exports and pass the resolved color to all three icons,
preserving CONTEXT_ICON_SIZE.

---

Nitpick comments:
In `@src/custom/permissions.tsx`:
- Around line 293-299: Mark the UsersIcon and the corresponding organization and
role context icons as decorative by passing aria-hidden="true" to each SVG
component, covering the instances near the User, Org, and Role(s) labels.

🪄 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: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: acf478eb-bcda-4b88-95de-cdc5527c877b

📥 Commits

Reviewing files that changed from the base of the PR and between 846866a and 342c390.

📒 Files selected for processing (8)

• src/custom/permissions.tsx
• src/icons/OrgHierarchy/OrgHierarchyIcon.tsx
• src/icons/OrgHierarchy/index.ts
• src/icons/RoleKey/RoleKeyIcon.tsx
• src/icons/RoleKey/index.ts
• src/icons/Users/UsersIcon.tsx
• src/icons/Users/index.ts
• src/icons/index.ts

[coderabbitai]

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Resolve the tooltip icon color from the active theme.

CONTEXT_ICON_COLOR hard-codes #9E9E9E and is passed to all three new icons. Derive this value from the Sistent theme’s semantic secondary-text/icon token at render time so custom and light/dark themes remain consistent.

As per coding guidelines, theme-aware UI must use Sistent theme exports and semantic palette tokens rather than raw MUI defaults.

🤖 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 `@src/custom/permissions.tsx` around lines 24 - 26, Update CONTEXT_ICON_COLOR
usage in the tooltip icon rendering to resolve the active Sistent theme’s
semantic secondary-text/icon token at render time instead of using the
hard-coded `#9E9E9E` value. Use the existing Sistent theme exports and pass the
resolved color to all three icons, preserving CONTEXT_ICON_SIZE.

Source: Coding guidelines