feat(admin-ui): upgrade React to v19 and align codebase with modern React standards#2881
Merged
Conversation
Signed-off-by: faisalsiddique4400 <faisalsiddique10886@gmail.com>
Signed-off-by: faisalsiddique4400 <faisalsiddique10886@gmail.com>
…eact standards (#2880) Signed-off-by: faisalsiddique4400 <faisalsiddique10886@gmail.com>
Signed-off-by: faisalsiddique4400 <faisalsiddique10886@gmail.com>
Signed-off-by: faisalsiddique4400 <faisalsiddique10886@gmail.com>
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (2)
💤 Files with no reviewable changes (1)
📝 WalkthroughWalkthroughThe admin-ui is upgraded from React 18 to React 19, migrating context consumption from ChangesAdmin UI React 19 and platform refactoring
Sequence Diagram(s)sequenceDiagram
rect rgba(173, 216, 230, 0.5)
Note over FeatureComponent,DocumentBody: Custom Toast Flow
end
participant FeatureComponent
participant ReduxStore
participant GluuToast
participant DocumentBody
FeatureComponent->>ReduxStore: dispatch(updateToast(true, 'error', message))
ReduxStore-->>GluuToast: showToast=true, type, message
GluuToast->>GluuToast: create ToastItem, schedule auto-exit timeout
GluuToast->>DocumentBody: createPortal(toast DOM with progress bar)
DocumentBody->>GluuToast: onMouseEnter → pauseToast
DocumentBody->>GluuToast: onMouseLeave → resumeToast
DocumentBody->>GluuToast: close button → beginExit
GluuToast->>GluuToast: mark exiting, call onClose, schedule removeToast
GluuToast->>ReduxStore: dispatch(updateToast(false, 'success', ''))
sequenceDiagram
rect rgba(255, 200, 180, 0.5)
Note over Router,GluuErrorScreen: Global Error Boundary Flow
end
participant Router
participant ErrorBoundary
participant RoutedContent
participant GluuErrorScreen
participant logUiCrash
Router->>ErrorBoundary: wrap AuthenticatedRouteSelector
RoutedContent->>ErrorBoundary: wrap Suspense+Routes (resets on pathname change)
ErrorBoundary->>logUiCrash: onError(error, info.componentStack)
logUiCrash->>logUiCrash: logger.error + logger.trace structured payload
ErrorBoundary->>GluuErrorScreen: render FallbackComponent with error prop
GluuErrorScreen->>GluuErrorScreen: show crash title/message, back-to-home, support portal
Estimated code review effort🎯 5 (Critical) | ⏱️ ~120 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 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 |
mo-auto
added
comp-admin-ui
Contributor
|
Caution Failed to replace (edit) comment. This is likely due to insufficient permissions or the comment being deleted. Error details |
![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: 5
🤖 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 `@admin-ui/app/components/Accordion/AccordionIndicator.tsx`:
- Around line 21-31: The code unsafely casts open and closed parameters from
ReactNode to ReactElement before passing them to React.cloneElement in the
AccordionIndicator component, which will crash at runtime if a caller passes a
non-element node like a string or number. Fix this by either updating the type
definition in AccordionIndicatorProps to specify that open and closed should be
ReactElement instead of ReactNode, or by adding runtime guards using
React.isValidElement() to validate the values before calling cloneElement,
removing the unsafe type casts.
In `@admin-ui/app/routes/Apps/Gluu/GluuToast.tsx`:
- Around line 145-167: The current implementation in the useEffect uses a single
boolean flag pattern with updateToast that clears the toast state after reading
it, causing rapid consecutive updateToast calls to collapse and lose earlier
notifications. Replace the boolean latch approach with a queue-based Redux
contract by creating enqueueToast and dequeueToast actions instead of the
current updateToast pattern. Update the reducer to maintain a toast queue
instead of a single-slot boolean payload, modify the useEffect to depend on the
toast queue (not showToast), and process items from the queue by dequeuing them
after adding to the displayed toasts, ensuring all notifications are preserved
even when multiple updates occur rapidly.
- Around line 42-46: In the GluuToast component, the conditional logic for
rendering the toast message only checks if the type is 'success', causing all
other toast types (warning, info) to fall back to the error message when
normalizedMessage is empty. Replace the simple ternary operator that checks type
=== 'success' with a more comprehensive conditional that handles each toast type
separately and provides appropriate fallback messages for warning, info, and
error types using the t function with the corresponding message keys.
In
`@admin-ui/plugins/auth-server/components/ConfigApiProperties/__tests__/components/ConfigApiPropertiesForm.test.tsx`:
- Around line 12-13: The useAppDispatch mock in the '`@/redux/hooks`' mock
definition creates a new jest.fn() on each invocation, causing dispatch
assertions to fail after component rerenders since each call gets a different
mock instance. Create a single stable jest.fn() mock instance before the
jest.mock call and have useAppDispatch return that same instance consistently on
every call, ensuring dispatch calls can be reliably asserted regardless of
rerenders.
In
`@admin-ui/plugins/auth-server/components/ConfigApiProperties/components/ConfigApiPropertiesPage.tsx`:
- Around line 94-99: The catch block in the handleSubmit function is swallowing
the error after handling it locally. After logging the error, setting the error
message, and dispatching the toast notification, the error must be re-thrown to
propagate the failure back to the caller (ConfigApiPropertiesForm.submitForm).
This ensures the promise is rejected so the caller knows the save operation
failed and will not proceed with post-success cleanup actions like clearing the
patch state.
🪄 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: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 754a8c54-5c0a-488a-8aa0-6c2c7953e65c
📒 Files selected for processing (97)
admin-ui/.markdownlint-cli2.cjsadmin-ui/app/components/Accordion/AccordionIndicator.tsxadmin-ui/app/components/BootstrapWrappers/index.tsxadmin-ui/app/components/BootstrapWrappers/types.tsadmin-ui/app/components/GluuDropdown/GluuDropdown.tsxadmin-ui/app/components/GluuModalShell/GluuModalShell.tsxadmin-ui/app/components/GluuPageContent/GluuPageContent.tsxadmin-ui/app/components/GluuTable/GluuTable.style.tsadmin-ui/app/components/GluuTable/GluuTable.tsxadmin-ui/app/components/Layout/Layout.tsxadmin-ui/app/components/Layout/LayoutContent.tsxadmin-ui/app/components/Layout/LayoutNavbar.tsxadmin-ui/app/components/Layout/withPageConfig.tsxadmin-ui/app/components/LicenseScreens/ApiKey.tsxadmin-ui/app/components/LicenseScreens/GenerateLicenseCard.tsxadmin-ui/app/components/ModalLayer/ModalLayer.tsxadmin-ui/app/components/Notifications/index.tsxadmin-ui/app/components/SidebarMenu/SidebarMenu.tsxadmin-ui/app/components/SidebarMenu/SidebarMenuItem.tsxadmin-ui/app/components/Wizard/Wizard.tsxadmin-ui/app/components/icons/index.tsadmin-ui/app/context/theme/themeContext.tsxadmin-ui/app/i18n.tsadmin-ui/app/layout/default.tsxadmin-ui/app/locales/en/translation.jsonadmin-ui/app/locales/es/translation.jsonadmin-ui/app/locales/fr/translation.jsonadmin-ui/app/locales/pt/translation.jsonadmin-ui/app/routes/Apps/Gluu/GluuAlert.tsxadmin-ui/app/routes/Apps/Gluu/GluuAppSidebar.tsxadmin-ui/app/routes/Apps/Gluu/GluuDialog.tsxadmin-ui/app/routes/Apps/Gluu/GluuFormDetailRow.tsxadmin-ui/app/routes/Apps/Gluu/GluuInlineInput.tsxadmin-ui/app/routes/Apps/Gluu/GluuLoader.tsxadmin-ui/app/routes/Apps/Gluu/GluuScriptErrorModal.tsxadmin-ui/app/routes/Apps/Gluu/GluuSessionTimeoutDialog.tsxadmin-ui/app/routes/Apps/Gluu/GluuText.tsxadmin-ui/app/routes/Apps/Gluu/GluuToast.tsxadmin-ui/app/routes/Apps/Gluu/GluuUploadFile.tsxadmin-ui/app/routes/Apps/Gluu/LanguageMenu.tsxadmin-ui/app/routes/Apps/Gluu/hooks/useNavbarTheme.tsadmin-ui/app/routes/Apps/Gluu/styles/GluuToast.style.tsadmin-ui/app/routes/Apps/Gluu/types/GluuComponentPropsTypes.tsadmin-ui/app/routes/Apps/Gluu/types/GluuToast.types.tsadmin-ui/app/routes/Apps/Profile/ProfilePage.tsxadmin-ui/app/routes/Dashboards/DashboardPage.tsxadmin-ui/app/routes/Pages/ByeBye.tsxadmin-ui/app/routes/components/LogoThemed/LogoThemed.tsxadmin-ui/app/styles/plugins/_react-toastify.scssadmin-ui/app/styles/plugins/plugins.scssadmin-ui/app/utils/ApiKeyRedirect.tsxadmin-ui/app/utils/UploadSSA.tsxadmin-ui/app/utils/regex.tsadmin-ui/eslint.config.cjsadmin-ui/jest.config.tsadmin-ui/package.jsonadmin-ui/plugins/auth-server/components/AuthServerProperties/components/AuthServerPropertiesPage.tsxadmin-ui/plugins/auth-server/components/AuthServerProperties/components/JsonPropertyBuilder.tsxadmin-ui/plugins/auth-server/components/Authentication/AgamaFlows/AgamaFlows.tsxadmin-ui/plugins/auth-server/components/Authentication/AgamaFlows/AgamaProjectConfigModal.tsxadmin-ui/plugins/auth-server/components/Authentication/AgamaFlows/__tests__/helpers/agamaTestUtils.tsxadmin-ui/plugins/auth-server/components/Authentication/__tests__/helpers/authenticationTestUtils.tsxadmin-ui/plugins/auth-server/components/ConfigApiProperties/__tests__/components/ConfigApiPropertiesForm.test.tsxadmin-ui/plugins/auth-server/components/ConfigApiProperties/components/ConfigApiPropertiesForm.tsxadmin-ui/plugins/auth-server/components/ConfigApiProperties/components/ConfigApiPropertiesPage.tsxadmin-ui/plugins/auth-server/components/ConfigApiProperties/components/JsonPropertyBuilderConfigApi.tsxadmin-ui/plugins/auth-server/components/OidcClients/components/ClientActiveTokenDetailPage.tsxadmin-ui/plugins/auth-server/components/OidcClients/components/ClientActiveTokens.tsxadmin-ui/plugins/auth-server/components/OidcClients/components/ClientAddPage.tsxadmin-ui/plugins/auth-server/components/OidcClients/components/ClientEditPage.tsxadmin-ui/plugins/auth-server/components/OidcClients/components/ClientLogoutPanel.tsxadmin-ui/plugins/auth-server/components/Scopes/components/ScopeListPage.tsxadmin-ui/plugins/auth-server/components/Ssa/__tests__/helpers/ssaTestUtils.tsxadmin-ui/plugins/auth-server/components/Ssa/components/AvailableCustomAttributesPanel.tsxadmin-ui/plugins/fido/__tests__/components/Metrics/ActivityBarChart.test.tsxadmin-ui/plugins/fido/__tests__/components/Metrics/OnboardingTimeChart.test.tsxadmin-ui/plugins/saml/components/WebsiteSsoIdentityBrokeringList.tsxadmin-ui/plugins/saml/components/WebsiteSsoServiceProviderList.tsxadmin-ui/plugins/saml/components/styles/WebsiteSsoList.style.tsadmin-ui/plugins/saml/helper/index.tsadmin-ui/plugins/saml/helper/tableUtils.tsxadmin-ui/plugins/scripts/components/CustomScriptListPage.tsxadmin-ui/plugins/smtp/components/SmtpForm.tsxadmin-ui/plugins/user-claims/components/UserClaimsAddPage.tsxadmin-ui/plugins/user-claims/components/UserClaimsEditPage.tsxadmin-ui/plugins/user-claims/components/UserClaimsListPage.tsxadmin-ui/plugins/user-claims/components/UserClaimsViewPage.tsxadmin-ui/plugins/user-management/__tests__/helpers/userManagementTestUtils.tsxadmin-ui/plugins/user-management/__tests__/utils/formValidationUtils.test.tsadmin-ui/plugins/user-management/common/Constants.tsadmin-ui/plugins/user-management/components/User2FADevicesModal.tsxadmin-ui/plugins/user-management/components/UserEditPage.tsxadmin-ui/plugins/user-management/components/UserForm.tsxadmin-ui/plugins/user-management/components/UserList.tsxadmin-ui/plugins/user-management/utils/claimLabelUtils.tsadmin-ui/plugins/user-management/utils/formValidationUtils.tsadmin-ui/vite.config.ts
💤 Files with no reviewable changes (8)
- admin-ui/app/styles/plugins/plugins.scss
- admin-ui/plugins/saml/helper/tableUtils.tsx
- admin-ui/app/styles/plugins/_react-toastify.scss
- admin-ui/plugins/user-management/tests/utils/formValidationUtils.test.ts
- admin-ui/plugins/user-management/utils/formValidationUtils.ts
- admin-ui/app/layout/default.tsx
- admin-ui/vite.config.ts
- admin-ui/plugins/saml/helper/index.ts
Signed-off-by: faisalsiddique4400 <faisalsiddique10886@gmail.com>
Signed-off-by: faisalsiddique4400 <faisalsiddique10886@gmail.com>
Signed-off-by: faisalsiddique4400 <faisalsiddique10886@gmail.com>
Signed-off-by: faisalsiddique4400 <faisalsiddique10886@gmail.com>
Signed-off-by: faisalsiddique4400 <faisalsiddique10886@gmail.com>
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
admin-ui/eslint.config.cjs (1)
21-22:⚠️ Potential issue | 🟠 MajorUpdate ESLint React version to match the React 19 migration.
The
settings.react.versionis still set to"18"(Lines 21 and 46), mismatching the upgraded React runtime to version 19. This configuration mismatch can affect ESLint rule behavior and the react plugin's functionality.Suggested fix
settings: { - react: { version: '18' }, + react: { version: '19' }, },Apply this change at Lines 21-22 and Lines 46-47.
🤖 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 `@admin-ui/eslint.config.cjs` around lines 21 - 22, The settings.react.version in the ESLint configuration is still set to "18" but the project has been upgraded to React 19. Update the react.version property from "18" to "19" in both occurrences within the settings object in eslint.config.cjs (at lines 21-22 and lines 46-47) to ensure ESLint's React plugin rules and behaviors are configured for the correct React version.
🤖 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 `@admin-ui/app/i18n.ts`:
- Around line 27-29: The dynamic import statement for the Redux store does not
have a rejection handler, which can result in unhandled promise rejections if
the chunk fails to load. Add a catch handler to the import promise chain in the
fire-and-forget async block (where import('`@/redux/store`').then is called) to
gracefully handle any import failures, such as logging the error or providing a
fallback behavior, rather than leaving the rejection unhandled.
In `@admin-ui/app/routes/Apps/Gluu/GluuNavBar.tsx`:
- Around line 85-87: Remove the Box element containing the GluuErrorBoundaryDemo
component from the GluuNavBar navbar. The GluuErrorBoundaryDemo component is a
test/demo component that intentionally throws errors to trigger crash screens,
which should not be exposed in production as it allows users to disrupt active
workflows. Simply delete the entire Box wrapper (className={classes.navbarItem})
along with the GluuErrorBoundaryDemo child component it contains.
In `@admin-ui/eslint.config.cjs`:
- Around line 71-77: The react-hooks/exhaustive-deps rule is missing from the
ESLint configuration in eslint.config.cjs. Add this rule to the configuration
alongside the other react-hooks rules like react-hooks/rules-of-hooks and
react-hooks/error-boundaries. Set it to 'error' to ensure dependency arrays in
useEffect, useMemo, and useCallback are properly maintained and prevent
stale-closure and effect bugs.
---
Outside diff comments:
In `@admin-ui/eslint.config.cjs`:
- Around line 21-22: The settings.react.version in the ESLint configuration is
still set to "18" but the project has been upgraded to React 19. Update the
react.version property from "18" to "19" in both occurrences within the settings
object in eslint.config.cjs (at lines 21-22 and lines 46-47) to ensure ESLint's
React plugin rules and behaviors are configured for the correct React version.
🪄 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: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 0467612c-7e48-45cf-b634-3c596b858357
📒 Files selected for processing (28)
admin-ui/app/components/App/AppMain.tsxadmin-ui/app/constants/index.tsadmin-ui/app/constants/links.tsadmin-ui/app/helpers/navigation.tsadmin-ui/app/i18n.tsadmin-ui/app/locales/en/translation.jsonadmin-ui/app/locales/es/translation.jsonadmin-ui/app/locales/fr/translation.jsonadmin-ui/app/locales/pt/translation.jsonadmin-ui/app/redux/api/axios.tsadmin-ui/app/routes/Apps/Gluu/Gluu404Error.tsxadmin-ui/app/routes/Apps/Gluu/GluuAppSidebar.tsxadmin-ui/app/routes/Apps/Gluu/GluuErrorBoundaryDemo.tsxadmin-ui/app/routes/Apps/Gluu/GluuErrorFallBack.tsxadmin-ui/app/routes/Apps/Gluu/GluuErrorScreen.tsxadmin-ui/app/routes/Apps/Gluu/GluuNavBar.tsxadmin-ui/app/routes/Apps/Gluu/Tests/GluuErrorScreen.test.tsxadmin-ui/app/routes/Apps/Gluu/styles/GluuErrorScreen.style.tsadmin-ui/app/routes/Apps/Profile/ProfilePage.tsxadmin-ui/app/routes/index.tsxadmin-ui/app/utils/__tests__/logUiCrash.test.tsadmin-ui/app/utils/logUiCrash.tsadmin-ui/eslint.config.cjsadmin-ui/package.jsonadmin-ui/plugins/auth-server/components/AuthServerProperties/components/JsonPropertyBuilder.tsxadmin-ui/plugins/auth-server/components/ConfigApiProperties/components/ConfigApiPropertiesForm.tsxadmin-ui/plugins/auth-server/components/ConfigApiProperties/components/JsonPropertyBuilderConfigApi.tsxadmin-ui/plugins/scripts/components/CustomScriptEditPage.tsx
💤 Files with no reviewable changes (2)
- admin-ui/app/routes/Apps/Gluu/GluuErrorFallBack.tsx
- admin-ui/app/helpers/navigation.ts
Signed-off-by: faisalsiddique4400 <faisalsiddique10886@gmail.com>
Signed-off-by: faisalsiddique4400 <faisalsiddique10886@gmail.com>
|
duttarnab
approved these changes
Jun 20, 2026
moabu
approved these changes
Jun 22, 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
4 participants
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.
feat(admin-ui): upgrade React to v19 and align codebase with modern React standards (#2880)
Summary
This PR upgrades the Admin UI to React 19 and modernizes the codebase to align with the latest React recommendations and runtime behavior.
The work includes dependency upgrades, compatibility validation across the application, and incremental adoption of React 19 best practices where applicable. The objective is to keep the Admin UI aligned with the current React ecosystem while improving maintainability, performance, and future upgrade readiness.
Fix Summary
Verification
passes successfully.
🔗 Ticket
Closes: #2880
Summary by CodeRabbit
New Features
Bug Fixes
Refactor
Tests
Chores