Add latest changes from gitlab-org/gitlab@master

3 files changed, 45 insertions, 15 deletions

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>
diff --git a/app/assets/javascripts/projects/new/index.js b/app/assets/javascripts/projects/new/index.js
index 4de9b8a6f47..a72172a4f5e 100644
--- a/app/assets/javascripts/projects/new/index.js
+++ b/app/assets/javascripts/projects/new/index.js
@@ -58,7 +58,6 @@ export function initNewProjectUrlSelect() {
           namespaceId: el.dataset.namespaceId,
           rootUrl: el.dataset.rootUrl,
           trackLabel: el.dataset.trackLabel,
-          userNamespaceFullPath: el.dataset.userNamespaceFullPath,
           userNamespaceId: el.dataset.userNamespaceId,
         },
         render: (createElement) => createElement(NewProjectUrlSelect),
diff --git a/app/assets/javascripts/projects/project_new.js b/app/assets/javascripts/projects/project_new.js
index f1b7e3df7d6..fbef51b43b2 100644
--- a/app/assets/javascripts/projects/project_new.js
+++ b/app/assets/javascripts/projects/project_new.js
@@ -14,6 +14,7 @@ import {
 let hasUserDefinedProjectPath = false;
 let hasUserDefinedProjectName = false;
 const invalidInputClass = 'gl-field-error-outline';
+const invalidDropdownClass = 'gl-inset-border-1-red-400!';
 
 const cancelSource = axios.CancelToken.source();
 const endpoint = `${gon.relative_url_root}/import/url/validate`;
@@ -50,6 +51,25 @@ const onProjectPathChange = ($projectNameInput, $projectPathInput, hasExistingPr
   }
 };
 
+const selectedNamespaceId = () => document.querySelector('[name="project[selected_namespace_id]"]');
+const dropdownButton = () => document.querySelector('.js-group-namespace-dropdown > button');
+const namespaceButton = () => document.querySelector('.js-group-namespace-button');
+const namespaceError = () => document.querySelector('.js-group-namespace-error');
+
+const validateGroupNamespaceDropdown = (e) => {
+  if (selectedNamespaceId() && !selectedNamespaceId().attributes.value) {
+    document.querySelector('input[data-qa-selector="project_name"]').reportValidity();
+    e.preventDefault();
+    dropdownButton().classList.add(invalidDropdownClass);
+    namespaceButton().classList.add(invalidDropdownClass);
+    namespaceError().classList.remove('gl-display-none');
+  } else {
+    dropdownButton().classList.remove(invalidDropdownClass);
+    namespaceButton().classList.remove(invalidDropdownClass);
+    namespaceError().classList.add('gl-display-none');
+  }
+};
+
 const setProjectNamePathHandlers = ($projectNameInput, $projectPathInput) => {
   const specialRepo = document.querySelector('.js-user-readme-repo');
 
@@ -70,6 +90,10 @@ const setProjectNamePathHandlers = ($projectNameInput, $projectPathInput) => {
       $projectPathInput.val() !== $projectPathInput.data('username'),
     );
   });
+
+  document.querySelector('.js-create-project-button').addEventListener('click', (e) => {
+    validateGroupNamespaceDropdown(e);
+  });
 };
 
 const deriveProjectPathFromUrl = ($projectImportUrl) => {