feat(admin): adding uniformity in cancel and back buttons present in FIDO, SMTP & Services

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

@@ -53,7 +53,7 @@ const GluuFormFooter = ({
   showBack,
   backButtonLabel,
   onBack,
-  disableBack,
+  disableBack = false,
   showCancel,
   cancelButtonLabel,
   onCancel,

admin-ui/plugins/fido/components/DynamicConfiguration.tsx

@@ -5,11 +5,11 @@ import GluuInputRow from 'Routes/Apps/Gluu/GluuInputRow'
 import GluuSelectRow from 'Routes/Apps/Gluu/GluuSelectRow'
 import GluuToggleRow from 'Routes/Apps/Gluu/GluuToggleRow'
 import GluuCommitDialog from 'Routes/Apps/Gluu/GluuCommitDialog'
-import GluuCommitFooter from 'Routes/Apps/Gluu/GluuCommitFooter'
+import GluuFormFooter from 'Routes/Apps/Gluu/GluuFormFooter'
 import GluuLabel from 'Routes/Apps/Gluu/GluuLabel'
 import GluuProperties from 'Routes/Apps/Gluu/GluuProperties'
 import { fidoConstants, validationSchema, transformToFormValues } from '../helper'
-import { DynamicConfigurationProps, DynamicConfigFormValues } from '../types/fido-types'
+import { DynamicConfigurationProps, DynamicConfigFormValues } from '../types/fido'
 
 const DynamicConfiguration: React.FC<DynamicConfigurationProps> = ({
   fidoConfiguration,
@@ -30,6 +30,7 @@ const DynamicConfiguration: React.FC<DynamicConfigurationProps> = ({
     onSubmit: toggle,
     validationSchema: validationSchema[fidoConstants.VALIDATION_SCHEMAS.DYNAMIC_CONFIG],
     enableReinitialize: true,
+    validateOnMount: true,
   })
 
   const submitForm = useCallback(
@@ -74,6 +75,7 @@ const DynamicConfiguration: React.FC<DynamicConfigurationProps> = ({
             formik={formik}
             lsize={4}
             rsize={8}
+            required
             showError={!!(formik.errors.issuer && formik.touched.issuer)}
             errorMessage={formik.errors.issuer}
           />
@@ -87,6 +89,7 @@ const DynamicConfiguration: React.FC<DynamicConfigurationProps> = ({
             formik={formik}
             lsize={4}
             rsize={8}
+            required
             showError={!!(formik.errors.baseEndpoint && formik.touched.baseEndpoint)}
             errorMessage={formik.errors.baseEndpoint}
           />
@@ -302,13 +305,17 @@ const DynamicConfiguration: React.FC<DynamicConfigurationProps> = ({
       </FormGroup>
       <Row>
         <Col>
-          <GluuCommitFooter
-            saveHandler={toggle}
-            hideButtons={{ save: true, back: true }}
-            extraLabel="Cancel"
-            extraOnClick={handleCancel}
-            type="submit"
-            disabled={isSubmitting}
+          <GluuFormFooter
+            showBack={true}
+            showCancel={true}
+            showApply={true}
+            onApply={toggle}
+            onCancel={handleCancel}
+            disableBack={false}
+            disableCancel={!formik.dirty}
+            disableApply={!formik.isValid || !formik.dirty}
+            applyButtonType="button"
+            isLoading={isSubmitting ?? false}
           />
         </Col>
       </Row>

admin-ui/plugins/fido/components/Fido.tsx

@@ -16,7 +16,7 @@ import {
 } from 'JansConfigApi'
 import { updateToast } from 'Redux/features/toastSlice'
 import { useDispatch, useSelector } from 'react-redux'
-import { DynamicConfigFormValues, StaticConfigFormValues } from '../types/fido-types'
+import { DynamicConfigFormValues, StaticConfigFormValues } from '../types/fido'
 import { logAudit } from 'Utils/AuditLogger'
 import { AuthRootState } from 'Utils/types'
 

admin-ui/plugins/fido/components/StaticConfiguration.tsx

@@ -7,7 +7,7 @@ import GluuInputRow from 'Routes/Apps/Gluu/GluuInputRow'
 import GluuSelectRow from 'Routes/Apps/Gluu/GluuSelectRow'
 import GluuToggleRow from 'Routes/Apps/Gluu/GluuToggleRow'
 import GluuCommitDialog from 'Routes/Apps/Gluu/GluuCommitDialog'
-import GluuCommitFooter from 'Routes/Apps/Gluu/GluuCommitFooter'
+import GluuFormFooter from 'Routes/Apps/Gluu/GluuFormFooter'
 import GluuLabel from 'Routes/Apps/Gluu/GluuLabel'
 import GluuProperties from 'Routes/Apps/Gluu/GluuProperties'
 import GluuTypeAhead from 'Routes/Apps/Gluu/GluuTypeAhead'
@@ -20,7 +20,12 @@ import {
   getAvailableHintOptions,
   getEmptyDropdownMessage,
 } from '../helper'
-import { StaticConfigurationProps, StaticConfigFormValues } from '../types/fido-types'
+import {
+  StaticConfigurationProps,
+  StaticConfigFormValues,
+  MinimalFormik,
+  FormikSetFieldValue,
+} from '../types/fido'
 import { AttestationMode } from '../types'
 
 const StaticConfiguration: React.FC<StaticConfigurationProps> = ({
@@ -46,6 +51,7 @@ const StaticConfiguration: React.FC<StaticConfigurationProps> = ({
     onSubmit: toggle,
     validationSchema: validationSchema[fidoConstants.VALIDATION_SCHEMAS.STATIC_CONFIG],
     enableReinitialize: true,
+    validateOnMount: true,
   })
 
   const submitForm = useCallback(
@@ -86,25 +92,30 @@ const StaticConfiguration: React.FC<StaticConfigurationProps> = ({
   }, [formik.values.metadataServers])
 
   // Create a wrapper formik that transforms metadata servers between key/value and url/rootCert
-  const metadataServersFormik = useMemo(() => {
-    const setFieldValueWrapper = (name: string, value: any) => {
+  const metadataServersFormik = useMemo<MinimalFormik<StaticConfigFormValues>>(() => {
+    const setFieldValueWrapper: FormikSetFieldValue<StaticConfigFormValues> = (
+      name,
+      value,
+      shouldValidate,
+    ) => {
       if (name === fidoConstants.FORM_FIELDS.METADATA_SERVERS) {
         // Transform {key, value} back to {url, rootCert}
-        const transformedValue = value.map((item: any) => ({
+        const arr = Array.isArray(value) ? (value as Array<{ key?: string; value?: string }>) : []
+        const transformedValue = arr.map((item) => ({
           url: item.key || '',
           rootCert: item.value || '',
         }))
-        formik.setFieldValue(name, transformedValue)
+        formik.setFieldValue(name, transformedValue, shouldValidate)
       } else {
-        formik.setFieldValue(name, value)
+        formik.setFieldValue(name, value, shouldValidate)
       }
     }
 
     return {
-      ...formik,
+      values: formik.values,
       setFieldValue: setFieldValueWrapper,
     }
-  }, [formik.values, formik.errors, formik.touched])
+  }, [formik.values, formik.setFieldValue])
 
   const availableHintOptions = useMemo(() => {
     return getAvailableHintOptions(formik.values.hints)
@@ -133,6 +144,7 @@ const StaticConfiguration: React.FC<StaticConfigurationProps> = ({
             formik={formik}
             lsize={4}
             rsize={8}
+            required
             showError={
               !!(formik.errors.authenticatorCertsFolder && formik.touched.authenticatorCertsFolder)
             }
@@ -147,6 +159,7 @@ const StaticConfiguration: React.FC<StaticConfigurationProps> = ({
             formik={formik}
             lsize={4}
             rsize={8}
+            required
             showError={!!(formik.errors.mdsCertsFolder && formik.touched.mdsCertsFolder)}
             errorMessage={formik.errors.mdsCertsFolder}
           />
@@ -159,6 +172,7 @@ const StaticConfiguration: React.FC<StaticConfigurationProps> = ({
             formik={formik}
             lsize={4}
             rsize={8}
+            required
             showError={!!(formik.errors.mdsTocsFolder && formik.touched.mdsTocsFolder)}
             errorMessage={formik.errors.mdsTocsFolder}
           />
@@ -173,6 +187,7 @@ const StaticConfiguration: React.FC<StaticConfigurationProps> = ({
             formik={formik}
             lsize={4}
             rsize={8}
+            required
             showError={
               !!(
                 formik.errors.unfinishedRequestExpiration &&
@@ -192,6 +207,7 @@ const StaticConfiguration: React.FC<StaticConfigurationProps> = ({
             formik={formik}
             lsize={4}
             rsize={8}
+            required
             showError={
               !!(
                 formik.errors.authenticationHistoryExpiration &&
@@ -210,6 +226,7 @@ const StaticConfiguration: React.FC<StaticConfigurationProps> = ({
             formik={formik}
             lsize={4}
             rsize={8}
+            required
             showError={
               !!(formik.errors.serverMetadataFolder && formik.touched.serverMetadataFolder)
             }
@@ -224,6 +241,7 @@ const StaticConfiguration: React.FC<StaticConfigurationProps> = ({
             formik={formik}
             lsize={4}
             rsize={8}
+            required
             doc_category={fidoConstants.DOC_CATEGORY}
           />
         </Col>
@@ -297,16 +315,20 @@ const StaticConfiguration: React.FC<StaticConfigurationProps> = ({
           <GluuTypeAhead
             name={fidoConstants.FORM_FIELDS.HINTS}
             label={fidoConstants.LABELS.HINTS}
-            formik={formik}
             value={formik.values.hints || []}
             options={availableHintOptions}
             lsize={4}
             rsize={8}
+            required
             showError={!!(formik.errors.hints && formik.touched.hints)}
-            errorMessage={formik.errors.hints}
+            errorMessage={formik.errors.hints as string}
             doc_category={fidoConstants.DOC_CATEGORY}
             emptyLabel={emptyDropdownMessage}
             allowNew={false}
+            onChange={(selected) => {
+              const next = (selected || []).filter((v): v is string => typeof v === 'string')
+              formik.setFieldValue(fidoConstants.FORM_FIELDS.HINTS, next)
+            }}
           />
         </Col>
 
@@ -317,6 +339,7 @@ const StaticConfiguration: React.FC<StaticConfigurationProps> = ({
             formik={formik}
             lsize={4}
             rsize={8}
+            required
             doc_category={fidoConstants.DOC_CATEGORY}
           />
         </Col>
@@ -342,13 +365,17 @@ const StaticConfiguration: React.FC<StaticConfigurationProps> = ({
 
       <Row>
         <Col>
-          <GluuCommitFooter
-            saveHandler={toggle}
-            hideButtons={{ save: true, back: true }}
-            extraLabel="Cancel"
-            extraOnClick={handleCancel}
-            type="submit"
-            disabled={isSubmitting}
+          <GluuFormFooter
+            showBack={true}
+            showCancel={true}
+            showApply={true}
+            onApply={toggle}
+            onCancel={handleCancel}
+            disableBack={false}
+            disableCancel={!formik.dirty}
+            disableApply={!formik.isValid || !formik.dirty}
+            applyButtonType="button"
+            isLoading={isSubmitting ?? false}
           />
         </Col>
       </Row>

admin-ui/plugins/fido/helper/utils.ts

@@ -1,12 +1,12 @@
-import { PublicKeyCredentialHints } from '../types'
+import { PublicKeyCredentialHints, AttestationMode } from '../types'
 import { fidoConstants } from './constants'
 import { AppConfiguration1, Fido2Configuration } from 'JansConfigApi'
 import {
   DynamicConfigFormValues,
   StaticConfigFormValues,
   CreateFidoConfigPayloadParams,
   PutPropertiesFido2Params,
-} from '../types/fido-types'
+} from '../types/fido'
 
 const isStaticConfigType = (type?: string): type is typeof fidoConstants.STATIC => {
   return type === fidoConstants.STATIC
@@ -68,7 +68,11 @@ const transformStaticConfigToFormValues = (
     disableMetadataService: toBooleanValue(config?.disableMetadataService),
     hints: arrayValidationWithSchema(config?.hints || [], PublicKeyCredentialHints),
     enterpriseAttestation: toBooleanValue(config?.enterpriseAttestation),
-    attestationMode: config?.attestationMode || '',
+    attestationMode: (() => {
+      const mode = (config?.attestationMode as string) || ''
+      const validModes = Object.values(AttestationMode)
+      return validModes.includes(mode as AttestationMode) ? mode : ''
+    })(),
   }
 }
 

admin-ui/plugins/fido/types/fido-types.ts → admin-ui/plugins/fido/types/fido.ts

@@ -59,3 +59,15 @@ export interface CreateFidoConfigPayloadParams {
 export interface PutPropertiesFido2Params {
   data: AppConfiguration1
 }
+
+// Minimal Formik subset used by StaticConfiguration for typeahead adapters
+export type FormikSetFieldValue<TValues> = <K extends keyof TValues>(
+  field: K,
+  value: TValues[K],
+  shouldValidate?: boolean,
+) => void
+
+export interface MinimalFormik<TValues> {
+  values: TValues
+  setFieldValue: FormikSetFieldValue<TValues>
+}

admin-ui/plugins/services/Components/Configuration/CachePage.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import BlockUi from '../../../../app/components/BlockUi/BlockUi'
 import { Formik } from 'formik'
 import { Form, FormGroup, Card, Col, CardBody, InputGroup, CustomInput } from 'Components'
-import GluuCommitFooter from 'Routes/Apps/Gluu/GluuCommitFooter'
+import GluuFormFooter from 'Routes/Apps/Gluu/GluuFormFooter'
 import GluuLabel from 'Routes/Apps/Gluu/GluuLabel'
 import GluuTooltip from 'Routes/Apps/Gluu/GluuTooltip'
 import CacheInMemory from './CacheInMemory'
@@ -87,10 +87,6 @@ function CachePage() {
   function toggle() {
     setModal(!modal)
   }
-  function submitForm() {
-    toggle()
-    document.getElementsByClassName('LdapUserActionSubmitButton')[0].click()
-  }
   function handleCancel(formik) {
     return () => {
       formik.resetForm()
@@ -224,17 +220,25 @@ function CachePage() {
                     <CacheNative config={cacheNativeData} formik={formik} />
                   )}
                   <FormGroup row></FormGroup>
-                  <GluuCommitFooter
-                    saveHandler={toggle}
-                    hideButtons={{ save: true, back: true }}
-                    extraLabel="Cancel"
-                    extraOnClick={handleCancel(formik)}
-                    type="submit"
+                  <GluuFormFooter
+                    showBack={true}
+                    showCancel={true}
+                    showApply={true}
+                    onApply={toggle}
+                    onCancel={handleCancel(formik)}
+                    disableBack={false}
+                    disableCancel={!formik.dirty}
+                    disableApply={!formik.isValid || !formik.dirty}
+                    applyButtonType="button"
+                    isLoading={loading}
                   />
                   <GluuCommitDialog
                     handler={toggle}
                     modal={modal}
-                    onAccept={submitForm}
+                    onAccept={() => {
+                      toggle()
+                      formik.handleSubmit()
+                    }}
                     formik={formik}
                   />
                 </Form>