feat(admin-ui): revamp Health, License, and Audit Message and Loader components (#2584) (#2620)

* Health page migrated

* License page implemented

* Gluu Commit Page implemented

* code rabbit ai reviews

* code rabbit ai reviews

* code rabbit ai reviews

* code rabbit ai reviews

* code rabbit ai reviews

* code rabbit ai reviews

* code rabbit ai reviews

* code rabbit ai reviews

Author: faisalsiddique4400

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

@@ -30,6 +30,8 @@ const GluuButton: React.FC<GluuButtonProps> = (props) => {
     minHeight,
     style,
     className,
+    useOpacityOnHover = false,
+    hoverOpacity,
     onClick,
     type = 'button',
     title,
@@ -48,6 +50,8 @@ const GluuButton: React.FC<GluuButtonProps> = (props) => {
     const text = textColor ?? themeColors.fontColor
     const border = borderColor ?? (isDark ? 'transparent' : themeColors.borderColor)
     const hoverBg = isDark ? themeColors.lightBackground : themeColors.borderColor
+    const keepBgOnHover = useOpacityOnHover && isHovered && !isDisabled
+    const opacityOnHover = hoverOpacity ?? 0.5
 
     return {
       display: 'inline-flex',
@@ -62,18 +66,20 @@ const GluuButton: React.FC<GluuButtonProps> = (props) => {
       minHeight: minHeight ?? sizeConfig.minHeight,
       borderRadius: borderRadius ?? '6px',
       border: `1px solid ${border}`,
-      backgroundColor: outlined
-        ? isHovered && !isDisabled
-          ? `${bg}15`
-          : 'transparent'
-        : isHovered && !isDisabled
-          ? hoverBg
-          : bg,
+      backgroundColor: keepBgOnHover
+        ? bg
+        : outlined
+          ? isHovered && !isDisabled
+            ? `${bg}15`
+            : 'transparent'
+          : isHovered && !isDisabled
+            ? hoverBg
+            : bg,
       color: outlined ? themeColors.fontColor : text,
       cursor: isDisabled ? 'not-allowed' : 'pointer',
-      opacity: isDisabled ? 0.65 : 1,
+      opacity: isDisabled ? 0.65 : keepBgOnHover ? opacityOnHover : 1,
       width: block ? '100%' : 'auto',
-      transition: 'background-color 0.15s ease-in-out',
+      transition: 'background-color 0.15s ease-in-out, opacity 0.15s ease-in-out',
       ...style,
     }
   }, [
@@ -92,6 +98,8 @@ const GluuButton: React.FC<GluuButtonProps> = (props) => {
     fontWeight,
     padding,
     minHeight,
+    useOpacityOnHover,
+    hoverOpacity,
     style,
   ])
 

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

@@ -21,6 +21,8 @@ export interface GluuButtonProps {
   minHeight?: string | number
   style?: CSSProperties
   className?: string
+  useOpacityOnHover?: boolean
+  hoverOpacity?: number
   onClick?: () => void
   type?: 'button' | 'submit' | 'reset'
   title?: string

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

@@ -0,0 +1,27 @@
+import { makeStyles } from 'tss-react/mui'
+import { SPACING } from '@/constants'
+
+interface GluuPageContentStyleParams {
+  withVerticalPadding: boolean
+  maxWidth?: number
+  background: string
+}
+
+export const useStyles = makeStyles<GluuPageContentStyleParams>()(
+  (_, { withVerticalPadding, maxWidth, background }) => ({
+    root: {
+      maxWidth: '100vw',
+      width: '100%',
+      padding: withVerticalPadding ? `${SPACING.PAGE}px` : `0 ${SPACING.PAGE}px`,
+      boxSizing: 'border-box',
+      backgroundColor: background,
+    },
+    wrapper: {
+      width: '100%',
+      maxWidth: maxWidth ?? '100%',
+      display: 'flex',
+      justifyContent: 'center',
+      flexDirection: 'column',
+    },
+  }),
+)

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

@@ -0,0 +1,35 @@
+import React, { memo, useContext, useMemo } from 'react'
+import { ThemeContext } from '@/context/theme/themeContext'
+import getThemeColor from '@/context/theme/config'
+import { DEFAULT_THEME } from '@/context/theme/constants'
+import customColors from '@/customColors'
+import { useStyles } from './GluuPageContent.style'
+import type { GluuPageContentProps } from './types'
+
+const GluuPageContent: React.FC<GluuPageContentProps> = memo(
+  ({ children, className, withVerticalPadding = true, maxWidth, backgroundColor }) => {
+    const themeContext = useContext(ThemeContext)
+    const currentTheme = useMemo(
+      () => themeContext?.state.theme || DEFAULT_THEME,
+      [themeContext?.state.theme],
+    )
+    const themeColors = useMemo(() => getThemeColor(currentTheme), [currentTheme])
+    const background = backgroundColor ?? themeColors?.background ?? customColors.lightBackground
+
+    const { classes } = useStyles({
+      withVerticalPadding,
+      maxWidth,
+      background,
+    })
+
+    return (
+      <div className={`${classes.root} ${className ?? ''}`.trim()}>
+        {maxWidth ? <div className={classes.wrapper}>{children}</div> : children}
+      </div>
+    )
+  },
+)
+
+GluuPageContent.displayName = 'GluuPageContent'
+
+export default GluuPageContent

admin-ui/app/components/GluuPageContent/index.ts

@@ -0,0 +1,2 @@
+export { default as GluuPageContent } from './GluuPageContent'
+export type { GluuPageContentProps } from './types'

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

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react'
+
+export type GluuPageContentProps = {
+  children: ReactNode
+  className?: string
+  withVerticalPadding?: boolean
+  maxWidth?: number
+  backgroundColor?: string
+}

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

@@ -0,0 +1,31 @@
+import { makeStyles } from 'tss-react/mui'
+import customColors, { hexToRgb } from '@/customColors'
+
+const TRACK_COLOR_DARK = `rgba(${hexToRgb(customColors.white)}, 0.12)`
+const TRACK_COLOR_LIGHT = `rgba(${hexToRgb(customColors.black)}, 0.08)`
+
+interface GluuSpinnerStyleParams {
+  size: number
+  isDark: boolean
+}
+
+const useStyles = makeStyles<GluuSpinnerStyleParams>()((_, { size, isDark }) => ({
+  '@keyframes spin': {
+    '0%': { transform: 'rotate(0deg)' },
+    '100%': { transform: 'rotate(360deg)' },
+  },
+  'spinner': {
+    display: 'block',
+    width: size,
+    height: size,
+    borderRadius: '50%',
+    border: `${Math.max(3, Math.floor(size / 12))}px solid ${
+      isDark ? TRACK_COLOR_DARK : TRACK_COLOR_LIGHT
+    }`,
+    borderTopColor: customColors.logo,
+    animation: 'spin 0.8s linear infinite',
+    flexShrink: 0,
+  },
+}))
+
+export { useStyles }

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

@@ -0,0 +1,26 @@
+import React, { useContext } from 'react'
+import { ThemeContext } from '@/context/theme/themeContext'
+import { THEME_DARK, DEFAULT_THEME } from '@/context/theme/constants'
+import { useStyles } from './GluuSpinner.style'
+
+interface GluuSpinnerProps {
+  'size'?: number
+  'isDark'?: boolean
+  'aria-label'?: string
+}
+
+const GluuSpinner = React.memo<GluuSpinnerProps>(
+  ({ size = 48, 'isDark': isDarkProp, 'aria-label': ariaLabel = 'Loading' }) => {
+    const themeContext = useContext(ThemeContext)
+    const currentTheme = themeContext?.state.theme || DEFAULT_THEME
+    const isDark = isDarkProp ?? currentTheme === THEME_DARK
+
+    const { classes } = useStyles({ size, isDark })
+
+    return <output className={classes.spinner} aria-label={ariaLabel} aria-live="polite" />
+  },
+)
+
+GluuSpinner.displayName = 'GluuSpinner'
+
+export default GluuSpinner

admin-ui/app/components/GluuSpinner/index.ts

@@ -0,0 +1 @@
+export { default as GluuSpinner } from './GluuSpinner'

admin-ui/app/components/StatusBadge/index.ts

@@ -0,0 +1 @@
+export type { StatusBadgeProps, StatusBadgeTheme, ServiceStatusValue } from './types'