From 4aee4fcf317678514ff0258271e9f004858dc155 Mon Sep 17 00:00:00 2001
From: Julia Miocene <jmiocene@gitlab.com>
Date: Thu, 30 Jan 2025 17:36:29 +0100
Subject: [PATCH 1/2] Add personal options validation to the new project
 creation form

---
 .../projects/new_v2/components/app.vue        | 52 +++++++++++++++++--
 .../components/project_destination_select.vue | 13 +++--
 .../javascripts/projects/new_v2/index.js      |  8 +++
 app/views/projects/new.html.haml              |  5 +-
 locale/gitlab.pot                             |  6 +++
 .../projects/new_v2/components/app_spec.js    | 25 +++++++--
 6 files changed, 95 insertions(+), 14 deletions(-)

diff --git a/app/assets/javascripts/projects/new_v2/components/app.vue b/app/assets/javascripts/projects/new_v2/components/app.vue
index d198166a733058..8cfe2deb474584 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 } from '@gitlab/ui';
-import { s__ } from '~/locale';
+import { GlButton, GlButtonGroup, GlFormGroup, GlIcon, GlAlert } from '@gitlab/ui';
+import { s__, sprintf } from '~/locale';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import MultiStepFormTemplate from '~/vue_shared/components/multi_step_form_template.vue';
 import SingleChoiceSelector from '~/vue_shared/components/single_choice_selector.vue';
@@ -63,6 +63,7 @@ export default {
     GlButtonGroup,
     GlFormGroup,
     GlIcon,
+    GlAlert,
     MultiStepFormTemplate,
     SingleChoiceSelector,
     SingleChoiceSelectorItem,
@@ -113,6 +114,16 @@ export default {
       required: false,
       default: true,
     },
+    canCreateProject: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    canSelectNamespace: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     namespaceFullPath: {
       type: String,
       required: false,
@@ -133,6 +144,10 @@ export default {
       required: false,
       default: null,
     },
+    userProjectLimit: {
+      type: Number,
+      required: true,
+    },
     newProjectGuidelines: {
       type: String,
       required: false,
@@ -141,7 +156,8 @@ export default {
   },
   data() {
     return {
-      selectedNamespace: this.namespaceId ? this.namespaceId : this.userNamespaceId,
+      selectedNamespace:
+        this.namespaceId && this.canSelectNamespace ? this.namespaceId : this.userNamespaceId,
       rootUrl: this.rootPath,
     };
   },
@@ -149,6 +165,25 @@ export default {
     isPersonalProject() {
       return this.selectedNamespace === this.userNamespaceId;
     },
+    canChooseOption() {
+      if (this.selectedNamespace !== this.userNamespaceId) return true;
+      return this.canCreateProject && this.userProjectLimit > 0;
+    },
+    errorMessage() {
+      if (this.userProjectLimit === 0) {
+        return s__(
+          'ProjectsNew|You cannot create projects in your personal namespace. Contact your GitLab administrator.',
+        );
+      }
+      return sprintf(
+        s__(
+          "ProjectsNew|You've reached your limit of %{limit} projects created. Contact your GitLab administrator.",
+        ),
+        {
+          limit: this.userProjectLimit,
+        },
+      );
+    },
   },
   methods: {
     choosePersonalNamespace() {
@@ -165,7 +200,10 @@ export default {
 <template>
   <multi-step-form-template :title="__('Create new project')" :current-step="1">
     <template #form>
-      <gl-form-group :label="s__('ProjectNew|What do you want to create?')">
+      <gl-form-group
+        v-if="canSelectNamespace"
+        :label="s__('ProjectNew|What do you want to create?')"
+      >
         <gl-button-group class="gl-w-full">
           <gl-button
             category="primary"
@@ -199,11 +237,12 @@ export default {
           :user-namespace-id="userNamespaceId"
           :track-label="trackLabel"
           :root-url="rootUrl"
+          :groups-only="true"
           data-testid="group-selector"
         />
       </gl-form-group>
 
-      <single-choice-selector checked="blank_project">
+      <single-choice-selector v-if="canChooseOption" checked="blank_project">
         <single-choice-selector-item v-bind="$options.OPTIONS.blank" />
         <single-choice-selector-item v-bind="$options.OPTIONS.template" />
         <single-choice-selector-item
@@ -221,6 +260,9 @@ export default {
         </single-choice-selector-item>
         <single-choice-selector-item v-bind="$options.OPTIONS.transfer" :disabled="true" />
       </single-choice-selector>
+      <gl-alert v-else variant="danger" :dismissible="false">
+        {{ errorMessage }}
+      </gl-alert>
     </template>
     <template #footer>
       <div v-if="newProjectGuidelines" v-safe-html="newProjectGuidelines" class="gl-mb-6"></div>
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 7c5a0269aef64d..65f7f6f5164752 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
@@ -32,6 +32,7 @@ export default {
       debounce: DEBOUNCE_DELAY,
     },
   },
+  inject: ['userNamespaceId', 'canCreateProject'],
   props: {
     namespaceFullPath: {
       type: String,
@@ -43,15 +44,15 @@ export default {
       required: false,
       default: '',
     },
-    userNamespaceId: {
+    trackLabel: {
       type: String,
       required: false,
       default: '',
     },
-    trackLabel: {
-      type: String,
+    groupsOnly: {
+      type: Boolean,
       required: false,
-      default: '',
+      default: false,
     },
   },
   data() {
@@ -91,7 +92,9 @@ export default {
       );
     },
     items() {
-      return this.namespaceItems.concat(this.groupsItems);
+      if (this.groupsOnly) return this.groupsItems;
+      if (this.canCreateProject) return this.namespaceItems.concat(this.groupsItems);
+      return this.groupsItems;
     },
     groupsItems() {
       if (this.hasGroupMatches) {
diff --git a/app/assets/javascripts/projects/new_v2/index.js b/app/assets/javascripts/projects/new_v2/index.js
index 8552f8346d6cfe..2c1afd199f900e 100644
--- a/app/assets/javascripts/projects/new_v2/index.js
+++ b/app/assets/javascripts/projects/new_v2/index.js
@@ -26,6 +26,9 @@ export function initNewProjectForm() {
     namespaceId,
     userNamespaceId,
     trackLabel,
+    canSelectNamespace,
+    canCreateProject,
+    userProjectLimit,
     newProjectGuidelines,
   } = el.dataset;
 
@@ -42,10 +45,15 @@ export function initNewProjectForm() {
     namespaceId,
     userNamespaceId,
     trackLabel,
+    canSelectNamespace: parseBoolean(canSelectNamespace),
+    canCreateProject: parseBoolean(canCreateProject),
+    userProjectLimit: parseInt(userProjectLimit, 10),
     newProjectGuidelines,
   };
 
   const provide = {
+    userNamespaceId,
+    canCreateProject: parseBoolean(canCreateProject),
     projectHelpPath,
     pushToCreateProjectCommand,
   };
diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml
index 50771c19ced753..653a05c183795b 100644
--- a/app/views/projects/new.html.haml
+++ b/app/views/projects/new.html.haml
@@ -21,7 +21,10 @@
     is_ci_cd_available: remote_mirror_setting_enabled?.to_s,
     can_import_projects: params[:namespace_id].presence ? current_user.can?(:import_projects, @namespace).to_s : 'true',
     import_sources_enabled: import_sources_enabled?.to_s,
-    track_label: local_assigns.fetch(:track_label, 'blank_project') } }
+    track_label: local_assigns.fetch(:track_label, 'blank_project'),
+    can_select_namespace: current_user.can_select_namespace?.to_s,
+    can_create_project: current_user.can_create_project?.to_s,
+    user_project_limit: current_user.projects_limit } }
 - else
   .project-edit-container
     .project-edit-errors
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index b9e46337d22e58..8b4e650bc08551 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -45781,6 +45781,12 @@ msgstr ""
 msgid "ProjectsNew|You can always change your URL later"
 msgstr ""
 
+msgid "ProjectsNew|You cannot create projects in your personal namespace. Contact your GitLab administrator."
+msgstr ""
+
+msgid "ProjectsNew|You've reached your limit of %{limit} projects created. Contact your GitLab administrator."
+msgstr ""
+
 msgid "ProjectsNew|Your project will be created at:"
 msgstr ""
 
diff --git a/spec/frontend/projects/new_v2/components/app_spec.js b/spec/frontend/projects/new_v2/components/app_spec.js
index 99300f8f300218..a5871db1d7d914 100644
--- a/spec/frontend/projects/new_v2/components/app_spec.js
+++ b/spec/frontend/projects/new_v2/components/app_spec.js
@@ -1,3 +1,4 @@
+import { GlAlert } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import App from '~/projects/new_v2/components/app.vue';
 import CommandLine from '~/projects/new_v2/components/command_line.vue';
@@ -12,12 +13,14 @@ describe('New project creation app', () => {
         rootPath: '/',
         projectsUrl: '/dashboard/projects',
         userNamespaceId: '1',
+        userProjectLimit: 1,
         ...props,
       },
     });
   };
 
   const findMultyStepForm = () => wrapper.findComponent(MultiStepFormTemplate);
+  const findAlert = () => wrapper.findComponent(GlAlert);
   const findCommandLine = () => wrapper.findComponent(CommandLine);
 
   it('renders a form', () => {
@@ -27,18 +30,34 @@ describe('New project creation app', () => {
   });
 
   describe('personal namespace project', () => {
-    beforeEach(() => {
+    it('starts with personal namespace when no namespaceId provided', () => {
       createComponent();
-    });
 
-    it('starts with personal namespace when no namespaceId provided', () => {
       expect(wrapper.findByTestId('personal-namespace-button').props('selected')).toBe(true);
       expect(wrapper.findByTestId('group-namespace-button').props('selected')).toBe(false);
     });
 
     it('does not renders a group select', () => {
+      createComponent();
+
       expect(wrapper.findByTestId('group-selector').exists()).toBe(false);
     });
+
+    it('renders error when user reached a limit of projects', () => {
+      createComponent({ canCreateProject: false });
+
+      expect(findAlert().text()).toBe(
+        "You've reached your limit of 1 projects created. Contact your GitLab administrator.",
+      );
+    });
+
+    it('renders error when user can not create personal projects', () => {
+      createComponent({ userProjectLimit: 0, canCreateProject: false });
+
+      expect(findAlert().text()).toBe(
+        'You cannot create projects in your personal namespace. Contact your GitLab administrator.',
+      );
+    });
   });
 
   describe('with command line', () => {
-- 
GitLab


From b5bd16ddab08209f1c3b9221f06423a3c387c620 Mon Sep 17 00:00:00 2001
From: Julia Miocene <jmiocene@gitlab.com>
Date: Mon, 3 Feb 2025 14:27:34 +0100
Subject: [PATCH 2/2] Apply suggestions

---
 .../projects/new_v2/components/app.vue        | 20 ++++----------
 .../javascripts/projects/new_v2/index.js      |  2 --
 .../projects/new_v2/components/app_spec.js    | 26 +++++++++++++------
 3 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/app/assets/javascripts/projects/new_v2/components/app.vue b/app/assets/javascripts/projects/new_v2/components/app.vue
index 8cfe2deb474584..91b3551c237ed5 100644
--- a/app/assets/javascripts/projects/new_v2/components/app.vue
+++ b/app/assets/javascripts/projects/new_v2/components/app.vue
@@ -73,6 +73,7 @@ export default {
   directives: {
     SafeHtml,
   },
+  inject: ['userNamespaceId', 'canCreateProject'],
   props: {
     rootPath: {
       type: String,
@@ -107,22 +108,17 @@ export default {
     canImportProjects: {
       type: Boolean,
       required: false,
-      default: true,
+      default: false,
     },
     importSourcesEnabled: {
       type: Boolean,
       required: false,
-      default: true,
-    },
-    canCreateProject: {
-      type: Boolean,
-      required: false,
-      default: true,
+      default: false,
     },
     canSelectNamespace: {
       type: Boolean,
       required: false,
-      default: true,
+      default: false,
     },
     namespaceFullPath: {
       type: String,
@@ -134,11 +130,6 @@ export default {
       required: false,
       default: null,
     },
-    userNamespaceId: {
-      type: String,
-      required: false,
-      default: null,
-    },
     trackLabel: {
       type: String,
       required: false,
@@ -166,7 +157,7 @@ export default {
       return this.selectedNamespace === this.userNamespaceId;
     },
     canChooseOption() {
-      if (this.selectedNamespace !== this.userNamespaceId) return true;
+      if (!this.isPersonalProject) return true;
       return this.canCreateProject && this.userProjectLimit > 0;
     },
     errorMessage() {
@@ -234,7 +225,6 @@ export default {
         <new-project-destination-select
           :namespace-full-path="namespaceFullPath"
           :namespace-id="namespaceId"
-          :user-namespace-id="userNamespaceId"
           :track-label="trackLabel"
           :root-url="rootUrl"
           :groups-only="true"
diff --git a/app/assets/javascripts/projects/new_v2/index.js b/app/assets/javascripts/projects/new_v2/index.js
index 2c1afd199f900e..1e039e3a44b3f9 100644
--- a/app/assets/javascripts/projects/new_v2/index.js
+++ b/app/assets/javascripts/projects/new_v2/index.js
@@ -43,10 +43,8 @@ export function initNewProjectForm() {
     importSourcesEnabled: parseBoolean(importSourcesEnabled),
     namespaceFullPath,
     namespaceId,
-    userNamespaceId,
     trackLabel,
     canSelectNamespace: parseBoolean(canSelectNamespace),
-    canCreateProject: parseBoolean(canCreateProject),
     userProjectLimit: parseInt(userProjectLimit, 10),
     newProjectGuidelines,
   };
diff --git a/spec/frontend/projects/new_v2/components/app_spec.js b/spec/frontend/projects/new_v2/components/app_spec.js
index a5871db1d7d914..f616fd060320bd 100644
--- a/spec/frontend/projects/new_v2/components/app_spec.js
+++ b/spec/frontend/projects/new_v2/components/app_spec.js
@@ -3,30 +3,38 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import App from '~/projects/new_v2/components/app.vue';
 import CommandLine from '~/projects/new_v2/components/command_line.vue';
 import MultiStepFormTemplate from '~/vue_shared/components/multi_step_form_template.vue';
+import SingleChoiceSelector from '~/vue_shared/components/single_choice_selector.vue';
 
 describe('New project creation app', () => {
   let wrapper;
 
-  const createComponent = (props = {}) => {
+  const createComponent = (props = {}, provide = {}) => {
     wrapper = shallowMountExtended(App, {
       propsData: {
         rootPath: '/',
         projectsUrl: '/dashboard/projects',
-        userNamespaceId: '1',
-        userProjectLimit: 1,
+        userProjectLimit: 10000,
+        canSelectNamespace: true,
         ...props,
       },
+      provide: {
+        userNamespaceId: '1',
+        canCreateProject: true,
+        ...provide,
+      },
     });
   };
 
-  const findMultyStepForm = () => wrapper.findComponent(MultiStepFormTemplate);
+  const findMultiStepForm = () => wrapper.findComponent(MultiStepFormTemplate);
+  const findSingleChoiceSelector = () => wrapper.findComponent(SingleChoiceSelector);
   const findAlert = () => wrapper.findComponent(GlAlert);
   const findCommandLine = () => wrapper.findComponent(CommandLine);
 
   it('renders a form', () => {
     createComponent();
 
-    expect(findMultyStepForm().exists()).toBe(true);
+    expect(findMultiStepForm().exists()).toBe(true);
+    expect(findAlert().exists()).toBe(false);
   });
 
   describe('personal namespace project', () => {
@@ -44,16 +52,18 @@ describe('New project creation app', () => {
     });
 
     it('renders error when user reached a limit of projects', () => {
-      createComponent({ canCreateProject: false });
+      createComponent({}, { canCreateProject: false });
 
+      expect(findSingleChoiceSelector().exists()).toBe(false);
       expect(findAlert().text()).toBe(
-        "You've reached your limit of 1 projects created. Contact your GitLab administrator.",
+        "You've reached your limit of 10000 projects created. Contact your GitLab administrator.",
       );
     });
 
     it('renders error when user can not create personal projects', () => {
-      createComponent({ userProjectLimit: 0, canCreateProject: false });
+      createComponent({ userProjectLimit: 0 }, { canCreateProject: false });
 
+      expect(findSingleChoiceSelector().exists()).toBe(false);
       expect(findAlert().text()).toBe(
         'You cannot create projects in your personal namespace. Contact your GitLab administrator.',
       );
-- 
GitLab