SONAR-16538 Common component for issue message tags

2 files changed, 23 insertions, 49 deletions

diff --git a/server/sonar-web/src/main/js/apps/issues/__tests__/IssueApp-it.tsx b/server/sonar-web/src/main/js/apps/issues/__tests__/IssueApp-it.tsx
index 2746ea8e931..0d3a43a18b8 100644
--- a/server/sonar-web/src/main/js/apps/issues/__tests__/IssueApp-it.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/__tests__/IssueApp-it.tsx
@@ -446,6 +446,21 @@ it('should show code tabs when any secondary location is selected', async () =>
   ).toBeInTheDocument();
 });
 
+it('should show issue tags if applicable', async () => {
+  const user = userEvent.setup();
+  handler.setIsAdmin(true);
+  renderIssueApp();
+
+  // Select an issue with an advanced rule
+  await user.click(await screen.findByRole('region', { name: 'Issue with tags' }));
+
+  expect(
+    screen.getByRole('heading', {
+      name: 'Issue with tags sonar-lint-icon issue.resolution.badge.DEPRECATED'
+    })
+  ).toBeInTheDocument();
+});
+
 describe('redirects', () => {
   it('should work for hotspots', () => {
     renderProjectIssuesApp(`project/issues?types=${IssueType.SecurityHotspot}`);
diff --git a/server/sonar-web/src/main/js/apps/issues/components/IssueHeader.tsx b/server/sonar-web/src/main/js/apps/issues/components/IssueHeader.tsx
index 61eda47277e..630c044e89f 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/IssueHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/IssueHeader.tsx
@@ -18,20 +18,17 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 import { setIssueAssignee } from '../../../api/issues';
-import DocumentationTooltip from '../../../components/common/DocumentationTooltip';
-import Tooltip from '../../../components/controls/Tooltip';
 import LinkIcon from '../../../components/icons/LinkIcon';
-import SonarLintIcon from '../../../components/icons/SonarLintIcon';
 import { updateIssue } from '../../../components/issue/actions';
 import IssueActionsBar from '../../../components/issue/components/IssueActionsBar';
 import IssueChangelog from '../../../components/issue/components/IssueChangelog';
+import IssueMessageTags from '../../../components/issue/components/IssueMessageTags';
 import { getBranchLikeQuery } from '../../../helpers/branch-like';
 import { isInput, isShortcut } from '../../../helpers/keyboardEventHelpers';
 import { KeyboardKeys } from '../../../helpers/keycodes';
-import { translate, translateWithParameters } from '../../../helpers/l10n';
+import { translate } from '../../../helpers/l10n';
 import { getComponentIssuesUrl, getRuleUrl } from '../../../helpers/urls';
 import { BranchLike } from '../../../types/branch-like';
 import { RuleStatus } from '../../../types/rules';
@@ -132,56 +129,18 @@ export default class IssueHeader extends React.PureComponent<Props, State> {
       types: issue.type === 'SECURITY_HOTSPOT' ? issue.type : undefined
     });
     const ruleStatus = issue.ruleStatus as RuleStatus | undefined;
-    const ruleEngine = issue.externalRuleEngine;
     const { quickFixAvailable } = issue;
 
     return (
       <>
         <div className="display-flex-center display-flex-space-between big-padded-top">
           <h1 className="text-bold spacer-right">
-            {issue.message}
-            {quickFixAvailable && (
-              <Tooltip
-                overlay={
-                  <FormattedMessage
-                    id="issue.quick_fix_available_with_sonarlint"
-                    defaultMessage={translate('issue.quick_fix_available_with_sonarlint')}
-                    values={{
-                      link: (
-                        <a
-                          href="https://www.sonarqube.org/sonarlint/?referrer=sonarqube-quick-fix"
-                          rel="noopener noreferrer"
-                          target="_blank">
-                          SonarLint
-                        </a>
-                      )
-                    }}
-                  />
-                }
-                mouseLeaveDelay={0.5}>
-                <SonarLintIcon className="it__issues-sonarlint-quick-fix spacer-left" size={20} />
-              </Tooltip>
-            )}
-            {(ruleStatus === RuleStatus.Deprecated || ruleStatus === RuleStatus.Removed) && (
-              <DocumentationTooltip
-                content={translate('rules.status', ruleStatus, 'help')}
-                links={[
-                  {
-                    href: '/documentation/user-guide/rules/',
-                    label: translateWithParameters('see_x', translate('rules'))
-                  }
-                ]}>
-                <span className="badge spacer-left badge-error">
-                  {translate('issue.resolution.badge', ruleStatus)}
-                </span>
-              </DocumentationTooltip>
-            )}
-            {ruleEngine && (
-              <Tooltip
-                overlay={translateWithParameters('issue.from_external_rule_engine', ruleEngine)}>
-                <div className="badge spacer-left text-baseline">{ruleEngine}</div>
-              </Tooltip>
-            )}
+            <span className="spacer-right">{issue.message}</span>
+            <IssueMessageTags
+              engine={issue.externalRuleEngine}
+              quickFixAvailable={quickFixAvailable}
+              ruleStatus={ruleStatus}
+            />
           </h1>
           <div className="issue-meta issue-get-perma-link">
             <Link