1 files changed, 29 insertions, 13 deletions

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>