1 files changed, 88 insertions, 0 deletions
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>