Fix error tracking page, not showing an empty state56851-error-tracking-page-seems-broken

This MR adds a missing empty state for when a backend response
contains an empty error list, it shows the table but with
`no data to display` empty state, also adds a reload button
that allows to refresh for data

5 files changed, 47 insertions, 15 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 6981afe1ead..6eb36d73e33 100644
--- a/app/assets/javascripts/error_tracking/components/error_tracking_list.vue
+++ b/app/assets/javascripts/error_tracking/components/error_tracking_list.vue
@@ -48,7 +48,7 @@ export default {
     }
   },
   methods: {
-    ...mapActions(['startPolling']),
+    ...mapActions(['startPolling', 'restartPolling']),
   },
 };
 </script>
@@ -56,19 +56,17 @@ export default {
 <template>
   <div>
     <div v-if="errorTrackingEnabled">
-      <div v-if="loading" class="py-3"><gl-loading-icon :size="3" /></div>
+      <div v-if="loading" class="py-3">
+        <gl-loading-icon :size="3" />
+      </div>
       <div v-else>
         <div class="d-flex justify-content-end">
-          <gl-button class="my-3 ml-auto" variant="primary" :href="externalUrl" target="_blank"
-            >View in Sentry <icon name="external-link" />
+          <gl-button class="my-3 ml-auto" variant="primary" :href="externalUrl" target="_blank">
+            {{ __('View in Sentry') }}
+            <icon name="external-link" />
           </gl-button>
         </div>
-        <gl-table
-          :items="errors"
-          :fields="$options.fields"
-          :show-empty="true"
-          :empty-text="__('No errors to display')"
-        >
+        <gl-table :items="errors" :fields="$options.fields" :show-empty="true">
           <template slot="HEAD_events" slot-scope="data">
             <div class="text-right">{{ data.label }}</div>
           </template>
@@ -102,6 +100,12 @@ export default {
               <time-ago :time="errors.item.lastSeen" class="text-secondary" />
             </div>
           </template>
+          <template slot="empty">
+            <div ref="empty">
+              No errors to display. <gl-link @click="restartPolling">Refresh this page</gl-link> to
+              recheck for errors
+            </div>
+          </template>
         </gl-table>
       </div>
     </div>
diff --git a/app/assets/javascripts/error_tracking/store/actions.js b/app/assets/javascripts/error_tracking/store/actions.js
index 2e192c958ba..40ea723605b 100644
--- a/app/assets/javascripts/error_tracking/store/actions.js
+++ b/app/assets/javascripts/error_tracking/store/actions.js
@@ -6,7 +6,7 @@ import { __ } from '~/locale';
 
 let eTagPoll;
 
-export function startPolling({ commit }, endpoint) {
+export function startPolling({ commit, dispatch }, endpoint) {
   eTagPoll = new Poll({
     resource: Service,
     method: 'getErrorList',
@@ -18,6 +18,7 @@ export function startPolling({ commit }, endpoint) {
       commit(types.SET_ERRORS, data.errors);
       commit(types.SET_EXTERNAL_URL, data.external_url);
       commit(types.SET_LOADING, false);
+      dispatch('stopPolling');
     },
     errorCallback: () => {
       commit(types.SET_LOADING, false);
@@ -28,4 +29,16 @@ export function startPolling({ commit }, endpoint) {
   eTagPoll.makeRequest();
 }
 
+export const stopPolling = () => {
+  if (eTagPoll) eTagPoll.stop();
+};
+
+export function restartPolling({ commit }) {
+  commit(types.SET_ERRORS, []);
+  commit(types.SET_EXTERNAL_URL, '');
+  commit(types.SET_LOADING, true);
+
+  if (eTagPoll) eTagPoll.restart();
+}
+
 export default () => {};
diff --git a/changelogs/unreleased/56851-error-tracking-page-seems-broken.yml b/changelogs/unreleased/56851-error-tracking-page-seems-broken.yml
new file mode 100644
index 00000000000..ff4aebb9381
--- /dev/null
+++ b/changelogs/unreleased/56851-error-tracking-page-seems-broken.yml
@@ -0,0 +1,5 @@
+---
+title: Fix error tracking list page
+merge_request: 24806
+author:
+type: fixed
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 24ca8744414..e5ea8a15390 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -4731,9 +4731,6 @@ msgstr ""
 msgid "No due date"
 msgstr ""
 
-msgid "No errors to display"
-msgstr ""
-
 msgid "No estimate or time spent"
 msgstr ""
 
@@ -7911,6 +7908,9 @@ msgstr ""
 msgid "View group labels"
 msgstr ""
 
+msgid "View in Sentry"
+msgstr ""
+
 msgid "View it on GitLab"
 msgstr ""
 
diff --git a/spec/javascripts/error_tracking/components/error_tracking_list_spec.js b/spec/javascripts/error_tracking/components/error_tracking_list_spec.js
index 08bbb390993..3ae882bdb06 100644
--- a/spec/javascripts/error_tracking/components/error_tracking_list_spec.js
+++ b/spec/javascripts/error_tracking/components/error_tracking_list_spec.js
@@ -1,7 +1,7 @@
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import ErrorTrackingList from '~/error_tracking/components/error_tracking_list.vue';
-import { GlButton, GlEmptyState, GlLoadingIcon, GlTable } from '@gitlab/ui';
+import { GlButton, GlEmptyState, GlLoadingIcon, GlTable, GlLink } from '@gitlab/ui';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -20,12 +20,16 @@ describe('ErrorTrackingList', () => {
         errorTrackingEnabled,
         illustrationPath: 'illustration/path',
       },
+      stubs: {
+        'gl-link': GlLink,
+      },
     });
   }
 
   beforeEach(() => {
     const actions = {
       getErrorList: () => {},
+      startPolling: () => {},
     };
 
     const state = {
@@ -83,6 +87,12 @@ describe('ErrorTrackingList', () => {
       expect(wrapper.find(GlTable).exists()).toBeTruthy();
       expect(wrapper.find(GlButton).exists()).toBeTruthy();
     });
+
+    it('shows a message prompting to refresh', () => {
+      const refreshLink = wrapper.vm.$refs.empty.querySelector('a');
+
+      expect(refreshLink.textContent.trim()).toContain('Refresh this page');
+    });
   });
 
   describe('error tracking feature disabled', () => {