SONAR-16519 Improve the rule page style

8 files changed, 32 insertions, 85 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 68cb3c1c87c..3665406e76d 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
@@ -67,9 +67,8 @@ it('should show open rule with default description section', async () => {
   expect(
     await screen.findByRole('heading', { level: 3, name: 'Awsome java rule' })
   ).toBeInTheDocument();
-  expect(
-    screen.getByRole('heading', { name: 'coding_rules.description_section.title.root_cause' })
-  ).toBeInTheDocument();
+  expect(screen.getByText('Why')).toBeInTheDocument();
+  expect(screen.getByText('Because')).toBeInTheDocument();
 });
 
 it('should show open rule with no description', async () => {
@@ -84,11 +83,7 @@ it('should show hotspot rule section', async () => {
   const user = userEvent.setup();
   renderCodingRulesApp(undefined, 'coding_rules?open=rule2');
   expect(await screen.findByRole('heading', { level: 3, name: 'Hot hotspot' })).toBeInTheDocument();
-  expect(
-    screen.getByRole('heading', {
-      name: 'coding_rules.description_section.title.introduction'
-    })
-  ).toBeInTheDocument();
+  expect(screen.getByText('Introduction to this rule')).toBeInTheDocument();
   expect(
     screen.getByRole('button', {
       name: 'coding_rules.description_section.title.root_cause.SECURITY_HOTSPOT'
@@ -119,11 +114,7 @@ it('should show rule advanced section', async () => {
   expect(
     await screen.findByRole('heading', { level: 3, name: 'Awsome Python rule' })
   ).toBeInTheDocument();
-  expect(
-    screen.getByRole('heading', {
-      name: 'coding_rules.description_section.title.introduction'
-    })
-  ).toBeInTheDocument();
+  expect(screen.getByText('Introduction to this rule')).toBeInTheDocument();
   expect(
     screen.getByRole('button', {
       name: 'coding_rules.description_section.title.how_to_fix'
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsCustomRules.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsCustomRules.tsx
index 1b4b1620538..4d0fbf62131 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsCustomRules.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsCustomRules.tsx
@@ -147,9 +147,7 @@ export default class RuleDetailsCustomRules extends React.PureComponent<Props, S
     return (
       <div className="js-rule-custom-rules coding-rule-section">
         <div className="coding-rules-detail-custom-rules-section">
-          <div className="coding-rule-section-separator" />
-
-          <h3 className="coding-rules-detail-title">{translate('coding_rules.custom_rules')}</h3>
+          <h2 className="coding-rules-detail-title">{translate('coding_rules.custom_rules')}</h2>
 
           {this.props.canChange && (
             <CustomRuleButton onDone={this.handleRuleCreate} templateRule={this.props.ruleDetails}>
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsDescription.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsDescription.tsx
index 0f0663a1b73..3ccee3eec6d 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsDescription.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsDescription.tsx
@@ -23,7 +23,7 @@ import FormattingTips from '../../../components/common/FormattingTips';
 import { Button, ResetButtonLink } from '../../../components/controls/buttons';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { sanitizeString } from '../../../helpers/sanitize';
-import { RuleDescriptionSection, RuleDescriptionSections, RuleDetails } from '../../../types/types';
+import { RuleDescriptionSections, RuleDetails } from '../../../types/types';
 import RemoveExtendedDescriptionModal from './RemoveExtendedDescriptionModal';
 import RuleTabViewer from './RuleTabViewer';
 
@@ -186,35 +186,6 @@ export default class RuleDetailsDescription extends React.PureComponent<Props, S
     </div>
   );
 
-  renderDescription = (section: RuleDescriptionSection) => {
-    if (section.key === RuleDescriptionSections.DEFAULT) {
-      return (
-        <section
-          className="coding-rules-detail-description markdown"
-          key={section.key}
-          /* eslint-disable-next-line react/no-danger */
-          dangerouslySetInnerHTML={{ __html: sanitizeString(section.content) }}
-        />
-      );
-    }
-
-    const { ruleDetails } = this.props;
-    const title =
-      section.key === RuleDescriptionSections.ROOT_CAUSE && ruleDetails.type === 'SECURITY_HOTSPOT'
-        ? translate('coding_rules.description_section.title', section.key, ruleDetails.type)
-        : translate('coding_rules.description_section.title', section.key);
-
-    return (
-      <section className="coding-rules-detail-description rule-desc" key={section.key}>
-        <h2>{title}</h2>
-        <div
-          /* eslint-disable-next-line react/no-danger */
-          dangerouslySetInnerHTML={{ __html: sanitizeString(section.content) }}
-        />
-      </section>
-    );
-  };
-
   render() {
     const { ruleDetails } = this.props;
     const hasDescription = !ruleDetails.isExternal || ruleDetails.type !== 'UNKNOWN';
@@ -234,15 +205,12 @@ export default class RuleDetailsDescription extends React.PureComponent<Props, S
     return (
       <div className="js-rule-description">
         {defaultSection && (
-          <>
-            <h2>{translate('coding_rules.description_section.title.root_cause')}</h2>
-            <section
-              className="coding-rules-detail-description markdown"
-              key={defaultSection.key}
-              /* eslint-disable-next-line react/no-danger */
-              dangerouslySetInnerHTML={{ __html: sanitizeString(defaultSection.content) }}
-            />
-          </>
+          <section
+            className="coding-rules-detail-description markdown"
+            key={defaultSection.key}
+            /* eslint-disable-next-line react/no-danger */
+            dangerouslySetInnerHTML={{ __html: sanitizeString(defaultSection.content) }}
+          />
         )}
 
         {hasDescriptionSection && !defaultSection ? (
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsIssues.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsIssues.tsx
index 5c282e3ee5f..1bdf3484a73 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsIssues.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsIssues.tsx
@@ -148,15 +148,13 @@ export class RuleDetailsIssues extends React.PureComponent<Props, State> {
 
     return (
       <div className="js-rule-issues coding-rule-section">
-        <div className="coding-rule-section-separator" />
-
         <DeferredSpinner loading={loading}>
-          <h3 className="coding-rules-detail-title">
+          <h2 className="coding-rules-detail-title">
             {translate('coding_rules.issues')}
             {this.renderTotal()}
-          </h3>
+          </h2>
 
-          {projects.length > 0 && (
+          {projects.length > 0 ? (
             <table className="coding-rules-detail-list coding-rules-most-violated-projects">
               <tbody>
                 <tr>
@@ -167,6 +165,10 @@ export class RuleDetailsIssues extends React.PureComponent<Props, State> {
                 {projects.map(this.renderProject)}
               </tbody>
             </table>
+          ) : (
+            <div className="big-padded-bottom">
+              {translate('coding_rules.no_issue_detected_for_projects')}
+            </div>
           )}
         </DeferredSpinner>
       </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 a154245226d..4bf55ae6f30 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
@@ -219,16 +219,14 @@ export default class RuleDetailsProfiles extends React.PureComponent<Props> {
     return (
       <div className="js-rule-profiles coding-rule-section">
         <div className="coding-rules-detail-quality-profiles-section">
-          <div className="coding-rule-section-separator" />
-
-          <h3 className="coding-rules-detail-title">
+          <h2 className="coding-rules-detail-title">
             <InstanceMessage message={translate('coding_rules.quality_profiles')} />
-          </h3>
+          </h2>
 
           {canActivate && (
             <ActivationButton
               buttonText={translate('coding_rules.activate')}
-              className="coding-rules-quality-profile-activate spacer-left"
+              className="coding-rules-quality-profile-activate"
               modalHeader={translate('coding_rules.activate_in_quality_profile')}
               onDone={this.handleActivate}
               profiles={filter(
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleTabViewer.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleTabViewer.tsx
index 2dac7e9f45a..76253ed39d1 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleTabViewer.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleTabViewer.tsx
@@ -116,14 +116,11 @@ export default class RuleViewerTabs extends React.PureComponent<Props, State> {
     return (
       <>
         {intro && (
-          <>
-            <h2>{translate('coding_rules.description_section.title.introduction')}</h2>
-            <div
-              className="big-padded rule-desc"
-              // eslint-disable-next-line react/no-danger
-              dangerouslySetInnerHTML={{ __html: sanitizeString(intro) }}
-            />
-          </>
+          <div
+            className="rule-desc"
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{ __html: sanitizeString(intro) }}
+          />
         )}
         <BoxedTabs
           className="bordered-bottom"
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/RuleDetailsIssues-test.tsx.snap b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/RuleDetailsIssues-test.tsx.snap
index 02049b12c93..120eb95f601 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/RuleDetailsIssues-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/RuleDetailsIssues-test.tsx.snap
@@ -4,13 +4,10 @@ exports[`should fetch issues and render 1`] = `
 <div
   className="js-rule-issues coding-rule-section"
 >
-  <div
-    className="coding-rule-section-separator"
-  />
   <DeferredSpinner
     loading={false}
   >
-    <h3
+    <h2
       className="coding-rules-detail-title"
     >
       coding_rules.issues
@@ -35,7 +32,7 @@ exports[`should fetch issues and render 1`] = `
         </Link>
         )
       </span>
-    </h3>
+    </h2>
     <table
       className="coding-rules-detail-list coding-rules-most-violated-projects"
     >
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 f3d5897218d..89c0d27e18f 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
@@ -33,8 +33,10 @@
   position: relative;
   display: inline-block;
   margin: 16px 0;
-  font-size: var(--bigFontSize);
+  font-size: 20px;
   font-weight: 400;
+  border-bottom: 1px solid #e6e6e6;
+  width: 100%;
 }
 
 .coding-rules-detail-quality-profile-parameter {
@@ -272,9 +274,3 @@
 .coding-rule-activation-actions {
   padding-left: 20px;
 }
-
-.coding-rule-section-separator {
-  height: 0;
-  margin: 10px 0;
-  border-top: 1px solid var(--barBorderColor);
-}