rework some modals (#2113)

3 files changed, 79 insertions, 74 deletions

diff --git a/server/sonar-web/src/main/js/apps/project-admin/deletion/ConfirmationModal.js b/server/sonar-web/src/main/js/apps/project-admin/deletion/ConfirmationModal.js
deleted file mode 100644
index 273850ea38b..00000000000
--- a/server/sonar-web/src/main/js/apps/project-admin/deletion/ConfirmationModal.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2017 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import ModalForm from '../../../components/common/modal-form';
-import Template from './ConfirmationModalTemplate.hbs';
-import { deleteProject } from '../../../api/components';
-
-export default ModalForm.extend({
-  template: Template,
-
-  onFormSubmit() {
-    ModalForm.prototype.onFormSubmit.apply(this, arguments);
-    this.disableForm();
-    this.showSpinner();
-
-    deleteProject(this.options.project.key)
-      .then(() => {
-        this.trigger('done');
-      })
-      .catch(function(e) {
-        e.response.json().then(r => {
-          this.hideSpinner();
-          this.showErrors(r.errors, r.warnings);
-          this.enableForm();
-        });
-      });
-  },
-
-  serializeData() {
-    return { project: this.options.project };
-  }
-});
diff --git a/server/sonar-web/src/main/js/apps/project-admin/deletion/ConfirmationModalTemplate.hbs b/server/sonar-web/src/main/js/apps/project-admin/deletion/ConfirmationModalTemplate.hbs
deleted file mode 100644
index 749e408d5bc..00000000000
--- a/server/sonar-web/src/main/js/apps/project-admin/deletion/ConfirmationModalTemplate.hbs
+++ /dev/null
@@ -1,14 +0,0 @@
-<form id="deactivate-user-form" autocomplete="off">
-  <div class="modal-head">
-    <h2>{{t 'qualifiers.delete.TRK'}}</h2>
-  </div>
-  <div class="modal-body">
-    <div class="js-modal-messages"></div>
-    {{tp 'project_deletion.delete_resource_confirmation' project.name}}
-  </div>
-  <div class="modal-foot">
-    <i class="js-modal-spinner spinner spacer-right hidden"></i>
-    <button id="delete-project-confirm" class="button-red">{{t 'delete'}}</button>
-    <a href="#" class="js-modal-close">{{t 'cancel'}}</a>
-  </div>
-</form>
diff --git a/server/sonar-web/src/main/js/apps/project-admin/deletion/Form.js b/server/sonar-web/src/main/js/apps/project-admin/deletion/Form.js
index 1a848accaee..ac8ca55598b 100644
--- a/server/sonar-web/src/main/js/apps/project-admin/deletion/Form.js
+++ b/server/sonar-web/src/main/js/apps/project-admin/deletion/Form.js
@@ -18,30 +18,97 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
-import ConfirmationModal from './ConfirmationModal';
-import { translate } from '../../../helpers/l10n';
+import Modal from 'react-modal';
+import { deleteProject } from '../../../api/components';
+import { translate, translateWithParameters } from '../../../helpers/l10n';
 
 export default class Form extends React.PureComponent {
   static propTypes = {
     component: React.PropTypes.object.isRequired
   };
 
-  handleDelete(e) {
-    e.preventDefault();
-    new ConfirmationModal({ project: this.props.component })
-      .on('done', () => {
-        window.location = window.baseUrl + '/';
-      })
-      .render();
+  static contextTypes = {
+    router: React.PropTypes.object
+  };
+
+  state = { loading: false, modalOpen: false };
+
+  componentDidMount() {
+    this.mounted = true;
+  }
+
+  componentWillUnmount() {
+    this.mounted = false;
   }
 
+  handleDeleteClick = event => {
+    event.preventDefault();
+    this.setState({ modalOpen: true });
+  };
+
+  closeModal = () => this.setState({ modalOpen: false });
+
+  stopLoading = () => {
+    if (this.mounted) {
+      this.setState({ loading: false });
+    }
+  };
+
+  handleSubmit = event => {
+    event.preventDefault();
+    this.setState({ loading: true });
+    deleteProject(this.props.component.key)
+      .then(() => this.context.router.replace('/'))
+      .catch(this.stopLoading);
+  };
+
+  handleCloseClick = (event: Event) => {
+    event.preventDefault();
+    this.closeModal();
+  };
+
   render() {
+    const { component } = this.props;
+
     return (
-      <form onSubmit={this.handleDelete.bind(this)}>
-        <button id="delete-project" className="button-red">
+      <div>
+        <button id="delete-project" className="button-red" onClick={this.handleDeleteClick}>
           {translate('delete')}
         </button>
-      </form>
+
+        {this.state.modalOpen &&
+          <Modal
+            isOpen={true}
+            contentLabel="project deletion"
+            className="modal"
+            overlayClassName="modal-overlay"
+            onRequestClose={this.closeModal}>
+            <form onSubmit={this.handleSubmit}>
+              <div className="modal-head">
+                <h2>{translate('qualifiers.delete.TRK')}</h2>
+              </div>
+              <div className="modal-body">
+                <div className="js-modal-messages" />
+                {translateWithParameters(
+                  'project_deletion.delete_resource_confirmation',
+                  component.name
+                )}
+              </div>
+              <div className="modal-foot">
+                {this.state.loading && <i className="js-modal-spinner spinner spacer-right" />}
+                <button
+                  id="delete-project-confirm"
+                  className="button-red"
+                  disabled={this.state.loading}>
+                  {translate('delete')}
+                </button>
+                <a href="#" className="js-modal-close" onClick={this.handleCloseClick}>
+                  {translate('cancel')}
+                </a>
+              </div>
+            </form>
+          </Modal>}
+      </div>
     );
   }
 }