Merge branch 'lm-replace-buttons-with-group' into 'master'

Replaces separate buttons with button group in error tracking page

See merge request gitlab-org/gitlab!24103

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

@@ -13,6 +13,7 @@ import {
   GlDropdownDivider,
   GlTooltipDirective,
   GlPagination,
+  GlButtonGroup,
 } from '@gitlab/ui';
 import AccessorUtils from '~/lib/utils/accessor';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -20,12 +21,16 @@ import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import { __ } from '~/locale';
 import _ from 'underscore';
 
-export const tableDataClass = 'table-col d-flex d-sm-table-cell';
+export const tableDataClass = 'table-col d-flex d-sm-table-cell align-items-center';
 
 export default {
   FIRST_PAGE: 1,
   PREV_PAGE: 1,
   NEXT_PAGE: 2,
+  statusButtons: [
+    { status: 'ignored', icon: 'eye-slash', title: __('Ignore') },
+    { status: 'resolved', icon: 'check-circle', title: __('Resolve') },
+  ],
   fields: [
     {
       key: 'error',
@@ -48,20 +53,13 @@ export default {
     {
       key: 'lastSeen',
       label: __('Last seen'),
-      thClass: '',
+      thClass: 'w-15p',
       tdClass: `${tableDataClass}`,
     },
     {
-      key: 'ignore',
-      label: '',
-      thClass: 'w-3rem',
-      tdClass: `${tableDataClass} pl-0`,
-    },
-    {
-      key: 'resolved',
+      key: 'status',
       label: '',
-      thClass: 'w-3rem',
-      tdClass: `${tableDataClass} pl-0`,
+      tdClass: `${tableDataClass} text-right`,
     },
     {
       key: 'details',
@@ -88,6 +86,7 @@ export default {
     Icon,
     GlPagination,
     TimeAgo,
+    GlButtonGroup,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -332,25 +331,19 @@ export default {
               <time-ago :time="errors.item.lastSeen" class="text-secondary" />
             </div>
           </template>
-          <template #cell(ignore)="errors">
+          <template #cell(status)="errors">
+            <gl-button-group>
               <gl-button
-              ref="ignoreError"
+                v-for="button in $options.statusButtons"
+                :key="button.status"
+                :ref="button.title.toLowerCase() + 'Error'"
                 v-gl-tooltip.hover
-              :title="__('Ignore')"
-              @click="updateIssueStatus(errors.item.id, 'ignored')"
-            >
-              <gl-icon name="eye-slash" :size="12" />
-            </gl-button>
-          </template>
-          <template #cell(resolved)="errors">
-            <gl-button
-              ref="resolveError"
-              v-gl-tooltip
-              :title="__('Resolve')"
-              @click="updateIssueStatus(errors.item.id, 'resolved')"
+                :title="button.title"
+                @click="updateIssueStatus(errors.item.id, button.status)"
               >
-              <gl-icon name="check-circle" :size="12" />
+                <gl-icon :name="button.icon" :size="12" />
               </gl-button>
+            </gl-button-group>
           </template>
           <template #cell(details)="errors">
             <gl-button

spec/frontend/error_tracking/components/error_tracking_list_spec.js

@@ -239,7 +239,7 @@ describe('ErrorTrackingList', () => {
       expect(actions.updateStatus).toHaveBeenCalledWith(
         expect.anything(),
         {
-          endpoint: '/project/test/-/error_tracking/3.json',
+          endpoint: `/project/test/-/error_tracking/${errorsList[0].id}.json`,
           redirectUrl: '/error_tracking',
           status: 'ignored',
         },
@@ -267,7 +267,7 @@ describe('ErrorTrackingList', () => {
       expect(actions.updateStatus).toHaveBeenCalledWith(
         expect.anything(),
         {
-          endpoint: '/project/test/-/error_tracking/3.json',
+          endpoint: `/project/test/-/error_tracking/${errorsList[0].id}.json`,
           redirectUrl: '/error_tracking',
           status: 'resolved',
         },