Add latest changes from gitlab-org/gitlab@master

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),
+  });
+}