UI: Submit config before exporting

Previously config was not getting submitted before exporting. This could cause a misunderstanding where user exports a different configuration to the one he sees on the screen

monkey/monkey_island/cc/ui/src/components/pages/ConfigurePage.js

@@ -23,6 +23,10 @@ const CONFIG_URL = '/api/configuration/island';
 export const API_PBA_LINUX = '/api/file-upload/PBAlinux';
 export const API_PBA_WINDOWS = '/api/file-upload/PBAwindows';
 
+const configSubmitAction = 'config-submit';
+const configExportAction = 'config-export';
+const configSaveAction = 'config-saved';
+
 class ConfigurePageComponent extends AuthComponent {
 
   constructor(props) {
@@ -87,14 +91,16 @@ class ConfigurePageComponent extends AuthComponent {
   };
 
   onUnsafeConfirmationCancelClick = () => {
-    this.setState({showUnsafeOptionsConfirmation: false});
+    this.setState({showUnsafeOptionsConfirmation: false, lastAction: 'none'});
   }
 
   onUnsafeConfirmationContinueClick = () => {
     this.setState({showUnsafeOptionsConfirmation: false});
-
+    if (this.state.lastAction === configSubmitAction) {
-    if (this.state.lastAction === 'submit_attempt') {
       this.configSubmit();
+    } else if (this.state.lastAction === configExportAction) {
+      this.configSubmit();
+      this.setState({showConfigExportModal: true});
     }
   }
 
@@ -113,37 +119,31 @@ class ConfigurePageComponent extends AuthComponent {
   };
 
   onSubmit = () => {
-    this.attemptConfigSubmit();
+    this.setState({lastAction: configSubmitAction}, this.attemptConfigSubmit)
   };
 
   canSafelySubmitConfig(config) {
     return !isUnsafeOptionSelected(this.state.schema, config);
   }
 
-  checkAndShowUnsafeAttackWarning = () => {
+  async attemptConfigSubmit() {
-    if (isUnsafeOptionSelected(this.state.schema, this.state.configuration)) {
+    await this.updateConfigSection();
-      this.setState({showUnsafeAttackOptionsWarning: true});
-    }
-  }
-
-  attemptConfigSubmit() {
-    this.updateConfigSection();
-    this.setState({lastAction: 'submit_attempt'}, () => {
     if (this.canSafelySubmitConfig(this.state.configuration)) {
       this.configSubmit();
+      if(this.state.lastAction === configExportAction){
+        this.setState({showConfigExportModal: true})
+      }
     } else {
       this.setState({showUnsafeOptionsConfirmation: true});
     }
   }
-    );
-  }
 
   configSubmit() {
-    this.sendConfig()
+    return this.sendConfig()
       .then(res => res.json())
       .then(res => {
         this.setState({
-          lastAction: 'saved',
+          lastAction: configSaveAction,
           schema: res.schema,
           configuration: res.configuration
         });
@@ -167,11 +167,12 @@ class ConfigurePageComponent extends AuthComponent {
     if (Object.keys(this.state.currentFormData).length > 0) {
       newConfig[this.currentSection] = this.state.currentFormData;
     }
-    this.setState({configuration: newConfig, lastAction: 'none'});
+    this.setState({configuration: newConfig});
   };
 
   renderConfigExportModal = () => {
     return (<ConfigExportModal show={this.state.showConfigExportModal}
+                               configuration={this.state.configuration}
                                onHide={() => {
                                  this.setState({showConfigExportModal: false});
                                }}/>);
@@ -307,9 +308,9 @@ class ConfigurePageComponent extends AuthComponent {
     this.authFetch(apiEndpoint, request_options);
   }
 
-  exportConfig = () => {
+  exportConfig = async () => {
-    this.updateConfigSection();
+    await this.setState({lastAction: configExportAction});
-    this.setState({showConfigExportModal: true});
+    await this.attemptConfigSubmit();
   };
 
   sendConfig() {
@@ -451,7 +452,7 @@ class ConfigurePageComponent extends AuthComponent {
               Configuration reset successfully.
             </div>
             : ''}
-          {this.state.lastAction === 'saved' ?
+          {this.state.lastAction === configSaveAction ?
             <div className='alert alert-success'>
               <FontAwesomeIcon icon={faCheck} style={{'marginRight': '5px'}}/>
               Configuration saved successfully.