SONAR-16538 Moving sonarlint and badges in the issue header

4 files changed, 68 insertions, 9 deletions

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 355e5e5586e..d2a6c9709d0 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,18 +18,23 @@
  * 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 { deleteIssueComment, editIssueComment, 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 { getBranchLikeQuery } from '../../../helpers/branch-like';
 import { isInput, isShortcut } from '../../../helpers/keyboardEventHelpers';
 import { KeyboardKeys } from '../../../helpers/keycodes';
-import { translate } from '../../../helpers/l10n';
+import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { getComponentIssuesUrl, getRuleUrl } from '../../../helpers/urls';
 import { BranchLike } from '../../../types/branch-like';
+import { RuleStatus } from '../../../types/rules';
 import { Issue, RuleDetails } from '../../../types/types';
 
 interface Props {
@@ -122,10 +127,66 @@ export default class IssueHeader extends React.PureComponent<Props, State> {
       open: issue.key,
       types: issue.type === 'SECURITY_HOTSPOT' ? issue.type : undefined
     });
+    const ruleStatus = issue.ruleStatus as RuleStatus | undefined;
+    const ruleEngine = issue.externalRuleEngine;
+    const manualVulnerability = issue.fromHotspot && issue.type === 'VULNERABILITY';
+    const { quickFixAvailable } = issue;
+
     return (
       <>
         <div className="display-flex-center display-flex-space-between big-padded-top">
-          <h1 className="text-bold">{issue.message}</h1>
+          <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" size={20} />
+              </Tooltip>
+            )}
+          </h1>
+          {(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-right badge-error">
+                {translate('issue.resolution.badge', ruleStatus)}
+              </span>
+            </DocumentationTooltip>
+          )}
+          {ruleEngine && (
+            <Tooltip
+              overlay={translateWithParameters('issue.from_external_rule_engine', ruleEngine)}>
+              <div className="badge spacer-right text-baseline">{ruleEngine}</div>
+            </Tooltip>
+          )}
+          {manualVulnerability && (
+            <Tooltip overlay={translate('issue.manual_vulnerability.description')}>
+              <div className="badge spacer-right text-baseline">
+                {translate('issue.manual_vulnerability')}
+              </div>
+            </Tooltip>
+          )}
           <div className="issue-meta issue-get-perma-link">
             <Link
               className="js-issue-permalink link-no-underline"
diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueMessage.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueMessage.tsx
index 2778241253b..985b0a154f1 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueMessage.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueMessage.tsx
@@ -88,9 +88,7 @@ export default function IssueMessage(props: IssueMessageProps) {
               }
             ]}>
             <span className="spacer-right badge badge-error">
-              {ruleStatus === RuleStatus.Deprecated
-                ? translate('issue.resolution.DEPRECATED.rule_deprecated')
-                : translate('issue.resolution.REMOVED.rule_removed')}
+              {translate('issue.resolution.badge', ruleStatus)}
             </span>
           </DocumentationTooltip>
         )}
diff --git a/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueMessage-test.tsx.snap b/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueMessage-test.tsx.snap
index efae668c86c..824d917edb0 100644
--- a/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueMessage-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueMessage-test.tsx.snap
@@ -60,7 +60,7 @@ exports[`should render correctly: is deprecated rule 1`] = `
       <span
         className="spacer-right badge badge-error"
       >
-        issue.resolution.DEPRECATED.rule_deprecated
+        issue.resolution.badge.DEPRECATED
       </span>
     </DocumentationTooltip>
   </div>
@@ -129,7 +129,7 @@ exports[`should render correctly: is removed rule 1`] = `
       <span
         className="spacer-right badge badge-error"
       >
-        issue.resolution.REMOVED.rule_removed
+        issue.resolution.badge.REMOVED
       </span>
     </DocumentationTooltip>
   </div>
diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
index 308aad4f448..515cffc68d4 100644
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -900,8 +900,8 @@ issue.resolution.WONTFIX=Won't Fix
 issue.resolution.WONTFIX.description=Issues that are accepted in this context. They and their effort will be ignored.
 issue.resolution.REMOVED=Removed
 issue.resolution.REMOVED.description=Either the rule or the resource was changed (removed, relocated, parameters changed, etc.) so that analysis no longer finds these issues.
-issue.resolution.REMOVED.rule_removed=Rule removed
-issue.resolution.DEPRECATED.rule_deprecated=Rule deprecated
+issue.resolution.badge.REMOVED=Rule removed
+issue.resolution.badge.DEPRECATED=Rule deprecated
 issue.unresolved.description=Unresolved issues have not been addressed in any way.
 
 issue.action.permalink=Get permalink