Add latest changes from gitlab-org/gitlab@master

2 files changed, 15 insertions, 5 deletions

diff --git a/app/assets/javascripts/jira_connect/components/groups_list.vue b/app/assets/javascripts/jira_connect/components/groups_list.vue
index 68fda8dfaca..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 { DEFAULT_GROUPS_PER_PAGE } 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';
@@ -27,6 +27,7 @@ export default {
       page: 1,
       totalItems: 0,
       errorMessage: null,
+      searchTerm: '',
     };
   },
   computed: {
@@ -40,13 +41,17 @@ export default {
     });
   },
   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.$options.DEFAULT_GROUPS_PER_PAGE,
-        search: searchTerm,
+        search,
       })
         .then((response) => {
           const { page, total } = parseIntPagination(normalizeHeaders(response.headers));
@@ -62,7 +67,11 @@ 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,
diff --git a/app/assets/javascripts/jira_connect/constants.js b/app/assets/javascripts/jira_connect/constants.js
index a6ee19bd471..8dff83eabb5 100644
--- a/app/assets/javascripts/jira_connect/constants.js
+++ b/app/assets/javascripts/jira_connect/constants.js
@@ -1,2 +1,3 @@
 export const DEFAULT_GROUPS_PER_PAGE = 10;
 export const ALERT_LOCALSTORAGE_KEY = 'gitlab_alert';
+export const MINIMUM_SEARCH_TERM_LENGTH = 3;