Fixed back navigation for projects filter

Filterable list now sends request to filter the projects list
explicitly with `json` extension to avoid breakage when navigating back
from a project to the filtered project's list.

app/assets/javascripts/filterable_list.js

@@ -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() {

app/assets/javascripts/projects/projects_filterable_list.js

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

app/assets/javascripts/projects_list.js

-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();
     }
   }

changelogs/unreleased/62088-search-back.yml

+---
+title: Fixed back navigation for projects filter
+merge_request: 30373
+author:
+type: fixed

spec/frontend/filterable_list_spec.js

+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());
+    });
+  });
+});

spec/frontend/projects/projects_filterable_list_spec.js

+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?');
+    });
+  });
+});