Add latest changes from gitlab-org/gitlab@15-0-stable-eev15.0.0-rc42

4 files changed, 263 insertions, 0 deletions

diff --git a/app/assets/javascripts/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_com.vue b/app/assets/javascripts/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_com.vue
new file mode 100644
index 00000000000..91b66c87694
--- /dev/null
+++ b/app/assets/javascripts/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_com.vue
@@ -0,0 +1,68 @@
+<script>
+import { s__ } from '~/locale';
+
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import SubscriptionsList from '../../components/subscriptions_list.vue';
+
+export default {
+  name: 'SignInGitlabCom',
+  components: {
+    SubscriptionsList,
+    SignInLegacyButton: () => import('../../components/sign_in_legacy_button.vue'),
+    SignInOauthButton: () => import('../../components/sign_in_oauth_button.vue'),
+  },
+  mixins: [glFeatureFlagMixin()],
+  inject: ['usersPath'],
+  props: {
+    hasSubscriptions: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  computed: {
+    useSignInOauthButton() {
+      return this.glFeatures.jiraConnectOauth;
+    },
+  },
+  i18n: {
+    signInButtonTextWithSubscriptions: s__('Integrations|Sign in to add namespaces'),
+    signInText: s__('JiraService|Sign in to GitLab.com to get started.'),
+  },
+  methods: {
+    onSignInError() {
+      this.$emit('error');
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <h2 class="gl-text-center gl-mb-7">{{ s__('JiraService|GitLab for Jira Configuration') }}</h2>
+    <div v-if="hasSubscriptions">
+      <div class="gl-display-flex gl-justify-content-end gl-mb-3">
+        <sign-in-oauth-button
+          v-if="useSignInOauthButton"
+          @sign-in="$emit('sign-in-oauth', $event)"
+          @error="onSignInError"
+        >
+          {{ $options.i18n.signInButtonTextWithSubscriptions }}
+        </sign-in-oauth-button>
+        <sign-in-legacy-button v-else :users-path="usersPath">
+          {{ $options.i18n.signInButtonTextWithSubscriptions }}
+        </sign-in-legacy-button>
+      </div>
+
+      <subscriptions-list />
+    </div>
+    <div v-else class="gl-text-center">
+      <p class="gl-mb-7">{{ $options.i18n.signInText }}</p>
+      <sign-in-oauth-button
+        v-if="useSignInOauthButton"
+        @sign-in="$emit('sign-in-oauth', $event)"
+        @error="onSignInError"
+      />
+      <sign-in-legacy-button v-else class="gl-mb-7" :users-path="usersPath" />
+    </div>
+  </div>
+</template>
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
new file mode 100644
index 00000000000..4f5aa4c255c
--- /dev/null
+++ b/app/assets/javascripts/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/index.vue
@@ -0,0 +1,72 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import SignInOauthButton from '../../../components/sign_in_oauth_button.vue';
+import VersionSelectForm from './version_select_form.vue';
+
+export default {
+  name: 'SignInGitlabMultiversion',
+  components: {
+    GlButton,
+    SignInOauthButton,
+    VersionSelectForm,
+  },
+  data() {
+    return {
+      gitlabBasePath: null,
+    };
+  },
+  computed: {
+    hasSelectedVersion() {
+      return this.gitlabBasePath !== null;
+    },
+    subtitle() {
+      return this.hasSelectedVersion
+        ? this.$options.i18n.signInSubtitle
+        : this.$options.i18n.versionSelectSubtitle;
+    },
+  },
+  methods: {
+    resetGitlabBasePath() {
+      this.gitlabBasePath = null;
+    },
+    onVersionSelect(gitlabBasePath) {
+      this.gitlabBasePath = gitlabBasePath;
+    },
+    onSignInError() {
+      this.$emit('error');
+    },
+  },
+  i18n: {
+    title: s__('JiraService|Welcome to GitLab for Jira'),
+    signInSubtitle: s__('JiraService|Sign in to GitLab to link namespaces.'),
+    versionSelectSubtitle: s__('JiraService|What version of GitLab are you using?'),
+    changeVersionButtonText: s__('JiraService|Change GitLab version'),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="gl-text-center">
+      <h2>{{ $options.i18n.title }}</h2>
+      <p data-testid="subtitle">{{ subtitle }}</p>
+    </div>
+
+    <version-select-form v-if="!hasSelectedVersion" class="gl-mt-7" @submit="onVersionSelect" />
+
+    <div v-else class="gl-text-center">
+      <sign-in-oauth-button
+        class="gl-mb-5"
+        @sign-in="$emit('sign-in-oauth', $event)"
+        @error="onSignInError"
+      />
+
+      <div>
+        <gl-button category="tertiary" variant="confirm" @click="resetGitlabBasePath">
+          {{ $options.i18n.changeVersionButtonText }}
+        </gl-button>
+      </div>
+    </div>
+  </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
new file mode 100644
index 00000000000..0fa745ed7e3
--- /dev/null
+++ b/app/assets/javascripts/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/version_select_form.vue
@@ -0,0 +1,88 @@
+<script>
+import {
+  GlForm,
+  GlFormGroup,
+  GlFormRadioGroup,
+  GlFormInput,
+  GlFormRadio,
+  GlButton,
+} from '@gitlab/ui';
+import { __, s__ } from '~/locale';
+
+const RADIO_OPTIONS = {
+  saas: 'saas',
+  selfManaged: 'selfManaged',
+};
+
+const DEFAULT_RADIO_OPTION = RADIO_OPTIONS.saas;
+const GITLAB_COM_BASE_PATH = 'https://gitlab.com';
+
+export default {
+  name: 'VersionSelectForm',
+  components: {
+    GlForm,
+    GlFormGroup,
+    GlFormRadioGroup,
+    GlFormInput,
+    GlFormRadio,
+    GlButton,
+  },
+  data() {
+    return {
+      selected: DEFAULT_RADIO_OPTION,
+      selfManagedBasePathInput: '',
+    };
+  },
+  computed: {
+    isSelfManagedSelected() {
+      return this.selected === RADIO_OPTIONS.selfManaged;
+    },
+  },
+  methods: {
+    onSubmit() {
+      const gitlabBasePath =
+        this.selected === RADIO_OPTIONS.saas ? GITLAB_COM_BASE_PATH : this.selfManagedBasePathInput;
+      this.$emit('submit', gitlabBasePath);
+    },
+  },
+  radioOptions: RADIO_OPTIONS,
+  i18n: {
+    title: s__('JiraService|Welcome to GitLab for Jira'),
+    saasRadioLabel: __('GitLab.com (SaaS)'),
+    saasRadioHelp: __('Most common'),
+    selfManagedRadioLabel: __('GitLab (self-managed)'),
+    instanceURLInputLabel: s__('JiraService|GitLab instance URL'),
+    instanceURLInputDescription: s__('JiraService|For example: https://gitlab.example.com'),
+  },
+};
+</script>
+
+<template>
+  <gl-form class="gl-max-w-62 gl-mx-auto" @submit.prevent="onSubmit">
+    <gl-form-radio-group v-model="selected" class="gl-mb-3" name="gitlab_version">
+      <gl-form-radio :value="$options.radioOptions.saas">
+        {{ $options.i18n.saasRadioLabel }}
+        <template #help>
+          {{ $options.i18n.saasRadioHelp }}
+        </template>
+      </gl-form-radio>
+      <gl-form-radio :value="$options.radioOptions.selfManaged">
+        {{ $options.i18n.selfManagedRadioLabel }}
+      </gl-form-radio>
+    </gl-form-radio-group>
+
+    <gl-form-group
+      v-if="isSelfManagedSelected"
+      class="gl-ml-6"
+      :label="$options.i18n.instanceURLInputLabel"
+      :description="$options.i18n.instanceURLInputDescription"
+      label-for="self-managed-instance-input"
+    >
+      <gl-form-input id="self-managed-instance-input" v-model="selfManagedBasePathInput" required />
+    </gl-form-group>
+
+    <div class="gl-display-flex gl-justify-content-end">
+      <gl-button variant="confirm" type="submit">{{ __('Save') }}</gl-button>
+    </div>
+  </gl-form>
+</template>
diff --git a/app/assets/javascripts/jira_connect/subscriptions/pages/sign_in/sign_in_page.vue b/app/assets/javascripts/jira_connect/subscriptions/pages/sign_in/sign_in_page.vue
new file mode 100644
index 00000000000..f4c59b2184e
--- /dev/null
+++ b/app/assets/javascripts/jira_connect/subscriptions/pages/sign_in/sign_in_page.vue
@@ -0,0 +1,35 @@
+<script>
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import SignInGitlabCom from './sign_in_gitlab_com.vue';
+import SignInGitlabMultiversion from './sign_in_gitlab_multiversion/index.vue';
+
+export default {
+  name: 'SignInPage',
+  components: { SignInGitlabCom, SignInGitlabMultiversion },
+  mixins: [glFeatureFlagMixin()],
+  props: {
+    hasSubscriptions: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  computed: {
+    isOauthSelfManagedEnabled() {
+      return this.glFeatures.jiraConnectOauth && this.glFeatures.jiraConnectOauthSelfManaged;
+    },
+  },
+};
+</script>
+<template>
+  <sign-in-gitlab-multiversion
+    v-if="isOauthSelfManagedEnabled"
+    @sign-in-oauth="$emit('sign-in-oauth', $event)"
+    @error="$emit('error', $event)"
+  />
+  <sign-in-gitlab-com
+    v-else
+    :has-subscriptions="hasSubscriptions"
+    @sign-in-oauth="$emit('sign-in-oauth')"
+    @error="$emit('error', $event)"
+  />
+</template>