Add latest changes from gitlab-org/gitlab@master

3 files changed, 44 insertions, 12 deletions

diff --git a/app/assets/javascripts/jira_connect/branches/components/new_branch_form.vue b/app/assets/javascripts/jira_connect/branches/components/new_branch_form.vue
index 46c27c33f56..1d926c0d0c5 100644
--- a/app/assets/javascripts/jira_connect/branches/components/new_branch_form.vue
+++ b/app/assets/javascripts/jira_connect/branches/components/new_branch_form.vue
@@ -193,6 +193,7 @@ export default {
       >
         <source-branch-dropdown
           id="source-branch-select"
+          :key="selectedProject.id"
           :selected-project="selectedProject"
           :selected-branch-name="selectedSourceBranchName"
           @change="onSourceBranchSelect"
diff --git a/app/assets/javascripts/jira_connect/branches/components/source_branch_dropdown.vue b/app/assets/javascripts/jira_connect/branches/components/source_branch_dropdown.vue
index e443df35ad2..3f9dd4eb6c6 100644
--- a/app/assets/javascripts/jira_connect/branches/components/source_branch_dropdown.vue
+++ b/app/assets/javascripts/jira_connect/branches/components/source_branch_dropdown.vue
@@ -2,6 +2,8 @@
 import { GlCollapsibleListbox } from '@gitlab/ui';
 import { debounce } from 'lodash';
 import { __ } from '~/locale';
+import { logError } from '~/lib/logger';
+
 import { BRANCHES_PER_PAGE } from '../constants';
 import getProjectQuery from '../graphql/queries/get_project.query.graphql';
 
@@ -26,6 +28,7 @@ export default {
     return {
       initialSourceBranchNamesLoading: false,
       sourceBranchNamesLoading: false,
+      sourceBranchNamesLoadingMore: false,
       sourceBranchNames: [],
     };
   },
@@ -36,6 +39,11 @@ export default {
     hasSelectedSourceBranch() {
       return Boolean(this.selectedBranchName);
     },
+    hasMoreBranches() {
+      return (
+        this.sourceBranchNames.length > 0 && this.sourceBranchNames.length % BRANCHES_PER_PAGE === 0
+      );
+    },
     branchDropdownText() {
       return this.selectedBranchName || __('Select a branch');
     },
@@ -59,45 +67,63 @@ export default {
     onSearch: debounce(function debouncedSearch(branchSearchQuery) {
       this.onSourceBranchSearchQuery(branchSearchQuery);
     }, 250),
-    onSourceBranchSearchQuery(branchSearchQuery) {
+    async onSourceBranchSearchQuery(branchSearchQuery) {
       this.branchSearchQuery = branchSearchQuery;
-      this.fetchSourceBranchNames({
+      this.sourceBranchNamesLoading = true;
+
+      await this.fetchSourceBranchNames({
+        projectPath: this.selectedProject.fullPath,
+        searchPattern: this.branchSearchQuery,
+      });
+      this.sourceBranchNamesLoading = false;
+    },
+    async onBottomReached() {
+      this.sourceBranchNamesLoadingMore = true;
+
+      await this.fetchSourceBranchNames({
         projectPath: this.selectedProject.fullPath,
         searchPattern: this.branchSearchQuery,
+        append: true,
       });
+
+      this.sourceBranchNamesLoadingMore = false;
     },
     onError({ message } = {}) {
       this.$emit('error', { message });
     },
-    async fetchSourceBranchNames({ projectPath, searchPattern } = {}) {
-      this.sourceBranchNamesLoading = true;
+    async fetchSourceBranchNames({ projectPath, searchPattern, append = false } = {}) {
       try {
         const { data } = await this.$apollo.query({
           query: getProjectQuery,
           variables: {
             projectPath,
             branchNamesLimit: this.$options.BRANCHES_PER_PAGE,
-            branchNamesOffset: 0,
+            branchNamesOffset: append ? this.sourceBranchNames.length : 0,
             branchNamesSearchPattern: searchPattern ? `*${searchPattern}*` : '*',
           },
         });
 
         const { branchNames, rootRef } = data?.project.repository || {};
-        this.sourceBranchNames =
-          branchNames.map((value) => {
+        const branchNameItems =
+          branchNames?.map((value) => {
             return { text: value, value };
           }) || [];
 
-        // Use root ref as the default selection
-        if (rootRef && !this.hasSelectedSourceBranch) {
-          this.onSourceBranchSelect(rootRef);
+        if (append) {
+          this.sourceBranchNames.push(...branchNameItems);
+        } else {
+          this.sourceBranchNames = branchNameItems;
+
+          // Use root ref as the default selection
+          if (rootRef && !this.hasSelectedSourceBranch) {
+            this.onSourceBranchSelect(rootRef);
+          }
         }
       } catch (err) {
+        logError(err);
         this.onError({
           message: __('Something went wrong while fetching source branches.'),
         });
-      } finally {
-        this.sourceBranchNamesLoading = false;
       }
     },
   },
@@ -107,6 +133,7 @@ export default {
 <template>
   <gl-collapsible-listbox
     :class="{ 'gl-font-monospace': hasSelectedSourceBranch }"
+    :selected="selectedBranchName"
     :disabled="!hasSelectedProject"
     :items="sourceBranchNames"
     :loading="initialSourceBranchNamesLoading"
@@ -114,6 +141,9 @@ export default {
     :searching="sourceBranchNamesLoading"
     :toggle-text="branchDropdownText"
     fluid-width
+    :infinite-scroll="hasMoreBranches"
+    :infinite-scroll-loading="sourceBranchNamesLoadingMore"
+    @bottom-reached="onBottomReached"
     @search="onSearch"
     @select="onSourceBranchSelect"
   />
diff --git a/app/assets/javascripts/jira_connect/branches/index.js b/app/assets/javascripts/jira_connect/branches/index.js
index a9a56a6362e..893b9dfa1c7 100644
--- a/app/assets/javascripts/jira_connect/branches/index.js
+++ b/app/assets/javascripts/jira_connect/branches/index.js
@@ -19,6 +19,7 @@ export default function initJiraConnectBranches() {
 
   return new Vue({
     el,
+    name: 'JiraConnectNewBranchRoot',
     apolloProvider,
     provide: {
       initialBranchName,