SONAR-18343 Purpose of link is not clear in context

3 files changed, 57 insertions, 12 deletions

diff --git a/server/sonar-web/src/main/js/api/mocks/QualityProfilesServiceMock.ts b/server/sonar-web/src/main/js/api/mocks/QualityProfilesServiceMock.ts
index 35dbe0852f0..b26903edf06 100644
--- a/server/sonar-web/src/main/js/api/mocks/QualityProfilesServiceMock.ts
+++ b/server/sonar-web/src/main/js/api/mocks/QualityProfilesServiceMock.ts
@@ -48,6 +48,12 @@ export default class QualityProfilesServiceMock {
   };
 
   comparisonResult: CompareResponse = mockCompareResult();
+  searchRulesResponse: SearchRulesResponse = {
+    p: 0,
+    ps: 500,
+    total: 0,
+    rules: [],
+  };
 
   constructor() {
     this.resetQualityProfile();
@@ -99,6 +105,15 @@ export default class QualityProfilesServiceMock {
     this.comparisonResult = mockCompareResult();
   }
 
+  resetSearchRulesResponse() {
+    this.searchRulesResponse = {
+      p: 0,
+      ps: 500,
+      total: 0,
+      rules: [],
+    };
+  }
+
   handleGetImporters = () => {
     return this.reply([]);
   };
@@ -207,12 +222,7 @@ export default class QualityProfilesServiceMock {
   };
 
   handleSearchRules = (): Promise<SearchRulesResponse> => {
-    return this.reply({
-      p: 0,
-      ps: 500,
-      total: 0,
-      rules: [],
-    });
+    return this.reply(this.searchRulesResponse);
   };
 
   handleSearchQualityProfiles = (
@@ -277,10 +287,18 @@ export default class QualityProfilesServiceMock {
     this.isAdmin = true;
   }
 
+  setRulesSearchResponse(overrides: Partial<SearchRulesResponse>) {
+    this.searchRulesResponse = {
+      ...this.searchRulesResponse,
+      ...overrides,
+    };
+  }
+
   reset() {
     this.isAdmin = false;
     this.resetQualityProfile();
     this.resetComparisonResult();
+    this.resetSearchRulesResponse();
   }
 
   reply<T>(response: T): Promise<T> {
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/__tests__/QualityProfilesApp-it.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/__tests__/QualityProfilesApp-it.tsx
index b63ffbf6ff6..7d5413dbbff 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/__tests__/QualityProfilesApp-it.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/__tests__/QualityProfilesApp-it.tsx
@@ -22,6 +22,7 @@ import userEvent from '@testing-library/user-event';
 import selectEvent from 'react-select-event';
 import { byRole } from 'testing-library-selector';
 import QualityProfilesServiceMock from '../../../api/mocks/QualityProfilesServiceMock';
+import { mockRule } from '../../../helpers/testMocks';
 import { renderAppRoutes } from '../../../helpers/testReactTestingUtils';
 import routes from '../routes';
 
@@ -87,6 +88,8 @@ const ui = {
     byRole('heading', {
       name: `quality_profiles.x_rules_have_different_configuration.${rulesQuantity}`,
     }),
+  newRuleLink: byRole('link', { name: 'Recently Added Rule' }),
+  seeAllNewRulesLink: byRole('link', { name: 'see_all 20 quality_profiles.latest_new_rules' }),
 };
 
 it('should list Quality Profiles and filter by language', async () => {
@@ -110,6 +113,18 @@ it('should list Quality Profiles and filter by language', async () => {
   expect(ui.createButton.get(ui.popup.get())).toBeEnabled();
 });
 
+it('should list recently added rules', async () => {
+  serviceMock.setAdmin();
+  serviceMock.setRulesSearchResponse({
+    rules: [mockRule({ name: 'Recently Added Rule' })],
+    total: 20,
+  });
+
+  renderQualityProfiles();
+  expect(await ui.newRuleLink.find()).toBeInTheDocument();
+  expect(ui.seeAllNewRulesLink.get()).toBeInTheDocument();
+});
+
 it('should be able to extend Quality Profile', async () => {
   // From the list page
   const user = userEvent.setup();
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionRules.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionRules.tsx
index 48eea458cea..82edf68b939 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionRules.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionRules.tsx
@@ -91,19 +91,27 @@ export default class EvolutionRules extends React.PureComponent<{}, State> {
   }
 
   render() {
-    if (!this.state.latestRulesTotal || !this.state.latestRules) {
+    const { latestRulesTotal, latestRules } = this.state;
+
+    if (!latestRulesTotal || !latestRules) {
       return null;
     }
 
+    const newRulesTitle = translate('quality_profiles.latest_new_rules');
     const newRulesUrl = getRulesUrl({ available_since: this.periodStartDate });
+    const seeAllRulesText = `${translate('see_all')} ${formatMeasure(
+      latestRulesTotal,
+      'SHORT_INT',
+      null
+    )}`;
 
     return (
       <div className="boxed-group boxed-group-inner quality-profiles-evolution-rules">
         <div className="clearfix">
-          <strong className="pull-left">{translate('quality_profiles.latest_new_rules')}</strong>
+          <strong className="pull-left">{newRulesTitle}</strong>
         </div>
         <ul>
-          {this.state.latestRules.map((rule) => (
+          {latestRules.map((rule) => (
             <li className="spacer-top" key={rule.key}>
               <div className="text-ellipsis">
                 <Link className="link-no-underline" to={getRulesUrl({ rule_key: rule.key })}>
@@ -126,10 +134,14 @@ export default class EvolutionRules extends React.PureComponent<{}, State> {
             </li>
           ))}
         </ul>
-        {this.state.latestRulesTotal > RULES_LIMIT && (
+        {latestRulesTotal > RULES_LIMIT && (
           <div className="spacer-top">
-            <Link className="small" to={newRulesUrl}>
-              {translate('see_all')} {formatMeasure(this.state.latestRulesTotal, 'SHORT_INT', null)}
+            <Link
+              className="small"
+              to={newRulesUrl}
+              aria-label={`${seeAllRulesText} ${newRulesTitle}`}
+            >
+              {seeAllRulesText}
             </Link>
           </div>
         )}