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

21 files changed, 111 insertions, 630 deletions

diff --git a/app/assets/javascripts/projects/commit/components/commit_options_dropdown.vue b/app/assets/javascripts/projects/commit/components/commit_options_dropdown.vue
index d96d1035ed0..0fd31381ba6 100644
--- a/app/assets/javascripts/projects/commit/components/commit_options_dropdown.vue
+++ b/app/assets/javascripts/projects/commit/components/commit_options_dropdown.vue
@@ -65,6 +65,7 @@ export default {
     <gl-dropdown-item
       v-if="canRevert"
       data-testid="revert-link"
+      data-qa-selector="revert_button"
       @click="showModal($options.openRevertModal)"
     >
       {{ s__('ChangeTypeAction|Revert') }}
diff --git a/app/assets/javascripts/projects/compare/components/app.vue b/app/assets/javascripts/projects/compare/components/app.vue
index d2fb524489e..f7cfc82db11 100644
--- a/app/assets/javascripts/projects/compare/components/app.vue
+++ b/app/assets/javascripts/projects/compare/components/app.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlButton } from '@gitlab/ui';
 import csrf from '~/lib/utils/csrf';
+import { joinPaths } from '~/lib/utils/url_utility';
 import RevisionCard from './revision_card.vue';
 
 export default {
@@ -36,11 +37,46 @@ export default {
       type: String,
       required: true,
     },
+    defaultProject: {
+      type: Object,
+      required: true,
+    },
+    projects: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      from: {
+        projects: this.projects,
+        selectedProject: this.defaultProject,
+        revision: this.paramsFrom,
+        refsProjectPath: this.refsProjectPath,
+      },
+      to: {
+        selectedProject: this.defaultProject,
+        revision: this.paramsTo,
+        refsProjectPath: this.refsProjectPath,
+      },
+    };
   },
   methods: {
     onSubmit() {
       this.$refs.form.submit();
     },
+    onSelectProject({ direction, project }) {
+      const refsPath = joinPaths(gon.relative_url_root || '', `/${project.name}`, '/refs');
+      // direction is either 'from' or 'to'
+      this[direction].refsProjectPath = refsPath;
+      this[direction].selectedProject = project;
+    },
+    onSelectRevision({ direction, revision }) {
+      this[direction].revision = revision; // direction is either 'from' or 'to'
+    },
+    onSwapRevision() {
+      [this.from, this.to] = [this.to, this.from]; // swaps 'from' and 'to'
+    },
   },
 };
 </script>
@@ -57,10 +93,15 @@ export default {
       class="gl-lg-flex-direction-row gl-lg-display-flex gl-align-items-center compare-revision-cards"
     >
       <revision-card
-        :refs-project-path="refsProjectPath"
+        data-testid="sourceRevisionCard"
+        :refs-project-path="to.refsProjectPath"
         revision-text="Source"
         params-name="to"
-        :params-branch="paramsTo"
+        :params-branch="to.revision"
+        :projects="to.projects"
+        :selected-project="to.selectedProject"
+        @selectProject="onSelectProject"
+        @selectRevision="onSelectRevision"
       />
       <div
         class="compare-ellipsis gl-display-flex gl-justify-content-center gl-align-items-center gl-my-4 gl-md-my-0"
@@ -69,16 +110,24 @@ export default {
         ...
       </div>
       <revision-card
-        :refs-project-path="refsProjectPath"
+        data-testid="targetRevisionCard"
+        :refs-project-path="from.refsProjectPath"
         revision-text="Target"
         params-name="from"
-        :params-branch="paramsFrom"
+        :params-branch="from.revision"
+        :projects="from.projects"
+        :selected-project="from.selectedProject"
+        @selectProject="onSelectProject"
+        @selectRevision="onSelectRevision"
       />
     </div>
     <div class="gl-mt-4">
       <gl-button category="primary" variant="success" @click="onSubmit">
         {{ s__('CompareRevisions|Compare') }}
       </gl-button>
+      <gl-button data-testid="swapRevisionsButton" class="btn btn-default" @click="onSwapRevision">
+        {{ s__('CompareRevisions|Swap revisions') }}
+      </gl-button>
       <gl-button
         v-if="projectMergeRequestPath"
         :href="projectMergeRequestPath"
diff --git a/app/assets/javascripts/projects/compare/components/repo_dropdown.vue b/app/assets/javascripts/projects/compare/components/repo_dropdown.vue
index cb9d8b64b33..ba1e00a2b36 100644
--- a/app/assets/javascripts/projects/compare/components/repo_dropdown.vue
+++ b/app/assets/javascripts/projects/compare/components/repo_dropdown.vue
@@ -1,57 +1,51 @@
 <script>
 import { GlDropdown, GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui';
 
-const SOURCE_PARAM_NAME = 'to';
-
 export default {
   components: {
     GlDropdown,
     GlDropdownItem,
     GlSearchBoxByType,
   },
-  inject: ['projectTo', 'projectsFrom'],
   props: {
     paramsName: {
       type: String,
       required: true,
     },
+    projects: {
+      type: Array,
+      required: false,
+      default: null,
+    },
+    selectedProject: {
+      type: Object,
+      required: true,
+    },
   },
   data() {
     return {
       searchTerm: '',
-      selectedRepo: {},
     };
   },
   computed: {
+    disableRepoDropdown() {
+      return this.projects === null;
+    },
     filteredRepos() {
       const lowerCaseSearchTerm = this.searchTerm.toLowerCase();
 
-      return this?.projectsFrom.filter(({ name }) =>
-        name.toLowerCase().includes(lowerCaseSearchTerm),
-      );
-    },
-    isSourceRevision() {
-      return this.paramsName === SOURCE_PARAM_NAME;
+      return this?.projects.filter(({ name }) => name.toLowerCase().includes(lowerCaseSearchTerm));
     },
     inputName() {
       return `${this.paramsName}_project_id`;
     },
   },
-  mounted() {
-    this.setDefaultRepo();
-  },
   methods: {
-    onClick(repo) {
-      this.selectedRepo = repo;
-      this.emitTargetProject(repo.name);
-    },
-    setDefaultRepo() {
-      this.selectedRepo = this.projectTo;
+    onClick(project) {
+      this.emitTargetProject(project);
     },
-    emitTargetProject(name) {
-      if (!this.isSourceRevision) {
-        this.$emit('changeTargetProject', name);
-      }
+    emitTargetProject(project) {
+      this.$emit('selectProject', { direction: this.paramsName, project });
     },
   },
 };
@@ -59,23 +53,23 @@ export default {
 
 <template>
   <div>
-    <input type="hidden" :name="inputName" :value="selectedRepo.id" />
+    <input type="hidden" :name="inputName" :value="selectedProject.id" />
     <gl-dropdown
-      :text="selectedRepo.name"
+      :text="selectedProject.name"
       :header-text="s__(`CompareRevisions|Select target project`)"
       class="gl-w-full gl-font-monospace gl-sm-pr-3"
       toggle-class="gl-min-w-0"
-      :disabled="isSourceRevision"
+      :disabled="disableRepoDropdown"
     >
       <template #header>
-        <gl-search-box-by-type v-if="!isSourceRevision" v-model.trim="searchTerm" />
+        <gl-search-box-by-type v-if="!disableRepoDropdown" v-model.trim="searchTerm" />
       </template>
-      <template v-if="!isSourceRevision">
+      <template v-if="!disableRepoDropdown">
         <gl-dropdown-item
           v-for="repo in filteredRepos"
           :key="repo.id"
           is-check-item
-          :is-checked="selectedRepo.id === repo.id"
+          :is-checked="selectedProject.id === repo.id"
           @click="onClick(repo)"
         >
           {{ repo.name }}
diff --git a/app/assets/javascripts/projects/compare/components/revision_card.vue b/app/assets/javascripts/projects/compare/components/revision_card.vue
index 15d24792310..02a329221cc 100644
--- a/app/assets/javascripts/projects/compare/components/revision_card.vue
+++ b/app/assets/javascripts/projects/compare/components/revision_card.vue
@@ -27,17 +27,14 @@ export default {
       required: false,
       default: null,
     },
-  },
-  data() {
-    return {
-      selectedRefsProjectPath: this.refsProjectPath,
-    };
-  },
-  methods: {
-    onChangeTargetProject(targetProjectName) {
-      if (this.paramsName === 'from') {
-        this.selectedRefsProjectPath = `/${targetProjectName}/refs`;
-      }
+    projects: {
+      type: Array,
+      required: false,
+      default: null,
+    },
+    selectedProject: {
+      type: Object,
+      required: true,
     },
   },
 };
@@ -52,13 +49,16 @@ export default {
       <repo-dropdown
         class="gl-sm-w-half"
         :params-name="paramsName"
-        @changeTargetProject="onChangeTargetProject"
+        :projects="projects"
+        :selected-project="selectedProject"
+        v-on="$listeners"
       />
       <revision-dropdown
         class="gl-sm-w-half gl-mt-3 gl-sm-mt-0"
-        :refs-project-path="selectedRefsProjectPath"
+        :refs-project-path="refsProjectPath"
         :params-name="paramsName"
         :params-branch="paramsBranch"
+        v-on="$listeners"
       />
     </div>
   </gl-card>
diff --git a/app/assets/javascripts/projects/compare/components/revision_dropdown.vue b/app/assets/javascripts/projects/compare/components/revision_dropdown.vue
index d0b69344c12..f0b8e73e528 100644
--- a/app/assets/javascripts/projects/compare/components/revision_dropdown.vue
+++ b/app/assets/javascripts/projects/compare/components/revision_dropdown.vue
@@ -56,6 +56,9 @@ export default {
     searchTerm: debounce(function debounceSearch() {
       this.searchBranchesAndTags();
     }, SEARCH_DEBOUNCE_MS),
+    paramsBranch(newBranch) {
+      this.setSelectedRevision(newBranch);
+    },
   },
   mounted() {
     this.fetchBranchesAndTags();
@@ -84,7 +87,7 @@ export default {
       this.loading = true;
 
       if (reset) {
-        this.selectedRevision = this.getDefaultBranch();
+        this.setSelectedRevision(this.paramsBranch);
       }
 
       return axios
@@ -108,10 +111,14 @@ export default {
       return this.paramsBranch || EMPTY_DROPDOWN_TEXT;
     },
     onClick(revision) {
-      this.selectedRevision = revision;
+      this.setSelectedRevision(revision);
+      this.$emit('selectRevision', { direction: this.paramsName, revision });
     },
     onSearchEnter() {
-      this.selectedRevision = this.searchTerm;
+      this.setSelectedRevision(this.searchTerm);
+    },
+    setSelectedRevision(revision) {
+      this.selectedRevision = revision || EMPTY_DROPDOWN_TEXT;
     },
   },
 };
@@ -122,7 +129,7 @@ export default {
     <input type="hidden" :name="paramsName" :value="selectedRevision" />
     <gl-dropdown
       class="gl-w-full gl-font-monospace"
-      toggle-class="form-control compare-dropdown-toggle js-compare-dropdown gl-min-w-0"
+      toggle-class="form-control compare-dropdown-toggle gl-min-w-0"
       :text="selectedRevision"
       :header-text="s__('CompareRevisions|Select Git revision')"
       :loading="loading"
diff --git a/app/assets/javascripts/projects/compare/components/revision_dropdown_legacy.vue b/app/assets/javascripts/projects/compare/components/revision_dropdown_legacy.vue
index f57a8942a77..19cf4cda2be 100644
--- a/app/assets/javascripts/projects/compare/components/revision_dropdown_legacy.vue
+++ b/app/assets/javascripts/projects/compare/components/revision_dropdown_legacy.vue
@@ -112,7 +112,7 @@ export default {
       <input type="hidden" :name="paramsName" :value="selectedRevision" />
       <gl-dropdown
         class="gl-flex-grow-1 gl-flex-basis-0 gl-min-w-0 gl-font-monospace"
-        toggle-class="form-control compare-dropdown-toggle js-compare-dropdown gl-min-w-0 gl-rounded-top-left-none! gl-rounded-bottom-left-none!"
+        toggle-class="form-control compare-dropdown-toggle gl-min-w-0 gl-rounded-top-left-none! gl-rounded-bottom-left-none!"
         :text="selectedRevision"
         header-text="Select Git revision"
         :loading="loading"
diff --git a/app/assets/javascripts/projects/compare/index.js b/app/assets/javascripts/projects/compare/index.js
index 4ba4e308cd4..322dff773b8 100644
--- a/app/assets/javascripts/projects/compare/index.js
+++ b/app/assets/javascripts/projects/compare/index.js
@@ -22,10 +22,6 @@ export default function init() {
       components: {
         CompareApp,
       },
-      provide: {
-        projectTo: JSON.parse(projectTo),
-        projectsFrom: JSON.parse(projectsFrom),
-      },
       render(createElement) {
         return createElement(CompareApp, {
           props: {
@@ -35,6 +31,8 @@ export default function init() {
             projectCompareIndexPath,
             projectMergeRequestPath,
             createMrPath,
+            defaultProject: JSON.parse(projectTo),
+            projects: JSON.parse(projectsFrom),
           },
         });
       },
diff --git a/app/assets/javascripts/projects/experiment_new_project_creation/components/app.vue b/app/assets/javascripts/projects/experiment_new_project_creation/components/app.vue
deleted file mode 100644
index 1060b37067e..00000000000
--- a/app/assets/javascripts/projects/experiment_new_project_creation/components/app.vue
+++ /dev/null
@@ -1,201 +0,0 @@
-<script>
-/* eslint-disable vue/no-v-html */
-import { GlBreadcrumb, GlIcon, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
-import { experiment } from '~/experimentation/utils';
-import { __, s__ } from '~/locale';
-import { NEW_REPO_EXPERIMENT } from '../constants';
-import blankProjectIllustration from '../illustrations/blank-project.svg';
-import ciCdProjectIllustration from '../illustrations/ci-cd-project.svg';
-import createFromTemplateIllustration from '../illustrations/create-from-template.svg';
-import importProjectIllustration from '../illustrations/import-project.svg';
-import LegacyContainer from './legacy_container.vue';
-import WelcomePage from './welcome.vue';
-
-const BLANK_PANEL = 'blank_project';
-const CI_CD_PANEL = 'cicd_for_external_repo';
-const LAST_ACTIVE_TAB_KEY = 'new_project_last_active_tab';
-
-const PANELS = [
-  {
-    key: 'blank',
-    name: BLANK_PANEL,
-    selector: '#blank-project-pane',
-    title: s__('ProjectsNew|Create blank project'),
-    description: s__(
-      'ProjectsNew|Create a blank project to house your files, plan your work, and collaborate on code, among other things.',
-    ),
-    illustration: blankProjectIllustration,
-  },
-  {
-    key: 'template',
-    name: 'create_from_template',
-    selector: '#create-from-template-pane',
-    title: s__('ProjectsNew|Create from template'),
-    description: s__(
-      'Create a project pre-populated with the necessary files to get you started quickly.',
-    ),
-    illustration: createFromTemplateIllustration,
-  },
-  {
-    key: 'import',
-    name: 'import_project',
-    selector: '#import-project-pane',
-    title: s__('ProjectsNew|Import project'),
-    description: s__(
-      'Migrate your data from an external source like GitHub, Bitbucket, or another instance of GitLab.',
-    ),
-    illustration: importProjectIllustration,
-  },
-  {
-    key: 'ci',
-    name: CI_CD_PANEL,
-    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.'),
-    illustration: ciCdProjectIllustration,
-  },
-];
-
-export default {
-  components: {
-    GlBreadcrumb,
-    GlIcon,
-    WelcomePage,
-    LegacyContainer,
-  },
-  directives: {
-    SafeHtml,
-  },
-  props: {
-    hasErrors: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    isCiCdAvailable: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    newProjectGuidelines: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-
-  data() {
-    return {
-      activeTab: null,
-    };
-  },
-
-  computed: {
-    decoratedPanels() {
-      const PANEL_TITLES = experiment(NEW_REPO_EXPERIMENT, {
-        use: () => ({
-          blank: s__('ProjectsNew|Create blank project'),
-          import: s__('ProjectsNew|Import project'),
-        }),
-        try: () => ({
-          blank: s__('ProjectsNew|Create blank project/repository'),
-          import: s__('ProjectsNew|Import project/repository'),
-        }),
-      });
-
-      return PANELS.map(({ key, title, ...el }) => ({
-        ...el,
-        title: PANEL_TITLES[key] !== undefined ? PANEL_TITLES[key] : title,
-      }));
-    },
-
-    availablePanels() {
-      if (this.isCiCdAvailable) {
-        return this.decoratedPanels;
-      }
-
-      return this.decoratedPanels.filter((p) => p.name !== CI_CD_PANEL);
-    },
-
-    activePanel() {
-      return this.decoratedPanels.find((p) => p.name === this.activeTab);
-    },
-
-    breadcrumbs() {
-      if (!this.activeTab || !this.activePanel) {
-        return null;
-      }
-
-      return [
-        { text: __('New project'), href: '#' },
-        { text: this.activePanel.title, href: `#${this.activeTab}` },
-      ];
-    },
-  },
-
-  created() {
-    this.handleLocationHashChange();
-
-    if (this.hasErrors) {
-      this.activeTab = localStorage.getItem(LAST_ACTIVE_TAB_KEY) || BLANK_PANEL;
-    }
-
-    window.addEventListener('hashchange', () => {
-      this.handleLocationHashChange();
-      this.resetProjectErrors();
-    });
-    this.$root.$on('clicked::link', (e) => {
-      window.location = e.target.href;
-    });
-  },
-
-  methods: {
-    resetProjectErrors() {
-      const errorsContainer = document.querySelector('.project-edit-errors');
-      if (errorsContainer) {
-        errorsContainer.innerHTML = '';
-      }
-    },
-
-    handleLocationHashChange() {
-      this.activeTab = window.location.hash.substring(1) || null;
-      if (this.activeTab) {
-        localStorage.setItem(LAST_ACTIVE_TAB_KEY, this.activeTab);
-      }
-    },
-  },
-
-  PANELS,
-};
-</script>
-
-<template>
-  <welcome-page v-if="activeTab === null" :panels="availablePanels" />
-  <div v-else class="row">
-    <div class="col-lg-3">
-      <div class="gl-text-white" v-html="activePanel.illustration"></div>
-      <h4>{{ activePanel.title }}</h4>
-      <p>{{ activePanel.description }}</p>
-      <div
-        v-if="newProjectGuidelines"
-        id="new-project-guideline"
-        v-safe-html="newProjectGuidelines"
-      ></div>
-    </div>
-    <div class="col-lg-9">
-      <gl-breadcrumb v-if="breadcrumbs" :items="breadcrumbs">
-        <template #separator>
-          <gl-icon name="chevron-right" :size="8" />
-        </template>
-      </gl-breadcrumb>
-      <template v-for="panel in $options.PANELS">
-        <legacy-container
-          v-if="activeTab === panel.name"
-          :key="panel.name"
-          class="gl-mt-3"
-          :selector="panel.selector"
-        />
-      </template>
-    </div>
-  </div>
-</template>
diff --git a/app/assets/javascripts/projects/experiment_new_project_creation/components/legacy_container.vue b/app/assets/javascripts/projects/experiment_new_project_creation/components/legacy_container.vue
deleted file mode 100644
index d2fc2c66924..00000000000
--- a/app/assets/javascripts/projects/experiment_new_project_creation/components/legacy_container.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script>
-export default {
-  inheritAttrs: false,
-  props: {
-    selector: {
-      type: String,
-      required: true,
-    },
-  },
-  mounted() {
-    const legacyEntry = document.querySelector(this.selector);
-    if (legacyEntry.tagName === 'TEMPLATE') {
-      this.$el.innerHTML = legacyEntry.innerHTML;
-    } 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);
-    }
-  },
-};
-</script>
-<template>
-  <div></div>
-</template>
diff --git a/app/assets/javascripts/projects/experiment_new_project_creation/components/new_project_push_tip_popover.vue b/app/assets/javascripts/projects/experiment_new_project_creation/components/new_project_push_tip_popover.vue
deleted file mode 100644
index e42d9154866..00000000000
--- a/app/assets/javascripts/projects/experiment_new_project_creation/components/new_project_push_tip_popover.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<script>
-import { GlPopover, GlFormInputGroup } from '@gitlab/ui';
-import { __ } from '~/locale';
-import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
-
-export default {
-  components: {
-    GlPopover,
-    GlFormInputGroup,
-    ClipboardButton,
-  },
-  inject: ['pushToCreateProjectCommand', 'workingWithProjectsHelpPath'],
-  props: {
-    target: {
-      type: [Function, HTMLElement],
-      required: true,
-    },
-  },
-  i18n: {
-    clipboardButtonTitle: __('Copy command'),
-    commandInputAriaLabel: __('Push project from command line'),
-    helpLinkText: __('What does this command do?'),
-    labelText: __('Private projects can be created in your personal namespace with:'),
-    popoverTitle: __('Push to create a project'),
-  },
-};
-</script>
-<template>
-  <gl-popover
-    :target="target"
-    :title="$options.i18n.popoverTitle"
-    triggers="click blur"
-    placement="top"
-  >
-    <p>
-      <label for="push-to-create-tip" class="gl-font-weight-normal">
-        {{ $options.i18n.labelText }}
-      </label>
-    </p>
-    <p>
-      <gl-form-input-group
-        id="push-to-create-tip"
-        :value="pushToCreateProjectCommand"
-        readonly
-        select-on-click
-        :aria-label="$options.i18n.commandInputAriaLabel"
-      >
-        <template #append>
-          <clipboard-button
-            :text="pushToCreateProjectCommand"
-            :title="$options.i18n.clipboardButtonTitle"
-            tooltip-placement="right"
-          />
-        </template>
-      </gl-form-input-group>
-    </p>
-    <p>
-      <a
-        :href="`${workingWithProjectsHelpPath}#push-to-create-a-new-project`"
-        class="gl-font-sm"
-        target="_blank"
-        >{{ $options.i18n.helpLinkText }}</a
-      >
-    </p>
-  </gl-popover>
-</template>
diff --git a/app/assets/javascripts/projects/experiment_new_project_creation/components/welcome.vue b/app/assets/javascripts/projects/experiment_new_project_creation/components/welcome.vue
deleted file mode 100644
index d342ce4c9c2..00000000000
--- a/app/assets/javascripts/projects/experiment_new_project_creation/components/welcome.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<script>
-/* eslint-disable vue/no-v-html */
-import Tracking from '~/tracking';
-import { NEW_REPO_EXPERIMENT } from '../constants';
-import NewProjectPushTipPopover from './new_project_push_tip_popover.vue';
-
-const trackingMixin = Tracking.mixin({ ...gon.tracking_data, experiment: NEW_REPO_EXPERIMENT });
-
-export default {
-  components: {
-    NewProjectPushTipPopover,
-  },
-  mixins: [trackingMixin],
-  props: {
-    panels: {
-      type: Array,
-      required: true,
-    },
-  },
-};
-</script>
-<template>
-  <div class="container">
-    <div class="blank-state-welcome">
-      <h2 class="blank-state-welcome-title gl-mt-5! gl-mb-3!">
-        {{ s__('ProjectsNew|Create new project') }}
-      </h2>
-      <p div class="blank-state-text">&nbsp;</p>
-    </div>
-    <div class="row blank-state-row">
-      <a
-        v-for="panel in panels"
-        :key="panel.name"
-        :href="`#${panel.name}`"
-        :data-qa-selector="`${panel.name}_link`"
-        class="blank-state blank-state-link experiment-new-project-page-blank-state"
-        @click="track('click_tab', { label: panel.name })"
-      >
-        <div class="blank-state-icon gl-text-white" v-html="panel.illustration"></div>
-        <div class="blank-state-body gl-pl-4!">
-          <h3 class="blank-state-title experiment-new-project-page-blank-state-title">
-            {{ panel.title }}
-          </h3>
-          <p class="blank-state-text">
-            {{ panel.description }}
-          </p>
-        </div>
-      </a>
-    </div>
-    <div class="blank-state-welcome">
-      <p>
-        {{ __('You can also create a project from the command line.') }}
-        <a
-          ref="clipTip"
-          href="#"
-          click.prevent
-          class="push-new-project-tip"
-          rel="noopener noreferrer"
-        >
-          {{ __('Show command') }}
-        </a>
-        <new-project-push-tip-popover :target="() => $refs.clipTip" />
-      </p>
-    </div>
-  </div>
-</template>
diff --git a/app/assets/javascripts/projects/experiment_new_project_creation/constants.js b/app/assets/javascripts/projects/experiment_new_project_creation/constants.js
deleted file mode 100644
index 402ca887cf1..00000000000
--- a/app/assets/javascripts/projects/experiment_new_project_creation/constants.js
+++ /dev/null
@@ -1 +0,0 @@
-export const NEW_REPO_EXPERIMENT = 'new_repo';
diff --git a/app/assets/javascripts/projects/experiment_new_project_creation/illustrations/blank-project.svg b/app/assets/javascripts/projects/experiment_new_project_creation/illustrations/blank-project.svg
deleted file mode 100644
index f73ae70dba8..00000000000
--- a/app/assets/javascripts/projects/experiment_new_project_creation/illustrations/blank-project.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg width="82" height="80" viewBox="0 0 82 80" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M66.1912 8.19118H77.6176C78.2755 8.19118 78.8088 8.72448 78.8088 9.38235V69.6176C78.8088 70.2755 78.2755 70.8088 77.6176 70.8088H66.1912V8.19118Z" fill="#F0F0F0" stroke="#DBDBDB" stroke-width="2.38235"/>
-<path d="M22.0517 19.2723L22.0094 10.1001C22.004 8.92546 22.8555 7.92221 24.0153 7.73664L63.3613 1.44139C64.8087 1.2098 66.12 2.32794 66.12 3.79382V75.8717C66.12 77.3323 64.8177 78.449 63.3742 78.2262L24.3037 72.1952C23.1461 72.0165 22.2902 71.023 22.2848 69.8517L22.2428 60.7554" stroke="#DBDBDB" stroke-width="2.38235"/>
-<circle cx="23" cy="40" r="21" stroke="#6E49CB" stroke-width="2.38235"/>
-<circle cx="23" cy="40" r="17" fill="#6E49CB"/>
-<circle cx="23" cy="40" r="17" fill="white" fill-opacity="0.9"/>
-<path d="M22.3125 48V33.3659" stroke="#6E49CB" stroke-width="2.38235" stroke-linecap="round"/>
-<path d="M15 40.3049H30" stroke="#6E49CB" stroke-width="2.38235" stroke-linecap="round"/>
-</svg>
diff --git a/app/assets/javascripts/projects/experiment_new_project_creation/illustrations/ci-cd-project.svg b/app/assets/javascripts/projects/experiment_new_project_creation/illustrations/ci-cd-project.svg
deleted file mode 100644
index 8d6cf58f196..00000000000
--- a/app/assets/javascripts/projects/experiment_new_project_creation/illustrations/ci-cd-project.svg
+++ /dev/null
@@ -1,23 +0,0 @@
-<svg width="169" height="78" viewBox="0 0 169 78" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M115.571 41.5714L147.714 41.5714C158.365 41.5714 167 32.9369 167 22.2857C167 11.6345 158.365 3 147.714 3C137.063 3 128.429 11.6345 128.429 22.2857C128.429 27.3128 130.352 31.8907 133.503 35.3235" stroke="#DBDBDB" stroke-width="2.63203" stroke-linecap="round"/>
-<path d="M115.107 41.5714H125.786C133.084 41.5714 139 47.4877 139 54.7857C139 62.0838 133.084 68 125.786 68C118.488 68 112.571 62.0838 112.571 54.7857C112.571 53.039 112.91 51.3715 113.526 49.8453" stroke="#DBDBDB" stroke-width="2.63203" stroke-linecap="round"/>
-<path d="M87.5486 37H76.3943C75.6243 37 75 36.3746 75 35.6032C75 34.8318 75.6243 34.2064 76.3943 34.2064H87.5486C88.3187 34.2064 88.9429 34.8318 88.9429 35.6032C88.9429 36.3746 88.3187 37 87.5486 37Z" fill="#FC6D26"/>
-<path d="M118.703 37H96.3943C95.6243 37 95 36.3746 95 35.6032C95 34.8318 95.6243 34.2064 96.3943 34.2064H118.703C119.473 34.2064 120.097 34.8318 120.097 35.6032C120.097 36.3746 119.473 37 118.703 37Z" fill="#FC6D26"/>
-<path d="M118.703 37H96.3943C95.6243 37 95 36.3746 95 35.6032C95 34.8318 95.6243 34.2064 96.3943 34.2064H118.703C119.473 34.2064 120.097 34.8318 120.097 35.6032C120.097 36.3746 119.473 37 118.703 37Z" fill="white" fill-opacity="0.6"/>
-<path d="M93.8573 32H71.3944C70.6243 32 70.0001 31.3746 70.0001 30.6032C70.0001 29.8318 70.6243 29.2064 71.3944 29.2064L93.8573 29.2064C94.6273 29.2064 95.2516 29.8318 95.2516 30.6032C95.2516 31.3746 94.6273 32 93.8573 32Z" fill="#6E49CB"/>
-<path d="M93.8573 32H71.3944C70.6243 32 70.0001 31.3746 70.0001 30.6032C70.0001 29.8318 70.6243 29.2064 71.3944 29.2064L93.8573 29.2064C94.6273 29.2064 95.2516 29.8318 95.2516 30.6032C95.2516 31.3746 94.6273 32 93.8573 32Z" fill="white" fill-opacity="0.8"/>
-<path d="M86.8573 49H71.3944C70.6243 49 70.0001 48.3746 70.0001 47.6032C70.0001 46.8317 70.6243 46.2064 71.3944 46.2064H86.8573C87.6273 46.2064 88.2516 46.8317 88.2516 47.6032C88.2516 48.3746 87.6273 49 86.8573 49Z" fill="#6E49CB"/>
-<path d="M86.8573 49H71.3944C70.6243 49 70.0001 48.3746 70.0001 47.6032C70.0001 46.8317 70.6243 46.2064 71.3944 46.2064H86.8573C87.6273 46.2064 88.2516 46.8317 88.2516 47.6032C88.2516 48.3746 87.6273 49 86.8573 49Z" fill="white" fill-opacity="0.8"/>
-<path d="M109.166 43L73.3944 43C72.6243 43 72.0001 42.3746 72.0001 41.6032C72.0001 40.8317 72.6243 40.2064 73.3944 40.2064L109.166 40.2064C109.936 40.2064 110.56 40.8317 110.56 41.6032C110.56 42.3746 109.936 43 109.166 43Z" fill="#6E49CB"/>
-<path d="M109.166 43L73.3944 43C72.6243 43 72.0001 42.3746 72.0001 41.6032C72.0001 40.8317 72.6243 40.2064 73.3944 40.2064L109.166 40.2064C109.936 40.2064 110.56 40.8317 110.56 41.6032C110.56 42.3746 109.936 43 109.166 43Z" fill="white" fill-opacity="0.4"/>
-<path d="M146.262 24.2349L143.048 21.0153C142.767 20.7338 142.282 20.7323 141.983 21.0313L140.394 22.6236C140.1 22.9181 140.088 23.4002 140.378 23.6903L145.344 28.6651C145.841 29.1637 146.666 29.1795 147.166 28.6793L147.866 27.9779L155.864 19.9653C156.171 19.658 156.167 19.1776 155.868 18.8786L154.279 17.2863C153.985 16.9918 153.495 16.9891 153.194 17.2903L146.262 24.2349Z" fill="#FC6D26"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M125.682 56.7113L123.087 59.3221C122.858 59.5529 122.547 59.6825 122.223 59.6824C121.898 59.6824 121.587 59.5526 121.358 59.3218C121.129 59.091 121 58.7779 121 58.4515C121 58.1251 121.129 57.8121 121.358 57.5813L123.087 55.8412L121.358 54.1011C121.129 53.8703 121 53.5573 121 53.2309C121 52.9045 121.129 52.5915 121.358 52.3606C121.587 52.1298 121.898 52.0001 122.223 52C122.547 51.9999 122.858 52.1296 123.087 52.3603L125.682 54.9711C125.911 55.2019 126.04 55.5149 126.04 55.8412C126.04 56.1675 125.911 56.4805 125.682 56.7113ZM131.796 56.7113L129.202 59.3221C129.088 59.4364 128.954 59.527 128.805 59.5888C128.657 59.6506 128.498 59.6824 128.337 59.6824C128.177 59.6824 128.018 59.6505 127.869 59.5886C127.721 59.5268 127.586 59.4361 127.472 59.3218C127.359 59.2075 127.269 59.0718 127.207 58.9225C127.146 58.7732 127.114 58.6131 127.114 58.4515C127.114 58.2899 127.146 58.1299 127.208 57.9806C127.269 57.8313 127.359 57.6956 127.473 57.5813L129.202 55.8412L127.473 54.1011C127.359 53.9868 127.269 53.8512 127.208 53.7018C127.146 53.5525 127.114 53.3925 127.114 53.2309C127.114 53.0693 127.146 52.9092 127.207 52.7599C127.269 52.6106 127.359 52.4749 127.472 52.3606C127.586 52.2463 127.721 52.1556 127.869 52.0938C128.018 52.0319 128.177 52 128.337 52C128.498 52 128.657 52.0318 128.805 52.0936C128.954 52.1554 129.088 52.246 129.202 52.3603L131.796 54.9711C132.026 55.2019 132.154 55.5149 132.154 55.8412C132.154 56.1675 132.026 56.4805 131.796 56.7113Z" fill="#6E49CB"/>
-<path d="M2 26C2 28.415 14.4361 30.3727 29.7769 30.3727C33.7709 30.3727 37.568 30.24 41 30.0011" stroke="#DBDBDB" stroke-width="1.28173"/>
-<path d="M2 50C2 52.415 14.4361 54.3727 29.7769 54.3727C35.6133 54.3727 41.0293 54.0893 45.5 53.6052" stroke="#DBDBDB" stroke-width="1.28173"/>
-<path d="M57.5537 5V22M2 5V68.6673C2 73.1731 20.9696 75.5204 29.7769 75.5204C38.5842 75.5204 57.5537 73.1731 57.5537 68.6673V57" stroke="#DBDBDB" stroke-width="2.56346" stroke-linejoin="round"/>
-<ellipse cx="29.7769" cy="5.64391" rx="27.7769" ry="3.64391" stroke="#DBDBDB" stroke-width="2.56346"/>
-<ellipse cx="55.4286" cy="39.46" rx="17.4286" ry="17.46" stroke="#6E49CB" stroke-width="2.56346"/>
-<ellipse cx="55.2458" cy="39.2696" rx="13.2458" ry="13.2696" fill="#6E49CB"/>
-<ellipse cx="55.2458" cy="39.2696" rx="13.2458" ry="13.2696" fill="white" fill-opacity="0.9"/>
-<path d="M61.763 38.5893C62.5797 39.0892 62.5797 40.2756 61.763 40.7756L52.951 46.1704C52.0969 46.6933 51 46.0787 51 45.0773L51 34.2875C51 33.2861 52.0969 32.6715 52.951 33.1944L61.763 38.5893Z" fill="#6E49CB"/>
-</svg>
diff --git a/app/assets/javascripts/projects/experiment_new_project_creation/illustrations/create-from-template.svg b/app/assets/javascripts/projects/experiment_new_project_creation/illustrations/create-from-template.svg
deleted file mode 100644
index 2ff4e4969b1..00000000000
--- a/app/assets/javascripts/projects/experiment_new_project_creation/illustrations/create-from-template.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<svg width="82" height="80" viewBox="0 0 82 80" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M68.1765 8.17647H79.6471C80.2968 8.17647 80.8235 8.70319 80.8235 9.35294V69.6471C80.8235 70.2968 80.2968 70.8235 79.6471 70.8235H68.1765V8.17647Z" fill="#F0F0F0" stroke="#DBDBDB" stroke-width="2.35294"/>
-<path d="M24.0504 19L24.0093 10.0746C24.0039 8.9145 24.8449 7.92363 25.9905 7.74035L65.393 1.43595C66.8226 1.20721 68.1176 2.31155 68.1176 3.75934V75.903C68.1176 77.3456 66.8314 78.4485 65.4057 78.2284L26.2788 72.1887C25.1356 72.0122 24.2902 71.0309 24.2849 69.8742L24.244 61" stroke="#DBDBDB" stroke-width="2.35294"/>
-<path d="M60.0194 11.1796L30.0195 15.2198C29.4357 15.2984 29 15.7966 29 16.3857V19.1235C29 19.8153 29.594 20.3578 30.283 20.2951L60.283 17.5679C60.889 17.5128 61.3529 17.0047 61.3529 16.3962V12.3455C61.3529 11.6334 60.7252 11.0845 60.0194 11.1796Z" fill="#DBDBDB" stroke="#DBDBDB" stroke-width="0.588235" stroke-linecap="round" stroke-linejoin="bevel"/>
-<path d="M51.1704 29.1021L41.8902 29.8481C41.0202 29.918 40.5266 30.8776 40.9756 31.626L42.6523 34.4205C42.8676 34.7793 43.2573 34.9968 43.6758 34.9916L51.2794 34.8968C51.9233 34.8888 52.4412 34.3645 52.4412 33.7205V30.2748C52.4412 29.5879 51.8551 29.0471 51.1704 29.1021Z" fill="#DBDBDB" stroke="#DBDBDB" stroke-width="0.588235" stroke-linecap="round" stroke-linejoin="bevel"/>
-<path d="M61.2104 70.6341V40.1765C61.2104 39.5267 60.6837 39 60.0339 39H44.9909C44.4469 39 43.9738 39.373 43.8469 39.9019L41.118 51.2721C41.0819 51.4226 41.0148 51.5672 40.923 51.6918C37.1778 56.7763 34.7228 57.4741 29.7135 59.6826C29.2815 59.873 29.0064 60.3064 29.0162 60.7783L29.1309 66.295C29.1428 66.8693 29.5679 67.3511 30.1362 67.4345L59.8631 71.7981C60.5732 71.9024 61.2104 71.3519 61.2104 70.6341Z" fill="#DBDBDB" stroke="#DBDBDB" stroke-width="0.588235" stroke-linecap="round" stroke-linejoin="bevel"/>
-<path d="M43.5694 24L36 24.5" stroke="#DBDBDB" stroke-width="1.17647" stroke-linecap="round"/>
-<circle cx="23" cy="40" r="21" stroke="#6E49CB" stroke-width="2.35294"/>
-<circle cx="23" cy="40" r="17" fill="#6E49CB"/>
-<circle cx="23" cy="40" r="17" fill="white" fill-opacity="0.9"/>
-<path d="M22.3125 48V33" stroke="#6E49CB" stroke-width="2.35294" stroke-linecap="round"/>
-<path d="M15 41.3148H30" stroke="#6E49CB" stroke-width="2.35294" stroke-linecap="round"/>
-</svg>
diff --git a/app/assets/javascripts/projects/experiment_new_project_creation/illustrations/import-project.svg b/app/assets/javascripts/projects/experiment_new_project_creation/illustrations/import-project.svg
deleted file mode 100644
index 46b4b097bb6..00000000000
--- a/app/assets/javascripts/projects/experiment_new_project_creation/illustrations/import-project.svg
+++ /dev/null
@@ -1,38 +0,0 @@
-<svg width="169" height="84" viewBox="0 0 169 84" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0)">
-<path d="M153.5 74.5714H165.684C166.411 74.5714 167 73.9822 167 73.2554V8.74461C167 8.01779 166.411 7.42859 165.684 7.42859H153.5" stroke="#DBDBDB" stroke-width="2.63203"/>
-<path d="M107.94 57L108.014 72.9062C108.017 73.5536 108.49 74.1026 109.13 74.2008L151.913 80.7674C152.71 80.8897 153.429 80.273 153.429 79.4666V2.54193C153.429 1.73264 152.705 1.11511 151.906 1.24226L108.829 8.09543C108.187 8.19744 107.716 8.7519 107.719 9.4012L107.771 20.5" stroke="#DBDBDB" stroke-width="2.63203"/>
-<path d="M133.539 52.5313L122.91 51.9925M137.311 52.7225L148.969 53.3135" stroke="#DFDFDF" stroke-width="1.31602" stroke-linecap="round"/>
-<path d="M132.224 43.9783L124 43.6955M135.998 44.1081L147.665 44.5092" stroke="#DFDFDF" stroke-width="1.31602" stroke-linecap="round"/>
-<path d="M148.238 12.3644L131.189 14.604M117.282 16.4529L126.416 15.2311" stroke="#DFDFDF" stroke-width="1.31602" stroke-linecap="round"/>
-<path d="M149.032 36.8519L131.839 37.0342M125 37.0852L127.024 37.0852" stroke="#DFDFDF" stroke-width="1.31602" stroke-linecap="round"/>
-<path d="M112.038 66.3444L120.582 67.4102M148.266 70.8634L134.595 69.1581M125.025 67.9644L129.468 68.5186" stroke="#DFDFDF" stroke-width="1.31602" stroke-linecap="round"/>
-<path d="M114.352 23.3947L116.215 23.2387M129.258 22.147L119.433 22.9693M137.388 21.4665L145.18 20.8143" stroke="#DFDFDF" stroke-width="1.31602" stroke-linecap="round"/>
-<path d="M135.832 29.2067L125.981 29.5888M138.724 28.9864L146.537 28.6833" stroke="#DFDFDF" stroke-width="1.31602" stroke-linecap="round"/>
-<path d="M115.114 59.5557L128.942 60.8796M133.782 61.3429L145.19 62.4351" stroke="#DFDFDF" stroke-width="1.31602" stroke-linecap="round"/>
-<path d="M53.4286 42.4286H21.2857C10.6345 42.4286 2.00002 33.7941 2.00002 23.1429C2.00002 12.4917 10.6345 3.85718 21.2857 3.85718C31.9369 3.85718 40.5714 12.4917 40.5714 23.1429C40.5714 28.17 38.648 32.7479 35.4969 36.1807" stroke="#DBDBDB" stroke-width="2.63203" stroke-linecap="round"/>
-<path d="M53.0361 42.4286H42.3571C35.0591 42.4286 29.1428 48.3448 29.1428 55.6429C29.1428 62.9409 35.0591 68.8572 42.3571 68.8572C49.6552 68.8572 55.5714 62.9409 55.5714 55.6429C55.5714 53.8962 55.2325 52.2287 54.6169 50.7025" stroke="#DBDBDB" stroke-width="2.63203" stroke-linecap="round"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M38.4286 51.7144C38.4286 50.9254 39.0682 50.2858 39.8572 50.2858H44.1429C44.829 50.2858 45.4022 50.7695 45.5399 51.4146L47.7105 52.6677C48.3938 53.0622 48.6279 53.9359 48.2334 54.6192C47.3183 56.2042 45.5714 59.2248 45.4609 59.4191C45.1836 59.9063 44.7237 60.2858 44.1429 60.2858H39.8572C39.0682 60.2858 38.4286 59.6462 38.4286 58.8572V51.7144ZM39.8572 51.7144H44.1429V58.8572H39.8572L39.8572 51.7144ZM45.5714 56.3727L46.9962 53.9049L45.5714 53.0823V56.3727Z" fill="#FC6D26"/>
-<path d="M25.5984 15.2331C25.8026 14.471 25.3503 13.6877 24.5882 13.4835C23.8261 13.2793 23.0428 13.7315 22.8386 14.4936L18.4017 31.0524C18.1975 31.8145 18.6497 32.5978 19.4118 32.802C20.1739 33.0062 20.9573 32.5539 21.1615 31.7918L25.5984 15.2331Z" fill="#6E49CB"/>
-<path d="M17.2958 17.8469C17.8537 18.4048 17.8537 19.3093 17.2958 19.8672L14.0203 23.1428L17.2958 26.4183C17.8537 26.9762 17.8537 27.8807 17.2958 28.4386C16.738 28.9965 15.8334 28.9965 15.2755 28.4386L10.9898 24.1529C10.4319 23.595 10.4319 22.6905 10.9898 22.1326L15.2755 17.8469C15.8334 17.289 16.738 17.289 17.2958 17.8469Z" fill="#6E49CB"/>
-<path d="M26.7041 17.8469C26.1462 18.4048 26.1462 19.3093 26.7041 19.8672L29.9797 23.1428L26.7041 26.4183C26.1462 26.9762 26.1462 27.8807 26.7041 28.4386C27.262 28.9965 28.1665 28.9965 28.7244 28.4386L33.0101 24.1529C33.568 23.595 33.568 22.6905 33.0101 22.1326L28.7244 17.8469C28.1665 17.289 27.262 17.289 26.7041 17.8469Z" fill="#6E49CB"/>
-<path d="M50.5714 35.2857L62 35.2857C62.7889 35.2857 63.4285 35.9253 63.4285 36.7143C63.4285 37.5032 62.7889 38.1428 62 38.1428L50.5714 38.1428C49.7824 38.1428 49.1428 37.5032 49.1428 36.7143C49.1428 35.9253 49.7824 35.2857 50.5714 35.2857Z" fill="#FC6D26"/>
-<path d="M50.5714 35.2857L62 35.2857C62.7889 35.2857 63.4285 35.9253 63.4285 36.7143C63.4285 37.5032 62.7889 38.1428 62 38.1428L50.5714 38.1428C49.7824 38.1428 49.1428 37.5032 49.1428 36.7143C49.1428 35.9253 49.7824 35.2857 50.5714 35.2857Z" fill="white" fill-opacity="0.6"/>
-<path d="M70.5713 35.2857L83.4285 35.2857C84.2175 35.2857 84.8571 35.9253 84.8571 36.7143C84.8571 37.5032 84.2175 38.1428 83.4285 38.1428L70.5713 38.1428C69.7824 38.1428 69.1428 37.5032 69.1428 36.7143C69.1428 35.9253 69.7824 35.2857 70.5713 35.2857Z" fill="#FC6D26"/>
-<path d="M76.2856 46.7144L92.1428 46.7144C92.9318 46.7144 93.5714 47.3539 93.5714 48.1429C93.5714 48.9319 92.9318 49.5715 92.1428 49.5715L76.2856 49.5715C75.4967 49.5715 74.8571 48.9319 74.8571 48.1429C74.8571 47.354 75.4967 46.7144 76.2856 46.7144Z" fill="#6E49CB"/>
-<path d="M76.2856 46.7144L92.1428 46.7144C92.9318 46.7144 93.5714 47.3539 93.5714 48.1429C93.5714 48.9319 92.9318 49.5715 92.1428 49.5715L76.2856 49.5715C75.4967 49.5715 74.8571 48.9319 74.8571 48.1429C74.8571 47.354 75.4967 46.7144 76.2856 46.7144Z" fill="white" fill-opacity="0.8"/>
-<path d="M62.7142 40.9999L90 40.9999C90.7889 40.9999 91.4285 41.6395 91.4285 42.4285C91.4285 43.2175 90.7889 43.8571 90 43.8571L62.7142 43.8571C61.9253 43.8571 61.2857 43.2175 61.2857 42.4285C61.2857 41.6395 61.9253 40.9999 62.7142 40.9999Z" fill="#6E49CB"/>
-<path d="M62.7142 40.9999L90 40.9999C90.7889 40.9999 91.4285 41.6395 91.4285 42.4285C91.4285 43.2175 90.7889 43.8571 90 43.8571L62.7142 43.8571C61.9253 43.8571 61.2857 43.2175 61.2857 42.4285C61.2857 41.6395 61.9253 40.9999 62.7142 40.9999Z" fill="white" fill-opacity="0.6"/>
-<path d="M69.8571 29.5714L91.5714 29.5714C92.3603 29.5714 92.9999 30.211 92.9999 31C92.9999 31.789 92.3603 32.4286 91.5714 32.4286L69.8571 32.4286C69.0681 32.4286 68.4285 31.789 68.4285 31C68.4285 30.211 69.0681 29.5714 69.8571 29.5714Z" fill="#6E49CB"/>
-<path d="M69.8571 29.5714L91.5714 29.5714C92.3603 29.5714 92.9999 30.211 92.9999 31C92.9999 31.789 92.3603 32.4286 91.5714 32.4286L69.8571 32.4286C69.0681 32.4286 68.4285 31.789 68.4285 31C68.4285 30.211 69.0681 29.5714 69.8571 29.5714Z" fill="white" fill-opacity="0.8"/>
-<circle cx="107.714" cy="38.8571" r="17.8571" stroke="#6E49CB" stroke-width="2.63203"/>
-<circle cx="107.714" cy="38.8573" r="13.5714" fill="#6E49CB"/>
-<circle cx="107.714" cy="38.8573" r="13.5714" fill="white" fill-opacity="0.9"/>
-<path d="M111.431 35.0867L115.367 39.0232L111.431 42.9597C111.016 43.3744 110.344 43.3744 109.929 42.9597C109.515 42.545 109.515 41.8727 109.929 41.458L111.302 40.0851H101.123C100.537 40.0851 100.061 39.6097 100.061 39.0232C100.061 38.4367 100.537 37.9613 101.123 37.9613H111.302L109.929 36.5884C109.515 36.1737 109.515 35.5014 109.929 35.0867C110.344 34.672 111.016 34.672 111.431 35.0867Z" fill="#6E49CB"/>
-</g>
-<defs>
-<clipPath id="clip0">
-<rect width="169" height="84" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/app/assets/javascripts/projects/experiment_new_project_creation/index.js b/app/assets/javascripts/projects/experiment_new_project_creation/index.js
deleted file mode 100644
index ea686d4e1e8..00000000000
--- a/app/assets/javascripts/projects/experiment_new_project_creation/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import Vue from 'vue';
-import NewProjectCreationApp from './components/app.vue';
-
-export default function initNewProjectCreation(el, props) {
-  const { pushToCreateProjectCommand, workingWithProjectsHelpPath } = el.dataset;
-
-  return new Vue({
-    el,
-    components: {
-      NewProjectCreationApp,
-    },
-    provide: {
-      workingWithProjectsHelpPath,
-      pushToCreateProjectCommand,
-    },
-    render(h) {
-      return h(NewProjectCreationApp, { props });
-    },
-  });
-}
diff --git a/app/assets/javascripts/projects/pipelines/charts/components/app.vue b/app/assets/javascripts/projects/pipelines/charts/components/app.vue
index 8d005373508..25bacc1cc4a 100644
--- a/app/assets/javascripts/projects/pipelines/charts/components/app.vue
+++ b/app/assets/javascripts/projects/pipelines/charts/components/app.vue
@@ -9,9 +9,8 @@ export default {
     GlTab,
     PipelineCharts,
     DeploymentFrequencyCharts: () =>
-      import('ee_component/projects/pipelines/charts/components/deployment_frequency_charts.vue'),
-    LeadTimeCharts: () =>
-      import('ee_component/projects/pipelines/charts/components/lead_time_charts.vue'),
+      import('ee_component/dora/components/deployment_frequency_charts.vue'),
+    LeadTimeCharts: () => import('ee_component/dora/components/lead_time_charts.vue'),
   },
   inject: {
     shouldRenderDoraCharts: {
@@ -29,7 +28,7 @@ export default {
       const chartsToShow = ['pipelines'];
 
       if (this.shouldRenderDoraCharts) {
-        chartsToShow.push('deployments', 'lead-time');
+        chartsToShow.push('deployment-frequency', 'lead-time');
       }
 
       return chartsToShow;
@@ -62,10 +61,10 @@ export default {
         <pipeline-charts />
       </gl-tab>
       <template v-if="shouldRenderDoraCharts">
-        <gl-tab :title="__('Deployments')">
+        <gl-tab :title="__('Deployment frequency')">
           <deployment-frequency-charts />
         </gl-tab>
-        <gl-tab :title="__('Lead Time')">
+        <gl-tab :title="__('Lead time')">
           <lead-time-charts />
         </gl-tab>
       </template>
diff --git a/app/assets/javascripts/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue b/app/assets/javascripts/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue
deleted file mode 100644
index ad3e6713e45..00000000000
--- a/app/assets/javascripts/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<script>
-import { GlAreaChart } from '@gitlab/ui/dist/charts';
-import ResizableChartContainer from '~/vue_shared/components/resizable_chart/resizable_chart_container.vue';
-import { CHART_CONTAINER_HEIGHT } from '../constants';
-
-export default {
-  name: 'CiCdAnalyticsAreaChart',
-  components: {
-    GlAreaChart,
-    ResizableChartContainer,
-  },
-  props: {
-    chartData: {
-      type: Array,
-      required: true,
-    },
-    areaChartOptions: {
-      type: Object,
-      required: true,
-    },
-  },
-  chartContainerHeight: CHART_CONTAINER_HEIGHT,
-};
-</script>
-<template>
-  <div class="gl-mt-3">
-    <p>
-      <slot></slot>
-    </p>
-    <resizable-chart-container>
-      <gl-area-chart
-        slot-scope="{ width }"
-        v-bind="$attrs"
-        :width="width"
-        :height="$options.chartContainerHeight"
-        :data="chartData"
-        :include-legend-avg-max="false"
-        :option="areaChartOptions"
-      >
-        <slot slot="tooltip-title" name="tooltip-title"></slot>
-        <slot slot="tooltip-content" name="tooltip-content"></slot>
-      </gl-area-chart>
-    </resizable-chart-container>
-  </div>
-</template>
diff --git a/app/assets/javascripts/projects/pipelines/charts/components/ci_cd_analytics_charts.vue b/app/assets/javascripts/projects/pipelines/charts/components/ci_cd_analytics_charts.vue
deleted file mode 100644
index f4fd57e4cdc..00000000000
--- a/app/assets/javascripts/projects/pipelines/charts/components/ci_cd_analytics_charts.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<script>
-import { GlSegmentedControl } from '@gitlab/ui';
-import { s__, sprintf } from '~/locale';
-import CiCdAnalyticsAreaChart from './ci_cd_analytics_area_chart.vue';
-
-export default {
-  components: {
-    GlSegmentedControl,
-    CiCdAnalyticsAreaChart,
-  },
-  props: {
-    charts: {
-      required: true,
-      type: Array,
-    },
-    chartOptions: {
-      required: true,
-      type: Object,
-    },
-  },
-  data() {
-    return {
-      selectedChart: 0,
-    };
-  },
-  computed: {
-    chartRanges() {
-      return this.charts.map(({ title }, index) => ({ text: title, value: index }));
-    },
-    chart() {
-      return this.charts[this.selectedChart];
-    },
-    dateRange() {
-      return sprintf(s__('CiCdAnalytics|Date range: %{range}'), { range: this.chart.range });
-    },
-  },
-};
-</script>
-<template>
-  <div>
-    <gl-segmented-control v-model="selectedChart" :options="chartRanges" class="gl-mb-4" />
-    <ci-cd-analytics-area-chart
-      v-if="chart"
-      v-bind="$attrs"
-      :chart-data="chart.data"
-      :area-chart-options="chartOptions"
-    >
-      {{ dateRange }}
-
-      <slot slot="tooltip-title" name="tooltip-title"></slot>
-      <slot slot="tooltip-content" name="tooltip-content"></slot>
-    </ci-cd-analytics-area-chart>
-  </div>
-</template>
diff --git a/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue b/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue
index 6a963616224..1c4413bef71 100644
--- a/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue
+++ b/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue
@@ -4,6 +4,7 @@ import { GlColumnChart } from '@gitlab/ui/dist/charts';
 import dateFormat from 'dateformat';
 import { getDateInPast } from '~/lib/utils/datetime_utility';
 import { __, s__, sprintf } from '~/locale';
+import CiCdAnalyticsCharts from '~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue';
 import {
   DEFAULT,
   CHART_CONTAINER_HEIGHT,
@@ -21,7 +22,6 @@ import {
 } from '../constants';
 import getPipelineCountByStatus from '../graphql/queries/get_pipeline_count_by_status.query.graphql';
 import getProjectPipelineStatistics from '../graphql/queries/get_project_pipeline_statistics.query.graphql';
-import CiCdAnalyticsCharts from './ci_cd_analytics_charts.vue';
 import StatisticsList from './statistics_list.vue';
 
 const defaultAnalyticsValues = {
@@ -301,7 +301,7 @@ export default {
         <statistics-list v-else :counts="formattedCounts" />
       </div>
       <div v-if="!loading" class="col-md-6">
-        <strong>{{ __('Duration for the last 30 commits') }}</strong>
+        <strong>{{ __('Pipeline durations for the last 30 commits') }}</strong>
         <gl-column-chart
           :height="$options.chartContainerHeight"
           :option="$options.timesChartOptions"