feat(admin-ui): add test cases for redux state, auth/security utilities, and complex form components

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

@@ -1,7 +1,7 @@
 import { useState, useCallback } from 'react'
 import { AccordionProps } from './types'
 import Card from './../Card'
-import { Provider } from './context'
+import { AccordionContext } from './context'
 
 export const Accordion = (props: AccordionProps) => {
   const { className, children, initialOpen, open, onToggle, ...otherProps } = props
@@ -26,7 +26,7 @@ export const Accordion = (props: AccordionProps) => {
   const isOpen = onToggle ? (open ?? false) : isOpenState
 
   return (
-    <Provider
+    <AccordionContext
       value={{
         onToggle: toggleHandler,
         isOpen: isOpen,
@@ -35,6 +35,6 @@ export const Accordion = (props: AccordionProps) => {
       <Card className={className} type="border" {...otherProps}>
         {children}
       </Card>
-    </Provider>
+    </AccordionContext>
   )
 }

admin-ui/app/components/Accordion/AccordionBody.tsx

@@ -1,16 +1,15 @@
-import React from 'react'
+import React, { use } from 'react'
 import clsx from 'clsx'
 import Collapse from '@mui/material/Collapse'
 
-import { Consumer } from './context'
+import { AccordionContext } from './context'
 import type { AccordionBodyProps } from './types'
 
-export const AccordionBody: React.FC<AccordionBodyProps> = ({ children, className }) => (
-  <Consumer>
-    {({ isOpen }) => (
-      <Collapse in={isOpen}>
-        <div className={clsx('card-body', className, 'pt-0')}>{children}</div>
-      </Collapse>
-    )}
-  </Consumer>
-)
+export const AccordionBody: React.FC<AccordionBodyProps> = ({ children, className }) => {
+  const { isOpen } = use(AccordionContext)
+  return (
+    <Collapse in={isOpen}>
+      <div className={clsx('card-body', className, 'pt-0')}>{children}</div>
+    </Collapse>
+  )
+}

admin-ui/app/components/Accordion/AccordionHeader.tsx

@@ -1,26 +1,15 @@
-import React from 'react'
+import React, { use } from 'react'
 import clsx from 'clsx'
 import CardHeader from './../CardHeader'
-import { Consumer } from './context'
+import { AccordionContext } from './context'
 import classes from './AccordionHeader.module.scss'
 import { AccordionHeaderProps } from './types'
 
-interface AccordionContext {
-  onToggle: () => void
+export const AccordionHeader: React.FC<AccordionHeaderProps> = (props) => {
+  const { onToggle } = use(AccordionContext)
+  return (
+    <CardHeader className={clsx(props.className, classes.header)} onClick={onToggle}>
+      {props.children}
+    </CardHeader>
+  )
 }
-
-export const AccordionHeader: React.FC<AccordionHeaderProps> = (props) => (
-  <Consumer>
-    {(context) => {
-      const typedContext = context as AccordionContext
-      return (
-        <CardHeader
-          className={clsx(props.className, classes.header)}
-          onClick={typedContext.onToggle}
-        >
-          {props.children}
-        </CardHeader>
-      )
-    }}
-  </Consumer>
-)

admin-ui/app/components/Accordion/AccordionIndicator.tsx

@@ -1,8 +1,8 @@
-import React, { type ReactElement } from 'react'
+import React, { use, type ReactElement } from 'react'
 import clsx from 'clsx'
 import { Add, Remove } from '@/components/icons'
 
-import { Consumer } from './context'
+import { AccordionContext } from './context'
 
 type IndicatorElement = ReactElement<{ className?: string }>
 
@@ -16,13 +16,10 @@ export const AccordionIndicator: React.FC<AccordionIndicatorProps> = ({
   open = <Remove fontSize="small" />,
   closed = <Add fontSize="small" />,
   className,
-}) => (
-  <Consumer>
-    {({ isOpen }) => {
-      const indicator = isOpen ? open : closed
-      return React.cloneElement(indicator, {
-        className: clsx(className, indicator.props.className),
-      })
-    }}
-  </Consumer>
-)
+}) => {
+  const { isOpen } = use(AccordionContext)
+  const indicator = isOpen ? open : closed
+  return React.cloneElement(indicator, {
+    className: clsx(className, indicator.props.className),
+  })
+}

admin-ui/app/components/Accordion/context.tsx

@@ -1,12 +1,9 @@
-import React from 'react'
+import { createContext } from 'react'
+import type { AccordionContextType } from './types'
 
-interface AccordionContextType {
-  isOpen: boolean
-  onToggle: () => void
-}
-const { Provider, Consumer } = React.createContext<AccordionContextType>({
+const AccordionContext = createContext<AccordionContextType>({
   isOpen: false,
   onToggle: () => {},
 })
 
-export { Provider, Consumer }
+export { AccordionContext }

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

@@ -18,3 +18,8 @@ export type AccordionBodyProps = {
   children?: React.ReactNode
   className?: string
 }
+
+export type AccordionContextType = {
+  isOpen: boolean
+  onToggle: () => void
+}

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

@@ -8,6 +8,22 @@ import { NO_TEXT_SELECT } from './sharedDropdownStyles'
 import { useStyles } from './GluuDropdown.style'
 import type { DropdownValue, GluuDropdownOption, GluuDropdownProps, DropdownState } from './types'
 
+const extractTextFromReactNode = (node: React.ReactNode): string => {
+  if (typeof node === 'string') return node
+  if (typeof node === 'number') return String(node)
+  if (React.isValidElement<{ children?: React.ReactNode }>(node) && node.props.children) {
+    const { children } = node.props
+    if (Array.isArray(children)) {
+      return children.map((child) => extractTextFromReactNode(child)).join('')
+    }
+    return extractTextFromReactNode(children)
+  }
+  if (Array.isArray(node)) {
+    return node.map((child) => extractTextFromReactNode(child)).join('')
+  }
+  return ''
+}
+
 export const GluuDropdown = <T extends DropdownValue = DropdownValue>({
   trigger,
   options,
@@ -65,22 +81,6 @@ export const GluuDropdown = <T extends DropdownValue = DropdownValue>({
     [controlled, onOpenChange],
   )
 
-  const extractTextFromReactNode = useCallback((node: React.ReactNode): string => {
-    if (typeof node === 'string') return node
-    if (typeof node === 'number') return String(node)
-    if (React.isValidElement<{ children?: React.ReactNode }>(node) && node.props.children) {
-      const { children } = node.props
-      if (Array.isArray(children)) {
-        return children.map((child) => extractTextFromReactNode(child)).join('')
-      }
-      return extractTextFromReactNode(children)
-    }
-    if (Array.isArray(node)) {
-      return node.map((child) => extractTextFromReactNode(child)).join('')
-    }
-    return ''
-  }, [])
-
   const filteredOptions = useMemo(() => {
     if (!searchable || !searchQuery.trim()) {
       return options
@@ -96,7 +96,7 @@ export const GluuDropdown = <T extends DropdownValue = DropdownValue>({
           : extractTextFromReactNode(option.label).toLowerCase()
       return searchText.includes(query)
     })
-  }, [options, searchQuery, searchable, extractTextFromReactNode])
+  }, [options, searchQuery, searchable])
 
   const isSelected = useCallback(
     (value: T): boolean => {

admin-ui/app/components/SidebarMenu/SidebarMenuItem.tsx

@@ -77,7 +77,8 @@ export const SidebarMenuItem: React.FC<SidebarMenuItemProps> = ({
   sidebarMenuActiveClass,
   isEmptyNode = false,
 }) => {
-  const { entries, addEntry, updateEntry, removeEntry } = use(MenuContext)
+  const menuContext = use(MenuContext)
+  const { entries, addEntry, updateEntry, removeEntry } = menuContext
   const theme = use(ThemeContext)
   const selectedTheme = theme?.state.theme || DEFAULT_THEME
   const id = useId()
@@ -201,24 +202,17 @@ export const SidebarMenuItem: React.FC<SidebarMenuItemProps> = ({
       {children && (
         <ul className="sidebar-submenu">
           {React.Children.map(children, (child) =>
-            child ? (
-              <MenuContext.Consumer>
-                {(ctx: SidebarMenuContext) =>
-                  React.isValidElement(child)
-                    ? React.cloneElement(
-                        child as React.ReactElement<SidebarMenuItemProps & SidebarMenuContext>,
-                        {
-                          isSubNode: true,
-                          parentId: id,
-                          currentUrl,
-                          slim,
-                          ...ctx,
-                        },
-                      )
-                    : child
-                }
-              </MenuContext.Consumer>
-            ) : null,
+            child && React.isValidElement(child)
+              ? React.cloneElement(
+                  child as React.ReactElement<SidebarMenuItemProps & SidebarMenuContext>,
+                  {
+                    isSubNode: true,
+                    parentId: id,
+                    currentUrl,
+                    slim,
+                  },
+                )
+              : child,
           )}
         </ul>
       )}

admin-ui/app/components/Theme/ThemeClass.tsx

@@ -1,6 +1,5 @@
-import React from 'react'
-import { Consumer } from './ThemeContext'
-import type { ThemeContextState } from './types'
+import React, { use } from 'react'
+import { ThemeContext } from './ThemeContext'
 
 interface ThemeClassProps {
   children: (layoutThemeClass: string) => React.ReactNode
@@ -15,12 +14,9 @@ const ThemeClass: React.FC<ThemeClassProps> = ({ children, color, style }) => {
 
 const ContextThemeClass: React.FC<
   Omit<ThemeClassProps, 'children'> & { children: (layoutThemeClass: string) => React.ReactNode }
-> = (otherProps) => (
-  <Consumer>
-    {(themeState: ThemeContextState | null) =>
-      themeState ? <ThemeClass {...{ ...themeState, ...otherProps }} /> : null
-    }
-  </Consumer>
-)
+> = (otherProps) => {
+  const themeState = use(ThemeContext)
+  return themeState ? <ThemeClass {...{ ...themeState, ...otherProps }} /> : null
+}
 
 export { ContextThemeClass as ThemeClass }

admin-ui/app/components/Theme/ThemeContext.tsx

@@ -2,6 +2,6 @@ import React from 'react'
 
 import type { ThemeContextState } from './types'
 
-const { Provider, Consumer } = React.createContext<ThemeContextState | null>(null)
+const ThemeContext = React.createContext<ThemeContextState | null>(null)
 
-export { Provider, Consumer }
+export { ThemeContext }

admin-ui/app/components/Theme/ThemeProvider.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react'
 
-import { Provider } from './ThemeContext'
+import { ThemeContext } from './ThemeContext'
 import { THEME_LIGHT } from '@/context/theme/constants'
 
 interface ThemeProviderProps {
@@ -46,14 +46,14 @@ export class ThemeProvider extends React.Component<ThemeProviderProps, ThemeProv
     const { children } = this.props
 
     return (
-      <Provider
+      <ThemeContext
         value={{
           ...this.state,
           onChangeTheme: this.onChangeTheme.bind(this),
         }}
       >
         {children}
-      </Provider>
+      </ThemeContext>
     )
   }
 }

admin-ui/app/context/theme/themeContext.tsx

@@ -41,6 +41,15 @@ const extractUserTheme = (currentInum?: string | null): ThemeValue => {
   }
 }
 
+export const getStoredTheme = (): ThemeValue => {
+  if (typeof window === 'undefined') {
+    return DEFAULT_THEME
+  }
+
+  const savedTheme = storage.get(STORAGE_KEYS.INIT_THEME)
+  return savedTheme && isValidTheme(savedTheme) ? savedTheme : DEFAULT_THEME
+}
+
 const getInitialTheme = (): ThemeValue => {
   if (typeof window === 'undefined') {
     return DEFAULT_THEME