diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-04-08 18:10:26 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-04-08 18:10:26 +0300 |
commit | 9f9dc2bc412632e6b459d0bb9e1ac205c8cf34af (patch) | |
tree | caafa909017726a087ae4e4bdaeb558ac2c04a9b /app/assets/javascripts/projects | |
parent | 88bacc889f129f8d95af34f1781dd66769ec27cc (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/projects')
-rw-r--r-- | app/assets/javascripts/projects/new/components/deployment_target_select.vue | 33 | ||||
-rw-r--r-- | app/assets/javascripts/projects/new/constants.js | 5 |
2 files changed, 36 insertions, 2 deletions
diff --git a/app/assets/javascripts/projects/new/components/deployment_target_select.vue b/app/assets/javascripts/projects/new/components/deployment_target_select.vue index f3b7e39f148..0003134f15c 100644 --- a/app/assets/javascripts/projects/new/components/deployment_target_select.vue +++ b/app/assets/javascripts/projects/new/components/deployment_target_select.vue @@ -1,12 +1,15 @@ <script> -import { GlFormGroup, GlFormSelect } from '@gitlab/ui'; +import { GlFormGroup, GlFormSelect, GlFormText, GlSprintf, GlLink } from '@gitlab/ui'; +import { helpPagePath } from '~/helpers/help_page_helper'; import { s__ } from '~/locale'; import Tracking from '~/tracking'; import { DEPLOYMENT_TARGET_SELECTIONS, DEPLOYMENT_TARGET_LABEL, DEPLOYMENT_TARGET_EVENT, + VISIT_DOCS_EVENT, NEW_PROJECT_FORM, + K8S_OPTION, } from '../constants'; const trackingMixin = Tracking.mixin({ label: DEPLOYMENT_TARGET_LABEL }); @@ -15,12 +18,21 @@ export default { i18n: { deploymentTargetLabel: s__('Deployment Target|Project deployment target (optional)'), defaultOption: s__('Deployment Target|Select the deployment target'), + k8sEducationText: s__( + 'Deployment Target|%{linkStart}How to provision or deploy to Kubernetes clusters from GitLab?%{linkEnd}', + ), }, deploymentTargets: DEPLOYMENT_TARGET_SELECTIONS, + VISIT_DOCS_EVENT, + DEPLOYMENT_TARGET_LABEL, selectId: 'deployment-target-select', + helpPageUrl: helpPagePath('user/clusters/agent/index'), components: { GlFormGroup, GlFormSelect, + GlFormText, + GlSprintf, + GlLink, }, mixins: [trackingMixin], data() { @@ -29,6 +41,11 @@ export default { formSubmitted: false, }; }, + computed: { + isK8sOptionSelected() { + return this.selectedTarget === K8S_OPTION; + }, + }, mounted() { const form = document.getElementById(NEW_PROJECT_FORM); form.addEventListener('submit', () => { @@ -52,10 +69,24 @@ export default { :id="$options.selectId" v-model="selectedTarget" :options="$options.deploymentTargets" + class="input-lg" > <template #first> <option :value="null" disabled>{{ $options.i18n.defaultOption }}</option> </template> </gl-form-select> + + <gl-form-text v-if="isK8sOptionSelected"> + <gl-sprintf :message="$options.i18n.k8sEducationText"> + <template #link="{ content }"> + <gl-link + :href="$options.helpPageUrl" + :data-track-action="$options.VISIT_DOCS_EVENT" + :data-track-label="$options.DEPLOYMENT_TARGET_LABEL" + >{{ content }}</gl-link + > + </template> + </gl-sprintf> + </gl-form-text> </gl-form-group> </template> diff --git a/app/assets/javascripts/projects/new/constants.js b/app/assets/javascripts/projects/new/constants.js index c5e6722981b..e52a84dc07e 100644 --- a/app/assets/javascripts/projects/new/constants.js +++ b/app/assets/javascripts/projects/new/constants.js @@ -1,7 +1,9 @@ import { s__ } from '~/locale'; +export const K8S_OPTION = s__('DeploymentTarget|Kubernetes (GKE, EKS, OpenShift, and so on)'); + export const DEPLOYMENT_TARGET_SELECTIONS = [ - s__('DeploymentTarget|Kubernetes (GKE, EKS, OpenShift, and so on)'), + K8S_OPTION, s__('DeploymentTarget|Managed container runtime (Fargate, Cloud Run, DigitalOcean App)'), s__('DeploymentTarget|Self-managed container runtime (Podman, Docker Swarm, Docker Compose)'), s__('DeploymentTarget|Heroku'), @@ -18,3 +20,4 @@ export const DEPLOYMENT_TARGET_SELECTIONS = [ export const NEW_PROJECT_FORM = 'new_project'; export const DEPLOYMENT_TARGET_LABEL = 'new_project_deployment_target'; export const DEPLOYMENT_TARGET_EVENT = 'select_deployment_target'; +export const VISIT_DOCS_EVENT = 'visit_docs'; |