feat(admin-ui): implement mobile header, dashboard, and health screens (#2920)

admin-ui/app/components/GluuDatePicker/GluuDatePicker.style.ts

@@ -123,6 +123,41 @@ const buildTextFieldSx = (
 const POPUP_BOX_SHADOW = '0 8px 24px rgba(0, 0, 0, 0.18)'
 
 const buildPopperSx = (tc: PickerThemeColors): SxProps<Theme> => ({
+  '@media (max-width:767px)': {
+    '& .MuiPaper-root': {
+      width: 'min(256px, calc(100vw - 32px))',
+      maxWidth: 'calc(100vw - 32px)',
+      boxSizing: 'border-box',
+    },
+    '& .MuiDateCalendar-root': {
+      width: '100%',
+      maxWidth: '100%',
+      height: 'auto',
+      maxHeight: 'none',
+    },
+    '& .MuiDayCalendar-slideTransition': {
+      minHeight: '180px',
+    },
+    '& .MuiDayCalendar-header, & .MuiDayCalendar-weekContainer': {
+      justifyContent: 'space-around',
+    },
+    '& .MuiPickersDay-root, & .MuiPickerDay-root': {
+      width: '28px',
+      height: '28px',
+      margin: '1px',
+      fontSize: '12px',
+    },
+    '& .MuiDayCalendar-weekDayLabel': {
+      width: '28px',
+      margin: '1px',
+      fontSize: '12px',
+    },
+    '& .MuiPickersCalendarHeader-root': {
+      paddingLeft: '12px',
+      paddingRight: '8px',
+      marginTop: '8px',
+    },
+  },
   '& .MuiPaper-root': {
     'backgroundColor': tc.popupBg,
     'color': tc.inputTextColor,

admin-ui/app/components/GluuDropdown/GluuDropdown.tsx

@@ -110,9 +110,7 @@ export const GluuDropdown = <T extends DropdownValue = DropdownValue>({
   )
 
   const getSelectedOption = useCallback(():
-    | GluuDropdownOption<T>
-    | GluuDropdownOption<T>[]
-    | undefined => {
+    GluuDropdownOption<T> | GluuDropdownOption<T>[] | undefined => {
     if (selectedValue === undefined) return undefined
     if (multiple && Array.isArray(selectedValue)) {
       return options.filter((opt) => selectedValue.includes(opt.value))

admin-ui/app/components/GluuSearchToolbar/GluuRefreshButton.tsx

@@ -13,6 +13,7 @@ const GluuRefreshButton: React.FC<GluuRefreshButtonProps> = ({
   label,
   loading = false,
   className,
+  icon,
   variant = 'outlined',
   minHeight,
   size = 'md',
@@ -52,7 +53,11 @@ const GluuRefreshButton: React.FC<GluuRefreshButtonProps> = ({
       useOpacityOnHover={useOpacityOnHover}
       minHeight={minHeight}
     >
-      <RefreshIcon fontSize="small" className={loading ? classes.iconSpin : classes.icon} />
+      {icon ? (
+        <span className={loading ? classes.iconSpin : classes.icon}>{icon}</span>
+      ) : (
+        <RefreshIcon fontSize="small" className={loading ? classes.iconSpin : classes.icon} />
+      )}
       {displayLabel}
     </GluuButton>
   )

admin-ui/app/components/GluuSearchToolbar/types.ts

@@ -87,6 +87,7 @@ export type GluuRefreshButtonProps = {
   label?: string
   loading?: boolean
   className?: string
+  icon?: ReactNode
   variant?: 'primary' | 'outlined'
   minHeight?: number
   size?: 'sm' | 'md' | 'lg'

admin-ui/app/components/MobileBottomNav/MobileNavSheet.style.ts

@@ -15,6 +15,11 @@ const useStyles = makeStyles<{ colors: MobileNavSheetThemeColors }>()((_theme, {
     padding: 0,
     cursor: 'pointer',
     backgroundColor: `rgba(${hexToRgb(customColors.black)}, ${SHEET.SCRIM_OPACITY})`,
+    opacity: 0,
+    transition: `opacity ${SHEET.TRANSITION_MS}ms ease`,
+  },
+  scrimOpen: {
+    opacity: 1,
   },
   sheet: {
     position: 'fixed',
@@ -30,6 +35,12 @@ const useStyles = makeStyles<{ colors: MobileNavSheetThemeColors }>()((_theme, {
     borderRadius: `${BORDER_RADIUS.MOBILE_SHEET}px ${BORDER_RADIUS.MOBILE_SHEET}px 0 0`,
     boxShadow: `0px ${SHEET.SHADOW_OFFSET_Y}px ${SHEET.SHADOW_BLUR}px 0px rgba(${hexToRgb(customColors.black)}, ${SHEET.SHADOW_OPACITY})`,
     paddingBottom: `calc(${BOTTOM_NAV.HEIGHT}px + env(safe-area-inset-bottom))`,
+    transform: 'translateY(100%)',
+    transition: `transform ${SHEET.TRANSITION_MS}ms cubic-bezier(0.32, 0.72, 0, 1)`,
+    willChange: 'transform',
+  },
+  sheetOpen: {
+    transform: 'translateY(0)',
   },
   header: {
     position: 'relative',
@@ -184,21 +195,36 @@ const useStyles = makeStyles<{ colors: MobileNavSheetThemeColors }>()((_theme, {
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'flex-start',
-    gap: SHEET.LIST_ROW_GAP,
+    gap: 0,
     width: '100%',
   },
   chevron: {
     flexShrink: 0,
     color: colors.listText,
     transition: 'transform 0.15s ease',
   },
+  subListWrap: {
+    display: 'grid',
+    gridTemplateRows: '0fr',
+    width: '100%',
+    transition: `grid-template-rows ${SHEET.SUBLIST_TRANSITION_MS}ms ease`,
+  },
+  subListWrapOpen: {
+    gridTemplateRows: '1fr',
+  },
+  subListInner: {
+    overflow: 'hidden',
+    minHeight: 0,
+    width: '100%',
+  },
   subList: {
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'flex-start',
     gap: SHEET.LIST_ROW_GAP,
     width: '100%',
     paddingLeft: SHEET.SUBLIST_INDENT,
+    paddingTop: SHEET.LIST_ROW_GAP,
   },
   subListItem: {
     padding: 0,

admin-ui/app/components/MobileBottomNav/MobileNavSheet.tsx

@@ -1,4 +1,12 @@
-import { useCallback, useEffect, useMemo, useRef, useState, type JSX } from 'react'
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type JSX,
+  type TransitionEvent as ReactTransitionEvent,
+} from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import { useLocation } from 'react-router-dom'
@@ -38,6 +46,8 @@ const MobileNavSheet = ({
   const isLight = state.theme === THEME_LIGHT
   const [expandedKeys, setExpandedKeys] = useState<readonly string[]>([])
   const [drillTile, setDrillTile] = useState<SheetItem | null>(null)
+  const [renderKey, setRenderKey] = useState<SheetKey | null>(openKey)
+  const [entered, setEntered] = useState(false)
   const closeButtonRef = useRef<HTMLButtonElement>(null)
 
   const toggleExpanded = useCallback((key: string): void => {
@@ -61,18 +71,38 @@ const MobileNavSheet = ({
   const { classes, cx } = useStyles({ colors: themeColors })
 
   useEffect(() => {
-    if (!openKey) return undefined
+    if (!openKey) {
+      setEntered(false)
+      return undefined
+    }
+    setRenderKey(openKey)
+    let inner = 0
+    const outer = requestAnimationFrame(() => {
+      inner = requestAnimationFrame(() => setEntered(true))
+    })
+    return () => {
+      cancelAnimationFrame(outer)
+      cancelAnimationFrame(inner)
+    }
+  }, [openKey])
+
+  useEffect(() => {
+    if (!renderKey) return undefined
+    closeButtonRef.current?.focus()
     const onKeyDown = (e: KeyboardEvent): void => {
       if (e.key === 'Escape') onClose()
     }
     document.addEventListener('keydown', onKeyDown)
     return () => document.removeEventListener('keydown', onKeyDown)
-  }, [openKey, onClose])
+  }, [renderKey, onClose])
 
-  useEffect(() => {
-    if (!openKey) return
-    closeButtonRef.current?.focus()
-  }, [openKey])
+  const handleSheetTransitionEnd = useCallback(
+    (e: ReactTransitionEvent<HTMLDivElement>): void => {
+      if (e.target !== e.currentTarget || e.propertyName !== 'transform') return
+      if (!openKey) setRenderKey(null)
+    },
+    [openKey],
+  )
 
   const isItemActive = useCallback(
     (item: SheetItem): boolean =>
@@ -103,10 +133,10 @@ const MobileNavSheet = ({
     setExpandedKeys(activeGroups)
   }, [openKey, isItemActive])
 
-  if (!openKey || typeof document === 'undefined') return null
+  if (!renderKey || typeof document === 'undefined') return null
 
-  const isMore = openKey === SHEET_KEYS.MORE
-  const section = isSectionKey(openKey) ? SECTION_MENUS[openKey] : null
+  const isMore = renderKey === SHEET_KEYS.MORE
+  const section = isSectionKey(renderKey) ? SECTION_MENUS[renderKey] : null
   const isDrilled = isMore && drillTile !== null
 
   const headerTitleKey = isDrilled
@@ -133,12 +163,13 @@ const MobileNavSheet = ({
     <>
       <button
         type="button"
-        className={classes.scrim}
+        className={cx(classes.scrim, entered && classes.scrimOpen)}
         onClick={onClose}
         aria-label={t('actions.close')}
       />
       <div
-        className={classes.sheet}
+        className={cx(classes.sheet, entered && classes.sheetOpen)}
+        onTransitionEnd={handleSheetTransitionEnd}
         role="dialog"
         aria-modal="true"
         aria-label={t(headerTitleKey)}
@@ -234,27 +265,33 @@ const MobileNavSheet = ({
                           direction={expanded ? 'up' : 'down'}
                         />
                       </button>
-                      {expanded ? (
-                        <div className={classes.subList}>
-                          {item.children.map((child) => {
-                            const childActive = isItemActive(child)
-                            return (
-                              <button
-                                key={child.key}
-                                type="button"
-                                className={cx(
-                                  classes.subListItem,
-                                  childActive && classes.listItemActive,
-                                )}
-                                aria-current={childActive ? 'page' : undefined}
-                                onClick={() => onSelect(child)}
-                              >
-                                {t(child.titleKey)}
-                              </button>
-                            )
-                          })}
+                      <div
+                        className={cx(classes.subListWrap, expanded && classes.subListWrapOpen)}
+                        aria-hidden={!expanded}
+                      >
+                        <div className={classes.subListInner}>
+                          <div className={classes.subList}>
+                            {item.children.map((child) => {
+                              const childActive = isItemActive(child)
+                              return (
+                                <button
+                                  key={child.key}
+                                  type="button"
+                                  className={cx(
+                                    classes.subListItem,
+                                    childActive && classes.listItemActive,
+                                  )}
+                                  aria-current={childActive ? 'page' : undefined}
+                                  tabIndex={expanded ? 0 : -1}
+                                  onClick={() => onSelect(child)}
+                                >
+                                  {t(child.titleKey)}
+                                </button>
+                              )
+                            })}
+                          </div>
                         </div>
-                      ) : null}
+                      </div>
                     </div>
                   )
                 }

admin-ui/app/components/MobileBottomNav/sheetConstants.ts

@@ -167,6 +167,8 @@ export const SHEET = {
   SHADOW_BLUR: 25,
   SHADOW_OPACITY: 0.1,
   SCRIM_OPACITY: 0.6,
+  TRANSITION_MS: 800,
+  SUBLIST_TRANSITION_MS: 500,
   Z_SCRIM: 10001,
   Z_SHEET: 10002,
   Z_BAR_ELEVATED: 10003,

admin-ui/app/components/SVG/ArrowRight.tsx

@@ -0,0 +1,32 @@
+import { memo } from 'react'
+
+type ArrowRightIconProps = {
+  width?: number | string
+  height?: number | string
+  className?: string
+}
+
+export const ArrowRightIcon = memo<ArrowRightIconProps>(
+  ({ width = 10, height = 10, className }) => (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 10 10"
+      fill="none"
+      className={className}
+      style={{ display: 'block' }}
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path
+        d="M1 5h8M5.5 1.5L9 5l-3.5 3.5"
+        stroke="currentColor"
+        strokeWidth="1.2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  ),
+)
+
+ArrowRightIcon.displayName = 'ArrowRightIcon'

admin-ui/app/components/SVG/Refresh.tsx

@@ -0,0 +1,27 @@
+import { memo } from 'react'
+
+type RefreshIconProps = {
+  width?: number | string
+  height?: number | string
+  className?: string
+}
+
+export const RefreshIcon = memo<RefreshIconProps>(({ width = 22, height = 22, className }) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 22 22"
+    fill="none"
+    className={className}
+    style={{ display: 'block' }}
+    aria-hidden="true"
+    focusable="false"
+  >
+    <path
+      d="M3.4375 11.6875C3.05766 11.6875 2.75 11.3798 2.75 11C2.75 6.45047 6.45047 2.75 11 2.75C13.2052 2.75 15.3106 3.65406 16.8438 5.18547V2.75C16.8438 2.37016 17.1514 2.0625 17.5312 2.0625C17.9111 2.0625 18.2188 2.37016 18.2188 2.75V7.21875C18.2188 7.59859 17.9111 7.90625 17.5312 7.90625H13.0625C12.6827 7.90625 12.375 7.59859 12.375 7.21875C12.375 6.83891 12.6827 6.53125 13.0625 6.53125H16.2233C14.9291 5.00844 13.047 4.125 11 4.125C7.20844 4.125 4.125 7.20844 4.125 11C4.125 11.3798 3.81734 11.6875 3.4375 11.6875ZM18.5625 10.3125C18.1827 10.3125 17.875 10.6202 17.875 11C17.875 14.7916 14.7916 17.875 11 17.875C8.98734 17.875 7.07609 16.9727 5.78187 15.4688H8.9375C9.31734 15.4688 9.625 15.1611 9.625 14.7812C9.625 14.4014 9.31734 14.0938 8.9375 14.0938H4.46875C4.08891 14.0938 3.78125 14.4014 3.78125 14.7812V19.25C3.78125 19.6298 4.08891 19.9375 4.46875 19.9375C4.84859 19.9375 5.15625 19.6298 5.15625 19.25V16.8145C6.68938 18.3477 8.79312 19.25 11 19.25C15.5495 19.25 19.25 15.5495 19.25 11C19.25 10.6202 18.9423 10.3125 18.5625 10.3125Z"
+      fill="currentColor"
+    />
+  </svg>
+))
+
+RefreshIcon.displayName = 'RefreshIcon'

admin-ui/app/components/SVG/index.tsx

@@ -12,6 +12,8 @@ import SmtpZoneIcon from './menu/Smtp'
 import ScriptsIcon from './menu/Scripts'
 import LockIcon from './menu/Lock'
 import { ChevronIcon } from './Chevron'
+import { RefreshIcon } from './Refresh'
+import { ArrowRightIcon } from './ArrowRight'
 
 export {
   JansKcLinkIcon,
@@ -28,4 +30,6 @@ export {
   ScriptsIcon,
   LockIcon,
   ChevronIcon,
+  RefreshIcon,
+  ArrowRightIcon,
 }

admin-ui/app/components/index.tsx

@@ -14,7 +14,7 @@ import { ThemeProvider } from './Theme'
 import { GluuDropdown } from './GluuDropdown'
 import { GluuPageContent } from './GluuPageContent'
 import { GluuDynamicList } from './GluuDynamicList'
-import { ChevronIcon } from './SVG'
+import { ChevronIcon, ArrowRightIcon } from './SVG'
 import Wizard from './Wizard'
 import WizardStep from './Wizard/WizardStep'
 import ApiKey from './LicenseScreens/ApiKey'
@@ -55,6 +55,7 @@ export {
   GluuDropdown,
   GluuPageContent,
   ChevronIcon,
+  ArrowRightIcon,
   Wizard,
   WizardStep,
   ApiKey,