Add latest changes from gitlab-org/gitlab@13-12-stable-eev13.12.0-rc42

15 files changed, 153 insertions, 431 deletions

diff --git a/spec/frontend/projects/compare/components/app_legacy_spec.js b/spec/frontend/projects/compare/components/app_legacy_spec.js
index 93e96c8b9f7..6fdf4014575 100644
--- a/spec/frontend/projects/compare/components/app_legacy_spec.js
+++ b/spec/frontend/projects/compare/components/app_legacy_spec.js
@@ -7,7 +7,7 @@ jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' }));
 
 const projectCompareIndexPath = 'some/path';
 const refsProjectPath = 'some/refs/path';
-const paramsFrom = 'master';
+const paramsFrom = 'main';
 const paramsTo = 'some-other-branch';
 
 describe('CompareApp component', () => {
diff --git a/spec/frontend/projects/compare/components/app_spec.js b/spec/frontend/projects/compare/components/app_spec.js
index 6de06e4373c..7989a6f3d74 100644
--- a/spec/frontend/projects/compare/components/app_spec.js
+++ b/spec/frontend/projects/compare/components/app_spec.js
@@ -2,26 +2,19 @@ import { GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import CompareApp from '~/projects/compare/components/app.vue';
 import RevisionCard from '~/projects/compare/components/revision_card.vue';
+import { appDefaultProps as defaultProps } from './mock_data';
 
 jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' }));
 
-const projectCompareIndexPath = 'some/path';
-const refsProjectPath = 'some/refs/path';
-const paramsFrom = 'master';
-const paramsTo = 'master';
-
 describe('CompareApp component', () => {
   let wrapper;
+  const findSourceRevisionCard = () => wrapper.find('[data-testid="sourceRevisionCard"]');
+  const findTargetRevisionCard = () => wrapper.find('[data-testid="targetRevisionCard"]');
 
   const createComponent = (props = {}) => {
     wrapper = shallowMount(CompareApp, {
       propsData: {
-        projectCompareIndexPath,
-        refsProjectPath,
-        paramsFrom,
-        paramsTo,
-        projectMergeRequestPath: '',
-        createMrPath: '',
+        ...defaultProps,
         ...props,
       },
     });
@@ -39,16 +32,16 @@ describe('CompareApp component', () => {
   it('renders component with prop', () => {
     expect(wrapper.props()).toEqual(
       expect.objectContaining({
-        projectCompareIndexPath,
-        refsProjectPath,
-        paramsFrom,
-        paramsTo,
+        projectCompareIndexPath: defaultProps.projectCompareIndexPath,
+        refsProjectPath: defaultProps.refsProjectPath,
+        paramsFrom: defaultProps.paramsFrom,
+        paramsTo: defaultProps.paramsTo,
       }),
     );
   });
 
   it('contains the correct form attributes', () => {
-    expect(wrapper.attributes('action')).toBe(projectCompareIndexPath);
+    expect(wrapper.attributes('action')).toBe(defaultProps.projectCompareIndexPath);
     expect(wrapper.attributes('method')).toBe('POST');
   });
 
@@ -87,6 +80,58 @@ describe('CompareApp component', () => {
     });
   });
 
+  it('sets the selected project when the "selectProject" event is emitted', async () => {
+    const project = {
+      name: 'some-to-name',
+      id: '1',
+    };
+
+    findTargetRevisionCard().vm.$emit('selectProject', {
+      direction: 'to',
+      project,
+    });
+
+    await wrapper.vm.$nextTick();
+
+    expect(findTargetRevisionCard().props('selectedProject')).toEqual(
+      expect.objectContaining(project),
+    );
+  });
+
+  it('sets the selected revision when the "selectRevision" event is emitted', async () => {
+    const revision = 'some-revision';
+
+    findTargetRevisionCard().vm.$emit('selectRevision', {
+      direction: 'to',
+      revision,
+    });
+
+    await wrapper.vm.$nextTick();
+
+    expect(findSourceRevisionCard().props('paramsBranch')).toBe(revision);
+  });
+
+  describe('swap revisions button', () => {
+    const findSwapRevisionsButton = () => wrapper.find('[data-testid="swapRevisionsButton"]');
+
+    it('renders the swap revisions button', () => {
+      expect(findSwapRevisionsButton().exists()).toBe(true);
+    });
+
+    it('has the correct text', () => {
+      expect(findSwapRevisionsButton().text()).toBe('Swap revisions');
+    });
+
+    it('swaps revisions when clicked', async () => {
+      findSwapRevisionsButton().vm.$emit('click');
+
+      await wrapper.vm.$nextTick();
+
+      expect(findTargetRevisionCard().props('paramsBranch')).toBe(defaultProps.paramsTo);
+      expect(findSourceRevisionCard().props('paramsBranch')).toBe(defaultProps.paramsFrom);
+    });
+  });
+
   describe('merge request buttons', () => {
     const findProjectMrButton = () => wrapper.find('[data-testid="projectMrButton"]');
     const findCreateMrButton = () => wrapper.find('[data-testid="createMrButton"]');
diff --git a/spec/frontend/projects/compare/components/mock_data.js b/spec/frontend/projects/compare/components/mock_data.js
new file mode 100644
index 00000000000..61309928c26
--- /dev/null
+++ b/spec/frontend/projects/compare/components/mock_data.js
@@ -0,0 +1,37 @@
+const refsProjectPath = 'some/refs/path';
+const paramsName = 'to';
+const paramsBranch = 'main';
+const defaultProject = {
+  name: 'some-to-name',
+  id: '1',
+};
+
+export const appDefaultProps = {
+  projectCompareIndexPath: 'some/path',
+  projectMergeRequestPath: '',
+  projects: [defaultProject],
+  paramsFrom: 'main',
+  paramsTo: 'target/branch',
+  createMrPath: '',
+  refsProjectPath,
+  defaultProject,
+};
+
+export const revisionCardDefaultProps = {
+  selectedProject: defaultProject,
+  paramsBranch,
+  revisionText: 'Source',
+  refsProjectPath,
+  paramsName,
+};
+
+export const repoDropdownDefaultProps = {
+  selectedProject: defaultProject,
+  paramsName,
+};
+
+export const revisionDropdownDefaultProps = {
+  refsProjectPath,
+  paramsBranch,
+  paramsName,
+};
diff --git a/spec/frontend/projects/compare/components/repo_dropdown_spec.js b/spec/frontend/projects/compare/components/repo_dropdown_spec.js
index df8fea8fd32..27a7a32ebca 100644
--- a/spec/frontend/projects/compare/components/repo_dropdown_spec.js
+++ b/spec/frontend/projects/compare/components/repo_dropdown_spec.js
@@ -1,37 +1,17 @@
 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import RepoDropdown from '~/projects/compare/components/repo_dropdown.vue';
-
-const defaultProps = {
-  paramsName: 'to',
-};
-
-const projectToId = '1';
-const projectToName = 'some-to-name';
-const projectFromId = '2';
-const projectFromName = 'some-from-name';
-
-const defaultProvide = {
-  projectTo: { id: projectToId, name: projectToName },
-  projectsFrom: [
-    { id: projectFromId, name: projectFromName },
-    { id: 3, name: 'some-from-another-name' },
-  ],
-};
+import { revisionCardDefaultProps as defaultProps } from './mock_data';
 
 describe('RepoDropdown component', () => {
   let wrapper;
 
-  const createComponent = (props = {}, provide = {}) => {
+  const createComponent = (props = {}) => {
     wrapper = shallowMount(RepoDropdown, {
       propsData: {
         ...defaultProps,
         ...props,
       },
-      provide: {
-        ...defaultProvide,
-        ...provide,
-      },
     });
   };
 
@@ -49,11 +29,11 @@ describe('RepoDropdown component', () => {
     });
 
     it('set hidden input', () => {
-      expect(findHiddenInput().attributes('value')).toBe(projectToId);
+      expect(findHiddenInput().attributes('value')).toBe(defaultProps.selectedProject.id);
     });
 
     it('displays the project name in the disabled dropdown', () => {
-      expect(findGlDropdown().props('text')).toBe(projectToName);
+      expect(findGlDropdown().props('text')).toBe(defaultProps.selectedProject.name);
       expect(findGlDropdown().props('disabled')).toBe(true);
     });
 
@@ -66,31 +46,39 @@ describe('RepoDropdown component', () => {
 
   describe('Target Revision', () => {
     beforeEach(() => {
-      createComponent({ paramsName: 'from' });
+      const projects = [
+        {
+          name: 'some-to-name',
+          id: '1',
+        },
+      ];
+
+      createComponent({ paramsName: 'from', projects });
     });
 
     it('set hidden input of the selected project', () => {
-      expect(findHiddenInput().attributes('value')).toBe(projectToId);
+      expect(findHiddenInput().attributes('value')).toBe(defaultProps.selectedProject.id);
     });
 
     it('displays matching project name of the source revision initially in the dropdown', () => {
-      expect(findGlDropdown().props('text')).toBe(projectToName);
+      expect(findGlDropdown().props('text')).toBe(defaultProps.selectedProject.name);
     });
 
-    it('updates the hiddin input value when onClick method is triggered', async () => {
-      const repoId = '100';
+    it('updates the hidden input value when onClick method is triggered', async () => {
+      const repoId = '1';
       wrapper.vm.onClick({ id: repoId });
       await wrapper.vm.$nextTick();
       expect(findHiddenInput().attributes('value')).toBe(repoId);
     });
 
-    it('emits `changeTargetProject` event when another target project is selected', async () => {
-      const index = 1;
-      const { projectsFrom } = defaultProvide;
-      findGlDropdown().findAll(GlDropdownItem).at(index).vm.$emit('click');
+    it('emits `selectProject` event when another target project is selected', async () => {
+      findGlDropdown().findAll(GlDropdownItem).at(0).vm.$emit('click');
       await wrapper.vm.$nextTick();
 
-      expect(wrapper.emitted('changeTargetProject')[0][0]).toEqual(projectsFrom[index].name);
+      expect(wrapper.emitted('selectProject')[0][0]).toEqual({
+        direction: 'from',
+        project: { id: '1', name: 'some-to-name' },
+      });
     });
   });
 });
diff --git a/spec/frontend/projects/compare/components/revision_card_spec.js b/spec/frontend/projects/compare/components/revision_card_spec.js
index 83f858f4454..57906045337 100644
--- a/spec/frontend/projects/compare/components/revision_card_spec.js
+++ b/spec/frontend/projects/compare/components/revision_card_spec.js
@@ -3,13 +3,7 @@ import { shallowMount } from '@vue/test-utils';
 import RepoDropdown from '~/projects/compare/components/repo_dropdown.vue';
 import RevisionCard from '~/projects/compare/components/revision_card.vue';
 import RevisionDropdown from '~/projects/compare/components/revision_dropdown.vue';
-
-const defaultProps = {
-  refsProjectPath: 'some/refs/path',
-  revisionText: 'Source',
-  paramsName: 'to',
-  paramsBranch: 'master',
-};
+import { revisionCardDefaultProps as defaultProps } from './mock_data';
 
 describe('RepoDropdown component', () => {
   let wrapper;
diff --git a/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js b/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js
index ca208395e82..38e13dc5462 100644
--- a/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js
+++ b/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js
@@ -9,7 +9,7 @@ const defaultProps = {
   refsProjectPath: 'some/refs/path',
   revisionText: 'Target',
   paramsName: 'from',
-  paramsBranch: 'master',
+  paramsBranch: 'main',
 };
 
 jest.mock('~/flash');
diff --git a/spec/frontend/projects/compare/components/revision_dropdown_spec.js b/spec/frontend/projects/compare/components/revision_dropdown_spec.js
index aab9607ceae..118bb68585e 100644
--- a/spec/frontend/projects/compare/components/revision_dropdown_spec.js
+++ b/spec/frontend/projects/compare/components/revision_dropdown_spec.js
@@ -1,15 +1,10 @@
-import { GlDropdown, GlSearchBoxByType } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import AxiosMockAdapter from 'axios-mock-adapter';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import RevisionDropdown from '~/projects/compare/components/revision_dropdown.vue';
-
-const defaultProps = {
-  refsProjectPath: 'some/refs/path',
-  paramsName: 'from',
-  paramsBranch: 'master',
-};
+import { revisionDropdownDefaultProps as defaultProps } from './mock_data';
 
 jest.mock('~/flash');
 
@@ -142,4 +137,17 @@ describe('RevisionDropdown component', () => {
       expect(findGlDropdown().props('text')).toBe(defaultProps.paramsBranch);
     });
   });
+
+  it('emits `selectRevision` event when another revision is selected', async () => {
+    createComponent();
+    wrapper.vm.branches = ['some-branch'];
+    await wrapper.vm.$nextTick();
+
+    findGlDropdown().findAll(GlDropdownItem).at(0).vm.$emit('click');
+
+    expect(wrapper.emitted('selectRevision')[0][0]).toEqual({
+      direction: 'to',
+      revision: 'some-branch',
+    });
+  });
 });
diff --git a/spec/frontend/projects/experiment_new_project_creation/components/app_spec.js b/spec/frontend/projects/experiment_new_project_creation/components/app_spec.js
deleted file mode 100644
index 204e7a7c394..00000000000
--- a/spec/frontend/projects/experiment_new_project_creation/components/app_spec.js
+++ /dev/null
@@ -1,144 +0,0 @@
-import { GlBreadcrumb } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-import { assignGitlabExperiment } from 'helpers/experimentation_helper';
-import App from '~/projects/experiment_new_project_creation/components/app.vue';
-import LegacyContainer from '~/projects/experiment_new_project_creation/components/legacy_container.vue';
-import WelcomePage from '~/projects/experiment_new_project_creation/components/welcome.vue';
-
-describe('Experimental new project creation app', () => {
-  let wrapper;
-
-  const createComponent = (propsData) => {
-    wrapper = shallowMount(App, { propsData });
-  };
-
-  afterEach(() => {
-    wrapper.destroy();
-    window.location.hash = '';
-    wrapper = null;
-  });
-
-  const findWelcomePage = () => wrapper.findComponent(WelcomePage);
-  const findPanel = (panelName) =>
-    findWelcomePage()
-      .props()
-      .panels.find((p) => p.name === panelName);
-  const findPanelHeader = () => wrapper.find('h4');
-
-  describe('new_repo experiment', () => {
-    describe('when in the candidate variant', () => {
-      assignGitlabExperiment('new_repo', 'candidate');
-
-      it('has "repository" in the panel title', () => {
-        createComponent();
-
-        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', () => {
-      assignGitlabExperiment('new_repo', 'control');
-
-      it('has "project" in the panel title', () => {
-        createComponent();
-
-        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');
-        });
-      });
-    });
-  });
-
-  describe('with empty hash', () => {
-    beforeEach(() => {
-      createComponent();
-    });
-
-    it('renders welcome page', () => {
-      expect(wrapper.find(WelcomePage).exists()).toBe(true);
-    });
-
-    it('does not render breadcrumbs', () => {
-      expect(wrapper.find(GlBreadcrumb).exists()).toBe(false);
-    });
-  });
-
-  it('renders blank project container if there are errors', () => {
-    createComponent({ hasErrors: true });
-    expect(wrapper.find(WelcomePage).exists()).toBe(false);
-    expect(wrapper.find(LegacyContainer).exists()).toBe(true);
-  });
-
-  describe('when hash is not empty on load', () => {
-    beforeEach(() => {
-      window.location.hash = '#blank_project';
-      createComponent();
-    });
-
-    it('renders relevant container', () => {
-      expect(wrapper.find(WelcomePage).exists()).toBe(false);
-      expect(wrapper.find(LegacyContainer).exists()).toBe(true);
-    });
-
-    it('renders breadcrumbs', () => {
-      expect(wrapper.find(GlBreadcrumb).exists()).toBe(true);
-    });
-  });
-
-  describe('display custom new project guideline text', () => {
-    beforeEach(() => {
-      window.location.hash = '#blank_project';
-    });
-
-    it('does not render new project guideline if undefined', () => {
-      createComponent();
-      expect(wrapper.find('div#new-project-guideline').exists()).toBe(false);
-    });
-
-    it('render new project guideline if defined', () => {
-      const guidelineSelector = 'div#new-project-guideline';
-
-      createComponent({
-        newProjectGuidelines: '<h4>Internal Guidelines</h4><p>lorem ipsum</p>',
-      });
-      expect(wrapper.find(guidelineSelector).exists()).toBe(true);
-      expect(wrapper.find(guidelineSelector).html()).toContain('<h4>Internal Guidelines</h4>');
-      expect(wrapper.find(guidelineSelector).html()).toContain('<p>lorem ipsum</p>');
-    });
-  });
-
-  it('renders relevant container when hash changes', () => {
-    createComponent();
-    expect(wrapper.find(WelcomePage).exists()).toBe(true);
-
-    window.location.hash = '#blank_project';
-    const ev = document.createEvent('HTMLEvents');
-    ev.initEvent('hashchange', false, false);
-    window.dispatchEvent(ev);
-
-    return wrapper.vm.$nextTick().then(() => {
-      expect(wrapper.find(WelcomePage).exists()).toBe(false);
-      expect(wrapper.find(LegacyContainer).exists()).toBe(true);
-    });
-  });
-});
diff --git a/spec/frontend/projects/experiment_new_project_creation/components/legacy_container_spec.js b/spec/frontend/projects/experiment_new_project_creation/components/legacy_container_spec.js
deleted file mode 100644
index 6fc36d6362c..00000000000
--- a/spec/frontend/projects/experiment_new_project_creation/components/legacy_container_spec.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
-import LegacyContainer from '~/projects/experiment_new_project_creation/components/legacy_container.vue';
-
-describe('Legacy container component', () => {
-  let wrapper;
-  let dummy;
-
-  const createComponent = (propsData) => {
-    wrapper = shallowMount(LegacyContainer, { propsData });
-  };
-
-  afterEach(() => {
-    wrapper.destroy();
-    resetHTMLFixture();
-    wrapper = null;
-  });
-
-  describe('when selector targets real node', () => {
-    beforeEach(() => {
-      setHTMLFixture('<div class="dummy-target"></div>');
-      dummy = document.querySelector('.dummy-target');
-      createComponent({ selector: '.dummy-target' });
-    });
-
-    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);
-      });
-    });
-
-    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);
-      });
-    });
-  });
-
-  describe('when selector targets template node', () => {
-    beforeEach(() => {
-      setHTMLFixture('<template class="dummy-target">content</template>');
-      dummy = document.querySelector('.dummy-target');
-      createComponent({ selector: '.dummy-target' });
-    });
-
-    it('copies node content when mounted', () => {
-      expect(dummy.innerHTML).toEqual(wrapper.element.innerHTML);
-      expect(dummy.parentNode).toBe(document.body);
-    });
-  });
-});
diff --git a/spec/frontend/projects/experiment_new_project_creation/components/new_project_push_tip_popover_spec.js b/spec/frontend/projects/experiment_new_project_creation/components/new_project_push_tip_popover_spec.js
deleted file mode 100644
index 1ce16640d4a..00000000000
--- a/spec/frontend/projects/experiment_new_project_creation/components/new_project_push_tip_popover_spec.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import { GlPopover, GlFormInputGroup } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-import NewProjectPushTipPopover from '~/projects/experiment_new_project_creation/components/new_project_push_tip_popover.vue';
-import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
-
-describe('New project push tip popover', () => {
-  let wrapper;
-  const targetId = 'target';
-  const pushToCreateProjectCommand = 'command';
-  const workingWithProjectsHelpPath = 'path';
-
-  const findPopover = () => wrapper.findComponent(GlPopover);
-  const findClipboardButton = () => wrapper.findComponent(ClipboardButton);
-  const findFormInput = () => wrapper.findComponent(GlFormInputGroup);
-  const findHelpLink = () => wrapper.find('a');
-  const findTarget = () => document.getElementById(targetId);
-
-  const buildWrapper = () => {
-    wrapper = shallowMount(NewProjectPushTipPopover, {
-      propsData: {
-        target: findTarget(),
-      },
-      stubs: {
-        GlFormInputGroup,
-      },
-      provide: {
-        pushToCreateProjectCommand,
-        workingWithProjectsHelpPath,
-      },
-    });
-  };
-
-  beforeEach(() => {
-    setFixtures(`<a id="${targetId}"></a>`);
-    buildWrapper();
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  it('renders popover that targets the specified target', () => {
-    expect(findPopover().props()).toMatchObject({
-      target: findTarget(),
-      triggers: 'click blur',
-      placement: 'top',
-      title: 'Push to create a project',
-    });
-  });
-
-  it('renders a readonly form input with the push to create command', () => {
-    expect(findFormInput().props()).toMatchObject({
-      value: pushToCreateProjectCommand,
-      selectOnClick: true,
-    });
-    expect(findFormInput().attributes()).toMatchObject({
-      'aria-label': 'Push project from command line',
-      readonly: 'readonly',
-    });
-  });
-
-  it('allows copying the push command using the clipboard button', () => {
-    expect(findClipboardButton().props()).toMatchObject({
-      text: pushToCreateProjectCommand,
-      tooltipPlacement: 'right',
-      title: 'Copy command',
-    });
-  });
-
-  it('displays a link to open the push command help page reference', () => {
-    expect(findHelpLink().attributes().href).toBe(
-      `${workingWithProjectsHelpPath}#push-to-create-a-new-project`,
-    );
-  });
-});
diff --git a/spec/frontend/projects/experiment_new_project_creation/components/welcome_spec.js b/spec/frontend/projects/experiment_new_project_creation/components/welcome_spec.js
deleted file mode 100644
index 9fd1230806e..00000000000
--- a/spec/frontend/projects/experiment_new_project_creation/components/welcome_spec.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
-import { mockTracking } from 'helpers/tracking_helper';
-import { TRACKING_CONTEXT_SCHEMA } from '~/experimentation/constants';
-import { getExperimentData } from '~/experimentation/utils';
-import NewProjectPushTipPopover from '~/projects/experiment_new_project_creation/components/new_project_push_tip_popover.vue';
-import WelcomePage from '~/projects/experiment_new_project_creation/components/welcome.vue';
-
-jest.mock('~/experimentation/utils', () => ({ getExperimentData: jest.fn() }));
-
-describe('Welcome page', () => {
-  let wrapper;
-  let trackingSpy;
-
-  const createComponent = (propsData) => {
-    wrapper = shallowMount(WelcomePage, { propsData });
-  };
-
-  beforeEach(() => {
-    trackingSpy = mockTracking('_category_', document, jest.spyOn);
-    trackingSpy.mockImplementation(() => {});
-    getExperimentData.mockReturnValue(undefined);
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-    window.location.hash = '';
-    wrapper = null;
-  });
-
-  it('tracks link clicks', async () => {
-    createComponent({ panels: [{ name: 'test', href: '#' }] });
-    const link = wrapper.find('a');
-    link.trigger('click');
-    await nextTick();
-    return wrapper.vm.$nextTick().then(() => {
-      expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_tab', { label: 'test' });
-    });
-  });
-
-  it('adds new_repo experiment data if in experiment', async () => {
-    const mockExperimentData = 'data';
-    getExperimentData.mockReturnValue(mockExperimentData);
-
-    createComponent({ panels: [{ name: 'test', href: '#' }] });
-    const link = wrapper.find('a');
-    link.trigger('click');
-    await nextTick();
-    return wrapper.vm.$nextTick().then(() => {
-      expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_tab', {
-        label: 'test',
-        context: {
-          data: mockExperimentData,
-          schema: TRACKING_CONTEXT_SCHEMA,
-        },
-      });
-    });
-  });
-
-  it('renders new project push tip popover', () => {
-    createComponent({ panels: [{ name: 'test', href: '#' }] });
-
-    const popover = wrapper.findComponent(NewProjectPushTipPopover);
-
-    expect(popover.exists()).toBe(true);
-    expect(popover.props().target()).toBe(wrapper.find({ ref: 'clipTip' }).element);
-  });
-});
diff --git a/spec/frontend/projects/pipelines/charts/components/app_spec.js b/spec/frontend/projects/pipelines/charts/components/app_spec.js
index 0cf05d4ac37..987a215eb4c 100644
--- a/spec/frontend/projects/pipelines/charts/components/app_spec.js
+++ b/spec/frontend/projects/pipelines/charts/components/app_spec.js
@@ -54,8 +54,8 @@ describe('ProjectsPipelinesChartsApp', () => {
       expect(findGlTabs().exists()).toBe(true);
 
       expect(findGlTabAtIndex(0).attributes('title')).toBe('Pipelines');
-      expect(findGlTabAtIndex(1).attributes('title')).toBe('Deployments');
-      expect(findGlTabAtIndex(2).attributes('title')).toBe('Lead Time');
+      expect(findGlTabAtIndex(1).attributes('title')).toBe('Deployment frequency');
+      expect(findGlTabAtIndex(2).attributes('title')).toBe('Lead time');
     });
 
     it('renders the pipeline charts', () => {
@@ -75,7 +75,7 @@ describe('ProjectsPipelinesChartsApp', () => {
       setWindowLocation(`${TEST_HOST}/gitlab-org/gitlab-test/-/pipelines/charts`);
 
       mergeUrlParams.mockImplementation(({ chart }, path) => {
-        expect(chart).toBe('deployments');
+        expect(chart).toBe('deployment-frequency');
         expect(path).toBe(window.location.pathname);
         chartsPath = `${path}?chart=${chart}`;
         return chartsPath;
@@ -114,12 +114,12 @@ describe('ProjectsPipelinesChartsApp', () => {
 
   describe('when provided with a query param', () => {
     it.each`
-      chart            | tab
-      ${'lead-time'}   | ${'2'}
-      ${'deployments'} | ${'1'}
-      ${'pipelines'}   | ${'0'}
-      ${'fake'}        | ${'0'}
-      ${''}            | ${'0'}
+      chart                     | tab
+      ${'lead-time'}            | ${'2'}
+      ${'deployment-frequency'} | ${'1'}
+      ${'pipelines'}            | ${'0'}
+      ${'fake'}                 | ${'0'}
+      ${''}                     | ${'0'}
     `('shows the correct tab for URL parameter "$chart"', ({ chart, tab }) => {
       setWindowLocation(`${TEST_HOST}/gitlab-org/gitlab-test/-/pipelines/charts?chart=${chart}`);
       getParameterValues.mockImplementation((name) => {
@@ -152,7 +152,7 @@ describe('ProjectsPipelinesChartsApp', () => {
 
       getParameterValues.mockImplementationOnce((name) => {
         expect(name).toBe('chart');
-        return ['deployments'];
+        return ['deployment-frequency'];
       });
 
       popstateHandler();
diff --git a/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_area_chart_spec.js b/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_area_chart_spec.js
index 64f80300237..2b523467379 100644
--- a/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_area_chart_spec.js
+++ b/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_area_chart_spec.js
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import CiCdAnalyticsAreaChart from '~/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue';
+import CiCdAnalyticsAreaChart from '~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_area_chart.vue';
 import { transformedAreaChartData } from '../mock_data';
 
 describe('CiCdAnalyticsAreaChart', () => {
diff --git a/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js b/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js
index 037530ddd48..9adc6dba51e 100644
--- a/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js
+++ b/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js
@@ -1,8 +1,8 @@
 import { GlSegmentedControl } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import CiCdAnalyticsAreaChart from '~/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue';
-import CiCdAnalyticsCharts from '~/projects/pipelines/charts/components/ci_cd_analytics_charts.vue';
+import CiCdAnalyticsAreaChart from '~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_area_chart.vue';
+import CiCdAnalyticsCharts from '~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue';
 import { transformedAreaChartData, chartOptions } from '../mock_data';
 
 const DEFAULT_PROPS = {
@@ -26,7 +26,7 @@ const DEFAULT_PROPS = {
   ],
 };
 
-describe('~/projects/pipelines/charts/components/ci_cd_analytics_charts.vue', () => {
+describe('~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue', () => {
   let wrapper;
 
   const createWrapper = (props = {}) =>
diff --git a/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js b/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js
index c5cfe783569..b5ee62f2042 100644
--- a/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js
+++ b/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js
@@ -2,11 +2,11 @@ import { GlColumnChart } from '@gitlab/ui/dist/charts';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
-import CiCdAnalyticsCharts from '~/projects/pipelines/charts/components/ci_cd_analytics_charts.vue';
 import PipelineCharts from '~/projects/pipelines/charts/components/pipeline_charts.vue';
 import StatisticsList from '~/projects/pipelines/charts/components/statistics_list.vue';
 import getPipelineCountByStatus from '~/projects/pipelines/charts/graphql/queries/get_pipeline_count_by_status.query.graphql';
 import getProjectPipelineStatistics from '~/projects/pipelines/charts/graphql/queries/get_project_pipeline_statistics.query.graphql';
+import CiCdAnalyticsCharts from '~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue';
 import { mockPipelineCount, mockPipelineStatistics } from '../mock_data';
 
 const projectPath = 'gitlab-org/gitlab';