SONAR-23931 Fix Quality Gate mode banner title

2 files changed, 11 insertions, 5 deletions

diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/UpdateConditionsFromOtherModeBanner.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/UpdateConditionsFromOtherModeBanner.tsx
index f5fa8af8582..c6e86cb5e1d 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/UpdateConditionsFromOtherModeBanner.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/UpdateConditionsFromOtherModeBanner.tsx
@@ -18,9 +18,9 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
-import { Button, ButtonVariety, IconRefresh } from '@sonarsource/echoes-react';
+import { Button, ButtonVariety, Heading, IconRefresh } from '@sonarsource/echoes-react';
 import { FormattedMessage, useIntl } from 'react-intl';
-import { CardWithPrimaryBackground, SubHeadingHighlight } from '~design-system';
+import { CardWithPrimaryBackground } from '~design-system';
 import DocumentationLink from '../../../components/common/DocumentationLink';
 import { DocLink } from '../../../helpers/doc-links';
 import { useStandardExperienceModeQuery } from '../../../queries/mode';
@@ -38,16 +38,16 @@ export default function UpdateConditionsFromOtherModeBanner(props: Readonly<Prop
   const intl = useIntl();
   return (
     <CardWithPrimaryBackground className="sw-mt-9 sw-p-8">
-      <SubHeadingHighlight className="sw-mb-2">
+      <Heading as="h3" className="sw-mb-2 sw-max-w-full">
         {intl.formatMessage(
           { id: 'quality_gates.mode_banner.title' },
           {
             mode: intl.formatMessage({
-              id: `settings.mode.${isStandard ? 'standard' : 'mqr'}.name`,
+              id: `settings.mode.${isStandard ? 'mqr' : 'standard'}.name`, // Inverted to show the other mode
             }),
           },
         )}
-      </SubHeadingHighlight>
+      </Heading>
       <div>
         <FormattedMessage
           id="quality_gates.mode_banner.description"
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/QualityGate-it.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/QualityGate-it.tsx
index 6ec9bde533a..9bd087bf545 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/QualityGate-it.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/QualityGate-it.tsx
@@ -1017,6 +1017,9 @@ describe('Mode transition', () => {
       ).toBeInTheDocument();
       await user.click(ui.qualityGateListItem('SonarSource way default').get());
       expect(byText('quality_gates.cayc.banner.title').query()).not.toBeInTheDocument();
+      expect(
+        byText('quality_gates.mode_banner.title.settings.mode.standard.name').get(),
+      ).toBeInTheDocument();
       expect(ui.batchUpdate.get()).toBeInTheDocument();
       expect(ui.singleUpdate.getAll()).toHaveLength(5);
       expect(ui.standardBadge.getAll()).toHaveLength(5);
@@ -1126,6 +1129,9 @@ describe('Mode transition', () => {
         ui.qualityGateListItem('QG with MQR conditions').by(ui.requiresUpdateIndicator).get(),
       ).toBeInTheDocument();
       await user.click(ui.qualityGateListItem('QG with MQR conditions').get());
+      expect(
+        byText('quality_gates.mode_banner.title.settings.mode.mqr.name').get(),
+      ).toBeInTheDocument();
       expect(ui.batchUpdate.get()).toBeInTheDocument();
       expect(ui.singleUpdate.getAll()).toHaveLength(4);
       expect(ui.mqrBadge.getAll()).toHaveLength(4);