Refactor identity management components#1139
Open
rasika2012 wants to merge 2 commits into
Open
Conversation
Contributor
📝 WalkthroughWalkthroughTwo independent areas are updated: (1) PromoteAgentDrawer refactors its hook calls, renames the target-config success flag to ChangesDeployment UI fixes
Identities UI card variant and Form refactor
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~28 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![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: 4
🤖 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 `@console/workspaces/pages/deploy/src/subComponent/PromoteAgentDrawer.tsx`:
- Around line 143-145: The early return on line 144 when !cfg is true (target
has no existing configuration) prevents state from being updated, causing stale
env and files from a previous target to remain in the form. Instead of just
returning when !cfg is true in this conditional check, you must reset the form
state (specifically the env and files fields) to empty/default values before
returning or conditionally updating them. This ensures that when users switch to
a target with no configuration, the form properly reflects the empty state
rather than carrying over data from the previously selected target. The same fix
applies to the additional locations mentioned around lines 156-159.
In `@console/workspaces/pages/identities/src/GroupsPage.tsx`:
- Around line 133-137: The onBlur handler in the row container is immediately
clearing the hovered state when focus moves between child elements, which causes
row actions to disappear during keyboard navigation. Modify the onBlur handler
to check whether focus is moving to another element within the same row group
using event.relatedTarget. Only clear the hovered ID if the focus is moving
completely outside the row container. This will keep the row actions visible
while keyboard users tab through the child controls within that row.
In `@console/workspaces/pages/identities/src/RolesPage.tsx`:
- Around line 129-133: The row's onBlur handler clears hoveredId whenever focus
leaves the row element itself, even if focus moves to child action elements
within the same row, causing the actions to unmount during keyboard navigation.
To fix this, use a ref on the row container and modify the onBlur handler to
check if the relatedTarget (the element receiving focus) is still within the
row's DOM tree using contains() method. Only clear hoveredId if the
relatedTarget is null or outside the row container, allowing focus to move
between action buttons within the row without unmounting them.
In `@console/workspaces/pages/identities/src/UsersPage.tsx`:
- Around line 151-155: The row's onBlur handler clears hoveredId immediately
when focus leaves the row element, even if focus is moving to action buttons
within that row, which unmounts the actions and breaks keyboard navigation.
Modify the onBlur handler (and the similar one mentioned at lines 181-196) to
check whether the newly focused element is a child of the row's action button
container before clearing hoveredId. If the new focus target is within the row's
actions, do not clear hoveredId so that keyboard users can continue navigating
between action buttons without the actions disappearing mid-traversal.
🪄 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: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 9dbaaeed-42a8-47f1-9965-60bdb6dcb3d7
📒 Files selected for processing (8)
console/workspaces/pages/deploy/src/subComponent/PromoteAgentDrawer.tsxconsole/workspaces/pages/identities/src/GroupEditPage.tsxconsole/workspaces/pages/identities/src/GroupsPage.tsxconsole/workspaces/pages/identities/src/RoleEditPage.tsxconsole/workspaces/pages/identities/src/RolesPage.tsxconsole/workspaces/pages/identities/src/UserEditPage.tsxconsole/workspaces/pages/identities/src/UsersPage.tsxconsole/workspaces/pages/identities/src/components/ListingSkeletonRows.tsx
Contributor
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
console/workspaces/libs/shared-component/src/components/EnvironmentCard/EnvironmentCard.tsx (1)
377-392: 🛠️ Refactor suggestion | 🟠 Major | ⚡ Quick winMigrate changed action/alert components to Oxygen UI in this console module.
These updated sections still use MUI component surface (
Button/Alert) in aconsole/**file. Please switch these usages (and their imports) to@wso2/oxygen-uito keep design-system consistency.As per coding guidelines,
console/**/*.{ts,tsx,js,jsx}must import components from@wso2/oxygen-ui, never directly from@mui/material.Also applies to: 400-420
🤖 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 `@console/workspaces/libs/shared-component/src/components/EnvironmentCard/EnvironmentCard.tsx` around lines 377 - 392, Replace the MUI Button component with the Oxygen UI Button component in the EnvironmentCard.tsx file. Update the import statement to import Button from `@wso2/oxygen-ui` instead of `@mui/material`, and verify that the Button component used in the conditional block around line 377-392 (and the additional instances mentioned in lines 400-420) are now using the imported Oxygen UI Button. Ensure all Button usages throughout the file follow the console module coding guideline of importing components from `@wso2/oxygen-ui` rather than directly from MUI.Source: Coding guidelines
🤖 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.
Outside diff comments:
In
`@console/workspaces/libs/shared-component/src/components/EnvironmentCard/EnvironmentCard.tsx`:
- Around line 377-392: Replace the MUI Button component with the Oxygen UI
Button component in the EnvironmentCard.tsx file. Update the import statement to
import Button from `@wso2/oxygen-ui` instead of `@mui/material`, and verify that the
Button component used in the conditional block around line 377-392 (and the
additional instances mentioned in lines 400-420) are now using the imported
Oxygen UI Button. Ensure all Button usages throughout the file follow the
console module coding guideline of importing components from `@wso2/oxygen-ui`
rather than directly from MUI.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 162eae59-b1a9-4d62-af9a-e5d9d40bd1b1
📒 Files selected for processing (9)
console/workspaces/libs/shared-component/src/components/EnvironmentCard/EnvironmentCard.tsxconsole/workspaces/pages/deploy/src/subComponent/PromoteAgentDrawer.tsxconsole/workspaces/pages/identities/src/GroupEditPage.tsxconsole/workspaces/pages/identities/src/GroupsPage.tsxconsole/workspaces/pages/identities/src/RoleEditPage.tsxconsole/workspaces/pages/identities/src/RolesPage.tsxconsole/workspaces/pages/identities/src/UserEditPage.tsxconsole/workspaces/pages/identities/src/UsersPage.tsxconsole/workspaces/pages/identities/src/components/ListingSkeletonRows.tsx
🚧 Files skipped from review as they are similar to previous changes (7)
- console/workspaces/pages/identities/src/components/ListingSkeletonRows.tsx
- console/workspaces/pages/identities/src/GroupsPage.tsx
- console/workspaces/pages/identities/src/UsersPage.tsx
- console/workspaces/pages/identities/src/UserEditPage.tsx
- console/workspaces/pages/identities/src/GroupEditPage.tsx
- console/workspaces/pages/identities/src/RoleEditPage.tsx
- console/workspaces/pages/identities/src/RolesPage.tsx
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
1 participant
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.
Purpose
Issue: #1045
This pull request introduces significant UI and usability improvements to the group and role management pages within the identities section. The main changes focus on enhancing the user experience by adopting card-based layouts, improving visual feedback, and refactoring form sections for clarity and accessibility. Additionally, some code clean-up and formatting improvements have been made for better maintainability.
UI/UX Improvements to Group Management:
GroupsPage.tsx) now uses a card-based layout with avatars and improved hover/focus interactions, making it more visually appealing and easier to use. Action buttons (edit/delete) are only visible on hover or focus for a cleaner interface. ([[1]](https://github.com/wso2/agent-manager/pull/1139/files#diff-9ad98f6f7f423f90679f0abb6474c96df026da0951dc404bbf5b52ff9c6028c2R21-R28),[[2]](https://github.com/wso2/agent-manager/pull/1139/files#diff-9ad98f6f7f423f90679f0abb6474c96df026da0951dc404bbf5b52ff9c6028c2L35-R37),[[3]](https://github.com/wso2/agent-manager/pull/1139/files#diff-9ad98f6f7f423f90679f0abb6474c96df026da0951dc404bbf5b52ff9c6028c2R47),[[4]](https://github.com/wso2/agent-manager/pull/1139/files#diff-9ad98f6f7f423f90679f0abb6474c96df026da0951dc404bbf5b52ff9c6028c2L107-R178))GroupEditPage.tsx) has been refactored to useForm.SectionandForm.Headercomponents, providing clearer separation of concerns and better accessibility. The "Users" and "Roles" tabs now have improved layouts, and user/role listing tables have enhanced formatting for better readability. ([[1]](https://github.com/wso2/agent-manager/pull/1139/files#diff-46ed2ffe6f156ff7881b7c621402ce259751ce3f6a1a724b6754384acd21c975L25-R25),[[2]](https://github.com/wso2/agent-manager/pull/1139/files#diff-46ed2ffe6f156ff7881b7c621402ce259751ce3f6a1a724b6754384acd21c975L206-R265),[[3]](https://github.com/wso2/agent-manager/pull/1139/files#diff-46ed2ffe6f156ff7881b7c621402ce259751ce3f6a1a724b6754384acd21c975L255-R293),[[4]](https://github.com/wso2/agent-manager/pull/1139/files#diff-46ed2ffe6f156ff7881b7c621402ce259751ce3f6a1a724b6754384acd21c975L289-R332),[[5]](https://github.com/wso2/agent-manager/pull/1139/files#diff-46ed2ffe6f156ff7881b7c621402ce259751ce3f6a1a724b6754384acd21c975L316-R367),[[6]](https://github.com/wso2/agent-manager/pull/1139/files#diff-46ed2ffe6f156ff7881b7c621402ce259751ce3f6a1a724b6754384acd21c975L353-R417))Code Quality and Maintainability:
[[1]](https://github.com/wso2/agent-manager/pull/1139/files#diff-46ed2ffe6f156ff7881b7c621402ce259751ce3f6a1a724b6754384acd21c975L73-R74),[[2]](https://github.com/wso2/agent-manager/pull/1139/files#diff-46ed2ffe6f156ff7881b7c621402ce259751ce3f6a1a724b6754384acd21c975L100-R106),[[3]](https://github.com/wso2/agent-manager/pull/1139/files#diff-46ed2ffe6f156ff7881b7c621402ce259751ce3f6a1a724b6754384acd21c975L112-R121),[[4]](https://github.com/wso2/agent-manager/pull/1139/files#diff-46ed2ffe6f156ff7881b7c621402ce259751ce3f6a1a724b6754384acd21c975L137-R147),[[5]](https://github.com/wso2/agent-manager/pull/1139/files#diff-46ed2ffe6f156ff7881b7c621402ce259751ce3f6a1a724b6754384acd21c975L164-R182),[[6]](https://github.com/wso2/agent-manager/pull/1139/files#diff-46ed2ffe6f156ff7881b7c621402ce259751ce3f6a1a724b6754384acd21c975L185-R208))[[1]](https://github.com/wso2/agent-manager/pull/1139/files#diff-e9da2b26349364adfc6691a6b5e1e27597976c1c8f417763611b1e327899eba9L110-R110),[[2]](https://github.com/wso2/agent-manager/pull/1139/files#diff-e9da2b26349364adfc6691a6b5e1e27597976c1c8f417763611b1e327899eba9L144-R145),[[3]](https://github.com/wso2/agent-manager/pull/1139/files#diff-e9da2b26349364adfc6691a6b5e1e27597976c1c8f417763611b1e327899eba9L157-R159))Consistency and Theming:
Formcomponents and removal of unnecessaryDividerelements ensures a more consistent look and feel across the identities pages. ([[1]](https://github.com/wso2/agent-manager/pull/1139/files#diff-46ed2ffe6f156ff7881b7c621402ce259751ce3f6a1a724b6754384acd21c975L25-R25),[[2]](https://github.com/wso2/agent-manager/pull/1139/files#diff-d4cfff5662069ea3f58ddc76609c36fd1cdefc8406387696e35265506149e7f0L28-R28))[[1]](https://github.com/wso2/agent-manager/pull/1139/files#diff-9ad98f6f7f423f90679f0abb6474c96df026da0951dc404bbf5b52ff9c6028c2L107-R178),[[2]](https://github.com/wso2/agent-manager/pull/1139/files#diff-46ed2ffe6f156ff7881b7c621402ce259751ce3f6a1a724b6754384acd21c975L206-R265),[[3]](https://github.com/wso2/agent-manager/pull/1139/files#diff-46ed2ffe6f156ff7881b7c621402ce259751ce3f6a1a724b6754384acd21c975L255-R293),[[4]](https://github.com/wso2/agent-manager/pull/1139/files#diff-46ed2ffe6f156ff7881b7c621402ce259751ce3f6a1a724b6754384acd21c975L289-R332),[[5]](https://github.com/wso2/agent-manager/pull/1139/files#diff-46ed2ffe6f156ff7881b7c621402ce259751ce3f6a1a724b6754384acd21c975L316-R367),[[6]](https://github.com/wso2/agent-manager/pull/1139/files#diff-46ed2ffe6f156ff7881b7c621402ce259751ce3f6a1a724b6754384acd21c975L353-R417))Minor Improvements and Refactoring:
RoleEditPage.tsxwere reformatted for readability. ([console/workspaces/pages/identities/src/RoleEditPage.tsxL62-R65](https://github.com/wso2/agent-manager/pull/1139/files#diff-d4cfff5662069ea3f58ddc76609c36fd1cdefc8406387696e35265506149e7f0L62-R65))These changes collectively provide a more modern, accessible, and maintainable experience for managing groups and roles in the application.
Goals
Approach
User stories
Release note
Documentation
Training
Certification
Marketing
Automation tests
Security checks
Samples
Related PRs
Migrations (if applicable)
Test environment
Learning
Summary by CodeRabbit
Style
UI/UX