From aed5470c032674664c71e8b7c32454564d56a39b Mon Sep 17 00:00:00 2001
From: Julia Miocene <jmiocene@gitlab.com>
Date: Fri, 21 Mar 2025 19:31:26 +0100
Subject: [PATCH 1/2] Add a first step validation for a project creation form

---
 .../projects/new_v2/components/app.vue        | 73 ++++++++++++-------
 .../components/project_destination_select.vue | 25 +++----
 .../javascripts/projects/new_v2/event_hub.js  |  3 -
 .../javascripts/projects/new_v2/index.js      |  2 +
 app/views/projects/new.html.haml              |  1 +
 .../projects/new_v2/components/app_spec.js    | 28 ++++++-
 6 files changed, 88 insertions(+), 44 deletions(-)
 delete mode 100644 app/assets/javascripts/projects/new_v2/event_hub.js

diff --git a/app/assets/javascripts/projects/new_v2/components/app.vue b/app/assets/javascripts/projects/new_v2/components/app.vue
index f851a37f1dcfb7..6b64a473f3a59b 100644
--- a/app/assets/javascripts/projects/new_v2/components/app.vue
+++ b/app/assets/javascripts/projects/new_v2/components/app.vue
@@ -33,15 +33,15 @@ export default {
     SafeHtml,
   },
   inject: {
-    rootPath: {
-      default: '/',
-    },
     projectsUrl: {
       default: null,
     },
     userNamespaceId: {
       default: null,
     },
+    userNamespaceFullPath: {
+      default: null,
+    },
     isCiCdAvailable: {
       default: false,
     },
@@ -61,7 +61,7 @@ export default {
       default: null,
     },
     namespaceId: {
-      default: null,
+      default: '',
     },
     trackLabel: {
       default: null,
@@ -75,20 +75,22 @@ export default {
   },
   data() {
     return {
-      selectedNamespace:
-        this.namespaceId && this.canSelectNamespace ? this.namespaceId : this.userNamespaceId,
+      namespace: {
+        id: this.namespaceId && this.canSelectNamespace ? this.namespaceId : this.userNamespaceId,
+        fullPath:
+          this.namespaceFullPath && this.canSelectNamespace
+            ? this.namespaceFullPath
+            : this.userNamespaceFullPath,
+        isPersonal: this.namespaceId === '',
+      },
       selectedProjectType: OPTIONS.blank.value,
       currentStep: 1,
-      rootUrl: this.rootPath,
     };
   },
 
   computed: {
-    isPersonalProject() {
-      return this.selectedNamespace === this.userNamespaceId;
-    },
     canChooseOption() {
-      if (!this.isPersonalProject) return true;
+      if (!this.namespace.isPersonal) return true;
       return this.canCreateProject && this.userProjectLimit > 0;
     },
     errorMessage() {
@@ -131,11 +133,16 @@ export default {
   },
 
   methods: {
-    choosePersonalNamespace() {
-      this.selectedNamespace = this.userNamespaceId;
-    },
-    chooseGroupNamespace() {
-      this.selectedNamespace = null;
+    onSelectNamespaceType(isPersonal) {
+      if (isPersonal) {
+        this.namespace.id = this.userNamespaceId;
+        this.namespace.fullPath = this.userNamespaceFullPath;
+        this.namespace.isPersonal = true;
+      } else {
+        this.namespace.id = this.namespaceId || null;
+        this.namespace.fullPath = this.namespaceFullPath;
+        this.namespace.isPersonal = false;
+      }
     },
     selectProjectType(value) {
       this.selectedProjectType = value;
@@ -145,6 +152,8 @@ export default {
       setLocationHash();
     },
     onNext() {
+      if (this.namespace.id === null) return;
+
       this.currentStep += 1;
       setLocationHash(this.selectedProjectType);
     },
@@ -157,6 +166,10 @@ export default {
         this.currentStep = 1;
       }
     },
+    onSelectNamespace(newNamespace) {
+      this.namespace.id = newNamespace.id;
+      this.namespace.fullPath = newNamespace.fullPath;
+    },
   },
 };
 </script>
@@ -178,10 +191,10 @@ export default {
               category="primary"
               variant="default"
               size="medium"
-              :selected="isPersonalProject"
+              :selected="namespace.isPersonal"
               class="gl-w-full"
               data-testid="personal-namespace-button"
-              @click="choosePersonalNamespace"
+              @click="onSelectNamespaceType(true)"
             >
               {{ s__('ProjectsNew|A personal project') }}
             </gl-button>
@@ -189,24 +202,32 @@ export default {
               category="primary"
               variant="default"
               size="medium"
-              :selected="!isPersonalProject"
+              :selected="!namespace.isPersonal"
               class="gl-w-full"
               data-testid="group-namespace-button"
-              @click="chooseGroupNamespace"
+              @click="onSelectNamespaceType(false)"
             >
               {{ s__('ProjectsNew|A project within a group') }}
             </gl-button>
           </gl-button-group>
         </gl-form-group>
 
-        <gl-form-group v-if="!isPersonalProject" :label="s__('ProjectsNew|Choose a group')">
+        <gl-form-group
+          v-if="!namespace.isPersonal"
+          :label="s__('ProjectsNew|Choose a group')"
+          :invalid-feedback="
+            s__('ProjectsNew|Pick a group or namespace where you want to create this project.')
+          "
+          :state="namespace.id !== null"
+          data-testid="group-selector-form-group"
+        >
           <new-project-destination-select
-            :namespace-full-path="namespaceFullPath"
-            :namespace-id="namespaceId"
+            :namespace-full-path="namespace.fullPath"
+            :namespace-id="namespace.id"
             :track-label="trackLabel"
-            :root-url="rootUrl"
             :groups-only="true"
             data-testid="group-selector"
+            @onSelectNamespace="onSelectNamespace"
           />
         </gl-form-group>
 
@@ -242,7 +263,7 @@ export default {
       </template>
       <template #footer>
         <div v-if="newProjectGuidelines" v-safe-html="newProjectGuidelines" class="gl-mb-6"></div>
-        <command-line v-if="isPersonalProject" />
+        <command-line v-if="namespace.isPersonal" />
       </template>
     </multi-step-form-template>
 
@@ -251,7 +272,7 @@ export default {
       v-if="currentStep === 2"
       :key="selectedProjectOption.key"
       :option="selectedProjectOption"
-      :namespace-id="selectedNamespace"
+      :namespace="namespace"
       data-testid="new-project-step2"
       @back="onBack"
       @next="onNext"
diff --git a/app/assets/javascripts/projects/new_v2/components/project_destination_select.vue b/app/assets/javascripts/projects/new_v2/components/project_destination_select.vue
index 7675e1c9ed3fac..1823c3e9d25355 100644
--- a/app/assets/javascripts/projects/new_v2/components/project_destination_select.vue
+++ b/app/assets/javascripts/projects/new_v2/components/project_destination_select.vue
@@ -1,13 +1,12 @@
 <script>
 import { GlCollapsibleListbox } from '@gitlab/ui';
-import { joinPaths, PATH_SEPARATOR } from '~/lib/utils/url_utility';
+import { PATH_SEPARATOR } from '~/lib/utils/url_utility';
 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__, n__ } from '~/locale';
 import searchNamespacesWhereUserCanCreateProjectsQuery from '~/projects/new/queries/search_namespaces_where_user_can_create_projects.query.graphql';
-import eventHub from '../event_hub';
 
 export default {
   components: {
@@ -30,7 +29,7 @@ export default {
       debounce: DEBOUNCE_DELAY,
     },
   },
-  inject: ['userNamespaceId', 'canCreateProject'],
+  inject: ['userNamespaceId', 'userNamespaceFullPath', 'canCreateProject'],
   props: {
     namespaceFullPath: {
       type: String,
@@ -159,16 +158,14 @@ export default {
       }
     },
     handleDropdownItemClick(namespaceId) {
-      const namespace = this.allItems.find((item) => item.id === namespaceId);
-
-      if (namespace) {
-        eventHub.$emit('update-visibility', {
-          name: namespace.name,
-          visibility: namespace.visibility,
-          showPath: namespace.webUrl,
-          editPath: joinPaths(namespace.webUrl, '-', 'edit'),
-        });
-      }
+      let namespace = this.allItems.find((item) => item.id === namespaceId);
+      namespace = {
+        id: namespace.id,
+        visibility: namespace.visibility,
+        fullPath: namespace.fullPath,
+        isPersonal: namespace.fullPath === this.userNamespaceFullPath,
+      };
+      this.$emit('onSelectNamespace', namespace);
       this.setNamespace(namespace);
     },
     handleSelectTemplate(id, fullPath) {
@@ -229,7 +226,7 @@ export default {
     <input
       id="project[namespace_id]"
       type="hidden"
-      name="namespace_id"
+      name="project[namespace_id]"
       :value="selectedNamespace.id || userNamespaceUniqueId"
     />
   </div>
diff --git a/app/assets/javascripts/projects/new_v2/event_hub.js b/app/assets/javascripts/projects/new_v2/event_hub.js
deleted file mode 100644
index e31806ad199a11..00000000000000
--- a/app/assets/javascripts/projects/new_v2/event_hub.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import createEventHub from '~/helpers/event_hub_factory';
-
-export default createEventHub();
diff --git a/app/assets/javascripts/projects/new_v2/index.js b/app/assets/javascripts/projects/new_v2/index.js
index c35ba8d2e3507d..1b2850fff00581 100644
--- a/app/assets/javascripts/projects/new_v2/index.js
+++ b/app/assets/javascripts/projects/new_v2/index.js
@@ -15,6 +15,7 @@ export function initNewProjectForm() {
     namespaceFullPath,
     namespaceId,
     userNamespaceId,
+    userNamespaceFullPath,
     newProjectGuidelines,
     pushToCreateProjectCommand,
     rootPath,
@@ -53,6 +54,7 @@ export function initNewProjectForm() {
     namespaceFullPath,
     namespaceId,
     userNamespaceId,
+    userNamespaceFullPath,
     newProjectGuidelines,
     pushToCreateProjectCommand,
     rootPath,
diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml
index 69bf9adef419a2..0014763e9089fa 100644
--- a/app/views/projects/new.html.haml
+++ b/app/views/projects/new.html.haml
@@ -10,6 +10,7 @@
     namespace_full_path: GroupFinder.new(current_user).execute(id: namespace_id_from(params))&.full_path || @current_user_group&.full_path,
     namespace_id: namespace_id_from(params).to_s || @current_user_group&.id.to_s,
     user_namespace_id: current_user.namespace_id.to_s,
+    user_namespace_full_path: current_user.namespace.full_path,
     new_project_guidelines: brand_new_project_guidelines,
     push_to_create_project_command: push_to_create_project_command,
     root_path: root_path,
diff --git a/spec/frontend/projects/new_v2/components/app_spec.js b/spec/frontend/projects/new_v2/components/app_spec.js
index eadab1dc6ab0ff..6ca33a42b196e8 100644
--- a/spec/frontend/projects/new_v2/components/app_spec.js
+++ b/spec/frontend/projects/new_v2/components/app_spec.js
@@ -16,7 +16,6 @@ describe('New project creation app', () => {
       provide: {
         userNamespaceId: '1',
         canCreateProject: true,
-        rootPath: '/',
         projectsUrl: '/dashboard/projects',
         userProjectLimit: 10000,
         canSelectNamespace: true,
@@ -128,6 +127,33 @@ describe('New project creation app', () => {
     });
   });
 
+  describe('group namespace project', () => {
+    it('starts with group namespace when namespaceId provided', () => {
+      createComponent({ namespaceId: '2' });
+
+      expect(wrapper.findByTestId('personal-namespace-button').props('selected')).toBe(false);
+      expect(wrapper.findByTestId('group-namespace-button').props('selected')).toBe(true);
+    });
+
+    it('renders a group select', () => {
+      createComponent({ namespaceId: '2' });
+
+      expect(wrapper.findByTestId('group-selector').exists()).toBe(true);
+    });
+
+    it('renders error when user switched from personal to a group namespace', () => {
+      createComponent({ namespaceId: '2' });
+
+      wrapper.findByTestId('personal-namespace-button').trigger('click');
+      wrapper.findByTestId('group-namespace-button').trigger('click');
+
+      const formGroup = wrapper.findByTestId('group-selector-form-group');
+      expect(formGroup.vm.$attrs['invalid-feedback']).toBe(
+        'Pick a group or namespace where you want to create this project.',
+      );
+    });
+  });
+
   describe('with command line', () => {
     it('renders for a personal namespace', () => {
       createComponent();
-- 
GitLab


From e95fcbc4437aa103d3ee07edff9a674776301f4b Mon Sep 17 00:00:00 2001
From: Julia Miocene <jmiocene@gitlab.com>
Date: Wed, 26 Mar 2025 12:40:21 +0100
Subject: [PATCH 2/2] Apply suggestions

---
 .../projects/new_v2/components/app.vue        | 67 ++++++++++++-------
 .../components/project_destination_select.vue | 14 ++--
 .../javascripts/projects/new_v2/index.js      |  2 +-
 locale/gitlab.pot                             | 19 +++---
 .../projects/new_v2/components/app_spec.js    | 12 ++--
 5 files changed, 71 insertions(+), 43 deletions(-)

diff --git a/app/assets/javascripts/projects/new_v2/components/app.vue b/app/assets/javascripts/projects/new_v2/components/app.vue
index 6b64a473f3a59b..7a404cfce1ab58 100644
--- a/app/assets/javascripts/projects/new_v2/components/app.vue
+++ b/app/assets/javascripts/projects/new_v2/components/app.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlButton, GlButtonGroup, GlFormGroup, GlIcon, GlAlert } from '@gitlab/ui';
-import { s__, sprintf } from '~/locale';
+import { s__, sprintf, formatNumber } from '~/locale';
 import { getLocationHash, setLocationHash } from '~/lib/utils/url_utility';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import MultiStepFormTemplate from '~/vue_shared/components/multi_step_form_template.vue';
@@ -76,24 +76,28 @@ export default {
   data() {
     return {
       namespace: {
-        id: this.namespaceId && this.canSelectNamespace ? this.namespaceId : this.userNamespaceId,
-        fullPath:
-          this.namespaceFullPath && this.canSelectNamespace
-            ? this.namespaceFullPath
-            : this.userNamespaceFullPath,
+        id: this.namespaceId ? this.namespaceId : this.userNamespaceId,
+        fullPath: this.namespaceFullPath ? this.namespaceFullPath : this.userNamespaceFullPath,
         isPersonal: this.namespaceId === '',
       },
       selectedProjectType: OPTIONS.blank.value,
       currentStep: 1,
+      showValidation: false,
     };
   },
 
   computed: {
     canChooseOption() {
-      if (!this.namespace.isPersonal) return true;
-      return this.canCreateProject && this.userProjectLimit > 0;
+      if (this.namespace.isPersonal) {
+        return this.canCreateProject && this.userProjectLimit > 0;
+      }
+      if (!this.canSelectNamespace) return false;
+      return true;
     },
     errorMessage() {
+      if (!this.canSelectNamespace && !this.namespace.isPersonal) {
+        return s__('ProjectsNew|You have no groups. Create a new one or join an existing group.');
+      }
       if (this.userProjectLimit === 0) {
         return s__(
           'ProjectsNew|You cannot create projects in your personal namespace. Contact your GitLab administrator.',
@@ -104,7 +108,7 @@ export default {
           "ProjectsNew|You've reached your limit of %{limit} projects created. Contact your GitLab administrator.",
         ),
         {
-          limit: this.userProjectLimit,
+          limit: formatNumber(this.userProjectLimit),
         },
       );
     },
@@ -126,6 +130,10 @@ export default {
     additionalBreadcrumb() {
       return this.currentStep === 2 ? this.selectedProjectOption : null;
     },
+    isGroupSelectedValid() {
+      if (this.showValidation) return this.namespace.id !== '';
+      return true;
+    },
   },
 
   created() {
@@ -133,16 +141,17 @@ export default {
   },
 
   methods: {
-    onSelectNamespaceType(isPersonal) {
+    setNamespace(isPersonal) {
       if (isPersonal) {
         this.namespace.id = this.userNamespaceId;
         this.namespace.fullPath = this.userNamespaceFullPath;
         this.namespace.isPersonal = true;
       } else {
-        this.namespace.id = this.namespaceId || null;
+        this.namespace.id = this.namespaceId || '';
         this.namespace.fullPath = this.namespaceFullPath;
         this.namespace.isPersonal = false;
       }
+      this.showValidation = false;
     },
     selectProjectType(value) {
       this.selectedProjectType = value;
@@ -152,7 +161,10 @@ export default {
       setLocationHash();
     },
     onNext() {
-      if (this.namespace.id === null) return;
+      if (this.namespace.id === '') {
+        this.showValidation = true;
+        return;
+      }
 
       this.currentStep += 1;
       setLocationHash(this.selectedProjectType);
@@ -166,9 +178,10 @@ export default {
         this.currentStep = 1;
       }
     },
-    onSelectNamespace(newNamespace) {
-      this.namespace.id = newNamespace.id;
-      this.namespace.fullPath = newNamespace.fullPath;
+    onSelectNamespace({ id, fullPath }) {
+      this.namespace.id = id;
+      this.namespace.fullPath = fullPath;
+      this.showValidation = false;
     },
   },
 };
@@ -185,7 +198,7 @@ export default {
       data-testid="new-project-step1"
     >
       <template #form>
-        <gl-form-group :label="s__('ProjectNew|What do you want to create?')">
+        <gl-form-group :label="s__('ProjectNew|Where do you want to create the new project?')">
           <gl-button-group class="gl-w-full">
             <gl-button
               category="primary"
@@ -194,9 +207,9 @@ export default {
               :selected="namespace.isPersonal"
               class="gl-w-full"
               data-testid="personal-namespace-button"
-              @click="onSelectNamespaceType(true)"
+              @click="setNamespace(true)"
             >
-              {{ s__('ProjectsNew|A personal project') }}
+              {{ s__('ProjectsNew|In your personal namespace') }}
             </gl-button>
             <gl-button
               category="primary"
@@ -205,27 +218,31 @@ export default {
               :selected="!namespace.isPersonal"
               class="gl-w-full"
               data-testid="group-namespace-button"
-              @click="onSelectNamespaceType(false)"
+              @click="setNamespace(false)"
             >
-              {{ s__('ProjectsNew|A project within a group') }}
+              {{ s__('ProjectsNew|In one of your groups') }}
             </gl-button>
           </gl-button-group>
         </gl-form-group>
 
         <gl-form-group
-          v-if="!namespace.isPersonal"
-          :label="s__('ProjectsNew|Choose a group')"
+          v-if="!namespace.isPersonal && canChooseOption"
           :invalid-feedback="
             s__('ProjectsNew|Pick a group or namespace where you want to create this project.')
           "
-          :state="namespace.id !== null"
+          :state="isGroupSelectedValid"
           data-testid="group-selector-form-group"
         >
+          <label id="group-selector" for="group">
+            {{ s__('ProjectsNew|Choose a group') }}
+          </label>
           <new-project-destination-select
             :namespace-full-path="namespace.fullPath"
             :namespace-id="namespace.id"
             :track-label="trackLabel"
             :groups-only="true"
+            toggle-aria-labelled-by="group-selector"
+            toggle-id="group"
             data-testid="group-selector"
             @onSelectNamespace="onSelectNamespace"
           />
@@ -251,7 +268,7 @@ export default {
           {{ errorMessage }}
         </gl-alert>
       </template>
-      <template #next>
+      <template v-if="canChooseOption" #next>
         <gl-button
           category="primary"
           variant="confirm"
@@ -261,7 +278,7 @@ export default {
           {{ __('Next step') }}
         </gl-button>
       </template>
-      <template #footer>
+      <template v-if="canChooseOption" #footer>
         <div v-if="newProjectGuidelines" v-safe-html="newProjectGuidelines" class="gl-mb-6"></div>
         <command-line v-if="namespace.isPersonal" />
       </template>
diff --git a/app/assets/javascripts/projects/new_v2/components/project_destination_select.vue b/app/assets/javascripts/projects/new_v2/components/project_destination_select.vue
index 1823c3e9d25355..a55a61c2139883 100644
--- a/app/assets/javascripts/projects/new_v2/components/project_destination_select.vue
+++ b/app/assets/javascripts/projects/new_v2/components/project_destination_select.vue
@@ -51,6 +51,11 @@ export default {
       required: false,
       default: '',
     },
+    toggleId: {
+      type: String,
+      required: false,
+      default: '',
+    },
     groupsOnly: {
       type: Boolean,
       required: false,
@@ -158,14 +163,14 @@ export default {
       }
     },
     handleDropdownItemClick(namespaceId) {
-      let namespace = this.allItems.find((item) => item.id === namespaceId);
-      namespace = {
+      const namespace = this.allItems.find((item) => item.id === namespaceId);
+      this.$emit('onSelectNamespace', {
         id: namespace.id,
         visibility: namespace.visibility,
         fullPath: namespace.fullPath,
         isPersonal: namespace.fullPath === this.userNamespaceFullPath,
-      };
-      this.$emit('onSelectNamespace', namespace);
+      });
+
       this.setNamespace(namespace);
     },
     handleSelectTemplate(id, fullPath) {
@@ -208,6 +213,7 @@ export default {
       :items="items"
       :toggle-text="dropdownText"
       toggle-class="gl-w-full"
+      :toggle-id="toggleId"
       :toggle-aria-labelled-by="toggleAriaLabelledBy"
       :no-results-text="$options.i18n.emptySearchResult"
       class="project-destination-select gl-w-full gl-max-w-full"
diff --git a/app/assets/javascripts/projects/new_v2/index.js b/app/assets/javascripts/projects/new_v2/index.js
index 1b2850fff00581..93dc4398371d65 100644
--- a/app/assets/javascripts/projects/new_v2/index.js
+++ b/app/assets/javascripts/projects/new_v2/index.js
@@ -68,7 +68,7 @@ export function initNewProjectForm() {
     canImportProjects: parseBoolean(canImportProjects),
     canSelectNamespace: parseBoolean(canSelectNamespace),
     canCreateProject: parseBoolean(canCreateProject),
-    userProjectLimit,
+    userProjectLimit: parseInt(userProjectLimit, 10),
     importHistoryPath,
     importGitlabEnabled: parseBoolean(importGitlabEnabled),
     importGitlabImportPath,
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 7a5be32ebb01a7..1763b732d0ffc8 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -46199,10 +46199,10 @@ msgstr ""
 msgid "ProjectNew|Push project from command line"
 msgstr ""
 
-msgid "ProjectNew|What do you want to create?"
+msgid "ProjectNew|What does this command do?"
 msgstr ""
 
-msgid "ProjectNew|What does this command do?"
+msgid "ProjectNew|Where do you want to create the new project?"
 msgstr ""
 
 msgid "ProjectNew|You can also create a project from the command line"
@@ -47221,12 +47221,6 @@ msgstr[1] ""
 msgid "ProjectsNew|(optional)"
 msgstr ""
 
-msgid "ProjectsNew|A personal project"
-msgstr ""
-
-msgid "ProjectsNew|A project within a group"
-msgstr ""
-
 msgid "ProjectsNew|Allows you to immediately clone this project’s repository. Skip this if you plan to push up an existing repository."
 msgstr ""
 
@@ -47323,6 +47317,12 @@ msgstr ""
 msgid "ProjectsNew|Import repositories from Bitbucket Server"
 msgstr ""
 
+msgid "ProjectsNew|In one of your groups"
+msgstr ""
+
+msgid "ProjectsNew|In your personal namespace"
+msgstr ""
+
 msgid "ProjectsNew|Include a Getting Started README"
 msgstr ""
 
@@ -47434,6 +47434,9 @@ msgstr ""
 msgid "ProjectsNew|You cannot create projects in your personal namespace. Contact your GitLab administrator."
 msgstr ""
 
+msgid "ProjectsNew|You have no groups. Create a new one or join an existing group."
+msgstr ""
+
 msgid "ProjectsNew|You've reached your limit of %{limit} projects created. Contact your GitLab administrator."
 msgstr ""
 
diff --git a/spec/frontend/projects/new_v2/components/app_spec.js b/spec/frontend/projects/new_v2/components/app_spec.js
index 6ca33a42b196e8..7cfe45f2364050 100644
--- a/spec/frontend/projects/new_v2/components/app_spec.js
+++ b/spec/frontend/projects/new_v2/components/app_spec.js
@@ -1,4 +1,5 @@
 import { GlAlert } from '@gitlab/ui';
+import { nextTick } from 'vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { getLocationHash, setLocationHash } from '~/lib/utils/url_utility';
 import App from '~/projects/new_v2/components/app.vue';
@@ -113,7 +114,7 @@ describe('New project creation app', () => {
 
       expect(findSingleChoiceSelector().exists()).toBe(false);
       expect(findAlert().text()).toBe(
-        "You've reached your limit of 10000 projects created. Contact your GitLab administrator.",
+        "You've reached your limit of 10,000 projects created. Contact your GitLab administrator.",
       );
     });
 
@@ -141,11 +142,12 @@ describe('New project creation app', () => {
       expect(wrapper.findByTestId('group-selector').exists()).toBe(true);
     });
 
-    it('renders error when user switched from personal to a group namespace', () => {
-      createComponent({ namespaceId: '2' });
+    it('renders error when user click next button with no namespace provided', async () => {
+      createComponent();
 
-      wrapper.findByTestId('personal-namespace-button').trigger('click');
-      wrapper.findByTestId('group-namespace-button').trigger('click');
+      wrapper.findByTestId('group-namespace-button').vm.$emit('click');
+      findNextButton().trigger('click');
+      await nextTick();
 
       const formGroup = wrapper.findByTestId('group-selector-form-group');
       expect(formGroup.vm.$attrs['invalid-feedback']).toBe(
-- 
GitLab