Add latest changes from gitlab-org/gitlab@15-1-stable-eev15.1.0-rc42

4 files changed, 70 insertions, 45 deletions

diff --git a/app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_modal/groups_list.vue b/app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_modal/groups_list.vue
index 7f035dddafe..a9ec7bd971e 100644
--- a/app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_modal/groups_list.vue
+++ b/app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_modal/groups_list.vue
@@ -104,7 +104,7 @@ export default {
       @input="onGroupSearch"
     />
 
-    <gl-loading-icon v-if="isLoadingInitial" size="md" />
+    <gl-loading-icon v-if="isLoadingInitial" size="lg" />
     <div v-else-if="groups.length === 0" class="gl-text-center">
       <h5>{{ s__('Integrations|No available namespaces.') }}</h5>
       <p class="gl-mt-5">
diff --git a/app/assets/javascripts/jira_connect/subscriptions/components/app.vue b/app/assets/javascripts/jira_connect/subscriptions/components/app.vue
index 22422872183..66aea60c5b5 100644
--- a/app/assets/javascripts/jira_connect/subscriptions/components/app.vue
+++ b/app/assets/javascripts/jira_connect/subscriptions/components/app.vue
@@ -60,6 +60,12 @@ export default {
     isBrowserSupported() {
       return !this.isOauthEnabled || AccessorUtilities.canUseCrypto();
     },
+    gitlabUrl() {
+      return gon.gitlab_url;
+    },
+    gitlabLogo() {
+      return gon.gitlab_logo;
+    },
   },
   created() {
     this.setInitialAlert();
@@ -99,43 +105,55 @@ export default {
 </script>
 
 <template>
-  <browser-support-alert v-if="!isBrowserSupported" class="gl-mb-7" />
-  <div v-else data-testid="jira-connect-app">
-    <compatibility-alert class="gl-mb-7" />
-
-    <gl-alert
-      v-if="shouldShowAlert"
-      :variant="alert.variant"
-      :title="alert.title"
-      class="gl-mb-5"
-      data-testid="jira-connect-persisted-alert"
-      @dismiss="setAlert"
+  <div>
+    <header
+      class="jira-connect-header gl-display-flex gl-align-items-center gl-justify-content-center gl-px-5 gl-border-b-solid gl-border-b-gray-100 gl-border-b-1 gl-bg-white"
     >
-      <gl-sprintf v-if="alert.linkUrl" :message="alert.message">
-        <template #link="{ content }">
-          <gl-link :href="alert.linkUrl" target="_blank">{{ content }}</gl-link>
-        </template>
-      </gl-sprintf>
+      <gl-link :href="gitlabUrl" target="_blank">
+        <img :src="gitlabLogo" class="gl-h-6" :alt="__('GitLab')" />
+      </gl-link>
+      <user-link
+        :user-signed-in="userSignedIn"
+        :has-subscriptions="hasSubscriptions"
+        :user="currentUser"
+        class="gl-fixed gl-right-4"
+      />
+    </header>
 
-      <template v-else>
-        {{ alert.message }}
-      </template>
-    </gl-alert>
+    <main class="jira-connect-app gl-px-5 gl-pt-7 gl-mx-auto">
+      <browser-support-alert v-if="!isBrowserSupported" class="gl-mb-7" />
+      <div v-else data-testid="jira-connect-app">
+        <compatibility-alert class="gl-mb-7" />
 
-    <user-link
-      :user-signed-in="userSignedIn"
-      :has-subscriptions="hasSubscriptions"
-      :user="currentUser"
-    />
+        <gl-alert
+          v-if="shouldShowAlert"
+          :variant="alert.variant"
+          :title="alert.title"
+          class="gl-mb-5"
+          data-testid="jira-connect-persisted-alert"
+          @dismiss="setAlert"
+        >
+          <gl-sprintf v-if="alert.linkUrl" :message="alert.message">
+            <template #link="{ content }">
+              <gl-link :href="alert.linkUrl" target="_blank">{{ content }}</gl-link>
+            </template>
+          </gl-sprintf>
 
-    <div class="gl-layout-w-limited gl-mx-auto gl-px-5 gl-mb-7">
-      <sign-in-page
-        v-if="!userSignedIn"
-        :has-subscriptions="hasSubscriptions"
-        @sign-in-oauth="onSignInOauth"
-        @error="onSignInError"
-      />
-      <subscriptions-page v-else :has-subscriptions="hasSubscriptions" />
-    </div>
+          <template v-else>
+            {{ alert.message }}
+          </template>
+        </gl-alert>
+
+        <div class="gl-layout-w-limited gl-mx-auto gl-px-5 gl-mb-7">
+          <sign-in-page
+            v-if="!userSignedIn"
+            :has-subscriptions="hasSubscriptions"
+            @sign-in-oauth="onSignInOauth"
+            @error="onSignInError"
+          />
+          <subscriptions-page v-else :has-subscriptions="hasSubscriptions" />
+        </div>
+      </div>
+    </main>
   </div>
 </template>
diff --git a/app/assets/javascripts/jira_connect/subscriptions/components/sign_in_oauth_button.vue b/app/assets/javascripts/jira_connect/subscriptions/components/sign_in_oauth_button.vue
index b9e8bab019f..ad3e70bcb5f 100644
--- a/app/assets/javascripts/jira_connect/subscriptions/components/sign_in_oauth_button.vue
+++ b/app/assets/javascripts/jira_connect/subscriptions/components/sign_in_oauth_button.vue
@@ -112,7 +112,7 @@ export default {
 </script>
 <template>
   <gl-button
-    category="primary"
+    v-bind="$attrs"
     variant="info"
     :loading="loading"
     :disabled="!canUseCrypto"
diff --git a/app/assets/javascripts/jira_connect/subscriptions/components/user_link.vue b/app/assets/javascripts/jira_connect/subscriptions/components/user_link.vue
index 5e2c83aff65..b253f888d22 100644
--- a/app/assets/javascripts/jira_connect/subscriptions/components/user_link.vue
+++ b/app/assets/javascripts/jira_connect/subscriptions/components/user_link.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlLink, GlSprintf } from '@gitlab/ui';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { __ } from '~/locale';
 import { getGitlabSignInURL } from '~/jira_connect/subscriptions/utils';
 
@@ -7,7 +8,9 @@ export default {
   components: {
     GlLink,
     GlSprintf,
+    SignInOauthButton: () => import('./sign_in_oauth_button.vue'),
   },
+  mixins: [glFeatureFlagMixin()],
   inject: {
     usersPath: {
       default: '',
@@ -51,6 +54,9 @@ export default {
         ? this.$options.i18n.signedInAsUserText
         : this.$options.i18n.signedInText;
     },
+    isOauthEnabled() {
+      return this.glFeatures.jiraConnectOauth;
+    },
   },
   async created() {
     this.signInURL = await getGitlabSignInURL(this.usersPath);
@@ -63,7 +69,7 @@ export default {
 };
 </script>
 <template>
-  <div class="jira-connect-user gl-font-base">
+  <div class="gl-font-base">
     <gl-sprintf v-if="userSignedIn" :message="signedInText">
       <template #user_link>
         <gl-link data-testid="gitlab-user-link" :href="gitlabUserLink" target="_blank">
@@ -72,13 +78,14 @@ export default {
       </template>
     </gl-sprintf>
 
-    <gl-link
-      v-else-if="hasSubscriptions"
-      data-testid="sign-in-link"
-      :href="signInURL"
-      target="_blank"
-    >
-      {{ $options.i18n.signInText }}
-    </gl-link>
+    <template v-else-if="hasSubscriptions">
+      <sign-in-oauth-button v-if="isOauthEnabled" category="tertiary">
+        {{ $options.i18n.signInText }}
+      </sign-in-oauth-button>
+
+      <gl-link v-else data-testid="sign-in-link" :href="signInURL" target="_blank">
+        {{ $options.i18n.signInText }}
+      </gl-link>
+    </template>
   </div>
 </template>