Fix certificate sync issue when choose upload option for both normal cert and km cert

Author: RusJaI

portals/admin/src/main/webapp/source/src/app/components/KeyManagers/AddEditKeyManager.jsx

@@ -1735,7 +1735,12 @@ function AddEditKeyManager(props) {
                     </Grid>
                     <Grid item xs={12} md={12} lg={9}>
                         <Box component='div' m={1}>
-                            <Certificates certificates={certificates} dispatch={dispatch} isConfigCert={false} />
+                            <Certificates
+                                fieldName='certificates'
+                                certificates={certificates}
+                                dispatch={dispatch}
+                                isJwksNeeded
+                            />
                         </Box>
                     </Grid>
                     <Grid item xs={12}>
@@ -1783,8 +1788,6 @@ function AddEditKeyManager(props) {
                                                  setAdditionalProperties={setAdditionalProperties}
                                                  hasErrors={hasErrors}
                                                  validating={validating}
-                                                 dispatch={dispatch}
-                                                 certificates={certificates}
                                              />
                                          </Box>
                                      </Grid>

portals/admin/src/main/webapp/source/src/app/components/KeyManagers/Certificates.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import Radio from '@mui/material/Radio';
 import RadioGroup from '@mui/material/RadioGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
@@ -16,29 +16,51 @@ import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
 import Alert from 'AppComponents/Shared/Alert';
 
-const cache = {};
 /**
  * Renders the certificate add/edit page.
  * @param {JSON} props Input props form parent components.
  * @returns {JSX} Certificate upload/add UI.
  */
 export default function Certificates(props) {
     const intl = useIntl();
-    const { certificates: { type, value }, dispatch, isConfigCert } = props;
+    const {
+        fieldName,
+        [fieldName]: { type, value },
+        dispatch,
+        isJwksNeeded,
+    } = props;
     const [selectedTab, setSelectedTab] = useState(0);
     const [file, setFile] = useState(null);
-    cache[type] = value;
+    // Keep certificate cache local to this instance
+    const [certCache, setCertCache] = useState({
+        PEM: '',
+        JWKS: '',
+    });
+
+    // Update cache when value changes
+    useEffect(() => {
+        setCertCache((prev) => ({
+            ...prev,
+            [type]: value,
+        }));
+    }, [type, value]);
 
     const onDrop = (acceptedFile) => {
         const reader = new FileReader();
         setFile(acceptedFile[0]);
         reader.readAsText(acceptedFile[0], 'UTF-8');
         reader.onload = (evt) => {
+            const newValue = btoa(evt.target.result);
+            // Update both cache and parent
+            setCertCache((prev) => ({
+                ...prev,
+                [type]: newValue,
+            }));
             dispatch({
-                field: 'certificates',
+                field: fieldName,
                 value: {
                     type,
-                    value: btoa(evt.target.result),
+                    value: newValue,
                 },
             });
         };
@@ -53,19 +75,26 @@ export default function Certificates(props) {
     const handleChange = (event) => {
         const { value: selected, name } = event.target;
         if (name === 'certificateType') {
+            // When switching certificate type, use the cached value for that type
             dispatch({
-                field: 'certificates',
+                field: fieldName,
                 value: {
                     type: selected,
-                    value: cache[selected],
+                    value: certCache[selected] || '',
                 },
             });
         } else {
+            // When updating certificate value, update both cache and parent
+            const newValue = name === 'certificateValueUrl' ? selected : btoa(selected);
+            setCertCache((prev) => ({
+                ...prev,
+                [type]: newValue,
+            }));
             dispatch({
-                field: 'certificates',
+                field: fieldName,
                 value: {
                     type,
-                    value: name === 'certificateValueUrl' ? selected : btoa(selected),
+                    value: newValue,
                 },
             });
         }
@@ -75,7 +104,7 @@ export default function Certificates(props) {
     };
     return (
         <>
-            {!isConfigCert && (
+            {isJwksNeeded && (
                 <FormControl variant='standard' component='fieldset'>
                     <RadioGroup
                         style={{ flexDirection: 'row' }}
@@ -106,7 +135,7 @@ export default function Certificates(props) {
                     onChange={handleChange}
                 />
             )}
-            {(isConfigCert || type === 'PEM') && (
+            {(!isJwksNeeded || type === 'PEM') && (
                 <>
                     <AppBar position='static' color='default'>
                         <Tabs value={selectedTab} onChange={handleTabChange}>
@@ -175,7 +204,13 @@ export default function Certificates(props) {
         </>
     );
 }
+Certificates.defaultProps = {
+    fieldName: 'certificates',
+    isJwksNeeded: false,
+};
+
 Certificates.propTypes = {
-    certificates: PropTypes.shape({}).isRequired,
+    fieldName: PropTypes.string,
     dispatch: PropTypes.func.isRequired,
+    isJwksNeeded: PropTypes.bool,
 };

portals/admin/src/main/webapp/source/src/app/components/KeyManagers/KeyManagerConfiguration.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useReducer } from 'react';
 import { styled } from '@mui/material/styles';
 import {
     TextField, Checkbox, FormControlLabel, Box, FormLabel, FormControl,
@@ -10,6 +10,20 @@ import { FormattedMessage } from 'react-intl';
 
 const StyledSpan = styled('span')(({ theme }) => ({ color: theme.palette.error.dark }));
 
+/**
+ * Reducer
+ * @param {JSON} state The second number.
+ * @returns {Promise}
+ */
+function certificateReducer(state, newValue) {
+    const { field, value } = newValue;
+    if (field === 'tenantWideCertificates') {
+        return { ...state, [field]: value };
+    } else {
+        return newValue;
+    }
+}
+
 export default function KeyManagerConfiguration(props) {
     const {
         keymanagerConnectorConfigurations,
@@ -19,22 +33,18 @@ export default function KeyManagerConfiguration(props) {
         validating,
     } = props;
 
-    const dispatch = (action) => {
-        // Handle certificate updates based on the field name
-        if (action.field === 'certificates') {
-            // Store the complete certificate object
-            setAdditionalProperties('certificates', {
-                type: action.value.type,
-                value: action.value.value,
-            });
+    // Change from constant to state
+    const [tenantWideCertificates, dispatch] = useReducer(certificateReducer,
+        additionalProperties?.certificates || {
+            type: 'PEM',
+            value: '',
+        });
+    // Add effect to watch for changes
+    useEffect(() => {
+        if (tenantWideCertificates) {
+            setAdditionalProperties('certificates', tenantWideCertificates);
         }
-    };
-
-    // Update certificates structure to match what Certificates.jsx expects
-    const certificates = additionalProperties?.certificates || {
-        type: 'PEM',
-        value: '',
-    };
+    }, [tenantWideCertificates, setAdditionalProperties]);
 
     const onChange = (e) => {
         const {
@@ -267,7 +277,12 @@ export default function KeyManagerConfiguration(props) {
                         {label}
                         {required && <StyledSpan>*</StyledSpan>}
                     </FormLabel>
-                    <Certificates certificates={certificates} dispatch={dispatch} isConfigCert />
+                    <Certificates
+                        fieldName='tenantWideCertificates'
+                        tenantWideCertificates={tenantWideCertificates}
+                        dispatch={dispatch}
+                        isJwksNeeded={false}
+                    />
                 </FormControl>
             );
         }