1 files changed, 23 insertions, 9 deletions

diff --git a/app/assets/javascripts/jira_connect/components/groups_list.vue b/app/assets/javascripts/jira_connect/components/groups_list.vue
index 275ff820419..d764f778a9d 100644
--- a/app/assets/javascripts/jira_connect/components/groups_list.vue
+++ b/app/assets/javascripts/jira_connect/components/groups_list.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlLoadingIcon, GlPagination, GlAlert, GlSearchBoxByType } from '@gitlab/ui';
 import { fetchGroups } from '~/jira_connect/api';
-import { defaultPerPage } from '~/jira_connect/constants';
+import { DEFAULT_GROUPS_PER_PAGE, MINIMUM_SEARCH_TERM_LENGTH } from '~/jira_connect/constants';
 import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
 import { s__ } from '~/locale';
 import GroupsListItem from './groups_list_item.vue';
@@ -25,24 +25,33 @@ export default {
       isLoadingInitial: true,
       isLoadingMore: false,
       page: 1,
-      perPage: defaultPerPage,
       totalItems: 0,
       errorMessage: null,
+      searchTerm: '',
     };
   },
+  computed: {
+    showPagination() {
+      return this.totalItems > this.$options.DEFAULT_GROUPS_PER_PAGE && this.groups.length > 0;
+    },
+  },
   mounted() {
     return this.loadGroups().finally(() => {
       this.isLoadingInitial = false;
     });
   },
   methods: {
-    loadGroups({ searchTerm } = {}) {
-      this.isLoadingMore = true;
+    loadGroups() {
+      // fetchGroups returns no results for search terms 0 < {length} < 3.
+      // The desired UX is to return the unfiltered results for searches {length} < 3.
+      // Here, we set the search to an empty string if {length} < 3
+      const search = this.searchTerm?.length < MINIMUM_SEARCH_TERM_LENGTH ? '' : this.searchTerm;
 
+      this.isLoadingMore = true;
       return fetchGroups(this.groupsPath, {
         page: this.page,
-        perPage: this.perPage,
-        search: searchTerm,
+        perPage: this.$options.DEFAULT_GROUPS_PER_PAGE,
+        search,
       })
         .then((response) => {
           const { page, total } = parseIntPagination(normalizeHeaders(response.headers));
@@ -58,9 +67,14 @@ export default {
         });
     },
     onGroupSearch(searchTerm) {
-      return this.loadGroups({ searchTerm });
+      // keep a copy of the search term for pagination
+      this.searchTerm = searchTerm;
+      // reset the current page
+      this.page = 1;
+      return this.loadGroups();
     },
   },
+  DEFAULT_GROUPS_PER_PAGE,
 };
 </script>
 
@@ -102,10 +116,10 @@ export default {
 
     <div class="gl-display-flex gl-justify-content-center gl-mt-5">
       <gl-pagination
-        v-if="totalItems > perPage && groups.length > 0"
+        v-if="showPagination"
         v-model="page"
         class="gl-mb-0"
-        :per-page="perPage"
+        :per-page="$options.DEFAULT_GROUPS_PER_PAGE"
         :total-items="totalItems"
         @input="loadGroups"
       />