Add latest changes from gitlab-org/gitlab@master

1 files changed, 39 insertions, 6 deletions

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 552e8cac3a7..80a88489545 100644
--- a/app/assets/javascripts/error_tracking/components/error_tracking_list.vue
+++ b/app/assets/javascripts/error_tracking/components/error_tracking_list.vue
@@ -16,7 +16,6 @@ import {
   GlButtonGroup,
 } from '@gitlab/ui';
 import AccessorUtils from '~/lib/utils/accessor';
-import Icon from '~/vue_shared/components/icon.vue';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import { __ } from '~/locale';
 import { isEmpty } from 'lodash';
@@ -59,7 +58,7 @@ export default {
     {
       key: 'status',
       label: '',
-      tdClass: `${tableDataClass} text-right`,
+      tdClass: `${tableDataClass} text-center`,
     },
     {
       key: 'details',
@@ -67,6 +66,11 @@ export default {
       thClass: 'invisible w-0',
     },
   ],
+  statusFilters: {
+    unresolved: __('Unresolved'),
+    ignored: __('Ignored'),
+    resolved: __('Resolved'),
+  },
   sortFields: {
     last_seen: __('Last Seen'),
     first_seen: __('First Seen'),
@@ -83,7 +87,6 @@ export default {
     GlLoadingIcon,
     GlTable,
     GlFormInput,
-    Icon,
     GlPagination,
     TimeAgo,
     GlButtonGroup,
@@ -136,6 +139,7 @@ export default {
       'sortField',
       'recentSearches',
       'pagination',
+      'statusFilter',
       'cursor',
     ]),
     paginationRequired() {
@@ -169,6 +173,7 @@ export default {
       'fetchPaginatedResults',
       'updateStatus',
       'removeIgnoredResolvedErrors',
+      'filterByStatus',
     ]),
     setSearchText(text) {
       this.errorSearchQuery = text;
@@ -191,9 +196,16 @@ export default {
     isCurrentSortField(field) {
       return field === this.sortField;
     },
+    isCurrentStatusFilter(filter) {
+      return filter === this.statusFilter;
+    },
     getIssueUpdatePath(errorId) {
       return `/${this.projectPath}/-/error_tracking/${errorId}.json`;
     },
+    filterErrors(status, label) {
+      this.filterValue = label;
+      return this.filterByStatus(status);
+    },
     updateIssueStatus(errorId, status) {
       this.updateStatus({
         endpoint: this.getIssueUpdatePath(errorId),
@@ -260,11 +272,32 @@ export default {
         </div>
 
         <gl-dropdown
-          class="sort-control"
+          :text="$options.statusFilters[statusFilter]"
+          class="status-dropdown mr-2"
+          menu-class="dropdown"
+          :disabled="loading"
+        >
+          <gl-dropdown-item
+            v-for="(label, status) in $options.statusFilters"
+            :key="status"
+            @click="filterErrors(status, label)"
+          >
+            <span class="d-flex">
+              <gl-icon
+                class="flex-shrink-0 append-right-4"
+                :class="{ invisible: !isCurrentStatusFilter(status) }"
+                name="mobile-issue-close"
+              />
+              {{ label }}
+            </span>
+          </gl-dropdown-item>
+        </gl-dropdown>
+
+        <gl-dropdown
           :text="$options.sortFields[sortField]"
           left
           :disabled="loading"
-          menu-class="sort-dropdown"
+          menu-class="dropdown"
         >
           <gl-dropdown-item
             v-for="(label, field) in $options.sortFields"
@@ -272,7 +305,7 @@ export default {
             @click="sortByField(field)"
           >
             <span class="d-flex">
-              <icon
+              <gl-icon
                 class="flex-shrink-0 append-right-4"
                 :class="{ invisible: !isCurrentSortField(field) }"
                 name="mobile-issue-close"