From ae9c853dde8850ce91b829a8aefafc647483fa75 Mon Sep 17 00:00:00 2001
From: Julia Miocene <jmiocene@gitlab.com>
Date: Thu, 23 Jan 2025 14:02:41 +0100
Subject: [PATCH 1/2] Migrate a first step of a project creation form to vue

- Migrate the form to vue
- Add a new_project_creation_form feature flag
---
 .../javascripts/pages/projects/new/index.js   |   2 +
 app/assets/javascripts/projects/new/index.js  |   4 +
 .../projects/new_v2/components/app.vue        | 215 ++++++++++++++++++
 .../components/project_destination_select.vue | 214 +++++++++++++++++
 .../javascripts/projects/new_v2/event_hub.js  |   3 +
 .../javascripts/projects/new_v2/index.js      |  61 +++++
 app/views/projects/new.html.haml              |  80 ++++---
 .../wip/new_project_creation_form.yml         |   9 +
 .../features/groups/group_projects_spec.rb    |   1 +
 .../projects/custom_projects_template_spec.rb |   2 +
 .../new_project_from_template_spec.rb         |   1 +
 ee/spec/features/projects/new_project_spec.rb |   1 +
 locale/gitlab.pot                             |  30 +++
 spec/features/admin/admin_appearance_spec.rb  |   1 +
 .../import_export/import_file_spec.rb         |   1 +
 .../new_project_from_template_spec.rb         |   1 +
 spec/features/projects/new_project_spec.rb    |   4 +
 .../projects/user_creates_project_spec.rb     |   1 +
 spec/features/projects_spec.rb                |   2 +
 .../projects/new_v2/components/app_spec.js    |  41 ++++
 20 files changed, 643 insertions(+), 31 deletions(-)
 create mode 100644 app/assets/javascripts/projects/new_v2/components/app.vue
 create mode 100644 app/assets/javascripts/projects/new_v2/components/project_destination_select.vue
 create mode 100644 app/assets/javascripts/projects/new_v2/event_hub.js
 create mode 100644 app/assets/javascripts/projects/new_v2/index.js
 create mode 100644 config/feature_flags/wip/new_project_creation_form.yml
 create mode 100644 spec/frontend/projects/new_v2/components/app_spec.js

diff --git a/app/assets/javascripts/pages/projects/new/index.js b/app/assets/javascripts/pages/projects/new/index.js
index d022428df984b2..c2cf729fa8c26e 100644
--- a/app/assets/javascripts/pages/projects/new/index.js
+++ b/app/assets/javascripts/pages/projects/new/index.js
@@ -3,8 +3,10 @@ import {
   initNewProjectUrlSelect,
   initDeploymentTargetSelect,
 } from '~/projects/new';
+import { initNewProjectForm } from '~/projects/new_v2';
 import initProjectVisibilitySelector from '~/projects/project_visibility';
 
+initNewProjectForm();
 initProjectVisibilitySelector();
 initNewProjectCreation();
 initNewProjectUrlSelect();
diff --git a/app/assets/javascripts/projects/new/index.js b/app/assets/javascripts/projects/new/index.js
index 4e336c6ec9fa8c..6e9cb7b3336e2f 100644
--- a/app/assets/javascripts/projects/new/index.js
+++ b/app/assets/javascripts/projects/new/index.js
@@ -10,6 +10,10 @@ import DeploymentTargetSelect from './components/deployment_target_select.vue';
 export function initNewProjectCreation() {
   const el = document.querySelector('.js-new-project-creation');
 
+  if (!el) {
+    return null;
+  }
+
   const {
     pushToCreateProjectCommand,
     projectHelpPath,
diff --git a/app/assets/javascripts/projects/new_v2/components/app.vue b/app/assets/javascripts/projects/new_v2/components/app.vue
new file mode 100644
index 00000000000000..de5114309f1a6f
--- /dev/null
+++ b/app/assets/javascripts/projects/new_v2/components/app.vue
@@ -0,0 +1,215 @@
+<script>
+import { GlButton, GlButtonGroup, GlFormGroup, GlIcon } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import MultiStepFormTemplate from '~/vue_shared/components/multi_step_form_template.vue';
+import SingleChoiceSelector from '~/vue_shared/components/single_choice_selector.vue';
+import SingleChoiceSelectorItem from '~/vue_shared/components/single_choice_selector_item.vue';
+
+import NewProjectDestinationSelect from './project_destination_select.vue';
+
+const OPTIONS = {
+  blank: {
+    key: 'blank',
+    value: 'blank_project',
+    selector: '#blank-project-pane',
+    title: s__('ProjectsNew|Create blank project'),
+    description: s__(
+      'ProjectsNew|Create a blank project to store your files, plan your work, and collaborate on code, among other things.',
+    ),
+  },
+  template: {
+    key: 'template',
+    value: 'create_from_template',
+    selector: '#create-from-template-pane',
+    title: s__('ProjectsNew|Create from template'),
+    description: s__(
+      'ProjectsNew|Create a project pre-populated with the necessary files to get you started quickly.',
+    ),
+  },
+  ci: {
+    key: 'ci',
+    value: 'cicd_for_external_repo',
+    selector: '#ci-cd-project-pane',
+    title: s__('ProjectsNew|Run CI/CD for external repository'),
+    description: s__('ProjectsNew|Connect your external repository to GitLab CI/CD.'),
+  },
+  import: {
+    key: 'import',
+    value: 'import_project',
+    selector: '#import-project-pane',
+    title: s__('ProjectsNew|Import project'),
+    description: s__(
+      'ProjectsNew|Migrate your data from an external source like GitHub, Bitbucket, or another instance of GitLab.',
+    ),
+    disabledMessage: s__(
+      'ProjectsNew|Contact an administrator to enable options for importing your project',
+    ),
+  },
+  transfer: {
+    key: 'transfer',
+    value: 'transfer_project',
+    selector: '#transfer-project-pane',
+    title: s__('ProjectsNew|Direct transfer projects with a top-level Group'),
+    description: s__('ProjectsNew|Migrate your data from another GitLab instance.'),
+    disabledMessage: s__('ProjectsNew|Available only for projects within groups'),
+  },
+};
+
+export default {
+  components: {
+    GlButton,
+    GlButtonGroup,
+    GlFormGroup,
+    GlIcon,
+    MultiStepFormTemplate,
+    SingleChoiceSelector,
+    SingleChoiceSelectorItem,
+    NewProjectDestinationSelect,
+  },
+  props: {
+    rootPath: {
+      type: String,
+      required: false,
+      default: '/',
+    },
+    projectsUrl: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    parentGroupUrl: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    parentGroupName: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    hasErrors: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isCiCdAvailable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    canImportProjects: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    importSourcesEnabled: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    namespaceFullPath: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    namespaceId: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    userNamespaceId: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    trackLabel: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      selectedNamespace: this.namespaceId ? this.namespaceId : this.userNamespaceId,
+      rootUrl: this.rootPath,
+    };
+  },
+  computed: {
+    isPersonalProject() {
+      return this.selectedNamespace === this.userNamespaceId;
+    },
+  },
+  methods: {
+    choosePersonalNamespace() {
+      this.selectedNamespace = this.userNamespaceId;
+    },
+    chooseGroupNamespace() {
+      this.selectedNamespace = null;
+    },
+  },
+  OPTIONS,
+};
+</script>
+
+<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-button-group class="gl-w-full">
+          <gl-button
+            category="primary"
+            variant="default"
+            size="medium"
+            :selected="isPersonalProject"
+            class="gl-w-full"
+            data-testid="personal-namespace-button"
+            @click="choosePersonalNamespace"
+          >
+            {{ s__('ProjectsNew|A personal project') }}
+          </gl-button>
+          <gl-button
+            category="primary"
+            variant="default"
+            size="medium"
+            :selected="!isPersonalProject"
+            class="gl-w-full"
+            data-testid="group-namespace-button"
+            @click="chooseGroupNamespace"
+          >
+            {{ 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')">
+        <new-project-destination-select
+          :namespace-full-path="namespaceFullPath"
+          :namespace-id="namespaceId"
+          :user-namespace-id="userNamespaceId"
+          :track-label="trackLabel"
+          :root-url="rootUrl"
+          data-testid="group-selector"
+        />
+      </gl-form-group>
+
+      <single-choice-selector 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
+          v-if="canImportProjects && importSourcesEnabled"
+          v-bind="$options.OPTIONS.ci"
+        />
+        <single-choice-selector-item v-if="isCiCdAvailable" v-bind="$options.OPTIONS.import">
+          {{ $options.OPTIONS.import.title }}
+          <div class="gl-flex gl-gap-2">
+            <gl-icon name="tanuki" />
+            <gl-icon name="github" />
+            <gl-icon name="bitbucket" />
+            <gl-icon name="gitea" />
+          </div>
+        </single-choice-selector-item>
+        <single-choice-selector-item v-bind="$options.OPTIONS.transfer" :disabled="true" />
+      </single-choice-selector>
+    </template>
+  </multi-step-form-template>
+</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
new file mode 100644
index 00000000000000..7c5a0269aef64d
--- /dev/null
+++ b/app/assets/javascripts/projects/new_v2/components/project_destination_select.vue
@@ -0,0 +1,214 @@
+<script>
+import { GlButton, GlTruncate, GlCollapsibleListbox, GlIcon } from '@gitlab/ui';
+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';
+
+export default {
+  components: {
+    GlButton,
+    GlTruncate,
+    GlCollapsibleListbox,
+    GlIcon,
+  },
+  mixins: [Tracking.mixin()],
+  apollo: {
+    currentUser: {
+      query: searchNamespacesWhereUserCanCreateProjectsQuery,
+      variables() {
+        return {
+          search: this.search,
+        };
+      },
+      skip() {
+        const hasNotEnoughSearchCharacters =
+          this.search.length > 0 && this.search.length < MINIMUM_SEARCH_LENGTH;
+        return this.shouldSkipQuery || hasNotEnoughSearchCharacters;
+      },
+      debounce: DEBOUNCE_DELAY,
+    },
+  },
+  props: {
+    namespaceFullPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    namespaceId: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    userNamespaceId: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    trackLabel: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      currentUser: {},
+      groupPathToFilterBy: undefined,
+      search: '',
+      selectedNamespace: this.namespaceId
+        ? {
+            id: this.namespaceId,
+            fullPath: this.namespaceFullPath,
+          }
+        : this.$options.emptyNameSpace,
+      shouldSkipQuery: true,
+      userNamespaceUniqueId: this.userNamespaceId,
+    };
+  },
+  computed: {
+    userGroups() {
+      return this.currentUser.groups?.nodes || [];
+    },
+    userNamespace() {
+      return this.currentUser.namespace || {};
+    },
+    filteredGroups() {
+      return this.groupPathToFilterBy
+        ? this.userGroups.filter((group) => group.fullPath.startsWith(this.groupPathToFilterBy))
+        : this.userGroups;
+    },
+    hasGroupMatches() {
+      return this.filteredGroups.length;
+    },
+    hasNamespaceMatches() {
+      return (
+        this.userNamespace.fullPath?.toLowerCase().includes(this.search.toLowerCase()) &&
+        !this.groupPathToFilterBy
+      );
+    },
+    items() {
+      return this.namespaceItems.concat(this.groupsItems);
+    },
+    groupsItems() {
+      if (this.hasGroupMatches) {
+        return [
+          {
+            text: __('Groups'),
+            options: this.filteredGroups.map((group) => ({
+              value: group.id,
+              text: group.fullPath,
+            })),
+          },
+        ];
+      }
+
+      return [];
+    },
+    allItems() {
+      return this.filteredGroups.concat(this.currentUser.namespace);
+    },
+    namespaceItems() {
+      if (this.hasNamespaceMatches && this.userNamespaceUniqueId)
+        return [
+          {
+            text: __('Personal namespaces'),
+            options: [
+              {
+                value: this.userNamespace.id,
+                text: this.userNamespace.fullPath,
+              },
+            ],
+          },
+        ];
+      return [];
+    },
+    dropdownPlaceholderClass() {
+      return this.selectedNamespace.id ? '' : '!gl-text-subtle';
+    },
+    dropdownText() {
+      if (this.selectedNamespace && this.selectedNamespace?.fullPath) {
+        return this.selectedNamespace.fullPath;
+      }
+      return null;
+    },
+    loading() {
+      return this.$apollo.queries.currentUser.loading;
+    },
+    searchSummary() {
+      return n__(
+        'ProjectsNew|%d group or namespace found',
+        'ProjectsNew|%d groups or namespaces found',
+        this.items.length,
+      );
+    },
+  },
+  methods: {
+    handleDropdownShown() {
+      if (this.shouldSkipQuery) {
+        this.shouldSkipQuery = false;
+      }
+    },
+    handleSelectTemplate(id, fullPath) {
+      this.groupPathToFilterBy = fullPath.split(PATH_SEPARATOR).shift();
+      this.setNamespace({ id, fullPath });
+    },
+    setNamespace({ id, fullPath }) {
+      this.selectedNamespace = id
+        ? {
+            id: getIdFromGraphQLId(id),
+            fullPath,
+          }
+        : this.$options.emptyNameSpace;
+    },
+    trackDropdownShow() {
+      if (this.trackLabel) {
+        this.track('activate_form_input', { label: this.trackLabel, property: 'project_path' });
+      }
+    },
+    onSearch(query) {
+      this.search = query;
+    },
+  },
+  i18n: {
+    emptySearchResult: __('No matches found'),
+  },
+  emptyNameSpace: {
+    id: undefined,
+    fullPath: s__('ProjectsNew|Pick a group or namespace'),
+  },
+};
+</script>
+
+<template>
+  <gl-collapsible-listbox
+    searchable
+    fluid-width
+    :searching="loading"
+    :items="items"
+    :toggle-text="dropdownText"
+    :no-results-text="$options.i18n.emptySearchResult"
+    class="gl-w-full"
+    @show="trackDropdownShow"
+    @shown="handleDropdownShown"
+    @search="onSearch"
+  >
+    <template #toggle>
+      <gl-button :class="dropdownPlaceholderClass">
+        <gl-truncate
+          :text="dropdownText"
+          position="start"
+          class="gl-mr-auto gl-overflow-hidden"
+          with-tooltip
+        />
+        <gl-icon class="gl-button-icon dropdown-chevron !gl-ml-2 !gl-mr-0" name="chevron-down" />
+      </gl-button>
+    </template>
+    <template #search-summary-sr-only>
+      {{ searchSummary }}
+    </template>
+  </gl-collapsible-listbox>
+</template>
diff --git a/app/assets/javascripts/projects/new_v2/event_hub.js b/app/assets/javascripts/projects/new_v2/event_hub.js
new file mode 100644
index 00000000000000..e31806ad199a11
--- /dev/null
+++ b/app/assets/javascripts/projects/new_v2/event_hub.js
@@ -0,0 +1,3 @@
+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
new file mode 100644
index 00000000000000..92db791b3b6dbc
--- /dev/null
+++ b/app/assets/javascripts/projects/new_v2/index.js
@@ -0,0 +1,61 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import NewProjectFormApp from './components/app.vue';
+
+export function initNewProjectForm() {
+  const el = document.getElementById('js-vue-new-project-app');
+
+  if (!el) {
+    return null;
+  }
+
+  const {
+    pushToCreateProjectCommand,
+    projectHelpPath,
+    hasErrors,
+    isCiCdAvailable,
+    parentGroupUrl,
+    parentGroupName,
+    rootPath,
+    projectsUrl,
+    canImportProjects,
+    importSourcesEnabled,
+    namespaceFullPath,
+    namespaceId,
+    userNamespaceId,
+    trackLabel,
+  } = el.dataset;
+
+  const props = {
+    hasErrors: parseBoolean(hasErrors),
+    isCiCdAvailable: parseBoolean(isCiCdAvailable),
+    parentGroupUrl,
+    parentGroupName,
+    rootPath,
+    projectsUrl,
+    canImportProjects: parseBoolean(canImportProjects),
+    importSourcesEnabled: parseBoolean(importSourcesEnabled),
+    namespaceFullPath,
+    namespaceId,
+    userNamespaceId,
+    trackLabel,
+  };
+
+  const provide = {
+    projectHelpPath,
+    pushToCreateProjectCommand,
+  };
+
+  return new Vue({
+    el,
+    apolloProvider: new VueApollo({
+      defaultClient: createDefaultClient(),
+    }),
+    provide,
+    render(h) {
+      return h(NewProjectFormApp, { props });
+    },
+  });
+}
diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml
index 045e547806f8cc..50771c19ced753 100644
--- a/app/views/projects/new.html.haml
+++ b/app/views/projects/new.html.haml
@@ -5,45 +5,63 @@
 - add_page_specific_style 'page_bundles/new_namespace'
 - add_page_specific_style 'page_bundles/projects'
 
-.project-edit-container
-  .project-edit-errors
-    = render 'projects/errors'
-
-  .js-new-project-creation{ data: {
-    is_ci_cd_available: remote_mirror_setting_enabled?.to_s,
+- if Feature.enabled?(:new_project_creation_form, @user)
+  #js-vue-new-project-app{ data: {
+    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) || @current_user_group&.id,
+    user_namespace_id: current_user.namespace_id,
     has_errors: @project.errors.any?.to_s,
     new_project_guidelines: brand_new_project_guidelines,
     push_to_create_project_command: push_to_create_project_command,
-    project_help_path: help_page_path("user/project/index.md"),
     root_path: root_path,
+    projects_url: dashboard_projects_url,
     parent_group_url: @project.parent && group_url(@project.parent),
     parent_group_name: @project.parent&.name,
-    projects_url: dashboard_projects_url,
-    can_import_projects: params[:namespace_id].presence ? current_user.can?(:import_projects, @namespace).to_s : 'true' } }
+    project_help_path: help_page_path("user/project/index.md"),
+    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') } }
+- else
+  .project-edit-container
+    .project-edit-errors
+      = render 'projects/errors'
+
+    .js-new-project-creation{ data: {
+      is_ci_cd_available: remote_mirror_setting_enabled?.to_s,
+      has_errors: @project.errors.any?.to_s,
+      new_project_guidelines: brand_new_project_guidelines,
+      push_to_create_project_command: push_to_create_project_command,
+      project_help_path: help_page_path("user/project/index.md"),
+      root_path: root_path,
+      parent_group_url: @project.parent && group_url(@project.parent),
+      parent_group_name: @project.parent&.name,
+      projects_url: dashboard_projects_url,
+      can_import_projects: params[:namespace_id].presence ? current_user.can?(:import_projects, @namespace).to_s : 'true' } }
 
-  .row{ 'v-cloak': true }
-    #blank-project-pane.tab-pane.active
-      = gitlab_ui_form_for @project, html: { class: 'new_project gl-mt-3' } do |f|
-        = render 'new_project_fields', f: f, project_name_id: "blank-project-name", include_description: false
+    .row{ 'v-cloak': true }
+      #blank-project-pane.tab-pane.active
+        = gitlab_ui_form_for @project, html: { class: 'new_project gl-mt-3' } do |f|
+          = render 'new_project_fields', f: f, project_name_id: "blank-project-name", include_description: false
 
-    #create-from-template-pane.tab-pane
-      = render Pajamas::CardComponent.new(card_options: { class: 'gl-my-5' }) do |c|
-        - c.with_body do
-          %div
-            - link = link_to('', 'https://gitlab.com/gitlab-org/project-templates/contributing', target: '_blank', rel: 'noopener noreferrer')
-            = safe_format(_('Learn how to %{link_start}contribute to the built-in templates%{link_end}'), tag_pair(link, :link_start, :link_end))
-      = gitlab_ui_form_for @project, html: { class: 'new_project' } do |f|
-        .project-template
-          .form-group
+      #create-from-template-pane.tab-pane
+        = render Pajamas::CardComponent.new(card_options: { class: 'gl-my-5' }) do |c|
+          - c.with_body do
             %div
-              = render 'project_templates', f: f, project: @project
+              - link = link_to('', 'https://gitlab.com/gitlab-org/project-templates/contributing', target: '_blank', rel: 'noopener noreferrer')
+              = safe_format(_('Learn how to %{link_start}contribute to the built-in templates%{link_end}'), tag_pair(link, :link_start, :link_end))
+        = gitlab_ui_form_for @project, html: { class: 'new_project' } do |f|
+          .project-template
+            .form-group
+              %div
+                = render 'project_templates', f: f, project: @project
 
-    #import-project-pane.tab-pane.js-toggle-container
-      - if import_sources_enabled?
-        = render 'import_project_pane', destination_namespace_id: @namespace&.id
-      - else
-        .nothing-here-block
-          %h4= s_('ProjectsNew|No import options available')
-          %p= s_('ProjectsNew|Contact an administrator to enable options for importing your project.')
+      #import-project-pane.tab-pane.js-toggle-container
+        - if import_sources_enabled?
+          = render 'import_project_pane', destination_namespace_id: @namespace&.id
+        - else
+          .nothing-here-block
+            %h4= s_('ProjectsNew|No import options available')
+            %p= s_('ProjectsNew|Contact an administrator to enable options for importing your project.')
 
-    = render_if_exists 'projects/new_ci_cd_only_project_pane'
+      = render_if_exists 'projects/new_ci_cd_only_project_pane'
diff --git a/config/feature_flags/wip/new_project_creation_form.yml b/config/feature_flags/wip/new_project_creation_form.yml
new file mode 100644
index 00000000000000..f80d4004093945
--- /dev/null
+++ b/config/feature_flags/wip/new_project_creation_form.yml
@@ -0,0 +1,9 @@
+---
+name: new_project_creation_form
+feature_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/514700
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/178859
+rollout_issue_url:
+milestone: '17.9'
+group: group::import and integrate
+type: wip
+default_enabled: false
diff --git a/ee/spec/features/groups/group_projects_spec.rb b/ee/spec/features/groups/group_projects_spec.rb
index b8b0318f19f68b..ccf1981031c8ce 100644
--- a/ee/spec/features/groups/group_projects_spec.rb
+++ b/ee/spec/features/groups/group_projects_spec.rb
@@ -7,6 +7,7 @@
   let(:group) { create :group }
 
   before do
+    stub_feature_flags(new_project_creation_form: false)
     group.add_owner(user)
 
     sign_in(user)
diff --git a/ee/spec/features/projects/custom_projects_template_spec.rb b/ee/spec/features/projects/custom_projects_template_spec.rb
index 48b1ccb8f812d8..8023c40ad4e0d7 100644
--- a/ee/spec/features/projects/custom_projects_template_spec.rb
+++ b/ee/spec/features/projects/custom_projects_template_spec.rb
@@ -9,6 +9,7 @@
     let_it_be(:projects) { create_list(:project, 3, :public, :metrics_dashboard_enabled, namespace: group) }
 
     before do
+      stub_feature_flags(new_project_creation_form: false)
       stub_ee_application_setting(custom_project_templates_group_id: group.id)
     end
 
@@ -135,6 +136,7 @@
     let!(:template) { create(:project, namespace: template_subgroup) }
 
     before do
+      stub_feature_flags(new_project_creation_form: false)
       stub_licensed_features(custom_project_templates: true)
       group.add_owner(user)
       group.update!(custom_project_templates_group_id: template_subgroup.id)
diff --git a/ee/spec/features/projects/new_project_from_template_spec.rb b/ee/spec/features/projects/new_project_from_template_spec.rb
index 98a7820cb3a812..5d576eeaca3001 100644
--- a/ee/spec/features/projects/new_project_from_template_spec.rb
+++ b/ee/spec/features/projects/new_project_from_template_spec.rb
@@ -6,6 +6,7 @@
   let(:user) { create(:user) }
 
   before do
+    stub_feature_flags(new_project_creation_form: false)
     stub_licensed_features(custom_project_templates: true)
 
     sign_in(user)
diff --git a/ee/spec/features/projects/new_project_spec.rb b/ee/spec/features/projects/new_project_spec.rb
index 35605b353e7cdd..919a5da213fad2 100644
--- a/ee/spec/features/projects/new_project_spec.rb
+++ b/ee/spec/features/projects/new_project_spec.rb
@@ -9,6 +9,7 @@
   let(:premium_plan) { create(:license, plan: License::PREMIUM_PLAN) }
 
   before do
+    stub_feature_flags(new_project_creation_form: false)
     stub_application_setting(import_sources: Gitlab::ImportSources.values)
 
     sign_in(user)
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 9cce41428badb5..c1206526f8cc4c 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -16847,6 +16847,9 @@ msgstr ""
 msgid "Create new label"
 msgstr ""
 
+msgid "Create new project"
+msgstr ""
+
 msgid "Create new..."
 msgstr ""
 
@@ -41385,6 +41388,9 @@ msgstr ""
 msgid "Personal access tokens"
 msgstr ""
 
+msgid "Personal namespaces"
+msgstr ""
+
 msgid "Personal projects"
 msgstr ""
 
@@ -44474,6 +44480,9 @@ msgstr ""
 msgid "ProjectMaintenance|You will receive an email notification when the process is complete. To remove old versions from the repository, run housekeeping."
 msgstr ""
 
+msgid "ProjectNew|What do you want to create?"
+msgstr ""
+
 msgid "ProjectOverview|Create new fork"
 msgstr ""
 
@@ -45481,6 +45490,12 @@ 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 ""
 
@@ -45490,9 +45505,18 @@ msgstr ""
 msgid "ProjectsNew|Analyze your source code for known security vulnerabilities."
 msgstr ""
 
+msgid "ProjectsNew|Available only for projects within groups"
+msgstr ""
+
+msgid "ProjectsNew|Choose a group"
+msgstr ""
+
 msgid "ProjectsNew|Connect your external repository to GitLab CI/CD."
 msgstr ""
 
+msgid "ProjectsNew|Contact an administrator to enable options for importing your project"
+msgstr ""
+
 msgid "ProjectsNew|Contact an administrator to enable options for importing your project."
 msgstr ""
 
@@ -45517,6 +45541,9 @@ msgstr ""
 msgid "ProjectsNew|Description format"
 msgstr ""
 
+msgid "ProjectsNew|Direct transfer projects with a top-level Group"
+msgstr ""
+
 msgid "ProjectsNew|Enable Static Application Security Testing (SAST)"
 msgstr ""
 
@@ -45547,6 +45574,9 @@ msgstr ""
 msgid "ProjectsNew|Migrate your data from an external source like GitHub, Bitbucket, or another instance of GitLab."
 msgstr ""
 
+msgid "ProjectsNew|Migrate your data from another GitLab instance."
+msgstr ""
+
 msgid "ProjectsNew|More templates are available after sign-up."
 msgstr ""
 
diff --git a/spec/features/admin/admin_appearance_spec.rb b/spec/features/admin/admin_appearance_spec.rb
index bff88c0270d7c4..c676124e0ef53f 100644
--- a/spec/features/admin/admin_appearance_spec.rb
+++ b/spec/features/admin/admin_appearance_spec.rb
@@ -11,6 +11,7 @@
   let(:project) { create(:project, group: group) }
 
   before do
+    stub_feature_flags(new_project_creation_form: false)
     stub_feature_flags(edit_user_profile_vue: false)
   end
 
diff --git a/spec/features/projects/import_export/import_file_spec.rb b/spec/features/projects/import_export/import_file_spec.rb
index f4ed0728402a65..7c75b58bfe6b26 100644
--- a/spec/features/projects/import_export/import_file_spec.rb
+++ b/spec/features/projects/import_export/import_file_spec.rb
@@ -10,6 +10,7 @@
   before do
     stub_application_setting(import_sources: ['gitlab_project'])
     stub_uploads_object_storage(FileUploader)
+    stub_feature_flags(new_project_creation_form: false)
     allow_next_instance_of(Gitlab::ImportExport) do |instance|
       allow(instance).to receive(:storage_path).and_return(export_path)
     end
diff --git a/spec/features/projects/new_project_from_template_spec.rb b/spec/features/projects/new_project_from_template_spec.rb
index 8e2016ce17e196..d7df977a949ab1 100644
--- a/spec/features/projects/new_project_from_template_spec.rb
+++ b/spec/features/projects/new_project_from_template_spec.rb
@@ -6,6 +6,7 @@
   let(:user) { create(:user) }
 
   before do
+    stub_feature_flags(new_project_creation_form: false)
     sign_in(user)
 
     visit new_project_path
diff --git a/spec/features/projects/new_project_spec.rb b/spec/features/projects/new_project_spec.rb
index 2bfd9435c8913f..c840a5115fcf9e 100644
--- a/spec/features/projects/new_project_spec.rb
+++ b/spec/features/projects/new_project_spec.rb
@@ -7,6 +7,7 @@
 
   before do
     stub_application_setting(import_sources: Gitlab::ImportSources.values)
+    stub_feature_flags(new_project_creation_form: false)
   end
 
   shared_examples 'shows correct navigation' do
@@ -35,6 +36,7 @@
     let_it_be(:user) { create(:user) }
 
     before do
+      stub_feature_flags(new_project_creation_form: false)
       sign_in(user)
     end
 
@@ -102,6 +104,7 @@
 
     shared_examples '"New project" page' do
       before do
+        stub_feature_flags(new_project_creation_form: false)
         sign_in(user)
       end
 
@@ -557,6 +560,7 @@
   shared_examples 'has instructions to enable OAuth' do
     context 'when OAuth is not configured' do
       before do
+        stub_feature_flags(new_project_creation_form: false)
         sign_in(user)
 
         allow(Gitlab::Auth::OAuth::Provider).to receive(:enabled?).and_call_original
diff --git a/spec/features/projects/user_creates_project_spec.rb b/spec/features/projects/user_creates_project_spec.rb
index b715733ca20710..4f58a5ef48bc8b 100644
--- a/spec/features/projects/user_creates_project_spec.rb
+++ b/spec/features/projects/user_creates_project_spec.rb
@@ -8,6 +8,7 @@
   let(:user) { create(:user) }
 
   before do
+    stub_feature_flags(new_project_creation_form: false)
     sign_in(user)
     create(:personal_key, user: user)
   end
diff --git a/spec/features/projects_spec.rb b/spec/features/projects_spec.rb
index 0da46359fc9e24..a6f3cd33927758 100644
--- a/spec/features/projects_spec.rb
+++ b/spec/features/projects_spec.rb
@@ -10,6 +10,7 @@
     let(:user) { create(:user) }
 
     before do
+      stub_feature_flags(new_project_creation_form: false)
       sign_in user
       visit new_project_path
     end
@@ -81,6 +82,7 @@
     let(:user)    { create(:user) }
 
     before do
+      stub_feature_flags(new_project_creation_form: false)
       sign_in user
       visit new_project_path
     end
diff --git a/spec/frontend/projects/new_v2/components/app_spec.js b/spec/frontend/projects/new_v2/components/app_spec.js
new file mode 100644
index 00000000000000..b53adfdab4608d
--- /dev/null
+++ b/spec/frontend/projects/new_v2/components/app_spec.js
@@ -0,0 +1,41 @@
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import App from '~/projects/new_v2/components/app.vue';
+import MultiStepFormTemplate from '~/vue_shared/components/multi_step_form_template.vue';
+
+describe('New project creation app', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMountExtended(App, {
+      propsData: {
+        rootPath: '/',
+        projectsUrl: '/dashboard/projects',
+        userNamespaceId: '1',
+        ...props,
+      },
+    });
+  };
+
+  const findMultyStepForm = () => wrapper.findComponent(MultiStepFormTemplate);
+
+  it('renders a form', () => {
+    createComponent();
+
+    expect(findMultyStepForm().exists()).toBe(true);
+  });
+
+  describe('personal namespace project', () => {
+    beforeEach(() => {
+      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', () => {
+      expect(wrapper.findByTestId('group-selector').exists()).toBe(false);
+    });
+  });
+});
-- 
GitLab


From aea322b83fd78873b2aa2588366d7bcfcabf4891 Mon Sep 17 00:00:00 2001
From: Julia Miocene <jmiocene@gitlab.com>
Date: Wed, 29 Jan 2025 15:11:33 +0100
Subject: [PATCH 2/2] Fix specs

---
 ee/spec/controllers/projects_controller_spec.rb             | 1 +
 ee/spec/features/admin/admin_audit_logs_spec.rb             | 4 ++++
 ee/spec/features/groups/compliance_framework_report_spec.rb | 1 +
 .../browser_ui/9_data_stores/project/create_project_spec.rb | 5 ++++-
 .../browser_ui/10_govern/project/project_audit_logs_spec.rb | 6 +++++-
 .../3_create/repository/project_templates_spec.rb           | 5 ++++-
 6 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/ee/spec/controllers/projects_controller_spec.rb b/ee/spec/controllers/projects_controller_spec.rb
index bb41078eb5b74e..e8ee04fce9d775 100644
--- a/ee/spec/controllers/projects_controller_spec.rb
+++ b/ee/spec/controllers/projects_controller_spec.rb
@@ -11,6 +11,7 @@
   let_it_be(:public_project) { create(:project, :public, :repository, namespace: group) }
 
   before do
+    stub_feature_flags(new_project_creation_form: false)
     project.add_maintainer(user)
     sign_in(user)
   end
diff --git a/ee/spec/features/admin/admin_audit_logs_spec.rb b/ee/spec/features/admin/admin_audit_logs_spec.rb
index 859af8899376ce..837c715f18a369 100644
--- a/ee/spec/features/admin/admin_audit_logs_spec.rb
+++ b/ee/spec/features/admin/admin_audit_logs_spec.rb
@@ -212,6 +212,10 @@
     end
 
     describe 'impersonated events' do
+      before do
+        stub_feature_flags(new_project_creation_form: false)
+      end
+
       it 'show impersonation details' do
         visit admin_user_path(user)
 
diff --git a/ee/spec/features/groups/compliance_framework_report_spec.rb b/ee/spec/features/groups/compliance_framework_report_spec.rb
index d7a0951d85082e..8943c0baa0d73d 100644
--- a/ee/spec/features/groups/compliance_framework_report_spec.rb
+++ b/ee/spec/features/groups/compliance_framework_report_spec.rb
@@ -34,6 +34,7 @@
   end
 
   before do
+    stub_feature_flags(new_project_creation_form: false)
     sign_in(admin_user)
   end
 
diff --git a/qa/qa/specs/features/browser_ui/9_data_stores/project/create_project_spec.rb b/qa/qa/specs/features/browser_ui/9_data_stores/project/create_project_spec.rb
index 314c844219247e..828b3724b0bbd0 100644
--- a/qa/qa/specs/features/browser_ui/9_data_stores/project/create_project_spec.rb
+++ b/qa/qa/specs/features/browser_ui/9_data_stores/project/create_project_spec.rb
@@ -1,7 +1,9 @@
 # frozen_string_literal: true
 
 module QA
-  RSpec.describe 'Data Stores', :smoke, product_group: :tenant_scale do
+  RSpec.describe 'Data Stores', :smoke, product_group: :tenant_scale, feature_flag: {
+    name: 'new_project_creation_form'
+  } do
     describe 'Project' do
       shared_examples 'successful project creation' do
         it 'creates a new project' do
@@ -13,6 +15,7 @@ module QA
       end
 
       before do
+        Runtime::Feature.disable(:new_project_creation_form)
         Flow::Login.sign_in
         project
       end
diff --git a/qa/qa/specs/features/ee/browser_ui/10_govern/project/project_audit_logs_spec.rb b/qa/qa/specs/features/ee/browser_ui/10_govern/project/project_audit_logs_spec.rb
index a7884ac1b46140..515a3041cf9c21 100644
--- a/qa/qa/specs/features/ee/browser_ui/10_govern/project/project_audit_logs_spec.rb
+++ b/qa/qa/specs/features/ee/browser_ui/10_govern/project/project_audit_logs_spec.rb
@@ -3,7 +3,10 @@
 module QA
   RSpec.describe(
     'Govern',
-    product_group: :compliance
+    product_group: :compliance,
+    feature_flag: {
+      name: 'new_project_creation_form'
+    }
   ) do
     shared_examples 'audit event' do |expected_events|
       it 'logs audit events for UI operations' do
@@ -21,6 +24,7 @@ module QA
       let(:user) { Runtime::User::Store.additional_test_user }
 
       before do
+        Runtime::Feature.disable(:new_project_creation_form)
         sign_in
       end
 
diff --git a/qa/qa/specs/features/ee/browser_ui/3_create/repository/project_templates_spec.rb b/qa/qa/specs/features/ee/browser_ui/3_create/repository/project_templates_spec.rb
index 8f78e2af49edc5..02dc45bdc19d02 100644
--- a/qa/qa/specs/features/ee/browser_ui/3_create/repository/project_templates_spec.rb
+++ b/qa/qa/specs/features/ee/browser_ui/3_create/repository/project_templates_spec.rb
@@ -2,7 +2,9 @@
 
 module QA
   RSpec.describe 'Create' do
-    describe 'Project templates', product_group: :source_code do
+    describe 'Project templates', product_group: :source_code, feature_flag: {
+      name: 'new_project_creation_form'
+    } do
       let!(:group) { create(:group) }
 
       let(:sandbox) { group.sandbox }
@@ -32,6 +34,7 @@ module QA
       end
 
       before do
+        Runtime::Feature.disable(:new_project_creation_form)
         Resource::Repository::ProjectPush.fabricate! do |push|
           push.project = template_project
           push.files = files
-- 
GitLab