From 40ca8afbaa97883d97b028334841890e1c392d3f Mon Sep 17 00:00:00 2001
From: Julia Miocene <jmiocene@gitlab.com>
Date: Wed, 12 Feb 2025 20:09:11 +0100
Subject: [PATCH 1/4] Add hash url for the first two steps to the new project
 creation form

---
 .../projects/new_v2/components/app.vue        | 28 ++++++++++++++-
 .../new_v2/components/form_breadcrumb.vue     | 12 +++++++
 .../new_v2/components/form_breadcrumb_spec.js | 36 ++++++++++++++++---
 3 files changed, 71 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 a446c3cdcbb9f7..f5f9b7fde35d4f 100644
--- a/app/assets/javascripts/projects/new_v2/components/app.vue
+++ b/app/assets/javascripts/projects/new_v2/components/app.vue
@@ -149,6 +149,21 @@ export default {
     step2Component() {
       return this.selectedProjectOption.component;
     },
+    additionalBreadcrumb() {
+      return this.currentStep === 2 ? this.selectedProjectOption : null;
+    },
+  },
+
+  created() {
+    this.handleLocationHashChange();
+
+    window.addEventListener('hashchange', () => {
+      this.handleLocationHashChange();
+    });
+  },
+
+  beforeDestroy() {
+    window.removeEventListener('hashchange', window);
   },
 
   methods: {
@@ -163,9 +178,20 @@ export default {
     },
     onBack() {
       this.currentStep -= 1;
+      window.location.hash = '';
     },
     onNext() {
       this.currentStep += 1;
+      window.location.hash = `#${this.selectedProjectType}`;
+    },
+    handleLocationHashChange() {
+      const hash = window.location.hash.substring(1);
+      if (this.availableProjectTypes.some((type) => type.value === hash)) {
+        this.selectedProjectType = hash;
+        this.currentStep = 2;
+      } else {
+        this.currentStep = 1;
+      }
     },
   },
 };
@@ -173,7 +199,7 @@ export default {
 
 <template>
   <div>
-    <breadcrumb />
+    <breadcrumb :selected-project-type="additionalBreadcrumb" />
 
     <multi-step-form-template
       v-if="currentStep === 1"
diff --git a/app/assets/javascripts/projects/new_v2/components/form_breadcrumb.vue b/app/assets/javascripts/projects/new_v2/components/form_breadcrumb.vue
index 8979b802373ba6..a7a4c475521b37 100644
--- a/app/assets/javascripts/projects/new_v2/components/form_breadcrumb.vue
+++ b/app/assets/javascripts/projects/new_v2/components/form_breadcrumb.vue
@@ -10,6 +10,13 @@ export default {
     SuperSidebarToggle,
   },
   inject: ['rootPath', 'projectsUrl', 'parentGroupUrl', 'parentGroupName'],
+  props: {
+    selectedProjectType: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+  },
   computed: {
     breadcrumbs() {
       const breadcrumbs = this.parentGroupUrl
@@ -19,6 +26,11 @@ export default {
             { text: s__('ProjectsNew|Projects'), href: this.projectsUrl },
           ];
       breadcrumbs.push({ text: s__('ProjectsNew|New project'), href: '#' });
+      if (this.selectedProjectType)
+        breadcrumbs.push({
+          text: this.selectedProjectType.title,
+          href: `#${this.selectedProjectType.value}`,
+        });
       return breadcrumbs;
     },
   },
diff --git a/spec/frontend/projects/new_v2/components/form_breadcrumb_spec.js b/spec/frontend/projects/new_v2/components/form_breadcrumb_spec.js
index 42f7c833b01589..964a3a2b1f3c1b 100644
--- a/spec/frontend/projects/new_v2/components/form_breadcrumb_spec.js
+++ b/spec/frontend/projects/new_v2/components/form_breadcrumb_spec.js
@@ -5,12 +5,15 @@ import FormBreadcrumb from '~/projects/new_v2/components/form_breadcrumb.vue';
 describe('New project form breadcrumbs', () => {
   let wrapper;
 
-  const createComponent = (props = {}) => {
+  const createComponent = ({ props = {}, provide = {} } = {}) => {
     wrapper = shallowMountExtended(FormBreadcrumb, {
+      propsData: {
+        ...props,
+      },
       provide: {
         rootPath: '/',
         projectsUrl: '/dashboard/projects',
-        ...props,
+        ...provide,
       },
     });
   };
@@ -18,7 +21,7 @@ describe('New project form breadcrumbs', () => {
   const findBreadcrumb = () => wrapper.findComponent(GlBreadcrumb);
 
   it('renders personal namespace breadcrumbs', () => {
-    createComponent({ parentGroupUrl: null, parentGroupName: null });
+    createComponent({ provide: { parentGroupUrl: null, parentGroupName: null } });
 
     expect(findBreadcrumb().props('items')).toStrictEqual([
       { text: 'Your work', href: '/' },
@@ -28,11 +31,36 @@ describe('New project form breadcrumbs', () => {
   });
 
   it('renders group namespace breadcrumbs', () => {
-    createComponent({ parentGroupUrl: '/group/projects', parentGroupName: 'test group' });
+    createComponent({
+      provide: { parentGroupUrl: '/group/projects', parentGroupName: 'test group' },
+    });
 
     expect(findBreadcrumb().props('items')).toStrictEqual([
       { text: 'test group', href: '/group/projects' },
       { text: 'New project', href: '#' },
     ]);
   });
+
+  it('renders breadcrumbs with additional hash', () => {
+    createComponent({
+      props: {
+        selectedProjectType: {
+          key: 'blank',
+          value: 'blank_project',
+          selector: '#blank-project-pane',
+          title: 'Create blank project',
+          description:
+            'Create a blank project to store your files, plan your work, and collaborate on code, among other things.',
+        },
+      },
+      provide: { parentGroupUrl: null, parentGroupName: null },
+    });
+
+    expect(findBreadcrumb().props('items')).toStrictEqual([
+      { text: 'Your work', href: '/' },
+      { text: 'Projects', href: '/dashboard/projects' },
+      { text: 'New project', href: '#' },
+      { text: 'Create blank project', href: '#blank_project' },
+    ]);
+  });
 });
-- 
GitLab


From b720adb017d4259c95e37a21efcb6edea57b60c3 Mon Sep 17 00:00:00 2001
From: Justin Ho Tuan Duong <hduong@gitlab.com>
Date: Wed, 26 Feb 2025 14:39:41 +0100
Subject: [PATCH 2/4] Add setLocationHash url utility

Move updateHistory method so it can be used.
---
 .../javascripts/lib/utils/url_utility.js      | 37 ++++++++++-----
 spec/frontend/lib/utils/url_utility_spec.js   | 45 +++++++++++++++++++
 2 files changed, 72 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/lib/utils/url_utility.js b/app/assets/javascripts/lib/utils/url_utility.js
index 48b7cb86bda467..ae55adbce87c46 100644
--- a/app/assets/javascripts/lib/utils/url_utility.js
+++ b/app/assets/javascripts/lib/utils/url_utility.js
@@ -256,12 +256,39 @@ export function removeParams(params, url = window.location.href, skipEncoding =
   return `${root}${writableQuery}${writableFragment}`;
 }
 
+export function updateHistory({ state = {}, title = '', url, replace = false, win = window } = {}) {
+  if (win.history) {
+    if (replace) {
+      win.history.replaceState(state, title, url);
+    } else {
+      win.history.pushState(state, title, url);
+    }
+  }
+}
+
 /**
  * Returns value after the '#' in the location hash
  * @returns Current value of the hash, undefined if not set
  */
 export const getLocationHash = () => window.location.hash?.split('#')[1];
 
+/**
+ * Sets location hash to the given value.
+ * When value is undefined, the hash is removed.
+ * @param {string} hash - use undefined to remove location hash
+ */
+export const setLocationHash = (hash) => {
+  if (hash === undefined) {
+    updateHistory({
+      title: document.title,
+      url: window.location.pathname + window.location.search,
+      replace: true,
+    });
+  } else {
+    window.location.hash = hash;
+  }
+};
+
 /**
  * Returns a boolean indicating whether the URL hash contains the given string value
  * @param {string} hashName
@@ -299,16 +326,6 @@ export const setUrlFragment = (url, fragment) => {
   return `${rootUrl}#${encodedFragment}`;
 };
 
-export function updateHistory({ state = {}, title = '', url, replace = false, win = window } = {}) {
-  if (win.history) {
-    if (replace) {
-      win.history.replaceState(state, title, url);
-    } else {
-      win.history.pushState(state, title, url);
-    }
-  }
-}
-
 export const escapeFileUrl = (fileUrl) => encodeURIComponent(fileUrl).replace(/%2F/g, '/');
 
 export function webIDEUrl(route = undefined) {
diff --git a/spec/frontend/lib/utils/url_utility_spec.js b/spec/frontend/lib/utils/url_utility_spec.js
index 0a8c4ee1b25689..c3e6500118249d 100644
--- a/spec/frontend/lib/utils/url_utility_spec.js
+++ b/spec/frontend/lib/utils/url_utility_spec.js
@@ -2,6 +2,7 @@ import setWindowLocation from 'helpers/set_window_location_helper';
 import { TEST_HOST } from 'helpers/test_constants';
 import * as urlUtils from '~/lib/utils/url_utility';
 import { setGlobalAlerts } from '~/lib/utils/global_alerts';
+import { setLocationHash } from '~/lib/utils/url_utility';
 import { validURLs, invalidURLs } from './mock_data';
 
 jest.mock('~/lib/utils/global_alerts', () => ({
@@ -361,6 +362,50 @@ describe('URL utility', () => {
     });
   });
 
+  describe('setLocationHash', () => {
+    let originalLocation;
+    let originalHistory;
+    const mockPathname = '/some/path';
+    const mockSearch = '?some=query';
+
+    beforeEach(() => {
+      originalLocation = window.location;
+      originalHistory = window.history;
+
+      Object.defineProperty(window, 'location', {
+        writable: true,
+        value: {
+          hash: jest.fn(),
+          pathname: mockPathname,
+          search: mockSearch,
+        },
+      });
+      Object.defineProperty(window, 'history', {
+        writable: true,
+        value: {
+          replaceState: jest.fn(),
+        },
+      });
+    });
+
+    afterEach(() => {
+      window.location = originalLocation;
+      window.history = originalHistory;
+    });
+
+    it('when hash is undefined', () => {
+      setLocationHash();
+
+      expect(window.history.replaceState).toHaveBeenCalledWith({}, '', mockPathname + mockSearch);
+    });
+
+    it('when hash is a string', () => {
+      setLocationHash('hash-value');
+
+      expect(window.location.hash).toBe('hash-value');
+    });
+  });
+
   describe('doesHashExistInUrl', () => {
     beforeEach(() => {
       setWindowLocation('#note_1');
-- 
GitLab


From fafec3154be5e8a01041bb6d9a65e7d182bc569a Mon Sep 17 00:00:00 2001
From: Justin Ho Tuan Duong <hduong@gitlab.com>
Date: Wed, 26 Feb 2025 14:40:06 +0100
Subject: [PATCH 3/4] Refactor app to use url_utils

---
 .../javascripts/projects/new_v2/components/app.vue  | 13 ++++++-------
 .../projects/new_v2/components/form_breadcrumb.vue  |  5 ++++-
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/projects/new_v2/components/app.vue b/app/assets/javascripts/projects/new_v2/components/app.vue
index f5f9b7fde35d4f..216a37d0857e1f 100644
--- a/app/assets/javascripts/projects/new_v2/components/app.vue
+++ b/app/assets/javascripts/projects/new_v2/components/app.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlButton, GlButtonGroup, GlFormGroup, GlIcon, GlAlert } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
+import { getLocationHash, setLocationHash } from '~/lib/utils/url_utility';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import MultiStepFormTemplate from '~/vue_shared/components/multi_step_form_template.vue';
 import SingleChoiceSelector from '~/vue_shared/components/single_choice_selector.vue';
@@ -157,13 +158,11 @@ export default {
   created() {
     this.handleLocationHashChange();
 
-    window.addEventListener('hashchange', () => {
-      this.handleLocationHashChange();
-    });
+    window.addEventListener('hashchange', this.handleLocationHashChange);
   },
 
   beforeDestroy() {
-    window.removeEventListener('hashchange', window);
+    window.removeEventListener('hashchange', this.handleLocationHashChange);
   },
 
   methods: {
@@ -178,14 +177,14 @@ export default {
     },
     onBack() {
       this.currentStep -= 1;
-      window.location.hash = '';
+      setLocationHash();
     },
     onNext() {
       this.currentStep += 1;
-      window.location.hash = `#${this.selectedProjectType}`;
+      setLocationHash(this.selectedProjectType);
     },
     handleLocationHashChange() {
-      const hash = window.location.hash.substring(1);
+      const hash = getLocationHash();
       if (this.availableProjectTypes.some((type) => type.value === hash)) {
         this.selectedProjectType = hash;
         this.currentStep = 2;
diff --git a/app/assets/javascripts/projects/new_v2/components/form_breadcrumb.vue b/app/assets/javascripts/projects/new_v2/components/form_breadcrumb.vue
index a7a4c475521b37..f271b39ae397d4 100644
--- a/app/assets/javascripts/projects/new_v2/components/form_breadcrumb.vue
+++ b/app/assets/javascripts/projects/new_v2/components/form_breadcrumb.vue
@@ -26,11 +26,14 @@ export default {
             { text: s__('ProjectsNew|Projects'), href: this.projectsUrl },
           ];
       breadcrumbs.push({ text: s__('ProjectsNew|New project'), href: '#' });
-      if (this.selectedProjectType)
+
+      if (this.selectedProjectType) {
         breadcrumbs.push({
           text: this.selectedProjectType.title,
           href: `#${this.selectedProjectType.value}`,
         });
+      }
+
       return breadcrumbs;
     },
   },
-- 
GitLab


From 75a38d4ce1fea08ba3588558708cf0ab0bf4fcaa Mon Sep 17 00:00:00 2001
From: Justin Ho Tuan Duong <hduong@gitlab.com>
Date: Wed, 26 Feb 2025 15:06:14 +0100
Subject: [PATCH 4/4] Add specs and remove event listeners

We don't need the event listeners as we don't need to actively
listen for a hash change. The hash is already changed with code.
---
 .../projects/new_v2/components/app.vue        | 10 +----
 .../projects/new_v2/components/app_spec.js    | 42 +++++++++++++++++++
 2 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/projects/new_v2/components/app.vue b/app/assets/javascripts/projects/new_v2/components/app.vue
index 216a37d0857e1f..8176c11c4e9b4d 100644
--- a/app/assets/javascripts/projects/new_v2/components/app.vue
+++ b/app/assets/javascripts/projects/new_v2/components/app.vue
@@ -156,13 +156,7 @@ export default {
   },
 
   created() {
-    this.handleLocationHashChange();
-
-    window.addEventListener('hashchange', this.handleLocationHashChange);
-  },
-
-  beforeDestroy() {
-    window.removeEventListener('hashchange', this.handleLocationHashChange);
+    this.setStepFromLocationHash();
   },
 
   methods: {
@@ -183,7 +177,7 @@ export default {
       this.currentStep += 1;
       setLocationHash(this.selectedProjectType);
     },
-    handleLocationHashChange() {
+    setStepFromLocationHash() {
       const hash = getLocationHash();
       if (this.availableProjectTypes.some((type) => type.value === hash)) {
         this.selectedProjectType = hash;
diff --git a/spec/frontend/projects/new_v2/components/app_spec.js b/spec/frontend/projects/new_v2/components/app_spec.js
index b9dec19e872868..548ef33311f1d7 100644
--- a/spec/frontend/projects/new_v2/components/app_spec.js
+++ b/spec/frontend/projects/new_v2/components/app_spec.js
@@ -1,10 +1,13 @@
 import { GlAlert } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { getLocationHash, setLocationHash } from '~/lib/utils/url_utility';
 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 SingleChoiceSelector from '~/vue_shared/components/single_choice_selector.vue';
 
+jest.mock('~/lib/utils/url_utility');
+
 describe('New project creation app', () => {
   let wrapper;
 
@@ -61,6 +64,37 @@ describe('New project creation app', () => {
     expect(findSingleChoiceSelector().props('checked')).toBe('blank_project');
   });
 
+  describe('when location hash is present', () => {
+    afterEach(() => {
+      getLocationHash.mockReset();
+    });
+
+    describe('and is valid projectType', () => {
+      beforeEach(() => {
+        getLocationHash.mockReturnValue('cicd_for_external_repo');
+
+        createComponent({ isCiCdAvailable: true });
+      });
+
+      it('renders step 2 component from hash', () => {
+        expect(findStep2().exists()).toBe(true);
+        expect(findStep2().props('option').value).toBe('cicd_for_external_repo');
+      });
+    });
+
+    describe('and is invalid projectType', () => {
+      beforeEach(() => {
+        getLocationHash.mockReturnValue('nonexistent');
+
+        createComponent();
+      });
+
+      it('renders step 1', () => {
+        expect(findStep1().exists()).toBe(true);
+      });
+    });
+  });
+
   describe('personal namespace project', () => {
     it('starts with personal namespace when no namespaceId provided', () => {
       createComponent();
@@ -133,6 +167,10 @@ describe('New project creation app', () => {
         expect(findStep2().props('option').value).toBe('create_from_template');
       });
 
+      it('updates location hash', () => {
+        expect(setLocationHash).toHaveBeenLastCalledWith('create_from_template');
+      });
+
       describe('and "Back" event is emitted from step 2', () => {
         beforeEach(() => {
           findStep2().vm.$emit('back');
@@ -145,6 +183,10 @@ describe('New project creation app', () => {
         it('hides step 2 component', () => {
           expect(findStep2().exists()).toBe(false);
         });
+
+        it('removes location hash', () => {
+          expect(setLocationHash).toHaveBeenLastCalledWith();
+        });
       });
     });
   });
-- 
GitLab