From f50873318397d4bf7ba6a5c2b194dfa02492bdae Mon Sep 17 00:00:00 2001
From: 7PH <benjamin.raymond@sonarsource.com>
Date: Mon, 11 Dec 2023 14:20:35 +0100
Subject: [PATCH] SONAR-21210 Fix flaky can_modify_according_to_permissions BBT

---
 .../js/apps/quality-gates/components/Conditions.tsx    |  5 ++++-
 .../main/js/apps/quality-gates/components/Details.tsx  |  4 ++--
 .../apps/quality-gates/components/DetailsContent.tsx   |  7 ++++---
 server/sonar-web/src/main/js/queries/quality-gates.ts  | 10 +++++++++-
 4 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/Conditions.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/Conditions.tsx
index b814be6f7c2..b3c2233f268 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/Conditions.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/Conditions.tsx
@@ -27,6 +27,7 @@ import {
   LightPrimary,
   Link,
   Note,
+  Spinner,
   SubHeading,
 } from 'design-system';
 import { differenceWith, map, uniqBy } from 'lodash';
@@ -52,6 +53,7 @@ import ConditionsTable from './ConditionsTable';
 
 interface Props {
   qualityGate: QualityGate;
+  isFetching?: boolean;
 }
 
 const FORBIDDEN_METRIC_TYPES = ['DATA', 'DISTRIB', 'STRING', 'BOOL'];
@@ -62,7 +64,7 @@ const FORBIDDEN_METRICS: string[] = [
   MetricKey.new_security_hotspots,
 ];
 
-export default function Conditions({ qualityGate }: Readonly<Props>) {
+export default function Conditions({ qualityGate, isFetching }: Readonly<Props>) {
   const [editing, setEditing] = React.useState<boolean>(
     qualityGate.caycStatus === CaycStatus.NonCompliant,
   );
@@ -176,6 +178,7 @@ export default function Conditions({ qualityGate }: Readonly<Props>) {
               <HelperHintIcon />
             </DocumentationTooltip>
           )}
+          <Spinner loading={isFetching} className="it__spinner sw-ml-4 sw-mt-1" />
         </div>
         <div>
           {(qualityGate.caycStatus === CaycStatus.NonCompliant || editing) && canEdit && (
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/Details.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/Details.tsx
index e34dc06d2fc..df738b17f61 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/Details.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/Details.tsx
@@ -30,7 +30,7 @@ interface Props {
 }
 
 export default function Details({ qualityGateName }: Readonly<Props>) {
-  const { data: qualityGate, isLoading } = useQualityGateQuery(qualityGateName);
+  const { data: qualityGate, isLoading, isFetching } = useQualityGateQuery(qualityGateName);
 
   return (
     <main className="layout-page-main">
@@ -39,7 +39,7 @@ export default function Details({ qualityGateName }: Readonly<Props>) {
           <>
             <Helmet defer={false} title={qualityGate.name} />
             <DetailsHeader qualityGate={qualityGate} />
-            <DetailsContent qualityGate={qualityGate} />
+            <DetailsContent qualityGate={qualityGate} isFetching={isFetching} />
           </>
         )}
       </Spinner>
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsContent.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsContent.tsx
index ec87de8cf81..6d63dbfef7b 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsContent.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsContent.tsx
@@ -28,11 +28,12 @@ import QualityGatePermissions from './QualityGatePermissions';
 
 export interface DetailsContentProps {
   qualityGate: QualityGate;
+  isFetching?: boolean;
 }
 
 export function DetailsContent(props: DetailsContentProps) {
-  const { qualityGate } = props;
-  const actions = qualityGate.actions || {};
+  const { qualityGate, isFetching } = props;
+  const actions = qualityGate.actions ?? {};
 
   return (
     <div>
@@ -43,7 +44,7 @@ export function DetailsContent(props: DetailsContentProps) {
           </FlagMessage>
         )}
 
-      <Conditions qualityGate={qualityGate} />
+      <Conditions qualityGate={qualityGate} isFetching={isFetching} />
 
       <div className="sw-mt-10">
         <div className="sw-flex sw-flex-col">
diff --git a/server/sonar-web/src/main/js/queries/quality-gates.ts b/server/sonar-web/src/main/js/queries/quality-gates.ts
index 79fc0968b02..79e6fe47557 100644
--- a/server/sonar-web/src/main/js/queries/quality-gates.ts
+++ b/server/sonar-web/src/main/js/queries/quality-gates.ts
@@ -168,8 +168,16 @@ export function useCreateConditionMutation(gateName: string) {
     mutationFn: (condition: Omit<Condition, 'id'>) => {
       return createCondition({ ...condition, gateName });
     },
-    onSuccess: () => {
+    onSuccess: (_, condition) => {
       queryClient.invalidateQueries([QUALITY_GATES_KEY]);
+      queryClient.setQueryData([QUALITY_GATE_KEY, gateName], (oldData?: QualityGate) => {
+        return oldData?.conditions
+          ? {
+              ...oldData,
+              conditions: [...oldData.conditions, condition],
+            }
+          : undefined;
+      });
       queryClient.invalidateQueries([QUALITY_GATE_KEY, gateName]);
       addGlobalSuccessMessage(translate('quality_gates.condition_added'));
     },
-- 
2.39.5