Render experiment variant in active panel

This is a fix for a regression that was introduced during the final
cycle of a review for a previous MR (linked below). The regression was
that the experiment variant was no longer occuring in a subcomponent.

This MR backfills a test to ensure that the experiment is experienced
in the subcomponent by decorating data before it's passed down.

previous MR:
https://gitlab.com/gitlab-org/gitlab/-/merge_requests/55818

part of:
https://gitlab.com/gitlab-org/gitlab/-/issues/285286

app/assets/javascripts/projects/experiment_new_project_creation/components/app.vue

@@ -91,7 +91,7 @@ export default {
   },
 
   computed: {
-    availablePanels() {
+    decoratedPanels() {
       const PANEL_TITLES = experiment(NEW_REPO_EXPERIMENT, {
         use: () => ({
           blank: s__('ProjectsNew|Create blank project'),
@@ -103,20 +103,22 @@ export default {
         }),
       });
 
-      const updatedPanels = PANELS.map(({ key, title, ...el }) => ({
+      return PANELS.map(({ key, title, ...el }) => ({
         ...el,
         title: PANEL_TITLES[key] !== undefined ? PANEL_TITLES[key] : title,
       }));
+    },
 
+    availablePanels() {
       if (this.isCiCdAvailable) {
-        return updatedPanels;
+        return this.decoratedPanels;
       }
 
-      return updatedPanels.filter((p) => p.name !== CI_CD_PANEL);
+      return this.decoratedPanels.filter((p) => p.name !== CI_CD_PANEL);
     },
 
     activePanel() {
-      return PANELS.find((p) => p.name === this.activeTab);
+      return this.decoratedPanels.find((p) => p.name === this.activeTab);
     },
 
     breadcrumbs() {

spec/frontend/projects/experiment_new_project_creation/components/app_spec.js

@@ -23,6 +23,7 @@ describe('Experimental new project creation app', () => {
     findWelcomePage()
       .props()
       .panels.find((p) => p.name === panelName);
+  const findPanelHeader = () => wrapper.find('h4');
 
   describe('new_repo experiment', () => {
     describe('when in the candidate variant', () => {
@@ -33,6 +34,17 @@ describe('Experimental new project creation app', () => {
 
         expect(findPanel('blank_project').title).toBe('Create blank project/repository');
       });
+
+      describe('when hash is not empty on load', () => {
+        beforeEach(() => {
+          window.location.hash = '#blank_project';
+          createComponent();
+        });
+
+        it('renders "project/repository"', () => {
+          expect(findPanelHeader().text()).toBe('Create blank project/repository');
+        });
+      });
     });
 
     describe('when in the control variant', () => {
@@ -43,6 +55,17 @@ describe('Experimental new project creation app', () => {
 
         expect(findPanel('blank_project').title).toBe('Create blank project');
       });
+
+      describe('when hash is not empty on load', () => {
+        beforeEach(() => {
+          window.location.hash = '#blank_project';
+          createComponent();
+        });
+
+        it('renders "project"', () => {
+          expect(findPanelHeader().text()).toBe('Create blank project');
+        });
+      });
     });
   });