feat: Add confirmation dialog before saving a Cloud Config parameter that has been modified since editing it

src/dashboard/Data/Browser/Browser.scss

@@ -270,4 +270,8 @@ body:global(.expanded) {
 
 .noScroll {
   overflow-x: hidden;
+}
+
+.confirmConfig {
+  padding: 10px 20px;
 }

src/dashboard/Data/Config/Config.react.js

@@ -21,6 +21,7 @@ import TableView from 'dashboard/TableView.react';
 import Toolbar from 'components/Toolbar/Toolbar.react';
 import browserStyles from 'dashboard/Data/Browser/Browser.scss';
 import { CurrentApp } from 'context/currentApp';
+import Modal from 'components/Modal/Modal.react';
 
 @subscribeTo('Config', 'config')
 class Config extends TableView {
@@ -38,6 +39,7 @@ class Config extends TableView {
       modalValue: '',
       modalMasterKeyOnly: false,
       loading: false,
+      confirmModalOpen: false,
     };
   }
 
@@ -58,6 +60,7 @@ class Config extends TableView {
   loadData() {
     this.setState({ loading: true });
     this.props.config.dispatch(ActionTypes.FETCH).finally(() => {
+      this.cacheData = new Map(this.props.config.data);
       this.setState({ loading: false });
     });
   }
@@ -101,6 +104,30 @@ class Config extends TableView {
         />
       );
     }
+
+    if (this.state.confirmModalOpen) {
+      extras = (
+        <Modal
+          type={Modal.Types.INFO}
+          icon="warn-outline"
+          title={'Are you sure?'}
+          confirmText="Continue"
+          cancelText="Cancel"
+          onCancel={() => this.setState({ confirmModalOpen: false })}
+          onConfirm={() => {
+            this.setState({ confirmModalOpen: false });
+            this.saveParam({
+              ...this.confirmData,
+              override: true,
+            });
+          }}
+        >
+          <div className={[browserStyles.confirmConfig]}>
+            The parameter you are trying to save has been modified while you were editing it. This means your edit is not based on the current parameter value. Do you want to continue and overwrite the other changes?
+          </div>
+        </Modal>
+      );
+    }
     return extras;
   }
 
@@ -244,7 +271,27 @@ class Config extends TableView {
     return data;
   }
 
-  saveParam({ name, value, type, masterKeyOnly }) {
+  async saveParam({ name, value, type, masterKeyOnly, override }) {
+    const cachedParams = this.cacheData.get('params');
+    const cachedValue = cachedParams.get(name);
+
+    await this.props.config.dispatch(ActionTypes.FETCH);
+    const fetchedParams = this.props.config.data.get('params');
+
+    if (cachedValue !== fetchedParams.get(name) && !override) {
+      this.setState({
+        confirmModalOpen: true,
+        modalOpen: false,
+      });
+      this.confirmData = {
+        name,
+        value,
+        type,
+        masterKeyOnly,
+      };
+      return;
+    }
+
     this.props.config
       .dispatch(ActionTypes.SET, {
         param: name,