From af6db208ad7e1b36e35bdb841733fd31164166c6 Mon Sep 17 00:00:00 2001
From: Julia Miocene <jmiocene@gitlab.com>
Date: Mon, 10 Mar 2025 20:09:44 +0100
Subject: [PATCH 1/4] Migrate blank project to Vue

---
 .../projects/new_v2/components/app.vue        |  77 +++-
 .../new_v2/components/blank_project_form.vue  | 424 +++++++++++++++++-
 .../new_v2/components/import_project_form.vue |  10 +-
 .../components/project_destination_select.vue |  26 +-
 .../javascripts/projects/new_v2/event_hub.js  |   3 -
 .../projects/new_v2/form_constants.js         |  64 +++
 .../javascripts/projects/new_v2/index.js      |  12 +
 .../multiple_choice_selector_item.vue         |   8 +-
 .../single_choice_selector_item.vue           |   8 +-
 app/views/projects/new.html.haml              |   6 +
 locale/gitlab.pot                             |  12 +
 .../components/blank_project_form_spec.js     |  90 +++-
 12 files changed, 657 insertions(+), 83 deletions(-)
 delete mode 100644 app/assets/javascripts/projects/new_v2/event_hub.js
 create mode 100644 app/assets/javascripts/projects/new_v2/form_constants.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..9acad0b16f3934 100644
--- a/app/assets/javascripts/projects/new_v2/components/app.vue
+++ b/app/assets/javascripts/projects/new_v2/components/app.vue
@@ -42,6 +42,9 @@ export default {
     userNamespaceId: {
       default: null,
     },
+    userNamespaceFullPath: {
+      default: null,
+    },
     isCiCdAvailable: {
       default: false,
     },
@@ -61,7 +64,7 @@ export default {
       default: null,
     },
     namespaceId: {
-      default: null,
+      default: '',
     },
     trackLabel: {
       default: null,
@@ -72,23 +75,30 @@ export default {
     newProjectGuidelines: {
       default: null,
     },
+    visibilityLevel: {
+      default: null,
+    },
   },
   data() {
     return {
-      selectedNamespace:
-        this.namespaceId && this.canSelectNamespace ? this.namespaceId : this.userNamespaceId,
-      selectedProjectType: OPTIONS.blank.value,
-      currentStep: 1,
       rootUrl: this.rootPath,
+      namespace: {
+        id: this.namespaceId && this.canSelectNamespace ? this.namespaceId : this.userNamespaceId,
+        visibility: this.visibilityLevel,
+        fullPath:
+          this.namespaceFullPath && this.canSelectNamespace
+            ? this.namespaceFullPath
+            : this.userNamespaceFullPath,
+        type: OPTIONS.blank.value,
+        isPersonal: this.namespaceId === '',
+      },
+      currentStep: 1,
     };
   },
 
   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() {
@@ -116,7 +126,7 @@ export default {
       ];
     },
     selectedProjectOption() {
-      return this.availableProjectTypes.find((type) => type.value === this.selectedProjectType);
+      return this.availableProjectTypes.find((type) => type.value === this.namespace.type);
     },
     step2Component() {
       return this.selectedProjectOption.component;
@@ -132,26 +142,39 @@ export default {
 
   methods: {
     choosePersonalNamespace() {
-      this.selectedNamespace = this.userNamespaceId;
+      this.namespace.id = this.userNamespaceId;
+      this.namespace.visibility = this.visibilityLevel;
+      this.namespace.fullPath = this.userNamespaceFullPath;
+      this.namespace.isPersonal = true;
     },
     chooseGroupNamespace() {
-      this.selectedNamespace = null;
+      this.namespace.id = this.namespaceId || null;
+      this.namespace.visibility = this.namespaceId !== null ? this.visibilityLevel : null;
+      this.namespace.fullPath = this.namespaceFullPath;
+      this.namespace.isPersonal = false;
     },
     selectProjectType(value) {
-      this.selectedProjectType = value;
+      this.namespace.type = value;
     },
     onBack() {
       this.currentStep -= 1;
       setLocationHash();
     },
     onNext() {
+      if (this.namespace.id == null) return;
+
       this.currentStep += 1;
-      setLocationHash(this.selectedProjectType);
+      setLocationHash(this.namespace.type);
+    },
+    onSelectNamespace(newNamespace) {
+      this.namespace.id = newNamespace.id;
+      this.namespace.visibility = newNamespace.visibility;
+      this.namespace.fullPath = newNamespace.fullPath;
     },
     setStepFromLocationHash() {
       const hash = getLocationHash();
       if (this.availableProjectTypes.some((type) => type.value === hash)) {
-        this.selectedProjectType = hash;
+        this.namespace.type = hash;
         this.currentStep = 2;
       } else {
         this.currentStep = 1;
@@ -178,7 +201,7 @@ export default {
               category="primary"
               variant="default"
               size="medium"
-              :selected="isPersonalProject"
+              :selected="namespace.isPersonal"
               class="gl-w-full"
               data-testid="personal-namespace-button"
               @click="choosePersonalNamespace"
@@ -189,7 +212,7 @@ export default {
               category="primary"
               variant="default"
               size="medium"
-              :selected="!isPersonalProject"
+              :selected="!namespace.isPersonal"
               class="gl-w-full"
               data-testid="group-namespace-button"
               @click="chooseGroupNamespace"
@@ -199,20 +222,28 @@ export default {
           </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"
+        >
           <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>
 
         <single-choice-selector
           v-if="canChooseOption"
-          :checked="selectedProjectType"
+          :checked="namespace.type"
           @change="selectProjectType"
         >
           <single-choice-selector-item
@@ -242,7 +273,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 +282,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/blank_project_form.vue b/app/assets/javascripts/projects/new_v2/components/blank_project_form.vue
index 8b67a233b2f96a..7132c2c2ffd487 100644
--- a/app/assets/javascripts/projects/new_v2/components/blank_project_form.vue
+++ b/app/assets/javascripts/projects/new_v2/components/blank_project_form.vue
@@ -1,11 +1,85 @@
 <script>
-import { GlButton } from '@gitlab/ui';
+import {
+  GlFormGroup,
+  GlFormSelect,
+  GlButton,
+  GlFormInput,
+  GlLink,
+  GlSprintf,
+  GlExperimentBadge,
+  GlIcon,
+} from '@gitlab/ui';
+import { kebabCase } from 'lodash';
+import csrf from '~/lib/utils/csrf';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import validation from '~/vue_shared/directives/validation';
 import MultiStepFormTemplate from '~/vue_shared/components/multi_step_form_template.vue';
+import MultipleChoiceSelector from '~/vue_shared/components/multiple_choice_selector.vue';
+import MultipleChoiceSelectorItem from '~/vue_shared/components/multiple_choice_selector_item.vue';
+import SingleChoiceSelector from '~/vue_shared/components/single_choice_selector.vue';
+import SingleChoiceSelectorItem from '~/vue_shared/components/single_choice_selector_item.vue';
+import {
+  PROJECT_VISIBILITY_TYPE,
+  VISIBILITY_LEVEL_LABELS,
+  VISIBILITY_LEVEL_PRIVATE_INTEGER,
+  VISIBILITY_TYPE_ICON,
+  VISIBILITY_LEVELS_INTEGER_TO_STRING,
+} from '~/visibility_level/constants';
+import { DEPLOYMENT_TARGET_SELECTIONS, K8S_OPTION } from '../form_constants';
+import NewProjectDestinationSelect from './project_destination_select.vue';
+
+const feedbackMap = {
+  valueMissing: {
+    isInvalid: (el) => el.validity?.valueMissing,
+  },
+};
+
+const initFormField = ({ value = null, required = true } = {}) => ({
+  value,
+  required,
+  state: null,
+  feedback: null,
+});
 
 export default {
   components: {
+    GlFormGroup,
+    GlFormSelect,
     GlButton,
+    GlFormInput,
+    GlLink,
+    GlSprintf,
+    GlExperimentBadge,
+    GlIcon,
     MultiStepFormTemplate,
+    MultipleChoiceSelector,
+    MultipleChoiceSelectorItem,
+    SingleChoiceSelector,
+    SingleChoiceSelectorItem,
+    NewProjectDestinationSelect,
+  },
+  directives: {
+    validation: validation(feedbackMap),
+  },
+  inject: {
+    deplymentTarget: {
+      default: null,
+    },
+    displaySha256Repository: {
+      default: null,
+    },
+    allVisibilityLevels: {
+      default: null,
+    },
+    formPath: {
+      default: null,
+    },
+    restrictedVisibilityLevels: {
+      default: null,
+    },
+    userNamespaceFullPath: {
+      default: null,
+    },
   },
   props: {
     option: {
@@ -13,32 +87,334 @@ export default {
       required: false,
       default: () => ({}),
     },
+    namespace: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    const form = {
+      state: false,
+      showValidation: false,
+      fields: {
+        'project[name]': initFormField(),
+        'project[path]': initFormField(),
+      },
+    };
+    return {
+      form,
+      selectedNamespace: this.namespace,
+      selectedTarget: null,
+      configurationReadme: true,
+      configurationSast: false,
+      configurationSha256: false,
+    };
   },
+  computed: {
+    isK8sOptionSelected() {
+      return this.selectedTarget === K8S_OPTION.value;
+    },
+    visibilityLevelsOptions() {
+      const visibilityList = this.allVisibilityLevels
+        .substring(1, this.allVisibilityLevels.length - 1)
+        .split(', ');
+      const restrictedLevels = this.restrictedVisibilityLevels
+        .substring(1, this.restrictedVisibilityLevels.length - 1)
+        .split(', ');
+
+      return visibilityList.map((item) => {
+        const levelNumber = Number(item);
+        const LevelName = VISIBILITY_LEVELS_INTEGER_TO_STRING[levelNumber];
+        let ifRestricted = false;
+
+        if (restrictedLevels.find((level) => level === item)) ifRestricted = true;
+        else if (this.namespace.isPersonal) ifRestricted = false;
+        else ifRestricted = levelNumber > this.selectedNamespace.visibility;
+
+        return {
+          title: VISIBILITY_LEVEL_LABELS[LevelName],
+          description: PROJECT_VISIBILITY_TYPE[LevelName],
+          icon: VISIBILITY_TYPE_ICON[LevelName],
+          value: String(levelNumber),
+          level: levelNumber,
+          disabled: ifRestricted,
+          id: `project_visibility_level_${levelNumber}`,
+        };
+      });
+    },
+  },
+  methods: {
+    updateSlug() {
+      this.form.fields['project[path]'].value = kebabCase(this.form.fields['project[name]'].value);
+    },
+    onSelectNamespace(newNamespace) {
+      this.selectedNamespace.visibility =
+        newNamespace.visibility || VISIBILITY_LEVEL_PRIVATE_INTEGER;
+      this.selectedNamespace.isPersonal = newNamespace.fullPath === this.userNamespaceFullPath;
+      this.selectedNamespace.id = newNamespace.id;
+      this.selectedNamespace.fullPath = newNamespace.fullPath;
+    },
+    onSubmit() {
+      if (!this.form.state) {
+        this.form.showValidation = true;
+        return;
+      }
+
+      this.$refs.form.submit();
+    },
+    // MultipleChoiceSelectorItem component uses GlCheckbox
+    // GlCheckbox doesn't allow to pass input names
+    // This is a workaround to use a hidden input field and sync its value with checkboxes
+    checkReadme() {
+      this.configurationReadme = this.$refs.readme.$el.querySelector(
+        'input.custom-control-input',
+      ).checked;
+    },
+    checkSast() {
+      this.configurationSast = this.$refs.sast.$el.querySelector(
+        'input.custom-control-input',
+      ).checked;
+    },
+    checkSha256() {
+      this.configurationSha256 = this.$refs.sha256.$el.querySelector(
+        'input.custom-control-input',
+      ).checked;
+    },
+  },
+  helpPageUrlK8s: helpPagePath('user/clusters/agent/_index'),
+  helpPageUrlSast: helpPagePath('user/application_security/sast/_index.md'),
+  projectConfigurationDefaultOptions: ['readme'],
+  csrf,
+  K8S_OPTION,
+  DEPLOYMENT_TARGET_SELECTIONS,
 };
 </script>
 
 <template>
-  <multi-step-form-template :title="option.title" :current-step="2" :steps-total="2">
-    <template #next>
-      <gl-button
-        category="primary"
-        variant="confirm"
-        :disabled="true"
-        data-testid="create-project-button"
-        @click="$emit('create-project')"
-      >
-        {{ __('Create project') }}
-      </gl-button>
-    </template>
-    <template #back>
-      <gl-button
-        category="primary"
-        data-testid="create-project-back-button"
-        variant="default"
-        @click="$emit('back')"
-      >
-        {{ __('Go back') }}
-      </gl-button>
-    </template>
-  </multi-step-form-template>
+  <form ref="form" method="post" action="/projects" @submit.prevent="onSubmit">
+    <input :value="$options.csrf.token" type="hidden" name="authenticity_token" />
+    <input :value="false" type="hidden" name="project[ci_cd_only]" />
+
+    <multi-step-form-template :title="option.title" :current-step="2" :steps-total="2">
+      <template #form>
+        <gl-form-group
+          :label="s__('ProjectsNew|Project name')"
+          label-for="name"
+          :description="
+            s__(
+              'ProjectsNew|Must start with a lowercase or uppercase letter, digit, emoji, or underscore. Can also contain dots, pluses, dashes, or spaces.',
+            )
+          "
+          :invalid-feedback="form.fields['project[name]'].feedback"
+          data-testid="project-name-group"
+        >
+          <gl-form-input
+            id="name"
+            v-model="form.fields['project[name]'].value"
+            v-validation:[form.showValidation]
+            :validation-message="s__('ProjectsNew|Please enter project name.')"
+            :state="form.fields['project[name]'].state"
+            name="project[name]"
+            required
+            :placeholder="s__('ProjectsNew|My awesome project')"
+            data-testid="project-name-input"
+            @keyup="updateSlug"
+          />
+        </gl-form-group>
+
+        <div class="gl-flex gl-flex-col gl-gap-4 sm:gl-flex-row">
+          <gl-form-group
+            :label="s__('ProjectsNew|Choose a group')"
+            class="sm:gl-w-1/2"
+            label-for="namespace"
+            :invalid-feedback="
+              s__('ProjectsNew|Pick a group or namespace where you want to create this project.')
+            "
+            :state="selectedNamespace.id !== null"
+            data-testid="project-namespace-group"
+          >
+            <new-project-destination-select
+              toggle-aria-labelled-by="namespace"
+              :namespace-id="selectedNamespace.id"
+              :namespace-full-path="selectedNamespace.fullPath"
+              @onSelectNamespace="onSelectNamespace"
+            />
+          </gl-form-group>
+
+          <div class="gl-mt-2 gl-hidden gl-pt-6 sm:gl-block">{{ __('/') }}</div>
+
+          <gl-form-group
+            :label="s__('ProjectsNew|Project slug')"
+            label-for="project[path]"
+            class="sm:gl-w-1/2"
+            :invalid-feedback="form.fields['project[path]'].feedback"
+            data-testid="project-slug-group"
+          >
+            <gl-form-input
+              id="project[path]"
+              v-model="form.fields['project[path]'].value"
+              v-validation:[form.showValidation]
+              :validation-message="s__('ProjectsNew|Please enter project slug.')"
+              :state="form.fields['project[path]'].state"
+              name="project[path]"
+              required
+              :placeholder="s__('ProjectsNew|my-awesome-project')"
+              data-testid="project-slug-input"
+            />
+          </gl-form-group>
+        </div>
+
+        <gl-form-group
+          :label="s__('Deployment Target|Project deployment target (optional)')"
+          label-for="deployment-target-select"
+        >
+          <gl-form-select
+            id="deployment-target-select"
+            v-model="selectedTarget"
+            :options="$options.DEPLOYMENT_TARGET_SELECTIONS"
+            class="gl-w-full"
+          >
+            <template #first>
+              <option :value="null" disabled>
+                {{ s__('Deployment Target|Select the deployment target') }}
+              </option>
+            </template>
+          </gl-form-select>
+
+          <template v-if="isK8sOptionSelected" #description>
+            <gl-sprintf
+              :message="
+                s__(
+                  'Deployment Target|%{linkStart}How to provision or deploy to Kubernetes clusters from GitLab?%{linkEnd}',
+                )
+              "
+            >
+              <template #link="{ content }">
+                <gl-link
+                  :href="$options.helpPageUrlK8s"
+                  data-track-action="visit_docs"
+                  data-track-label="new_project_deployment_target"
+                  >{{ content }}</gl-link
+                >
+              </template>
+            </gl-sprintf>
+          </template>
+        </gl-form-group>
+
+        <gl-form-group :label="s__('ProjectsNew|Visibility Level')">
+          <single-choice-selector
+            :checked="String(selectedNamespace.visibility)"
+            name="project[visibility_level]"
+          >
+            <single-choice-selector-item
+              v-for="{ title, description, icon, value, disabled, id } in visibilityLevelsOptions"
+              :id="id"
+              :key="value"
+              :value="value"
+              :description="description"
+              :disabled="disabled"
+            >
+              <gl-icon :name="icon" />
+              {{ title }}
+            </single-choice-selector-item>
+          </single-choice-selector>
+        </gl-form-group>
+
+        <gl-form-group :label="s__('ProjectsNew|Project Configuration')">
+          <multiple-choice-selector :selected="$options.projectConfigurationDefaultOptions">
+            <multiple-choice-selector-item
+              ref="readme"
+              value="readme"
+              :title="s__('ProjectsNew|Initialize repository with a README')"
+              @click.native="checkReadme"
+            >
+              <template #description>
+                {{
+                  s__(
+                    'ProjectsNew|Allows you to immediately clone this project’s repository. Skip this if you plan to push up an existing repository.',
+                  )
+                }}
+                <input
+                  type="checkbox"
+                  name="project[initialize_with_readme]"
+                  class="gl-hidden"
+                  :checked="configurationReadme"
+                />
+              </template>
+            </multiple-choice-selector-item>
+            <multiple-choice-selector-item
+              ref="sast"
+              value="sast"
+              :title="s__('ProjectsNew|Enable Static Application Security Testing (SAST)')"
+              @click.native="checkSast"
+            >
+              <template #description>
+                <gl-sprintf
+                  :message="
+                    s__(
+                      'ProjectsNew|Analyze your source code for known security vulnerabilities. %{linkStart}Learn more.%{linkEnd}',
+                    )
+                  "
+                >
+                  <template #link="{ content }">
+                    <gl-link :href="$options.helpPageUrlSast">{{ content }}</gl-link>
+                  </template>
+                </gl-sprintf>
+                <input
+                  type="checkbox"
+                  name="project[initialize_with_sast]"
+                  class="gl-hidden"
+                  :checked="configurationSast"
+                />
+              </template>
+            </multiple-choice-selector-item>
+            <multiple-choice-selector-item
+              v-if="displaySha256Repository"
+              ref="sha256"
+              value="sha256"
+              :description="
+                s__(
+                  'ProjectsNew|Might break existing functionality with other repositories or APIs. It is not possible to change SHA-256 repositories back to the default SHA-1 hashing algorithm.',
+                )
+              "
+              @click.native="checkSha256"
+            >
+              {{ s__('ProjectsNew|Use SHA-256 for repository hashing algorithm') }}
+              <gl-experiment-badge />
+              <input
+                type="checkbox"
+                name="project[use_sha256_repository]"
+                class="gl-hidden"
+                :checked="configurationSha256"
+              />
+            </multiple-choice-selector-item>
+          </multiple-choice-selector>
+        </gl-form-group>
+
+        <!-- here should be two checkboxes from JiHu, see details in https://jihulab.com/gitlab-cn/gitlab/-/merge_requests/675 -->
+      </template>
+
+      <template #next>
+        <gl-button
+          category="primary"
+          variant="confirm"
+          type="submit"
+          data-testid="create-project-button"
+          @click.prevent="onSubmit"
+        >
+          {{ __('Create project') }}
+        </gl-button>
+      </template>
+      <template #back>
+        <gl-button
+          category="primary"
+          variant="default"
+          data-testid="create-project-back-button"
+          @click="$emit('back')"
+        >
+          {{ __('Go back') }}
+        </gl-button>
+      </template>
+    </multi-step-form-template>
+  </form>
 </template>
diff --git a/app/assets/javascripts/projects/new_v2/components/import_project_form.vue b/app/assets/javascripts/projects/new_v2/components/import_project_form.vue
index 3824ab085f47c8..441cc4a88017f7 100644
--- a/app/assets/javascripts/projects/new_v2/components/import_project_form.vue
+++ b/app/assets/javascripts/projects/new_v2/components/import_project_form.vue
@@ -73,10 +73,10 @@ export default {
       required: false,
       default: () => ({}),
     },
-    namespaceId: {
-      type: String,
+    namespace: {
+      type: Object,
       required: false,
-      default: null,
+      default: () => ({}),
     },
   },
   data() {
@@ -89,8 +89,8 @@ export default {
       return [
         {
           isAvailable: this.importGitlabEnabled,
-          path: this.namespaceId
-            ? `${this.importGitlabImportPath}?namespace_id=${this.namespaceId}`
+          path: this.namespace.id
+            ? `${this.importGitlabImportPath}?namespace_id=${this.namespace.id}`
             : this.importGitlabImportPath,
           icon: 'tanuki',
           title: s__('ProjectImport|GitLab'),
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..8b93ce1812ab73 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,13 @@
 <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 { VISIBILITY_LEVELS_STRING_TO_INTEGER } from '~/visibility_level/constants';
 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 +30,7 @@ export default {
       debounce: DEBOUNCE_DELAY,
     },
   },
-  inject: ['userNamespaceId', 'canCreateProject'],
+  inject: ['userNamespaceId', 'userNamespaceFullPath', 'canCreateProject'],
   props: {
     namespaceFullPath: {
       type: String,
@@ -159,16 +159,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,
+        fullPath: namespace.fullPath,
+        isPersonal: namespace.fullPath === this.userNamespaceFullPath,
+        visibility: VISIBILITY_LEVELS_STRING_TO_INTEGER[namespace.visibility],
+      };
+      this.$emit('onSelectNamespace', namespace);
       this.setNamespace(namespace);
     },
     handleSelectTemplate(id, fullPath) {
@@ -229,7 +227,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/form_constants.js b/app/assets/javascripts/projects/new_v2/form_constants.js
new file mode 100644
index 00000000000000..e0000e26344061
--- /dev/null
+++ b/app/assets/javascripts/projects/new_v2/form_constants.js
@@ -0,0 +1,64 @@
+import { s__ } from '~/locale';
+
+export const K8S_OPTION = {
+  value: 'kubernetes',
+  text: s__('DeploymentTarget|Kubernetes (GKE, EKS, OpenShift, and so on)'),
+};
+
+export const DEPLOYMENT_TARGET_SELECTIONS = [
+  K8S_OPTION,
+  {
+    value: 'managed_container_runtime',
+    text: s__('DeploymentTarget|Managed container runtime (Fargate, Cloud Run, DigitalOcean App)'),
+  },
+  {
+    value: 'self_managed_container_runtime',
+    text: s__(
+      'DeploymentTarget|Self-managed container runtime (Podman, Docker Swarm, Docker Compose)',
+    ),
+  },
+  {
+    value: 'heroku',
+    text: s__('DeploymentTarget|Heroku'),
+  },
+  {
+    value: 'virtual_machine',
+    text: s__('DeploymentTarget|Virtual machine (for example, EC2)'),
+  },
+  {
+    value: 'mobile_app_store',
+    text: s__('DeploymentTarget|Mobile app store'),
+  },
+  {
+    value: 'registry',
+    text: s__('DeploymentTarget|Registry (package or container)'),
+  },
+  {
+    value: 'infrastructure_provider',
+    text: s__('DeploymentTarget|Infrastructure provider (Terraform, Cloudformation, and so on)'),
+  },
+  {
+    value: 'serverless_backend',
+    text: s__('DeploymentTarget|Serverless backend (Lambda, Cloud functions)'),
+  },
+  {
+    value: 'edge_computing',
+    text: s__('DeploymentTarget|Edge Computing (e.g. Cloudflare Workers)'),
+  },
+  {
+    value: 'web_deployment_platform',
+    text: s__('DeploymentTarget|Web Deployment Platform (Netlify, Vercel, Gatsby)'),
+  },
+  {
+    value: 'gitlab_pages',
+    text: s__('DeploymentTarget|GitLab Pages'),
+  },
+  {
+    value: 'other_hosting_service',
+    text: s__('DeploymentTarget|Other hosting service'),
+  },
+  {
+    value: 'no_deployment',
+    text: s__('DeploymentTarget|No deployment planned'),
+  },
+];
diff --git a/app/assets/javascripts/projects/new_v2/index.js b/app/assets/javascripts/projects/new_v2/index.js
index c35ba8d2e3507d..77e55051427cff 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,
@@ -29,6 +30,11 @@ export function initNewProjectForm() {
     canSelectNamespace,
     canCreateProject,
     userProjectLimit,
+    deplymentTarget,
+    displaySha256Repository,
+    visibilityLevel,
+    allVisibilityLevels,
+    restrictedVisibilityLevels,
     importHistoryPath,
     importGitlabEnabled,
     importGitlabImportPath,
@@ -53,6 +59,7 @@ export function initNewProjectForm() {
     namespaceFullPath,
     namespaceId,
     userNamespaceId,
+    userNamespaceFullPath,
     newProjectGuidelines,
     pushToCreateProjectCommand,
     rootPath,
@@ -67,6 +74,11 @@ export function initNewProjectForm() {
     canSelectNamespace: parseBoolean(canSelectNamespace),
     canCreateProject: parseBoolean(canCreateProject),
     userProjectLimit,
+    deplymentTarget: parseBoolean(deplymentTarget),
+    displaySha256Repository: parseBoolean(displaySha256Repository),
+    visibilityLevel: parseInt(visibilityLevel, 10),
+    allVisibilityLevels,
+    restrictedVisibilityLevels,
     importHistoryPath,
     importGitlabEnabled: parseBoolean(importGitlabEnabled),
     importGitlabImportPath,
diff --git a/app/assets/javascripts/vue_shared/components/multiple_choice_selector_item.vue b/app/assets/javascripts/vue_shared/components/multiple_choice_selector_item.vue
index 651b7b6f355d31..aeca0ca0e13210 100644
--- a/app/assets/javascripts/vue_shared/components/multiple_choice_selector_item.vue
+++ b/app/assets/javascripts/vue_shared/components/multiple_choice_selector_item.vue
@@ -53,9 +53,11 @@ export default {
         v-safe-html="disabledMessage"
         class="help-text !gl-text-warning"
       ></p>
-      <p v-if="description" class="help-text">
-        {{ description }}
-      </p>
+      <slot name="description">
+        <p v-if="description" class="help-text">
+          {{ description }}
+        </p>
+      </slot>
     </gl-form-checkbox>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/single_choice_selector_item.vue b/app/assets/javascripts/vue_shared/components/single_choice_selector_item.vue
index 8042c178ab4535..b58a52507f704e 100644
--- a/app/assets/javascripts/vue_shared/components/single_choice_selector_item.vue
+++ b/app/assets/javascripts/vue_shared/components/single_choice_selector_item.vue
@@ -51,9 +51,11 @@ export default {
         v-safe-html="disabledMessage"
         class="help-text !gl-text-warning"
       ></p>
-      <p v-if="description" class="help-text">
-        {{ description }}
-      </p>
+      <slot name="description">
+        <p v-if="description" class="help-text">
+          {{ description }}
+        </p>
+      </slot>
     </gl-form-radio>
   </div>
 </template>
diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml
index 69bf9adef419a2..ea8114f2385b35 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,
@@ -24,6 +25,11 @@
     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,
+    deplyment_target: Gitlab::CurrentSettings.current_application_settings.hide_third_party_offers? || !Gitlab.com?,
+    display_sha256_repository: Feature.enabled?(:support_sha256_repositories, current_user),
+    visibility_level: selected_visibility_level(@project, params.dig(:project, :visibility_level)),
+    all_visibility_levels: all_visibility_levels,
+    restricted_visibility_levels: Gitlab::CurrentSettings.restricted_visibility_levels.to_json,
     import_history_path: import_history_index_path,
     import_gitlab_enabled: gitlab_project_import_enabled?.to_s,
     import_gitlab_import_path: new_import_gitlab_project_path,
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 10040eb049ba22..3db47535a1dd6d 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -47019,6 +47019,9 @@ msgstr ""
 msgid "ProjectsNew|Analyze your source code for known security vulnerabilities."
 msgstr ""
 
+msgid "ProjectsNew|Analyze your source code for known security vulnerabilities. %{linkStart}Learn more.%{linkEnd}"
+msgstr ""
+
 msgid "ProjectsNew|Authenticate through GitHub"
 msgstr ""
 
@@ -47112,6 +47115,9 @@ msgstr ""
 msgid "ProjectsNew|Initialize repository with a README"
 msgstr ""
 
+msgid "ProjectsNew|Might break existing functionality with other repositories or APIs. It is not possible to change SHA-256 repositories back to the default SHA-1 hashing algorithm."
+msgstr ""
+
 msgid "ProjectsNew|Might break existing functionality with other repositories or APIs. It's not possible to change SHA-256 repositories back to the default SHA-1 hashing algorithm."
 msgstr ""
 
@@ -47166,6 +47172,12 @@ msgstr ""
 msgid "ProjectsNew|Please enter a valid username."
 msgstr ""
 
+msgid "ProjectsNew|Please enter project name."
+msgstr ""
+
+msgid "ProjectsNew|Please enter project slug."
+msgstr ""
+
 msgid "ProjectsNew|Please upload a valid GitLab project export file."
 msgstr ""
 
diff --git a/spec/frontend/projects/new_v2/components/blank_project_form_spec.js b/spec/frontend/projects/new_v2/components/blank_project_form_spec.js
index 2e5b09a40a6841..8ab9f02f7cb7bc 100644
--- a/spec/frontend/projects/new_v2/components/blank_project_form_spec.js
+++ b/spec/frontend/projects/new_v2/components/blank_project_form_spec.js
@@ -1,13 +1,24 @@
+import { nextTick } from 'vue';
+import { GlFormInput } from '@gitlab/ui';
 import MultiStepFormTemplate from '~/vue_shared/components/multi_step_form_template.vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import BlankProjectForm from '~/projects/new_v2/components/blank_project_form.vue';
 
+jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' }));
+
 describe('Blank Project Form', () => {
   let wrapper;
 
   const defaultProps = {
     option: {
-      title: 'Import project',
+      title: 'Create blank project',
+    },
+    namespace: {
+      id: '1',
+      visibility: 20,
+      fullPath: 'root',
+      type: 'blank_project',
+      isPersonal: true,
     },
   };
 
@@ -17,6 +28,16 @@ describe('Blank Project Form', () => {
         ...defaultProps,
         ...props,
       },
+      provide: {
+        userNamespaceFullPath: 'root',
+        deplymentTarget: false,
+        displaySha256Repository: true,
+        allVisibilityLevels: '[0, 10, 20]',
+        restrictedVisibilityLevels: '[0]',
+      },
+      stubs: {
+        GlFormInput,
+      },
     });
   };
 
@@ -24,21 +45,74 @@ describe('Blank Project Form', () => {
     createComponent();
   });
 
+  const findForm = () => wrapper.find('form');
   const findMultiStepFormTemplate = () => wrapper.findComponent(MultiStepFormTemplate);
   const findCreateButton = () => wrapper.findByTestId('create-project-button');
   const findBackButton = () => wrapper.findByTestId('create-project-back-button');
+  const findProjectNameInput = () => wrapper.findByTestId('project-name-input');
+  const findProjectSlugInput = () => wrapper.findByTestId('project-slug-input');
+
+  describe('form', () => {
+    it('passes the correct props to MultiStepFormTemplate', () => {
+      expect(findMultiStepFormTemplate().props()).toMatchObject({
+        title: defaultProps.option.title,
+        currentStep: 2,
+        stepsTotal: 2,
+      });
+    });
+
+    it('renders the form element correctly', () => {
+      const form = findForm();
+
+      expect(form.attributes('action')).toBe('/projects');
+      expect(form.find('input[type=hidden][name=authenticity_token]').attributes('value')).toBe(
+        'mock-csrf-token',
+      );
+    });
+
+    it('does not submit the form without required fields', () => {
+      const submitSpy = jest.spyOn(findForm().element, 'submit');
+
+      findForm().trigger('submit');
+      expect(submitSpy).not.toHaveBeenCalled();
+    });
+
+    it('submits the form with valid form data', async () => {
+      const submitSpy = jest.spyOn(findForm().element, 'submit');
+
+      await findProjectNameInput().setValue('Project 1');
+      await findProjectNameInput().trigger('blur');
+      await findProjectSlugInput().setValue('project-1');
+      await findProjectSlugInput().trigger('blur');
+      await nextTick();
+
+      findForm().trigger('submit');
+      expect(submitSpy).toHaveBeenCalledWith();
+    });
+  });
+
+  describe('validation', () => {
+    it('shows an error message when project name is cleared', async () => {
+      findProjectNameInput().setValue('');
+      findProjectNameInput().trigger('blur');
+      await nextTick();
+
+      const formGroup = wrapper.findByTestId('project-name-group');
+      expect(formGroup.vm.$attrs['invalid-feedback']).toBe('Please enter project name.');
+    });
+
+    it('shows an error message when slug is cleared', async () => {
+      findProjectSlugInput().setValue('');
+      findProjectSlugInput().trigger('blur');
+      await nextTick();
 
-  it('passes the correct props to MultiStepFormTemplate', () => {
-    expect(findMultiStepFormTemplate().props()).toMatchObject({
-      title: defaultProps.option.title,
-      currentStep: 2,
-      stepsTotal: 2,
+      const formGroup = wrapper.findByTestId('project-slug-group');
+      expect(formGroup.vm.$attrs['invalid-feedback']).toBe('Please enter project slug.');
     });
   });
 
-  it('renders the option to Create Project as disabled', () => {
+  it('renders the option to Create Project', () => {
     expect(findCreateButton().text()).toBe('Create project');
-    expect(findCreateButton().props('disabled')).toBe(true);
   });
 
   it(`emits the "back" event when the back button is clicked`, () => {
-- 
GitLab


From 33ebeb90e0721670f3b1677a145c52d9eaf749d5 Mon Sep 17 00:00:00 2001
From: Julia Miocene <jmiocene@gitlab.com>
Date: Fri, 14 Mar 2025 12:31:24 +0100
Subject: [PATCH 2/4] Apply changes

---
 .../projects/new_v2/components/app.vue        | 27 ++++++++++---------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/app/assets/javascripts/projects/new_v2/components/app.vue b/app/assets/javascripts/projects/new_v2/components/app.vue
index 9acad0b16f3934..9707d4e8b6cf26 100644
--- a/app/assets/javascripts/projects/new_v2/components/app.vue
+++ b/app/assets/javascripts/projects/new_v2/components/app.vue
@@ -141,17 +141,18 @@ export default {
   },
 
   methods: {
-    choosePersonalNamespace() {
-      this.namespace.id = this.userNamespaceId;
-      this.namespace.visibility = this.visibilityLevel;
-      this.namespace.fullPath = this.userNamespaceFullPath;
-      this.namespace.isPersonal = true;
-    },
-    chooseGroupNamespace() {
-      this.namespace.id = this.namespaceId || null;
-      this.namespace.visibility = this.namespaceId !== null ? this.visibilityLevel : null;
-      this.namespace.fullPath = this.namespaceFullPath;
-      this.namespace.isPersonal = false;
+    isNamespacePersonal(isPersonal) {
+      if (isPersonal) {
+        this.namespace.id = this.userNamespaceId;
+        this.namespace.visibility = this.visibilityLevel;
+        this.namespace.fullPath = this.userNamespaceFullPath;
+        this.namespace.isPersonal = true;
+      } else {
+        this.namespace.id = this.namespaceId || null;
+        this.namespace.visibility = this.namespaceId !== null ? this.visibilityLevel : null;
+        this.namespace.fullPath = this.namespaceFullPath;
+        this.namespace.isPersonal = false;
+      }
     },
     selectProjectType(value) {
       this.namespace.type = value;
@@ -204,7 +205,7 @@ export default {
               :selected="namespace.isPersonal"
               class="gl-w-full"
               data-testid="personal-namespace-button"
-              @click="choosePersonalNamespace"
+              @click="isNamespacePersonal(true)"
             >
               {{ s__('ProjectsNew|A personal project') }}
             </gl-button>
@@ -215,7 +216,7 @@ export default {
               :selected="!namespace.isPersonal"
               class="gl-w-full"
               data-testid="group-namespace-button"
-              @click="chooseGroupNamespace"
+              @click="isNamespacePersonal(false)"
             >
               {{ s__('ProjectsNew|A project within a group') }}
             </gl-button>
-- 
GitLab


From 362df3fbb092a4ae8cbdf2b3a6a0c0a4a414f9e6 Mon Sep 17 00:00:00 2001
From: Julia Miocene <jmiocene@gitlab.com>
Date: Fri, 21 Mar 2025 16:47:01 +0100
Subject: [PATCH 3/4] Fix

---
 .../new_v2/components/blank_project_form.vue  | 32 ++++++-------------
 1 file changed, 9 insertions(+), 23 deletions(-)

diff --git a/app/assets/javascripts/projects/new_v2/components/blank_project_form.vue b/app/assets/javascripts/projects/new_v2/components/blank_project_form.vue
index 7132c2c2ffd487..13ab1067f9a7fc 100644
--- a/app/assets/javascripts/projects/new_v2/components/blank_project_form.vue
+++ b/app/assets/javascripts/projects/new_v2/components/blank_project_form.vue
@@ -12,7 +12,7 @@ import {
 import { kebabCase } from 'lodash';
 import csrf from '~/lib/utils/csrf';
 import { helpPagePath } from '~/helpers/help_page_helper';
-import validation from '~/vue_shared/directives/validation';
+import validation, { initForm } from '~/vue_shared/directives/validation';
 import MultiStepFormTemplate from '~/vue_shared/components/multi_step_form_template.vue';
 import MultipleChoiceSelector from '~/vue_shared/components/multiple_choice_selector.vue';
 import MultipleChoiceSelectorItem from '~/vue_shared/components/multiple_choice_selector_item.vue';
@@ -28,19 +28,6 @@ import {
 import { DEPLOYMENT_TARGET_SELECTIONS, K8S_OPTION } from '../form_constants';
 import NewProjectDestinationSelect from './project_destination_select.vue';
 
-const feedbackMap = {
-  valueMissing: {
-    isInvalid: (el) => el.validity?.valueMissing,
-  },
-};
-
-const initFormField = ({ value = null, required = true } = {}) => ({
-  value,
-  required,
-  state: null,
-  feedback: null,
-});
-
 export default {
   components: {
     GlFormGroup,
@@ -59,7 +46,7 @@ export default {
     NewProjectDestinationSelect,
   },
   directives: {
-    validation: validation(feedbackMap),
+    validation: validation(),
   },
   inject: {
     deplymentTarget: {
@@ -93,14 +80,12 @@ export default {
     },
   },
   data() {
-    const form = {
-      state: false,
-      showValidation: false,
+    const form = initForm({
       fields: {
-        'project[name]': initFormField(),
-        'project[path]': initFormField(),
+        'project[name]': { value: null },
+        'project[path]': { value: null },
       },
-    };
+    });
     return {
       form,
       selectedNamespace: this.namespace,
@@ -155,6 +140,7 @@ export default {
       this.selectedNamespace.fullPath = newNamespace.fullPath;
     },
     onSubmit() {
+      console.log('111')
       if (!this.form.state) {
         this.form.showValidation = true;
         return;
@@ -199,7 +185,7 @@ export default {
       <template #form>
         <gl-form-group
           :label="s__('ProjectsNew|Project name')"
-          label-for="name"
+          label-for="project[name]"
           :description="
             s__(
               'ProjectsNew|Must start with a lowercase or uppercase letter, digit, emoji, or underscore. Can also contain dots, pluses, dashes, or spaces.',
@@ -209,7 +195,7 @@ export default {
           data-testid="project-name-group"
         >
           <gl-form-input
-            id="name"
+            id="project[name]"
             v-model="form.fields['project[name]'].value"
             v-validation:[form.showValidation]
             :validation-message="s__('ProjectsNew|Please enter project name.')"
-- 
GitLab


From 9dc1f2cb3e281e1f59960a00a385b3905ee9f353 Mon Sep 17 00:00:00 2001
From: Julia Miocene <jmiocene@gitlab.com>
Date: Fri, 21 Mar 2025 17:26:43 +0100
Subject: [PATCH 4/4] Apply suggestions

---
 .../projects/new_v2/components/app.vue        | 20 +++----
 .../new_v2/components/blank_project_form.vue  | 60 +++++++------------
 .../javascripts/projects/new_v2/index.js      |  2 +
 .../components/multiple_choice_selector.vue   |  1 +
 app/views/projects/new.html.haml              |  1 +
 locale/gitlab.pot                             |  3 +
 6 files changed, 37 insertions(+), 50 deletions(-)

diff --git a/app/assets/javascripts/projects/new_v2/components/app.vue b/app/assets/javascripts/projects/new_v2/components/app.vue
index 9707d4e8b6cf26..86aaa3d75ac0ff 100644
--- a/app/assets/javascripts/projects/new_v2/components/app.vue
+++ b/app/assets/javascripts/projects/new_v2/components/app.vue
@@ -89,9 +89,9 @@ export default {
           this.namespaceFullPath && this.canSelectNamespace
             ? this.namespaceFullPath
             : this.userNamespaceFullPath,
-        type: OPTIONS.blank.value,
         isPersonal: this.namespaceId === '',
       },
+      selectedProjectType: OPTIONS.blank.value,
       currentStep: 1,
     };
   },
@@ -126,7 +126,7 @@ export default {
       ];
     },
     selectedProjectOption() {
-      return this.availableProjectTypes.find((type) => type.value === this.namespace.type);
+      return this.availableProjectTypes.find((type) => type.value === this.selectedProjectType);
     },
     step2Component() {
       return this.selectedProjectOption.component;
@@ -141,7 +141,7 @@ export default {
   },
 
   methods: {
-    isNamespacePersonal(isPersonal) {
+    onSelectNamespaceType(isPersonal) {
       if (isPersonal) {
         this.namespace.id = this.userNamespaceId;
         this.namespace.visibility = this.visibilityLevel;
@@ -155,17 +155,17 @@ export default {
       }
     },
     selectProjectType(value) {
-      this.namespace.type = value;
+      this.selectedProjectType = value;
     },
     onBack() {
       this.currentStep -= 1;
       setLocationHash();
     },
     onNext() {
-      if (this.namespace.id == null) return;
+      if (this.namespace.id === null) return;
 
       this.currentStep += 1;
-      setLocationHash(this.namespace.type);
+      setLocationHash(this.selectedProjectType);
     },
     onSelectNamespace(newNamespace) {
       this.namespace.id = newNamespace.id;
@@ -175,7 +175,7 @@ export default {
     setStepFromLocationHash() {
       const hash = getLocationHash();
       if (this.availableProjectTypes.some((type) => type.value === hash)) {
-        this.namespace.type = hash;
+        this.selectedProjectType = hash;
         this.currentStep = 2;
       } else {
         this.currentStep = 1;
@@ -205,7 +205,7 @@ export default {
               :selected="namespace.isPersonal"
               class="gl-w-full"
               data-testid="personal-namespace-button"
-              @click="isNamespacePersonal(true)"
+              @click="onSelectNamespaceType(true)"
             >
               {{ s__('ProjectsNew|A personal project') }}
             </gl-button>
@@ -216,7 +216,7 @@ export default {
               :selected="!namespace.isPersonal"
               class="gl-w-full"
               data-testid="group-namespace-button"
-              @click="isNamespacePersonal(false)"
+              @click="onSelectNamespaceType(false)"
             >
               {{ s__('ProjectsNew|A project within a group') }}
             </gl-button>
@@ -244,7 +244,7 @@ export default {
 
         <single-choice-selector
           v-if="canChooseOption"
-          :checked="namespace.type"
+          :checked="selectedProjectType"
           @change="selectProjectType"
         >
           <single-choice-selector-item
diff --git a/app/assets/javascripts/projects/new_v2/components/blank_project_form.vue b/app/assets/javascripts/projects/new_v2/components/blank_project_form.vue
index 13ab1067f9a7fc..eba77e93d1298c 100644
--- a/app/assets/javascripts/projects/new_v2/components/blank_project_form.vue
+++ b/app/assets/javascripts/projects/new_v2/components/blank_project_form.vue
@@ -140,7 +140,6 @@ export default {
       this.selectedNamespace.fullPath = newNamespace.fullPath;
     },
     onSubmit() {
-      console.log('111')
       if (!this.form.state) {
         this.form.showValidation = true;
         return;
@@ -148,27 +147,14 @@ export default {
 
       this.$refs.form.submit();
     },
-    // MultipleChoiceSelectorItem component uses GlCheckbox
-    // GlCheckbox doesn't allow to pass input names
-    // This is a workaround to use a hidden input field and sync its value with checkboxes
-    checkReadme() {
-      this.configurationReadme = this.$refs.readme.$el.querySelector(
-        'input.custom-control-input',
-      ).checked;
-    },
-    checkSast() {
-      this.configurationSast = this.$refs.sast.$el.querySelector(
-        'input.custom-control-input',
-      ).checked;
-    },
-    checkSha256() {
-      this.configurationSha256 = this.$refs.sha256.$el.querySelector(
-        'input.custom-control-input',
-      ).checked;
+    onConfigurationChange(selected) {
+      this.configurationReadme = selected.includes('readme');
+      this.configurationSast = selected.includes('sast');
+      this.configurationSha256 = selected.includes('sha256');
     },
   },
-  helpPageUrlK8s: helpPagePath('user/clusters/agent/_index'),
-  helpPageUrlSast: helpPagePath('user/application_security/sast/_index.md'),
+  helpPageK8s: helpPagePath('user/clusters/agent/_index'),
+  helpPageSast: helpPagePath('user/application_security/sast/_index'),
   projectConfigurationDefaultOptions: ['readme'],
   csrf,
   K8S_OPTION,
@@ -177,7 +163,7 @@ export default {
 </script>
 
 <template>
-  <form ref="form" method="post" action="/projects" @submit.prevent="onSubmit">
+  <form ref="form" method="post" :action="formPath" @submit.prevent="onSubmit">
     <input :value="$options.csrf.token" type="hidden" name="authenticity_token" />
     <input :value="false" type="hidden" name="project[ci_cd_only]" />
 
@@ -210,7 +196,7 @@ export default {
 
         <div class="gl-flex gl-flex-col gl-gap-4 sm:gl-flex-row">
           <gl-form-group
-            :label="s__('ProjectsNew|Choose a group')"
+            :label="s__('ProjectsNew|Choose a group or namespace')"
             class="sm:gl-w-1/2"
             label-for="namespace"
             :invalid-feedback="
@@ -277,7 +263,7 @@ export default {
             >
               <template #link="{ content }">
                 <gl-link
-                  :href="$options.helpPageUrlK8s"
+                  :href="$options.helpPageK8s"
                   data-track-action="visit_docs"
                   data-track-label="new_project_deployment_target"
                   >{{ content }}</gl-link
@@ -307,12 +293,13 @@ export default {
         </gl-form-group>
 
         <gl-form-group :label="s__('ProjectsNew|Project Configuration')">
-          <multiple-choice-selector :selected="$options.projectConfigurationDefaultOptions">
+          <multiple-choice-selector
+            :selected="$options.projectConfigurationDefaultOptions"
+            @change="onConfigurationChange"
+          >
             <multiple-choice-selector-item
-              ref="readme"
               value="readme"
               :title="s__('ProjectsNew|Initialize repository with a README')"
-              @click.native="checkReadme"
             >
               <template #description>
                 {{
@@ -321,18 +308,15 @@ export default {
                   )
                 }}
                 <input
-                  type="checkbox"
+                  type="hidden"
                   name="project[initialize_with_readme]"
-                  class="gl-hidden"
-                  :checked="configurationReadme"
+                  :value="configurationReadme"
                 />
               </template>
             </multiple-choice-selector-item>
             <multiple-choice-selector-item
-              ref="sast"
               value="sast"
               :title="s__('ProjectsNew|Enable Static Application Security Testing (SAST)')"
-              @click.native="checkSast"
             >
               <template #description>
                 <gl-sprintf
@@ -343,35 +327,31 @@ export default {
                   "
                 >
                   <template #link="{ content }">
-                    <gl-link :href="$options.helpPageUrlSast">{{ content }}</gl-link>
+                    <gl-link :href="$options.helpPageSast">{{ content }}</gl-link>
                   </template>
                 </gl-sprintf>
                 <input
-                  type="checkbox"
+                  type="hidden"
                   name="project[initialize_with_sast]"
-                  class="gl-hidden"
-                  :checked="configurationSast"
+                  :value="configurationSast"
                 />
               </template>
             </multiple-choice-selector-item>
             <multiple-choice-selector-item
               v-if="displaySha256Repository"
-              ref="sha256"
               value="sha256"
               :description="
                 s__(
                   'ProjectsNew|Might break existing functionality with other repositories or APIs. It is not possible to change SHA-256 repositories back to the default SHA-1 hashing algorithm.',
                 )
               "
-              @click.native="checkSha256"
             >
               {{ s__('ProjectsNew|Use SHA-256 for repository hashing algorithm') }}
               <gl-experiment-badge />
               <input
-                type="checkbox"
+                type="hidden"
                 name="project[use_sha256_repository]"
-                class="gl-hidden"
-                :checked="configurationSha256"
+                :value="configurationSha256"
               />
             </multiple-choice-selector-item>
           </multiple-choice-selector>
diff --git a/app/assets/javascripts/projects/new_v2/index.js b/app/assets/javascripts/projects/new_v2/index.js
index 77e55051427cff..20f3e1a4ba6633 100644
--- a/app/assets/javascripts/projects/new_v2/index.js
+++ b/app/assets/javascripts/projects/new_v2/index.js
@@ -12,6 +12,7 @@ export function initNewProjectForm() {
   }
 
   const {
+    formPath,
     namespaceFullPath,
     namespaceId,
     userNamespaceId,
@@ -56,6 +57,7 @@ export function initNewProjectForm() {
   } = el.dataset;
 
   const provide = {
+    formPath,
     namespaceFullPath,
     namespaceId,
     userNamespaceId,
diff --git a/app/assets/javascripts/vue_shared/components/multiple_choice_selector.vue b/app/assets/javascripts/vue_shared/components/multiple_choice_selector.vue
index f0090417206345..935742e397fcff 100644
--- a/app/assets/javascripts/vue_shared/components/multiple_choice_selector.vue
+++ b/app/assets/javascripts/vue_shared/components/multiple_choice_selector.vue
@@ -21,6 +21,7 @@ export default {
   <gl-form-checkbox-group
     v-model="selectedOptions"
     class="multiple-choice-selector gl-border gl-block gl-rounded-base"
+    @change="$emit('change', selectedOptions)"
   >
     <slot></slot>
   </gl-form-checkbox-group>
diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml
index ea8114f2385b35..803264cd1de589 100644
--- a/app/views/projects/new.html.haml
+++ b/app/views/projects/new.html.haml
@@ -7,6 +7,7 @@
 
 - if Feature.enabled?(:new_project_creation_form, @user)
   #js-vue-new-project-app{ data: {
+    form_path: "/projects",
     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,
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 3db47535a1dd6d..def1f1f64078f4 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -47037,6 +47037,9 @@ msgstr ""
 msgid "ProjectsNew|Choose a group"
 msgstr ""
 
+msgid "ProjectsNew|Choose a group or namespace"
+msgstr ""
+
 msgid "ProjectsNew|Connect your external repository to GitLab CI/CD."
 msgstr ""
 
-- 
GitLab