feat(admin-ui): implement mobile header, dashboard, and health screens (#2920)#2921
feat(admin-ui): implement mobile header, dashboard, and health screens (#2920)#2921faisalsiddique4400 wants to merge 2 commits into
Conversation
#2920) Signed-off-by: faisalsiddique4400 <faisalsiddique10886@gmail.com>
|
Warning Review limit reached
Next review available in: 22 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 (4)
📝 WalkthroughWalkthroughThe admin UI adds mobile-responsive navigation, dashboard, date-picker, and health-page layouts. It introduces a mobile profile dropdown, themed logo variants, localized labels, custom refresh icons, responsive service cards, and navbar border theming. ChangesMobile admin UI
Estimated code review effort: 4 (Complex) | ~45 minutes 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}
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
left a comment
duttarnab
left a comment
There was a problem hiding this comment.
- The botton navigation should be always visible
- The horizontal scroll should not be allowed in mobile view
3 participants
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