feat(admin-ui): revamp Scripts module as per Figma with partial TS migration

admin-ui/__tests__/setup.ts

@@ -29,6 +29,7 @@ jest.spyOn(global.console, 'error').mockImplementation((...args: unknown[]) => {
     msg.includes('Problems getting API access token') ||
     msg.includes('Problems posting user action audit log') ||
     msg.includes('suspended resource finished loading') ||
+    msg.includes('not wrapped in act(') ||
     (msg.includes('Failed prop type') && msg.includes('timeout') && msg.includes('Fade'))
 
   if (shouldSuppress) return
@@ -51,7 +52,3 @@ if (typeof globalThis.URL !== 'undefined') {
 }
 
 global.ResizeObserver = ResizeObserverPolyfill
-
-it('Jans-admin UI test setup', () => {
-  expect(true).toBeTruthy()
-})

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

@@ -1,21 +1,16 @@
-// @ts-nocheck
 import React from 'react'
-import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Collapse, CardBody } from 'reactstrap'
 
 import { Consumer } from './context'
+import type { AccordionBodyProps } from './Accordion.d'
 
-export const AccordionBody = (props) => (
+export const AccordionBody: React.FC<AccordionBodyProps> = ({ children, className }) => (
   <Consumer>
     {({ isOpen }) => (
       <Collapse isOpen={isOpen}>
-        <CardBody className={classNames(props.className, 'pt-0')}>{props.children}</CardBody>
+        <CardBody className={classNames(className, 'pt-0')}>{children}</CardBody>
       </Collapse>
     )}
   </Consumer>
 )
-AccordionBody.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-}

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

@@ -6,7 +6,7 @@ import { Consumer } from './context'
 interface AccordionIndicatorProps {
   open?: ReactNode
   closed?: ReactNode
-  className?: any
+  className?: string
 }
 
 export const AccordionIndicator: React.FC<AccordionIndicatorProps> = ({

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

@@ -1,9 +1,15 @@
-// @ts-nocheck
-import { Accordion } from './Accordion'
+import { Accordion as AccordionBase } from './Accordion'
 import { AccordionBody } from './AccordionBody'
 import { AccordionHeader } from './AccordionHeader'
 import { AccordionIndicator } from './AccordionIndicator'
 
+type AccordionComponent = typeof AccordionBase & {
+  Body: typeof AccordionBody
+  Header: typeof AccordionHeader
+  Indicator: typeof AccordionIndicator
+}
+
+const Accordion = AccordionBase as AccordionComponent
 Accordion.Body = AccordionBody
 Accordion.Header = AccordionHeader
 Accordion.Indicator = AccordionIndicator

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

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import AppMain from './AppMain'
 
 export default AppMain

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

@@ -17,14 +17,26 @@ interface AvatarProps {
 const Avatar: React.FC<AvatarProps> = (props) => {
   const avatarClass = classNames('avatar', `avatar--${props.size}`, props.className)
   const addOnsdArr = React.Children.toArray(props.addOns)
-  const badge = find(addOnsdArr, (avatarAddOn: any) => avatarAddOn.type.addOnId === 'avatar--badge')
+  type AddOnElement = React.ReactElement<{ addOnId?: string }> & {
+    type: { addOnId?: string }
+    props?: { small?: boolean }
+  }
+  const badge = find(
+    addOnsdArr,
+    (avatarAddOn: React.ReactNode) =>
+      React.isValidElement(avatarAddOn) &&
+      (avatarAddOn as AddOnElement).type?.addOnId === 'avatar--badge',
+  )
   const icons = filter(
     addOnsdArr,
-    (avatarAddOn: any) => avatarAddOn.type.addOnId === 'avatar--icon',
+    (avatarAddOn: React.ReactNode) =>
+      React.isValidElement(avatarAddOn) &&
+      (avatarAddOn as AddOnElement).type?.addOnId === 'avatar--icon',
   )
   const isNested = reduce(
     addOnsdArr,
-    (acc: boolean, avatarAddOn: any) => acc || !!avatarAddOn.props.small,
+    (acc: boolean, avatarAddOn: React.ReactNode) =>
+      acc || (React.isValidElement(avatarAddOn) && !!(avatarAddOn as AddOnElement).props?.small),
     false,
   )
 

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

@@ -1,11 +1,16 @@
-// @ts-nocheck
-import { Avatar } from './Avatar'
+import { Avatar as AvatarBase } from './Avatar'
 import { AvatarFont } from './AvatarFont'
 import { AvatarImage } from './AvatarImage'
 
 import { AvatarAddonBadge } from './AvatarAddonBadge'
 import { AvatarAddonIcon } from './AvatarAddonIcon'
 
+type AvatarComponent = typeof AvatarBase & {
+  Font: typeof AvatarFont
+  Image: typeof AvatarImage
+}
+
+const Avatar = AvatarBase as AvatarComponent
 Avatar.Font = AvatarFont
 Avatar.Image = AvatarImage
 

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

@@ -5,10 +5,10 @@ import { Card as BsCard } from 'reactstrap'
 import classes from './Card.scss'
 
 interface CardProps extends Omit<React.ComponentProps<typeof BsCard>, 'color'> {
-  children: any
+  children: React.ReactNode
   type?: string
   color?: string | null
-  className?: any
+  className?: string
 }
 
 const Card = ({ children, type = 'border', color = null, className, ...otherProps }: CardProps) => {

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

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { Card } from './Card'
 
 export default Card

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

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { CardHeader } from './CardHeader'
 
 export default CardHeader

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

@@ -1,16 +1,24 @@
-// @ts-nocheck
 import React from 'react'
 import classNames from 'classnames'
 import { Input as RSCustomInput } from 'reactstrap'
 
-const CustomInput = (props) => {
-  const { className, ...otherProps } = props
+type CustomInputProps = React.ComponentProps<typeof RSCustomInput>
+
+const CustomInput: React.FC<CustomInputProps> = (props) => {
+  const { className, label, name, ...otherProps } = props
   const inputClass = classNames(className, {
-    'custom-control-empty': !props.label,
+    'custom-control-empty': !label,
   })
 
-  return <RSCustomInput data-testid={props.name} className={inputClass} {...otherProps} />
+  return (
+    <RSCustomInput
+      data-testid={name}
+      className={inputClass}
+      label={label}
+      name={name}
+      {...otherProps}
+    />
+  )
 }
-CustomInput.propTypes = { ...RSCustomInput.propTypes }
 
 export { CustomInput }

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

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { CustomInput } from './CustomInput'
 
 export default CustomInput

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

@@ -1,9 +1,13 @@
-// @ts-nocheck
 import React from 'react'
-import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-export const Divider = ({ position, children, className }) => {
+interface DividerProps {
+  position?: 'center' | 'right'
+  children?: React.ReactNode
+  className?: string
+}
+
+export const Divider: React.FC<DividerProps> = ({ position, children, className }) => {
   const dividerClass = classNames(
     {
       'hr-text-center': position === 'center',
@@ -15,9 +19,3 @@ export const Divider = ({ position, children, className }) => {
 
   return <div className={dividerClass}>{children}</div>
 }
-
-Divider.propTypes = {
-  position: PropTypes.string,
-  className: PropTypes.string,
-  children: PropTypes.node,
-}

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

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { Divider } from './Divider'
 
 export default Divider

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

@@ -3,7 +3,7 @@ import { fontFamily } from '@/styles/fonts'
 import { useTheme } from '@/context/theme/themeContext'
 import getThemeColor from '@/context/theme/config'
 import { THEME_DARK } from '@/context/theme/constants'
-import { OPACITY } from '@/constants'
+import { OPACITY, getHoverOpacity } from '@/constants'
 import { resolveBackgroundColor } from '@/utils/buttonUtils'
 import type { GluuButtonProps } from './types'
 
@@ -56,7 +56,7 @@ const GluuButton: React.FC<GluuButtonProps> = (props) => {
     const border = borderColor ?? (isDark ? 'transparent' : themeColors.borderColor)
     const hoverBg = isDark ? themeColors.lightBackground : themeColors.borderColor
     const keepBgOnHover = !disableHoverStyles && useOpacityOnHover && isHovered && !isDisabled
-    const opacityOnHover = hoverOpacity ?? OPACITY.DIMMED
+    const opacityOnHover = hoverOpacity ?? 1 - getHoverOpacity(isDark)
 
     return {
       display: 'inline-flex',
@@ -82,7 +82,7 @@ const GluuButton: React.FC<GluuButtonProps> = (props) => {
       ),
       color: outlined ? (textColor ?? themeColors.fontColor) : text,
       cursor: isDisabled ? 'not-allowed' : 'pointer',
-      opacity: isDisabled ? OPACITY.DIMMED : keepBgOnHover ? opacityOnHover : 1,
+      opacity: isDisabled ? OPACITY.DISABLED : keepBgOnHover ? opacityOnHover : 1,
       width: block ? '100%' : 'auto',
       transition: 'background-color 0.15s ease-in-out, opacity 0.15s ease-in-out',
       ...style,

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

@@ -2,8 +2,8 @@ import { useMemo } from 'react'
 import { makeStyles } from 'tss-react/mui'
 import type { SxProps, Theme } from '@mui/material/styles'
 import type { ThemeConfig } from '@/context/theme/config'
-import { hexToRgb } from '@/customColors'
-import { OPACITY } from '@/constants/ui'
+import { getLoadingOverlayRgba } from '@/customColors'
+import { getHoverOpacity } from '@/constants'
 import { fontFamily, fontSizes, fontWeights, letterSpacing } from '@/styles/fonts'
 
 const TEXT_FIELD_SIZE = 'small' as const
@@ -39,7 +39,7 @@ const buildPickerThemeColors = (
 ): PickerThemeColors => {
   const inputText = textColor || themeConfig.fontColor
   const borderColor = isDark ? 'transparent' : themeConfig.borderColor
-  const hoverBg = `rgba(${hexToRgb(themeConfig.fontColor)}, ${isDark ? OPACITY.HOVER_DARK : OPACITY.HOVER_LIGHT})`
+  const hoverBg = getLoadingOverlayRgba(themeConfig.fontColor, getHoverOpacity(isDark))
   return {
     labelBackground: backgroundColor || themeConfig.background,
     inputBackground: themeConfig.inputBackground,

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

@@ -0,0 +1,20 @@
+import { makeStyles } from 'tss-react/mui'
+import { SPACING } from '@/constants'
+
+/** Min width per cell for ~5 columns on desktop; prevents label/value overlap */
+const MIN_CELL_WIDTH = 160
+
+export const useStyles = makeStyles()(() => ({
+  detailGrid: {
+    display: 'grid',
+    gridTemplateColumns: `repeat(auto-fill, minmax(${MIN_CELL_WIDTH}px, 1fr))`,
+    gap: `${SPACING.SECTION_GAP}px ${SPACING.SECTION_GAP}px`,
+    width: '100%',
+    minWidth: 0,
+  },
+  detailItem: {
+    minWidth: 0,
+    overflowWrap: 'break-word',
+    wordBreak: 'break-word',
+  },
+}))

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

@@ -0,0 +1,46 @@
+import React, { memo } from 'react'
+import GluuFormDetailRow from 'Routes/Apps/Gluu/GluuFormDetailRow'
+import { useStyles } from './GluuDetailGrid.style'
+import type { GluuDetailGridProps, GluuDetailGridField } from './types'
+
+const getFieldKey = (field: GluuDetailGridField, idx: number): string =>
+  field.doc_entry ?? `${field.label}-${idx}`
+
+const GluuDetailGrid: React.FC<GluuDetailGridProps> = ({
+  fields,
+  labelStyle,
+  defaultDocCategory,
+  className,
+  layout = 'column',
+}) => {
+  const { classes } = useStyles()
+
+  return (
+    <div className={`${classes.detailGrid} ${className ?? ''}`.trim()}>
+      {fields.map((field, idx) => (
+        <div key={getFieldKey(field, idx)} className={classes.detailItem}>
+          <GluuFormDetailRow
+            label={field.label}
+            value={field.value}
+            doc_entry={field.doc_entry}
+            doc_category={field.doc_category ?? defaultDocCategory}
+            isBadge={field.isBadge}
+            badgeBackgroundColor={field.badgeBackgroundColor}
+            badgeTextColor={field.badgeTextColor}
+            isDirect={field.isDirect}
+            lsize={field.lsize}
+            rsize={field.rsize}
+            labelStyle={
+              labelStyle || field.labelStyle ? { ...labelStyle, ...field.labelStyle } : undefined
+            }
+            valueStyle={field.valueStyle}
+            rowClassName={field.rowClassName}
+            layout={field.layout ?? layout}
+          />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default memo(GluuDetailGrid)

admin-ui/app/components/GluuDetailGrid/__tests__/GluuDetailGrid.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { GluuDetailGrid } from '@/components/GluuDetailGrid'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+  <AppTestWrapper>{children}</AppTestWrapper>
+)
+
+const mockFields = [
+  { label: 'fields.inum', value: '09A0-93D7', doc_entry: 'inum' },
+  { label: 'fields.name', value: 'smpp', doc_entry: 'name' },
+  { label: 'fields.script_type', value: 'person_authentication', doc_entry: 'scriptType' },
+]
+
+it('renders all field labels and values', () => {
+  render(<GluuDetailGrid fields={mockFields} />, { wrapper: Wrapper })
+  expect(screen.getByText(/Inum/i)).toBeInTheDocument()
+  expect(screen.getByText(/Name/i)).toBeInTheDocument()
+  expect(screen.getByText(/Script Type/i)).toBeInTheDocument()
+  expect(screen.getByText('09A0-93D7')).toBeInTheDocument()
+  expect(screen.getByText('smpp')).toBeInTheDocument()
+  expect(screen.getByText('person_authentication')).toBeInTheDocument()
+})
+
+it('renders with defaultDocCategory', () => {
+  render(<GluuDetailGrid fields={mockFields} defaultDocCategory="SCRIPT" />, {
+    wrapper: Wrapper,
+  })
+  expect(screen.getByText('smpp')).toBeInTheDocument()
+})
+
+it('renders with labelStyle', () => {
+  render(<GluuDetailGrid fields={mockFields} labelStyle={{ color: 'red' }} />, { wrapper: Wrapper })
+  expect(screen.getByText(/Inum/i)).toBeInTheDocument()
+})

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

@@ -0,0 +1,2 @@
+export { default as GluuDetailGrid } from './GluuDetailGrid'
+export type { GluuDetailGridProps, GluuDetailGridField } from './types'

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

@@ -0,0 +1,26 @@
+import type { CSSProperties } from 'react'
+
+export type GluuDetailGridField = {
+  label: string
+  value?: string | number | boolean | null
+  doc_entry?: string
+  doc_category?: string
+  isBadge?: boolean
+  badgeBackgroundColor?: string
+  badgeTextColor?: string
+  isDirect?: boolean
+  lsize?: number
+  rsize?: number
+  labelStyle?: CSSProperties
+  valueStyle?: CSSProperties
+  rowClassName?: string
+  layout?: 'row' | 'column'
+}
+
+export type GluuDetailGridProps = {
+  fields: GluuDetailGridField[]
+  labelStyle?: CSSProperties
+  defaultDocCategory?: string
+  className?: string
+  layout?: 'row' | 'column'
+}