Merge branch 'xanf-add-active-class-for-experiment-ui' into 'master'

Resolve "The "Project slug" field does not get filled with the "Project name" field when creating a project using a template with the new experimental UI"

See merge request gitlab-org/gitlab!34710

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

@@ -14,11 +14,13 @@ export default {
     } else {
       this.source = legacyEntry.parentNode;
       this.$el.appendChild(legacyEntry);
+      legacyEntry.classList.add('active');
     }
   },
 
   beforeDestroy() {
     if (this.source) {
+      this.$el.firstChild.classList.remove('active');
       this.source.appendChild(this.$el.firstChild);
     }
   },

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

@@ -23,13 +23,28 @@ describe('Legacy container component', () => {
       createComponent({ selector: '.dummy-target' });
     });
 
-    it('moves node inside component when mounted', () => {
-      expect(dummy.parentNode).toBe(wrapper.element);
+    describe('when mounted', () => {
+      it('moves node inside component', () => {
+        expect(dummy.parentNode).toBe(wrapper.element);
+      });
+
+      it('sets active class', () => {
+        expect(dummy.classList.contains('active')).toBe(true);
+      });
     });
 
-    it('moves node back when unmounted', () => {
-      wrapper.destroy();
-      expect(dummy.parentNode).toBe(document.body);
+    describe('when unmounted', () => {
+      beforeEach(() => {
+        wrapper.destroy();
+      });
+
+      it('moves node back', () => {
+        expect(dummy.parentNode).toBe(document.body);
+      });
+
+      it('removes active class', () => {
+        expect(dummy.classList.contains('active')).toBe(false);
+      });
     });
   });