Add latest changes from gitlab-org/gitlab@15-7-stable-eev15.7.0-rc42

5 files changed, 85 insertions, 50 deletions

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 0e2d8821f36..dac807dceb0 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
@@ -1,5 +1,6 @@
 <script>
-import { GlDropdown, GlDropdownItem, GlSearchBoxByType, GlLoadingIcon } from '@gitlab/ui';
+import { GlCollapsibleListbox } from '@gitlab/ui';
+import { debounce } from 'lodash';
 import { __ } from '~/locale';
 import { BRANCHES_PER_PAGE } from '../constants';
 import getProjectQuery from '../graphql/queries/get_project.query.graphql';
@@ -7,10 +8,7 @@ import getProjectQuery from '../graphql/queries/get_project.query.graphql';
 export default {
   BRANCHES_PER_PAGE,
   components: {
-    GlDropdown,
-    GlDropdownItem,
-    GlSearchBoxByType,
-    GlLoadingIcon,
+    GlCollapsibleListbox,
   },
   props: {
     selectedProject: {
@@ -26,7 +24,6 @@ export default {
   },
   data() {
     return {
-      sourceBranchSearchQuery: '',
       initialSourceBranchNamesLoading: false,
       sourceBranchNamesLoading: false,
       sourceBranchNames: [],
@@ -59,6 +56,9 @@ export default {
     onSourceBranchSelect(branchName) {
       this.$emit('change', branchName);
     },
+    onSearch: debounce(function debouncedSearch(branchSearchQuery) {
+      this.onSourceBranchSearchQuery(branchSearchQuery);
+    }, 250),
     onSourceBranchSearchQuery(branchSearchQuery) {
       this.branchSearchQuery = branchSearchQuery;
       this.fetchSourceBranchNames({
@@ -83,7 +83,10 @@ export default {
         });
 
         const { branchNames, rootRef } = data?.project.repository || {};
-        this.sourceBranchNames = branchNames || [];
+        this.sourceBranchNames =
+          branchNames.map((value) => {
+            return { text: value, value };
+          }) || [];
 
         // Use root ref as the default selection
         if (rootRef && !this.hasSelectedSourceBranch) {
@@ -102,33 +105,15 @@ export default {
 </script>
 
 <template>
-  <gl-dropdown
-    :text="branchDropdownText"
-    :loading="initialSourceBranchNamesLoading"
-    :disabled="!hasSelectedProject"
+  <gl-collapsible-listbox
     :class="{ 'gl-font-monospace': hasSelectedSourceBranch }"
-  >
-    <template #header>
-      <gl-search-box-by-type
-        :debounce="250"
-        :value="sourceBranchSearchQuery"
-        @input="onSourceBranchSearchQuery"
-      />
-    </template>
-
-    <gl-loading-icon v-show="sourceBranchNamesLoading" />
-    <template v-if="!sourceBranchNamesLoading">
-      <gl-dropdown-item
-        v-for="branchName in sourceBranchNames"
-        v-show="!sourceBranchNamesLoading"
-        :key="branchName"
-        :is-checked="branchName === selectedBranchName"
-        is-check-item
-        class="gl-font-monospace"
-        @click="onSourceBranchSelect(branchName)"
-      >
-        {{ branchName }}
-      </gl-dropdown-item>
-    </template>
-  </gl-dropdown>
+    :disabled="!hasSelectedProject"
+    :items="sourceBranchNames"
+    :loading="initialSourceBranchNamesLoading"
+    :searchable="true"
+    :searching="sourceBranchNamesLoading"
+    :toggle-text="branchDropdownText"
+    @search="onSearch"
+    @select="onSourceBranchSelect"
+  />
 </template>
diff --git a/app/assets/javascripts/jira_connect/subscriptions/constants.js b/app/assets/javascripts/jira_connect/subscriptions/constants.js
index fc365746b54..01bc5dfc66b 100644
--- a/app/assets/javascripts/jira_connect/subscriptions/constants.js
+++ b/app/assets/javascripts/jira_connect/subscriptions/constants.js
@@ -38,7 +38,7 @@ export const INTEGRATIONS_DOC_LINK = helpPagePath('integration/jira/development_
   anchor: 'use-the-integration',
 });
 export const OAUTH_SELF_MANAGED_DOC_LINK = helpPagePath('integration/jira/connect-app', {
-  anchor: 'install-the-gitlabcom-for-jira-cloud-app-for-self-managed-instances',
+  anchor: 'connect-the-gitlabcom-for-jira-cloud-app-for-self-managed-instances',
 });
 
 export const GITLAB_COM_BASE_PATH = 'https://gitlab.com';
diff --git a/app/assets/javascripts/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/index.vue b/app/assets/javascripts/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/index.vue
index 5ff75e19425..7c6ff002014 100644
--- a/app/assets/javascripts/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/index.vue
+++ b/app/assets/javascripts/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/index.vue
@@ -5,10 +5,14 @@ import { s__ } from '~/locale';
 
 import { reloadPage, persistBaseUrl, retrieveBaseUrl } from '~/jira_connect/subscriptions/utils';
 import { updateInstallation, setApiBaseURL } from '~/jira_connect/subscriptions/api';
-import { I18N_UPDATE_INSTALLATION_ERROR_MESSAGE } from '~/jira_connect/subscriptions/constants';
+import {
+  GITLAB_COM_BASE_PATH,
+  I18N_UPDATE_INSTALLATION_ERROR_MESSAGE,
+} from '~/jira_connect/subscriptions/constants';
 import { SET_ALERT } from '~/jira_connect/subscriptions/store/mutation_types';
 
 import SignInOauthButton from '../../../components/sign_in_oauth_button.vue';
+import SetupInstructions from './setup_instructions.vue';
 import VersionSelectForm from './version_select_form.vue';
 
 export default {
@@ -16,12 +20,14 @@ export default {
   components: {
     GlButton,
     SignInOauthButton,
+    SetupInstructions,
     VersionSelectForm,
   },
   data() {
     return {
       gitlabBasePath: null,
       loadingVersionSelect: false,
+      showSetupInstructions: false,
     };
   },
   computed: {
@@ -37,6 +43,9 @@ export default {
   mounted() {
     this.gitlabBasePath = retrieveBaseUrl();
     setApiBaseURL(this.gitlabBasePath);
+    if (this.gitlabBasePath !== GITLAB_COM_BASE_PATH) {
+      this.showSetupInstructions = true;
+    }
   },
   methods: {
     ...mapMutations({
@@ -61,6 +70,9 @@ export default {
           this.loadingVersionSelect = false;
         });
     },
+    onSetupNext() {
+      this.showSetupInstructions = false;
+    },
     onSignInError() {
       this.$emit('error');
     },
@@ -88,19 +100,23 @@ export default {
       @submit="onVersionSelect"
     />
 
-    <div v-else class="gl-text-center">
-      <sign-in-oauth-button
-        class="gl-mb-5"
-        :gitlab-base-path="gitlabBasePath"
-        @sign-in="$emit('sign-in-oauth', $event)"
-        @error="onSignInError"
-      />
+    <template v-else>
+      <setup-instructions v-if="showSetupInstructions" @next="onSetupNext" />
+
+      <div v-else class="gl-text-center">
+        <sign-in-oauth-button
+          class="gl-mb-5"
+          :gitlab-base-path="gitlabBasePath"
+          @sign-in="$emit('sign-in-oauth', $event)"
+          @error="onSignInError"
+        />
 
-      <div>
-        <gl-button category="tertiary" variant="confirm" @click="resetGitlabBasePath">
-          {{ $options.i18n.changeVersionButtonText }}
-        </gl-button>
+        <div>
+          <gl-button category="tertiary" variant="confirm" @click="resetGitlabBasePath">
+            {{ $options.i18n.changeVersionButtonText }}
+          </gl-button>
+        </div>
       </div>
-    </div>
+    </template>
   </div>
 </template>
diff --git a/app/assets/javascripts/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/setup_instructions.vue b/app/assets/javascripts/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/setup_instructions.vue
new file mode 100644
index 00000000000..00fa739b518
--- /dev/null
+++ b/app/assets/javascripts/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/setup_instructions.vue
@@ -0,0 +1,35 @@
+<script>
+import { GlButton, GlLink } from '@gitlab/ui';
+import { OAUTH_SELF_MANAGED_DOC_LINK } from '~/jira_connect/subscriptions/constants';
+
+export default {
+  components: {
+    GlButton,
+    GlLink,
+  },
+  OAUTH_SELF_MANAGED_DOC_LINK,
+};
+</script>
+
+<template>
+  <div class="gl-max-w-62 gl-mx-auto gl-mt-7">
+    <h3>{{ s__('JiraService|Continue setup in GitLab') }}</h3>
+    <p>
+      {{
+        s__(
+          'JiraService|In order to complete the set up, you’ll need to complete a few steps in GitLab.',
+        )
+      }}
+      <gl-link
+        class="gl-reset-font-size!"
+        :href="$options.OAUTH_SELF_MANAGED_DOC_LINK"
+        target="_blank"
+        >{{ __('Learn more') }}</gl-link
+      >
+    </p>
+
+    <gl-button variant="confirm" @click="$emit('next')">
+      {{ __('Next') }}
+    </gl-button>
+  </div>
+</template>
diff --git a/app/assets/javascripts/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/version_select_form.vue b/app/assets/javascripts/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/version_select_form.vue
index 6b32225ed11..37a65946b3f 100644
--- a/app/assets/javascripts/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/version_select_form.vue
+++ b/app/assets/javascripts/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/version_select_form.vue
@@ -55,7 +55,6 @@ export default {
   },
   radioOptions: RADIO_OPTIONS,
   i18n: {
-    title: s__('JiraService|Welcome to GitLab for Jira'),
     saasRadioLabel: __('GitLab.com (SaaS)'),
     saasRadioHelp: __('Most common'),
     selfManagedRadioLabel: __('GitLab (self-managed)'),