Limit on-demand scans tabs counts

Changelog: changed
EE: true

ee/app/assets/javascripts/on_demand_scans/components/tabs/base_tab.vue

@@ -21,7 +21,12 @@ import {
 import handlesErrors from '../../mixins/handles_errors';
 import Actions from '../actions.vue';
 import EmptyState from '../empty_state.vue';
-import { PIPELINES_PER_PAGE, PIPELINES_POLL_INTERVAL, ACTION_COLUMN } from '../../constants';
+import {
+  PIPELINES_PER_PAGE,
+  MAX_PIPELINES_COUNT,
+  PIPELINES_POLL_INTERVAL,
+  ACTION_COLUMN,
+} from '../../constants';
 
 const defaultCursor = {
   first: PIPELINES_PER_PAGE,
@@ -72,6 +77,11 @@ export default {
       type: Number,
       required: true,
     },
+    maxItemsCount: {
+      type: Number,
+      required: false,
+      default: MAX_PIPELINES_COUNT,
+    },
     emptyStateTitle: {
       type: String,
       required: false,
@@ -137,6 +147,10 @@ export default {
     };
   },
   computed: {
+    formattedCount() {
+      const { itemsCount, maxItemsCount } = this;
+      return itemsCount === maxItemsCount ? `${itemsCount}+` : itemsCount;
+    },
     pipelineNodes() {
       return this.pipelines?.nodes ?? [];
     },
@@ -214,7 +228,7 @@ export default {
     <template #title>
       <span class="gl-white-space-nowrap">
         {{ title }}
-        <gl-badge size="sm" class="gl-tab-counter-badge">{{ itemsCount }}</gl-badge>
+        <gl-badge size="sm" class="gl-tab-counter-badge">{{ formattedCount }}</gl-badge>
       </span>
     </template>
     <template v-if="$apollo.queries.pipelines.loading || hasPipelines">

ee/app/assets/javascripts/on_demand_scans/components/tabs/saved.vue

@@ -15,7 +15,7 @@ import dastProfileDelete from '../../graphql/dast_profile_delete.mutation.graphq
 import handlesErrors from '../../mixins/handles_errors';
 import { removeProfile } from '../../graphql/cache_utils';
 import dastProfilesQuery from '../../graphql/dast_profiles.query.graphql';
-import { SAVED_TAB_TABLE_FIELDS, LEARN_MORE_TEXT } from '../../constants';
+import { SAVED_TAB_TABLE_FIELDS, LEARN_MORE_TEXT, MAX_DAST_PROFILES_COUNT } from '../../constants';
 import BaseTab from './base_tab.vue';
 
 export default {
@@ -34,6 +34,7 @@ export default {
   },
   mixins: [handlesErrors],
   inject: ['projectPath'],
+  maxItemsCount: MAX_DAST_PROFILES_COUNT,
   tableFields: SAVED_TAB_TABLE_FIELDS,
   deleteScanModalId: `delete-scan-modal`,
   i18n: {
@@ -145,6 +146,7 @@ export default {
 
 <template>
   <base-tab
+    :max-items-count="$options.maxItemsCount"
     :query="$options.query"
     :query-variables="$options.queryVariables"
     :title="$options.i18n.title"

ee/app/assets/javascripts/on_demand_scans/components/tabs/scheduled.vue

@@ -3,7 +3,11 @@ import { GlIcon } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
 import DastScanSchedule from 'ee/security_configuration/dast_profiles/components/dast_scan_schedule.vue';
 import scheduledDastProfilesQuery from '../../graphql/scheduled_dast_profiles.query.graphql';
-import { SCHEDULED_TAB_TABLE_FIELDS, LEARN_MORE_TEXT } from '../../constants';
+import {
+  SCHEDULED_TAB_TABLE_FIELDS,
+  LEARN_MORE_TEXT,
+  MAX_DAST_PROFILES_COUNT,
+} from '../../constants';
 import BaseTab from './base_tab.vue';
 
 export default {
@@ -14,6 +18,7 @@ export default {
     DastScanSchedule,
   },
   inject: ['timezones'],
+  maxItemsCount: MAX_DAST_PROFILES_COUNT,
   tableFields: SCHEDULED_TAB_TABLE_FIELDS,
   i18n: {
     title: __('Scheduled'),
@@ -30,6 +35,7 @@ export default {
 
 <template>
   <base-tab
+    :max-items-count="$options.maxItemsCount"
     :query="$options.query"
     :title="$options.i18n.title"
     :fields="$options.tableFields"

ee/app/assets/javascripts/on_demand_scans/constants.js

@@ -13,6 +13,8 @@ export const PIPELINE_TABS_KEYS = ['all', 'running', 'finished', 'scheduled', 's
 export const PIPELINES_PER_PAGE = 20;
 export const PIPELINES_POLL_INTERVAL = 3000;
 export const PIPELINES_COUNT_POLL_INTERVAL = 3000;
+export const MAX_PIPELINES_COUNT = 1000;
+export const MAX_DAST_PROFILES_COUNT = 100;
 
 // Pipeline scopes
 export const PIPELINES_SCOPE_RUNNING = 'RUNNING';

ee/spec/frontend/on_demand_scans/components/tabs/base_tab_spec.js

@@ -122,6 +122,18 @@ describe('BaseTab', () => {
   });
 
   describe('when the app loads', () => {
+    it('formats the items count if it hit its max value', () => {
+      const itemsCount = 10;
+      createComponent({
+        propsData: {
+          itemsCount,
+          maxItemsCount: itemsCount,
+        },
+      });
+
+      expect(findTitle().text()).toMatchInterpolatedText(`All ${itemsCount}+`);
+    });
+
     it('controls the pipelines query with a visibility check', () => {
       jest.spyOn(graphQlUtils, 'toggleQueryPollingByVisibility');
       createComponent();

ee/spec/frontend/on_demand_scans/components/tabs/saved_spec.js

 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
-import { merge } from 'lodash';
+import { merge, cloneDeep } from 'lodash';
 import dastProfilesMock from 'test_fixtures/graphql/on_demand_scans/graphql/dast_profiles.query.graphql.json';
 import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import SavedTab from 'ee/on_demand_scans/components/tabs/saved.vue';
@@ -11,7 +11,11 @@ import dastProfilesQuery from 'ee/on_demand_scans/graphql/dast_profiles.query.gr
 import dastProfileRunMutation from 'ee/on_demand_scans/graphql/dast_profile_run.mutation.graphql';
 import dastProfileDeleteMutation from 'ee/on_demand_scans/graphql/dast_profile_delete.mutation.graphql';
 import { createRouter } from 'ee/on_demand_scans/router';
-import { SAVED_TAB_TABLE_FIELDS, LEARN_MORE_TEXT } from 'ee/on_demand_scans/constants';
+import {
+  SAVED_TAB_TABLE_FIELDS,
+  LEARN_MORE_TEXT,
+  MAX_DAST_PROFILES_COUNT,
+} from 'ee/on_demand_scans/constants';
 import { s__ } from '~/locale';
 import ScanTypeBadge from 'ee/security_configuration/dast_profiles/components/dast_scan_type_badge.vue';
 import flushPromises from 'helpers/flush_promises';
@@ -119,14 +123,17 @@ describe('Saved tab', () => {
   it('renders the base tab with the correct props', () => {
     createComponent();
 
-    expect(findBaseTab().props('title')).toBe(s__('OnDemandScans|Scan library'));
-    expect(findBaseTab().props('itemsCount')).toBe(itemsCount);
-    expect(findBaseTab().props('query')).toBe(dastProfilesQuery);
-    expect(findBaseTab().props('emptyStateTitle')).toBe(
-      s__('OnDemandScans|There are no saved scans.'),
-    );
-    expect(findBaseTab().props('emptyStateText')).toBe(LEARN_MORE_TEXT);
-    expect(findBaseTab().props('fields')).toBe(SAVED_TAB_TABLE_FIELDS);
+    expect(cloneDeep(findBaseTab().props())).toEqual({
+      isActive: true,
+      title: s__('OnDemandScans|Scan library'),
+      itemsCount,
+      maxItemsCount: MAX_DAST_PROFILES_COUNT,
+      query: dastProfilesQuery,
+      queryVariables: {},
+      emptyStateTitle: s__('OnDemandScans|There are no saved scans.'),
+      emptyStateText: LEARN_MORE_TEXT,
+      fields: SAVED_TAB_TABLE_FIELDS,
+    });
   });
 
   it('fetches the profiles', () => {

ee/spec/frontend/on_demand_scans/components/tabs/scheduled_spec.js

 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
-import { merge } from 'lodash';
+import { merge, cloneDeep } from 'lodash';
 import scheduledDastProfilesMock from 'test_fixtures/graphql/on_demand_scans/graphql/scheduled_dast_profiles.query.graphql.json';
 import mockTimezones from 'test_fixtures/timezones/abbr.json';
 import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
@@ -10,7 +10,11 @@ import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import scheduledDastProfilesQuery from 'ee/on_demand_scans/graphql/scheduled_dast_profiles.query.graphql';
 import { createRouter } from 'ee/on_demand_scans/router';
-import { SCHEDULED_TAB_TABLE_FIELDS, LEARN_MORE_TEXT } from 'ee/on_demand_scans/constants';
+import {
+  SCHEDULED_TAB_TABLE_FIELDS,
+  LEARN_MORE_TEXT,
+  MAX_DAST_PROFILES_COUNT,
+} from 'ee/on_demand_scans/constants';
 import { __, s__ } from '~/locale';
 import { stripTimezoneFromISODate } from '~/lib/utils/datetime/date_format_utility';
 import DastScanSchedule from 'ee/security_configuration/dast_profiles/components/dast_scan_schedule.vue';
@@ -81,14 +85,17 @@ describe('Scheduled tab', () => {
   it('renders the base tab with the correct props', () => {
     createComponent();
 
-    expect(findBaseTab().props('title')).toBe(__('Scheduled'));
-    expect(findBaseTab().props('itemsCount')).toBe(itemsCount);
-    expect(findBaseTab().props('query')).toBe(scheduledDastProfilesQuery);
-    expect(findBaseTab().props('emptyStateTitle')).toBe(
-      s__('OnDemandScans|There are no scheduled scans.'),
-    );
-    expect(findBaseTab().props('emptyStateText')).toBe(LEARN_MORE_TEXT);
-    expect(findBaseTab().props('fields')).toBe(SCHEDULED_TAB_TABLE_FIELDS);
+    expect(cloneDeep(findBaseTab().props())).toEqual({
+      isActive: true,
+      title: __('Scheduled'),
+      itemsCount,
+      maxItemsCount: MAX_DAST_PROFILES_COUNT,
+      query: scheduledDastProfilesQuery,
+      queryVariables: {},
+      emptyStateTitle: s__('OnDemandScans|There are no scheduled scans.'),
+      emptyStateText: LEARN_MORE_TEXT,
+      fields: SCHEDULED_TAB_TABLE_FIELDS,
+    });
   });
 
   it('fetches the profiles', () => {