Merge branch 'main' into admin-ui-issue-2368

Signed-off-by: Faisal Siddique <71010439+faisalsiddique4400@users.noreply.github.com>

Author: faisalsiddique4400

admin-ui/app/routes/Apps/Gluu/GluuCommitFooter.tsx

@@ -5,19 +5,42 @@ import applicationStyle from 'Routes/Apps/Gluu/styles/applicationstyle'
 import { ThemeContext } from 'Context/theme/themeContext'
 import { Box } from '@mui/material'
 
+interface GluuCommitFooterProps {
+  extraOnClick?: () => void
+  saveHandler?: () => void
+  extraLabel?: string
+  hideButtons?: {
+    save?: boolean
+    back?: boolean
+  }
+  type?: 'button' | 'submit'
+  disableBackButton?: boolean
+  cancelHandler?: () => void
+  backButtonLabel?: string
+  backButtonHandler?: () => void
+}
+
 function GluuCommitFooter({
   extraOnClick,
   saveHandler,
   extraLabel,
   hideButtons,
   type = 'button',
-}: any) {
+  backButtonLabel,
+  backButtonHandler,
+  disableBackButton = false,
+  cancelHandler = () => {},
+}: GluuCommitFooterProps) {
   const { t } = useTranslation()
-  const theme: any = useContext(ThemeContext)
-  const selectedTheme = theme.state.theme
+  const theme = useContext(ThemeContext)
+  const selectedTheme = theme?.state.theme || 'darkBlack'
 
   function goBack() {
-    window.history.back()
+    if (backButtonHandler) {
+      backButtonHandler()
+    } else {
+      window.history.back()
+    }
   }
 
   return (
@@ -29,11 +52,11 @@ function GluuCommitFooter({
             color={`primary-${selectedTheme}`}
             style={{ ...applicationStyle.buttonStyle, ...applicationStyle.buttonFlexIconStyles }}
             type="button"
-            onClick={goBack}
+            onClick={disableBackButton ? cancelHandler : goBack}
             className="d-flex m-1 mx-5"
           >
-            <i className="fa fa-arrow-circle-left me-2"></i>
-            {t('actions.cancel')}
+            {!disableBackButton && <i className="fa fa-arrow-circle-left me-2"></i>}
+            {backButtonLabel || t('actions.cancel')}
           </Button>
         )}
         {extraLabel && extraOnClick && (

admin-ui/app/routes/Apps/Gluu/GluuProperties.tsx

@@ -1,4 +1,4 @@
-import { useState, useContext } from 'react'
+import { useState, useContext, useEffect } from 'react'
 import { FormGroup, Col, Button, Accordion, AccordionHeader, AccordionBody } from 'Components'
 import GluuPropertyItem from './GluuPropertyItem'
 import { useTranslation } from 'react-i18next'
@@ -35,6 +35,12 @@ function GluuProperties({
   const theme: any = useContext(ThemeContext)
   const selectedTheme = theme.state.theme
 
+  // Sync internal state with options prop when it changes
+  // This ensures the component properly resets when formik values are reset
+  useEffect(() => {
+    setProperties(options)
+  }, [options])
+
   const addProperty = () => {
     let item
     if (multiProperties) {

admin-ui/app/routes/Apps/Gluu/GluuTypeAhead.tsx

@@ -79,7 +79,7 @@ function GluuTypeAhead({
           id={name}
           data-testid={name}
           multiple={multiple}
-          selected={value}
+          selected={value || []}
           options={options}
         />
         {!hideHelperMessage && (

admin-ui/app/utils/AuditLogger.ts

@@ -15,6 +15,7 @@ export interface LogAuditParams {
   message: string
   modifiedFields?: Record<string, unknown>
   performedOn?: string | Date
+  ip_address?: string
   extra?: Record<string, unknown>
   status?: string
   client_id?: string

admin-ui/app/utils/types.ts

@@ -33,3 +33,22 @@ export interface ReduxState {
   error: ApiError | null
   data: any
 }
+
+// Redux Root State interface for auth-related state
+export interface AuthRootState {
+  authReducer: {
+    token: {
+      access_token: string
+    }
+    userinfo: {
+      inum?: string
+      name?: string
+    }
+    config: {
+      clientId: string
+    }
+    location: {
+      IPv4: string
+    }
+  }
+}

admin-ui/plugins/auth-server/components/Configuration/ConfigApiConfiguration/ApiConfigForm.js

@@ -2,6 +2,7 @@ import React, { useCallback, useState, useEffect } from 'react'
 import GluuCommitDialog from 'Routes/Apps/Gluu/GluuCommitDialog'
 import { FormGroup } from 'Components'
 import { useDispatch, useSelector } from 'react-redux'
+import { useNavigate } from 'react-router-dom'
 import spec from '../../../../../configApiSpecs.yaml'
 import { buildPayload, API_CONFIG_WRITE } from 'Utils/PermChecker'
 import { useCedarling } from '@/cedarling'
@@ -15,6 +16,7 @@ const schema = spec.components.schemas.ApiAppConfiguration.properties
 const ApiConfigForm = () => {
   const { hasCedarPermission, authorize } = useCedarling()
   const dispatch = useDispatch()
+  const navigate = useNavigate()
   const [modal, setModal] = useState(false)
   const [patches, setPatches] = useState([])
   const [operations, setOperations] = useState([])
@@ -74,6 +76,10 @@ const ApiConfigForm = () => {
     setOperations(newPatches)
   }
 
+  const handleBack = () => {
+    navigate('/home/dashboard')
+  }
+
   return (
     <>
       {Object.keys(configuration).map((propKey) => {
@@ -93,7 +99,14 @@ const ApiConfigForm = () => {
       })}
 
       <FormGroup row></FormGroup>
-      {hasCedarPermission(API_CONFIG_WRITE) && <GluuCommitFooter saveHandler={toggle} />}
+      {hasCedarPermission(API_CONFIG_WRITE) && (
+        <GluuCommitFooter
+          saveHandler={toggle}
+          hideButtons={{ back: false }}
+          backButtonLabel="Back"
+          backButtonHandler={handleBack}
+        />
+      )}
 
       {hasCedarPermission(API_CONFIG_WRITE) && (
         <GluuCommitDialog

admin-ui/plugins/auth-server/components/Configuration/ConfigPage.js

@@ -4,9 +4,9 @@ import { FormGroup, Card, CardBody, CardHeader } from 'Components'
 import GluuLoader from 'Routes/Apps/Gluu/GluuLoader'
 import GluuCommitFooter from 'Routes/Apps/Gluu/GluuCommitFooter'
 import GluuCommitDialog from 'Routes/Apps/Gluu/GluuCommitDialog'
-
 import PropertyBuilder from './JsonPropertyBuilder'
 import { useDispatch, useSelector } from 'react-redux'
+import { useNavigate } from 'react-router-dom'
 import RefreshIcon from '@mui/icons-material/Refresh'
 import spec from '../../../../configApiSpecs.yaml'
 import { buildPayload, PROPERTIES_WRITE } from 'Utils/PermChecker'
@@ -30,6 +30,7 @@ function ConfigPage() {
   const { permissions: cedarPermissions } = useSelector((state) => state.cedarPermissions)
 
   const dispatch = useDispatch()
+  const navigate = useNavigate()
 
   const { t } = useTranslation()
   const lSize = 6
@@ -50,7 +51,6 @@ function ConfigPage() {
 
   const [put, setPut] = useState([])
 
-  // Permission initialization
   useEffect(() => {
     const authorizePermissions = async () => {
       try {
@@ -129,6 +129,10 @@ function ConfigPage() {
     return result.toLowerCase()
   }
 
+  const handleBack = () => {
+    navigate('/home/dashboard')
+  }
+
   return (
     <GluuLoader blocking={!(!!configuration && Object.keys(configuration).length > 0)}>
       <Card style={{ borderRadius: 24 }}>
@@ -203,7 +207,14 @@ function ConfigPage() {
           )}
 
           <FormGroup row></FormGroup>
-          {hasCedarPermission(PROPERTIES_WRITE) && <GluuCommitFooter saveHandler={toggle} />}
+          {hasCedarPermission(PROPERTIES_WRITE) && (
+            <GluuCommitFooter
+              saveHandler={toggle}
+              hideButtons={{ back: false }}
+              backButtonLabel="Back"
+              backButtonHandler={handleBack}
+            />
+          )}
           <FormGroup row></FormGroup>
           <FormGroup row></FormGroup>
           <FormGroup row></FormGroup>

admin-ui/plugins/auth-server/components/Configuration/Defaults/LoggingPage.js

@@ -1,9 +1,10 @@
-import React, { useEffect, useContext, useState, useMemo, useCallback } from 'react'
-import { Form, Button, FormGroup, Card, CardBody, Col, CustomInput } from 'Components'
+import React, { useEffect, useState, useMemo, useCallback } from 'react'
+import { Form, FormGroup, Card, CardBody, Col, CustomInput, Row } from 'Components'
 import GluuLabel from 'Routes/Apps/Gluu/GluuLabel'
 import GluuLoader from 'Routes/Apps/Gluu/GluuLoader'
 import GluuViewWrapper from 'Routes/Apps/Gluu/GluuViewWrapper'
 import GluuCommitDialog from 'Routes/Apps/Gluu/GluuCommitDialog'
+import GluuCommitFooter from 'Routes/Apps/Gluu/GluuCommitFooter'
 import { JSON_CONFIG } from 'Utils/ApiResources'
 import applicationStyle from 'Routes/Apps/Gluu/styles/applicationstyle'
 import { useDispatch, useSelector } from 'react-redux'
@@ -16,20 +17,17 @@ import { LOGGING_READ, LOGGING_WRITE } from 'Utils/PermChecker'
 import { useCedarling } from '@/cedarling'
 import { useTranslation } from 'react-i18next'
 import SetTitle from 'Utils/SetTitle'
-import { ThemeContext } from 'Context/theme/themeContext'
 import GluuToogleRow from 'Routes/Apps/Gluu/GluuToogleRow'
 import { getChangedFields, getMergedValues } from '@/helpers'
 
 function LoggingPage() {
   const { t } = useTranslation()
   const { hasCedarPermission, authorize } = useCedarling()
-  const theme = useContext(ThemeContext)
   const logging = useSelector((state) => state.loggingReducer.logging)
   const loading = useSelector((state) => state.loggingReducer.loading)
   const { permissions: cedarPermissions } = useSelector((state) => state.cedarPermissions)
 
   const dispatch = useDispatch()
-  const selectedTheme = theme.state.theme
 
   const [showCommitDialog, setShowCommitDialog] = useState(false)
   const [pendingValues, setPendingValues] = useState(null)
@@ -192,10 +190,17 @@ function LoggingPage() {
                   />
 
                   {hasCedarPermission(LOGGING_WRITE) && (
-                    <Button color={`primary-${selectedTheme}`} type="submit">
-                      <i className="fa fa-check-circle me-2"></i>
-                      {t('actions.save')}
-                    </Button>
+                    <Row>
+                      <Col>
+                        <GluuCommitFooter
+                          saveHandler={formik.handleSubmit}
+                          extraLabel={t('actions.cancel')}
+                          extraOnClick={() => formik.resetForm()}
+                          hideButtons={{ save: true, back: true }}
+                          type="submit"
+                        />
+                      </Col>
+                    </Row>
                   )}
                 </Form>
               )}

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

@@ -32,10 +32,21 @@ const DynamicConfiguration: React.FC<DynamicConfigurationProps> = ({
     enableReinitialize: true,
   })
 
-  const submitForm = useCallback(() => {
-    toggle()
-    handleSubmit(formik.values)
-  }, [handleSubmit, toggle, formik.values])
+  const submitForm = useCallback(
+    (userMessage: string) => {
+      toggle()
+      handleSubmit(formik.values, userMessage)
+    },
+    [handleSubmit, toggle, formik.values],
+  )
+
+  const handleCancel = useCallback(() => {
+    const initialValues = transformToFormValues(
+      fidoConfiguration,
+      fidoConstants.DYNAMIC,
+    ) as DynamicConfigFormValues
+    formik.resetForm({ values: initialValues })
+  }, [formik, fidoConfiguration])
 
   const handleFormSubmit = useCallback(
     (e: React.FormEvent<HTMLFormElement>) => {
@@ -288,34 +299,14 @@ const DynamicConfiguration: React.FC<DynamicConfigurationProps> = ({
             doc_category={fidoConstants.DOC_CATEGORY}
           />
         </Col>
-
-        <Col sm={8}>
-          <GluuToggleRow
-            label={fidoConstants.LABELS.SESSION_ID_PERSIST_IN_CACHE}
-            name={fidoConstants.FORM_FIELDS.SESSION_ID_PERSIST_IN_CACHE}
-            formik={formik}
-            lsize={4}
-            rsize={8}
-            doc_category={fidoConstants.DOC_CATEGORY}
-          />
-        </Col>
-
-        <Col sm={8}>
-          <GluuToggleRow
-            label={fidoConstants.LABELS.ERROR_REASON_ENABLED}
-            name={fidoConstants.FORM_FIELDS.ERROR_REASON_ENABLED}
-            formik={formik}
-            lsize={4}
-            rsize={8}
-            doc_category={fidoConstants.DOC_CATEGORY}
-          />
-        </Col>
       </FormGroup>
       <Row>
         <Col>
           <GluuCommitFooter
             saveHandler={toggle}
-            hideButtons={{ save: true, back: false }}
+            hideButtons={{ save: true, back: true }}
+            extraLabel="Cancel"
+            extraOnClick={handleCancel}
             type="submit"
             disabled={isSubmitting}
           />