Merge branch 'lm-refactor-errors' into 'master'

Remove full page refresh when ignoring/resolving errors in Sentry

See merge request gitlab-org/gitlab!24542

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

@@ -168,6 +168,7 @@ export default {
       'setIndexPath',
       'fetchPaginatedResults',
       'updateStatus',
+      'removeIgnoredResolvedErrors',
     ]),
     setSearchText(text) {
       this.errorSearchQuery = text;
@@ -196,9 +197,9 @@ export default {
     updateIssueStatus(errorId, status) {
       this.updateStatus({
         endpoint: this.getIssueUpdatePath(errorId),
-        redirectUrl: this.listPath,
         status,
       });
+      this.removeIgnoredResolvedErrors(errorId);
     },
   },
 };
@@ -235,7 +236,6 @@ export default {
             </gl-dropdown>
             <div class="filtered-search-input-container flex-fill">
               <gl-form-input
-                v-model="errorSearchQuery"
                 class="pl-2 filtered-search"
                 :disabled="loading"
                 :placeholder="__('Search or filter results…')"

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

@@ -100,4 +100,8 @@ export const fetchPaginatedResults = ({ commit, dispatch }, cursor) => {
   dispatch('startPolling');
 };
 
+export const removeIgnoredResolvedErrors = ({ commit }, error) => {
+  commit(types.REMOVE_IGNORED_RESOLVED_ERRORS, error);
+};
+
 export default () => {};

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

@@ -9,3 +9,4 @@ 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';
+export const REMOVE_IGNORED_RESOLVED_ERRORS = 'REMOVE_IGNORED_RESOLVED_ERRORS';

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

@@ -59,4 +59,7 @@ export default {
   [types.SET_ENDPOINT](state, endpoint) {
     state.endpoint = endpoint;
   },
+  [types.REMOVE_IGNORED_RESOLVED_ERRORS](state, error) {
+    state.errors = state.errors.filter(err => err.id !== error);
+  },
 };

spec/frontend/error_tracking/components/error_tracking_list_spec.js

@@ -62,6 +62,7 @@ describe('ErrorTrackingList', () => {
       sortByField: jest.fn(),
       fetchPaginatedResults: jest.fn(),
       updateStatus: jest.fn(),
+      removeIgnoredResolvedErrors: jest.fn(),
     };
 
     const state = {
@@ -221,6 +222,8 @@ describe('ErrorTrackingList', () => {
   });
 
   describe('When the ignore button on an error is clicked', () => {
+    const ignoreErrorButton = () => wrapper.find({ ref: 'ignoreError' });
+
     beforeEach(() => {
       store.state.list.loading = false;
       store.state.list.errors = errorsList;
@@ -235,20 +238,30 @@ describe('ErrorTrackingList', () => {
     });
 
     it('sends the "ignored" status and error ID', () => {
-      wrapper.find({ ref: 'ignoreError' }).trigger('click');
+      ignoreErrorButton().trigger('click');
       expect(actions.updateStatus).toHaveBeenCalledWith(
         expect.anything(),
         {
           endpoint: `/project/test/-/error_tracking/${errorsList[0].id}.json`,
-          redirectUrl: '/error_tracking',
           status: 'ignored',
         },
         undefined,
       );
     });
+
+    it('calls an action to remove the item from the list', () => {
+      ignoreErrorButton().trigger('click');
+      expect(actions.removeIgnoredResolvedErrors).toHaveBeenCalledWith(
+        expect.anything(),
+        '1',
+        undefined,
+      );
+    });
   });
 
   describe('When the resolve button on an error is clicked', () => {
+    const resolveErrorButton = () => wrapper.find({ ref: 'resolveError' });
+
     beforeEach(() => {
       store.state.list.loading = false;
       store.state.list.errors = errorsList;
@@ -263,17 +276,25 @@ describe('ErrorTrackingList', () => {
     });
 
     it('sends "resolved" status and error ID', () => {
-      wrapper.find({ ref: 'resolveError' }).trigger('click');
+      resolveErrorButton().trigger('click');
       expect(actions.updateStatus).toHaveBeenCalledWith(
         expect.anything(),
         {
           endpoint: `/project/test/-/error_tracking/${errorsList[0].id}.json`,
-          redirectUrl: '/error_tracking',
           status: 'resolved',
         },
         undefined,
       );
     });
+
+    it('calls an action to remove the item from the list', () => {
+      resolveErrorButton().trigger('click');
+      expect(actions.removeIgnoredResolvedErrors).toHaveBeenCalledWith(
+        expect.anything(),
+        '1',
+        undefined,
+      );
+    });
   });
 
   describe('When error tracking is disabled and user is not allowed to enable it', () => {

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

@@ -5,6 +5,7 @@ import * as types from '~/error_tracking/store/list/mutation_types';
 const ADD_RECENT_SEARCH = mutations[types.ADD_RECENT_SEARCH];
 const CLEAR_RECENT_SEARCHES = mutations[types.CLEAR_RECENT_SEARCHES];
 const LOAD_RECENT_SEARCHES = mutations[types.LOAD_RECENT_SEARCHES];
+const REMOVE_IGNORED_RESOLVED_ERRORS = mutations[types.REMOVE_IGNORED_RESOLVED_ERRORS];
 
 describe('Error tracking mutations', () => {
   describe('SET_ERRORS', () => {
@@ -114,5 +115,29 @@ describe('Error tracking mutations', () => {
         expect(localStorage.getItem).toHaveBeenCalledWith('recent-searches/project/errors.json');
       });
     });
+
+    describe('REMOVE_IGNORED_RESOLVED_ERRORS', () => {
+      it('removes ignored or resolved errors from list', () => {
+        state.errors = [
+          {
+            id: 1,
+            status: 'unresolved',
+          },
+          {
+            id: 2,
+            status: 'ignored',
+          },
+          {
+            id: 3,
+            status: 'unresolved',
+          },
+        ];
+        const ignoredError = state.errors[2].id;
+
+        REMOVE_IGNORED_RESOLVED_ERRORS(state, ignoredError);
+
+        expect(state.errors).not.toContain(ignoredError);
+      });
+    });
   });
 });