feat(admin-ui): implement mobile header, dashboard, and health screens (#2920)#2921
Merged
Conversation
#2920) Signed-off-by: faisalsiddique4400 <faisalsiddique10886@gmail.com>
Contributor
|
Warning Review limit reached
Next review available in: 19 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (7)
📝 WalkthroughWalkthroughThe admin UI adds mobile-responsive navigation, dashboard, date-picker, health-page, profile, and bottom-sheet behavior. It also introduces persisted theme/language preferences, reusable SVG icons, localized labels, and responsive service-card styling. ChangesMobile admin UI
Estimated code review effort: 4 (Complex) | ~60 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant GluuNavBar
participant MobileProfileDropdown
participant PreferenceHooks
participant BrowserStorage
User->>GluuNavBar: open mobile profile
GluuNavBar->>MobileProfileDropdown: render profile menu
MobileProfileDropdown->>PreferenceHooks: select theme or language
PreferenceHooks->>BrowserStorage: persist preference
PreferenceHooks-->>MobileProfileDropdown: apply selected preference
Possibly related PRs
Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ 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 |
mo-auto
added
comp-admin-ui
![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 `@admin-ui/app/routes/Apps/Gluu/GluuNavBar.tsx`:
- Line 82: Update the home link in GluuNavBar’s mobile logo Link to use a static
translated aria-label that describes its destination or purpose, such as “Home,”
instead of the current pageTitle value; use the project’s existing i18n
translation mechanism.
- Line 31: Update the useMediaQuery call in GluuNavBar to pass the noSsr option
as true, ensuring the mobile breakpoint is evaluated immediately without the
initial desktop-layout render.
In `@admin-ui/app/routes/components/Dropdowns/MobileProfileDropdown.tsx`:
- Around line 77-107: Extract the duplicated user-config theme persistence logic
from MobileProfileDropdown’s onChangeTheme and ThemeDropdownComponent’s
onChangeTheme into a shared useThemePersistence(userInfo) hook. Have the hook
validate, read/merge/write STORAGE_KEYS.USER_CONFIG keyed by inum, handle parse
failures, and expose the theme-change callback; update both components to use it
while retaining their existing dispatch behavior and dependencies.
- Around line 109-123: Add error handling to the promise chain in
changeLanguage, handling rejections from ensureLocaleLoaded or
i18n.changeLanguage with an internal catch that logs diagnostic details and
reconciles the optimistic lang state and persisted INIT_LANG/USER_CONFIG values
as appropriate. Keep the operation fire-and-forget without allowing unhandled
rejections, and update dependencies only if required by the chosen error
handler.
🪄 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: 09ff9758-2d29-4d17-8e59-6d0644242e7f
📒 Files selected for processing (22)
admin-ui/app/components/GluuDatePicker/GluuDatePicker.style.tsadmin-ui/app/components/GluuSearchToolbar/GluuRefreshButton.tsxadmin-ui/app/components/GluuSearchToolbar/types.tsadmin-ui/app/components/SVG/Refresh.tsxadmin-ui/app/components/SVG/index.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/GluuNavBar.tsxadmin-ui/app/routes/Apps/Gluu/hooks/useNavbarTheme.tsadmin-ui/app/routes/Apps/Gluu/styles/GluuNavBar.style.tsadmin-ui/app/routes/Dashboards/DashboardPage.style.tsadmin-ui/app/routes/Dashboards/DashboardPage.tsxadmin-ui/app/routes/components/Dropdowns/MobileProfileDropdown.tsxadmin-ui/app/routes/components/Dropdowns/styles/MobileProfileDropdown.style.tsadmin-ui/app/routes/components/LogoThemed/LogoThemed.tsxadmin-ui/app/styles/miltonbo/scss/_layout.scssadmin-ui/plugins/admin/components/Health/HealthPage.style.tsadmin-ui/plugins/admin/components/Health/HealthPage.tsxadmin-ui/plugins/admin/components/Health/components/ServiceStatusCard.style.tsadmin-ui/plugins/admin/components/Health/components/ServiceStatusCard.tsx
Signed-off-by: faisalsiddique4400 <faisalsiddique10886@gmail.com>
duttarnab
requested changes
Jul 11, 2026
duttarnab
left a comment
duttarnab
left a comment
Contributor
There was a problem hiding this comment.
- The botton navigation should be always visible
- The horizontal scroll should not be allowed in mobile view
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: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
admin-ui/app/routes/components/Dropdowns/MobileProfileDropdown.tsx (1)
72-86: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick winNo Escape-key handler to close the menu.
Unlike
MobileNavSheet(which closes onEscape), this dropdown only closes via outside click or item selection. Popup menus (role="menu") are expected to close onEscapefor keyboard users.♿ Proposed fix
useEffect(() => { if (!isOpen) return const handleClickOutside = (event: MouseEvent) => { const target = event.target as Node if (containerRef.current && !containerRef.current.contains(target)) { setIsOpen(false) } } document.addEventListener('mousedown', handleClickOutside) return () => { document.removeEventListener('mousedown', handleClickOutside) } }, [isOpen]) + + useEffect(() => { + if (!isOpen) return undefined + const handleKeyDown = (event: KeyboardEvent) => { + if (event.key === 'Escape') setIsOpen(false) + } + document.addEventListener('keydown', handleKeyDown) + return () => document.removeEventListener('keydown', handleKeyDown) + }, [isOpen])🤖 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/app/routes/components/Dropdowns/MobileProfileDropdown.tsx` around lines 72 - 86, Add an Escape-key listener within the MobileProfileDropdown useEffect when isOpen, invoking setIsOpen(false) for Escape presses. Register and clean up this listener alongside the existing mousedown handler, preserving current outside-click behavior.
🤖 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/MobileBottomNav/MobileNavSheet.tsx`:
- Around line 268-293: Update the child buttons rendered by the sublist in
MobileNavSheet so collapsed items are removed from keyboard navigation while
expanded items retain normal focusability. Use the existing expanded state to
set each button’s tabIndex consistently with the aria-hidden state on the
subListWrap.
In `@admin-ui/app/hooks/useLangPersistence.ts`:
- Around line 16-25: Prevent out-of-order locale loads from applying stale
languages: add a latest-request tracker in useLangPersistence, update it
synchronously in changeLanguage before invoking applyLanguage, and pass or
otherwise use it in applyLanguage to verify the resolved code is still current
before calling i18nInstance.changeLanguage. Keep persistence writes unchanged
and continue logging load errors.
---
Outside diff comments:
In `@admin-ui/app/routes/components/Dropdowns/MobileProfileDropdown.tsx`:
- Around line 72-86: Add an Escape-key listener within the MobileProfileDropdown
useEffect when isOpen, invoking setIsOpen(false) for Escape presses. Register
and clean up this listener alongside the existing mousedown handler, preserving
current outside-click behavior.
🪄 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: e3d17fb4-c5c6-438c-92ac-a4183e54c555
📒 Files selected for processing (38)
admin-ui/app/components/GluuDatePicker/GluuDatePicker.style.tsadmin-ui/app/components/GluuDropdown/GluuDropdown.tsxadmin-ui/app/components/GluuSearchToolbar/types.tsadmin-ui/app/components/MobileBottomNav/MobileNavSheet.style.tsadmin-ui/app/components/MobileBottomNav/MobileNavSheet.tsxadmin-ui/app/components/MobileBottomNav/sheetConstants.tsadmin-ui/app/components/SVG/ArrowRight.tsxadmin-ui/app/components/SVG/Refresh.tsxadmin-ui/app/components/SVG/index.tsxadmin-ui/app/components/index.tsxadmin-ui/app/hooks/useLangPersistence.tsadmin-ui/app/hooks/useThemePersistence.tsadmin-ui/app/locales/en/translation.jsonadmin-ui/app/routes/Apps/Gluu/GluuNavBar.tsxadmin-ui/app/routes/Apps/Gluu/LanguageMenu.tsxadmin-ui/app/routes/Apps/Gluu/ThemeDropdown.tsxadmin-ui/app/routes/Apps/Gluu/styles/GluuNavBar.style.tsadmin-ui/app/routes/Apps/Gluu/types/common.tsadmin-ui/app/routes/components/Dropdowns/MobileProfileDropdown.tsxadmin-ui/app/routes/components/Dropdowns/styles/MobileProfileDropdown.style.tsadmin-ui/app/routes/components/Dropdowns/types.tsadmin-ui/app/routes/components/LogoThemed/LogoThemed.tsxadmin-ui/app/utils/types/TokenControllerTypes.tsadmin-ui/app/utils/userConfig.tsadmin-ui/plugins/admin/components/Health/HealthPage.style.tsadmin-ui/plugins/admin/components/Health/components/ServiceStatusCard.style.tsadmin-ui/plugins/admin/helper/assets.tsadmin-ui/plugins/admin/helper/webhook.tsadmin-ui/plugins/auth-server/components/AuthServerProperties/types/index.tsadmin-ui/plugins/auth-server/components/ConfigApiProperties/utils/valueUtils.tsadmin-ui/plugins/auth-server/components/Sessions/types/sessionTypes.tsadmin-ui/plugins/saml/components/WebsiteSsoServiceProviderForm.tsxadmin-ui/plugins/saml/helper/utils.tsadmin-ui/plugins/saml/types/formValues.tsadmin-ui/plugins/scim/components/ScimPage.tsxadmin-ui/plugins/user-claims/components/types/UserClaimsListPage.types.tsadmin-ui/plugins/user-management/components/UserDetailViewPage.tsxadmin-ui/vite.config.ts
💤 Files with no reviewable changes (6)
- admin-ui/app/components/SVG/Refresh.tsx
- admin-ui/app/components/GluuSearchToolbar/types.ts
- admin-ui/app/components/GluuDatePicker/GluuDatePicker.style.ts
- admin-ui/app/routes/Apps/Gluu/styles/GluuNavBar.style.ts
- admin-ui/app/routes/components/LogoThemed/LogoThemed.tsx
- admin-ui/plugins/admin/components/Health/HealthPage.style.ts
duttarnab
previously approved these changes
Jul 13, 2026
Signed-off-by: faisalsiddique4400 <faisalsiddique10886@gmail.com>
Signed-off-by: faisalsiddique4400 <faisalsiddique10886@gmail.com>
Signed-off-by: faisalsiddique4400 <faisalsiddique10886@gmail.com>
|
duttarnab
approved these changes
Jul 13, 2026
moabu
approved these changes
Jul 13, 2026
This was referenced Jul 14, 2026
Merged
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): implement mobile header, dashboard, and health screens (#2920)
Summary
This PR introduces the mobile implementation of the Admin UI header along with responsive layouts for the Dashboard and Health pages.
The update improves the mobile user experience by adapting these core screens to smaller displays while maintaining consistency with the existing Admin UI design system and responsive navigation.
Fix Summary
Verification
passes successfully.
🔗 Ticket
Closes: #2920
Summary by CodeRabbit