UI: Fix PropagationConfig.tsx to save state between tabs

monkey/monkey_island/cc/ui/src/components/configuration-components/PropagationConfig.tsx

@@ -1,7 +1,7 @@
 import Form from 'react-jsonschema-form-bs4';
 import React, {useState, useEffect} from 'react';
 import {Nav} from 'react-bootstrap';
-import {CREDENTIALS} from '../../services/configuration/credentials.js';
+import _ from 'lodash';
 
 const sectionOrder = [
   'exploitation',
@@ -26,24 +26,23 @@ export default function PropagationConfig(props) {
   const [displayedSchemaUi, setDisplayedSchemaUi] = useState(getUiSchemaByKey(uiSchema, initialSection));
   const [localFormData, setLocalFormData] = useState(formData[initialSection]);
 
-  let varLocalFormData = formData[initialSection];
   useEffect(() => {
-    varLocalFormData = localFormData;
-
-  }, [localFormData]);
-
-  useEffect(() => {
-    console.log('setSection selectedSection:'+selectedSection);
     setLocalFormData(formData[selectedSection]);
     setDisplayedSchema(getSchemaByKey(schema, selectedSection));
     setDisplayedSchemaUi(getUiSchemaByKey(uiSchema, selectedSection));
     setLocalFormData(formData[selectedSection]);
   }, [selectedSection])
 
+  useEffect(() => {
+    setLocalFormData(formData[selectedSection]);
+  }, [formData])
+
   const onInnerDataChange = (innerData) => {
-    console.log('onInnerDataChange is called, section:'+selectedSection);
-    formData[selectedSection] = innerData.formData;
-    onChange({formData: innerData.formData});
+    let innerDataClone = _.clone(innerData);
+    let formDataClone = _.clone(formData);
+
+    formDataClone[selectedSection] = innerDataClone.formData;
+    onChange({formData: formDataClone});
   }
 
   const setSection = (sectionKey) => {
@@ -71,7 +70,7 @@ export default function PropagationConfig(props) {
     {renderNav()}
     <Form schema={displayedSchema}
           uiSchema={displayedSchemaUi}
-          formData={varLocalFormData}
+          formData={localFormData}
           onChange={onInnerDataChange}
           customFormats={customFormats}
           className={className}