From 888137a77da2dd05d059aac0200c3ec5883b0a31 Mon Sep 17 00:00:00 2001
From: Julia Miocene <jmiocene@gitlab.com>
Date: Fri, 7 Feb 2025 15:22:43 +0100
Subject: [PATCH 1/4] Add navigation between first two steps to the new project
 creation form

---
 .../projects/new_v2/components/app.vue        | 49 +++++++++++++------
 .../new_v2/components/blank_project_form.vue  | 13 ++---
 .../new_v2/components/ci_cd_project_form.vue  | 13 ++---
 .../new_v2/components/import_project_form.vue | 13 ++---
 .../components/template_project_form.vue      | 11 +++--
 .../javascripts/projects/new_v2/constants.js  |  4 ++
 6 files changed, 65 insertions(+), 38 deletions(-)

diff --git a/app/assets/javascripts/projects/new_v2/components/app.vue b/app/assets/javascripts/projects/new_v2/components/app.vue
index 7de862a21aeafe..a10adb0197da03 100644
--- a/app/assets/javascripts/projects/new_v2/components/app.vue
+++ b/app/assets/javascripts/projects/new_v2/components/app.vue
@@ -10,10 +10,6 @@ import { OPTIONS } from '../constants';
 import NewProjectDestinationSelect from './project_destination_select.vue';
 import Breadcrumb from './form_breadcrumb.vue';
 import CommandLine from './command_line.vue';
-import BlankProjectForm from './blank_project_form.vue';
-import TemplateProjectForm from './template_project_form.vue';
-import CiCdProjectForm from './ci_cd_project_form.vue';
-import ImportProjectForm from './import_project_form.vue';
 
 export default {
   OPTIONS,
@@ -29,10 +25,6 @@ export default {
     NewProjectDestinationSelect,
     Breadcrumb,
     CommandLine,
-    BlankProjectForm,
-    TemplateProjectForm,
-    CiCdProjectForm,
-    ImportProjectForm,
   },
   directives: {
     SafeHtml,
@@ -113,6 +105,8 @@ export default {
     return {
       selectedNamespace:
         this.namespaceId && this.canSelectNamespace ? this.namespaceId : this.userNamespaceId,
+      selectedProjectType: OPTIONS.blank.value,
+      currentStep: 1,
       rootUrl: this.rootPath,
     };
   },
@@ -149,6 +143,12 @@ export default {
         OPTIONS.transfer,
       ];
     },
+    selectedProjectOption() {
+      return this.availableProjectTypes.find((type) => type.value === this.selectedProjectType);
+    },
+    step2Component() {
+      return this.selectedProjectOption.component;
+    },
   },
 
   methods: {
@@ -158,6 +158,15 @@ export default {
     chooseGroupNamespace() {
       this.selectedNamespace = null;
     },
+    selectProjectType(value) {
+      this.selectedProjectType = value;
+    },
+    onBack() {
+      this.currentStep -= 1;
+    },
+    onNext() {
+      this.currentStep += 1;
+    },
   },
 };
 </script>
@@ -166,7 +175,11 @@ export default {
   <div>
     <breadcrumb />
 
-    <multi-step-form-template :title="__('Create new project')" :current-step="1">
+    <multi-step-form-template
+      v-if="currentStep === 1"
+      :title="__('Create new project')"
+      :current-step="1"
+    >
       <template #form>
         <gl-form-group :label="s__('ProjectNew|What do you want to create?')">
           <gl-button-group class="gl-w-full">
@@ -206,7 +219,11 @@ export default {
           />
         </gl-form-group>
 
-        <single-choice-selector v-if="canChooseOption" checked="blank_project">
+        <single-choice-selector
+          v-if="canChooseOption"
+          :checked="selectedProjectType"
+          @change="selectProjectType"
+        >
           <single-choice-selector-item
             v-for="type in availableProjectTypes"
             v-bind="type"
@@ -223,7 +240,7 @@ export default {
         </gl-alert>
       </template>
       <template #next>
-        <gl-button category="primary" variant="confirm" size="medium">
+        <gl-button category="primary" variant="confirm" @click="onNext">
           {{ __('Next step') }}
         </gl-button>
       </template>
@@ -233,9 +250,11 @@ export default {
       </template>
     </multi-step-form-template>
 
-    <blank-project-form :title="$options.OPTIONS.blank.title" />
-    <template-project-form :title="$options.OPTIONS.template.title" />
-    <ci-cd-project-form :title="$options.OPTIONS.ci.title" />
-    <import-project-form :title="$options.OPTIONS.import.title" />
+    <component
+      :is="step2Component"
+      v-if="currentStep === 2"
+      :option="selectedProjectOption"
+      @back="onBack"
+    />
   </div>
 </template>
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 c7a98d71ab745f..6c26efdaf60ca0 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
@@ -8,23 +8,24 @@ export default {
     MultiStepFormTemplate,
   },
   props: {
-    title: {
-      type: String,
-      required: true,
+    option: {
+      type: Object,
+      required: false,
+      default: () => {},
     },
   },
 };
 </script>
 
 <template>
-  <multi-step-form-template :title="title" :current-step="2" :steps-total="2">
+  <multi-step-form-template :title="option.title" :current-step="2" :steps-total="2">
     <template #next>
-      <gl-button category="primary" variant="confirm" size="medium" :disabled="true">
+      <gl-button category="primary" variant="confirm" :disabled="true">
         {{ __('Create project') }}
       </gl-button>
     </template>
     <template #back>
-      <gl-button category="primary" variant="default" size="medium">
+      <gl-button category="primary" variant="default" @click="$emit('back')">
         {{ __('Go back') }}
       </gl-button>
     </template>
diff --git a/app/assets/javascripts/projects/new_v2/components/ci_cd_project_form.vue b/app/assets/javascripts/projects/new_v2/components/ci_cd_project_form.vue
index c7a98d71ab745f..6c26efdaf60ca0 100644
--- a/app/assets/javascripts/projects/new_v2/components/ci_cd_project_form.vue
+++ b/app/assets/javascripts/projects/new_v2/components/ci_cd_project_form.vue
@@ -8,23 +8,24 @@ export default {
     MultiStepFormTemplate,
   },
   props: {
-    title: {
-      type: String,
-      required: true,
+    option: {
+      type: Object,
+      required: false,
+      default: () => {},
     },
   },
 };
 </script>
 
 <template>
-  <multi-step-form-template :title="title" :current-step="2" :steps-total="2">
+  <multi-step-form-template :title="option.title" :current-step="2" :steps-total="2">
     <template #next>
-      <gl-button category="primary" variant="confirm" size="medium" :disabled="true">
+      <gl-button category="primary" variant="confirm" :disabled="true">
         {{ __('Create project') }}
       </gl-button>
     </template>
     <template #back>
-      <gl-button category="primary" variant="default" size="medium">
+      <gl-button category="primary" variant="default" @click="$emit('back')">
         {{ __('Go back') }}
       </gl-button>
     </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 e3d7df53a68c7e..8ba0ea211dcc82 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
@@ -8,23 +8,24 @@ export default {
     MultiStepFormTemplate,
   },
   props: {
-    title: {
-      type: String,
-      required: true,
+    option: {
+      type: Object,
+      required: false,
+      default: () => {},
     },
   },
 };
 </script>
 
 <template>
-  <multi-step-form-template :title="title" :current-step="2">
+  <multi-step-form-template :title="option.title" :current-step="2">
     <template #next>
-      <gl-button category="primary" variant="confirm" size="medium" :disabled="true">
+      <gl-button category="primary" variant="confirm" :disabled="true">
         {{ __('Next step') }}
       </gl-button>
     </template>
     <template #back>
-      <gl-button category="primary" variant="default" size="medium">
+      <gl-button category="primary" variant="default" @click="$emit('back')">
         {{ __('Go back') }}
       </gl-button>
     </template>
diff --git a/app/assets/javascripts/projects/new_v2/components/template_project_form.vue b/app/assets/javascripts/projects/new_v2/components/template_project_form.vue
index 97bf6d5744adc9..9e4192f598d41b 100644
--- a/app/assets/javascripts/projects/new_v2/components/template_project_form.vue
+++ b/app/assets/javascripts/projects/new_v2/components/template_project_form.vue
@@ -8,23 +8,24 @@ export default {
     MultiStepFormTemplate,
   },
   props: {
-    title: {
-      type: String,
-      required: true,
+    option: {
+      type: Object,
+      required: false,
+      default: () => {},
     },
   },
 };
 </script>
 
 <template>
-  <multi-step-form-template :title="title" :current-step="2" :steps-total="3">
+  <multi-step-form-template :title="option.title" :current-step="2" :steps-total="3">
     <template #next>
       <gl-button category="primary" variant="confirm" :disabled="true">
         {{ __('Next step') }}
       </gl-button>
     </template>
     <template #back>
-      <gl-button category="primary" variant="default">
+      <gl-button category="primary" variant="default" @click="$emit('back')">
         {{ __('Go back') }}
       </gl-button>
     </template>
diff --git a/app/assets/javascripts/projects/new_v2/constants.js b/app/assets/javascripts/projects/new_v2/constants.js
index 5aed0d15bce68d..05846855dcb3c8 100644
--- a/app/assets/javascripts/projects/new_v2/constants.js
+++ b/app/assets/javascripts/projects/new_v2/constants.js
@@ -4,6 +4,7 @@ export const OPTIONS = {
   blank: {
     key: 'blank',
     value: 'blank_project',
+    component: () => import('./components/blank_project_form.vue'),
     selector: '#blank-project-pane',
     title: s__('ProjectsNew|Create blank project'),
     description: s__(
@@ -13,6 +14,7 @@ export const OPTIONS = {
   template: {
     key: 'template',
     value: 'create_from_template',
+    component: () => import('./components/template_project_form.vue'),
     selector: '#create-from-template-pane',
     title: s__('ProjectsNew|Create from template'),
     description: s__(
@@ -22,6 +24,7 @@ export const OPTIONS = {
   ci: {
     key: 'ci',
     value: 'cicd_for_external_repo',
+    component: () => import('./components/ci_cd_project_form.vue'),
     selector: '#ci-cd-project-pane',
     title: s__('ProjectsNew|Run CI/CD for external repository'),
     description: s__('ProjectsNew|Connect your external repository to GitLab CI/CD.'),
@@ -29,6 +32,7 @@ export const OPTIONS = {
   import: {
     key: 'import',
     value: 'import_project',
+    component: () => import('./components/import_project_form.vue'),
     selector: '#import-project-pane',
     title: s__('ProjectsNew|Import project'),
     description: s__(
-- 
GitLab


From cfaf566be9dbb7b3174b8aac6160d7ef996be8ff Mon Sep 17 00:00:00 2001
From: Justin Ho Tuan Duong <hduong@gitlab.com>
Date: Sat, 8 Feb 2025 00:02:04 +0100
Subject: [PATCH 2/4] Add specs around next / back

---
 .../projects/new_v2/components/app.vue        |  9 ++-
 .../projects/new_v2/components/app_spec.js    | 63 +++++++++++++++++--
 2 files changed, 67 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/projects/new_v2/components/app.vue b/app/assets/javascripts/projects/new_v2/components/app.vue
index a10adb0197da03..35e1bb0b605e7b 100644
--- a/app/assets/javascripts/projects/new_v2/components/app.vue
+++ b/app/assets/javascripts/projects/new_v2/components/app.vue
@@ -179,6 +179,7 @@ export default {
       v-if="currentStep === 1"
       :title="__('Create new project')"
       :current-step="1"
+      data-testid="new-project-step1"
     >
       <template #form>
         <gl-form-group :label="s__('ProjectNew|What do you want to create?')">
@@ -240,7 +241,12 @@ export default {
         </gl-alert>
       </template>
       <template #next>
-        <gl-button category="primary" variant="confirm" @click="onNext">
+        <gl-button
+          category="primary"
+          variant="confirm"
+          data-testid="new-project-next"
+          @click="onNext"
+        >
           {{ __('Next step') }}
         </gl-button>
       </template>
@@ -254,6 +260,7 @@ export default {
       :is="step2Component"
       v-if="currentStep === 2"
       :option="selectedProjectOption"
+      data-testid="new-project-step2"
       @back="onBack"
     />
   </div>
diff --git a/spec/frontend/projects/new_v2/components/app_spec.js b/spec/frontend/projects/new_v2/components/app_spec.js
index b8b3ada84a8e3f..6a69be27d7da2b 100644
--- a/spec/frontend/projects/new_v2/components/app_spec.js
+++ b/spec/frontend/projects/new_v2/components/app_spec.js
@@ -3,7 +3,7 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import App from '~/projects/new_v2/components/app.vue';
 import FormBreadcrumb from '~/projects/new_v2/components/form_breadcrumb.vue';
 import CommandLine from '~/projects/new_v2/components/command_line.vue';
-import MultiStepFormTemplate from '~/vue_shared/components/multi_step_form_template.vue';
+import TemplateProjectForm from '~/projects/new_v2/components/template_project_form.vue';
 import SingleChoiceSelector from '~/vue_shared/components/single_choice_selector.vue';
 
 describe('New project creation app', () => {
@@ -26,11 +26,13 @@ describe('New project creation app', () => {
     });
   };
 
-  const findMultiStepForm = () => wrapper.findComponent(MultiStepFormTemplate);
+  const findStep1 = () => wrapper.findByTestId('new-project-step1');
   const findBreadcrumbs = () => wrapper.findComponent(FormBreadcrumb);
   const findSingleChoiceSelector = () => wrapper.findComponent(SingleChoiceSelector);
   const findAlert = () => wrapper.findComponent(GlAlert);
   const findCommandLine = () => wrapper.findComponent(CommandLine);
+  const findNextButton = () => wrapper.findByTestId('new-project-next');
+  const findStep2 = () => wrapper.findByTestId('new-project-step2');
 
   it('renders breadcrumbs', () => {
     createComponent();
@@ -38,13 +40,25 @@ describe('New project creation app', () => {
     expect(findBreadcrumbs().exists()).toBe(true);
   });
 
-  it('renders a form', () => {
+  it('renders step 1 form', () => {
     createComponent();
 
-    expect(findMultiStepForm().exists()).toBe(true);
+    expect(findStep1().exists()).toBe(true);
     expect(findAlert().exists()).toBe(false);
   });
 
+  it('does not render step 2', () => {
+    createComponent();
+
+    expect(findStep2().exists()).toBe(false);
+  });
+
+  it('uses blank_project as default projectType', () => {
+    createComponent();
+
+    expect(findSingleChoiceSelector().props('checked')).toBe('blank_project');
+  });
+
   describe('personal namespace project', () => {
     it('starts with personal namespace when no namespaceId provided', () => {
       createComponent();
@@ -91,4 +105,45 @@ describe('New project creation app', () => {
       expect(findCommandLine().exists()).toBe(false);
     });
   });
+
+  describe('when projectType is changed', () => {
+    beforeEach(() => {
+      createComponent();
+
+      findSingleChoiceSelector().vm.$emit('change', 'create_from_template');
+    });
+
+    it('updates the selected projectType', () => {
+      expect(findSingleChoiceSelector().props('checked')).toBe('create_from_template');
+    });
+
+    describe('and "Next" button is clicked', () => {
+      beforeEach(() => {
+        findNextButton().vm.$emit('click');
+      });
+
+      it('hides step 1', () => {
+        expect(findStep1().exists()).toBe(false);
+      });
+
+      it('shows step 2 component', () => {
+        expect(findStep2().exists()).toBe(true);
+        expect(findStep2().is(TemplateProjectForm)).toBe(true);
+      });
+
+      describe('and "Back" event is emitted from step 2', () => {
+        beforeEach(() => {
+          findStep2().vm.$emit('back');
+        });
+
+        it('shows step 1', () => {
+          expect(findStep1().exists()).toBe(true);
+        });
+
+        it('hides step 2 component', () => {
+          expect(findStep2().exists()).toBe(false);
+        });
+      });
+    });
+  });
 });
-- 
GitLab


From 594847e800ac510c9dfe268a029bb56361f88ec8 Mon Sep 17 00:00:00 2001
From: Justin Ho Tuan Duong <hduong@gitlab.com>
Date: Sat, 8 Feb 2025 23:28:28 +0100
Subject: [PATCH 3/4] Fix spec for Vue3

---
 app/assets/javascripts/projects/new_v2/components/app.vue | 1 +
 spec/frontend/projects/new_v2/components/app_spec.js      | 6 ++++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/projects/new_v2/components/app.vue b/app/assets/javascripts/projects/new_v2/components/app.vue
index 35e1bb0b605e7b..a446c3cdcbb9f7 100644
--- a/app/assets/javascripts/projects/new_v2/components/app.vue
+++ b/app/assets/javascripts/projects/new_v2/components/app.vue
@@ -259,6 +259,7 @@ export default {
     <component
       :is="step2Component"
       v-if="currentStep === 2"
+      :key="selectedProjectOption.key"
       :option="selectedProjectOption"
       data-testid="new-project-step2"
       @back="onBack"
diff --git a/spec/frontend/projects/new_v2/components/app_spec.js b/spec/frontend/projects/new_v2/components/app_spec.js
index 6a69be27d7da2b..b9dec19e872868 100644
--- a/spec/frontend/projects/new_v2/components/app_spec.js
+++ b/spec/frontend/projects/new_v2/components/app_spec.js
@@ -3,7 +3,6 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import App from '~/projects/new_v2/components/app.vue';
 import FormBreadcrumb from '~/projects/new_v2/components/form_breadcrumb.vue';
 import CommandLine from '~/projects/new_v2/components/command_line.vue';
-import TemplateProjectForm from '~/projects/new_v2/components/template_project_form.vue';
 import SingleChoiceSelector from '~/vue_shared/components/single_choice_selector.vue';
 
 describe('New project creation app', () => {
@@ -23,6 +22,9 @@ describe('New project creation app', () => {
         canCreateProject: true,
         ...provide,
       },
+      stubs: {
+        Component: { template: '<div></div>', props: ['option'] },
+      },
     });
   };
 
@@ -128,7 +130,7 @@ describe('New project creation app', () => {
 
       it('shows step 2 component', () => {
         expect(findStep2().exists()).toBe(true);
-        expect(findStep2().is(TemplateProjectForm)).toBe(true);
+        expect(findStep2().props('option').value).toBe('create_from_template');
       });
 
       describe('and "Back" event is emitted from step 2', () => {
-- 
GitLab


From a8c188e7804c0739c9c583cefb8fcafd7b9b9cac Mon Sep 17 00:00:00 2001
From: Julia Miocene <jmiocene@gitlab.com>
Date: Tue, 11 Feb 2025 11:00:12 +0100
Subject: [PATCH 4/4] Apply suggestions

---
 .../projects/new_v2/components/blank_project_form.vue           | 2 +-
 .../projects/new_v2/components/ci_cd_project_form.vue           | 2 +-
 .../projects/new_v2/components/import_project_form.vue          | 2 +-
 .../projects/new_v2/components/template_project_form.vue        | 2 +-
 4 files changed, 4 insertions(+), 4 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 6c26efdaf60ca0..eef9745372c6f7 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
@@ -11,7 +11,7 @@ export default {
     option: {
       type: Object,
       required: false,
-      default: () => {},
+      default: () => ({}),
     },
   },
 };
diff --git a/app/assets/javascripts/projects/new_v2/components/ci_cd_project_form.vue b/app/assets/javascripts/projects/new_v2/components/ci_cd_project_form.vue
index 6c26efdaf60ca0..eef9745372c6f7 100644
--- a/app/assets/javascripts/projects/new_v2/components/ci_cd_project_form.vue
+++ b/app/assets/javascripts/projects/new_v2/components/ci_cd_project_form.vue
@@ -11,7 +11,7 @@ export default {
     option: {
       type: Object,
       required: false,
-      default: () => {},
+      default: () => ({}),
     },
   },
 };
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 8ba0ea211dcc82..ae16dfffbaf437 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
@@ -11,7 +11,7 @@ export default {
     option: {
       type: Object,
       required: false,
-      default: () => {},
+      default: () => ({}),
     },
   },
 };
diff --git a/app/assets/javascripts/projects/new_v2/components/template_project_form.vue b/app/assets/javascripts/projects/new_v2/components/template_project_form.vue
index 9e4192f598d41b..6bbbb97fd5765a 100644
--- a/app/assets/javascripts/projects/new_v2/components/template_project_form.vue
+++ b/app/assets/javascripts/projects/new_v2/components/template_project_form.vue
@@ -11,7 +11,7 @@ export default {
     option: {
       type: Object,
       required: false,
-      default: () => {},
+      default: () => ({}),
     },
   },
 };
-- 
GitLab