Merge branch...

Merge branch '338396-integrations-override-table-don-t-show-empty-state-when-error-occurs' into 'master'

Integrations override table: Don't show empty state when error occurs

See merge request gitlab-org/gitlab!71255

app/assets/javascripts/integrations/overrides/components/integration_overrides.vue

 <script>
-import { GlLink, GlLoadingIcon, GlPagination, GlTable } from '@gitlab/ui';
+import { GlLink, GlLoadingIcon, GlPagination, GlTable, GlAlert } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 
 import { DEFAULT_PER_PAGE } from '~/api';
-import createFlash from '~/flash';
 import { fetchOverrides } from '~/integrations/overrides/api';
 import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
 import { truncateNamespace } from '~/lib/utils/text_utility';
@@ -16,6 +16,7 @@ export default {
     GlLoadingIcon,
     GlPagination,
     GlTable,
+    GlAlert,
     ProjectAvatar,
   },
   props: {
@@ -36,6 +37,7 @@ export default {
       overrides: [],
       page: 1,
       totalItems: 0,
+      errorMessage: null,
     };
   },
   computed: {
@@ -49,6 +51,7 @@ export default {
   methods: {
     loadOverrides(page = this.page) {
       this.isLoading = true;
+      this.errorMessage = null;
 
       fetchOverrides(this.overridesPath, {
         page,
@@ -61,11 +64,9 @@ export default {
           this.overrides = data;
         })
         .catch((error) => {
-          createFlash({
-            message: this.$options.i18n.defaultErrorMessage,
-            error,
-            captureError: true,
-          });
+          this.errorMessage = this.$options.i18n.defaultErrorMessage;
+
+          Sentry.captureException(error);
         })
         .finally(() => {
           this.isLoading = false;
@@ -85,7 +86,11 @@ export default {
 
 <template>
   <div>
+    <gl-alert v-if="errorMessage" variant="danger" :dismissible="false">
+      {{ errorMessage }}
+    </gl-alert>
     <gl-table
+      v-else
       :items="overrides"
       :fields="$options.fields"
       :busy="isLoading"

spec/frontend/integrations/overrides/components/integration_overrides_spec.js

-import { GlTable, GlLink, GlPagination } from '@gitlab/ui';
+import { GlTable, GlLink, GlPagination, GlAlert } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 import { shallowMount, mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import waitForPromises from 'helpers/wait_for_promises';
 import { DEFAULT_PER_PAGE } from '~/api';
-import createFlash from '~/flash';
 import IntegrationOverrides from '~/integrations/overrides/components/integration_overrides.vue';
 import axios from '~/lib/utils/axios_utils';
 import httpStatus from '~/lib/utils/http_status';
 import ProjectAvatar from '~/vue_shared/components/project_avatar.vue';
 
-jest.mock('~/flash');
-
 const mockOverrides = Array(DEFAULT_PER_PAGE * 3)
   .fill(1)
   .map((_, index) => ({
@@ -62,6 +60,7 @@ describe('IntegrationOverrides', () => {
           text: link.text(),
         };
       });
+  const findAlert = () => wrapper.findComponent(GlAlert);
 
   describe('while loading', () => {
     it('sets GlTable `busy` attribute to `true`', () => {
@@ -104,18 +103,26 @@ describe('IntegrationOverrides', () => {
 
   describe('when request fails', () => {
     beforeEach(async () => {
+      jest.spyOn(Sentry, 'captureException');
       mockAxios.onGet(defaultProps.overridesPath).reply(httpStatus.INTERNAL_SERVER_ERROR);
+
       createComponent();
       await waitForPromises();
     });
 
-    it('calls createFlash', () => {
-      expect(createFlash).toHaveBeenCalledTimes(1);
-      expect(createFlash).toHaveBeenCalledWith({
-        message: IntegrationOverrides.i18n.defaultErrorMessage,
-        captureError: true,
-        error: expect.any(Error),
-      });
+    it('displays error alert', () => {
+      const alert = findAlert();
+      expect(alert.exists()).toBe(true);
+      expect(alert.text()).toBe(IntegrationOverrides.i18n.defaultErrorMessage);
+    });
+
+    it('hides overrides table', () => {
+      const table = findGlTable();
+      expect(table.exists()).toBe(false);
+    });
+
+    it('captures exception in Sentry', () => {
+      expect(Sentry.captureException).toHaveBeenCalledWith(expect.any(Error));
     });
   });