fix(admin-ui): incorrect cancel button behaviour in the Application Settings page in Home module

Author: faisalsiddique4400

admin-ui/plugins/admin/components/Settings/SettingsPage.js

@@ -1,4 +1,4 @@
-import React, { useState, useContext, useEffect } from 'react'
+import React, { useState, useContext, useEffect, useMemo, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import GluuLabel from 'Routes/Apps/Gluu/GluuLabel'
 import GluuToogleRow from 'Routes/Apps/Gluu/GluuToogleRow'
@@ -13,7 +13,6 @@ import {
   InputGroup,
   CustomInput,
   Form,
-  Button,
 } from 'Components'
 import SetTitle from 'Utils/SetTitle'
 import applicationStyle from 'Routes/Apps/Gluu/styles/applicationstyle'
@@ -27,6 +26,7 @@ import { SIMPLE_PASSWORD_AUTH } from 'Plugins/auth-server/common/Constants'
 import { getScripts } from 'Redux/features/initSlice'
 import GluuLoader from 'Routes/Apps/Gluu/GluuLoader'
 import GluuProperties from 'Routes/Apps/Gluu/GluuProperties'
+import GluuCommitFooter from 'Routes/Apps/Gluu/GluuCommitFooter'
 import packageJson from '../../../../package.json'
 import { CedarlingLogType } from '@/cedarling'
 import { updateToast } from '@/redux/features/toastSlice'
@@ -40,13 +40,25 @@ function SettingsPage() {
   const loadingConfig = useSelector((state) => state.authReducer?.loadingConfig)
   const theme = useContext(ThemeContext)
   const selectedTheme = theme.state.theme
-  const [paggingSize, setPaggingSize] = useState(localStorage.getItem('paggingSize') || 10)
+  const initialPaggingSize = localStorage.getItem('paggingSize') || 10
+  const [paggingSize, setPaggingSize] = useState(initialPaggingSize)
+  const [originalPaggingSize, setOriginalPaggingSize] = useState(initialPaggingSize)
   SetTitle(t('titles.application_settings'))
 
   useEffect(() => {
     dispatch(getScripts({ action: {} }))
   }, [])
 
+  const resetPaggingSize = () => {
+    setPaggingSize(originalPaggingSize)
+  }
+
+  const savePaggingSize = () => {
+    localStorage.setItem('paggingSize', paggingSize)
+    // Update the original value to the newly saved value
+    setOriginalPaggingSize(paggingSize)
+  }
+
   return (
     <React.Fragment>
       <GluuLoader blocking={loadingScripts || loadingConfig}>
@@ -77,17 +89,10 @@ function SettingsPage() {
                     type="select"
                     id="pagingSize"
                     name="pagingSize"
-                    defaultValue={
-                      levels[
-                        levels.findIndex((element) => {
-                          return element == paggingSize
-                        })
-                      ]
-                    }
+                    value={paggingSize}
                     onChange={(value) => {
                       const size = levels[value.target.options.selectedIndex]
                       setPaggingSize(size)
-                      localStorage.setItem('paggingSize', size)
                     }}
                   >
                     {levels.map((item, key) => (
@@ -123,46 +128,60 @@ function SettingsPage() {
               </Col>
             </FormGroup>
 
-            {!loadingScripts && <SettingsForm />}
+            {!loadingScripts && (
+              <SettingsForm resetPaggingSize={resetPaggingSize} savePaggingSize={savePaggingSize} />
+            )}
           </CardBody>
         </Card>
       </GluuLoader>
     </React.Fragment>
   )
 }
 
-function SettingsForm() {
+function SettingsForm({ resetPaggingSize, savePaggingSize }) {
   const { t } = useTranslation()
-  const theme = useContext(ThemeContext)
-  const selectedTheme = theme.state.theme
-  const loadingConfig = useSelector((state) => state.authReducer?.loadingConfig)
-  const additionalParameters =
-    useSelector((state) => state.authReducer?.config?.additionalParameters) || []
-  const acrValues = useSelector((state) => state.authReducer?.config?.acrValues)
-  const sessionTimeout =
-    useSelector((state) => state.authReducer?.config?.sessionTimeoutInMins) || 5
-  const cedarlingLogType =
-    useSelector((state) => state.authReducer?.config?.cedarlingLogType) || CedarlingLogType.OFF
-  const scripts = useSelector((state) => state.initReducer.scripts)
   const dispatch = useDispatch()
 
-  const authScripts = scripts
-    .filter((item) => item.scriptType == 'person_authentication')
-    .filter((item) => item.enabled)
-    .map((item) => item.name)
+  const config = useSelector((state) => state.authReducer?.config) || {}
+  const scripts = useSelector((state) => state.initReducer.scripts)
+
+  // Transform config to form values (Fido pattern)
+  const transformToFormValues = useCallback((configData) => {
+    return {
+      sessionTimeoutInMins: configData?.sessionTimeoutInMins || 30,
+      acrValues: configData?.acrValues || '',
+      cedarlingLogType: configData?.cedarlingLogType || CedarlingLogType.OFF,
+      additionalParameters: (configData?.additionalParameters || []).map((param) => ({ ...param })),
+    }
+  }, [])
+
+  const initialValues = useMemo(
+    () => transformToFormValues(config),
+    [config, transformToFormValues],
+  )
 
-  authScripts.push(SIMPLE_PASSWORD_AUTH)
+  const authScripts = useMemo(() => {
+    const filtered = scripts
+      .filter((item) => item.scriptType === 'person_authentication')
+      .filter((item) => item.enabled)
+      .map((item) => item.name)
+
+    return [...filtered, SIMPLE_PASSWORD_AUTH]
+  }, [scripts])
 
   const formik = useFormik({
-    initialValues: {
-      sessionTimeoutInMins: sessionTimeout,
-      acrValues: acrValues || '',
-      cedarlingLogType,
-    },
+    initialValues,
+    enableReinitialize: true,
     onSubmit: (values) => {
+      // Save paging size to localStorage
+      savePaggingSize()
+
+      // Dispatch the action to save
       dispatch(putConfigWorker(values))
-      !(values?.cedarlingLogType === cedarlingLogType) &&
+
+      if (values?.cedarlingLogType !== config?.cedarlingLogType) {
         dispatch(updateToast(true, 'success', t('fields.reloginToViewCedarlingChanges')))
+      }
     },
     validationSchema: Yup.object().shape({
       sessionTimeoutInMins: Yup.number()
@@ -171,6 +190,20 @@ function SettingsForm() {
     }),
   })
 
+  const handleCancel = useCallback(() => {
+    const resetValues = transformToFormValues(config)
+    formik.resetForm({ values: resetValues })
+    resetPaggingSize()
+  }, [formik, config, transformToFormValues, resetPaggingSize])
+
+  // Transform additionalParameters for GluuProperties (Fido pattern)
+  const additionalParametersOptions = useMemo(() => {
+    return (formik.values.additionalParameters || []).map((param) => ({
+      key: param.key || '',
+      value: param.value || '',
+    }))
+  }, [formik.values.additionalParameters])
+
   return (
     <Form onSubmit={formik.handleSubmit}>
       <GluuInputRow
@@ -186,7 +219,6 @@ function SettingsForm() {
         errorMessage={formik.errors.sessionTimeoutInMins}
         showError={formik.errors.sessionTimeoutInMins && formik.touched.sessionTimeoutInMins}
       />
-
       <FormGroup row>
         <GluuLabel
           size={4}
@@ -212,7 +244,6 @@ function SettingsForm() {
           </InputGroup>
         </Col>
       </FormGroup>
-
       <FormGroup row>
         <GluuLabel
           size={4}
@@ -240,26 +271,23 @@ function SettingsForm() {
           />
         </Col>
       </FormGroup>
-
       <div className="mb-3">
         <GluuProperties
           compName="additionalParameters"
           label="fields.custom_params_auth"
           formik={formik}
           keyPlaceholder={t('placeholders.enter_property_key')}
           valuePlaceholder={t('placeholders.enter_property_value')}
-          options={additionalParameters}
+          options={additionalParametersOptions}
           tooltip="documentation.settings.custom_params"
         />
       </div>
-      <Button
+      <GluuCommitFooter
+        hideButtons={{ save: true }}
         type="submit"
-        color={`primary-${selectedTheme}`}
-        className="UserActionSubmitButton"
-        disabled={loadingConfig || !formik.dirty}
-      >
-        {t('actions.submit')}
-      </Button>
+        disableBackButton={true}
+        cancelHandler={handleCancel}
+      />
     </Form>
   )
 }