1 files changed, 116 insertions, 153 deletions

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 41bcdfc6558..2d9f5ce3ee6 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
@@ -17,7 +17,6 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import classNames from 'classnames';
 import {
   ActionCell,
   ContentCell,
@@ -32,185 +31,149 @@ import {
   TrashIcon,
 } from 'design-system';
 import * as React from 'react';
-import { deleteCondition } from '../../../api/quality-gates';
-import withMetricsContext from '../../../app/components/metrics/withMetricsContext';
+import { useMetrics } from '../../../app/components/metrics/withMetricsContext';
 import { getLocalizedMetricName, translate, translateWithParameters } from '../../../helpers/l10n';
-import {
-  CaycStatus,
-  Condition as ConditionType,
-  Dict,
-  Metric,
-  QualityGate,
-} from '../../../types/types';
+import { useDeleteConditionMutation } from '../../../queries/quality-gates';
+import { MetricType } from '../../../types/metrics';
+import { CaycStatus, Condition as ConditionType, Metric, QualityGate } from '../../../types/types';
 import { getLocalizedMetricNameNoDiffMetric, isConditionWithFixedValue } from '../utils';
 import ConditionModal from './ConditionModal';
 import ConditionValue from './ConditionValue';
 
+export enum ConditionChange {
+  Added = 'added',
+  Updated = 'updated',
+  Deleted = 'deleted',
+}
+
 interface Props {
   condition: ConditionType;
   canEdit: boolean;
   metric: Metric;
-  onRemoveCondition: (Condition: ConditionType) => void;
-  onSaveCondition: (newCondition: ConditionType, oldCondition: ConditionType) => void;
   qualityGate: QualityGate;
-  updated?: boolean;
-  metrics: Dict<Metric>;
   showEdit?: boolean;
   isCaycModal?: boolean;
 }
 
-interface State {
-  deleteFormOpen: boolean;
-  modal: boolean;
-}
-
-export class ConditionComponent extends React.PureComponent<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      deleteFormOpen: false,
-      modal: false,
-    };
-  }
-
-  handleUpdateCondition = (newCondition: ConditionType) => {
-    this.props.onSaveCondition(newCondition, this.props.condition);
-  };
-
-  handleOpenUpdate = () => {
-    this.setState({ modal: true });
-  };
-
-  handleUpdateClose = () => {
-    this.setState({ modal: false });
+export default function ConditionComponent({
+  condition,
+  canEdit,
+  metric,
+  qualityGate,
+  showEdit,
+  isCaycModal,
+}: Readonly<Props>) {
+  const [deleteFormOpen, setDeleteFormOpen] = React.useState(false);
+  const [modal, setModal] = React.useState(false);
+  const { mutateAsync: deleteCondition } = useDeleteConditionMutation(qualityGate.name);
+  const metrics = useMetrics();
+
+  const handleOpenUpdate = () => {
+    setModal(true);
   };
 
-  handleDeleteClick = () => {
-    this.setState({ deleteFormOpen: true });
+  const handleUpdateClose = () => {
+    setModal(false);
   };
 
-  closeDeleteForm = () => {
-    this.setState({ deleteFormOpen: false });
+  const handleDeleteClick = () => {
+    setDeleteFormOpen(true);
   };
 
-  removeCondition = (condition: ConditionType) => {
-    deleteCondition({ id: condition.id }).then(
-      () => this.props.onRemoveCondition(condition),
-      () => {},
-    );
+  const closeDeleteForm = () => {
+    setDeleteFormOpen(false);
   };
 
-  renderOperator() {
-    // TODO can operator be missing?
-    const { op = 'GT' } = this.props.condition;
-    return this.props.metric.type === 'RATING'
+  const renderOperator = () => {
+    const { op = 'GT' } = condition;
+    return metric.type === MetricType.Rating
       ? translate('quality_gates.operator', op, 'rating')
       : translate('quality_gates.operator', op);
-  }
-
-  render() {
-    const {
-      condition,
-      canEdit,
-      metric,
-      qualityGate,
-      updated,
-      metrics,
-      showEdit = true,
-      isCaycModal = false,
-    } = this.props;
-
-    const isCaycCompliantAndOverCompliant = qualityGate.caycStatus !== CaycStatus.NonCompliant;
-
-    return (
-      <TableRow className={classNames({ highlighted: updated })}>
-        <ContentCell>
-          {getLocalizedMetricNameNoDiffMetric(metric, metrics)}
-          {metric.hidden && <TextError className="sw-ml-1" text={translate('deprecated')} />}
-        </ContentCell>
-
-        <ContentCell className="sw-whitespace-nowrap">{this.renderOperator()}</ContentCell>
+  };
 
-        <NumericalCell className="sw-whitespace-nowrap">
-          <ConditionValue
-            metric={metric}
-            isCaycModal={isCaycModal}
-            condition={condition}
-            isCaycCompliantAndOverCompliant={isCaycCompliantAndOverCompliant}
-          />
-        </NumericalCell>
-        <ActionCell>
-          {!isCaycModal && canEdit && (
-            <>
-              {(!isCaycCompliantAndOverCompliant ||
-                !isConditionWithFixedValue(condition) ||
-                (isCaycCompliantAndOverCompliant && showEdit)) && (
-                <>
-                  <InteractiveIcon
-                    Icon={PencilIcon}
-                    aria-label={translateWithParameters(
-                      'quality_gates.condition.edit',
-                      metric.name,
-                    )}
-                    data-test="quality-gates__condition-update"
-                    onClick={this.handleOpenUpdate}
-                    className="sw-mr-4"
-                    size="small"
+  const isCaycCompliantAndOverCompliant = qualityGate.caycStatus !== CaycStatus.NonCompliant;
+
+  return (
+    <TableRow>
+      <ContentCell>
+        {getLocalizedMetricNameNoDiffMetric(metric, metrics)}
+        {metric.hidden && <TextError className="sw-ml-1" text={translate('deprecated')} />}
+      </ContentCell>
+
+      <ContentCell className="sw-whitespace-nowrap">{renderOperator()}</ContentCell>
+
+      <NumericalCell className="sw-whitespace-nowrap">
+        <ConditionValue
+          metric={metric}
+          isCaycModal={isCaycModal}
+          condition={condition}
+          isCaycCompliantAndOverCompliant={isCaycCompliantAndOverCompliant}
+        />
+      </NumericalCell>
+      <ActionCell>
+        {!isCaycModal && canEdit && (
+          <>
+            {(!isCaycCompliantAndOverCompliant ||
+              !isConditionWithFixedValue(condition) ||
+              (isCaycCompliantAndOverCompliant && showEdit)) && (
+              <>
+                <InteractiveIcon
+                  Icon={PencilIcon}
+                  aria-label={translateWithParameters('quality_gates.condition.edit', metric.name)}
+                  data-test="quality-gates__condition-update"
+                  onClick={handleOpenUpdate}
+                  className="sw-mr-4"
+                  size="small"
+                />
+                {modal && (
+                  <ConditionModal
+                    condition={condition}
+                    header={translate('quality_gates.update_condition')}
+                    metric={metric}
+                    onClose={handleUpdateClose}
+                    qualityGate={qualityGate}
                   />
-                  {this.state.modal && (
-                    <ConditionModal
-                      condition={condition}
-                      header={translate('quality_gates.update_condition')}
-                      metric={metric}
-                      onAddCondition={this.handleUpdateCondition}
-                      onClose={this.handleUpdateClose}
-                      qualityGate={qualityGate}
-                    />
+                )}
+              </>
+            )}
+            {(!isCaycCompliantAndOverCompliant ||
+              !condition.isCaycCondition ||
+              (isCaycCompliantAndOverCompliant && showEdit)) && (
+              <>
+                <DestructiveIcon
+                  Icon={TrashIcon}
+                  aria-label={translateWithParameters(
+                    'quality_gates.condition.delete',
+                    metric.name,
                   )}
-                </>
-              )}
-              {(!isCaycCompliantAndOverCompliant ||
-                !condition.isCaycCondition ||
-                (isCaycCompliantAndOverCompliant && showEdit)) && (
-                <>
-                  <DestructiveIcon
-                    Icon={TrashIcon}
-                    aria-label={translateWithParameters(
-                      'quality_gates.condition.delete',
-                      metric.name,
+                  onClick={handleDeleteClick}
+                  size="small"
+                />
+                {deleteFormOpen && (
+                  <Modal
+                    headerTitle={translate('quality_gates.delete_condition')}
+                    onClose={closeDeleteForm}
+                    body={translateWithParameters(
+                      'quality_gates.delete_condition.confirm.message',
+                      getLocalizedMetricName(metric),
                     )}
-                    data-test="quality-gates__condition-delete"
-                    onClick={this.handleDeleteClick}
-                    size="small"
+                    primaryButton={
+                      <DangerButtonPrimary
+                        autoFocus
+                        type="submit"
+                        onClick={() => deleteCondition(condition)}
+                      >
+                        {translate('delete')}
+                      </DangerButtonPrimary>
+                    }
+                    secondaryButtonLabel={translate('close')}
                   />
-                  {this.state.deleteFormOpen && (
-                    <Modal
-                      headerTitle={translate('quality_gates.delete_condition')}
-                      onClose={this.closeDeleteForm}
-                      body={translateWithParameters(
-                        'quality_gates.delete_condition.confirm.message',
-                        getLocalizedMetricName(this.props.metric),
-                      )}
-                      primaryButton={
-                        <DangerButtonPrimary
-                          autoFocus
-                          type="submit"
-                          onClick={() => this.removeCondition(condition)}
-                        >
-                          {translate('delete')}
-                        </DangerButtonPrimary>
-                      }
-                      secondaryButtonLabel={translate('close')}
-                    />
-                  )}
-                </>
-              )}
-            </>
-          )}
-        </ActionCell>
-      </TableRow>
-    );
-  }
+                )}
+              </>
+            )}
+          </>
+        )}
+      </ActionCell>
+    </TableRow>
+  );
 }
-
-export default withMetricsContext(ConditionComponent);