Merge branch '33147-update-cycle-analytics-component' into 'master'

Use options for stateless data in cycle_analytics component

Closes #33147

See merge request gitlab-org/gitlab!18793

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

@@ -39,14 +39,6 @@ export default {
     return {
       multiProjectSelect: true,
       dateOptions: [7, 30, 90],
-      groupsQueryParams: {
-        min_access_level: featureAccessLevel.EVERYONE,
-      },
-      projectsQueryParams: {
-        per_page: PROJECTS_PER_PAGE,
-        with_shared: false,
-        order_by: 'last_activity_at',
-      },
     };
   },
   computed: {
@@ -130,6 +122,14 @@ export default {
       this.setDateRange({ skipFetch: true, startDate, endDate });
     },
   },
+  groupsQueryParams: {
+    min_access_level: featureAccessLevel.EVERYONE,
+  },
+  projectsQueryParams: {
+    per_page: PROJECTS_PER_PAGE,
+    with_shared: false,
+    order_by: 'last_activity_at',
+  },
 };
 </script>
 
@@ -144,7 +144,7 @@ export default {
       >
         <groups-dropdown-filter
           class="js-groups-dropdown-filter dropdown-select"
-          :query-params="groupsQueryParams"
+          :query-params="$options.groupsQueryParams"
           @selected="onGroupSelect"
         />
         <projects-dropdown-filter
@@ -152,7 +152,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"
+          :query-params="$options.projectsQueryParams"
           :multi-select="multiProjectSelect"
           @selected="onProjectsSelect"
         />

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

@@ -120,7 +120,7 @@ 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,
+          wrapper.vm.$options.groupsQueryParams,
         );
       });
 
@@ -156,7 +156,7 @@ describe('Cycle Analytics component', () => {
 
           expect(wrapper.find(ProjectsDropdownFilter).props()).toEqual(
             expect.objectContaining({
-              queryParams: wrapper.vm.projectsQueryParams,
+              queryParams: wrapper.vm.$options.projectsQueryParams,
               groupId: mockData.group.id,
               multiSelect: wrapper.vm.multiProjectSelect,
             }),