Merge branch '62088-search-back' into 'master'

Fixed back navigation for projects filter

Closes #62088

See merge request gitlab-org/gitlab-ce!30373
This commit is contained in:
Mike Greiling 2019-07-11 05:43:10 +00:00
commit 43eeba0488
6 changed files with 102 additions and 4 deletions

View file

@ -17,11 +17,13 @@ export default class FilterableList {
}
getFilterEndpoint() {
return `${this.filterForm.getAttribute('action')}?${$(this.filterForm).serialize()}`;
return this.getPagePath();
}
getPagePath() {
return this.getFilterEndpoint();
const action = this.filterForm.getAttribute('action');
const params = $(this.filterForm).serialize();
return `${action}${action.indexOf('?') > 0 ? '&' : '?'}${params}`;
}
initSearch() {

View file

@ -0,0 +1,7 @@
import FilterableList from '~/filterable_list';
export default class ProjectsFilterableList extends FilterableList {
getFilterEndpoint() {
return this.getPagePath().replace('/projects?', '/projects.json?');
}
}

View file

@ -1,4 +1,4 @@
import FilterableList from './filterable_list';
import ProjectsFilterableList from './projects/projects_filterable_list';
/**
* Makes search request for projects when user types a value in the search input.
@ -11,7 +11,7 @@ export default class ProjectsList {
const holder = document.querySelector('.js-projects-list-holder');
if (form && filter && holder) {
const list = new FilterableList(form, filter, holder);
const list = new ProjectsFilterableList(form, filter, holder);
list.initSearch();
}
}

View file

@ -0,0 +1,5 @@
---
title: Fixed back navigation for projects filter
merge_request: 30373
author:
type: fixed

View file

@ -0,0 +1,53 @@
import FilterableList from '~/filterable_list';
import { getJSONFixture, setHTMLFixture } from './helpers/fixtures';
describe('FilterableList', () => {
let List;
let form;
let filter;
let holder;
beforeEach(() => {
setHTMLFixture(`
<form id="project-filter-form">
<input name="name" class="js-projects-list-filter" />
</div>
<div class="js-projects-list-holder"></div>
`);
getJSONFixture('static/projects.json');
form = document.querySelector('form#project-filter-form');
filter = document.querySelector('.js-projects-list-filter');
holder = document.querySelector('.js-projects-list-holder');
List = new FilterableList(form, filter, holder);
});
it('processes input parameters', () => {
expect(List.filterForm).toEqual(form);
expect(List.listFilterElement).toEqual(filter);
expect(List.listHolderElement).toEqual(holder);
});
describe('getPagePath', () => {
it('returns properly constructed base endpoint', () => {
List.filterForm.action = '/foo/bar/';
List.listFilterElement.value = 'blah';
expect(List.getPagePath()).toEqual('/foo/bar/?name=blah');
});
it('properly appends custom parameters to existing URL', () => {
List.filterForm.action = '/foo/bar?alpha=beta';
List.listFilterElement.value = 'blah';
expect(List.getPagePath()).toEqual('/foo/bar?alpha=beta&name=blah');
});
});
describe('getFilterEndpoint', () => {
it('returns getPagePath by default', () => {
jest.spyOn(List, 'getPagePath').mockReturnValue('blah/blah/foo');
expect(List.getFilterEndpoint()).toEqual(List.getPagePath());
});
});
});

View file

@ -0,0 +1,31 @@
import ProjectsFilterableList from '~/projects/projects_filterable_list';
import { getJSONFixture, setHTMLFixture } from '../helpers/fixtures';
describe('ProjectsFilterableList', () => {
let List;
let form;
let filter;
let holder;
beforeEach(() => {
setHTMLFixture(`
<form id="project-filter-form">
<input name="name" class="js-projects-list-filter" />
</div>
<div class="js-projects-list-holder"></div>
`);
getJSONFixture('static/projects.json');
form = document.querySelector('form#project-filter-form');
filter = document.querySelector('.js-projects-list-filter');
holder = document.querySelector('.js-projects-list-holder');
List = new ProjectsFilterableList(form, filter, holder);
});
describe('getFilterEndpoint', () => {
it('updates converts getPagePath for projects', () => {
jest.spyOn(List, 'getPagePath').mockReturnValue('blah/projects?');
expect(List.getFilterEndpoint()).toEqual('blah/projects.json?');
});
});
});