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

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' }
           },
           {

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

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

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

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

@@ -1913,9 +1913,10 @@ coding_rules.description_section.title.assess_the_problem=Assess the risk?
 coding_rules.description_section.title.how_to_fix=How to fix it?
 coding_rules.description_section.title.more_info=More Info
 
-coding_rules.description_context_title=Which component or framework contains the issue?
-coding_rules.description_context_default_information={0} was detected as the most relevant component or framework for this issue.
-coding_rules.description_context_other=Other
+coding_rules.description_context.title=Which component or framework contains the issue?
+coding_rules.description_context.sub_title=How to fix it in {0}
+coding_rules.description_context.default_information={0} was detected as the most relevant component or framework for this issue.
+coding_rules.description_context.other=Other
 
 coding_rules.more_info.education_principles.title=Security principles
 coding_rules.more_info.resources.title=Resources