Repository navigation
[UI] Migrate component authorizations to Sistent permissionKey (Patterns A & B) - #20697
Merged
rishiraj38 merged 12 commits intoJul 21, 2026
Merged
Conversation
Signed-off-by: Rishi Raj <[email protected]>
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Code Review
This pull request refactors the permission-checking mechanism across multiple UI components by replacing imperative CAN utility calls with Sistent's declarative permissionKey prop and removing unused imports. The review feedback highlights critical issues where explicit disabled props or hardcoded disabled configurations are retained alongside permissionKey. Keeping these disabled attributes prevents pointer events, which blocks Sistent's hover shield overlay from displaying the necessary access metadata tooltips on hover.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
Contributor
There was a problem hiding this comment.
Pull request overview
This PR migrates Meshery UI authorization gating from imperative disabled={!CAN(...)} checks to Sistent’s declarative permissionKey permission layer, enabling consistent disable/hide behavior and permission shield overlays across the UI.
Changes:
- Replaced many
CAN(...)-baseddisabledprops withpermissionKey={Keys.*}on Sistent components. - Updated permission-related wrappers (e.g.,
TooltipIcon, split-button menu items) to forwardpermissionKey/permissionAction. - Adjusted layout (moving margins to outer wrappers) to keep permission shield overlays aligned.
Reviewed changes
Copilot reviewed 27 out of 27 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| ui/components/workspaces/index.tsx | Migrates “Create workspace” gating to permissionKey and adjusts spacing for shield alignment. |
| ui/components/performance/PerformanceProfiles.tsx | Replaces edit/run/add button CAN(...) disabled checks with permissionKey. |
| ui/components/performance/PerformanceFormActions.tsx | Separates state-based disabled logic from permission gating via permissionKey. |
| ui/components/performance/PerformanceCard.tsx | Migrates action buttons/icons to permissionKey authorization. |
| ui/components/performance/Dashboard.tsx | Migrates “Run Test” gating to permissionKey. |
| ui/components/MesherySettingsEnvButtons.tsx | Migrates “Add Cluster” gating to permissionKey. |
| ui/components/MeshAdapterConfigComponent.tsx | Migrates deploy/connect/undeploy adapter actions to permissionKey. |
| ui/components/layout/Header/Header.tsx | Replaces CanShow wrapper logic with permissionKey + permissionAction="hide" and useHasPermission. |
| ui/components/filters/YAMLEditor.tsx | Migrates update/delete filter icon actions to permissionKey. |
| ui/components/filters/TooltipIcon.tsx | Forwards disabled, permissionKey, and permissionAction into the internal IconButton. |
| ui/components/filters/FiltersGrid.tsx | Migrates import button gating to permissionKey and adjusts margin placement. |
| ui/components/filters/FiltersCard.tsx | Migrates filter card actions (publish/unpublish/download/clone/edit/delete) to permissionKey. |
| ui/components/filters/Filters.types.ts | Extends tooltip icon prop types to include permission metadata. |
| ui/components/filters/Filters.tsx | Migrates import action gating to permissionKey. |
| ui/components/filters/Filters.columns.tsx | Migrates table-row action tooltips/buttons to permissionKey via TooltipIcon. |
| ui/components/environments/index.tsx | Migrates create/delete environment actions to permissionKey and adjusts spacing. |
| ui/components/environments/environment-card.tsx | Migrates edit/delete environment icon actions to permissionKey with selection-based disabling. |
| ui/components/designs/patterns/YAMLEditor.tsx | Migrates design update/delete icon actions to permissionKey. |
| ui/components/designs/patterns/MesheryPatternsToolbar.tsx | Migrates create/import design toolbar buttons to permissionKey and adjusts margin placement. |
| ui/components/designs/patterns/MesheryPatternCard.tsx | Migrates multiple pattern card actions to permissionKey (including option menu support). |
| ui/components/designs/patterns/CustomToolbarSelect.tsx | Migrates bulk delete icon to permissionKey. |
| ui/components/designs/patterns/ActionButton.tsx | Forwards per-option permission props into MenuItem; fixes unstable React key usage. |
| ui/components/designs/configurator/MeshModel/index.tsx | Migrates save/update/delete configurator actions to permissionKey. |
| ui/components/DatabaseSummary.tsx | Migrates reset database action gating to permissionKey. |
| ui/components/connections/ConnectionWizardLauncher.tsx | Adds OR-based permission computation for enabling the launcher and attempts to attach a permissionKey. |
| ui/components/connections/ConnectionTable.options.tsx | Migrates delete connections action to permissionKey. |
| ui/components/adapter-play-category-card.tsx | Migrates adapter play category actions to runtime permissionKey objects. |
Signed-off-by: Rishi Raj <[email protected]>
Comment on lines
31
to
34
| variant="contained" | ||
| onClick={() => setIsOpen(true)} | ||
| disabled={!canOpenConnectionWizard()} | ||
| permissionKey={!hasPermission ? Keys.LifecycleManagementAddCluster : undefined} | ||
| data-testid="connection-create-connection" |
Signed-off-by: Rishi Raj <[email protected]>
rishiraj38
force-pushed
the
feat/permission-keys-migration
branch
from
July 16, 2026 11:24
2744ba0 to
81e0353
Compare
rishiraj38
requested review from
NSTKrishna,
aabidsofi19,
chaitanyamedidar,
Copilot and
saurabhraghuvanshii
July 16, 2026 11:44
rishiraj38
changed the title
Signed-off-by: Rishi Raj <[email protected]>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
ui/components/layout/Header/Header.test.tsx (1)
181-181: 🔒 Security & Privacy | 🔵 Trivial | ⚡ Quick winCover the denied-permission path.
This unconditional grant cannot verify that the contexts trigger and menu are absent when Kubernetes-cluster access is denied. Make the mock configurable and add a
falsecase.🤖 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 `@ui/components/layout/Header/Header.test.tsx` at line 181, Update the useHasPermission mock in the Header tests to be configurable instead of always returning true, then add a denied-permission case returning false that verifies the Kubernetes-cluster trigger and menu are absent.
🤖 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 `@ui/components/designs/patterns/ActionButton.tsx`:
- Around line 87-89: Update ui/components/designs/patterns/ActionButton.tsx at
lines 87-89 so the primary Button receives optional permissionKey and
permissionAction props, matching the menu items. Update
ui/components/designs/patterns/MesheryPatternCard.tsx at lines 220-248 to pass
Keys.CatalogManagementValidateDesign and its corresponding validate action to
the default action, ensuring both Validate entry points use the same
authorization guard.
In `@ui/components/performance/Dashboard.tsx`:
- Around line 175-178: Replace the dashboard’s outer CAN permission wrapper with
useHasPermission, using the same performance-management run-test permission key
already passed to StyledButton. Update the surrounding conditional rendering to
use the hook’s result and remove the legacy CAN dependency from the page-level
gate, preserving the existing dashboard behavior.
---
Nitpick comments:
In `@ui/components/layout/Header/Header.test.tsx`:
- Line 181: Update the useHasPermission mock in the Header tests to be
configurable instead of always returning true, then add a denied-permission case
returning false that verifies the Kubernetes-cluster trigger and menu are
absent.
🪄 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: 817e8bd3-b64b-4f86-a8ff-1f90eaaa955a
📒 Files selected for processing (32)
ui/components/DatabaseSummary.tsxui/components/MeshAdapterConfigComponent.tsxui/components/MesherySettingsEnvButtons.tsxui/components/adapter-play-category-card.test.tsxui/components/adapter-play-category-card.tsxui/components/connections/ConnectionTable.options.tsxui/components/connections/ConnectionWizardLauncher.tsxui/components/designs/configurator/MeshModel/index.tsxui/components/designs/patterns/ActionButton.tsxui/components/designs/patterns/CustomToolbarSelect.tsxui/components/designs/patterns/MesheryPatternCard.tsxui/components/designs/patterns/MesheryPatternsToolbar.tsxui/components/designs/patterns/YAMLEditor.tsxui/components/environments/environment-card.test.tsxui/components/environments/environment-card.tsxui/components/environments/index.tsxui/components/filters/Filters.columns.tsxui/components/filters/Filters.tsxui/components/filters/Filters.types.tsui/components/filters/FiltersCard.test.tsxui/components/filters/FiltersCard.tsxui/components/filters/FiltersGrid.tsxui/components/filters/TooltipIcon.tsxui/components/filters/YAMLEditor.test.tsxui/components/filters/YAMLEditor.tsxui/components/layout/Header/Header.test.tsxui/components/layout/Header/Header.tsxui/components/performance/Dashboard.tsxui/components/performance/PerformanceCard.tsxui/components/performance/PerformanceFormActions.tsxui/components/performance/PerformanceProfiles.tsxui/components/workspaces/index.tsx
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 33 out of 33 changed files in this pull request and generated 1 comment.
Comments suppressed due to low confidence (1)
ui/components/designs/patterns/ActionButton.tsx:93
ActionButtonhard-codes each option'sdata-testidfromoption.label, even though callers (e.g.MesheryPatternCard) provide explicit'data-testid'values likepattern-btn-validate. This makes those option test ids ineffective and also creates IDs with spaces (e.g. "Dry Run"). Prefer honoringoption['data-testid']when present, with a fallback to the label-based id.
<MenuItem
data-testid={`action-btn-option-${option.label}`}
disabled={option.disabled}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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 `@ui/components/designs/patterns/ActionButton.test.tsx`:
- Around line 94-107: Extend the test for the primary Action button to assert
that permissionKey is forwarded in addition to permissionAction. Expose the
mocked key through the component’s existing test attribute or prop-access
mechanism, then verify the primary button receives the key object/value
represented by keyObj.
🪄 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: dee47078-1001-4a58-a571-929d6eb83829
📒 Files selected for processing (4)
ui/components/designs/patterns/ActionButton.test.tsxui/components/designs/patterns/ActionButton.tsxui/components/designs/patterns/MesheryPatternCard.tsxui/components/performance/Dashboard.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- ui/components/designs/patterns/MesheryPatternCard.tsx
Signed-off-by: Rishi Raj <[email protected]>
rishiraj38
force-pushed
the
feat/permission-keys-migration
branch
from
July 21, 2026 06:14
58fb8a5 to
c1665b9
Compare
Contributor
|
Commit SHA: END-TO-END TESTS
📦 Test Result Summary
⌛ Duration: 4 minutes and 14 seconds Overall Result: 👍 All tests passed. [Show/Hide] Test Result Details
🔗 Relationship Tests [Show/Hide] Relationship Test Details (18 tests)
|
chaitanyamedidar
self-requested a review
July 21, 2026 07:44
chaitanyamedidar
approved these changes
Jul 21, 2026
1 task done
This was referenced Aug 2, 2026
This was referenced Aug 10, 2026
This was referenced Aug 19, 2026
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.
Description
This PR implements a repository-wide migration of the authorization checks in
meshery/uifrom the legacy imperativedisabled={!CAN(...)}pattern to Sistent's declarativepermissionKeyprop.By leveraging the
@sistent/sistentcomponents' native permission layer, unauthorized components are now dynamically disabled and styled with aPermissionShieldoverlay showing requisite keys and access metadata upon hover.Key Changes
Component Migration:
Filters.columns.tsx,FiltersCard.tsx,FiltersGrid.tsx,Filters.tsx, andYAMLEditor.tsx. UpdatedTooltipIconwrapper to forward permissions to internal elements.MesheryPatternCard.tsx,CustomToolbarSelect.tsx,MesheryPatternsToolbar.tsx,YAMLEditor.tsx, andMeshModel/index.tsx.PerformanceCard.tsx,PerformanceProfiles.tsx,PerformanceFormActions.tsx(handling mixed disabled checks), andDashboard.tsx.ConnectionTable.options.tsxand dynamically handled multi-permission checking insideConnectionWizardLauncher.tsx.environment-card.tsx,environments/index.tsx, andworkspaces/index.tsx.MeshAdapterConfigComponent.tsx,DatabaseSummary.tsx, andMesherySettingsEnvButtons.tsx.<CanShow>wrappers inHeader.tsxwith Sistent'spermissionKey+permissionAction="hide"and theuseHasPermissionhook.adapter-play-category-card.tsxto pass runtime{ id, function }permission objects.Visual & Layout Polishing:
marginRight) were cleanly moved to outer wrapping wrappers/containers.ActionButton.tsx) to forwardpermissionKeyandpermissionActionto Sistent'sMenuItemchildren.Screen.Recording.2026-07-16.at.5.03.36.PM.mov
Fixes #20703
Signed commits
Summary by CodeRabbit
permissionKey.permissionKey-driven disabling andActionButtonpermission prop forwarding.