feat(admin): adding uniformity in cancel and back buttons present in Script, Logging & SSA

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/GluuCommitDialog.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext } from 'react'
+import React, { useState, useEffect, useContext, useRef } from 'react'
 import {
   FormGroup,
   Col,
@@ -50,13 +50,15 @@ const GluuCommitDialog = ({
     modal,
   })
 
+  const prevModalRef = useRef<boolean>(false)
   useEffect(() => {
-    if (userMessage.length >= 10 && userMessage.length <= 512) {
-      setActive(true)
-    } else {
-      setActive(false)
+    setActive(userMessage.length >= 10 && userMessage.length <= 512)
+
+    if (modal && !prevModalRef.current) {
+      setUserMessage('')
     }
-  }, [userMessage])
+    prevModalRef.current = modal
+  }, [userMessage, modal])
 
   function handleAccept() {
     if (formik) {
@@ -77,7 +79,7 @@ const GluuCommitDialog = ({
   const renderBadges = (values: any) => {
     return (
       <div className="d-flex flex-column gap-1 align-items-start">
-        {values.map((data: any, index: any) => (
+        {values.map((data: any) => (
           <Badge
             color={`primary-${selectedTheme}  `}
             style={{ width: 'fit-content' }}

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 = false,
+  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>