SONAR-8689 Add confirm dialog before reseting a setting in the administration

1 files changed, 59 insertions, 7 deletions

diff --git a/server/sonar-web/src/main/js/apps/settings/components/DefinitionDefaults.js b/server/sonar-web/src/main/js/apps/settings/components/DefinitionDefaults.js
index 6fc6808bdb6..8c2061a9b7c 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/DefinitionDefaults.js
+++ b/server/sonar-web/src/main/js/apps/settings/components/DefinitionDefaults.js
@@ -19,21 +19,72 @@
  */
 // @flow
 import React from 'react';
-import PropTypes from 'prop-types';
+import Modal from 'react-modal';
 import { getSettingValue, isEmptyValue, getDefaultValue } from '../utils';
 import { translate } from '../../../helpers/l10n';
 
+/*::
+type Props = {
+  isDefault: boolean,
+  onReset: () => void,
+  setting: Object
+};
+*/
+/*::
+type State = { reseting: boolean };
+*/
+
 export default class DefinitionDefaults extends React.PureComponent {
-  static propTypes = {
-    setting: PropTypes.object.isRequired,
-    isDefault: PropTypes.bool.isRequired,
-    onReset: PropTypes.func.isRequired
+  /*:: props: Props; */
+  state /*: State*/ = { reseting: false };
+
+  handleClose = () => {
+    this.setState({ reseting: false });
   };
 
-  handleReset(e /*: Object */) {
+  handleReset = (e /*: Event & {target: HTMLElement} */) => {
     e.preventDefault();
     e.target.blur();
+    this.setState({ reseting: true });
+  };
+
+  handleSubmit = (event /*: Event */) => {
+    event.preventDefault();
     this.props.onReset();
+    this.handleClose();
+  };
+
+  renderModal() {
+    const header = translate('settings.reset_confirm.title');
+    return (
+      <Modal
+        isOpen={true}
+        contentLabel={header}
+        className="modal"
+        overlayClassName="modal-overlay"
+        onRequestClose={this.handleClose}>
+        <header className="modal-head">
+          <h2>
+            {header}
+          </h2>
+        </header>
+        <form onSubmit={this.handleSubmit}>
+          <div className="modal-body">
+            <p>
+              {translate('settings.reset_confirm.description')}
+            </p>
+          </div>
+          <footer className="modal-foot">
+            <button className="button-red">
+              {translate('reset_verb')}
+            </button>
+            <button type="reset" className="button-link" onClick={this.handleClose}>
+              {translate('cancel')}
+            </button>
+          </footer>
+        </form>
+      </Modal>
+    );
   }
 
   render() {
@@ -51,7 +102,7 @@ export default class DefinitionDefaults extends React.PureComponent {
 
         {isExplicitlySet &&
           <div className="spacer-top nowrap">
-            <button onClick={e => this.handleReset(e)}>
+            <button onClick={this.handleReset}>
               {translate('reset_verb')}
             </button>
             <span className="spacer-left note">
@@ -60,6 +111,7 @@ export default class DefinitionDefaults extends React.PureComponent {
               {getDefaultValue(setting)}
             </span>
           </div>}
+        {this.state.reseting && this.renderModal()}
       </div>
     );
   }