feat(admin): adding uniformity in cancel and back buttons present in SCIM & Jans Lock

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

@@ -20,6 +20,7 @@
     "configuration_copied": "Configuration copied",
     "copy_configuration": "Copy configuration",
     "apply": "Apply",
+    "back": "Back",
     "back_home": "Back Home",
     "cancel": "Cancel",
     "currentMonth": "Current Month",

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

@@ -20,6 +20,7 @@
     "configuration_copied": "Configuración copiada",
     "copy_configuration": "Copiar configuración",
     "apply": "Aplicar",
+    "back": "Atrás",
     "back_home": "Volver al inicio",
     "cancel": "Cancelar",
     "currentMonth": "Mes actual",

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

@@ -131,6 +131,7 @@
     "reject": "Rejeter",
     "add_header": "Ajouter un en-tête",
     "apply": "Appliquer",
+    "back": "Retour",
     "back_home": "Retour à la maison",
     "cancel": "Annuler",
     "clear": "Effacer",

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

@@ -129,6 +129,7 @@
     "add_mapping": "Add Mapping",
     "add_property": "Adicionar propriedade",
     "apply": "Aplicar",
+    "back": "Voltar",
     "back_home": "Voltar para casa",
     "add_server": "Adicionar servidor",
     "add_base_dn": "Adicionar DN básico",

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

@@ -0,0 +1,220 @@
+import { useContext, useMemo, useCallback, memo } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Button, Divider } from 'Components'
+import { useTranslation } from 'react-i18next'
+import applicationStyle from 'Routes/Apps/Gluu/styles/applicationstyle'
+import { ThemeContext } from 'Context/theme/themeContext'
+import { Box } from '@mui/material'
+
+interface ButtonLabelProps {
+  isLoading: boolean
+  iconClass: string
+  label: string
+  loadingIconClass?: string
+}
+
+interface GluuFormFooterBaseProps {
+  showBack?: boolean
+  backButtonLabel?: string
+  onBack?: () => void
+  disableBack?: boolean
+  showCancel?: boolean
+  cancelButtonLabel?: string
+  onCancel?: () => void
+  disableCancel?: boolean
+  showApply?: boolean
+  disableApply?: boolean
+  applyButtonLabel?: string
+  isLoading?: boolean
+  className?: string
+}
+
+type GluuFormFooterProps = GluuFormFooterBaseProps &
+  (
+    | { applyButtonType?: 'submit'; onApply?: () => void }
+    | { applyButtonType: 'button'; onApply: () => void }
+  )
+
+const ButtonLabel = memo((props: ButtonLabelProps) => {
+  const { isLoading, iconClass, label, loadingIconClass = 'fa fa-spinner fa-spin' } = props
+  return (
+    <>
+      <i className={`${isLoading ? loadingIconClass : iconClass} me-2`} />
+      {label}
+    </>
+  )
+})
+
+ButtonLabel.displayName = 'ButtonLabel'
+
+const BUTTON_STYLE = { ...applicationStyle.buttonStyle, ...applicationStyle.buttonFlexIconStyles }
+
+const GluuFormFooter = ({
+  showBack,
+  backButtonLabel,
+  onBack,
+  disableBack,
+  showCancel,
+  cancelButtonLabel,
+  onCancel,
+  disableCancel,
+  showApply,
+  onApply,
+  disableApply,
+  applyButtonType = 'submit',
+  applyButtonLabel,
+  isLoading = false,
+  className = '',
+}: GluuFormFooterProps) => {
+  const { t } = useTranslation()
+  const theme = useContext(ThemeContext)
+  const selectedTheme = useMemo(() => theme?.state.theme || 'darkBlack', [theme?.state.theme])
+  const navigate = useNavigate()
+
+  const handleBackClick = useCallback(() => {
+    if (onBack) {
+      onBack()
+      return
+    }
+    navigate('/home/dashboard')
+  }, [onBack, navigate])
+
+  const handleCancelClick = useCallback(() => {
+    if (onCancel) {
+      onCancel()
+    }
+  }, [onCancel])
+
+  const buttonStates = useMemo(() => {
+    const hasAnyButton = Boolean(showBack) || Boolean(showCancel) || Boolean(showApply)
+    const hasAllThreeButtons = Boolean(showBack) && Boolean(showCancel) && Boolean(showApply)
+    const hasBackAndCancel = Boolean(showBack) && Boolean(showCancel) && !showApply
+
+    return {
+      showBack: Boolean(showBack),
+      showCancel: Boolean(showCancel),
+      showApply: Boolean(showApply),
+      hasAnyButton,
+      hasAllThreeButtons,
+      hasBackAndCancel,
+    }
+  }, [showBack, showCancel, showApply])
+
+  const buttonColor = useMemo(() => `primary-${selectedTheme}`, [selectedTheme])
+
+  const backLabel = useMemo(() => backButtonLabel || t('actions.back'), [backButtonLabel, t])
+  const cancelLabel = useMemo(
+    () => cancelButtonLabel || t('actions.cancel'),
+    [cancelButtonLabel, t],
+  )
+  const applyLabel = useMemo(() => applyButtonLabel || t('actions.apply'), [applyButtonLabel, t])
+
+  const buttonLayout = useMemo(() => {
+    if (!buttonStates.hasAnyButton) {
+      return { back: '', cancel: '', apply: '' }
+    }
+
+    const layout = {
+      back: buttonStates.showBack ? 'd-flex' : '',
+      cancel: buttonStates.showCancel ? 'd-flex' : '',
+      apply: buttonStates.showApply ? 'd-flex' : '',
+    }
+
+    if (buttonStates.showApply) {
+      layout.apply += ' ms-auto'
+      if (buttonStates.hasAllThreeButtons) {
+        layout.apply += ' me-0'
+      }
+    } else if (buttonStates.showCancel) {
+      layout.cancel += ' ms-auto'
+    }
+
+    return layout
+  }, [buttonStates])
+
+  if (!buttonStates.hasAnyButton) {
+    return null
+  }
+
+  return (
+    <>
+      <Divider />
+      <Box
+        display="flex"
+        my={2}
+        justifyContent="space-between"
+        alignItems="center"
+        gap={1}
+        className={className}
+      >
+        {buttonStates.showBack && (
+          <Button
+            color={buttonColor}
+            style={BUTTON_STYLE}
+            type="button"
+            onClick={handleBackClick}
+            className={buttonLayout.back}
+            disabled={disableBack}
+            aria-label={backLabel}
+          >
+            <ButtonLabel isLoading={false} iconClass="fa fa-arrow-circle-left" label={backLabel} />
+          </Button>
+        )}
+
+        {buttonStates.showApply && (
+          <Box className={buttonLayout.apply}>
+            {applyButtonType === 'submit' ? (
+              <Button
+                type="submit"
+                color={buttonColor}
+                style={BUTTON_STYLE}
+                disabled={disableApply || isLoading}
+                aria-label={applyLabel}
+              >
+                <ButtonLabel
+                  isLoading={isLoading}
+                  iconClass="fa fa-check-circle"
+                  label={applyLabel}
+                />
+              </Button>
+            ) : (
+              <Button
+                type="button"
+                color={buttonColor}
+                style={BUTTON_STYLE}
+                onClick={onApply}
+                disabled={disableApply || isLoading}
+                aria-label={applyLabel}
+              >
+                <ButtonLabel
+                  isLoading={isLoading}
+                  iconClass="fa fa-check-circle"
+                  label={applyLabel}
+                />
+              </Button>
+            )}
+          </Box>
+        )}
+
+        {buttonStates.showCancel && (
+          <Button
+            color={buttonColor}
+            style={BUTTON_STYLE}
+            type="button"
+            onClick={handleCancelClick}
+            className={`${buttonLayout.cancel}${buttonStates.hasAllThreeButtons ? ' ms-4' : ''}`}
+            disabled={disableCancel || isLoading}
+            aria-label={cancelLabel}
+          >
+            <ButtonLabel isLoading={false} iconClass="fa fa-undo" label={cancelLabel} />
+          </Button>
+        )}
+      </Box>
+    </>
+  )
+}
+
+const GluuFormFooterMemoized = memo(GluuFormFooter)
+GluuFormFooterMemoized.displayName = 'GluuFormFooter'
+
+export default GluuFormFooterMemoized

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

@@ -86,9 +86,8 @@ function GluuProperties({
     }
   }
   const removeProperty = (position: any) => {
-    let data = [...properties]
-    delete data[position]
-    data = data.filter((element: Property | undefined) => element != null)
+    const data = [...properties]
+    data.splice(position, 1)
     setProperties(data)
 
     // Sync with formik

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

@@ -21,7 +21,7 @@ const theme = createTheme({
 
 interface GluuTypeAheadProps {
   label: string
-  labelKey?: string
+  labelKey?: string | ((option: Option) => string)
   name: string
   value?: Option[]
   options: Option[]
@@ -70,10 +70,13 @@ const GluuTypeAhead = memo(function GluuTypeAhead({
 }: GluuTypeAheadProps) {
   const { t } = useTranslation()
 
-  const selectedValue = useMemo(
-    () => (value !== undefined ? value : (formik?.values?.[name] as Option[]) || []),
-    [value, formik, name],
-  )
+  const selectedValue = useMemo(() => {
+    if (value !== undefined) {
+      return value
+    }
+    const fieldValue = formik?.values?.[name]
+    return Array.isArray(fieldValue) ? (fieldValue as Option[]) : []
+  }, [value, formik?.values?.[name], name])
 
   const handleChange = useCallback(
     (selected: Option[]) => {
@@ -86,10 +89,15 @@ const GluuTypeAhead = memo(function GluuTypeAhead({
         onChange(selected)
       }
     },
-    [formik, name, onChange],
+    [formik?.setFieldValue, name, onChange],
   )
 
-  const resolvedLabelKey = useMemo(() => labelKey || name, [labelKey, name])
+  const resolvedLabelKey = useMemo(() => {
+    if (typeof labelKey === 'function' || typeof labelKey === 'string') {
+      return labelKey
+    }
+    return 'name'
+  }, [labelKey])
 
   return (
     <FormGroup row>

admin-ui/app/utils/Util.ts

@@ -63,15 +63,17 @@ export function formatDate(date?: string): string {
   return '-'
 }
 
-export const trimObjectStrings = <T extends Record<string, unknown>>(obj: T): T => {
+export const trimObjectStrings = <T extends object>(obj: T): T => {
+  const source = obj as unknown as Record<string, unknown>
   const trimmed: Record<string, unknown> = {}
-  for (const key in obj) {
-    if (typeof obj[key] === 'string') {
-      trimmed[key] = (obj[key] as string).trim()
-    } else if (obj[key] && typeof obj[key] === 'object' && !Array.isArray(obj[key])) {
-      trimmed[key] = trimObjectStrings(obj[key] as Record<string, unknown>)
+  for (const key in source) {
+    const value = source[key]
+    if (typeof value === 'string') {
+      trimmed[key] = value.trim()
+    } else if (value && typeof value === 'object' && !Array.isArray(value)) {
+      trimmed[key] = trimObjectStrings(value as Record<string, unknown>)
     } else {
-      trimmed[key] = obj[key]
+      trimmed[key] = value
     }
   }
   return trimmed as T
@@ -87,8 +89,7 @@ export const mapPropertyToKeyValue = (prop: {
   value1?: string
   value2?: string
 }): { key: string; value: string } => {
-  return {
-    key: prop.key || prop.value1 || '',
-    value: prop.value || prop.value2 || '',
-  }
+  const key = (prop.key ?? prop.value1 ?? '').trim()
+  const value = (prop.value ?? prop.value2 ?? '').trim()
+  return { key, value }
 }

admin-ui/app/utils/formUtils.ts

@@ -0,0 +1,41 @@
+import { isEqual } from 'lodash'
+
+type Primitive = string | number | boolean | null | undefined
+
+export const isObjectEqual = <T extends Record<string, Primitive | object>>(
+  obj1: T,
+  obj2: T,
+): boolean => {
+  if (obj1 === obj2) return true
+  if (obj1 == null || obj2 == null) return false
+  if (typeof obj1 !== 'object' || typeof obj2 !== 'object') return obj1 === obj2
+
+  return isEqual(obj1, obj2)
+}
+
+export const hasFormChanges = <
+  T extends Record<string, Primitive | object | Array<Primitive | object>>,
+>(
+  currentValues: T,
+  initialValues: T,
+  excludeKeys: Array<keyof T> = [],
+): boolean => {
+  const keys = (Object.keys(currentValues) as Array<keyof T>).filter(
+    (key) => !excludeKeys.includes(key),
+  )
+
+  for (const key of keys) {
+    const current = currentValues[key]
+    const initial = initialValues[key]
+
+    if (typeof current === 'object' && typeof initial === 'object') {
+      if (!isEqual(current, initial)) {
+        return true
+      }
+    } else if (current !== initial) {
+      return true
+    }
+  }
+
+  return false
+}