Add latest changes from gitlab-org/gitlab@master

2 files changed, 90 insertions, 56 deletions

diff --git a/app/assets/javascripts/error_tracking/components/error_tracking_actions.vue b/app/assets/javascripts/error_tracking/components/error_tracking_actions.vue
new file mode 100644
index 00000000000..49eb04e331b
--- /dev/null
+++ b/app/assets/javascripts/error_tracking/components/error_tracking_actions.vue
@@ -0,0 +1,80 @@
+<script>
+import { GlButton, GlIcon, GlButtonGroup, GlTooltipDirective } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+const IGNORED = 'ignored';
+const RESOLVED = 'resolved';
+const UNRESOLVED = 'unresolved';
+
+const statusValidation = [IGNORED, RESOLVED, UNRESOLVED];
+
+export default {
+  components: {
+    GlButton,
+    GlIcon,
+    GlButtonGroup,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    error: {
+      type: Object,
+      required: true,
+      validator: ({ status }) => statusValidation.includes(status),
+    },
+  },
+  computed: {
+    ignoreBtn() {
+      return this.error.status !== IGNORED
+        ? { status: IGNORED, icon: 'eye-slash', title: __('Ignore') }
+        : { status: UNRESOLVED, icon: 'eye', title: __('Undo Ignore') };
+    },
+    resolveBtn() {
+      return this.error.status !== RESOLVED
+        ? { status: RESOLVED, icon: 'check-circle', title: __('Resolve') }
+        : { status: UNRESOLVED, icon: 'canceled-circle', title: __('Unresolve') };
+    },
+    detailsLink() {
+      return `error_tracking/${this.error.id}/details`;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-button-group class="flex-column flex-md-row ml-0 ml-md-n4">
+      <gl-button
+        :key="ignoreBtn.status"
+        :ref="`${ignoreBtn.title.toLowerCase()}Error`"
+        v-gl-tooltip.hover
+        class="d-block mb-2 mb-md-0 w-100"
+        :title="ignoreBtn.title"
+        @click="$emit('update-issue-status', { errorId: error.id, status: ignoreBtn.status })"
+      >
+        <gl-icon class="d-none d-md-inline m-0" :name="ignoreBtn.icon" :size="12" />
+        <span class="d-md-none">{{ ignoreBtn.title }}</span>
+      </gl-button>
+      <gl-button
+        :key="resolveBtn.status"
+        :ref="`${resolveBtn.title.toLowerCase()}Error`"
+        v-gl-tooltip.hover
+        class="d-block mb-2 mb-md-0 w-100"
+        :title="resolveBtn.title"
+        @click="$emit('update-issue-status', { errorId: error.id, status: resolveBtn.status })"
+      >
+        <gl-icon class="d-none d-md-inline m-0" :name="resolveBtn.icon" :size="12" />
+        <span class="d-md-none">{{ resolveBtn.title }}</span>
+      </gl-button>
+    </gl-button-group>
+    <gl-button
+      :href="detailsLink"
+      category="secondary"
+      variant="info"
+      class="d-block d-md-none mb-2 mb-md-0"
+    >
+      {{ __('More details') }}
+    </gl-button>
+  </div>
+</template>
diff --git a/app/assets/javascripts/error_tracking/components/error_tracking_list.vue b/app/assets/javascripts/error_tracking/components/error_tracking_list.vue
index 0e160e8d568..ea0baaf4569 100644
--- a/app/assets/javascripts/error_tracking/components/error_tracking_list.vue
+++ b/app/assets/javascripts/error_tracking/components/error_tracking_list.vue
@@ -13,12 +13,12 @@ import {
   GlDropdownDivider,
   GlTooltipDirective,
   GlPagination,
-  GlButtonGroup,
 } from '@gitlab/ui';
 import AccessorUtils from '~/lib/utils/accessor';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import { __ } from '~/locale';
 import { isEmpty } from 'lodash';
+import ErrorTrackingActions from './error_tracking_actions.vue';
 
 export const tableDataClass = 'table-col d-flex d-md-table-cell align-items-center';
 
@@ -26,10 +26,6 @@ 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',
@@ -58,12 +54,7 @@ export default {
     {
       key: 'status',
       label: '',
-      tdClass: `table-col d-none d-md-table-cell align-items-center pl-md-0`,
-    },
-    {
-      key: 'details',
-      tdClass: 'table-col d-md-none d-flex align-items-center rounded-bottom bg-secondary',
-      thClass: 'invisible w-0',
+      tdClass: `${tableDataClass}`,
     },
   ],
   statusFilters: {
@@ -89,7 +80,7 @@ export default {
     GlFormInput,
     GlPagination,
     TimeAgo,
-    GlButtonGroup,
+    ErrorTrackingActions,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -206,7 +197,7 @@ export default {
       this.filterValue = label;
       return this.filterByStatus(status);
     },
-    updateIssueStatus(errorId, status) {
+    updateIssueStatus({ errorId, status }) {
       this.updateStatus({
         endpoint: this.getIssueUpdatePath(errorId),
         status,
@@ -220,8 +211,10 @@ 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 p-0 p-sm-3">
-        <div class="search-box flex-fill mr-sm-2 my-3 m-sm-0 p-3 p-sm-0 bg-secondary">
+      <div
+        class="row flex-column flex-md-row align-items-md-center m-0 mt-sm-2 p-3 p-sm-3 bg-secondary border"
+      >
+        <div class="search-box flex-fill mb-1 mb-md-0">
           <div class="filtered-search-box mb-0">
             <gl-dropdown
               :text="__('Recent searches')"
@@ -273,7 +266,7 @@ export default {
 
         <gl-dropdown
           :text="$options.statusFilters[statusFilter]"
-          class="status-dropdown mr-2"
+          class="status-dropdown mx-md-1 mb-1 mb-md-0"
           menu-class="dropdown"
           :disabled="loading"
         >
@@ -366,46 +359,7 @@ export default {
             </div>
           </template>
           <template #cell(status)="errors">
-            <gl-button-group>
-              <gl-button
-                v-for="button in $options.statusButtons"
-                :key="button.status"
-                :ref="button.title.toLowerCase() + 'Error'"
-                v-gl-tooltip.hover
-                :title="button.title"
-                @click="updateIssueStatus(errors.item.id, button.status)"
-              >
-                <gl-icon :name="button.icon" :size="12" />
-              </gl-button>
-            </gl-button-group>
-          </template>
-          <template #cell(details)="errors">
-            <gl-button
-              category="primary"
-              variant="info"
-              block
-              class="mb-1 mt-2"
-              @click="updateIssueStatus(errors.item.id, 'resolved')"
-            >
-              {{ __('Resolve') }}
-            </gl-button>
-            <gl-button
-              category="secondary"
-              variant="default"
-              block
-              class="mb-2"
-              @click="updateIssueStatus(errors.item.id, 'ignored')"
-            >
-              {{ __('Ignore') }}
-            </gl-button>
-            <gl-button
-              :href="getDetailsLink(errors.item.id)"
-              category="secondary"
-              variant="info"
-              class="d-block mb-2"
-            >
-              {{ __('More details') }}
-            </gl-button>
+            <error-tracking-actions :error="errors.item" @update-issue-status="updateIssueStatus" />
           </template>
           <template #empty>
             {{ __('No errors to display.') }}