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

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

admin-ui/plugins/jans-lock/components/JansLock.tsx

@@ -51,6 +51,7 @@ const JansLock: React.FC = () => {
             <JansLockConfiguration
               lockConfig={lockConfiguration as Record<string, unknown>}
               onUpdate={handleUpdate}
+              isSubmitting={patchMutation.isPending}
             />
           ) : null}
         </CardBody>

admin-ui/plugins/jans-lock/components/JansLockConfiguration.tsx

@@ -1,5 +1,5 @@
 import { useFormik } from 'formik'
-import React, { useState, useEffect, useCallback } from 'react'
+import React, { useState, useEffect, useCallback, useMemo } from 'react'
 import { buildPayload, JANS_LOCK_WRITE } from 'Utils/PermChecker'
 import { useCedarling } from '@/cedarling'
 import { Row, Col, Form, FormGroup } from 'Components'
@@ -20,9 +20,14 @@ import { trimObjectStrings } from 'Utils/Util'
 interface JansLockConfigurationProps {
   lockConfig: Record<string, unknown>
   onUpdate: (patches: PatchOperation[]) => void
+  isSubmitting?: boolean
 }
 
-const JansLockConfiguration: React.FC<JansLockConfigurationProps> = ({ lockConfig, onUpdate }) => {
+const JansLockConfiguration: React.FC<JansLockConfigurationProps> = ({
+  lockConfig,
+  onUpdate,
+  isSubmitting,
+}) => {
   const { hasCedarPermission, authorize } = useCedarling()
   const viewOnly = !hasCedarPermission(JANS_LOCK_WRITE)
   const [modal, setModal] = useState(false)
@@ -54,12 +59,32 @@ const JansLockConfiguration: React.FC<JansLockConfigurationProps> = ({ lockConfi
     formik.resetForm()
   }, [formik])
 
+  const trimmedValuesAndPatches = useMemo(() => {
+    if (!lockConfig || !formik.values) {
+      return {
+        trimmedValues: null as JansLockConfigFormValues | null,
+        patches: [] as PatchOperation[],
+      }
+    }
+    const trimmedValues = trimObjectStrings(formik.values)
+    const patches = createPatchOperations(trimmedValues, lockConfig)
+    return { trimmedValues, patches }
+  }, [lockConfig, formik.values])
+
+  const isFormDirty = useMemo(() => {
+    return trimmedValuesAndPatches.patches.length > 0
+  }, [trimmedValuesAndPatches])
+
+  const isFormValid = useMemo(() => {
+    if (!formik.values) {
+      return false
+    }
+    return validationSchema.isValidSync(formik.values)
+  }, [formik.values])
+
   const submitForm = useCallback(
     (userMessage: string) => {
-      const trimmedValues = trimObjectStrings(
-        formik.values as unknown as Record<string, unknown>,
-      ) as unknown as JansLockConfigFormValues
-      const patchOperations = createPatchOperations(trimmedValues, lockConfig)
+      const { patches: patchOperations } = trimmedValuesAndPatches
 
       toggle()
 
@@ -73,7 +98,7 @@ const JansLockConfiguration: React.FC<JansLockConfigurationProps> = ({ lockConfi
       }
       // Silently do nothing if no changes (better UX than showing a toast)
     },
-    [formik.values, lockConfig, toggle, onUpdate],
+    [trimmedValuesAndPatches, toggle, onUpdate],
   )
 
   return (
@@ -104,7 +129,7 @@ const JansLockConfiguration: React.FC<JansLockConfigurationProps> = ({ lockConfi
                 .filter((v: unknown): v is string => typeof v === 'string' && v !== null)
               formik.setFieldValue('tokenChannels', values)
             }}
-            options={lockConfig?.tokenChannels || []}
+            options={(lockConfig?.tokenChannels as string[]) || []}
             doc_category={jansLockConstants.DOC_CATEGORY}
             lsize={3}
             rsize={9}
@@ -405,11 +430,16 @@ const JansLockConfiguration: React.FC<JansLockConfigurationProps> = ({ lockConfi
           <Row>
             <Col>
               <GluuCommitFooter
-                saveHandler={toggle}
-                hideButtons={{ save: true, back: true }}
-                extraLabel="Cancel"
-                extraOnClick={handleCancel}
-                type="submit"
+                showBack={true}
+                showCancel={true}
+                showApply={true}
+                onApply={toggle}
+                onCancel={handleCancel}
+                disableBack={false}
+                disableCancel={!isFormDirty}
+                disableApply={!isFormValid || !isFormDirty}
+                applyButtonType="submit"
+                isLoading={isSubmitting ?? false}
               />
             </Col>
           </Row>

admin-ui/plugins/jans-lock/helper/utils.ts

@@ -104,11 +104,21 @@ export const createPatchOperations = (
         }
       }
     } else if (normalizedValues[key] !== undefined && normalizedValues[key] !== '') {
-      differences.push({
-        op: 'add',
-        path: `/${key}`,
-        value: normalizedValues[key],
-      })
+      const value = normalizedValues[key]
+      const isEmptyArray = Array.isArray(value) && value.length === 0
+      const isEmptyObject =
+        typeof value === 'object' &&
+        value !== null &&
+        !Array.isArray(value) &&
+        Object.keys(value as Record<string, unknown>).length === 0
+
+      if (!isEmptyArray && !isEmptyObject) {
+        differences.push({
+          op: 'add',
+          path: `/${key}`,
+          value: normalizedValues[key],
+        })
+      }
     }
   }