Merge branch '31937-bugs-to-fix-for-cycle-analytics-before-release' into 'master'

Increase and sort number of options displayed for cycle analytics projects dropdown

See merge request gitlab-org/gitlab!16906

ee/app/assets/javascripts/analytics/cycle_analytics/components/base.vue

@@ -3,6 +3,7 @@ import { GlEmptyState } from '@gitlab/ui';
 import { mapActions, mapState, mapGetters } from 'vuex';
 import { featureAccessLevel } from '~/pages/projects/shared/permissions/constants';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import { PROJECTS_PER_PAGE } from '../constants';
 import GroupsDropdownFilter from '../../shared/components/groups_dropdown_filter.vue';
 import ProjectsDropdownFilter from '../../shared/components/projects_dropdown_filter.vue';
 import DateRangeDropdown from '../../shared/components/date_range_dropdown.vue';
@@ -41,6 +42,11 @@ export default {
       groupsQueryParams: {
         min_access_level: featureAccessLevel.EVERYONE,
       },
+      projectsQueryParams: {
+        per_page: PROJECTS_PER_PAGE,
+        with_shared: false,
+        order_by: 'last_activity_at',
+      },
     };
   },
   computed: {
@@ -131,6 +137,7 @@ export default {
           :key="selectedGroup.id"
           class="js-projects-dropdown-filter ml-md-1 mt-1 mt-md-0 dropdown-select"
           :group-id="selectedGroup.id"
+          :query-params="projectsQueryParams"
           :multi-select="multiProjectSelect"
           @selected="onProjectsSelect"
         />

ee/app/assets/javascripts/analytics/cycle_analytics/constants.js

 import { __ } from '~/locale';
 
+export const PROJECTS_PER_PAGE = 50;
+
 export const DEFAULT_DATA_TIME_FRAME = 30;
 
 export const EVENTS_LIST_ITEM_LIMIT = 50;

ee/spec/frontend/analytics/cycle_analytics/components/base_spec.js

@@ -99,6 +99,9 @@ describe('Cycle Analytics component', () => {
 
       it('displays the groups filter', () => {
         expect(wrapper.find(GroupsDropdownFilter).exists()).toBe(true);
+        expect(wrapper.find(GroupsDropdownFilter).props('queryParams')).toEqual(
+          wrapper.vm.groupsQueryParams,
+        );
       });
 
       it('does not display the projects filter', () => {
@@ -130,6 +133,14 @@ describe('Cycle Analytics component', () => {
 
         it('displays the projects filter', () => {
           displaysProjectsDropdownFilter(true);
+
+          expect(wrapper.find(ProjectsDropdownFilter).props()).toEqual(
+            expect.objectContaining({
+              queryParams: wrapper.vm.projectsQueryParams,
+              groupId: mockData.group.id,
+              multiSelect: wrapper.vm.multiProjectSelect,
+            }),
+          );
         });
 
         it('displays the date range dropdown', () => {

ee/spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js

@@ -61,6 +61,31 @@ describe('ProjectsDropdownFilter component', () => {
   const findDropdownItems = () => findDropdown().findAll('a');
   const findDropdownButton = () => findDropdown().find('button');
 
+  describe('queryParams are applied when fetching data', () => {
+    beforeEach(() => {
+      createComponent({
+        queryParams: {
+          per_page: 50,
+          with_shared: false,
+          order_by: 'last_activity_at',
+        },
+      });
+
+      openDropdown();
+
+      return wrapper.vm.$nextTick();
+    });
+
+    it('applies the correct queryParams when making an api call', () => {
+      expect(Api.groupProjects).toHaveBeenCalledWith(
+        expect.any(Number),
+        expect.any(String),
+        expect.objectContaining({ per_page: 50, with_shared: false, order_by: 'last_activity_at' }),
+        expect.any(Function),
+      );
+    });
+  });
+
   describe('when multiSelect is false', () => {
     beforeEach(() => {
       createComponent({ multiSelect: false });