SONAR-16518 Add "How to fix it" context sub title

4 files changed, 28 insertions, 12 deletions

diff --git a/server/sonar-web/src/main/js/api/mocks/CodingRulesMock.ts b/server/sonar-web/src/main/js/api/mocks/CodingRulesMock.ts
index f6e2563257a..b5ad81cb256 100644
--- a/server/sonar-web/src/main/js/api/mocks/CodingRulesMock.ts
+++ b/server/sonar-web/src/main/js/api/mocks/CodingRulesMock.ts
@@ -133,12 +133,12 @@ export default class CodingRulesMock {
           },
           {
             key: RuleDescriptionSections.HOW_TO_FIX,
-            content: 'This how to fix for spring',
+            content: 'This is how to fix for spring',
             context: { key: 'spring', displayName: 'Spring' }
           },
           {
             key: RuleDescriptionSections.HOW_TO_FIX,
-            content: 'This how to fix for spring boot',
+            content: 'This is how to fix for spring boot',
             context: { key: 'spring_boot', displayName: 'Spring boot' }
           },
           {
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 140dba40e2b..03d8a6a7a1a 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
@@ -154,14 +154,23 @@ it('should show rule advanced section with context', async () => {
   expect(screen.getByRole('radio', { name: 'Spring' })).toBeInTheDocument();
   expect(screen.getByRole('radio', { name: 'Spring boot' })).toBeInTheDocument();
   expect(
-    screen.getByRole('radio', { name: 'coding_rules.description_context_other' })
+    screen.getByRole('radio', { name: 'coding_rules.description_context.other' })
   ).toBeInTheDocument();
-  expect(screen.getByText('This how to fix for spring')).toBeInTheDocument();
+  expect(screen.getByText('coding_rules.description_context.sub_title.Spring')).toBeInTheDocument();
+  expect(screen.getByText('This is how to fix for spring')).toBeInTheDocument();
 
   await user.click(screen.getByRole('radio', { name: 'Spring boot' }));
-  expect(screen.getByText('This how to fix for spring boot')).toBeInTheDocument();
+  expect(
+    screen.getByText('coding_rules.description_context.sub_title.Spring boot')
+  ).toBeInTheDocument();
+  expect(screen.getByText('This is how to fix for spring boot')).toBeInTheDocument();
 
-  await user.click(screen.getByRole('radio', { name: 'coding_rules.description_context_other' }));
+  await user.click(screen.getByRole('radio', { name: 'coding_rules.description_context.other' }));
+  expect(
+    screen.queryByText(
+      'coding_rules.description_context.sub_title.coding_rules.description_context.other'
+    )
+  ).not.toBeInTheDocument();
   expect(screen.getByText('coding_rules.context.others.title')).toBeInTheDocument();
   expect(screen.getByText('coding_rules.context.others.description.first')).toBeInTheDocument();
 
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 8e0a0c3aaee..ab7c94ca37b 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
@@ -72,7 +72,7 @@ it('should open issue and navigate', async () => {
   expect(screen.getByRole('radio', { name: 'Context 3' })).toBeInTheDocument();
   expect(screen.getByRole('radio', { name: 'Spring' })).toBeInTheDocument();
   expect(
-    screen.getByRole('radio', { name: 'coding_rules.description_context_other' })
+    screen.getByRole('radio', { name: 'coding_rules.description_context.other' })
   ).toBeInTheDocument();
   expect(screen.getByRole('radio', { name: 'Spring' })).toBeChecked();
 
@@ -81,7 +81,7 @@ it('should open issue and navigate', async () => {
   expect(screen.getByText('Context 2 content')).toBeInTheDocument();
 
   // Select the "other" context and check tab content
-  await user.click(screen.getByRole('radio', { name: 'coding_rules.description_context_other' }));
+  await user.click(screen.getByRole('radio', { name: 'coding_rules.description_context.other' }));
   expect(screen.getByText('coding_rules.context.others.title')).toBeInTheDocument();
   expect(screen.getByText('coding_rules.context.others.description.first')).toBeInTheDocument();
   expect(screen.getByText('coding_rules.context.others.description.second')).toBeInTheDocument();
diff --git a/server/sonar-web/src/main/js/components/rules/RuleDescription.tsx b/server/sonar-web/src/main/js/components/rules/RuleDescription.tsx
index fcf0b3784c0..0044a391fcd 100644
--- a/server/sonar-web/src/main/js/components/rules/RuleDescription.tsx
+++ b/server/sonar-web/src/main/js/components/rules/RuleDescription.tsx
@@ -79,7 +79,7 @@ export default class RuleDescription extends React.PureComponent<Props, State> {
 
     if (contexts.length > 0) {
       contexts.push({
-        displayName: translate('coding_rules.description_context_other'),
+        displayName: translate('coding_rules.description_context.other'),
         content: '',
         key: OTHERS_KEY
       });
@@ -125,24 +125,31 @@ export default class RuleDescription extends React.PureComponent<Props, State> {
           })}>
           <div className="rules-context-description">
             <h2 className="rule-contexts-title">
-              {translate('coding_rules.description_context_title')}
+              {translate('coding_rules.description_context.title')}
             </h2>
             {defaultContext && (
               <Alert variant="info" display="inline" className="big-spacer-bottom">
                 {translateWithParameters(
-                  'coding_rules.description_context_default_information',
+                  'coding_rules.description_context.default_information',
                   defaultContext.displayName
                 )}
               </Alert>
             )}
             <div>
               <RadioToggle
-                className="big-spacer-bottom"
                 name="filter"
                 onCheck={this.handleToggleContext}
                 options={options}
                 value={selectedContext.displayName}
               />
+              {selectedContext.key !== OTHERS_KEY && (
+                <h2>
+                  {translateWithParameters(
+                    'coding_rules.description_context.sub_title',
+                    selectedContext.displayName
+                  )}
+                </h2>
+              )}
             </div>
             {selectedContext.key === OTHERS_KEY ? (
               <OtherContextOption />