diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-02-08 03:14:26 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-02-08 03:14:26 +0300 |
commit | 00a0d08538c0f4786671c58ae64a9110c45dbfe1 (patch) | |
tree | 67ba645719e8674941d83f6855edcade78ced051 /app/assets/javascripts/projects | |
parent | 2001877ccc364c9e0387d821beb7acffd5413a3c (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/projects')
3 files changed, 95 insertions, 0 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 new file mode 100644 index 00000000000..f3b7e39f148 --- /dev/null +++ b/app/assets/javascripts/projects/new/components/deployment_target_select.vue @@ -0,0 +1,61 @@ +<script> +import { GlFormGroup, GlFormSelect } from '@gitlab/ui'; +import { s__ } from '~/locale'; +import Tracking from '~/tracking'; +import { + DEPLOYMENT_TARGET_SELECTIONS, + DEPLOYMENT_TARGET_LABEL, + DEPLOYMENT_TARGET_EVENT, + NEW_PROJECT_FORM, +} from '../constants'; + +const trackingMixin = Tracking.mixin({ label: DEPLOYMENT_TARGET_LABEL }); + +export default { + i18n: { + deploymentTargetLabel: s__('Deployment Target|Project deployment target (optional)'), + defaultOption: s__('Deployment Target|Select the deployment target'), + }, + deploymentTargets: DEPLOYMENT_TARGET_SELECTIONS, + selectId: 'deployment-target-select', + components: { + GlFormGroup, + GlFormSelect, + }, + mixins: [trackingMixin], + data() { + return { + selectedTarget: null, + formSubmitted: false, + }; + }, + mounted() { + const form = document.getElementById(NEW_PROJECT_FORM); + form.addEventListener('submit', () => { + this.formSubmitted = true; + this.trackSelection(); + }); + }, + methods: { + trackSelection() { + if (this.formSubmitted && this.selectedTarget) { + this.track(DEPLOYMENT_TARGET_EVENT, { property: this.selectedTarget }); + } + }, + }, +}; +</script> + +<template> + <gl-form-group :label="$options.i18n.deploymentTargetLabel" :label-for="$options.selectId"> + <gl-form-select + :id="$options.selectId" + v-model="selectedTarget" + :options="$options.deploymentTargets" + > + <template #first> + <option :value="null" disabled>{{ $options.i18n.defaultOption }}</option> + </template> + </gl-form-select> + </gl-form-group> +</template> diff --git a/app/assets/javascripts/projects/new/constants.js b/app/assets/javascripts/projects/new/constants.js new file mode 100644 index 00000000000..e99600af3d5 --- /dev/null +++ b/app/assets/javascripts/projects/new/constants.js @@ -0,0 +1,20 @@ +import { s__ } from '~/locale'; + +export const DEPLOYMENT_TARGET_SELECTIONS = [ + s__('DeploymentTarget|Kubernetes (GKE, EKS, OpenShift, and so on)'), + s__('DeploymentTarget|Managed container runtime (Fargate, Cloud Run, DigitalOcean App)'), + s__('DeploymentTarget|Self-managed container runtime (Podman, Docker Swarm, Docker Compose)'), + s__('DeploymentTarget|Heroku'), + s__('DeploymentTarget|Virtual machine (for example, EC2)'), + s__('DeploymentTarget|Mobile app store'), + s__('DeploymentTarget|Registry (package or container)'), + s__('DeploymentTarget|Infrastructure provider (Terraform, Cloudformation, and so on)'), + s__('DeploymentTarget|Serverless backend (Lambda, Cloud functions)'), + s__('DeploymentTarget|GitLab Pages'), + s__('DeploymentTarget|Other hosting service'), + s__('DeploymentTarget|None'), +]; + +export const NEW_PROJECT_FORM = 'new_project'; +export const DEPLOYMENT_TARGET_LABEL = 'new_project_deployment_target'; +export const DEPLOYMENT_TARGET_EVENT = 'select_deployment_target'; diff --git a/app/assets/javascripts/projects/new/index.js b/app/assets/javascripts/projects/new/index.js index 010c6a29ae3..4de9b8a6f47 100644 --- a/app/assets/javascripts/projects/new/index.js +++ b/app/assets/javascripts/projects/new/index.js @@ -4,6 +4,7 @@ import createDefaultClient from '~/lib/graphql'; import { parseBoolean } from '~/lib/utils/common_utils'; import NewProjectCreationApp from './components/app.vue'; import NewProjectUrlSelect from './components/new_project_url_select.vue'; +import DeploymentTargetSelect from './components/deployment_target_select.vue'; export function initNewProjectCreation() { const el = document.querySelector('.js-new-project-creation'); @@ -64,3 +65,16 @@ export function initNewProjectUrlSelect() { }), ); } + +export function initDeploymentTargetSelect() { + const el = document.querySelector('.js-deployment-target-select'); + + if (!el) { + return null; + } + + return new Vue({ + el, + render: (createElement) => createElement(DeploymentTargetSelect), + }); +} |