Merge branch 'lm-ignore-sentry-errors-from-list-view' into 'master'

Implement ability to ignore Sentry errrors from the list view

See merge request gitlab-org/gitlab!22819

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

@@ -47,6 +47,11 @@ export default {
       thClass: 'w-15p',
       tdClass: 'table-col d-flex align-items-center d-sm-table-cell',
     },
+    {
+      key: 'ignore',
+      label: '',
+      tdClass: 'table-col d-flex align-items-center d-sm-table-cell',
+    },
     {
       key: 'details',
       tdClass: 'table-col d-sm-none d-flex align-items-center',
@@ -97,6 +102,14 @@ export default {
       type: Boolean,
       required: true,
     },
+    projectPath: {
+      type: String,
+      required: true,
+    },
+    listPath: {
+      type: String,
+      required: true,
+    },
   },
   hasLocalStorage: AccessorUtils.isLocalStorageAccessSafe(),
   data() {
@@ -144,6 +157,7 @@ export default {
       'loadRecentSearches',
       'setIndexPath',
       'fetchPaginatedResults',
+      'updateStatus',
     ]),
     setSearchText(text) {
       this.errorSearchQuery = text;
@@ -166,6 +180,16 @@ export default {
     isCurrentSortField(field) {
       return field === this.sortField;
     },
+    getIssueUpdatePath(errorId) {
+      return `/${this.projectPath}/-/error_tracking/${errorId}.json`;
+    },
+    updateIssueStatus(errorId, status) {
+      this.updateStatus({
+        endpoint: this.getIssueUpdatePath(errorId),
+        redirectUrl: this.listPath,
+        status,
+      });
+    },
   },
 };
 </script>
@@ -299,6 +323,16 @@ export default {
               <time-ago :time="errors.item.lastSeen" class="text-secondary" />
             </div>
           </template>
+          <template v-slot:ignore="errors">
+            <gl-button
+              ref="ignoreError"
+              v-gl-tooltip.hover
+              :title="__('Ignore')"
+              @click="updateIssueStatus(errors.item.id, 'ignored')"
+            >
+              <gl-icon name="eye-slash" :size="12" />
+            </gl-button>
+          </template>
           <template v-slot:details="errors">
             <gl-button
               :href="getDetailsLink(errors.item.id)"

app/assets/javascripts/error_tracking/list.js

@@ -13,7 +13,13 @@ export default () => {
     store,
     render(createElement) {
       const domEl = document.querySelector(this.$options.el);
-      const { indexPath, enableErrorTrackingLink, illustrationPath } = domEl.dataset;
+      const {
+        indexPath,
+        enableErrorTrackingLink,
+        illustrationPath,
+        projectPath,
+        listPath,
+      } = domEl.dataset;
       let { errorTrackingEnabled, userCanEnableErrorTracking } = domEl.dataset;
 
       errorTrackingEnabled = parseBoolean(errorTrackingEnabled);
@@ -26,6 +32,8 @@ export default () => {
           errorTrackingEnabled,
           illustrationPath,
           userCanEnableErrorTracking,
+          projectPath,
+          listPath,
         },
       });
     },

app/assets/javascripts/error_tracking/store/index.js

@@ -21,8 +21,8 @@ export const createStore = () =>
       list: {
         namespaced: true,
         state: listState(),
-        actions: listActions,
-        mutations: listMutations,
+        actions: { ...actions, ...listActions },
+        mutations: { ...mutations, ...listMutations },
       },
       details: {
         namespaced: true,

app/helpers/projects/error_tracking_helper.rb

@@ -10,6 +10,8 @@ module Projects::ErrorTrackingHelper
       'user-can-enable-error-tracking' => can?(current_user, :admin_operations, project).to_s,
       'enable-error-tracking-link' => project_settings_operations_path(project),
       'error-tracking-enabled' => error_tracking_enabled.to_s,
+      'project-path' => project.full_path,
+      'list-path' => project_error_tracking_index_path(project),
       'illustration-path' => image_path('illustrations/cluster_popover.svg')
     }
   end

changelogs/unreleased/lm-ignore-sentry-errors-from-list-view.yml

+---
+title: Implement ability to ignore Sentry errrors from the list view
+merge_request: 22819
+author:
+type: added

spec/frontend/error_tracking/components/error_tracking_list_spec.js

@@ -31,6 +31,8 @@ describe('ErrorTrackingList', () => {
       store,
       propsData: {
         indexPath: '/path',
+        listPath: '/error_tracking',
+        projectPath: 'project/test',
         enableErrorTrackingLink: '/link',
         userCanEnableErrorTracking,
         errorTrackingEnabled,
@@ -59,6 +61,7 @@ describe('ErrorTrackingList', () => {
       searchByQuery: jest.fn(),
       sortByField: jest.fn(),
       fetchPaginatedResults: jest.fn(),
+      updateStatus: jest.fn(),
     };
 
     const state = {
@@ -139,6 +142,14 @@ describe('ErrorTrackingList', () => {
       });
     });
 
+    it('each error in the list should have an ignore button', () => {
+      const error = wrapper.findAll('tbody tr');
+
+      error.wrappers.forEach((_, index) => {
+        expect(error.at(index).exists('glicon-stub[name="eye-slash"]')).toBe(true);
+      });
+    });
+
     describe('filtering', () => {
       const findSearchBox = () => wrapper.find(GlFormInput);
 
@@ -205,6 +216,35 @@ describe('ErrorTrackingList', () => {
     });
   });
 
+  describe('When the ignore button on an error is clicked', () => {
+    beforeEach(() => {
+      store.state.list.loading = false;
+      store.state.list.errors = errorsList;
+
+      mountComponent({
+        stubs: {
+          GlTable: false,
+          GlLink: false,
+          GlButton: false,
+        },
+      });
+    });
+
+    it('sends the "ignored" status and error ID', () => {
+      const ignoreButton = wrapper.find({ ref: 'ignoreError' });
+      ignoreButton.trigger('click');
+      expect(actions.updateStatus).toHaveBeenCalledWith(
+        expect.anything(),
+        {
+          endpoint: '/project/test/-/error_tracking/3.json',
+          redirectUrl: '/error_tracking',
+          status: 'ignored',
+        },
+        undefined,
+      );
+    });
+  });
+
   describe('When error tracking is disabled and user is not allowed to enable it', () => {
     beforeEach(() => {
       mountComponent({

spec/helpers/projects/error_tracking_helper_spec.rb

@@ -11,6 +11,8 @@ describe Projects::ErrorTrackingHelper do
   describe '#error_tracking_data' do
     let(:can_enable_error_tracking) { true }
     let(:setting_path) { project_settings_operations_path(project) }
+    let(:list_path) { project_error_tracking_index_path(project) }
+    let(:project_path) { project.full_path }
 
     let(:index_path) do
       project_error_tracking_index_path(project, format: :json)
@@ -30,6 +32,8 @@ describe Projects::ErrorTrackingHelper do
           'user-can-enable-error-tracking' => 'true',
           'enable-error-tracking-link' => setting_path,
           'error-tracking-enabled' => 'false',
+          'list-path' => list_path,
+          'project-path' => project_path,
           'illustration-path' => match_asset_path('/assets/illustrations/cluster_popover.svg')
         )
       end