External issues list: Don't show empty state when error occurs

What does this MR do and why?

Related to #338396 (closed) (as per MR title!).

Because this MR introduces GlAlert, we'll be able to put links to docs in error messages: #337996 (closed)

Screenshots or screen recordings

jira-issues-list-error

How to set up and validate locally

1. Select a GitLab project on your local GitLab instance.
2. Enable and configure the Jira integration for the project. More information.
   • GitLab team members: use the Jira credentials in the shared Engineering 1Password folder.
   • Community contributors: set up your own Jira instance.
3. Select Jira Issues in the sidebar with browser dev tools open
4. In network tab of devtools, block the request to /-/integrations/jira/issues.json?with_labels_details=true&per_page=20&page=1&state=opened&sort=created_desc.
5. Refresh and observe page. The Alert should be visible, and the issues list should not.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

ee/app/assets/javascripts/external_issues_list/components/external_issues_list_root.vue

 <script>
-import { GlButton, GlIcon, GlLink, GlSprintf, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import {
+  GlButton,
+  GlIcon,
+  GlLink,
+  GlSprintf,
+  GlSafeHtmlDirective as SafeHtml,
+  GlAlert,
+} from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 
-import createFlash from '~/flash';
 import IssuableList from '~/issuable_list/components/issuable_list_root.vue';
 import {
   IssuableStates,
@@ -30,6 +37,7 @@ export default {
     GlIcon,
     GlLink,
     GlSprintf,
+    GlAlert,
     IssuableList,
     ExternalIssuesListEmptyState,
   },
@@ -70,6 +78,7 @@ export default {
         [IssuableStates.Closed]: 0,
         [IssuableStates.All]: 0,
       },
+      errorMessage: null,
     };
   },
   computed: {
@@ -173,11 +182,9 @@ export default {
       return filteredSearchValue;
     },
     onExternalIssuesQueryError(error, message) {
-      createFlash({
-        message: message || error.message,
-        captureError: true,
-        error,
-      });
+      this.errorMessage = message || error.message;
+
+      Sentry.captureException(error);
     },
     onIssuableListClickTab(selectedIssueState) {
       this.currentPage = 1;
@@ -225,7 +232,11 @@ export default {
 </script>
 
 <template>
+  <gl-alert v-if="errorMessage" class="gl-mt-3" variant="danger" :dismissible="false">
+    {{ errorMessage }}
+  </gl-alert>
   <issuable-list
+    v-else
     :namespace="projectFullPath"
     :tabs="$options.IssuableListTabs"
     :current-tab="currentState"