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

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

@@ -18,6 +18,7 @@ interface GluuFormFooterBaseProps {
   backButtonLabel?: string
   onBack?: () => void
   disableBack?: boolean
+  backIconClass?: string
   showCancel?: boolean
   cancelButtonLabel?: string
   onCancel?: () => void
@@ -54,6 +55,7 @@ const GluuFormFooter = ({
   backButtonLabel,
   onBack,
   disableBack = false,
+  backIconClass = 'fa fa-arrow-circle-left',
   showCancel,
   cancelButtonLabel,
   onCancel,
@@ -157,7 +159,7 @@ const GluuFormFooter = ({
             disabled={disableBack}
             aria-label={backLabel}
           >
-            <ButtonLabel isLoading={false} iconClass="fa fa-arrow-circle-left" label={backLabel} />
+            <ButtonLabel isLoading={false} iconClass={backIconClass} label={backLabel} />
           </Button>
         )}
 

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

@@ -4,8 +4,10 @@ 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 GluuFormFooter from 'Routes/Apps/Gluu/GluuFormFooter'
 import { JSON_CONFIG } from 'Utils/ApiResources'
+import { loggingValidationSchema } from './validations'
+import { LOG_LEVELS, LOG_LAYOUTS, getLoggingInitialValues } from './utils'
 import applicationStyle from 'Routes/Apps/Gluu/styles/applicationstyle'
 import { useDispatch, useSelector } from 'react-redux'
 import { Formik } from 'formik'
@@ -25,13 +27,12 @@ function LoggingPage() {
   const { hasCedarPermission, authorize } = useCedarling()
   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 [showCommitDialog, setShowCommitDialog] = useState(false)
   const [pendingValues, setPendingValues] = useState(null)
-  const [localLogging, setLocalLogging] = useState(null)
+  const toggleCommitDialog = useCallback(() => setShowCommitDialog((prev) => !prev), [])
 
   useEffect(() => {
     const initPermissions = async () => {
@@ -44,38 +45,21 @@ function LoggingPage() {
     dispatch(getLoggingConfig())
   }, [dispatch, authorize])
 
-  useEffect(() => {
-    if (logging) {
-      setLocalLogging(logging)
-    }
-  }, [logging])
-
-  useEffect(() => {}, [cedarPermissions])
-
-  const initialValues = useMemo(
-    () => ({
-      loggingLevel: localLogging?.loggingLevel,
-      loggingLayout: localLogging?.loggingLayout,
-      httpLoggingEnabled: localLogging?.httpLoggingEnabled,
-      disableJdkLogger: localLogging?.disableJdkLogger,
-      enabledOAuthAuditLogging: localLogging?.enabledOAuthAuditLogging,
-    }),
-    [localLogging],
-  )
+  const initialValues = useMemo(() => getLoggingInitialValues(logging), [logging])
 
-  const levels = useMemo(() => ['TRACE', 'DEBUG', 'INFO', 'ERROR', 'WARN'], [])
-  const logLayouts = useMemo(() => ['text', 'json'], [])
+  const levels = useMemo(() => LOG_LEVELS, [])
+  const logLayouts = useMemo(() => LOG_LAYOUTS, [])
   SetTitle('Logging')
 
   const handleSubmit = useCallback(
     (values) => {
-      const mergedValues = getMergedValues(localLogging, values)
-      const changedFields = getChangedFields(localLogging, mergedValues)
+      const mergedValues = getMergedValues(logging, values)
+      const changedFields = getChangedFields(logging, mergedValues)
 
       setPendingValues({ mergedValues, changedFields })
       setShowCommitDialog(true)
     },
-    [localLogging],
+    [logging],
   )
 
   const handleAccept = useCallback(
@@ -104,7 +88,13 @@ function LoggingPage() {
       <Card style={applicationStyle.mainCard}>
         <CardBody style={{ minHeight: 500 }}>
           <GluuViewWrapper canShow={hasCedarPermission(LOGGING_READ)}>
-            <Formik initialValues={initialValues} enableReinitialize onSubmit={handleSubmit}>
+            <Formik
+              initialValues={initialValues}
+              enableReinitialize
+              onSubmit={handleSubmit}
+              validationSchema={loggingValidationSchema}
+              validateOnMount
+            >
               {(formik) => (
                 <Form onSubmit={formik.handleSubmit}>
                   <FormGroup row>
@@ -113,6 +103,7 @@ function LoggingPage() {
                       size={4}
                       doc_category={JSON_CONFIG}
                       doc_entry="loggingLevel"
+                      required
                     />
                     <Col sm={8}>
                       <CustomInput
@@ -122,6 +113,9 @@ function LoggingPage() {
                         data-testid="loggingLevel"
                         value={formik.values.loggingLevel}
                         onChange={(e) => formik.setFieldValue('loggingLevel', e.target.value)}
+                        onBlur={() => formik.setFieldTouched('loggingLevel', true)}
+                        required
+                        aria-required="true"
                       >
                         <option value="">{t('actions.choose')}...</option>
                         {levels.map((item, key) => (
@@ -130,6 +124,9 @@ function LoggingPage() {
                           </option>
                         ))}
                       </CustomInput>
+                      {formik.touched.loggingLevel && formik.errors.loggingLevel && (
+                        <div className="text-danger mt-1">{formik.errors.loggingLevel}</div>
+                      )}
                     </Col>
                   </FormGroup>
 
@@ -139,6 +136,7 @@ function LoggingPage() {
                       size={4}
                       doc_category={JSON_CONFIG}
                       doc_entry="loggingLayout"
+                      required
                     />
                     <Col sm={8}>
                       <CustomInput
@@ -148,6 +146,9 @@ function LoggingPage() {
                         data-testid="loggingLayout"
                         value={formik.values.loggingLayout}
                         onChange={(e) => formik.setFieldValue('loggingLayout', e.target.value)}
+                        onBlur={() => formik.setFieldTouched('loggingLayout', true)}
+                        required
+                        aria-required="true"
                       >
                         <option value="">{t('actions.choose')}...</option>
                         {logLayouts.map((item, key) => (
@@ -156,6 +157,9 @@ function LoggingPage() {
                           </option>
                         ))}
                       </CustomInput>
+                      {formik.touched.loggingLayout && formik.errors.loggingLayout && (
+                        <div className="text-danger mt-1">{formik.errors.loggingLayout}</div>
+                      )}
                     </Col>
                   </FormGroup>
 
@@ -192,12 +196,17 @@ function LoggingPage() {
                   {hasCedarPermission(LOGGING_WRITE) && (
                     <Row>
                       <Col>
-                        <GluuCommitFooter
-                          saveHandler={formik.handleSubmit}
-                          extraLabel={t('actions.cancel')}
-                          extraOnClick={() => formik.resetForm()}
-                          hideButtons={{ save: true, back: true }}
-                          type="submit"
+                        <GluuFormFooter
+                          showBack={true}
+                          showCancel={true}
+                          showApply={true}
+                          onApply={formik.handleSubmit}
+                          onCancel={() => formik.resetForm()}
+                          disableBack={false}
+                          disableCancel={!formik.dirty}
+                          disableApply={!formik.isValid || !formik.dirty}
+                          applyButtonType="button"
+                          isLoading={loading}
                         />
                       </Col>
                     </Row>
@@ -207,7 +216,7 @@ function LoggingPage() {
             </Formik>
 
             <GluuCommitDialog
-              handler={() => setShowCommitDialog(false)}
+              handler={toggleCommitDialog}
               modal={showCommitDialog}
               onAccept={handleAccept}
               isLicenseLabel={false}

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

@@ -0,0 +1,10 @@
+export const LOG_LEVELS = ['TRACE', 'DEBUG', 'INFO', 'ERROR', 'WARN']
+export const LOG_LAYOUTS = ['text', 'json']
+
+export const getLoggingInitialValues = (logging) => ({
+  loggingLevel: logging?.loggingLevel,
+  loggingLayout: logging?.loggingLayout,
+  httpLoggingEnabled: logging?.httpLoggingEnabled,
+  disableJdkLogger: logging?.disableJdkLogger,
+  enabledOAuthAuditLogging: logging?.enabledOAuthAuditLogging,
+})

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

@@ -0,0 +1,12 @@
+import * as Yup from 'yup'
+import { LOG_LEVELS, LOG_LAYOUTS } from './utils'
+
+export const loggingValidationSchema = Yup.object({
+  loggingLevel: Yup.string().oneOf(LOG_LEVELS, 'Invalid log level').required('Required!'),
+  loggingLayout: Yup.string().oneOf(LOG_LAYOUTS, 'Invalid log layout').required('Required!'),
+  httpLoggingEnabled: Yup.boolean().optional(),
+  disableJdkLogger: Yup.boolean().optional(),
+  enabledOAuthAuditLogging: Yup.boolean().optional(),
+})
+
+export default loggingValidationSchema

admin-ui/plugins/auth-server/components/JsonViewer/JsonViewerDialog.js

@@ -1,9 +1,10 @@
 import React from 'react'
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap'
+import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'
 import { useTranslation } from 'react-i18next'
 import JsonViewer from './JsonViewer'
 import PropTypes from 'prop-types'
 import customColors from '@/customColors'
+import GluuFormFooter from 'Routes/Apps/Gluu/GluuFormFooter'
 
 const JsonViewerDialog = ({
   isOpen,
@@ -26,8 +27,17 @@ const JsonViewerDialog = ({
       <ModalBody style={{ maxHeight: '70vh', overflow: 'auto' }}>
         <JsonViewer data={data} theme={theme} expanded={expanded} />
       </ModalBody>
-      <ModalFooter>
-        <Button onClick={toggle}>{t('actions.close')}</Button>
+      <ModalFooter className="w-100">
+        <GluuFormFooter
+          showBack={true}
+          onBack={toggle}
+          showCancel={false}
+          showApply={false}
+          disableBack={false}
+          className="w-100"
+          backButtonLabel={t('actions.close')}
+          backIconClass="fa fa-times-circle"
+        />
       </ModalFooter>
     </Modal>
   )