Merge branch 'new-project-option-validation' into 'master'

Add personal options validation to the new project creation form

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/179733



Merged-by: Justin Ho Tuan Duong <hduong@gitlab.com>
Approved-by: Sascha Eggenberger <seggenberger@gitlab.com>
Approved-by: Justin Ho Tuan Duong <hduong@gitlab.com>
Reviewed-by: Justin Ho Tuan Duong <hduong@gitlab.com>
Reviewed-by: Sascha Eggenberger <seggenberger@gitlab.com>
Co-authored-by: Julia Miocene <jmiocene@gitlab.com>

app/assets/javascripts/projects/new_v2/components/app.vue

 <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,
@@ -72,6 +73,7 @@ export default {
   directives: {
     SafeHtml,
   },
+  inject: ['userNamespaceId', 'canCreateProject'],
   props: {
     rootPath: {
       type: String,
@@ -106,24 +108,24 @@ export default {
     canImportProjects: {
       type: Boolean,
       required: false,
-      default: true,
+      default: false,
     },
     importSourcesEnabled: {
       type: Boolean,
       required: false,
-      default: true,
+      default: false,
     },
-    namespaceFullPath: {
-      type: String,
+    canSelectNamespace: {
+      type: Boolean,
       required: false,
-      default: null,
+      default: false,
     },
-    namespaceId: {
+    namespaceFullPath: {
       type: String,
       required: false,
       default: null,
     },
-    userNamespaceId: {
+    namespaceId: {
       type: String,
       required: false,
       default: null,
@@ -133,6 +135,10 @@ export default {
       required: false,
       default: null,
     },
+    userProjectLimit: {
+      type: Number,
+      required: true,
+    },
     newProjectGuidelines: {
       type: String,
       required: false,
@@ -141,7 +147,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 +156,25 @@ export default {
     isPersonalProject() {
       return this.selectedNamespace === this.userNamespaceId;
     },
+    canChooseOption() {
+      if (!this.isPersonalProject) 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 +191,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"
@@ -196,14 +225,14 @@ 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"
           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 +250,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>

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) {

app/assets/javascripts/projects/new_v2/index.js

@@ -26,6 +26,9 @@ export function initNewProjectForm() {
     namespaceId,
     userNamespaceId,
     trackLabel,
+    canSelectNamespace,
+    canCreateProject,
+    userProjectLimit,
     newProjectGuidelines,
   } = el.dataset;
 
@@ -40,12 +43,15 @@ export function initNewProjectForm() {
     importSourcesEnabled: parseBoolean(importSourcesEnabled),
     namespaceFullPath,
     namespaceId,
-    userNamespaceId,
     trackLabel,
+    canSelectNamespace: parseBoolean(canSelectNamespace),
+    userProjectLimit: parseInt(userProjectLimit, 10),
     newProjectGuidelines,
   };
 
   const provide = {
+    userNamespaceId,
+    canCreateProject: parseBoolean(canCreateProject),
     projectHelpPath,
     pushToCreateProjectCommand,
   };

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

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 ""

spec/frontend/projects/new_v2/components/app_spec.js

+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';
 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: 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', () => {
-    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(findSingleChoiceSelector().exists()).toBe(false);
+      expect(findAlert().text()).toBe(
+        "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 });
+
+      expect(findSingleChoiceSelector().exists()).toBe(false);
+      expect(findAlert().text()).toBe(
+        'You cannot create projects in your personal namespace. Contact your GitLab administrator.',
+      );
+    });
   });
 
   describe('with command line', () => {