diff --git a/app/assets/javascripts/import/manifest/import_manifest_file_app.vue b/app/assets/javascripts/import/manifest/import_manifest_file_app.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7fe57282f3e91ca872e7124e6fd5e570d00a5a31
--- /dev/null
+++ b/app/assets/javascripts/import/manifest/import_manifest_file_app.vue
@@ -0,0 +1,178 @@
+<script>
+import { GlFormGroup, GlLink, GlSprintf, GlAlert, GlButton } from '@gitlab/ui';
+import { createAlert } from '~/alert';
+import axios from '~/lib/utils/axios_utils';
+import { validateFileFromAllowList } from '~/lib/utils/file_upload';
+import { visitUrl } from '~/lib/utils/url_utility';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import { s__, __ } from '~/locale';
+import HelpIcon from '~/vue_shared/components/help_icon/help_icon.vue';
+import MultiStepFormTemplate from '~/vue_shared/components/multi_step_form_template.vue';
+import GroupSelect from '~/vue_shared/components/entity_select/group_select.vue';
+import UploadDropzone from '~/vue_shared/components/upload_dropzone/upload_dropzone.vue';
+
+export default {
+  components: {
+    GlFormGroup,
+    GlLink,
+    GlSprintf,
+    GlButton,
+    GlAlert,
+    HelpIcon,
+    MultiStepFormTemplate,
+    GroupSelect,
+    UploadDropzone,
+  },
+  props: {
+    backButtonPath: {
+      type: String,
+      required: true,
+    },
+    formPath: {
+      type: String,
+      required: true,
+    },
+    statusImportManifestPath: {
+      type: String,
+      required: true,
+    },
+    namespaceId: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      fileName: null,
+      file: null,
+      groupId: this.namespaceId,
+      uploadError: false,
+    };
+  },
+  computed: {
+    dropzoneDescription() {
+      return (
+        this.fileName ??
+        s__('FileUpload|Drop your file here or %{linkStart}click to upload%{linkEnd}.')
+      );
+    },
+  },
+  methods: {
+    handleGroupSelected(group) {
+      this.groupId = group?.id ?? null;
+    },
+    isValidFileType(file) {
+      return validateFileFromAllowList(file.name, this.$options.dropzoneAllowList);
+    },
+    clearError() {
+      this.uploadError = false;
+    },
+    onChange(file) {
+      this.clearError();
+      this.fileName = file?.name;
+      this.file = file;
+    },
+    onError() {
+      this.uploadError = s__(
+        'ManifestImport|Unable to upload the file. Please upload a valid XML file.',
+      );
+    },
+    async onSubmit() {
+      if (!this.uploadError) {
+        if (this.file) {
+          const formData = new FormData();
+          formData.append('manifest', this.file);
+          formData.append('group_id', this.groupId);
+
+          try {
+            await axios.post(this.formPath, formData);
+            visitUrl(this.statusImportManifestPath);
+          } catch (error) {
+            const message =
+              error?.response?.data?.errors?.join('. ') ||
+              __('Something went wrong on our end. Please try again.');
+            createAlert({
+              message,
+            });
+          }
+        } else {
+          this.uploadError = s__('ManifestImport|Please upload a manifest file.');
+        }
+      }
+    },
+  },
+  dropzoneAllowList: ['.xml'],
+  manifestImportHelpLink: helpPagePath('user/project/import/manifest'),
+};
+</script>
+
+<template>
+  <multi-step-form-template
+    :title="s__('ManifestImport|Manifest file import')"
+    :current-step="3"
+    :steps-total="3"
+  >
+    <template #form>
+      <group-select
+        class="gl-w-full"
+        :label="__('Group')"
+        :initial-selection="namespaceId"
+        :description="__('Choose the top-level group for your repository imports.')"
+        input-name="group"
+        input-id="group"
+        block
+        @input="handleGroupSelected"
+        @clear="handleGroupSelected"
+      />
+      <gl-form-group :label="__('Manifest')">
+        <upload-dropzone
+          class="gl-mb-5"
+          :is-file-valid="isValidFileType"
+          :valid-file-mimetypes="$options.dropzoneAllowList"
+          :should-update-input-on-file-drop="true"
+          :single-file-selection="true"
+          :enable-drag-behavior="false"
+          @change="onChange"
+          @error="onError"
+        >
+          <template #upload-text="{ openFileUpload }">
+            <gl-sprintf :message="dropzoneDescription">
+              <template #link="{ content }">
+                <gl-link @click.stop="openFileUpload">{{ content }}</gl-link>
+              </template>
+            </gl-sprintf>
+          </template>
+        </upload-dropzone>
+        <gl-alert
+          v-if="uploadError"
+          data-testid="upload-error"
+          variant="danger"
+          :dismissible="false"
+          class="gl-mb-5"
+        >
+          {{ uploadError }}
+        </gl-alert>
+        <template #label-description>
+          {{ __('Import multiple repositories by uploading a manifest file.') }}
+          <gl-link :href="$options.manifestImportHelpLink" target="_blank"><help-icon /></gl-link>
+        </template>
+      </gl-form-group>
+    </template>
+    <template #back>
+      <gl-button
+        category="primary"
+        variant="default"
+        :href="backButtonPath"
+        data-testid="back-button"
+      >
+        {{ __('Go back') }}
+      </gl-button>
+    </template>
+    <template #next>
+      <gl-button category="primary" variant="confirm" data-testid="next-button" @click="onSubmit">
+        {{ __('List available repositories') }}
+      </gl-button>
+    </template>
+  </multi-step-form-template>
+</template>
diff --git a/app/assets/javascripts/import/manifest/index.js b/app/assets/javascripts/import/manifest/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..f1669979301ebd76b21f3d7b25492c23134c0329
--- /dev/null
+++ b/app/assets/javascripts/import/manifest/index.js
@@ -0,0 +1,27 @@
+import Vue from 'vue';
+import ImportManifestFileApp from './import_manifest_file_app.vue';
+
+export function initManifestImportProjectForm() {
+  const el = document.getElementById('js-vue-import-manifest-file-app');
+
+  if (!el) {
+    return null;
+  }
+
+  const { backButtonPath, formPath, statusImportManifestPath, namespaceId } = el.dataset;
+
+  const props = {
+    backButtonPath,
+    formPath,
+    statusImportManifestPath,
+    namespaceId: namespaceId ? parseInt(namespaceId, 10) : null,
+  };
+
+  return new Vue({
+    el,
+    name: 'ImportManifestFileRoot',
+    render(h) {
+      return h(ImportManifestFileApp, { props });
+    },
+  });
+}
diff --git a/app/assets/javascripts/pages/import/manifest/new/index.js b/app/assets/javascripts/pages/import/manifest/new/index.js
index 0bb70a7364e99b2f7c98b5d6c3051a25ff1ac229..ccb6429250f44f300486408615a9599bfc879c85 100644
--- a/app/assets/javascripts/pages/import/manifest/new/index.js
+++ b/app/assets/javascripts/pages/import/manifest/new/index.js
@@ -1,3 +1,6 @@
 import { initNewProjectUrlSelect } from '~/projects/new';
+import { initManifestImportProjectForm } from '~/import/manifest';
 
+// initNewProjectUrlSelect can be removed here when the FF :new_project_creation_form gets removed
 initNewProjectUrlSelect();
+initManifestImportProjectForm();
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 3824ab085f47c80d92d09dc9fcaef0731a9e81c7..bfb23cc94de5a248b73c4c9de4f72844b8b0837f 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
@@ -1,6 +1,7 @@
 <script>
 import { GlButton, GlFormGroup, GlIcon } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import { isGid, getIdFromGraphQLId } from '~/graphql_shared/utils';
 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';
@@ -73,10 +74,10 @@ export default {
       required: false,
       default: () => ({}),
     },
-    namespaceId: {
-      type: String,
+    namespace: {
+      type: Object,
       required: false,
-      default: null,
+      default: () => ({}),
     },
   },
   data() {
@@ -85,6 +86,15 @@ export default {
     };
   },
   computed: {
+    namespaceId() {
+      if (this.namespace?.id) {
+        return isGid(this.namespace.id) ? getIdFromGraphQLId(this.namespace.id) : this.namespace.id;
+      }
+      return null;
+    },
+    isPersonalNamespace() {
+      return this.namespace?.isPersonal ?? false;
+    },
     importOptions() {
       return [
         {
@@ -140,8 +150,10 @@ export default {
           stepsTotal: 4,
         },
         {
-          isAvailable: this.importManifestEnabled,
-          path: this.importManifestImportPath,
+          isAvailable: this.importManifestEnabled && !this.isPersonalNamespace,
+          path: this.namespaceId
+            ? `${this.importManifestImportPath}?namespace_id=${this.namespaceId}`
+            : this.importManifestImportPath,
           icon: 'doc-text',
           title: s__('ProjectImport|Manifest file'),
           name: 'manifest',
diff --git a/app/controllers/import/manifest_controller.rb b/app/controllers/import/manifest_controller.rb
index 368c40ee37cbadff559b9c66b1083deb43023ce3..d12267ffe672a0cc1622fbdd53e88d7d4b6a43cc 100644
--- a/app/controllers/import/manifest_controller.rb
+++ b/app/controllers/import/manifest_controller.rb
@@ -23,21 +23,39 @@ def upload
     group = Group.find(params[:group_id])
 
     unless can?(current_user, :import_projects, group)
-      @errors = ["You don't have enough permissions to import projects in the selected group"]
-
-      render(:new) && return
+      @errors = [s_("ManifestImport|You don't have enough permissions to import projects in the selected group")]
     end
 
-    manifest = Gitlab::ManifestImport::Manifest.new(params[:manifest].tempfile)
+    unless @errors
+      manifest = Gitlab::ManifestImport::Manifest.new(params[:manifest].tempfile)
 
-    if manifest.valid?
-      manifest_import_metadata.save(manifest.projects, group.id)
+      if manifest.valid?
+        manifest_import_metadata.save(manifest.projects, group.id)
+
+        respond_to do |format|
+          format.json do
+            render json: { success: true }
+          end
+          # HTML support can be removed here when the FF :new_project_creation_form gets removed
+          format.html do
+            redirect_to status_import_manifest_path
+          end
+        end
+
+        return
+      end
 
-      redirect_to status_import_manifest_path
-    else
       @errors = manifest.errors
+    end
 
-      render :new
+    respond_to do |format|
+      format.json do
+        render json: { errors: @errors }, status: :unprocessable_entity
+      end
+      # HTML support can be removed here when the FF :new_project_creation_form gets removed
+      format.html do
+        render(:new)
+      end
     end
   end
 
@@ -117,6 +135,14 @@ def check_file_size
       format(s_("ManifestImport|Import manifest files cannot exceed %{size} MB"), size: MAX_MANIFEST_SIZE_IN_MB)
     ]
 
-    render(:new)
+    respond_to do |format|
+      format.json do
+        render json: { errors: @errors }, status: :unprocessable_entity
+      end
+      # HTML support can be removed here when the FF :new_project_creation_form gets removed
+      format.html do
+        render(:new)
+      end
+    end
   end
 end
diff --git a/app/views/import/manifest/new.html.haml b/app/views/import/manifest/new.html.haml
index 25f8723626043d567fad7484533b17000e0f6110..c4921bf04a9db4b70e2d289c6db28f8a07c4b5f1 100644
--- a/app/views/import/manifest/new.html.haml
+++ b/app/views/import/manifest/new.html.haml
@@ -3,8 +3,16 @@
 - add_to_breadcrumbs s_('ProjectsNew|Import project'), new_project_path(anchor: 'import_project')
 
 
-%h1.page-title.gl-text-size-h-display
-  = _('Manifest file import')
+- if Feature.enabled?(:new_project_creation_form, current_user)
+  - namespace_id = namespace_id_from(params) || current_user.manageable_groups(include_groups_with_developer_access: true)&.first&.id
+  #js-vue-import-manifest-file-app{ data: {
+    back_button_path: new_project_path(anchor: 'import_project'),
+    form_path: upload_import_manifest_path,
+    status_import_manifest_path: status_import_manifest_path,
+    namespace_id: namespace_id } }
+- else
+  %h1.page-title.gl-text-size-h-display
+    = _('Manifest file import')
 
-= render 'import/shared/errors'
-= render 'form'
+  = render 'import/shared/errors'
+  = render 'form'
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index fd2e18e254c26aa69646b440658139644bca8006..89100dd38641f661f7e5c9faf11d2cbbedf4ca24 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -25665,6 +25665,9 @@ msgstr ""
 msgid "File upload error."
 msgstr ""
 
+msgid "FileUpload|Drop your file here or %{linkStart}click to upload%{linkEnd}."
+msgstr ""
+
 msgid "Filename"
 msgstr ""
 
@@ -35620,6 +35623,18 @@ msgstr ""
 msgid "ManifestImport|Import manifest files cannot exceed %{size} MB"
 msgstr ""
 
+msgid "ManifestImport|Manifest file import"
+msgstr ""
+
+msgid "ManifestImport|Please upload a manifest file."
+msgstr ""
+
+msgid "ManifestImport|Unable to upload the file. Please upload a valid XML file."
+msgstr ""
+
+msgid "ManifestImport|You don't have enough permissions to import projects in the selected group"
+msgstr ""
+
 msgid "Manual"
 msgstr ""
 
diff --git a/spec/controllers/import/manifest_controller_spec.rb b/spec/controllers/import/manifest_controller_spec.rb
index 97417003a6d324f40705d41fc8abb2f70c1f4dd9..8c2d2c61d45b963e503ed3d1f5311e49509372de 100644
--- a/spec/controllers/import/manifest_controller_spec.rb
+++ b/spec/controllers/import/manifest_controller_spec.rb
@@ -16,30 +16,64 @@
 
   describe 'POST upload' do
     context 'with a valid manifest' do
-      it 'saves the manifest and redirects to the status page', :aggregate_failures do
-        post :upload, params: {
-          group_id: group.id,
-          manifest: fixture_file_upload('spec/fixtures/aosp_manifest.xml')
-        }
+      context 'when format is HTML' do
+        it 'saves the manifest and redirects to the status page', :aggregate_failures do
+          post :upload, params: {
+            group_id: group.id,
+            manifest: fixture_file_upload('spec/fixtures/aosp_manifest.xml')
+          }
 
-        metadata = Gitlab::ManifestImport::Metadata.new(user)
+          metadata = Gitlab::ManifestImport::Metadata.new(user)
 
-        expect(metadata.group_id).to eq(group.id)
-        expect(metadata.repositories.size).to eq(660)
-        expect(metadata.repositories.first).to include(name: 'platform/build', path: 'build/make')
+          expect(metadata.group_id).to eq(group.id)
+          expect(metadata.repositories.size).to eq(660)
+          expect(metadata.repositories.first).to include(name: 'platform/build', path: 'build/make')
 
-        expect(response).to redirect_to(status_import_manifest_path)
+          expect(response).to redirect_to(status_import_manifest_path)
+        end
+      end
+
+      context 'when format is JSON' do
+        it 'saves the manifest and responds with 200', :aggregate_failures do
+          post :upload, format: :json, params: {
+            group_id: group.id,
+            manifest: fixture_file_upload('spec/fixtures/aosp_manifest.xml')
+          }
+
+          metadata = Gitlab::ManifestImport::Metadata.new(user)
+
+          expect(metadata.group_id).to eq(group.id)
+          expect(metadata.repositories.size).to eq(660)
+          expect(metadata.repositories.first).to include(name: 'platform/build', path: 'build/make')
+
+          expect(response).to have_gitlab_http_status(:ok)
+          expect(json_response).to eq({ 'success' => true })
+        end
       end
     end
 
     context 'with an invalid manifest' do
-      it 'displays an error' do
-        post :upload, params: {
-          group_id: group.id,
-          manifest: fixture_file_upload('spec/fixtures/invalid_manifest.xml')
-        }
+      context 'when format is HTML' do
+        it 'displays an error' do
+          post :upload, params: {
+            group_id: group.id,
+            manifest: fixture_file_upload('spec/fixtures/invalid_manifest.xml')
+          }
+
+          expect(assigns(:errors)).to be_present
+        end
+      end
 
-        expect(assigns(:errors)).to be_present
+      context 'when format is JSON' do
+        it 'displays an error' do
+          post :upload, format: :json, params: {
+            group_id: group.id,
+            manifest: fixture_file_upload('spec/fixtures/invalid_manifest.xml')
+          }
+
+          expect(response).to have_gitlab_http_status(:unprocessable_entity)
+          expect(Gitlab::Json.parse(response.body)['errors']).to be_present
+        end
       end
     end
 
@@ -48,31 +82,68 @@
         stub_const("#{described_class}::MAX_MANIFEST_SIZE_IN_MB", 0)
       end
 
-      it 'displays an error' do
-        post :upload, params: {
-          group_id: group.id,
-          manifest: fixture_file_upload('spec/fixtures/aosp_manifest.xml')
-        }
+      context 'when format is HTML' do
+        it 'displays an error' do
+          post :upload, params: {
+            group_id: group.id,
+            manifest: fixture_file_upload('spec/fixtures/aosp_manifest.xml')
+          }
+
+          expect(assigns(:errors)).to include(
+            format(
+              s_("ManifestImport|Import manifest files cannot exceed %{size} MB"),
+              size: described_class::MAX_MANIFEST_SIZE_IN_MB
+            )
+          )
+        end
+      end
 
-        expect(assigns(:errors)).to include(
-          format(
-            s_("ManifestImport|Import manifest files cannot exceed %{size} MB"),
-            size: described_class::MAX_MANIFEST_SIZE_IN_MB
+      context 'when format is JSON' do
+        it 'displays an error' do
+          post :upload, format: :json, params: {
+            group_id: group.id,
+            manifest: fixture_file_upload('spec/fixtures/aosp_manifest.xml')
+          }
+
+          expect(Gitlab::Json.parse(response.body)['errors']).to include(
+            format(
+              s_("ManifestImport|Import manifest files cannot exceed %{size} MB"),
+              size: described_class::MAX_MANIFEST_SIZE_IN_MB
+            )
           )
-        )
+        end
       end
     end
 
     context 'when the user cannot import projects in the group' do
-      it 'displays an error' do
-        sign_in(create(:user))
+      context 'when format is HTML' do
+        it 'displays an error' do
+          sign_in(create(:user))
+
+          post :upload, params: {
+            group_id: group.id,
+            manifest: fixture_file_upload('spec/fixtures/aosp_manifest.xml')
+          }
 
-        post :upload, params: {
-          group_id: group.id,
-          manifest: fixture_file_upload('spec/fixtures/aosp_manifest.xml')
-        }
+          expect(assigns(:errors)).to include(
+            s_("ManifestImport|You don't have enough permissions to import projects in the selected group")
+          )
+        end
+      end
 
-        expect(assigns(:errors)).to be_present
+      context 'when format is JSON' do
+        it 'displays an error' do
+          sign_in(create(:user))
+
+          post :upload, format: :json, params: {
+            group_id: group.id,
+            manifest: fixture_file_upload('spec/fixtures/aosp_manifest.xml')
+          }
+
+          expect(Gitlab::Json.parse(response.body)['errors']).to include(
+            s_("ManifestImport|You don't have enough permissions to import projects in the selected group")
+          )
+        end
       end
     end
   end
diff --git a/spec/features/import/manifest_import_spec.rb b/spec/features/import/manifest_import_spec.rb
index aba38eb019618503de7e55ea704bf232efe28ce1..35c25966e878b3b5e7971432556843a3505ce50a 100644
--- a/spec/features/import/manifest_import_spec.rb
+++ b/spec/features/import/manifest_import_spec.rb
@@ -7,6 +7,7 @@
   let(:group) { create(:group) }
 
   before do
+    stub_feature_flags(new_project_creation_form: false)
     stub_application_setting(import_sources: ['manifest'])
 
     sign_in(user)
diff --git a/spec/frontend/import/manifest/import_manifest_file_app_spec.js b/spec/frontend/import/manifest/import_manifest_file_app_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..4ab1a272a84e57c9274ac55ae688b6216ce1c315
--- /dev/null
+++ b/spec/frontend/import/manifest/import_manifest_file_app_spec.js
@@ -0,0 +1,151 @@
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import { visitUrl } from '~/lib/utils/url_utility';
+import { createAlert } from '~/alert';
+import { HTTP_STATUS_OK, HTTP_STATUS_UNPROCESSABLE_ENTITY } from '~/lib/utils/http_status';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import ImportFromManifestFileApp from '~/import/manifest/import_manifest_file_app.vue';
+import MultiStepFormTemplate from '~/vue_shared/components/multi_step_form_template.vue';
+import GroupSelect from '~/vue_shared/components/entity_select/group_select.vue';
+import UploadDropzone from '~/vue_shared/components/upload_dropzone/upload_dropzone.vue';
+import waitForPromises from 'helpers/wait_for_promises';
+
+jest.mock('~/lib/utils/url_utility');
+jest.mock('~/alert');
+
+describe('Import from Manifest file app', () => {
+  let wrapper;
+  let mockAxios;
+
+  const defaultProps = {
+    backButtonPath: 'projects/new#import_project',
+    formPath: 'import/manifest/upload',
+    statusImportManifestPath: 'import/manifest/status',
+    namespaceId: 1,
+  };
+
+  const createComponent = () => {
+    wrapper = shallowMountExtended(ImportFromManifestFileApp, {
+      propsData: {
+        ...defaultProps,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    mockAxios = new MockAdapter(axios);
+    createComponent();
+  });
+
+  afterEach(() => {
+    mockAxios.restore();
+  });
+
+  const findMultiStepForm = () => wrapper.findComponent(MultiStepFormTemplate);
+  const findGroupSelect = () => wrapper.findComponent(GroupSelect);
+  const findUploadDropzone = () => wrapper.findComponent(UploadDropzone);
+  const findBackButton = () => wrapper.findByTestId('back-button');
+  const findNextButton = () => wrapper.findByTestId('next-button');
+  const findUploadError = () => wrapper.findByTestId('upload-error');
+
+  it('renders the multi step form correctly', () => {
+    expect(findMultiStepForm().props()).toMatchObject({
+      currentStep: 3,
+      stepsTotal: 3,
+    });
+  });
+
+  describe('back button', () => {
+    it('renders a back button', () => {
+      expect(findBackButton().attributes('href')).toBe(defaultProps.backButtonPath);
+    });
+  });
+
+  describe('next button', () => {
+    it('renders a next button', () => {
+      expect(findNextButton().text()).toContain('List available repositories');
+    });
+  });
+
+  it('renders the group select', () => {
+    expect(findGroupSelect().exists()).toBe(true);
+  });
+
+  describe('manifest upload', () => {
+    it('renders the upload dropzone', () => {
+      expect(findUploadDropzone().exists()).toBe(true);
+    });
+
+    it('accepts XML files for the dropzone', () => {
+      const uploadDropzone = findUploadDropzone();
+      const isFileValid = uploadDropzone.props('isFileValid');
+      expect(isFileValid({ name: 'upload.xml' })).toBe(true);
+    });
+
+    it.each(['.pdf', '.jpg', '.html'])('rejects %s file extension', (extension) => {
+      const uploadDropzone = findUploadDropzone();
+      const isFileValid = uploadDropzone.props('isFileValid');
+      expect(isFileValid({ name: `upload${extension}` })).toBe(false);
+    });
+
+    describe('submitting the data', () => {
+      const file = new File(['test'], 'file.xml');
+
+      beforeEach(() => {
+        jest.spyOn(axios, 'post');
+
+        findUploadDropzone().vm.$emit('change', file);
+        findGroupSelect().vm.$emit('input', { id: 123 });
+      });
+
+      it('calls the endpoint with the correct data', async () => {
+        findNextButton().vm.$emit('click');
+        await waitForPromises();
+
+        const expectedFormData = new FormData();
+        expectedFormData.append('manifest', file);
+        expectedFormData.append('group_id', 123);
+
+        expect(axios.post).toHaveBeenCalledWith(defaultProps.formPath, expectedFormData);
+      });
+
+      it('displays an error when the manifest file is missing', async () => {
+        findUploadDropzone().vm.$emit('change', null);
+
+        findNextButton().vm.$emit('click');
+        await waitForPromises();
+
+        expect(findUploadError().exists()).toBe(true);
+        expect(findUploadError().text()).toBe('Please upload a manifest file.');
+      });
+
+      describe('when the request succeeds', () => {
+        it('redirects to the status page', async () => {
+          mockAxios.onPost(defaultProps.formPath).reply(HTTP_STATUS_OK, { success: true });
+
+          findNextButton().vm.$emit('click');
+          await waitForPromises();
+
+          expect(visitUrl).toHaveBeenCalledWith(defaultProps.statusImportManifestPath);
+        });
+      });
+
+      describe('when the request fails', () => {
+        it('displays an error message', async () => {
+          const mockMessage = 'file too large';
+
+          mockAxios
+            .onPost(defaultProps.formPath)
+            .reply(HTTP_STATUS_UNPROCESSABLE_ENTITY, { errors: [mockMessage] });
+
+          findNextButton().vm.$emit('click');
+          await waitForPromises();
+
+          expect(createAlert).toHaveBeenCalledWith({
+            message: mockMessage,
+          });
+        });
+      });
+    });
+  });
+});
diff --git a/spec/frontend/projects/new_v2/components/import_project_form_spec.js b/spec/frontend/projects/new_v2/components/import_project_form_spec.js
index b39de1edc8b9b85b0421fc2a5b3dc930a84f7bf3..3970477faf45bbd2a3ae0737c0bb2be0475ec51e 100644
--- a/spec/frontend/projects/new_v2/components/import_project_form_spec.js
+++ b/spec/frontend/projects/new_v2/components/import_project_form_spec.js
@@ -1,6 +1,9 @@
+import { nextTick } from 'vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import ImportProjectForm from '~/projects/new_v2/components/import_project_form.vue';
 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';
 
 describe('Import Project Form', () => {
   let wrapper;
@@ -8,30 +11,44 @@ describe('Import Project Form', () => {
   const defaultProps = {
     option: {
       title: 'Import project',
-      namespaceId: '',
     },
+    namespace: {
+      id: 1,
+      fullPath: 'TestGroup',
+      isPersonal: false,
+    },
+  };
+
+  const defaultProvide = {
+    importGitlabEnabled: true,
+    importGithubEnabled: true,
+    importGitlabImportPath: 'gitlab/import',
+    importGithubImportPath: 'github/import',
   };
 
-  const createComponent = () => {
+  const createComponent = ({ props = {}, injectedProps = {} } = {}) => {
     wrapper = shallowMountExtended(ImportProjectForm, {
       propsData: {
         ...defaultProps,
+        ...props,
       },
       provide: {
-        importGitlabEnabled: true,
+        ...defaultProvide,
+        ...injectedProps,
       },
     });
   };
 
-  beforeEach(() => {
-    createComponent();
-  });
-
   const findMultiStepFormTemplate = () => wrapper.findComponent(MultiStepFormTemplate);
+  const findSingleChoiceSelector = () => wrapper.findComponent(SingleChoiceSelector);
+  const findImportOptionItems = () => wrapper.findAllComponents(SingleChoiceSelectorItem);
+  const findImportOptionItem = (index) => findImportOptionItems().at(index);
   const findNextButton = () => wrapper.findByTestId('import-project-next-button');
   const findBackButton = () => wrapper.findByTestId('import-project-back-button');
 
   it('passes the correct props to MultiStepFormTemplate', () => {
+    createComponent();
+
     expect(findMultiStepFormTemplate().props()).toMatchObject({
       title: defaultProps.option.title,
       currentStep: 2,
@@ -39,12 +56,110 @@ describe('Import Project Form', () => {
     });
   });
 
-  it('renders the option to move to Next Step', () => {
-    expect(findNextButton().text()).toBe('Next step');
+  describe('next step', () => {
+    it('renders the option to move to Next Step', () => {
+      createComponent();
+
+      expect(findNextButton().text()).toBe('Next step');
+    });
+
+    describe('importPath', () => {
+      it(`emits the "next" event when the next button is clicked and no importPath exists`, async () => {
+        createComponent({ injectedProps: { importGithubImportPath: null } });
+
+        findSingleChoiceSelector().vm.$emit('change', 'github');
+
+        await nextTick();
+
+        findNextButton().vm.$emit('click');
+        expect(wrapper.emitted('next')).toHaveLength(1);
+      });
+
+      it('redirects importPath when exists', async () => {
+        createComponent();
+
+        findSingleChoiceSelector().vm.$emit('change', 'github');
+
+        await nextTick();
+
+        expect(findNextButton().attributes('href')).toBe('github/import');
+      });
+
+      it('adds the namespaceId to the importPath for the manifest importer', async () => {
+        createComponent({
+          injectedProps: {
+            importManifestEnabled: true,
+            importManifestImportPath: 'manifest/import',
+          },
+        });
+
+        findSingleChoiceSelector().vm.$emit('change', 'manifest');
+
+        await nextTick();
+
+        expect(findNextButton().attributes('href')).toBe('manifest/import?namespace_id=1');
+      });
+
+      it('properly converts a gid in the importPath', async () => {
+        createComponent({
+          provide: { namespace: { ...defaultProps.namespace, id: 'gid://gitlab/Group/1' } },
+          injectedProps: {
+            importManifestEnabled: true,
+            importManifestImportPath: 'manifest/import',
+          },
+        });
+
+        findSingleChoiceSelector().vm.$emit('change', 'manifest');
+
+        await nextTick();
+
+        expect(findNextButton().attributes('href')).toBe('manifest/import?namespace_id=1');
+      });
+    });
   });
 
   it(`emits the "back" event when the back button is clicked`, () => {
+    createComponent();
+
     findBackButton().vm.$emit('click');
     expect(wrapper.emitted('back')).toHaveLength(1);
   });
+
+  describe('available import options', () => {
+    it('renders a selectable item for all available options', () => {
+      createComponent();
+
+      expect(findImportOptionItems().length).toBe(2);
+      expect(findImportOptionItem(0).attributes('value')).toEqual('gitlab');
+      expect(findImportOptionItem(1).attributes('value')).toEqual('github');
+    });
+
+    describe('manifest importer', () => {
+      it('renders the manifest importer option when enabled', () => {
+        createComponent({
+          injectedProps: {
+            importGitlabEnabled: false,
+            importGithubEnabled: false,
+            importManifestEnabled: true,
+          },
+        });
+
+        expect(findImportOptionItems().length).toBe(1);
+        expect(findImportOptionItem(0).attributes('value')).toEqual('manifest');
+      });
+
+      it('does not render the manifest importer for a personal namespace', () => {
+        createComponent({
+          props: { namespace: { ...defaultProps.namespace, isPersonal: true } },
+          injectedProps: {
+            importGitlabEnabled: false,
+            importGithubEnabled: false,
+            importManifestEnabled: true,
+          },
+        });
+
+        expect(findImportOptionItems().length).toBe(0);
+      });
+    });
+  });
 });