From: 7PH <benjamin.raymond@sonarsource.com>
Date: Fri, 5 May 2023 14:25:59 +0000 (+0200)
Subject: SONAR-18652 Drop usages of deprecated paging mechanism in the frontend API response
X-Git-Tag: 10.1.0.73491~334
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=1f5ba89d35e664c78e6dfd52effdbbe92447750b;p=sonarqube.git

SONAR-18652 Drop usages of deprecated paging mechanism in the frontend API response
---

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 689828eba61..312b864de7a 100644
--- a/server/sonar-web/src/main/js/api/mocks/CodingRulesMock.ts
+++ b/server/sonar-web/src/main/js/api/mocks/CodingRulesMock.ts
@@ -21,11 +21,12 @@ import { cloneDeep, countBy, pick, trim } from 'lodash';
 import { RuleDescriptionSections } from '../../apps/coding-rules/rule';
 import {
   mockCurrentUser,
+  mockPaging,
   mockQualityProfile,
   mockRuleDetails,
   mockRuleRepository,
 } from '../../helpers/testMocks';
-import { RuleRepository } from '../../types/coding-rules';
+import { RuleRepository, SearchRulesResponse } from '../../types/coding-rules';
 import { RawIssuesResponse } from '../../types/issues';
 import { SearchRulesQuery } from '../../types/rules';
 import { Rule, RuleActivation, RuleDetails, RulesUpdateRequest } from '../../types/types';
@@ -328,7 +329,7 @@ export default class CodingRulesMock {
     ps,
     available_since,
     rule_key,
-  }: SearchRulesQuery) => {
+  }: SearchRulesQuery): Promise<SearchRulesResponse> => {
     const countFacet = (facets || '').split(',').map((facet: keyof Rule) => {
       const facetCount = countBy(
         this.rules.map((r) => r[FACET_RULE_MAP[facet] || facet] as string)
@@ -348,11 +349,13 @@ export default class CodingRulesMock {
     }
     const responseRules = filteredRules.slice((currentP - 1) * currentPs, currentP * currentPs);
     return this.reply({
-      total: filteredRules.length,
-      p: currentP,
-      ps: currentPs,
       rules: responseRules,
       facets: countFacet,
+      paging: mockPaging({
+        total: filteredRules.length,
+        pageIndex: currentP,
+        pageSize: currentPs,
+      }),
     });
   };
 
diff --git a/server/sonar-web/src/main/js/api/mocks/GroupsServiceMock.ts b/server/sonar-web/src/main/js/api/mocks/GroupsServiceMock.ts
index 523f59c2237..1c65862e41b 100644
--- a/server/sonar-web/src/main/js/api/mocks/GroupsServiceMock.ts
+++ b/server/sonar-web/src/main/js/api/mocks/GroupsServiceMock.ts
@@ -146,9 +146,8 @@ export default class GroupsServiceMock {
     ps?: number;
     q?: string;
     selected?: string;
-  }): Promise<Paging & { users: UserGroupMember[] }> => {
+  }): Promise<{ paging: Paging; users: UserGroupMember[] }> => {
     return this.reply({
-      ...this.paging,
       users: this.users
         .filter((u) => u.name.includes(data.q ?? ''))
         .filter((u) => {
@@ -161,6 +160,7 @@ export default class GroupsServiceMock {
               return true;
           }
         }),
+      paging: { ...this.paging },
     });
   };
 
diff --git a/server/sonar-web/src/main/js/api/mocks/IssuesServiceMock.ts b/server/sonar-web/src/main/js/api/mocks/IssuesServiceMock.ts
index 42eb29d92e2..1a7c78136c6 100644
--- a/server/sonar-web/src/main/js/api/mocks/IssuesServiceMock.ts
+++ b/server/sonar-web/src/main/js/api/mocks/IssuesServiceMock.ts
@@ -30,6 +30,7 @@ import {
   mockRule,
   mockRuleDetails,
 } from '../../helpers/testMocks';
+import { SearchRulesResponse } from '../../types/coding-rules';
 import {
   ASSIGNEE_ME,
   IssueActions,
@@ -546,7 +547,7 @@ export default class IssuesServiceMock {
     return this.reply(issue.snippets);
   };
 
-  handleSearchRules = (req: SearchRulesQuery) => {
+  handleSearchRules = (req: SearchRulesQuery): Promise<SearchRulesResponse> => {
     const rules = this.rulesList.filter((rule) => {
       const query = req.q?.toLowerCase() || '';
       const nameMatches = rule.name.toLowerCase().includes(query);
@@ -555,10 +556,12 @@ export default class IssuesServiceMock {
       return isTypeRight && (nameMatches || keyMatches);
     });
     return this.reply({
-      p: 1,
-      ps: 30,
       rules,
-      total: rules.length,
+      paging: mockPaging({
+        total: rules.length,
+        pageIndex: 1,
+        pageSize: 30,
+      }),
     });
   };
 
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 b26903edf06..372d7afe666 100644
--- a/server/sonar-web/src/main/js/api/mocks/QualityProfilesServiceMock.ts
+++ b/server/sonar-web/src/main/js/api/mocks/QualityProfilesServiceMock.ts
@@ -19,24 +19,29 @@
  */
 import { cloneDeep } from 'lodash';
 import { RequestData } from '../../helpers/request';
-import { mockCompareResult, mockQualityProfile, mockRuleDetails } from '../../helpers/testMocks';
+import {
+  mockCompareResult,
+  mockPaging,
+  mockQualityProfile,
+  mockRuleDetails,
+} from '../../helpers/testMocks';
 import { SearchRulesResponse } from '../../types/coding-rules';
 import { Dict, Paging, ProfileInheritanceDetails, RuleDetails } from '../../types/types';
 import {
+  CompareResponse,
+  Profile,
+  ProfileProject,
+  SearchQualityProfilesParameters,
+  SearchQualityProfilesResponse,
   activateRule,
   changeProfileParent,
   compareProfiles,
-  CompareResponse,
   copyProfile,
   createQualityProfile,
   getImporters,
   getProfileInheritance,
   getProfileProjects,
-  Profile,
-  ProfileProject,
   searchQualityProfiles,
-  SearchQualityProfilesParameters,
-  SearchQualityProfilesResponse,
 } from '../quality-profiles';
 import { getRuleDetails, searchRules } from '../rules';
 
@@ -49,10 +54,8 @@ export default class QualityProfilesServiceMock {
 
   comparisonResult: CompareResponse = mockCompareResult();
   searchRulesResponse: SearchRulesResponse = {
-    p: 0,
-    ps: 500,
-    total: 0,
     rules: [],
+    paging: mockPaging(),
   };
 
   constructor() {
@@ -107,10 +110,12 @@ export default class QualityProfilesServiceMock {
 
   resetSearchRulesResponse() {
     this.searchRulesResponse = {
-      p: 0,
-      ps: 500,
-      total: 0,
       rules: [],
+      paging: {
+        pageIndex: 1,
+        pageSize: 500,
+        total: 0,
+      },
     };
   }
 
diff --git a/server/sonar-web/src/main/js/api/quality-profiles.ts b/server/sonar-web/src/main/js/api/quality-profiles.ts
index afc48567418..5f1d0090082 100644
--- a/server/sonar-web/src/main/js/api/quality-profiles.ts
+++ b/server/sonar-web/src/main/js/api/quality-profiles.ts
@@ -21,7 +21,7 @@ import { map } from 'lodash';
 import { Exporter, ProfileChangelogEvent } from '../apps/quality-profiles/types';
 import { csvEscape } from '../helpers/csv';
 import { throwGlobalError } from '../helpers/error';
-import { getJSON, post, postJSON, RequestData } from '../helpers/request';
+import { RequestData, getJSON, post, postJSON } from '../helpers/request';
 import { Dict, Paging, ProfileInheritanceDetails, UserSelected } from '../types/types';
 
 export interface ProfileActions {
@@ -171,17 +171,17 @@ export function getExporters(): Promise<any> {
   return getJSON('/api/qualityprofiles/exporters').then((r) => r.exporters);
 }
 
+export interface ChangelogResponse {
+  events: ProfileChangelogEvent[];
+  paging: Paging;
+}
+
 export function getProfileChangelog(
   since: any,
   to: any,
   { language, name: qualityProfile }: Profile,
   page?: number
-): Promise<{
-  events: ProfileChangelogEvent[];
-  p: number;
-  ps: number;
-  total: number;
-}> {
+): Promise<ChangelogResponse> {
   return getJSON('/api/qualityprofiles/changelog', {
     since,
     to,
diff --git a/server/sonar-web/src/main/js/api/user_groups.ts b/server/sonar-web/src/main/js/api/user_groups.ts
index 0e7fd144827..247a2f259f9 100644
--- a/server/sonar-web/src/main/js/api/user_groups.ts
+++ b/server/sonar-web/src/main/js/api/user_groups.ts
@@ -37,11 +37,10 @@ export function getUsersInGroup(data: {
   ps?: number;
   q?: string;
   selected?: string;
-}): Promise<
-  Paging & {
-    users: UserGroupMember[];
-  }
-> {
+}): Promise<{
+  paging: Paging;
+  users: UserGroupMember[];
+}> {
   return getJSON('/api/user_groups/users', data).catch(throwGlobalError);
 }
 
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/meta/MetaQualityProfiles.tsx b/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/meta/MetaQualityProfiles.tsx
index 4ca1ea191ac..514218f0fc5 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/meta/MetaQualityProfiles.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/meta/MetaQualityProfiles.tsx
@@ -77,7 +77,7 @@ export class MetaQualityProfiles extends React.PureComponent<Props, State> {
       qprofile: profileKey,
       statuses: 'DEPRECATED',
     };
-    return searchRules(data).then((r) => r.total);
+    return searchRules(data).then((r) => r.paging.total);
   }
 
   getDeprecatedRulesCount(profile: { key: string }) {
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/meta/__tests__/MetaQualityProfiles-test.tsx b/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/meta/__tests__/MetaQualityProfiles-test.tsx
index 1a5cb143bce..5d6b2e7574c 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/meta/__tests__/MetaQualityProfiles-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/meta/__tests__/MetaQualityProfiles-test.tsx
@@ -20,7 +20,11 @@
 import { screen } from '@testing-library/react';
 import * as React from 'react';
 import { searchRules } from '../../../../../../../api/rules';
-import { mockLanguage, mockQualityProfile } from '../../../../../../../helpers/testMocks';
+import {
+  mockLanguage,
+  mockPaging,
+  mockQualityProfile,
+} from '../../../../../../../helpers/testMocks';
 import { renderComponent } from '../../../../../../../helpers/testReactTestingUtils';
 import { SearchRulesResponse } from '../../../../../../../types/coding-rules';
 import { Dict } from '../../../../../../../types/types';
@@ -40,9 +44,16 @@ it('should render correctly', async () => {
     ts: 10,
     css: 0,
   };
-  jest.mocked(searchRules).mockImplementation(({ qprofile }: { qprofile: string }) => {
-    return Promise.resolve({ total: totals[qprofile] } as SearchRulesResponse);
-  });
+  jest
+    .mocked(searchRules)
+    .mockImplementation(({ qprofile }: { qprofile: string }): Promise<SearchRulesResponse> => {
+      return Promise.resolve({
+        rules: [],
+        paging: mockPaging({
+          total: totals[qprofile],
+        }),
+      });
+    });
 
   renderMetaQualityprofiles();
 
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/CodingRulesApp.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/CodingRulesApp.tsx
index 94202b9a1ef..b44b63dbf86 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/CodingRulesApp.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/CodingRulesApp.tsx
@@ -252,10 +252,9 @@ export class CodingRulesApp extends React.PureComponent<Props, State> {
 
   makeFetchRequest = (query?: RawQuery) =>
     searchRules({ ...this.getSearchParameters(), ...query }).then(
-      ({ actives: rawActives, facets: rawFacets, p, ps, rules, total }) => {
+      ({ actives: rawActives, facets: rawFacets, rules, paging }) => {
         const actives = rawActives && parseActives(rawActives);
         const facets = rawFacets && parseFacets(rawFacets);
-        const paging = { pageIndex: p, pageSize: ps, total };
         return { actives, facets, paging, rules };
       }
     );
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/CodingRulesApp-test.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/CodingRulesApp-test.tsx
index 09ccc3496a5..85eb36809c6 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/CodingRulesApp-test.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/CodingRulesApp-test.tsx
@@ -34,7 +34,7 @@ import { CodingRulesApp } from '../CodingRulesApp';
 jest.mock('../../../../components/common/ScreenPositionHelper');
 
 jest.mock('../../../../api/rules', () => {
-  const { mockRule } = jest.requireActual('../../../../helpers/testMocks');
+  const { mockRule, mockPaging } = jest.requireActual('../../../../helpers/testMocks');
   return {
     getRulesApp: jest.fn().mockResolvedValue({ canWrite: true, repositories: [] }),
     searchRules: jest.fn().mockResolvedValue({
@@ -42,10 +42,12 @@ jest.mock('../../../../api/rules', () => {
       rawActives: [],
       facets: [],
       rawFacets: [],
-      p: 0,
-      ps: 100,
       rules: [mockRule(), mockRule()],
-      total: 0,
+      paging: mockPaging({
+        total: 0,
+        pageIndex: 1,
+        pageSize: 100,
+      }),
     }),
   };
 });
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/CodingRulesApp-test.tsx.snap b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/CodingRulesApp-test.tsx.snap
index 9a9f3631fce..4521ea5515e 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/CodingRulesApp-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/CodingRulesApp-test.tsx.snap
@@ -250,7 +250,7 @@ exports[`should render correctly: loaded 1`] = `
               <PageActions
                 paging={
                   {
-                    "pageIndex": 0,
+                    "pageIndex": 1,
                     "pageSize": 100,
                     "total": 0,
                   }
diff --git a/server/sonar-web/src/main/js/apps/groups/components/EditMembersModal.tsx b/server/sonar-web/src/main/js/apps/groups/components/EditMembersModal.tsx
index 016e04c619f..da97a115279 100644
--- a/server/sonar-web/src/main/js/apps/groups/components/EditMembersModal.tsx
+++ b/server/sonar-web/src/main/js/apps/groups/components/EditMembersModal.tsx
@@ -20,12 +20,12 @@
 import { find, without } from 'lodash';
 import * as React from 'react';
 import { addUserToGroup, getUsersInGroup, removeUserFromGroup } from '../../../api/user_groups';
-import { ResetButtonLink } from '../../../components/controls/buttons';
 import Modal from '../../../components/controls/Modal';
 import SelectList, {
   SelectListFilter,
   SelectListSearchParams,
 } from '../../../components/controls/SelectList';
+import { ResetButtonLink } from '../../../components/controls/buttons';
 import { translate } from '../../../helpers/l10n';
 import { Group, UserSelected } from '../../../types/types';
 
@@ -88,7 +88,7 @@ export default class EditMembersModal extends React.PureComponent<Props, State>
             lastSearchParams: searchParams,
             loading: false,
             users,
-            usersTotalCount: data.total,
+            usersTotalCount: data.paging.total,
             selectedUsers,
           };
         });
diff --git a/server/sonar-web/src/main/js/apps/groups/components/ViewMembersModal.tsx b/server/sonar-web/src/main/js/apps/groups/components/ViewMembersModal.tsx
index 799dc108c9f..76d326fad49 100644
--- a/server/sonar-web/src/main/js/apps/groups/components/ViewMembersModal.tsx
+++ b/server/sonar-web/src/main/js/apps/groups/components/ViewMembersModal.tsx
@@ -20,11 +20,11 @@
 import { DeferredSpinner } from 'design-system/lib';
 import * as React from 'react';
 import { getUsersInGroup } from '../../../api/user_groups';
-import { ResetButtonLink } from '../../../components/controls/buttons';
 import ListFooter from '../../../components/controls/ListFooter';
 import Modal from '../../../components/controls/Modal';
 import SearchBox from '../../../components/controls/SearchBox';
 import { SelectListFilter } from '../../../components/controls/SelectList';
+import { ResetButtonLink } from '../../../components/controls/buttons';
 import { translate } from '../../../helpers/l10n';
 import { Group, UserGroupMember } from '../../../types/types';
 
@@ -57,7 +57,7 @@ export default function ViewMembersModal(props: Props) {
       } else {
         setUsers(data.users);
       }
-      setTotal(data.total);
+      setTotal(data.paging.total);
       setLoading(false);
     })();
   }, [query, page]);
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/RuleFacet.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/RuleFacet.tsx
index 1da206faff1..2a0256818f4 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/RuleFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/RuleFacet.tsx
@@ -52,9 +52,9 @@ export default class RuleFacet extends React.PureComponent<Props> {
         : ISSUE_TYPES.filter((type) => type !== IssueType.SecurityHotspot).join(),
       s: 'name',
       include_external: true,
-    }).then((response) => ({
-      paging: { pageIndex: response.p, pageSize: response.ps, total: response.total },
-      results: response.rules,
+    }).then(({ rules, paging }) => ({
+      results: rules,
+      paging,
     }));
   };
 
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 95352a39b97..4ada7aae19b 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,7 +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 { mockPaging, mockRule } from '../../../helpers/testMocks';
 import { renderAppRoutes } from '../../../helpers/testReactTestingUtils';
 import routes from '../routes';
 
@@ -119,7 +119,9 @@ it('should list recently added rules', async () => {
   serviceMock.setAdmin();
   serviceMock.setRulesSearchResponse({
     rules: [mockRule({ name: 'Recently Added Rule' })],
-    total: 20,
+    paging: mockPaging({
+      total: 20,
+    }),
   });
 
   renderQualityProfiles();
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ChangelogContainer.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ChangelogContainer.tsx
index 1930cd4ad09..61b0b3d4ef5 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ChangelogContainer.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ChangelogContainer.tsx
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { getProfileChangelog } from '../../../api/quality-profiles';
+import { ChangelogResponse, getProfileChangelog } from '../../../api/quality-profiles';
 import { Location, Router, withRouter } from '../../../components/hoc/withRouter';
 import DeferredSpinner from '../../../components/ui/DeferredSpinner';
 import { parseDate, toISO8601WithOffsetString } from '../../../helpers/dates';
@@ -76,12 +76,12 @@ export class ChangelogContainer extends React.PureComponent<Props, State> {
     } = this.props;
 
     getProfileChangelog(query.since, query.to, profile)
-      .then((r: any) => {
+      .then((r: ChangelogResponse) => {
         if (this.mounted) {
           this.setState({
             events: r.events,
-            total: r.total,
-            page: r.p,
+            total: r.paging.total,
+            page: r.paging.pageIndex,
             loading: false,
           });
         }
@@ -101,12 +101,12 @@ export class ChangelogContainer extends React.PureComponent<Props, State> {
       } = this.props;
 
       getProfileChangelog(query.since, query.to, profile, this.state.page + 1)
-        .then((r: any) => {
+        .then((r: ChangelogResponse) => {
           if (this.mounted && this.state.events) {
             this.setState(({ events = [] }) => ({
               events: [...events, ...r.events],
-              total: r.total,
-              page: r.p,
+              total: r.paging.total,
+              page: r.paging.pageIndex,
               loading: false,
             }));
           }
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/changelog/__tests__/ChangelogContainer-test.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/changelog/__tests__/ChangelogContainer-test.tsx
index f81f1ab97a6..2e94f5d342a 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/changelog/__tests__/ChangelogContainer-test.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/changelog/__tests__/ChangelogContainer-test.tsx
@@ -20,14 +20,21 @@
 import { shallow } from 'enzyme';
 import * as React from 'react';
 import { getProfileChangelog } from '../../../../api/quality-profiles';
-import { mockLocation, mockQualityProfile, mockRouter } from '../../../../helpers/testMocks';
+import {
+  mockLocation,
+  mockPaging,
+  mockQualityProfile,
+  mockRouter,
+} from '../../../../helpers/testMocks';
 import { mockEvent, waitAndUpdate } from '../../../../helpers/testUtils';
 import { ChangelogContainer } from '../ChangelogContainer';
 
 beforeEach(() => jest.clearAllMocks());
 
 jest.mock('../../../../api/quality-profiles', () => {
-  const { mockQualityProfileChangelogEvent } = jest.requireActual('../../../../helpers/testMocks');
+  const { mockQualityProfileChangelogEvent, mockPaging } = jest.requireActual(
+    '../../../../helpers/testMocks'
+  );
   return {
     getProfileChangelog: jest.fn().mockResolvedValue({
       events: [
@@ -35,14 +42,19 @@ jest.mock('../../../../api/quality-profiles', () => {
         mockQualityProfileChangelogEvent(),
         mockQualityProfileChangelogEvent(),
       ],
-      total: 6,
-      p: 1,
+      paging: mockPaging({
+        total: 6,
+        pageIndex: 1,
+      }),
     }),
   };
 });
 
 it('should render correctly without events', async () => {
-  (getProfileChangelog as jest.Mock).mockResolvedValueOnce({ events: [] });
+  (getProfileChangelog as jest.Mock).mockResolvedValueOnce({
+    events: [],
+    paging: mockPaging({ total: 0 }),
+  });
   const wrapper = shallowRender();
   await waitAndUpdate(wrapper);
   expect(wrapper).toMatchSnapshot();
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRules.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRules.tsx
index da7731bb34f..b58616490df 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRules.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRules.tsx
@@ -22,8 +22,8 @@ import * as React from 'react';
 import { getQualityProfile } from '../../../api/quality-profiles';
 import { searchRules, takeFacet } from '../../../api/rules';
 import Link from '../../../components/common/Link';
-import { Button } from '../../../components/controls/buttons';
 import Tooltip from '../../../components/controls/Tooltip';
+import { Button } from '../../../components/controls/buttons';
 import { translate } from '../../../helpers/l10n';
 import { getRulesUrl } from '../../../helpers/urls';
 import { Dict } from '../../../types/types';
@@ -117,11 +117,11 @@ export default class ProfileRules extends React.PureComponent<Props, State> {
         if (this.mounted) {
           const [allRules, activatedRules, showProfile] = responses;
           this.setState({
-            activatedTotal: activatedRules.total,
+            activatedTotal: activatedRules.paging.total,
             allByType: keyBy<ByType>(takeFacet(allRules, 'types'), 'val'),
             activatedByType: keyBy<ByType>(takeFacet(activatedRules, 'types'), 'val'),
             compareToSonarWay: showProfile && showProfile.compareToSonarWay,
-            total: allRules.total,
+            total: allRules.paging.total,
           });
         }
       }
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/ProfileRules-test.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/ProfileRules-test.tsx
index 3b9eda6fca0..005c1a58f6b 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/ProfileRules-test.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/ProfileRules-test.tsx
@@ -20,7 +20,7 @@
 import { shallow } from 'enzyme';
 import * as React from 'react';
 import { getQualityProfile } from '../../../../api/quality-profiles';
-import { mockQualityProfile } from '../../../../helpers/testMocks';
+import { mockPaging, mockQualityProfile } from '../../../../helpers/testMocks';
 import { waitAndUpdate } from '../../../../helpers/testUtils';
 import ProfileRules from '../ProfileRules';
 
@@ -35,7 +35,6 @@ const PROFILE = mockQualityProfile({
 const EDITABLE_PROFILE = { ...PROFILE, actions: { edit: true } };
 
 const apiResponseAll = {
-  total: 253,
   facets: [
     {
       property: 'types',
@@ -47,10 +46,12 @@ const apiResponseAll = {
       ],
     },
   ],
+  paging: mockPaging({
+    total: 253,
+  }),
 };
 
 const apiResponseActive = {
-  total: 68,
   facets: [
     {
       property: 'types',
@@ -62,6 +63,9 @@ const apiResponseActive = {
       ],
     },
   ],
+  paging: mockPaging({
+    total: 68,
+  }),
 };
 
 jest.mock('../../../../api/rules', () => ({
@@ -90,7 +94,7 @@ beforeEach(jest.clearAllMocks);
 
 it('should render the quality profiles rules with sonarway comparison', async () => {
   const wrapper = shallow(<ProfileRules profile={PROFILE} />);
-  const instance = wrapper.instance() as any;
+  const instance = wrapper.instance() as ProfileRules;
   instance.mounted = true;
   instance.loadRules();
   await waitAndUpdate(wrapper);
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 a087612cbe6..d45a5ebb11b 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
@@ -76,7 +76,7 @@ export default class EvolutionRules extends React.PureComponent<{}, State> {
     };
 
     searchRules(data).then(
-      ({ actives, rules, total }) => {
+      ({ actives, rules, paging: { total } }) => {
         if (this.mounted) {
           this.setState({
             latestRules: sortBy(parseRules(rules, actives), 'langName'),
diff --git a/server/sonar-web/src/main/js/types/coding-rules.ts b/server/sonar-web/src/main/js/types/coding-rules.ts
index 6094dc2faf7..e5cecd36c8e 100644
--- a/server/sonar-web/src/main/js/types/coding-rules.ts
+++ b/server/sonar-web/src/main/js/types/coding-rules.ts
@@ -17,7 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { Dict, Rule, RuleActivation } from './types';
+import { Dict, Paging, Rule, RuleActivation } from './types';
 
 export interface RuleRepository {
   key: string;
@@ -33,8 +33,6 @@ export interface GetRulesAppResponse {
 export interface SearchRulesResponse {
   actives?: Dict<RuleActivation[]>;
   facets?: { property: string; values: { count: number; val: string }[] }[];
-  p: number;
-  ps: number;
   rules: Rule[];
-  total: number;
+  paging: Paging;
 }