Commit 8d10487a authored by Martin Wortschack's avatar Martin Wortschack Committed by Kushal Pandya

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
parent f57052ac
......@@ -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"
/>
......
......@@ -95,3 +95,5 @@ export const dataZoomOptions = [
export const columnHighlightStyle = { color: '#418cd8', opacity: 0.8 };
export const accessLevelReporter = 20;
export const projectsPerPage = 50;
......@@ -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);
......
......@@ -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);
});
......
......@@ -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,
});
});
});
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment