Adds a queryParams prop to the projects dropdown

- Increase number of projects to load to 50 and
excludes forks
- Pass groupId and projectId from dropdown to filter

ee/app/assets/javascripts/analytics/productivity_analytics/components/filter_dropdowns.vue

@@ -2,7 +2,7 @@
 import { mapState, mapActions } from 'vuex';
 import GroupsDropdownFilter from '../../shared/components/groups_dropdown_filter.vue';
 import ProjectsDropdownFilter from '../../shared/components/projects_dropdown_filter.vue';
-import { accessLevelReporter } from '../constants';
+import { accessLevelReporter, projectsPerPage } from '../constants';
 
 export default {
   components: {
@@ -15,6 +15,10 @@ export default {
       groupsQueryParams: {
         min_access_level: accessLevelReporter,
       },
+      projectsQueryParams: {
+        per_page: projectsPerPage,
+        with_shared: false, // exclude forks
+      },
     };
   },
   computed: {
@@ -28,16 +32,23 @@ export default {
     onGroupSelected({ id, full_path }) {
       this.groupId = id;
       this.setGroupNamespace(full_path);
-      this.$emit('groupSelected', full_path);
+      this.$emit('groupSelected', { groupId: id, groupNamespace: full_path });
     },
     onProjectsSelected(selectedProjects) {
-      const pathWithNamespace = selectedProjects.length
-        ? selectedProjects[0].path_with_namespace
-        : null;
-      this.setProjectPath(pathWithNamespace);
+      let projectNamespace = null;
+      let projectId = null;
+
+      if (selectedProjects.length) {
+        projectNamespace = selectedProjects[0].path_with_namespace;
+        projectId = selectedProjects[0].id;
+      }
+
+      this.setProjectPath(projectNamespace);
       this.$emit('projectSelected', {
-        namespacePath: this.groupNamespace,
-        project: pathWithNamespace,
+        groupNamespace: this.groupNamespace,
+        groupId: this.groupId,
+        projectNamespace,
+        projectId,
       });
     },
   },
@@ -55,6 +66,7 @@ export default {
       v-if="showProjectsDropdownFilter"
       :key="groupId"
       class="project-select"
+      :query-params="projectsQueryParams"
       :group-id="groupId"
       @selected="onProjectsSelected"
     />

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

@@ -95,3 +95,5 @@ export const dataZoomOptions = [
 export const columnHighlightStyle = { color: '#418cd8', opacity: 0.8 };
 
 export const accessLevelReporter = 20;
+
+export const projectsPerPage = 50;

ee/app/assets/javascripts/analytics/productivity_analytics/index.js

@@ -25,13 +25,13 @@ export default () => {
     el: groupProjectSelectContainer,
     store,
     methods: {
-      onGroupSelected(namespacePath) {
-        this.initFilteredSearch(namespacePath);
+      onGroupSelected({ groupNamespace, groupId }) {
+        this.initFilteredSearch({ groupNamespace, groupId });
       },
-      onProjectSelected({ namespacePath, project }) {
-        this.initFilteredSearch(namespacePath, project);
+      onProjectSelected({ groupNamespace, groupId, projectNamespace, projectId }) {
+        this.initFilteredSearch({ groupNamespace, groupId, projectNamespace, projectId });
       },
-      initFilteredSearch(namespacePath, project = '') {
+      initFilteredSearch({ groupNamespace, groupId, projectNamespace = '', projectId = null }) {
         // let's unbind attached event handlers first and reset the template
         if (filterManager) {
           filterManager.cleanup();
@@ -41,13 +41,13 @@ export default () => {
         searchBarContainer.classList.remove('hide');
 
         const filteredSearchInput = searchBarContainer.querySelector('.filtered-search');
-        const labelsEndpoint = this.getLabelsEndpoint(namespacePath, project);
-        const milestonesEndpoint = this.getMilestonesEndpoint(namespacePath, project);
+        const labelsEndpoint = this.getLabelsEndpoint(groupNamespace, projectNamespace);
+        const milestonesEndpoint = this.getMilestonesEndpoint(groupNamespace, projectNamespace);
 
-        filteredSearchInput.setAttribute('data-group-id', namespacePath);
+        filteredSearchInput.setAttribute('data-group-id', groupId);
 
-        if (project) {
-          filteredSearchInput.setAttribute('data-project-id', project);
+        if (projectId) {
+          filteredSearchInput.setAttribute('data-project-id', projectId);
         }
 
         filteredSearchInput.setAttribute('data-labels-endpoint', labelsEndpoint);

ee/app/assets/javascripts/analytics/shared/components/projects_dropdown_filter.vue

@@ -30,6 +30,11 @@ export default {
       required: false,
       default: s__('CycleAnalytics|project dropdown filter'),
     },
+    queryParams: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
   },
   data() {
     return {
@@ -95,7 +100,7 @@ export default {
     },
     fetchData(term, callback) {
       this.loading = true;
-      return Api.groupProjects(this.groupId, term, {}, projects => {
+      return Api.groupProjects(this.groupId, term, this.queryParams, projects => {
         this.loading = false;
         callback(projects);
       });

ee/spec/frontend/analytics/productivity_analytics/components/filter_dropdowns_spec.js

@@ -17,8 +17,10 @@ describe('FilterDropdowns component', () => {
     setProjectPath: jest.fn(),
   };
 
+  const groupId = 1;
   const groupNamespace = 'gitlab-org';
   const projectPath = 'gitlab-org/gitlab-test';
+  const projectId = 10;
 
   beforeEach(() => {
     wrapper = shallowMount(localVue.extend(FilterDropdowns), {
@@ -54,7 +56,7 @@ describe('FilterDropdowns component', () => {
 
     describe('with a group selected', () => {
       beforeEach(() => {
-        wrapper.vm.groupId = 1;
+        wrapper.vm.groupId = groupId;
       });
 
       it('renders the projects dropdown', () => {
@@ -66,7 +68,7 @@ describe('FilterDropdowns component', () => {
   describe('methods', () => {
     describe('onGroupSelected', () => {
       beforeEach(() => {
-        wrapper.vm.onGroupSelected({ id: 1, full_path: groupNamespace });
+        wrapper.vm.onGroupSelected({ id: groupId, full_path: groupNamespace });
       });
 
       it('updates the groupId and invokes setGroupNamespace action', () => {
@@ -75,15 +77,22 @@ describe('FilterDropdowns component', () => {
       });
 
       it('emits the "groupSelected" event', () => {
-        expect(wrapper.emitted().groupSelected[0][0]).toBe(groupNamespace);
+        expect(wrapper.emitted().groupSelected[0][0]).toEqual({
+          groupNamespace,
+          groupId,
+        });
       });
     });
 
     describe('onProjectsSelected', () => {
+      beforeEach(() => {
+        wrapper.vm.groupId = groupId;
+      });
+
       describe('when the list of selected projects is not empty', () => {
         beforeEach(() => {
           store.state.filters.groupNamespace = groupNamespace;
-          wrapper.vm.onProjectsSelected([{ id: 1, path_with_namespace: `${projectPath}` }]);
+          wrapper.vm.onProjectsSelected([{ id: projectId, path_with_namespace: `${projectPath}` }]);
         });
 
         it('invokes setProjectPath action', () => {
@@ -92,8 +101,10 @@ describe('FilterDropdowns component', () => {
 
         it('emits the "projectSelected" event', () => {
           expect(wrapper.emitted().projectSelected[0][0]).toEqual({
-            namespacePath: groupNamespace,
-            project: projectPath,
+            groupNamespace,
+            groupId,
+            projectNamespace: projectPath,
+            projectId,
           });
         });
       });
@@ -110,8 +121,10 @@ describe('FilterDropdowns component', () => {
 
         it('emits the "projectSelected" event', () => {
           expect(wrapper.emitted().projectSelected[0][0]).toEqual({
-            namespacePath: groupNamespace,
-            project: null,
+            groupNamespace,
+            groupId,
+            projectNamespace: null,
+            projectId: null,
           });
         });
       });