Fix after review

4 files changed, 132 insertions, 77 deletions

diff --git a/server/sonar-web/src/main/js/app/styles/components/modals.css b/server/sonar-web/src/main/js/app/styles/components/modals.css
index f8416e932de..84cf5bb0230 100644
--- a/server/sonar-web/src/main/js/app/styles/components/modals.css
+++ b/server/sonar-web/src/main/js/app/styles/components/modals.css
@@ -177,6 +177,7 @@ ul.modal-head-metadata li {
   line-height: 1;
 }
 
+.modal-field a.icon-checkbox,
 .modal-field input,
 .modal-large-field input,
 .modal-field select,
@@ -189,6 +190,10 @@ ul.modal-head-metadata li {
   margin-bottom: 10px;
 }
 
+.modal-field a.icon-checkbox {
+  height: 24px;
+}
+
 .modal-field input[type='radio'],
 .modal-large-field input[type='radio'],
 .modal-field input[type='checkbox'],
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/Condition.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/Condition.tsx
index 7525fd4a9c3..fd05fb82324 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/Condition.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/Condition.tsx
@@ -21,7 +21,7 @@ import * as React from 'react';
 import ConditionOperator from './ConditionOperator';
 import Period from './Period';
 import ConditionModal from './ConditionModal';
-import DeleteConditionForm from './DeleteConditionForm';
+import DeleteConditionModalForm from './DeleteConditionModalForm';
 import { Condition as ICondition, Metric, QualityGate } from '../../../app/types';
 import ActionsDropdown, { ActionsDropdownItem } from '../../../components/controls/ActionsDropdown';
 import { translate, getLocalizedMetricName } from '../../../helpers/l10n';
@@ -38,6 +38,7 @@ interface Props {
 }
 
 interface State {
+  deleteFormOpen: boolean;
   error: string;
   modal: boolean;
   op?: string;
@@ -49,11 +50,12 @@ export default class Condition extends React.PureComponent<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
-      period: props.condition.period,
+      deleteFormOpen: false,
+      error: props.condition.error || '',
       modal: false,
       op: props.condition.op,
-      warning: props.condition.warning || '',
-      error: props.condition.error || ''
+      period: props.condition.period,
+      warning: props.condition.warning || ''
     };
   }
 
@@ -69,6 +71,10 @@ export default class Condition extends React.PureComponent<Props, State> {
 
   handleUpdateClose = () => this.setState({ modal: false });
 
+  handleDeleteClick = () => this.setState({ deleteFormOpen: true });
+
+  closeDeleteForm = () => this.setState({ deleteFormOpen: false });
+
   render() {
     const { condition, canEdit, metric, organization, qualityGate } = this.props;
     return (
@@ -98,12 +104,12 @@ export default class Condition extends React.PureComponent<Props, State> {
               <ActionsDropdownItem className="js-condition-update" onClick={this.handleOpenUpdate}>
                 {translate('update_details')}
               </ActionsDropdownItem>
-              <DeleteConditionForm
-                condition={condition}
-                metric={metric}
-                onDelete={this.props.onRemoveCondition}
-                organization={organization}
-              />
+              <ActionsDropdownItem
+                destructive={true}
+                id="condition-delete"
+                onClick={this.handleDeleteClick}>
+                {translate('delete')}
+              </ActionsDropdownItem>
             </ActionsDropdown>
             {this.state.modal && (
               <ConditionModal
@@ -116,6 +122,15 @@ export default class Condition extends React.PureComponent<Props, State> {
                 qualityGate={qualityGate}
               />
             )}
+            {this.state.deleteFormOpen && (
+              <DeleteConditionModalForm
+                condition={condition}
+                metric={metric}
+                onClose={this.closeDeleteForm}
+                onDelete={this.props.onRemoveCondition}
+                organization={organization}
+              />
+            )}
           </td>
         )}
       </tr>
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/DeleteConditionForm.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/DeleteConditionForm.tsx
deleted file mode 100644
index 101d06cfc89..00000000000
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/DeleteConditionForm.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2018 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 * as React from 'react';
-import { deleteCondition } from '../../../api/quality-gates';
-import { Metric, Condition } from '../../../app/types';
-import ConfirmButton from '../../../components/controls/ConfirmButton';
-import { ActionsDropdownItem } from '../../../components/controls/ActionsDropdown';
-import { getLocalizedMetricName, translate, translateWithParameters } from '../../../helpers/l10n';
-
-interface Props {
-  condition: Condition;
-  metric: Metric;
-  onDelete: (condition: Condition) => void;
-  organization?: string;
-}
-
-export default class DeleteConditionForm extends React.PureComponent<Props> {
-  onDelete = () => {
-    const { organization, condition } = this.props;
-    if (condition.id !== undefined) {
-      return deleteCondition({ id: condition.id, organization }).then(() =>
-        this.props.onDelete(condition)
-      );
-    }
-    return undefined;
-  };
-
-  render() {
-    return (
-      <ConfirmButton
-        confirmButtonText={translate('delete')}
-        isDestructive={true}
-        modalBody={translateWithParameters(
-          'quality_gates.delete_condition.confirm.message',
-          getLocalizedMetricName(this.props.metric)
-        )}
-        modalHeader={translate('quality_gates.delete_condition')}
-        onConfirm={this.onDelete}>
-        {({ onClick }) => (
-          <ActionsDropdownItem
-            className="js-condition-deactivate"
-            destructive={true}
-            onClick={onClick}>
-            {translate('delete')}
-          </ActionsDropdownItem>
-        )}
-      </ConfirmButton>
-    );
-  }
-}
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/DeleteConditionModalForm.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/DeleteConditionModalForm.tsx
new file mode 100644
index 00000000000..0477d1d6420
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/DeleteConditionModalForm.tsx
@@ -0,0 +1,102 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2018 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 * as React from 'react';
+import Modal from '../../../components/controls/Modal';
+import { SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
+import { translate, translateWithParameters, getLocalizedMetricName } from '../../../helpers/l10n';
+import { Condition, Metric } from '../../../app/types';
+import { deleteCondition } from '../../../api/quality-gates';
+
+interface Props {
+  onClose: () => void;
+  condition: Condition;
+  metric: Metric;
+  onDelete: (condition: Condition) => void;
+  organization?: string;
+}
+
+interface State {
+  loading: boolean;
+  name: string | null;
+}
+
+export default class DeleteConditionModalForm extends React.PureComponent<Props, State> {
+  mounted = false;
+  state: State = { loading: false, name: null };
+
+  componentDidMount() {
+    this.mounted = true;
+  }
+
+  componentWillUnmount() {
+    this.mounted = false;
+  }
+
+  handleFormSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    this.setState({ loading: true });
+    const { organization, condition } = this.props;
+    if (condition.id !== undefined) {
+      deleteCondition({ id: condition.id, organization }).then(
+        () => this.props.onDelete(condition),
+        () => {
+          if (this.mounted) {
+            this.setState({ loading: false });
+          }
+        }
+      );
+    }
+  };
+
+  render() {
+    const header = translate('quality_gates.delete_condition');
+
+    return (
+      <Modal contentLabel={header} onRequestClose={this.props.onClose}>
+        <form id="delete-condition-form" onSubmit={this.handleFormSubmit}>
+          <div className="modal-head">
+            <h2>{header}</h2>
+          </div>
+          <div className="modal-body">
+            <div className="js-modal-messages" />
+            <p>
+              {translateWithParameters(
+                'quality_gates.delete_condition.confirm.message',
+                getLocalizedMetricName(this.props.metric)
+              )}
+            </p>
+          </div>
+          <div className="modal-foot">
+            {this.state.loading && <i className="spinner spacer-right" />}
+            <SubmitButton
+              className="button-red"
+              disabled={this.state.loading}
+              id="delete-profile-submit">
+              {translate('delete')}
+            </SubmitButton>
+            <ResetButtonLink id="delete-profile-cancel" onClick={this.props.onClose}>
+              {translate('cancel')}
+            </ResetButtonLink>
+          </div>
+        </form>
+      </Modal>
+    );
+  }
+}