Add latest changes from gitlab-org/gitlab@14-10-stable-eev14.10.0-rc42

2 files changed, 53 insertions, 15 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/components/new_project_url_select.vue b/app/assets/javascripts/projects/new/components/new_project_url_select.vue
index f4a21c6057c..506f1ec5ffd 100644
--- a/app/assets/javascripts/projects/new/components/new_project_url_select.vue
+++ b/app/assets/javascripts/projects/new/components/new_project_url_select.vue
@@ -13,6 +13,7 @@ import { MINIMUM_SEARCH_LENGTH } from '~/graphql_shared/constants';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import Tracking from '~/tracking';
 import { DEBOUNCE_DELAY } from '~/vue_shared/components/filtered_search_bar/constants';
+import { s__ } from '~/locale';
 import searchNamespacesWhereUserCanCreateProjectsQuery from '../queries/search_namespaces_where_user_can_create_projects.query.graphql';
 import eventHub from '../event_hub';
 
@@ -43,14 +44,7 @@ export default {
       debounce: DEBOUNCE_DELAY,
     },
   },
-  inject: [
-    'namespaceFullPath',
-    'namespaceId',
-    'rootUrl',
-    'trackLabel',
-    'userNamespaceFullPath',
-    'userNamespaceId',
-  ],
+  inject: ['namespaceFullPath', 'namespaceId', 'rootUrl', 'trackLabel', 'userNamespaceId'],
   data() {
     return {
       currentUser: {},
@@ -62,10 +56,11 @@ export default {
             fullPath: this.namespaceFullPath,
           }
         : {
-            id: this.userNamespaceId,
-            fullPath: this.userNamespaceFullPath,
+            id: undefined,
+            fullPath: s__('ProjectsNew|Pick a group or namespace'),
           },
       shouldSkipQuery: true,
+      userNamespaceId: this.userNamespaceId,
     };
   },
   computed: {
@@ -92,6 +87,9 @@ export default {
     hasNoMatches() {
       return !this.hasGroupMatches && !this.hasNamespaceMatches;
     },
+    dropdownPlaceholderClass() {
+      return this.selectedNamespace.id ? '' : 'gl-text-gray-500!';
+    },
   },
   created() {
     eventHub.$on('select-template', this.handleSelectTemplate);
@@ -130,11 +128,18 @@ export default {
 </script>
 
 <template>
-  <gl-button-group class="input-lg">
-    <gl-button class="gl-text-truncate" label :title="rootUrl">{{ rootUrl }}</gl-button>
+  <gl-button-group class="gl-w-full">
+    <gl-button
+      class="js-group-namespace-button gl-text-truncate gl-flex-grow-0!"
+      label
+      :title="rootUrl"
+      >{{ rootUrl }}</gl-button
+    >
+
     <gl-dropdown
       :text="selectedNamespace.fullPath"
-      toggle-class="gl-rounded-top-right-base! gl-rounded-bottom-right-base! gl-w-20"
+      class="js-group-namespace-dropdown gl-flex-grow-1"
+      :toggle-class="`gl-rounded-top-right-base! gl-rounded-bottom-right-base! gl-w-20 ${dropdownPlaceholderClass}`"
       data-qa-selector="select_namespace_dropdown"
       @show="track('activate_form_input', { label: trackLabel, property: 'project_path' })"
       @shown="handleDropdownShown"
@@ -166,11 +171,13 @@ export default {
       </template>
     </gl-dropdown>
 
+    <input type="hidden" name="project[selected_namespace_id]" :value="selectedNamespace.id" />
+
     <input
       id="project_namespace_id"
       type="hidden"
       name="project[namespace_id]"
-      :value="selectedNamespace.id"
+      :value="selectedNamespace.id || userNamespaceId"
     />
   </gl-button-group>
 </template>