fix(admin-ui): source & destination react component malfunctioning #1269

GluuFederation · Aug 10, 2023 · edcc08e · edcc08e
1 parent 8271fda
commit edcc08e
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 29 deletions.
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuProperties.js b/admin-ui/app/routes/Apps/Gluu/GluuProperties.js
@@ -1,4 +1,3 @@
-
 import React, { useState, useContext } from 'react'
 import { FormGroup, Col, Button, Accordion } from 'Components'
 import GluuPropertyItem from './GluuPropertyItem'
@@ -15,26 +14,31 @@ function GluuProperties({
   disabled = false,
   buttonText = null,
   isInputLables = false,
-  keyLabel = "",
-  valueLabel = "",
+  keyLabel = '',
+  valueLabel = '',
   isAddButton = true,
   isRemoveButton = true,
-  isKeys=true,
+  isKeys = true,
   multiProperties = false,
   showError = false,
   errorMessage,
-  inputSm
+  inputSm,
 }) {
   const [properties, setProperties] = useState(options)
   const { t } = useTranslation()
   const theme = useContext(ThemeContext)
   const selectedTheme = theme.state.theme
 
   const addProperty = () => {
-    const item = { key: '', value: '' }
+    let item
+    if (multiProperties) {
+      item = { source: '', destination: '' }
+    } else {
+      item = { key: '', value: '' }
+    }
     setProperties((prev) => [...prev, item])
   }
-  const changeProperty = (position) => (e) => {
+  const changeProperty = (position, e) => {
     const { name, value } = e.target
     const newDataArr = [...properties]
     newDataArr[position] = { ...newDataArr[position], [name]: value }
@@ -48,26 +52,28 @@ function GluuProperties({
     setProperties(data)
     formik.setFieldValue(
       compName,
-      data.filter((element) => element != null),
+      data.filter((element) => element != null)
     )
   }
 
   return (
-    <Accordion className="mb-2 b-primary" initialOpen>
+    <Accordion className='mb-2 b-primary' initialOpen>
       <Accordion.Header>{t(label).toUpperCase()}</Accordion.Header>
       <Accordion.Body>
-        {isAddButton && <Button
-          style={{
-            float: 'right',
-          }}
-          type="button"
-          color={`primary-${selectedTheme}`}
-          onClick={addProperty}
-          disabled={disabled}
-        >
-          <i className="fa fa-fw fa-plus me-2"></i>
-          {buttonText ? t(buttonText) : t('actions.add_property')}
-        </Button>}
+        {isAddButton && (
+          <Button
+            style={{
+              float: 'right',
+            }}
+            type='button'
+            color={`primary-${selectedTheme}`}
+            onClick={addProperty}
+            disabled={disabled}
+          >
+            <i className='fa fa-fw fa-plus me-2'></i>
+            {buttonText ? t(buttonText) : t('actions.add_property')}
+          </Button>
+        )}
         <FormGroup row>
           <Col sm={12}>
             <FormGroup row></FormGroup>
@@ -96,7 +102,7 @@ function GluuProperties({
             ))}
           </Col>
         </FormGroup>
-        {showError ? <div style={{ color: "red" }}>{errorMessage}</div> : null}
+        {showError ? <div style={{ color: 'red' }}>{errorMessage}</div> : null}
       </Accordion.Body>
     </Accordion>
   )

diff --git a/admin-ui/app/routes/Apps/Gluu/GluuPropertyItem.js b/admin-ui/app/routes/Apps/Gluu/GluuPropertyItem.js
@@ -29,8 +29,9 @@ function GluuPropertyItem({
         <Input
           name={'key'}
           defaultValue={property.key}
+          value={property.key}
           disabled={disabled}
-          onChange={onPropertyChange(position)}
+          onChange={(event) => onPropertyChange(position, event)}
           placeholder={
             keyPlaceholder
               ? t(keyPlaceholder)
@@ -45,8 +46,9 @@ function GluuPropertyItem({
             <Input
               name={'value'}
               defaultValue={property.value}
+              value={property.value}
               disabled={disabled}
-              onChange={onPropertyChange(position)}
+              onChange={(event) => onPropertyChange(position, event)}
               placeholder={
                 valuePlaceholder
                   ? t(valuePlaceholder)
@@ -59,8 +61,9 @@ function GluuPropertyItem({
             <Input
               name={'source'}
               defaultValue={property.source}
+              value={property.source}
               disabled={disabled}
-              onChange={onPropertyChange(position)}
+              onChange={(event) => onPropertyChange(position, event)}
               placeholder={
                 sourcePlaceholder
                   ? t(sourcePlaceholder)
@@ -70,8 +73,9 @@ function GluuPropertyItem({
             <Input
               name={'destination'}
               defaultValue={property.destination}
+              value={property.destination}
               disabled={disabled}
-              onChange={onPropertyChange(position)}
+              onChange={(event) => onPropertyChange(position, event)}
               placeholder={
                 destinationPlaceholder
                   ? t(destinationPlaceholder)

diff --git a/admin-ui/plugins/admin/redux/features/customScriptSlice.js b/admin-ui/plugins/admin/redux/features/customScriptSlice.js
@@ -36,9 +36,7 @@ const customScriptSlice = createSlice({
     addCustomScriptResponse: (state, action) => {
       state.loading = false
       state.errorInSaveOperationFlag = false
-
       if (action.payload?.data) {
-        state.items = [...state.items, action.payload.data]
         state.saveOperationFlag = true
       } else {
         state.saveOperationFlag = false

diff --git a/admin-ui/plugins/jans-link/components/Tabs/ConfigurationTab.js b/admin-ui/plugins/jans-link/components/Tabs/ConfigurationTab.js
@@ -168,7 +168,6 @@ const ConfigurationTab = () => {
                     formik.values.attributeMapping
                       ? formik.values.attributeMapping.map(
                           ({ source, destination }) => ({
-                            key: '',
                             source,
                             destination,
                           })