SONAR-20197 Add CCT to rule details view

5 files changed, 72 insertions, 77 deletions

diff --git a/server/sonar-web/src/main/js/apps/coding-rules/__tests__/CodingRules-it.ts b/server/sonar-web/src/main/js/apps/coding-rules/__tests__/CodingRules-it.ts
index 1ec9fd4567d..4134304b6c6 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/__tests__/CodingRules-it.ts
+++ b/server/sonar-web/src/main/js/apps/coding-rules/__tests__/CodingRules-it.ts
@@ -24,7 +24,11 @@ import { RULE_TYPES } from '../../../helpers/constants';
 import { parseDate } from '../../../helpers/dates';
 import { mockCurrentUser, mockLoggedInUser } from '../../../helpers/testMocks';
 import { dateInputEvent, renderAppRoutes } from '../../../helpers/testReactTestingUtils';
-import { CleanCodeAttributeCategory, SoftwareQuality } from '../../../types/clean-code-taxonomy';
+import {
+  CleanCodeAttribute,
+  CleanCodeAttributeCategory,
+  SoftwareQuality,
+} from '../../../types/clean-code-taxonomy';
 import { CurrentUser } from '../../../types/users';
 import routes from '../routes';
 import { getPageObjects } from '../utils-tests';
@@ -360,6 +364,11 @@ describe('Rule app details', () => {
       renderCodingRulesApp(undefined, 'coding_rules?open=rule1');
       await ui.appLoaded();
       expect(ui.ruleTitle('Awsome java rule').get()).toBeInTheDocument();
+      expect(
+        ui.ruleCleanCodeAttributeCategory(CleanCodeAttributeCategory.Adaptable).get()
+      ).toBeInTheDocument();
+      expect(ui.ruleCleanCodeAttribute(CleanCodeAttribute.Clear).get()).toBeInTheDocument();
+      expect(ui.ruleSoftwareQuality(SoftwareQuality.Maintainability).get()).toBeInTheDocument();
       expect(document.title).toEqual('page_title.template.with_category.coding_rules.page');
       expect(screen.getByText('Why')).toBeInTheDocument();
       expect(screen.getByText('Because')).toBeInTheDocument();
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx
index 05ed99d1f50..e0a6f151548 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx
@@ -24,10 +24,10 @@ import Dropdown from '../../../components/controls/Dropdown';
 import HelpTooltip from '../../../components/controls/HelpTooltip';
 import Tooltip from '../../../components/controls/Tooltip';
 import { ButtonLink } from '../../../components/controls/buttons';
-import IssueTypeIcon from '../../../components/icons/IssueTypeIcon';
 import LinkIcon from '../../../components/icons/LinkIcon';
 import DateFormatter from '../../../components/intl/DateFormatter';
-import SeverityHelper from '../../../components/shared/SeverityHelper';
+import { CleanCodeAttributePill } from '../../../components/shared/CleanCodeAttributePill';
+import SoftwareImpactPill from '../../../components/shared/SoftwareImpactPill';
 import TagsList from '../../../components/tags/TagsList';
 import { PopupPlacement } from '../../../components/ui/popups';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
@@ -45,29 +45,6 @@ interface Props {
 const EXTERNAL_RULE_REPO_PREFIX = 'external_';
 
 export default class RuleDetailsMeta extends React.PureComponent<Props> {
-  renderType = () => {
-    const { ruleDetails } = this.props;
-    return (
-      <Tooltip overlay={translate('coding_rules.type.tooltip', ruleDetails.type)}>
-        <li className="coding-rules-detail-property" data-meta="type">
-          <IssueTypeIcon className="little-spacer-right" query={ruleDetails.type} />
-          {translate('issue.type', ruleDetails.type)}
-        </li>
-      </Tooltip>
-    );
-  };
-
-  renderSeverity = () => (
-    <Tooltip overlay={translate('default_severity')}>
-      <li className="coding-rules-detail-property" data-meta="severity">
-        <SeverityHelper
-          className="display-inline-flex-center"
-          severity={this.props.ruleDetails.severity}
-        />
-      </li>
-    </Tooltip>
-  );
-
   renderStatus = () => {
     const { ruleDetails } = this.props;
     if (ruleDetails.status === 'READY') {
@@ -224,6 +201,15 @@ export default class RuleDetailsMeta extends React.PureComponent<Props> {
     const hasTypeData = !ruleDetails.isExternal || ruleDetails.type !== 'UNKNOWN';
     return (
       <div className="js-rule-meta">
+        {ruleDetails.cleanCodeAttributeCategory !== undefined && (
+          <CleanCodeAttributePill
+            className="big-spacer-bottom"
+            cleanCodeAttributeCategory={ruleDetails.cleanCodeAttributeCategory}
+            cleanCodeAttribute={ruleDetails.cleanCodeAttribute}
+            type="rule"
+          />
+        )}
+
         <div className="page-header">
           <div className="pull-right">
             {this.renderKey()}
@@ -240,24 +226,42 @@ export default class RuleDetailsMeta extends React.PureComponent<Props> {
           <h1 className="page-title coding-rules-detail-header">{ruleDetails.name}</h1>
         </div>
 
-        {hasTypeData && (
-          <ul className="coding-rules-detail-properties">
-            {this.renderType()}
-            {this.renderSeverity()}
-            {!ruleDetails.isExternal && this.renderStatus()}
-            {this.renderTags()}
-            {!ruleDetails.isExternal && this.renderCreationDate()}
-            {this.renderRepository()}
-            {!ruleDetails.isExternal && (
-              <>
-                {this.renderTemplate()}
-                {this.renderParentTemplate()}
-                {this.renderRemediation()}
-              </>
-            )}
-            {ruleDetails.isExternal && this.renderExternalBadge()}
-          </ul>
-        )}
+        <div className="display-flex-center">
+          {ruleDetails.impacts !== undefined && (
+            <div className="sw-flex sw-items-center flex-1">
+              <span>{translate('issue.software_qualities.label')}</span>
+              <ul className="sw-flex sw-gap-2">
+                {ruleDetails.impacts.map(({ severity, softwareQuality }) => (
+                  <li key={softwareQuality}>
+                    <SoftwareImpactPill
+                      className="little-spacer-left"
+                      severity={severity}
+                      quality={softwareQuality}
+                      type="rule"
+                    />
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          {hasTypeData && (
+            <ul className="coding-rules-detail-properties">
+              {!ruleDetails.isExternal && this.renderStatus()}
+              {this.renderTags()}
+              {!ruleDetails.isExternal && this.renderCreationDate()}
+              {this.renderRepository()}
+              {!ruleDetails.isExternal && (
+                <>
+                  {this.renderTemplate()}
+                  {this.renderParentTemplate()}
+                  {this.renderRemediation()}
+                </>
+              )}
+              {ruleDetails.isExternal && this.renderExternalBadge()}
+            </ul>
+          )}
+        </div>
       </div>
     );
   }
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsProfiles.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsProfiles.tsx
index e2b7b9790cf..b5e37e7893f 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsProfiles.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsProfiles.tsx
@@ -24,8 +24,6 @@ import InstanceMessage from '../../../components/common/InstanceMessage';
 import Link from '../../../components/common/Link';
 import { Button } from '../../../components/controls/buttons';
 import ConfirmButton from '../../../components/controls/ConfirmButton';
-import Tooltip from '../../../components/controls/Tooltip';
-import SeverityHelper from '../../../components/shared/SeverityHelper';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { getQualityProfileUrl } from '../../../helpers/urls';
 import { Dict, RuleActivation, RuleDetails } from '../../../types/types';
@@ -82,21 +80,6 @@ export default class RuleDetailsProfiles extends React.PureComponent<Props> {
     );
   };
 
-  renderSeverity = (activation: RuleActivation, parentActivation?: RuleActivation) => (
-    <td className="coding-rules-detail-quality-profile-severity">
-      <Tooltip overlay={translate('coding_rules.activation_severity')}>
-        <span>
-          <SeverityHelper className="display-inline-flex-center" severity={activation.severity} />
-        </span>
-      </Tooltip>
-      {parentActivation !== undefined && activation.severity !== parentActivation.severity && (
-        <div className="coding-rules-detail-quality-profile-inheritance">
-          {translate('coding_rules.original')} {translate('severity', parentActivation.severity)}
-        </div>
-      )}
-    </td>
-  );
-
   renderParameter = (param: { key: string; value: string }, parentActivation?: RuleActivation) => {
     const originalParam =
       parentActivation && parentActivation.params.find((p) => p.key === param.key);
@@ -212,7 +195,6 @@ export default class RuleDetailsProfiles extends React.PureComponent<Props> {
           {this.renderInheritedProfile(activation, profile)}
         </td>
 
-        {this.renderSeverity(activation, parentActivation)}
         {!ruleDetails.templateKey && this.renderParameters(activation, parentActivation)}
         {this.renderActions(activation, profile)}
       </tr>
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/styles.css b/server/sonar-web/src/main/js/apps/coding-rules/styles.css
index 85c9abac74c..bb7548b2a16 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/styles.css
+++ b/server/sonar-web/src/main/js/apps/coding-rules/styles.css
@@ -100,7 +100,7 @@
 .coding-rules-detail-property {
   display: flex;
   align-items: center;
-  margin-right: calc(2 * var(--gridSize));
+  margin-right: var(--gridSize);
   margin-bottom: var(--gridSize);
   font-size: var(--smallFontSize);
 }
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 3ebfa7140a0..50d43f925e0 100644
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -2382,33 +2382,33 @@ rule.clean_code_attribute_category.RESPONSIBLE.title=This is a responsibility ru
 rule.clean_code_attribute_category.RESPONSIBLE.title_short=Responsibility rule
 
 rule.clean_code_attribute.CLEAR=Clear
-rule.clean_code_attribute.CLEAR.title=This is an intentionality rule, the code is not clear enough.
+rule.clean_code_attribute.CLEAR.title=This is an intentionality rule, the code should be clear.
 rule.clean_code_attribute.COMPLETE=Complete
-rule.clean_code_attribute.COMPLETE.title=This is a intentionality rule, the code is not complete enough.
+rule.clean_code_attribute.COMPLETE.title=This is a intentionality rule, the code should be complete.
 rule.clean_code_attribute.CONVENTIONAL=Conventional
-rule.clean_code_attribute.CONVENTIONAL.title=This is a consistency rule, the code is not conventional enough.
+rule.clean_code_attribute.CONVENTIONAL.title=This is a consistency rule, the code should be conventional.
 rule.clean_code_attribute.DISTINCT=Distinct
-rule.clean_code_attribute.DISTINCT.title=This is an adaptability rule, the code is not distinct enough.
+rule.clean_code_attribute.DISTINCT.title=This is an adaptability rule, the code should be distinct.
 rule.clean_code_attribute.EFFICIENT=Efficient
-rule.clean_code_attribute.EFFICIENT.title=This is an intentionality rule, the code is not efficient enough.
+rule.clean_code_attribute.EFFICIENT.title=This is an intentionality rule, the code should be efficient.
 rule.clean_code_attribute.FOCUSED=Focused
-rule.clean_code_attribute.FOCUSED.title=This is an adaptability rule, the code is not focused enough.
+rule.clean_code_attribute.FOCUSED.title=This is an adaptability rule, the code should be focused.
 rule.clean_code_attribute.FORMATTED=Formatted
-rule.clean_code_attribute.FORMATTED.title=This is a consistency rule, the code is not formatted enough.
+rule.clean_code_attribute.FORMATTED.title=This is a consistency rule, the code should be formatted.
 rule.clean_code_attribute.IDENTIFIABLE=Identifiable
-rule.clean_code_attribute.IDENTIFIABLE.title=This is a consistency rule, the code is not identifiable enough.
+rule.clean_code_attribute.IDENTIFIABLE.title=This is a consistency rule, the code should be identifiable.
 rule.clean_code_attribute.LAWFUL=Lawful
-rule.clean_code_attribute.LAWFUL.title=This is a responsibility rule, the code is not lawful enough.
+rule.clean_code_attribute.LAWFUL.title=This is a responsibility rule, the code should be lawful.
 rule.clean_code_attribute.LOGICAL=Logical
-rule.clean_code_attribute.LOGICAL.title=This is an intentionality rule, the code is not logical enough.
+rule.clean_code_attribute.LOGICAL.title=This is an intentionality rule, the code should be logical.
 rule.clean_code_attribute.MODULAR=Modular
-rule.clean_code_attribute.MODULAR.title=This is an adaptability rule, the code is not modular enough.
+rule.clean_code_attribute.MODULAR.title=This is an adaptability rule, the code should be modular.
 rule.clean_code_attribute.RESPECTFUL=Respectful
-rule.clean_code_attribute.RESPECTFUL.title=This is a responsibility rule, the code is not respectful enough.
+rule.clean_code_attribute.RESPECTFUL.title=This is a responsibility rule, the code should be respectful.
 rule.clean_code_attribute.TESTED=Tested
-rule.clean_code_attribute.TESTED.title=This is an adaptability rule, the code is not tested enough.
+rule.clean_code_attribute.TESTED.title=This is an adaptability rule, the code should be tested.
 rule.clean_code_attribute.TRUSTWORTHY=Trustworthy
-rule.clean_code_attribute.TRUSTWORTHY.title=This is a responsibility rule, the code is not trustworthy enough.
+rule.clean_code_attribute.TRUSTWORTHY.title=This is a responsibility rule, the code should be trustworthy.