Merge branch 'update-search-functionality' into 'master'

Update search functionality / fix sort by for sentry errors

See merge request gitlab-org/gitlab!21981

app/assets/javascripts/error_tracking/components/error_tracking_list.vue

@@ -113,6 +113,7 @@ export default {
       'sortField',
       'recentSearches',
       'pagination',
+      'cursor',
     ]),
     paginationRequired() {
       return !_.isEmpty(this.pagination);
@@ -142,6 +143,7 @@ export default {
       'clearRecentSearches',
       'loadRecentSearches',
       'setIndexPath',
+      'fetchPaginatedResults',
     ]),
     setSearchText(text) {
       this.errorSearchQuery = text;
@@ -152,10 +154,10 @@ export default {
     },
     goToNextPage() {
       this.pageValue = this.$options.NEXT_PAGE;
-      this.startPolling(`${this.indexPath}?cursor=${this.pagination.next.cursor}`);
+      this.fetchPaginatedResults(this.pagination.next.cursor);
     },
     goToPrevPage() {
-      this.startPolling(`${this.indexPath}?cursor=${this.pagination.previous.cursor}`);
+      this.fetchPaginatedResults(this.pagination.previous.cursor);
     },
     goToPage(page) {
       window.scrollTo(0, 0);

app/assets/javascripts/error_tracking/store/list/actions.js

@@ -17,12 +17,14 @@ export function startPolling({ state, commit, dispatch }) {
       params: {
         search_term: state.searchQuery,
         sort: state.sortField,
+        cursor: state.cursor,
       },
     },
     successCallback: ({ data }) => {
       if (!data) {
         return;
       }
+
       commit(types.SET_PAGINATION, data.pagination);
       commit(types.SET_ERRORS, data.errors);
       commit(types.SET_LOADING, false);
@@ -74,6 +76,7 @@ export function clearRecentSearches({ commit }) {
 
 export const searchByQuery = ({ commit, dispatch }, query) => {
   const searchQuery = query.trim();
+  commit(types.SET_CURSOR, null);
   commit(types.SET_SEARCH_QUERY, searchQuery);
   commit(types.ADD_RECENT_SEARCH, searchQuery);
   dispatch('stopPolling');
@@ -81,6 +84,7 @@ export const searchByQuery = ({ commit, dispatch }, query) => {
 };
 
 export const sortByField = ({ commit, dispatch }, field) => {
+  commit(types.SET_CURSOR, null);
   commit(types.SET_SORT_FIELD, field);
   dispatch('stopPolling');
   dispatch('startPolling');
@@ -90,4 +94,10 @@ export const setEndpoint = ({ commit }, endpoint) => {
   commit(types.SET_ENDPOINT, endpoint);
 };
 
+export const fetchPaginatedResults = ({ commit, dispatch }, cursor) => {
+  commit(types.SET_CURSOR, cursor);
+  dispatch('stopPolling');
+  dispatch('startPolling');
+};
+
 export default () => {};

app/assets/javascripts/error_tracking/store/list/mutation_types.js

@@ -8,3 +8,4 @@ export const SET_PAGINATION = 'SET_PAGINATION';
 export const SET_ENDPOINT = 'SET_ENDPOINT';
 export const SET_SORT_FIELD = 'SET_SORT_FIELD';
 export const SET_SEARCH_QUERY = 'SET_SEARCH_QUERY';
+export const SET_CURSOR = 'SET_CURSOR';

app/assets/javascripts/error_tracking/store/list/mutations.js

@@ -47,6 +47,9 @@ export default {
   [types.SET_PAGINATION](state, pagination) {
     state.pagination = pagination;
   },
+  [types.SET_CURSOR](state, cursor) {
+    state.cursor = cursor;
+  },
   [types.SET_SORT_FIELD](state, field) {
     state.sortField = field;
   },

app/assets/javascripts/error_tracking/store/list/state.js

@@ -7,4 +7,5 @@ export default () => ({
   indexPath: '',
   recentSearches: [],
   pagination: {},
+  cursor: null,
 });

spec/frontend/error_tracking/components/error_tracking_list_spec.js

@@ -71,6 +71,7 @@ describe('ErrorTrackingList', () => {
       setEndpoint: jest.fn(),
       searchByQuery: jest.fn(),
       sortByField: jest.fn(),
+      fetchPaginatedResults: jest.fn(),
     };
 
     const state = {
@@ -305,10 +306,10 @@ describe('ErrorTrackingList', () => {
         it('fetches the previous page of results', () => {
           expect(wrapper.find('.prev-page-item').attributes('aria-disabled')).toBe(undefined);
           wrapper.vm.goToPrevPage();
-          expect(actions.startPolling).toHaveBeenCalledTimes(2);
-          expect(actions.startPolling).toHaveBeenLastCalledWith(
+          expect(actions.fetchPaginatedResults).toHaveBeenCalled();
+          expect(actions.fetchPaginatedResults).toHaveBeenLastCalledWith(
             expect.anything(),
-            '/path?cursor=previousCursor',
+            'previousCursor',
             undefined,
           );
         });
@@ -324,10 +325,10 @@ describe('ErrorTrackingList', () => {
           window.scrollTo = jest.fn();
           findPagination().vm.$emit('input', 2);
           expect(window.scrollTo).toHaveBeenCalledWith(0, 0);
-          expect(actions.startPolling).toHaveBeenCalledTimes(2);
-          expect(actions.startPolling).toHaveBeenLastCalledWith(
+          expect(actions.fetchPaginatedResults).toHaveBeenCalled();
+          expect(actions.fetchPaginatedResults).toHaveBeenLastCalledWith(
             expect.anything(),
-            '/path?cursor=nextCursor',
+            'nextCursor',
             undefined,
           );
         });

spec/frontend/error_tracking/store/list/actions_spec.js

@@ -79,6 +79,7 @@ describe('error tracking actions', () => {
         query,
         {},
         [
+          { type: types.SET_CURSOR, payload: null },
           { type: types.SET_SEARCH_QUERY, payload: query },
           { type: types.ADD_RECENT_SEARCH, payload: query },
         ],
@@ -93,15 +94,15 @@ describe('error tracking actions', () => {
 
       testAction(
         actions.sortByField,
-        { field },
+        field,
         {},
-        [{ type: types.SET_SORT_FIELD, payload: { field } }],
+        [{ type: types.SET_CURSOR, payload: null }, { type: types.SET_SORT_FIELD, payload: field }],
         [{ type: 'stopPolling' }, { type: 'startPolling' }],
       );
     });
   });
 
-  describe('setEnpoint', () => {
+  describe('setEndpoint', () => {
     it('should set search endpoint', () => {
       const endpoint = 'https://sentry.io';
 
@@ -114,4 +115,17 @@ describe('error tracking actions', () => {
       );
     });
   });
+
+  describe('fetchPaginatedResults', () => {
+    it('should start polling the selected page cursor', () => {
+      const cursor = '1576637570000:1:1';
+      testAction(
+        actions.fetchPaginatedResults,
+        cursor,
+        {},
+        [{ type: types.SET_CURSOR, payload: cursor }],
+        [{ type: 'stopPolling' }, { type: 'startPolling' }],
+      );
+    });
+  });
 });