SONAR-20366 Migrate quality profile individual QP page to new UI

1 files changed, 15 insertions, 10 deletions

diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRulesSonarWayComparison.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRulesSonarWayComparison.tsx
index ade00d68673..279a43620a7 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRulesSonarWayComparison.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRulesSonarWayComparison.tsx
@@ -17,8 +17,9 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { FlagMessage, Link } from 'design-system';
 import * as React from 'react';
-import Link from '../../../components/common/Link';
+import { FormattedMessage } from 'react-intl';
 import HelpTooltip from '../../../components/controls/HelpTooltip';
 import { translate } from '../../../helpers/l10n';
 import { getRulesUrl } from '../../../helpers/urls';
@@ -39,17 +40,21 @@ export default function ProfileRulesSonarWayComparison(props: Props) {
   });
 
   return (
-    <div className="quality-profile-rules-sonarway-missing clearfix">
-      <span className="pull-left">
-        <span className="text-middle">{translate('quality_profiles.sonarway_missing_rules')}</span>
+    <FlagMessage variant="warning">
+      <div className="sw-flex sw-items-center sw-gap-1">
+        <FormattedMessage
+          defaultMessage={translate('quality_profiles.x_sonarway_missing_rules')}
+          id="quality_profiles.x_sonarway_missing_rules"
+          values={{
+            count: props.sonarWayMissingRules,
+            linkCount: <Link to={url}>{props.sonarWayMissingRules}</Link>,
+          }}
+        />
         <HelpTooltip
-          className="spacer-left"
+          className="sw-ml-2"
           overlay={translate('quality_profiles.sonarway_missing_rules_description')}
         />
-      </span>
-      <Link className="pull-right" data-test="rules" to={url}>
-        {props.sonarWayMissingRules}
-      </Link>
-    </div>
+      </div>
+    </FlagMessage>
   );
 }