1 files changed, 55 insertions, 41 deletions

diff --git a/app/assets/javascripts/jira_connect/components/groups_list.vue b/app/assets/javascripts/jira_connect/components/groups_list.vue
index 69f2903388c..275ff820419 100644
--- a/app/assets/javascripts/jira_connect/components/groups_list.vue
+++ b/app/assets/javascripts/jira_connect/components/groups_list.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTabs, GlTab, GlLoadingIcon, GlPagination, GlAlert } from '@gitlab/ui';
+import { GlLoadingIcon, GlPagination, GlAlert, GlSearchBoxByType } from '@gitlab/ui';
 import { fetchGroups } from '~/jira_connect/api';
 import { defaultPerPage } from '~/jira_connect/constants';
 import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
@@ -8,11 +8,10 @@ import GroupsListItem from './groups_list_item.vue';
 
 export default {
   components: {
-    GlTabs,
-    GlTab,
     GlLoadingIcon,
     GlPagination,
     GlAlert,
+    GlSearchBoxByType,
     GroupsListItem,
   },
   inject: {
@@ -23,7 +22,8 @@ export default {
   data() {
     return {
       groups: [],
-      isLoading: false,
+      isLoadingInitial: true,
+      isLoadingMore: false,
       page: 1,
       perPage: defaultPerPage,
       totalItems: 0,
@@ -31,15 +31,18 @@ export default {
     };
   },
   mounted() {
-    this.loadGroups();
+    return this.loadGroups().finally(() => {
+      this.isLoadingInitial = false;
+    });
   },
   methods: {
-    loadGroups() {
-      this.isLoading = true;
+    loadGroups({ searchTerm } = {}) {
+      this.isLoadingMore = true;
 
-      fetchGroups(this.groupsPath, {
+      return fetchGroups(this.groupsPath, {
         page: this.page,
         perPage: this.perPage,
+        search: searchTerm,
       })
         .then((response) => {
           const { page, total } = parseIntPagination(normalizeHeaders(response.headers));
@@ -51,50 +54,61 @@ export default {
           this.errorMessage = s__('Integrations|Failed to load namespaces. Please try again.');
         })
         .finally(() => {
-          this.isLoading = false;
+          this.isLoadingMore = false;
         });
     },
+    onGroupSearch(searchTerm) {
+      return this.loadGroups({ searchTerm });
+    },
   },
 };
 </script>
 
 <template>
   <div>
-    <gl-alert v-if="errorMessage" class="gl-mb-6" variant="danger" @dismiss="errorMessage = null">
+    <gl-alert v-if="errorMessage" class="gl-mb-5" 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>
+    <gl-search-box-by-type
+      class="gl-mb-5"
+      debounce="500"
+      :placeholder="__('Search by name')"
+      :is-loading="isLoadingMore"
+      @input="onGroupSearch"
+    />
+
+    <gl-loading-icon v-if="isLoadingInitial" 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 gl-border-t-1 gl-border-t-solid gl-border-t-gray-100"
+      :class="{ 'gl-opacity-5': isLoadingMore }"
+      data-testid="groups-list"
+    >
+      <groups-list-item
+        v-for="group in groups"
+        :key="group.id"
+        :group="group"
+        :disabled="isLoadingMore"
+        @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>
   </div>
 </template>