feat(admin-ui): add Cedarling log toggle to profile dropdowns

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

@@ -35,6 +35,15 @@ const getPositionStyles = (position: DropdownPosition) => {
         marginLeft: SHARED_DROPDOWN_STYLES.margin,
         ...baseTransform,
       }
+    // Right-aligned to the trigger instead of centred on it, so a menu wider than
+    // its trigger grows inward. Centring overflows the viewport for a trigger that
+    // sits at the right edge, which scrolls the page horizontally.
+    case 'bottom-end':
+      return {
+        top: '100%',
+        marginTop: SHARED_DROPDOWN_STYLES.margin,
+        right: 0,
+      }
     default:
       return {}
   }
@@ -54,6 +63,16 @@ const getArrowStyles = (position: DropdownPosition) => {
         left: '50%',
         transform: 'translateX(-50%)',
       }
+    // Rendered against the wrapper rather than the menu (see GluuDropdown.tsx), so it
+    // centres on the trigger. 100% is the trigger's bottom edge; the menu starts 13px
+    // below that and the arrow sits 15px above the menu's top, hence the 2px back up.
+    case 'bottom-end':
+      return {
+        top: 'calc(100% - 2px)',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        zIndex: SHARED_DROPDOWN_STYLES.menuZIndex + 1,
+      }
     case 'left':
       return {
         right: '-15px',
@@ -76,7 +95,8 @@ export const useStyles = makeStyles<{
   position: DropdownPosition
   dropdownBg: string
   centerText?: boolean
-}>()((_theme, { isDark, position, dropdownBg, centerText }) => ({
+  optionPadding?: string
+}>()((_theme, { isDark, position, dropdownBg, centerText, optionPadding }) => ({
   dropdownWrapper: {
     position: 'relative',
     display: 'inline-block',
@@ -93,7 +113,12 @@ export const useStyles = makeStyles<{
     maxHeight: SHARED_DROPDOWN_STYLES.maxHeight,
     overflow: 'visible',
     ...getPositionStyles(position),
-    marginTop: position === 'bottom' ? '13px' : position === 'top' ? undefined : '4px',
+    marginTop:
+      position === 'bottom' || position === 'bottom-end'
+        ? '13px'
+        : position === 'top'
+          ? undefined
+          : '4px',
   },
   dropdownMenuContent: {
     padding: SHARED_DROPDOWN_STYLES.padding,
@@ -140,6 +165,7 @@ export const useStyles = makeStyles<{
     ...createBaseOptionStyles({
       isDark,
       ...(centerText && { optionPadding: '12px 12px' }),
+      ...(optionPadding && { optionPadding }),
     }),
     '&.single-option': {
       justifyContent: 'center',

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

@@ -49,6 +49,7 @@ export const GluuDropdown = <T extends DropdownValue = DropdownValue>({
   renderOption,
   renderTrigger,
   centerText = false,
+  optionPadding,
 }: GluuDropdownProps<T>): React.ReactElement => {
   const [internalState, setInternalState] = useState<DropdownState>({
     isOpen: false,
@@ -66,9 +67,14 @@ export const GluuDropdown = <T extends DropdownValue = DropdownValue>({
   const dropdownBg = useMemo(() => {
     return isDark ? customColors.darkDropdownBg : customColors.white
   }, [isDark])
-  const { classes } = useStyles({ isDark, position, dropdownBg, centerText })
+  const { classes } = useStyles({ isDark, position, dropdownBg, centerText, optionPadding })
 
   const isOpen = controlled ? (controlledIsOpen ?? false) : internalState.isOpen
+  // A 'bottom-end' menu is right-aligned to the trigger, so an arrow positioned against
+  // the menu can't find the trigger's centre — the menu is wider than the trigger by an
+  // amount that varies with the options. Rendering it against the wrapper instead, which
+  // is inline-block around the trigger alone, centres it with plain CSS.
+  const arrowAnchoredToTrigger = position === 'bottom-end'
   const searchQuery = internalState.searchQuery
 
   const setIsOpen = useCallback(
@@ -152,7 +158,7 @@ export const GluuDropdown = <T extends DropdownValue = DropdownValue>({
       option.onClick?.(option.value, option)
       onSelect?.(option.value, option)
 
-      if (closeOnSelect) {
+      if (closeOnSelect && !option.keepOpen) {
         setIsOpen(false)
         setInternalState((prev) => ({ ...prev, searchQuery: '' }))
       }
@@ -269,7 +275,7 @@ export const GluuDropdown = <T extends DropdownValue = DropdownValue>({
           role="listbox"
           id={listboxId}
         >
-          {showArrow && (
+          {showArrow && !arrowAnchoredToTrigger && (
             <div className={classes.arrow}>
               <ArrowIcon />
             </div>
@@ -293,6 +299,11 @@ export const GluuDropdown = <T extends DropdownValue = DropdownValue>({
           </div>
         </Box>
       )}
+      {isOpen && showArrow && arrowAnchoredToTrigger && (
+        <div className={classes.arrow}>
+          <ArrowIcon />
+        </div>
+      )}
     </div>
   )
 }

admin-ui/app/components/GluuDropdown/types/GluuDropdownTypes.ts

@@ -1,6 +1,6 @@
 import type React from 'react'
 
-export type DropdownPosition = 'top' | 'bottom' | 'left' | 'right'
+export type DropdownPosition = 'top' | 'bottom' | 'bottom-end' | 'left' | 'right'
 
 export type DropdownValue = string | number | boolean
 
@@ -13,6 +13,8 @@ export type GluuDropdownOption<T extends DropdownValue = DropdownValue> = {
   icon?: React.ReactNode
   metadata?: Record<string, string | number | boolean | null | undefined>
   searchValue?: string
+  /** Keeps the menu open after this option is clicked, even when closeOnSelect is set. */
+  keepOpen?: boolean
 }
 
 export type GluuDropdownProps<T extends DropdownValue = DropdownValue> = {
@@ -43,6 +45,8 @@ export type GluuDropdownProps<T extends DropdownValue = DropdownValue> = {
     selectedOption?: GluuDropdownOption<T> | GluuDropdownOption<T>[],
   ) => React.ReactNode
   centerText?: boolean
+  /** Overrides the default option padding, which reserves 48px on the right for a checkmark slot. */
+  optionPadding?: string
 }
 
 export type DropdownState = {

admin-ui/app/locales/en/translation.json

@@ -759,6 +759,7 @@
     "platform": "Platform",
     "authType": "Auth Type",
     "showCedarLogs?": "Cedarling Log enabled?",
+    "cedarlingLogs?": "Cedarling logs?",
     "reloginToViewCedarlingChanges": "Please Re-login to view the cedarling changes.",
     "allAvailableHintsSelected": "All available hint options are selected",
     "noMatchingOptions": "No matching options",

admin-ui/app/locales/es/translation.json

@@ -721,6 +721,7 @@
     "platform": "Plataforma",
     "authType": "Tipo de Autenticación",
     "showCedarLogs?": "¿Registro de Cedarling habilitado?",
+    "cedarlingLogs?": "¿Registros de Cedarling?",
     "reloginToViewCedarlingChanges": "Por favor, vuelve a iniciar sesión para ver los cambios de Cedarling.",
     "allAvailableHintsSelected": "Todas las opciones de sugerencia disponibles están seleccionadas",
     "noMatchingOptions": "No hay opciones coincidentes",

admin-ui/app/locales/fr/translation.json

@@ -842,6 +842,7 @@
     "platform": "Plateforme",
     "authType": "Type d'authentification",
     "showCedarLogs?": "Cedarling Log est-il activé?",
+    "cedarlingLogs?": "Journaux Cedarling ?",
     "reloginToViewCedarlingChanges": "Veuillez vous reconnecter pour voir les modifications de cedarling.",
     "allAvailableHintsSelected": "Toutes les options d'indice disponibles sont sélectionnées.",
     "noMatchingOptions": "Aucune option correspondante",

admin-ui/app/locales/pt/translation.json

@@ -798,6 +798,7 @@
     "platform": "Plataforma",
     "authType": "Tipo de autenticação",
     "showCedarLogs?": "O Cedarling Log está habilitado?",
+    "cedarlingLogs?": "Logs do Cedarling?",
     "reloginToViewCedarlingChanges": "Por favor, faça login novamente para ver as alterações do cedarling.",
     "allAvailableHintsSelected": "Todas as opções de dica disponíveis estão selecionadas",
     "noMatchingOptions": "Nenhuma opção correspondente",

admin-ui/app/routes/Apps/Gluu/GluuNavBar.tsx

@@ -151,7 +151,7 @@ const GluuNavBar = () => {
                   </Box>
                 </Box>
               )}
-              position="bottom"
+              position="bottom-end"
             />
           )}
         </Box>

admin-ui/app/routes/Apps/Gluu/__tests__/GluuNavBar.test.tsx

@@ -15,6 +15,10 @@ const createTestStore = (userinfo: UserInfo | null): Store =>
     }),
   })
 
+jest.mock('@/utils/hooks/useCedarlingLogToggle', () => ({
+  useCedarlingLogToggle: () => ({ enabled: false, toggle: jest.fn(), isSaving: false }),
+}))
+
 const renderNavBar = (userinfo: UserInfo | null) => {
   const store = createTestStore(userinfo)
   const Wrapper = ({ children }: { children: ReactNode }) => (

admin-ui/app/routes/components/Dropdowns/DropdownProfile.tsx

@@ -5,12 +5,16 @@ import { useAppNavigation, ROUTES } from '@/helpers/navigation'
 import { auditLogoutLogs } from 'Redux/features/sessionSlice'
 import { MANUAL_LOGOUT } from '@/audit/messages'
 import { GluuDropdown, type GluuDropdownOption } from 'Components'
+import Box from '@mui/material/Box'
+import Switch from '@mui/material/Switch'
+import { useCedarlingLogToggle } from '@/utils/hooks/useCedarlingLogToggle'
 import type { DropdownProfileProps } from './types'
 
 const DropdownProfile = ({ trigger, renderTrigger, position = 'bottom' }: DropdownProfileProps) => {
   const { t } = useTranslation()
   const dispatch = useAppDispatch()
   const { navigateToRoute } = useAppNavigation()
+  const { enabled: cedarLogsEnabled, toggle: toggleCedarLogs } = useCedarlingLogToggle()
 
   const handleLogout = useCallback(() => {
     dispatch(auditLogoutLogs({ message: MANUAL_LOGOUT }))
@@ -25,6 +29,35 @@ const DropdownProfile = ({ trigger, renderTrigger, position = 'bottom' }: Dropdo
           navigateToRoute(ROUTES.PROFILE)
         },
       },
+      {
+        value: 'cedarLogs',
+        label: (
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              flex: 1,
+              gap: 2,
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {t('fields.cedarlingLogs?')}
+            <Switch
+              size="small"
+              checked={cedarLogsEnabled}
+              slotProps={{ input: { 'aria-label': t('fields.cedarlingLogs?') } }}
+            />
+          </Box>
+        ),
+        searchValue: t('fields.cedarlingLogs?'),
+        // The menu stays open so the switch's new position and the resulting toast are
+        // both visible without reopening the dropdown.
+        keepOpen: true,
+        onClick: () => {
+          toggleCedarLogs()
+        },
+      },
       {
         value: 'logout',
         label: t('menus.signout'),
@@ -33,7 +66,7 @@ const DropdownProfile = ({ trigger, renderTrigger, position = 'bottom' }: Dropdo
         },
       },
     ],
-    [t, navigateToRoute, handleLogout],
+    [t, navigateToRoute, handleLogout, cedarLogsEnabled, toggleCedarLogs],
   )
 
   return (
@@ -43,6 +76,7 @@ const DropdownProfile = ({ trigger, renderTrigger, position = 'bottom' }: Dropdo
       options={options}
       position={position}
       minWidth={182}
+      optionPadding="12px"
       showArrow={true}
     />
   )

admin-ui/app/routes/components/Dropdowns/MobileProfileDropdown.tsx

@@ -19,6 +19,8 @@ import { THEME_LIGHT, THEME_DARK } from '@/context/theme/constants'
 import { useThemePersistence } from '@/hooks/useThemePersistence'
 import { useLangPersistence } from '@/hooks/useLangPersistence'
 import { LANG_CODES, DEFAULT_LANG } from '@/constants'
+import Switch from '@mui/material/Switch'
+import { useCedarlingLogToggle } from '@/utils/hooks/useCedarlingLogToggle'
 import { useStyles } from './styles/MobileProfileDropdown.style'
 import type { MobileProfileDropdownProps } from './types'
 
@@ -89,6 +91,8 @@ const MobileProfileDropdown = ({ userInfo, renderTrigger }: MobileProfileDropdow
 
   const onChangeTheme = useThemePersistence(userInfo)
 
+  const { enabled: cedarLogsEnabled, toggle: toggleCedarLogs } = useCedarlingLogToggle()
+
   const handleProfile = useCallback(() => {
     setIsOpen(false)
     navigateToRoute(ROUTES.PROFILE)
@@ -219,6 +223,20 @@ const MobileProfileDropdown = ({ userInfo, renderTrigger }: MobileProfileDropdow
             />
           </div>
 
+          <hr className={classes.divider} />
+
+          <div className={classes.row}>
+            <GluuText variant="span" className={classes.rowLabel}>
+              {t('fields.cedarlingLogs?')}
+            </GluuText>
+            <Switch
+              size="small"
+              checked={cedarLogsEnabled}
+              onChange={toggleCedarLogs}
+              slotProps={{ input: { 'aria-label': t('fields.cedarlingLogs?') } }}
+            />
+          </div>
+
           <button type="button" className={classes.signOut} onClick={handleLogout}>
             <GluuText variant="span" className={classes.signOutText}>
               {t('menus.signout')}

admin-ui/app/routes/components/Dropdowns/__tests__/DropdownProfile.test.tsx

@@ -7,6 +7,16 @@ import { DropdownProfile } from '../DropdownProfile'
 import sessionReducer, { auditLogoutLogs } from 'Redux/features/sessionSlice'
 import { ROUTES } from '@/helpers/navigation'
 
+const mockToggleCedarLogs = jest.fn()
+
+jest.mock('@/utils/hooks/useCedarlingLogToggle', () => ({
+  useCedarlingLogToggle: () => ({
+    enabled: false,
+    toggle: mockToggleCedarLogs,
+    isSaving: false,
+  }),
+}))
+
 const mockNavigateToRoute = jest.fn()
 
 jest.mock('@/helpers/navigation', () => ({