1 files changed, 43 insertions, 31 deletions

diff --git a/app/assets/javascripts/jira_connect/components/groups_list.vue b/app/assets/javascripts/jira_connect/components/groups_list.vue
index eeddd32addc..69f2903388c 100644
--- a/app/assets/javascripts/jira_connect/components/groups_list.vue
+++ b/app/assets/javascripts/jira_connect/components/groups_list.vue
@@ -1,9 +1,9 @@
 <script>
-import { GlTabs, GlTab, GlLoadingIcon, GlPagination } from '@gitlab/ui';
-import { s__ } from '~/locale';
-import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
+import { GlTabs, GlTab, GlLoadingIcon, GlPagination, GlAlert } from '@gitlab/ui';
 import { fetchGroups } from '~/jira_connect/api';
 import { defaultPerPage } from '~/jira_connect/constants';
+import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
+import { s__ } from '~/locale';
 import GroupsListItem from './groups_list_item.vue';
 
 export default {
@@ -12,6 +12,7 @@ export default {
     GlTab,
     GlLoadingIcon,
     GlPagination,
+    GlAlert,
     GroupsListItem,
   },
   inject: {
@@ -26,6 +27,7 @@ export default {
       page: 1,
       perPage: defaultPerPage,
       totalItems: 0,
+      errorMessage: null,
     };
   },
   mounted() {
@@ -46,8 +48,7 @@ export default {
           this.groups = response.data;
         })
         .catch(() => {
-          // eslint-disable-next-line no-alert
-          alert(s__('Integrations|Failed to load namespaces. Please try again.'));
+          this.errorMessage = s__('Integrations|Failed to load namespaces. Please try again.');
         })
         .finally(() => {
           this.isLoading = false;
@@ -58,31 +59,42 @@ export default {
 </script>
 
 <template>
-  <gl-tabs>
-    <gl-tab :title="__('Groups and subgroups')" class="gl-pt-3">
-      <gl-loading-icon v-if="isLoading" size="md" />
-      <div v-else-if="groups.length === 0" class="gl-text-center">
-        <h5>{{ s__('Integrations|No available namespaces.') }}</h5>
-        <p class="gl-mt-5">
-          {{
-            s__('Integrations|You must have owner or maintainer permissions to link namespaces.')
-          }}
-        </p>
-      </div>
-      <ul v-else class="gl-list-style-none gl-pl-0">
-        <groups-list-item v-for="group in groups" :key="group.id" :group="group" />
-      </ul>
+  <div>
+    <gl-alert v-if="errorMessage" class="gl-mb-6" variant="danger" @dismiss="errorMessage = null">
+      {{ errorMessage }}
+    </gl-alert>
+
+    <gl-tabs>
+      <gl-tab :title="__('Groups and subgroups')" class="gl-pt-3">
+        <gl-loading-icon v-if="isLoading" size="md" />
+        <div v-else-if="groups.length === 0" class="gl-text-center">
+          <h5>{{ s__('Integrations|No available namespaces.') }}</h5>
+          <p class="gl-mt-5">
+            {{
+              s__('Integrations|You must have owner or maintainer permissions to link namespaces.')
+            }}
+          </p>
+        </div>
+        <ul v-else class="gl-list-style-none gl-pl-0">
+          <groups-list-item
+            v-for="group in groups"
+            :key="group.id"
+            :group="group"
+            @error="errorMessage = $event"
+          />
+        </ul>
 
-      <div class="gl-display-flex gl-justify-content-center gl-mt-5">
-        <gl-pagination
-          v-if="totalItems > perPage && groups.length > 0"
-          v-model="page"
-          class="gl-mb-0"
-          :per-page="perPage"
-          :total-items="totalItems"
-          @input="loadGroups"
-        />
-      </div>
-    </gl-tab>
-  </gl-tabs>
+        <div class="gl-display-flex gl-justify-content-center gl-mt-5">
+          <gl-pagination
+            v-if="totalItems > perPage && groups.length > 0"
+            v-model="page"
+            class="gl-mb-0"
+            :per-page="perPage"
+            :total-items="totalItems"
+            @input="loadGroups"
+          />
+        </div>
+      </gl-tab>
+    </gl-tabs>
+  </div>
 </template>