From 3aba412022d3ee3f15def9bf804c4fb43a119681 Mon Sep 17 00:00:00 2001
From: Julia Miocene <jmiocene@gitlab.com>
Date: Fri, 14 Feb 2025 01:01:20 +0100
Subject: [PATCH 1/5] Add second step to an import project form

---
 .../projects/new_v2/components/app.vue        |  55 ++---
 .../new_v2/components/import_by_url_form.vue  |  39 +++
 .../new_v2/components/import_project_form.vue | 225 ++++++++++++++++--
 .../javascripts/projects/new_v2/index.js      |  89 ++++---
 .../multiple_choice_selector_item.vue         |  12 +-
 .../single_choice_selector_item.vue           |  12 +-
 .../components/multiple_choice_selector.scss  |   4 +
 app/views/projects/new.html.haml              |  25 +-
 locale/gitlab.pot                             |  30 +++
 .../projects/new_v2/components/app_spec.js    |  22 +-
 .../components/import_by_url_form_spec.js     |  26 ++
 11 files changed, 425 insertions(+), 114 deletions(-)
 create mode 100644 app/assets/javascripts/projects/new_v2/components/import_by_url_form.vue
 create mode 100644 spec/frontend/projects/new_v2/components/import_by_url_form_spec.js

diff --git a/app/assets/javascripts/projects/new_v2/components/app.vue b/app/assets/javascripts/projects/new_v2/components/app.vue
index 8176c11c4e9b4d..a6571737929ff5 100644
--- a/app/assets/javascripts/projects/new_v2/components/app.vue
+++ b/app/assets/javascripts/projects/new_v2/components/app.vue
@@ -11,6 +11,7 @@ import { OPTIONS } from '../constants';
 import NewProjectDestinationSelect from './project_destination_select.vue';
 import Breadcrumb from './form_breadcrumb.vue';
 import CommandLine from './command_line.vue';
+import ImportByUrlForm from './import_by_url_form.vue';
 
 export default {
   OPTIONS,
@@ -26,79 +27,49 @@ export default {
     NewProjectDestinationSelect,
     Breadcrumb,
     CommandLine,
+    ImportByUrlForm,
   },
   directives: {
     SafeHtml,
   },
-  inject: ['userNamespaceId', 'canCreateProject'],
-  props: {
+  inject: {
     rootPath: {
-      type: String,
-      required: false,
       default: '/',
     },
     projectsUrl: {
-      type: String,
-      required: false,
       default: null,
     },
-    parentGroupUrl: {
-      type: String,
-      required: false,
+    userNamespaceId: {
       default: null,
     },
-    parentGroupName: {
-      type: String,
-      required: false,
+    isCiCdAvailable: {
       default: null,
     },
-    hasErrors: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    isCiCdAvailable: {
-      type: Boolean,
-      required: false,
-      default: false,
+    canCreateProject: {
+      default: null,
     },
     canImportProjects: {
-      type: Boolean,
-      required: false,
-      default: false,
+      default: null,
     },
     importSourcesEnabled: {
-      type: Boolean,
-      required: false,
-      default: false,
+      default: null,
     },
     canSelectNamespace: {
-      type: Boolean,
-      required: false,
-      default: false,
+      default: null,
     },
     namespaceFullPath: {
-      type: String,
-      required: false,
       default: null,
     },
     namespaceId: {
-      type: String,
-      required: false,
       default: null,
     },
     trackLabel: {
-      type: String,
-      required: false,
       default: null,
     },
     userProjectLimit: {
-      type: Number,
-      required: true,
+      default: 0,
     },
     newProjectGuidelines: {
-      type: String,
-      required: false,
       default: null,
     },
   },
@@ -280,8 +251,12 @@ export default {
       v-if="currentStep === 2"
       :key="selectedProjectOption.key"
       :option="selectedProjectOption"
+      :namespace-id="selectedNamespace"
       data-testid="new-project-step2"
       @back="onBack"
+      @next="onNext"
     />
+
+    <import-by-url-form v-if="currentStep === 3" @back="onBack" />
   </div>
 </template>
diff --git a/app/assets/javascripts/projects/new_v2/components/import_by_url_form.vue b/app/assets/javascripts/projects/new_v2/components/import_by_url_form.vue
new file mode 100644
index 00000000000000..b0cd6b9e9018b7
--- /dev/null
+++ b/app/assets/javascripts/projects/new_v2/components/import_by_url_form.vue
@@ -0,0 +1,39 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+import MultiStepFormTemplate from '~/vue_shared/components/multi_step_form_template.vue';
+
+export default {
+  components: {
+    GlButton,
+    MultiStepFormTemplate,
+  },
+};
+</script>
+
+<template>
+  <multi-step-form-template
+    :title="s__('ProjectImport|Import repository by URL')"
+    :current-step="3"
+  >
+    <template #next>
+      <gl-button
+        category="primary"
+        variant="confirm"
+        :disabled="true"
+        data-testid="import-project-by-url-next-button"
+      >
+        {{ __('Next step') }}
+      </gl-button>
+    </template>
+    <template #back>
+      <gl-button
+        category="primary"
+        variant="default"
+        data-testid="import-project-by-url-back-button"
+        @click="$emit('back')"
+      >
+        {{ __('Go back') }}
+      </gl-button>
+    </template>
+  </multi-step-form-template>
+</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 340e91a10718b1..6c6788174c61c0 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,43 +1,220 @@
 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlButton, 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';
 
 export default {
   components: {
     GlButton,
+    GlFormGroup,
+    GlIcon,
     MultiStepFormTemplate,
+    SingleChoiceSelector,
+    SingleChoiceSelectorItem,
+  },
+  inject: {
+    importGitlabEnabled: {
+      default: false,
+    },
+    importGitlabImportPath: {
+      default: null,
+    },
+    importGithubEnabled: {
+      default: false,
+    },
+    importGithubImportPath: {
+      default: null,
+    },
+    importBitbucketEnabled: {
+      default: false,
+    },
+    importBitbucketImportPath: {
+      default: null,
+    },
+    importBitbucketImportConfigured: {
+      default: false,
+    },
+    importBitbucketDisabledMessage: {
+      default: null,
+    },
+    importBitbucketServerEnabled: {
+      default: false,
+    },
+    importBitbucketServerImportPath: {
+      default: null,
+    },
+    importFogbugzEnabled: {
+      default: false,
+    },
+    importFogbugzImportPath: {
+      default: null,
+    },
+    importGiteaEnabled: {
+      default: false,
+    },
+    importGiteaImportPath: {
+      default: null,
+    },
+    importGitEnabled: {
+      default: false,
+    },
+    importManifestEnabled: {
+      default: false,
+    },
+    importManifestImportPath: {
+      default: null,
+    },
   },
   props: {
     option: {
       type: Object,
       required: false,
-      default: () => ({}),
+      default: () => {},
+    },
+    namespaceId: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      selectedImportPath: null,
+      selectedImportName: null,
+      currentStep: 2,
+    };
+  },
+  computed: {
+    availableImports() {
+      return [
+        {
+          isAvailable: this.importGitlabEnabled,
+          path: `${this.importGitlabImportPath}?namespace_id=${this.namespaceId}`,
+          icon: 'tanuki',
+          title: s__('ProjectImport|GitLab'),
+          name: 'gitlab',
+        },
+        {
+          isAvailable: this.importGithubEnabled,
+          path: this.importGithubImportPath,
+          icon: 'github',
+          title: s__('ProjectImport|GitHub'),
+          name: 'github',
+        },
+        {
+          isAvailable: this.importBitbucketEnabled,
+          path: this.importBitbucketImportPath,
+          icon: 'bitbucket',
+          title: s__('ProjectImport|Bitbucket Cloud'),
+          name: 'bitbucket-cloud',
+          disabled: !this.importBitbucketImportConfigured,
+          disabledMessage: this.importBitbucketDisabledMessage,
+        },
+        {
+          isAvailable: this.importBitbucketServerEnabled,
+          path: this.importBitbucketServerImportPath,
+          icon: 'bitbucket',
+          title: s__('ProjectImport|Bitbucket Server'),
+          name: 'bitbucket-server',
+        },
+        {
+          isAvaialble: this.importFogbugzEnabled,
+          path: this.importFogbugzImportPath,
+          icon: 'bug',
+          title: s__('ProjectImport|FogBugz'),
+          name: 'fogbugz',
+        },
+        {
+          isAvailable: this.importGiteaEnabled,
+          path: this.importGiteaImportPath,
+          icon: 'gitea',
+          title: s__('ProjectImport|Gitea'),
+          name: 'gitea',
+        },
+        {
+          isAvailable: this.importManifestEnabled,
+          path: this.importManifestImportPath,
+          icon: 'doc-text',
+          title: s__('ProjectImport|Manifest file'),
+          name: 'manifest',
+        },
+        {
+          isAvailable: this.importGitEnabled,
+          path: null,
+          icon: 'link',
+          title: s__('ProjectImport|Project URL'),
+          name: 'url',
+        },
+      ];
+    },
+    nextStepHref() {
+      return this.selectedImportPath ? this.selectedImportPath : false;
+    },
+  },
+  created() {
+    this.selectedImportPath = this.availableImports[0].path;
+    this.selectedImportName = this.availableImports[0].name;
+  },
+  methods: {
+    selectImportPath(name) {
+      this.selectedImportName = name;
+      this.selectedImportPath = this.availableImports.find((item) => item.name === name).path;
     },
   },
 };
 </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="import-project-next-button"
-      >
-        {{ __('Next step') }}
-      </gl-button>
-    </template>
-    <template #back>
-      <gl-button
-        category="primary"
-        variant="default"
-        data-testid="import-project-back-button"
-        @click="$emit('back')"
-      >
-        {{ __('Go back') }}
-      </gl-button>
-    </template>
-  </multi-step-form-template>
+  <div>
+    <multi-step-form-template v-if="currentStep === 2" :title="option.title" :current-step="2">
+      <template #form>
+        <gl-form-group :label="s__('ProjectsNew|Import project from')">
+          <single-choice-selector :checked="selectedImportName" @change="selectImportPath">
+            <template v-for="item in availableImports">
+              <single-choice-selector-item
+                v-if="item.isAvailable"
+                :key="item.name"
+                :value="item.name"
+                :disabled="item.disabled"
+                :disabled-message="item.disabledMessage"
+              >
+                <gl-icon :name="item.icon" />
+                {{ item.title }}
+              </single-choice-selector-item>
+            </template>
+          </single-choice-selector>
+        </gl-form-group>
+      </template>
+      <template #next>
+        <gl-button
+          v-if="selectedImportPath"
+          category="primary"
+          variant="confirm"
+          :href="nextStepHref"
+        >
+          {{ __('Next step') }}
+        </gl-button>
+        <gl-button
+          v-else
+          category="primary"
+          variant="confirm"
+          data-testid="import-project-next-button"
+          @click="$emit('next')"
+        >
+          {{ __('Next step') }}
+        </gl-button>
+      </template>
+      <template #back>
+        <gl-button
+          category="primary"
+          variant="default"
+          data-testid="import-project-back-button"
+          @click="$emit('back')"
+        >
+          {{ __('Go back') }}
+        </gl-button>
+      </template>
+    </multi-step-form-template>
+  </div>
 </template>
diff --git a/app/assets/javascripts/projects/new_v2/index.js b/app/assets/javascripts/projects/new_v2/index.js
index 204451672e9524..c35ba8d2e3507d 100644
--- a/app/assets/javascripts/projects/new_v2/index.js
+++ b/app/assets/javascripts/projects/new_v2/index.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
-import createDefaultClient from '~/lib/graphql';
 import { parseBoolean } from '~/lib/utils/common_utils';
+import createDefaultClient from '~/lib/graphql';
 import NewProjectFormApp from './components/app.vue';
 
 export function initNewProjectForm() {
@@ -12,63 +12,90 @@ export function initNewProjectForm() {
   }
 
   const {
+    namespaceFullPath,
+    namespaceId,
+    userNamespaceId,
+    newProjectGuidelines,
     pushToCreateProjectCommand,
-    projectHelpPath,
-    hasErrors,
-    isCiCdAvailable,
-    parentGroupUrl,
-    parentGroupName,
     rootPath,
     projectsUrl,
+    parentGroupUrl,
+    parentGroupName,
+    projectHelpPath,
+    isCiCdAvailable,
     canImportProjects,
     importSourcesEnabled,
-    namespaceFullPath,
-    namespaceId,
-    userNamespaceId,
     trackLabel,
     canSelectNamespace,
     canCreateProject,
     userProjectLimit,
-    newProjectGuidelines,
+    importHistoryPath,
+    importGitlabEnabled,
+    importGitlabImportPath,
+    importGithubEnabled,
+    importGithubImportPath,
+    importBitbucketEnabled,
+    importBitbucketImportPath,
+    importBitbucketImportConfigured,
+    importBitbucketDisabledMessage,
+    importBitbucketServerEnabled,
+    importBitbucketServerImportPath,
+    importFogbugzEnabled,
+    importFogbugzImportPath,
+    importGiteaEnabled,
+    importGiteaImportPath,
+    importGitEnabled,
+    importManifestEnabled,
+    importManifestImportPath,
   } = el.dataset;
 
-  const props = {
-    hasErrors: parseBoolean(hasErrors),
-    isCiCdAvailable: parseBoolean(isCiCdAvailable),
-    parentGroupUrl,
-    parentGroupName,
-    rootPath,
-    projectsUrl,
-    canImportProjects: parseBoolean(canImportProjects),
-    importSourcesEnabled: parseBoolean(importSourcesEnabled),
+  const provide = {
     namespaceFullPath,
     namespaceId,
-    trackLabel,
-    canSelectNamespace: parseBoolean(canSelectNamespace),
-    userProjectLimit: parseInt(userProjectLimit, 10),
+    userNamespaceId,
     newProjectGuidelines,
-  };
-
-  const provide = {
-    canCreateProject: parseBoolean(canCreateProject),
-    projectHelpPath,
     pushToCreateProjectCommand,
-    namespaceId,
-    userNamespaceId,
     rootPath,
+    projectsUrl,
     parentGroupUrl,
     parentGroupName,
-    projectsUrl,
+    projectHelpPath,
+    trackLabel,
+    isCiCdAvailable: parseBoolean(isCiCdAvailable),
+    importSourcesEnabled: parseBoolean(importSourcesEnabled),
+    canImportProjects: parseBoolean(canImportProjects),
+    canSelectNamespace: parseBoolean(canSelectNamespace),
+    canCreateProject: parseBoolean(canCreateProject),
+    userProjectLimit,
+    importHistoryPath,
+    importGitlabEnabled: parseBoolean(importGitlabEnabled),
+    importGitlabImportPath,
+    importGithubEnabled: parseBoolean(importGithubEnabled),
+    importGithubImportPath,
+    importBitbucketEnabled: parseBoolean(importBitbucketEnabled),
+    importBitbucketImportPath,
+    importBitbucketImportConfigured: parseBoolean(importBitbucketImportConfigured),
+    importBitbucketDisabledMessage,
+    importBitbucketServerEnabled: parseBoolean(importBitbucketServerEnabled),
+    importBitbucketServerImportPath,
+    importFogbugzEnabled: parseBoolean(importFogbugzEnabled),
+    importFogbugzImportPath,
+    importGiteaEnabled: parseBoolean(importGiteaEnabled),
+    importGiteaImportPath,
+    importGitEnabled: parseBoolean(importGitEnabled),
+    importManifestEnabled: parseBoolean(importManifestEnabled),
+    importManifestImportPath,
   };
 
   return new Vue({
     el,
+    name: 'NewProjectFormRoot',
     apolloProvider: new VueApollo({
       defaultClient: createDefaultClient(),
     }),
     provide,
     render(h) {
-      return h(NewProjectFormApp, { props });
+      return h(NewProjectFormApp);
     },
   });
 }
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 9ae9263f1059b1..651b7b6f355d31 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
@@ -1,8 +1,12 @@
 <script>
 import { GlFormCheckbox } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 
 export default {
   components: { GlFormCheckbox },
+  directives: {
+    SafeHtml,
+  },
   props: {
     value: {
       type: String,
@@ -44,9 +48,11 @@ export default {
           {{ title }}
         </slot>
       </div>
-      <p v-if="disabled && disabledMessage" class="help-text !gl-text-warning">
-        {{ disabledMessage }}
-      </p>
+      <p
+        v-if="disabled && disabledMessage"
+        v-safe-html="disabledMessage"
+        class="help-text !gl-text-warning"
+      ></p>
       <p v-if="description" class="help-text">
         {{ description }}
       </p>
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 f67066e92af577..8042c178ab4535 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
@@ -1,8 +1,12 @@
 <script>
 import { GlFormRadio } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 
 export default {
   components: { GlFormRadio },
+  directives: {
+    SafeHtml,
+  },
   props: {
     value: {
       type: String,
@@ -42,9 +46,11 @@ export default {
           {{ title }}
         </slot>
       </div>
-      <p v-if="disabled && disabledMessage" class="help-text !gl-text-warning">
-        {{ disabledMessage }}
-      </p>
+      <p
+        v-if="disabled && disabledMessage"
+        v-safe-html="disabledMessage"
+        class="help-text !gl-text-warning"
+      ></p>
       <p v-if="description" class="help-text">
         {{ description }}
       </p>
diff --git a/app/assets/stylesheets/components/multiple_choice_selector.scss b/app/assets/stylesheets/components/multiple_choice_selector.scss
index cd0b18ddd9921f..082e93861b8fc6 100644
--- a/app/assets/stylesheets/components/multiple_choice_selector.scss
+++ b/app/assets/stylesheets/components/multiple_choice_selector.scss
@@ -48,6 +48,10 @@
     &:last-child:has(input:checked) {
       margin: -1px;
     }
+
+    .custom-control {
+      min-height: auto;
+    }
   }
 
   &-click-area {
diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml
index bc8a31207bce51..69bf9adef419a2 100644
--- a/app/views/projects/new.html.haml
+++ b/app/views/projects/new.html.haml
@@ -8,9 +8,8 @@
 - 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,
+    namespace_id: namespace_id_from(params).to_s || @current_user_group&.id.to_s,
+    user_namespace_id: current_user.namespace_id.to_s,
     new_project_guidelines: brand_new_project_guidelines,
     push_to_create_project_command: push_to_create_project_command,
     root_path: root_path,
@@ -24,7 +23,25 @@
     track_label: local_assigns.fetch(:track_label, 'blank_project'),
     can_select_namespace: current_user.can_select_namespace?.to_s,
     can_create_project: current_user.can_create_project?.to_s,
-    user_project_limit: current_user.projects_limit } }
+    user_project_limit: current_user.projects_limit,
+    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,
+    import_github_enabled: github_import_enabled?.to_s,
+    import_github_import_path: new_import_github_path(namespace_id: @namespace&.id),
+    import_bitbucket_enabled: bitbucket_import_enabled?.to_s,
+    import_bitbucket_import_path: status_import_bitbucket_path(namespace_id: @namespace&.id),
+    import_bitbucket_import_configured: bitbucket_import_configured?.to_s,
+    import_bitbucket_disabled_message: import_from_bitbucket_message,
+    import_bitbucket_server_enabled: bitbucket_server_import_enabled?.to_s,
+    import_bitbucket_server_import_path: status_import_bitbucket_server_path(namespace_id: @namespace&.id),
+    import_fogbugz_enabled: fogbugz_import_enabled?.to_s,
+    import_fogbugz_import_path: new_import_fogbugz_path(namespace_id: @namespace&.id),
+    import_gitea_enabled: gitea_import_enabled?.to_s,
+    import_gitea_import_path: new_import_gitea_path(namespace_id: @namespace&.id),
+    import_git_enabled: git_import_enabled?.to_s,
+    import_manifest_enabled: manifest_import_enabled?.to_s,
+    import_manifest_import_path: new_import_manifest_path(namespace_id: @namespace&.id) } }
 - else
   .project-edit-container
     .project-edit-errors
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 339fdfa515f783..c4df3cf988cc81 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -45342,6 +45342,33 @@ msgstr ""
 msgid "ProjectFileTree|Show more"
 msgstr ""
 
+msgid "ProjectImport|Bitbucket Cloud"
+msgstr ""
+
+msgid "ProjectImport|Bitbucket Server"
+msgstr ""
+
+msgid "ProjectImport|FogBugz"
+msgstr ""
+
+msgid "ProjectImport|GitHub"
+msgstr ""
+
+msgid "ProjectImport|GitLab"
+msgstr ""
+
+msgid "ProjectImport|Gitea"
+msgstr ""
+
+msgid "ProjectImport|Import repository by URL"
+msgstr ""
+
+msgid "ProjectImport|Manifest file"
+msgstr ""
+
+msgid "ProjectImport|Project URL"
+msgstr ""
+
 msgid "ProjectList|Starred"
 msgstr ""
 
@@ -46568,6 +46595,9 @@ msgstr ""
 msgid "ProjectsNew|Import project"
 msgstr ""
 
+msgid "ProjectsNew|Import project from"
+msgstr ""
+
 msgid "ProjectsNew|Import projects from FogBugz"
 msgstr ""
 
diff --git a/spec/frontend/projects/new_v2/components/app_spec.js b/spec/frontend/projects/new_v2/components/app_spec.js
index 548ef33311f1d7..8752f082771b7f 100644
--- a/spec/frontend/projects/new_v2/components/app_spec.js
+++ b/spec/frontend/projects/new_v2/components/app_spec.js
@@ -11,18 +11,22 @@ jest.mock('~/lib/utils/url_utility');
 describe('New project creation app', () => {
   let wrapper;
 
-  const createComponent = (props = {}, provide = {}) => {
+  const createComponent = (provide = {}) => {
     wrapper = shallowMountExtended(App, {
-      propsData: {
+      provide: {
+        userNamespaceId: '1',
+        namespaceId: '1',
+        namespaceFullPath: 'root',
+        canCreateProject: true,
         rootPath: '/',
         projectsUrl: '/dashboard/projects',
         userProjectLimit: 10000,
         canSelectNamespace: true,
-        ...props,
-      },
-      provide: {
-        userNamespaceId: '1',
-        canCreateProject: true,
+        isCiCdAvailable: true,
+        canImportProjects: true,
+        importSourcesEnabled: true,
+        trackLabel: 'blank_project',
+        newProjectGuidelines: '',
         ...provide,
       },
       stubs: {
@@ -110,7 +114,7 @@ describe('New project creation app', () => {
     });
 
     it('renders error when user reached a limit of projects', () => {
-      createComponent({}, { canCreateProject: false });
+      createComponent({ canCreateProject: false });
 
       expect(findSingleChoiceSelector().exists()).toBe(false);
       expect(findAlert().text()).toBe(
@@ -119,7 +123,7 @@ describe('New project creation app', () => {
     });
 
     it('renders error when user can not create personal projects', () => {
-      createComponent({ userProjectLimit: 0 }, { canCreateProject: false });
+      createComponent({ userProjectLimit: 0, canCreateProject: false });
 
       expect(findSingleChoiceSelector().exists()).toBe(false);
       expect(findAlert().text()).toBe(
diff --git a/spec/frontend/projects/new_v2/components/import_by_url_form_spec.js b/spec/frontend/projects/new_v2/components/import_by_url_form_spec.js
new file mode 100644
index 00000000000000..4de369d07c1424
--- /dev/null
+++ b/spec/frontend/projects/new_v2/components/import_by_url_form_spec.js
@@ -0,0 +1,26 @@
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import ImportByUrlForm from '~/projects/new_v2/components/import_by_url_form.vue';
+
+describe('Import Project by URL Form', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = mountExtended(ImportByUrlForm);
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  const findNextButton = () => wrapper.findByTestId('import-project-by-url-next-button');
+  const findBackButton = () => wrapper.findByTestId('import-project-by-url-back-button');
+
+  it('renders the option to move to Next Step', () => {
+    expect(findNextButton().text()).toBe('Next step');
+  });
+
+  it(`emits the "back" event when the back button is clicked`, () => {
+    findBackButton().trigger('click');
+    expect(wrapper.emitted('back')).toHaveLength(1);
+  });
+});
-- 
GitLab


From 72c95f152bfe8fc6e9209f95681223ed4f5e1722 Mon Sep 17 00:00:00 2001
From: Justin Ho Tuan Duong <hduong@gitlab.com>
Date: Wed, 5 Mar 2025 13:38:57 +0100
Subject: [PATCH 2/5] Clean up import project form component

---
 .../new_v2/components/import_project_form.vue | 112 +++++++++---------
 1 file changed, 53 insertions(+), 59 deletions(-)

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 6c6788174c61c0..34e89c8b53cfea 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
@@ -80,9 +80,7 @@ export default {
   },
   data() {
     return {
-      selectedImportPath: null,
       selectedImportName: null,
-      currentStep: 2,
     };
   },
   computed: {
@@ -119,7 +117,7 @@ export default {
           name: 'bitbucket-server',
         },
         {
-          isAvaialble: this.importFogbugzEnabled,
+          isAvailable: this.importFogbugzEnabled,
           path: this.importFogbugzImportPath,
           icon: 'bug',
           title: s__('ProjectImport|FogBugz'),
@@ -148,73 +146,69 @@ export default {
         },
       ];
     },
-    nextStepHref() {
-      return this.selectedImportPath ? this.selectedImportPath : false;
+    selectedImportPath() {
+      return this.availableImports.find((item) => item.name === this.selectedImportName)?.path;
     },
   },
   created() {
-    this.selectedImportPath = this.availableImports[0].path;
     this.selectedImportName = this.availableImports[0].name;
   },
   methods: {
-    selectImportPath(name) {
+    selectImport(name) {
       this.selectedImportName = name;
-      this.selectedImportPath = this.availableImports.find((item) => item.name === name).path;
     },
   },
 };
 </script>
 
 <template>
-  <div>
-    <multi-step-form-template v-if="currentStep === 2" :title="option.title" :current-step="2">
-      <template #form>
-        <gl-form-group :label="s__('ProjectsNew|Import project from')">
-          <single-choice-selector :checked="selectedImportName" @change="selectImportPath">
-            <template v-for="item in availableImports">
-              <single-choice-selector-item
-                v-if="item.isAvailable"
-                :key="item.name"
-                :value="item.name"
-                :disabled="item.disabled"
-                :disabled-message="item.disabledMessage"
-              >
-                <gl-icon :name="item.icon" />
-                {{ item.title }}
-              </single-choice-selector-item>
-            </template>
-          </single-choice-selector>
-        </gl-form-group>
-      </template>
-      <template #next>
-        <gl-button
-          v-if="selectedImportPath"
-          category="primary"
-          variant="confirm"
-          :href="nextStepHref"
-        >
-          {{ __('Next step') }}
-        </gl-button>
-        <gl-button
-          v-else
-          category="primary"
-          variant="confirm"
-          data-testid="import-project-next-button"
-          @click="$emit('next')"
-        >
-          {{ __('Next step') }}
-        </gl-button>
-      </template>
-      <template #back>
-        <gl-button
-          category="primary"
-          variant="default"
-          data-testid="import-project-back-button"
-          @click="$emit('back')"
-        >
-          {{ __('Go back') }}
-        </gl-button>
-      </template>
-    </multi-step-form-template>
-  </div>
+  <multi-step-form-template :title="option.title" :current-step="2">
+    <template #form>
+      <gl-form-group :label="s__('ProjectsNew|Import project from')">
+        <single-choice-selector :checked="selectedImportName" @change="selectImport">
+          <template v-for="item in availableImports">
+            <single-choice-selector-item
+              v-if="item.isAvailable"
+              :key="item.name"
+              :value="item.name"
+              :disabled="item.disabled"
+              :disabled-message="item.disabledMessage"
+            >
+              <gl-icon :name="item.icon" />
+              {{ item.title }}
+            </single-choice-selector-item>
+          </template>
+        </single-choice-selector>
+      </gl-form-group>
+    </template>
+    <template #next>
+      <gl-button
+        v-if="selectedImportPath"
+        category="primary"
+        variant="confirm"
+        :href="selectedImportPath"
+      >
+        {{ __('Next step') }}
+      </gl-button>
+      <gl-button
+        v-else
+        category="primary"
+        variant="confirm"
+        data-testid="import-project-next-button"
+        @click="$emit('next')"
+      >
+        {{ __('Next step') }}
+      </gl-button>
+    </template>
+    <template #back>
+      <gl-button
+        category="primary"
+        variant="default"
+        data-testid="import-project-back-button"
+        @click="$emit('back')"
+      >
+        {{ __('Go back') }}
+      </gl-button>
+    </template>
+  </multi-step-form-template>
 </template>
-- 
GitLab


From a3c8a4b1c646938172761fd7b7bb1f7e37415942 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Wed, 5 Mar 2025 16:56:24 +0100
Subject: [PATCH 3/5] Fix spec

---
 .../new_v2/components/import_project_form.vue | 19 ++++++++++++++++++-
 .../components/import_project_form_spec.js    |  3 ++-
 2 files changed, 20 insertions(+), 2 deletions(-)

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 34e89c8b53cfea..a81a490f76b787 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
@@ -92,6 +92,7 @@ export default {
           icon: 'tanuki',
           title: s__('ProjectImport|GitLab'),
           name: 'gitlab',
+          stepsTotal: 3,
         },
         {
           isAvailable: this.importGithubEnabled,
@@ -99,6 +100,7 @@ export default {
           icon: 'github',
           title: s__('ProjectImport|GitHub'),
           name: 'github',
+          stepsTotal: 4,
         },
         {
           isAvailable: this.importBitbucketEnabled,
@@ -108,6 +110,7 @@ export default {
           name: 'bitbucket-cloud',
           disabled: !this.importBitbucketImportConfigured,
           disabledMessage: this.importBitbucketDisabledMessage,
+          stepsTotal: 4,
         },
         {
           isAvailable: this.importBitbucketServerEnabled,
@@ -115,6 +118,7 @@ export default {
           icon: 'bitbucket',
           title: s__('ProjectImport|Bitbucket Server'),
           name: 'bitbucket-server',
+          stepsTotal: 4,
         },
         {
           isAvailable: this.importFogbugzEnabled,
@@ -122,6 +126,7 @@ export default {
           icon: 'bug',
           title: s__('ProjectImport|FogBugz'),
           name: 'fogbugz',
+          stepsTotal: 4,
         },
         {
           isAvailable: this.importGiteaEnabled,
@@ -129,6 +134,7 @@ export default {
           icon: 'gitea',
           title: s__('ProjectImport|Gitea'),
           name: 'gitea',
+          stepsTotal: 4,
         },
         {
           isAvailable: this.importManifestEnabled,
@@ -136,6 +142,7 @@ export default {
           icon: 'doc-text',
           title: s__('ProjectImport|Manifest file'),
           name: 'manifest',
+          stepsTotal: 3,
         },
         {
           isAvailable: this.importGitEnabled,
@@ -143,12 +150,17 @@ export default {
           icon: 'link',
           title: s__('ProjectImport|Project URL'),
           name: 'url',
+          stepsTotal: 3,
         },
       ];
     },
     selectedImportPath() {
       return this.availableImports.find((item) => item.name === this.selectedImportName)?.path;
     },
+    selectImportStepsTotal() {
+      return this.availableImports.find((item) => item.name === this.selectedImportName)
+        ?.stepsTotal;
+    },
   },
   created() {
     this.selectedImportName = this.availableImports[0].name;
@@ -162,7 +174,11 @@ export default {
 </script>
 
 <template>
-  <multi-step-form-template :title="option.title" :current-step="2">
+  <multi-step-form-template
+    :title="option.title"
+    :current-step="2"
+    :steps-total="selectImportStepsTotal"
+  >
     <template #form>
       <gl-form-group :label="s__('ProjectsNew|Import project from')">
         <single-choice-selector :checked="selectedImportName" @change="selectImport">
@@ -186,6 +202,7 @@ export default {
         v-if="selectedImportPath"
         category="primary"
         variant="confirm"
+        data-testid="import-project-next-button"
         :href="selectedImportPath"
       >
         {{ __('Next step') }}
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 42b0c43b93f22e..ab47642defd301 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
@@ -8,6 +8,7 @@ describe('Import Project Form', () => {
   const defaultProps = {
     option: {
       title: 'Import project',
+      namespaceId: '',
     },
   };
 
@@ -32,7 +33,7 @@ describe('Import Project Form', () => {
     expect(findMultiStepFormTemplate().props()).toMatchObject({
       title: defaultProps.option.title,
       currentStep: 2,
-      stepsTotal: 2,
+      stepsTotal: 3,
     });
   });
 
-- 
GitLab


From bd63661b7c93608dc0340fb628dffc038f5bd9bf Mon Sep 17 00:00:00 2001
From: Justin Ho Tuan Duong <hduong@gitlab.com>
Date: Wed, 5 Mar 2025 22:44:23 +0100
Subject: [PATCH 4/5] Clean up props and fix specs

---
 .../projects/new_v2/components/app.vue        | 10 +++---
 .../new_v2/components/import_project_form.vue | 33 +++++++++++--------
 .../projects/new_v2/components/app_spec.js    |  4 ---
 .../components/import_project_form_spec.js    |  6 ++--
 4 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/app/assets/javascripts/projects/new_v2/components/app.vue b/app/assets/javascripts/projects/new_v2/components/app.vue
index a6571737929ff5..f851a37f1dcfb7 100644
--- a/app/assets/javascripts/projects/new_v2/components/app.vue
+++ b/app/assets/javascripts/projects/new_v2/components/app.vue
@@ -43,19 +43,19 @@ export default {
       default: null,
     },
     isCiCdAvailable: {
-      default: null,
+      default: false,
     },
     canCreateProject: {
-      default: null,
+      default: false,
     },
     canImportProjects: {
-      default: null,
+      default: false,
     },
     importSourcesEnabled: {
-      default: null,
+      default: false,
     },
     canSelectNamespace: {
-      default: null,
+      default: false,
     },
     namespaceFullPath: {
       default: null,
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 a81a490f76b787..d30e9dfcb25f57 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
@@ -71,24 +71,27 @@ export default {
     option: {
       type: Object,
       required: false,
-      default: () => {},
+      default: () => ({}),
     },
     namespaceId: {
       type: String,
-      required: true,
+      required: false,
+      default: null,
     },
   },
   data() {
     return {
-      selectedImportName: null,
+      selectedImport: null,
     };
   },
   computed: {
-    availableImports() {
+    importOptions() {
       return [
         {
           isAvailable: this.importGitlabEnabled,
-          path: `${this.importGitlabImportPath}?namespace_id=${this.namespaceId}`,
+          path: this.namespaceId
+            ? `${this.importGitlabImportPath}?namespace_id=${this.namespaceId}`
+            : this.importGitlabImportPath,
           icon: 'tanuki',
           title: s__('ProjectImport|GitLab'),
           name: 'gitlab',
@@ -154,20 +157,22 @@ export default {
         },
       ];
     },
+    availableImportOptions() {
+      return this.importOptions.filter((option) => option.isAvailable) || [];
+    },
     selectedImportPath() {
-      return this.availableImports.find((item) => item.name === this.selectedImportName)?.path;
+      return this.selectedImport?.path;
     },
-    selectImportStepsTotal() {
-      return this.availableImports.find((item) => item.name === this.selectedImportName)
-        ?.stepsTotal;
+    selectedImportStepsTotal() {
+      return this.selectedImport?.stepsTotal;
     },
   },
   created() {
-    this.selectedImportName = this.availableImports[0].name;
+    [this.selectedImport] = this.availableImportOptions;
   },
   methods: {
     selectImport(name) {
-      this.selectedImportName = name;
+      this.selectedImport = this.availableImportOptions.find((option) => option.name === name);
     },
   },
 };
@@ -177,12 +182,12 @@ export default {
   <multi-step-form-template
     :title="option.title"
     :current-step="2"
-    :steps-total="selectImportStepsTotal"
+    :steps-total="selectedImportStepsTotal"
   >
     <template #form>
       <gl-form-group :label="s__('ProjectsNew|Import project from')">
-        <single-choice-selector :checked="selectedImportName" @change="selectImport">
-          <template v-for="item in availableImports">
+        <single-choice-selector :checked="selectedImport.name" @change="selectImport">
+          <template v-for="item in availableImportOptions">
             <single-choice-selector-item
               v-if="item.isAvailable"
               :key="item.name"
diff --git a/spec/frontend/projects/new_v2/components/app_spec.js b/spec/frontend/projects/new_v2/components/app_spec.js
index 8752f082771b7f..eadab1dc6ab0ff 100644
--- a/spec/frontend/projects/new_v2/components/app_spec.js
+++ b/spec/frontend/projects/new_v2/components/app_spec.js
@@ -15,8 +15,6 @@ describe('New project creation app', () => {
     wrapper = shallowMountExtended(App, {
       provide: {
         userNamespaceId: '1',
-        namespaceId: '1',
-        namespaceFullPath: 'root',
         canCreateProject: true,
         rootPath: '/',
         projectsUrl: '/dashboard/projects',
@@ -25,8 +23,6 @@ describe('New project creation app', () => {
         isCiCdAvailable: true,
         canImportProjects: true,
         importSourcesEnabled: true,
-        trackLabel: 'blank_project',
-        newProjectGuidelines: '',
         ...provide,
       },
       stubs: {
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 ab47642defd301..b39de1edc8b9b8 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
@@ -12,11 +12,13 @@ describe('Import Project Form', () => {
     },
   };
 
-  const createComponent = (props = {}) => {
+  const createComponent = () => {
     wrapper = shallowMountExtended(ImportProjectForm, {
       propsData: {
         ...defaultProps,
-        ...props,
+      },
+      provide: {
+        importGitlabEnabled: true,
       },
     });
   };
-- 
GitLab


From 9e64d2b5a566c5f86a8c9eb1283272a51cab1d20 Mon Sep 17 00:00:00 2001
From: Justin Ho Tuan Duong <hduong@gitlab.com>
Date: Thu, 6 Mar 2025 13:31:08 +0100
Subject: [PATCH 5/5] Remove unused v-if

---
 .../projects/new_v2/components/import_project_form.vue           | 1 -
 1 file changed, 1 deletion(-)

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 d30e9dfcb25f57..3824ab085f47c8 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
@@ -189,7 +189,6 @@ export default {
         <single-choice-selector :checked="selectedImport.name" @change="selectImport">
           <template v-for="item in availableImportOptions">
             <single-choice-selector-item
-              v-if="item.isAvailable"
               :key="item.name"
               :value="item.name"
               :disabled="item.disabled"
-- 
GitLab