SONAR-16519 Improve the rule page style

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'

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}>

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 ? (

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>

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(

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"

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"
     >

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);
-}

sonar-core/src/main/resources/org/sonar/l10n/core.properties

@@ -1804,6 +1804,7 @@ coding_rules.issues.only_main_branches=Only issues from the main project branche
 coding_rules.most_violating_projects=Most Violating Projects
 coding_rules.need_extend_or_copy=Rules in built-in Quality Profiles can't be changed. You can create a customizable Quality Profile based on a built-in one by Copying or Extending it in the Quality Profiles list.
 coding_rules.no_results=No Coding Rules
+coding_rules.no_issue_detected_for_projects=No issues were detected for this rule in the main project branches
 coding_rules.no_tags=No tags
 coding_rules.original=Original:
 coding_rules.overrides="{0}" overrides "{1}"