Updates styles for table

* adds a fixed width variable

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

@@ -28,29 +28,38 @@ export default {
     {
       key: 'error',
       label: __('Error'),
-      thClass: 'w-70p',
-      tdClass: 'table-col d-flex align-items-center d-sm-table-cell',
+      thClass: 'w-60p',
+      tdClass: 'table-col d-flex d-sm-table-cell px-3',
     },
     {
       key: 'events',
       label: __('Events'),
-      tdClass: 'table-col d-flex align-items-center d-sm-table-cell',
+      thClass: 'text-right',
+      tdClass: 'table-col d-flex d-sm-table-cell',
     },
     {
       key: 'users',
       label: __('Users'),
-      tdClass: 'table-col d-flex align-items-center d-sm-table-cell',
+      thClass: 'text-right',
+      tdClass: 'table-col d-flex d-sm-table-cell',
     },
     {
       key: 'lastSeen',
       label: __('Last seen'),
-      thClass: 'w-15p',
-      tdClass: 'table-col d-flex align-items-center d-sm-table-cell',
+      thClass: '',
+      tdClass: 'table-col d-flex d-sm-table-cell',
     },
     {
       key: 'ignore',
       label: '',
-      tdClass: 'table-col d-flex align-items-center d-sm-table-cell',
+      thClass: 'w-3rem',
+      tdClass: 'table-col d-flex pl-0 d-sm-table-cell',
+    },
+    {
+      key: 'resolved',
+      label: '',
+      thClass: 'w-3rem',
+      tdClass: 'table-col d-flex pl-0 d-sm-table-cell',
     },
     {
       key: 'details',
@@ -197,9 +206,7 @@ export default {
 <template>
   <div class="error-list">
     <div v-if="errorTrackingEnabled">
-      <div
-        class="row flex-column flex-sm-row align-items-sm-center row-top m-0 mt-sm-2 mx-sm-1 p-0 p-sm-3"
-      >
+      <div class="row flex-column flex-sm-row align-items-sm-center row-top m-0 mt-sm-2 p-0 p-sm-3">
         <div class="search-box flex-fill mr-sm-2 my-3 m-sm-0 p-3 p-sm-0">
           <div class="filtered-search-box mb-0">
             <gl-dropdown
@@ -333,6 +340,16 @@ export default {
               <gl-icon name="eye-slash" :size="12" />
             </gl-button>
           </template>
+          <template v-slot:resolved="errors">
+            <gl-button
+              ref="resolveError"
+              v-gl-tooltip
+              :title="__('Resolve')"
+              @click="updateIssueStatus(errors.item.id, 'resolved')"
+            >
+              <gl-icon name="check-circle" :size="12" />
+            </gl-button>
+          </template>
           <template v-slot:details="errors">
             <gl-button
               :href="getDetailsLink(errors.item.id)"

app/assets/stylesheets/framework/common.scss

@@ -461,6 +461,7 @@ img.emoji {
 .w-3rem { width: 3rem; }
 .w-15p { width: 15%; }
 .w-30p { width: 30%; }
+.w-60p { width: 60%; }
 .w-70p { width: 70%; }
 
 .h-12em { height: 12em; }

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

+---
+title: Resolve Sentry errors from error tracking list
+merge_request: 23135
+author:
+type: added

spec/frontend/error_tracking/components/error_tracking_list_spec.js

@@ -143,10 +143,14 @@ describe('ErrorTrackingList', () => {
     });
 
     it('each error in the list should have an ignore button', () => {
-      const error = wrapper.findAll('tbody tr');
+      findErrorListRows().wrappers.forEach(row => {
+        expect(row.contains('glicon-stub[name="eye-slash"]')).toBe(true);
+      });
+    });
 
-      error.wrappers.forEach((_, index) => {
-        expect(error.at(index).exists('glicon-stub[name="eye-slash"]')).toBe(true);
+    it('each error in the list should have a resolve button', () => {
+      findErrorListRows().wrappers.forEach(row => {
+        expect(row.contains('glicon-stub[name="check-circle"]')).toBe(true);
       });
     });
 
@@ -231,8 +235,7 @@ describe('ErrorTrackingList', () => {
     });
 
     it('sends the "ignored" status and error ID', () => {
-      const ignoreButton = wrapper.find({ ref: 'ignoreError' });
-      ignoreButton.trigger('click');
+      wrapper.find({ ref: 'ignoreError' }).trigger('click');
       expect(actions.updateStatus).toHaveBeenCalledWith(
         expect.anything(),
         {
@@ -245,6 +248,34 @@ describe('ErrorTrackingList', () => {
     });
   });
 
+  describe('When the resolve 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 "resolved" status and error ID', () => {
+      wrapper.find({ ref: 'resolveError' }).trigger('click');
+      expect(actions.updateStatus).toHaveBeenCalledWith(
+        expect.anything(),
+        {
+          endpoint: '/project/test/-/error_tracking/3.json',
+          redirectUrl: '/error_tracking',
+          status: 'resolved',
+        },
+        undefined,
+      );
+    });
+  });
+
   describe('When error tracking is disabled and user is not allowed to enable it', () => {
     beforeEach(() => {
       mountComponent({