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

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,6 +59,24 @@ const JansLockConfiguration: React.FC<JansLockConfigurationProps> = ({ lockConfi
     formik.resetForm()
   }, [formik])
 
+  const isFormDirty = useMemo(() => {
+    if (!lockConfig || !formik.values) {
+      return false
+    }
+    const trimmedValues = trimObjectStrings(
+      formik.values as unknown as Record<string, unknown>,
+    ) as unknown as JansLockConfigFormValues
+    const patches = createPatchOperations(trimmedValues, lockConfig)
+    return patches.length > 0
+  }, [lockConfig, formik.values])
+
+  const isFormValid = useMemo(() => {
+    if (!formik.values) {
+      return false
+    }
+    return validationSchema.isValidSync(formik.values)
+  }, [formik.values])
+
   const submitForm = useCallback(
     (userMessage: string) => {
       const trimmedValues = trimObjectStrings(
@@ -405,11 +428,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}
               />
             </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],
+        })
+      }
     }
   }