diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-05-19 10:33:21 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-05-19 10:33:21 +0300 |
commit | 36a59d088eca61b834191dacea009677a96c052f (patch) | |
tree | e4f33972dab5d8ef79e3944a9f403035fceea43f /app/assets/javascripts/jira_connect/subscriptions/pages/sign_in | |
parent | a1761f15ec2cae7c7f7bbda39a75494add0dfd6f (diff) |
Add latest changes from gitlab-org/gitlab@15-0-stable-eev15.0.0-rc42
Diffstat (limited to 'app/assets/javascripts/jira_connect/subscriptions/pages/sign_in')
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> |