Add latest changes from gitlab-org/gitlab@14-8-stable-eev14.8.0-rc42

34 files changed, 242 insertions, 238 deletions

diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/details_header_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/details_header_spec.js
index 5278e730ec9..f4c22d9bfa7 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/details_header_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/details_header_spec.js
@@ -1,6 +1,7 @@
 import { GlDropdownItem, GlIcon, GlDropdown } from '@gitlab/ui';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
+import { nextTick } from 'vue';
 import { useFakeDate } from 'helpers/fake_date';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
@@ -54,8 +55,8 @@ describe('Details Header', () => {
 
   const waitForMetadataItems = async () => {
     // Metadata items are printed by a loop in the title-area and it takes two ticks for them to be available
-    await wrapper.vm.$nextTick();
-    await wrapper.vm.$nextTick();
+    await nextTick();
+    await nextTick();
   };
 
   const mountComponent = ({
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_list_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_list_spec.js
index 0dcf988c814..ef6c4a1fa32 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_list_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_list_spec.js
@@ -1,5 +1,5 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
 import { GlEmptyState } from '@gitlab/ui';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
@@ -8,7 +8,7 @@ import { stripTypenames } from 'helpers/graphql_helpers';
 
 import component from '~/packages_and_registries/container_registry/explorer/components/details_page/tags_list.vue';
 import TagsListRow from '~/packages_and_registries/container_registry/explorer/components/details_page/tags_list_row.vue';
-import TagsLoader from '~/packages_and_registries/container_registry/explorer/components/details_page/tags_loader.vue';
+import TagsLoader from '~/packages_and_registries/shared/components/tags_loader.vue';
 import RegistryList from '~/packages_and_registries/shared/components/registry_list.vue';
 import PersistedSearch from '~/packages_and_registries/shared/components/persisted_search.vue';
 import getContainerRepositoryTagsQuery from '~/packages_and_registries/container_registry/explorer/graphql/queries/get_container_repository_tags.query.graphql';
@@ -22,8 +22,6 @@ import {
 import { FILTERED_SEARCH_TERM } from '~/packages_and_registries/shared/constants';
 import { tagsMock, imageTagsMock, tagsPageInfo } from '../../mock_data';
 
-const localVue = createLocalVue();
-
 describe('Tags List', () => {
   let wrapper;
   let apolloProvider;
@@ -50,13 +48,12 @@ describe('Tags List', () => {
   };
 
   const mountComponent = ({ propsData = { isMobile: false, id: 1 } } = {}) => {
-    localVue.use(VueApollo);
+    Vue.use(VueApollo);
 
     const requestHandlers = [[getContainerRepositoryTagsQuery, resolver]];
 
     apolloProvider = createMockApollo(requestHandlers);
     wrapper = shallowMount(component, {
-      localVue,
       apolloProvider,
       propsData,
       stubs: { RegistryList },
@@ -108,6 +105,7 @@ describe('Tags List', () => {
     describe('events', () => {
       it('prev-page fetch the previous page', async () => {
         findRegistryList().vm.$emit('prev-page');
+        await waitForPromises();
 
         expect(resolver).toHaveBeenCalledWith({
           first: null,
@@ -119,8 +117,9 @@ describe('Tags List', () => {
         });
       });
 
-      it('next-page fetch the previous page', () => {
+      it('next-page fetch the previous page', async () => {
         findRegistryList().vm.$emit('next-page');
+        await waitForPromises();
 
         expect(resolver).toHaveBeenCalledWith({
           after: tagsPageInfo.endCursor,
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_loader_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_loader_spec.js
index 060dc9dc5f3..e5df260a260 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_loader_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_loader_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import component from '~/packages_and_registries/container_registry/explorer/components/details_page/tags_loader.vue';
+import component from '~/packages_and_registries/shared/components/tags_loader.vue';
 import { GlSkeletonLoader } from '../../stubs';
 
 describe('TagsLoader component', () => {
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/cli_commands_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/cli_commands_spec.js
index 4039fba869b..7727bf167fe 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/cli_commands_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/cli_commands_spec.js
@@ -1,7 +1,8 @@
 import { GlDropdown } from '@gitlab/ui';
-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
-import QuickstartDropdown from '~/packages_and_registries/container_registry/explorer/components/list_page/cli_commands.vue';
+import QuickstartDropdown from '~/packages_and_registries/shared/components/cli_commands.vue';
 import {
   QUICK_START,
   LOGIN_COMMAND_LABEL,
@@ -16,28 +17,18 @@ import CodeInstruction from '~/vue_shared/components/registry/code_instruction.v
 
 import { dockerCommands } from '../../mock_data';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('cli_commands', () => {
   let wrapper;
 
-  const config = {
-    repositoryUrl: 'foo',
-    registryHostUrlWithPort: 'bar',
-  };
-
   const findDropdownButton = () => wrapper.find(GlDropdown);
   const findCodeInstruction = () => wrapper.findAll(CodeInstruction);
 
   const mountComponent = () => {
     wrapper = mount(QuickstartDropdown, {
-      localVue,
-      provide() {
-        return {
-          config,
-          ...dockerCommands,
-        };
+      propsData: {
+        ...dockerCommands,
       },
     });
   };
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/group_empty_state_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/group_empty_state_spec.js
index 027cdf732bc..d2086943e4f 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/group_empty_state_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/group_empty_state_spec.js
@@ -1,11 +1,11 @@
 import { GlSprintf } from '@gitlab/ui';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import groupEmptyState from '~/packages_and_registries/container_registry/explorer/components/list_page/group_empty_state.vue';
 import { GlEmptyState } from '../../stubs';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('Registry Group Empty state', () => {
   let wrapper;
@@ -16,7 +16,6 @@ describe('Registry Group Empty state', () => {
 
   beforeEach(() => {
     wrapper = shallowMount(groupEmptyState, {
-      localVue,
       stubs: {
         GlEmptyState,
         GlSprintf,
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/project_empty_state_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/project_empty_state_spec.js
index 21748ae2813..8cfa8128021 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/project_empty_state_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/project_empty_state_spec.js
@@ -1,12 +1,12 @@
 import { GlSprintf } from '@gitlab/ui';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import projectEmptyState from '~/packages_and_registries/container_registry/explorer/components/list_page/project_empty_state.vue';
 import { dockerCommands } from '../../mock_data';
 import { GlEmptyState } from '../../stubs';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('Registry Project Empty state', () => {
   let wrapper;
@@ -21,7 +21,6 @@ describe('Registry Project Empty state', () => {
 
   beforeEach(() => {
     wrapper = shallowMount(projectEmptyState, {
-      localVue,
       stubs: {
         GlEmptyState,
         GlSprintf,
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/registry_header_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/registry_header_spec.js
index 92cfeb7633e..c91a9c0f0fb 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/registry_header_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/registry_header_spec.js
@@ -1,5 +1,6 @@
 import { GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import Component from '~/packages_and_registries/container_registry/explorer/components/list_page/registry_header.vue';
 import {
   CONTAINER_REGISTRY_TITLE,
@@ -21,7 +22,7 @@ describe('registry_header', () => {
   const findImagesCountSubHeader = () => wrapper.find('[data-testid="images-count"]');
   const findExpirationPolicySubHeader = () => wrapper.find('[data-testid="expiration-policy"]');
 
-  const mountComponent = (propsData, slots) => {
+  const mountComponent = async (propsData, slots) => {
     wrapper = shallowMount(Component, {
       stubs: {
         GlSprintf,
@@ -30,7 +31,7 @@ describe('registry_header', () => {
       propsData,
       slots,
     });
-    return wrapper.vm.$nextTick();
+    await nextTick();
   };
 
   afterEach(() => {
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/pages/details_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/pages/details_spec.js
index 7992bead60a..c602b37c3b5 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/pages/details_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/pages/details_spec.js
@@ -1,7 +1,8 @@
 import { GlKeysetPagination, GlEmptyState } from '@gitlab/ui';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
-import { nextTick } from 'vue';
+
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import axios from '~/lib/utils/axios_utils';
@@ -11,7 +12,7 @@ import DetailsHeader from '~/packages_and_registries/container_registry/explorer
 import PartialCleanupAlert from '~/packages_and_registries/container_registry/explorer/components/details_page/partial_cleanup_alert.vue';
 import StatusAlert from '~/packages_and_registries/container_registry/explorer/components/details_page/status_alert.vue';
 import TagsList from '~/packages_and_registries/container_registry/explorer/components/details_page/tags_list.vue';
-import TagsLoader from '~/packages_and_registries/container_registry/explorer/components/details_page/tags_loader.vue';
+import TagsLoader from '~/packages_and_registries/shared/components/tags_loader.vue';
 
 import {
   UNFINISHED_STATUS,
@@ -39,8 +40,6 @@ import {
 } from '../mock_data';
 import { DeleteModal } from '../stubs';
 
-const localVue = createLocalVue();
-
 describe('Details Page', () => {
   let wrapper;
   let apolloProvider;
@@ -85,7 +84,7 @@ describe('Details Page', () => {
     options,
     config = defaultConfig,
   } = {}) => {
-    localVue.use(VueApollo);
+    Vue.use(VueApollo);
 
     const requestHandlers = [
       [getContainerRepositoryDetailsQuery, resolver],
@@ -96,7 +95,6 @@ describe('Details Page', () => {
     apolloProvider = createMockApollo(requestHandlers);
 
     wrapper = shallowMount(component, {
-      localVue,
       apolloProvider,
       stubs: {
         DeleteModal,
@@ -522,7 +520,7 @@ describe('Details Page', () => {
 
       findDeleteImage().vm.$emit('start');
 
-      await nextTick();
+      await waitForPromises();
 
       expect(findTagsLoader().exists()).toBe(true);
 
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/pages/list_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/pages/list_spec.js
index 051d1e2a169..bd126fe532d 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/pages/list_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/pages/list_spec.js
@@ -1,6 +1,7 @@
 import { GlSkeletonLoader, GlSprintf, GlAlert } from '@gitlab/ui';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
+
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -8,7 +9,7 @@ import getContainerRepositoriesQuery from 'shared_queries/container_registry/get
 import CleanupPolicyEnabledAlert from '~/packages_and_registries/shared/components/cleanup_policy_enabled_alert.vue';
 import { FILTERED_SEARCH_TERM } from '~/packages_and_registries/shared/constants';
 import DeleteImage from '~/packages_and_registries/container_registry/explorer/components/delete_image.vue';
-import CliCommands from '~/packages_and_registries/container_registry/explorer/components/list_page/cli_commands.vue';
+import CliCommands from '~/packages_and_registries/shared/components/cli_commands.vue';
 import GroupEmptyState from '~/packages_and_registries/container_registry/explorer/components/list_page/group_empty_state.vue';
 import ImageList from '~/packages_and_registries/container_registry/explorer/components/list_page/image_list.vue';
 import ProjectEmptyState from '~/packages_and_registries/container_registry/explorer/components/list_page/project_empty_state.vue';
@@ -38,8 +39,6 @@ import {
 } from '../mock_data';
 import { GlModal, GlEmptyState } from '../stubs';
 
-const localVue = createLocalVue();
-
 describe('List Page', () => {
   let wrapper;
   let apolloProvider;
@@ -75,7 +74,7 @@ describe('List Page', () => {
     config = { isGroupPage: false },
     query = {},
   } = {}) => {
-    localVue.use(VueApollo);
+    Vue.use(VueApollo);
 
     const requestHandlers = [
       [getContainerRepositoriesQuery, resolver],
@@ -86,7 +85,6 @@ describe('List Page', () => {
     apolloProvider = createMockApollo(requestHandlers);
 
     wrapper = shallowMount(component, {
-      localVue,
       apolloProvider,
       stubs: {
         GlModal,
@@ -307,15 +305,8 @@ describe('List Page', () => {
           await selectImageForDeletion();
 
           findDeleteModal().vm.$emit('primary');
-          await waitForApolloRequestRender();
-
-          expect(wrapper.vm.itemToDelete).toEqual(deletedContainerRepository);
-
-          const updatedImage = findImageList()
-            .props('images')
-            .find((i) => i.id === deletedContainerRepository.id);
 
-          expect(updatedImage.status).toBe(deletedContainerRepository.status);
+          expect(mutationResolver).toHaveBeenCalledWith({ id: deletedContainerRepository.id });
         });
 
         it('should show a success alert when delete request is successful', async () => {
@@ -361,7 +352,7 @@ describe('List Page', () => {
 
         findRegistrySearch().vm.$emit('filter:submit');
 
-        await nextTick();
+        await waitForPromises();
       };
 
       it('has a search box element', async () => {
@@ -429,7 +420,7 @@ describe('List Page', () => {
         await waitForApolloRequestRender();
 
         findImageList().vm.$emit('prev-page');
-        await nextTick();
+        await waitForPromises();
 
         expect(resolver).toHaveBeenCalledWith(
           expect.objectContaining({ before: pageInfo.startCursor }),
@@ -449,7 +440,7 @@ describe('List Page', () => {
         await waitForApolloRequestRender();
 
         findImageList().vm.$emit('next-page');
-        await nextTick();
+        await waitForPromises();
 
         expect(resolver).toHaveBeenCalledWith(
           expect.objectContaining({ after: pageInfo.endCursor }),
@@ -471,8 +462,9 @@ describe('List Page', () => {
     });
 
     it('contains a description with the path of the item to delete', async () => {
+      await waitForPromises();
       findImageList().vm.$emit('delete', { path: 'foo' });
-      await nextTick();
+      await waitForPromises();
       expect(findDeleteModal().html()).toContain('foo');
     });
   });
diff --git a/spec/frontend/packages_and_registries/dependency_proxy/app_spec.js b/spec/frontend/packages_and_registries/dependency_proxy/app_spec.js
index 44a7186904d..79894e25889 100644
--- a/spec/frontend/packages_and_registries/dependency_proxy/app_spec.js
+++ b/spec/frontend/packages_and_registries/dependency_proxy/app_spec.js
@@ -5,7 +5,7 @@ import {
   GlSprintf,
   GlEmptyState,
 } from '@gitlab/ui';
-import { createLocalVue } from '@vue/test-utils';
+import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
@@ -21,8 +21,6 @@ import getDependencyProxyDetailsQuery from '~/packages_and_registries/dependency
 
 import { proxyDetailsQuery, proxyData, pagination, proxyManifests } from './mock_data';
 
-const localVue = createLocalVue();
-
 describe('DependencyProxyApp', () => {
   let wrapper;
   let apolloProvider;
@@ -35,14 +33,13 @@ describe('DependencyProxyApp', () => {
   };
 
   function createComponent({ provide = provideDefaults } = {}) {
-    localVue.use(VueApollo);
+    Vue.use(VueApollo);
 
     const requestHandlers = [[getDependencyProxyDetailsQuery, resolver]];
 
     apolloProvider = createMockApollo(requestHandlers);
 
     wrapper = shallowMountExtended(DependencyProxyApp, {
-      localVue,
       apolloProvider,
       provide,
       stubs: {
@@ -195,8 +192,9 @@ describe('DependencyProxyApp', () => {
               });
             });
 
-            it('prev-page event on list fetches the previous page', () => {
+            it('prev-page event on list fetches the previous page', async () => {
               findManifestList().vm.$emit('prev-page');
+              await waitForPromises();
 
               expect(resolver).toHaveBeenCalledWith({
                 before: pagination().startCursor,
@@ -206,8 +204,9 @@ describe('DependencyProxyApp', () => {
               });
             });
 
-            it('next-page event on list fetches the next page', () => {
+            it('next-page event on list fetches the next page', async () => {
               findManifestList().vm.$emit('next-page');
+              await waitForPromises();
 
               expect(resolver).toHaveBeenCalledWith({
                 after: pagination().endCursor,
diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/app_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/app_spec.js
index 2868af84181..69c78e64e22 100644
--- a/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/app_spec.js
+++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/app_spec.js
@@ -1,6 +1,6 @@
 import { GlEmptyState } from '@gitlab/ui';
-import { mount, createLocalVue } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import { mount } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
 import stubChildren from 'helpers/stub_children';
@@ -19,8 +19,7 @@ import Tracking from '~/tracking';
 
 import { mavenPackage, mavenFiles, npmPackage } from '../../mock_data';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 useMockLocationHelper();
 
@@ -60,7 +59,6 @@ describe('PackagesApp', () => {
     });
 
     wrapper = mount(PackagesApp, {
-      localVue,
       store,
       stubs: {
         ...stubChildren(PackagesApp),
diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/details_title_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/details_title_spec.js
index 24bd80ba80c..b504f7489ab 100644
--- a/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/details_title_spec.js
+++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/details_title_spec.js
@@ -1,17 +1,20 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import component from '~/packages_and_registries/infrastructure_registry/details/components/details_title.vue';
 import TitleArea from '~/vue_shared/components/registry/title_area.vue';
 import { terraformModule, mavenFiles, npmPackage } from '../../mock_data';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('PackageTitle', () => {
   let wrapper;
   let store;
 
-  function createComponent({ packageFiles = mavenFiles, packageEntity = terraformModule } = {}) {
+  async function createComponent({
+    packageFiles = mavenFiles,
+    packageEntity = terraformModule,
+  } = {}) {
     store = new Vuex.Store({
       state: {
         packageEntity,
@@ -23,13 +26,12 @@ describe('PackageTitle', () => {
     });
 
     wrapper = shallowMount(component, {
-      localVue,
       store,
       stubs: {
         TitleArea,
       },
     });
-    return wrapper.vm.$nextTick();
+    await nextTick();
   }
 
   const findTitleArea = () => wrapper.findComponent(TitleArea);
diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/terraform_installation_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/terraform_installation_spec.js
index 6ff4a4c51ef..78c1b840dbc 100644
--- a/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/terraform_installation_spec.js
+++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/terraform_installation_spec.js
@@ -1,11 +1,11 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import TerraformInstallation from '~/packages_and_registries/infrastructure_registry/details/components/terraform_installation.vue';
 import CodeInstructions from '~/vue_shared/components/registry/code_instruction.vue';
 import { terraformModule as packageEntity } from '../../mock_data';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('TerraformInstallation', () => {
   let wrapper;
@@ -22,7 +22,6 @@ describe('TerraformInstallation', () => {
 
   function createComponent() {
     wrapper = shallowMount(TerraformInstallation, {
-      localVue,
       store,
     });
   }
diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/__snapshots__/packages_list_app_spec.js.snap b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/__snapshots__/packages_list_app_spec.js.snap
index 7cdf21dde46..d82af8f9e63 100644
--- a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/__snapshots__/packages_list_app_spec.js.snap
+++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/__snapshots__/packages_list_app_spec.js.snap
@@ -3,6 +3,7 @@
 exports[`packages_list_app renders 1`] = `
 <div>
   <infrastructure-title-stub
+    count="1"
     helpurl="foo"
   />
    
@@ -37,8 +38,8 @@ exports[`packages_list_app renders 1`] = `
             class="gl-font-size-h-display gl-line-height-36 h4"
           >
             
-        There are no packages yet
-      
+          There are no packages yet
+        
           </h1>
            
           <p
diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_search_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_search_spec.js
index b519ab00d06..e5230417c78 100644
--- a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_search_spec.js
+++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_search_spec.js
@@ -1,11 +1,11 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import component from '~/packages_and_registries/infrastructure_registry/list/components/infrastructure_search.vue';
 import RegistrySearch from '~/vue_shared/components/registry/registry_search.vue';
 import UrlSync from '~/vue_shared/components/url_sync.vue';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('Infrastructure Search', () => {
   let wrapper;
@@ -48,7 +48,6 @@ describe('Infrastructure Search', () => {
     createStore(isGroupPage);
 
     wrapper = shallowMount(component, {
-      localVue,
       store,
       stubs: {
         UrlSync,
diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_title_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_title_spec.js
index b0e586f189a..72d08d5683b 100644
--- a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_title_spec.js
+++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_title_spec.js
@@ -10,7 +10,9 @@ describe('Infrastructure Title', () => {
   const findTitleArea = () => wrapper.find(TitleArea);
   const findMetadataItem = () => wrapper.find(MetadataItem);
 
-  const mountComponent = (propsData = { helpUrl: 'foo' }) => {
+  const exampleProps = { helpUrl: 'http://example.gitlab.com/help' };
+
+  const mountComponent = (propsData = exampleProps) => {
     wrapper = shallowMount(component, {
       store,
       propsData,
@@ -26,23 +28,36 @@ describe('Infrastructure Title', () => {
   });
 
   describe('title area', () => {
-    it('exists', () => {
+    beforeEach(() => {
       mountComponent();
+    });
 
+    it('exists', () => {
       expect(findTitleArea().exists()).toBe(true);
     });
 
-    it('has the correct props', () => {
-      mountComponent();
+    it('has the correct title', () => {
+      expect(findTitleArea().props('title')).toBe('Infrastructure Registry');
+    });
+
+    describe('with no modules', () => {
+      it('has no info message', () => {
+        expect(findTitleArea().props('infoMessages')).toStrictEqual([]);
+      });
+    });
+
+    describe('with at least one module', () => {
+      beforeEach(() => {
+        mountComponent({ ...exampleProps, count: 1 });
+      });
 
-      expect(findTitleArea().props()).toMatchObject({
-        title: 'Infrastructure Registry',
-        infoMessages: [
+      it('has an info message', () => {
+        expect(findTitleArea().props('infoMessages')).toStrictEqual([
           {
             text: 'Publish and share your modules. %{docLinkStart}More information%{docLinkEnd}',
-            link: 'foo',
+            link: exampleProps.helpUrl,
           },
-        ],
+        ]);
       });
     });
   });
@@ -51,15 +66,15 @@ describe('Infrastructure Title', () => {
     count        | exist    | text
     ${null}      | ${false} | ${''}
     ${undefined} | ${false} | ${''}
-    ${0}         | ${true}  | ${'0 Modules'}
+    ${0}         | ${false} | ${''}
     ${1}         | ${true}  | ${'1 Module'}
     ${2}         | ${true}  | ${'2 Modules'}
   `('when count is $count metadata item', ({ count, exist, text }) => {
     beforeEach(() => {
-      mountComponent({ count, helpUrl: 'foo' });
+      mountComponent({ ...exampleProps, count });
     });
 
-    it(`is ${exist} that it exists`, () => {
+    it(exist ? 'exists' : 'does not exist', () => {
       expect(findMetadataItem().exists()).toBe(exist);
     });
 
diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_app_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_app_spec.js
index cad75d2a858..31616e0b2f5 100644
--- a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_app_spec.js
+++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_app_spec.js
@@ -1,5 +1,6 @@
 import { GlEmptyState, GlSprintf, GlLink } from '@gitlab/ui';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import setWindowLocation from 'helpers/set_window_location_helper';
 import createFlash from '~/flash';
@@ -17,8 +18,7 @@ import InfrastructureSearch from '~/packages_and_registries/infrastructure_regis
 jest.mock('~/lib/utils/common_utils');
 jest.mock('~/flash');
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('packages_list_app', () => {
   let wrapper;
@@ -35,7 +35,7 @@ describe('packages_list_app', () => {
   const findListComponent = () => wrapper.find(PackageList);
   const findInfrastructureSearch = () => wrapper.find(InfrastructureSearch);
 
-  const createStore = (filter = []) => {
+  const createStore = ({ filter = [], packageCount = 0 } = {}) => {
     store = new Vuex.Store({
       state: {
         isLoading: false,
@@ -46,6 +46,9 @@ describe('packages_list_app', () => {
           packageHelpUrl: 'foo',
         },
         filter,
+        pagination: {
+          total: packageCount,
+        },
       },
     });
     store.dispatch = jest.fn();
@@ -53,7 +56,6 @@ describe('packages_list_app', () => {
 
   const mountComponent = (provide) => {
     wrapper = shallowMount(PackageListApp, {
-      localVue,
       store,
       stubs: {
         GlEmptyState,
@@ -69,6 +71,7 @@ describe('packages_list_app', () => {
   beforeEach(() => {
     createStore();
     jest.spyOn(packageUtils, 'getQueryParams').mockReturnValue({});
+    mountComponent();
   });
 
   afterEach(() => {
@@ -76,30 +79,26 @@ describe('packages_list_app', () => {
   });
 
   it('renders', () => {
+    createStore({ packageCount: 1 });
     mountComponent();
+
     expect(wrapper.element).toMatchSnapshot();
   });
 
-  it('call requestPackagesList on page:changed', () => {
-    mountComponent();
-    store.dispatch.mockClear();
-
+  it('calls requestPackagesList on page:changed', () => {
     const list = findListComponent();
     list.vm.$emit('page:changed', 1);
     expect(store.dispatch).toHaveBeenCalledWith('requestPackagesList', { page: 1 });
   });
 
-  it('call requestDeletePackage on package:delete', () => {
-    mountComponent();
-
+  it('calls requestDeletePackage on package:delete', () => {
     const list = findListComponent();
     list.vm.$emit('package:delete', 'foo');
+
     expect(store.dispatch).toHaveBeenCalledWith('requestDeletePackage', 'foo');
   });
 
-  it('does call requestPackagesList only one time on render', () => {
-    mountComponent();
-
+  it('calls requestPackagesList only once on render', () => {
     expect(store.dispatch).toHaveBeenCalledTimes(3);
     expect(store.dispatch).toHaveBeenNthCalledWith(1, 'setSorting', expect.any(Object));
     expect(store.dispatch).toHaveBeenNthCalledWith(2, 'setFilter', expect.any(Array));
@@ -114,9 +113,12 @@ describe('packages_list_app', () => {
       orderBy: 'created',
     };
 
-    it('calls setSorting with the query string based sorting', () => {
+    beforeEach(() => {
+      createStore();
       jest.spyOn(packageUtils, 'getQueryParams').mockReturnValue(defaultQueryParamsMock);
+    });
 
+    it('calls setSorting with the query string based sorting', () => {
       mountComponent();
 
       expect(store.dispatch).toHaveBeenNthCalledWith(1, 'setSorting', {
@@ -126,8 +128,6 @@ describe('packages_list_app', () => {
     });
 
     it('calls setFilter with the query string based filters', () => {
-      jest.spyOn(packageUtils, 'getQueryParams').mockReturnValue(defaultQueryParamsMock);
-
       mountComponent();
 
       expect(store.dispatch).toHaveBeenNthCalledWith(2, 'setFilter', [
@@ -151,8 +151,6 @@ describe('packages_list_app', () => {
 
   describe('empty state', () => {
     it('generate the correct empty list link', () => {
-      mountComponent();
-
       const link = findListComponent().find(GlLink);
 
       expect(link.attributes('href')).toBe(emptyListHelpUrl);
@@ -160,8 +158,6 @@ describe('packages_list_app', () => {
     });
 
     it('includes the right content on the default tab', () => {
-      mountComponent();
-
       const heading = findEmptyState().find('h1');
 
       expect(heading.text()).toBe('There are no packages yet');
@@ -170,7 +166,7 @@ describe('packages_list_app', () => {
 
   describe('filter without results', () => {
     beforeEach(() => {
-      createStore([{ type: 'something' }]);
+      createStore({ filter: [{ type: 'something' }] });
       mountComponent();
     });
 
@@ -182,20 +178,30 @@ describe('packages_list_app', () => {
     });
   });
 
-  describe('Search', () => {
-    it('exists', () => {
-      mountComponent();
-
-      expect(findInfrastructureSearch().exists()).toBe(true);
+  describe('search', () => {
+    describe('with no packages', () => {
+      it('does not exist', () => {
+        expect(findInfrastructureSearch().exists()).toBe(false);
+      });
     });
 
-    it('on update fetches data from the store', () => {
-      mountComponent();
-      store.dispatch.mockClear();
+    describe('with packages', () => {
+      beforeEach(() => {
+        createStore({ packageCount: 1 });
+        mountComponent();
+      });
 
-      findInfrastructureSearch().vm.$emit('update');
+      it('exists', () => {
+        expect(findInfrastructureSearch().exists()).toBe(true);
+      });
 
-      expect(store.dispatch).toHaveBeenCalledWith('requestPackagesList');
+      it('on update fetches data from the store', () => {
+        store.dispatch.mockClear();
+
+        findInfrastructureSearch().vm.$emit('update');
+
+        expect(store.dispatch).toHaveBeenCalledWith('requestPackagesList');
+      });
     });
   });
 
diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_spec.js
index 26569f20e94..fed82653016 100644
--- a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_spec.js
+++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_spec.js
@@ -1,5 +1,6 @@
 import { GlTable, GlPagination, GlModal } from '@gitlab/ui';
-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
 import { last } from 'lodash';
 import Vuex from 'vuex';
 import stubChildren from 'helpers/stub_children';
@@ -11,8 +12,7 @@ import { TRACK_CATEGORY } from '~/packages_and_registries/infrastructure_registr
 import Tracking from '~/tracking';
 import { packageList } from '../../mock_data';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('packages_list', () => {
   let wrapper;
@@ -61,7 +61,6 @@ describe('packages_list', () => {
     createStore(isGroupPage, packages, isLoading);
 
     wrapper = mount(PackagesList, {
-      localVue,
       store,
       stubs: {
         ...stubChildren(PackagesList),
@@ -121,16 +120,15 @@ describe('packages_list', () => {
       mountComponent();
     });
 
-    it('setItemToBeDeleted sets itemToBeDeleted and open the modal', () => {
+    it('setItemToBeDeleted sets itemToBeDeleted and open the modal', async () => {
       const mockModalShow = jest.spyOn(wrapper.vm.$refs.packageListDeleteModal, 'show');
       const item = last(wrapper.vm.list);
 
       findPackagesListRow().vm.$emit('packageToDelete', item);
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.vm.itemToBeDeleted).toEqual(item);
-        expect(mockModalShow).toHaveBeenCalled();
-      });
+      await nextTick();
+      expect(wrapper.vm.itemToBeDeleted).toEqual(item);
+      expect(mockModalShow).toHaveBeenCalled();
     });
 
     it('deleteItemConfirmation resets itemToBeDeleted', () => {
@@ -141,15 +139,14 @@ describe('packages_list', () => {
       expect(wrapper.vm.itemToBeDeleted).toEqual(null);
     });
 
-    it('deleteItemConfirmation emit package:delete', () => {
+    it('deleteItemConfirmation emit package:delete', async () => {
       const itemToBeDeleted = { id: 2 };
       // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
       // eslint-disable-next-line no-restricted-syntax
       wrapper.setData({ itemToBeDeleted });
       wrapper.vm.deleteItemConfirmation();
-      return wrapper.vm.$nextTick(() => {
-        expect(wrapper.emitted('package:delete')[0]).toEqual([itemToBeDeleted]);
-      });
+      await nextTick();
+      expect(wrapper.emitted('package:delete')[0]).toEqual([itemToBeDeleted]);
     });
 
     it('deleteItemCanceled resets itemToBeDeleted', () => {
diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/shared/package_list_row_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/shared/package_list_row_spec.js
index 1052fdd1dda..79c1b18c9f9 100644
--- a/spec/frontend/packages_and_registries/infrastructure_registry/components/shared/package_list_row_spec.js
+++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/shared/package_list_row_spec.js
@@ -1,4 +1,5 @@
 import { GlLink } from '@gitlab/ui';
+import { nextTick } from 'vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 
@@ -126,7 +127,7 @@ describe('packages_list_row', () => {
 
       findDeleteButton().vm.$emit('click');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(wrapper.emitted('packageToDelete')).toBeTruthy();
       expect(wrapper.emitted('packageToDelete')[0]).toEqual([packageWithoutTags]);
     });
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/version_row_spec.js.snap b/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/version_row_spec.js.snap
index 7aa42a1f1e5..bdd0fe3ad9e 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/version_row_spec.js.snap
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/version_row_spec.js.snap
@@ -72,12 +72,14 @@ exports[`VersionRow renders 1`] = `
         <div
           class="gl-display-flex gl-align-items-center gl-min-h-6"
         >
-          Created 
-          <time-ago-tooltip-stub
-            cssclass=""
-            time="2021-08-10T09:33:54Z"
-            tooltipplacement="top"
-          />
+          <span>
+            Created 
+            <time-ago-tooltip-stub
+              cssclass=""
+              time="2021-08-10T09:33:54Z"
+              tooltipplacement="top"
+            />
+          </span>
         </div>
       </div>
     </div>
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/package_title_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/package_title_spec.js
index 6ad6007c9da..5da9cfffaae 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/package_title_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/package_title_spec.js
@@ -1,5 +1,6 @@
 import { GlIcon, GlSprintf } from '@gitlab/ui';
 import { GlBreakpointInstance } from '@gitlab/ui/dist/utils';
+import { nextTick } from 'vue';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import PackageTags from '~/packages_and_registries/shared/components/package_tags.vue';
@@ -24,7 +25,7 @@ const packageWithTags = {
 describe('PackageTitle', () => {
   let wrapper;
 
-  function createComponent(packageEntity = packageWithTags) {
+  async function createComponent(packageEntity = packageWithTags) {
     wrapper = shallowMountExtended(PackageTitle, {
       propsData: { packageEntity },
       stubs: {
@@ -35,7 +36,7 @@ describe('PackageTitle', () => {
         GlResizeObserver: createMockDirective(),
       },
     });
-    return wrapper.vm.$nextTick();
+    await nextTick();
   }
 
   const findTitleArea = () => wrapper.findComponent(TitleArea);
@@ -71,7 +72,7 @@ describe('PackageTitle', () => {
 
       await createComponent();
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findPackageBadges()).toHaveLength(packageTags().length);
     });
@@ -85,7 +86,7 @@ describe('PackageTitle', () => {
       const { value } = getBinding(wrapper.element, 'gl-resize-observer');
       value();
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(findPackageBadges()).toHaveLength(packageTags().length);
     });
   });
diff --git a/spec/frontend/packages_and_registries/package_registry/components/functional/delete_package_spec.js b/spec/frontend/packages_and_registries/package_registry/components/functional/delete_package_spec.js
index 5de30829fa5..14a70def7d0 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/functional/delete_package_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/functional/delete_package_spec.js
@@ -1,4 +1,4 @@
-import { createLocalVue } from '@vue/test-utils';
+import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import waitForPromises from 'helpers/wait_for_promises';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
@@ -16,8 +16,6 @@ import {
 
 jest.mock('~/flash');
 
-const localVue = createLocalVue();
-
 describe('DeletePackage', () => {
   let wrapper;
   let apolloProvider;
@@ -27,7 +25,7 @@ describe('DeletePackage', () => {
   const eventPayload = { id: '1' };
 
   function createComponent(propsData = {}) {
-    localVue.use(VueApollo);
+    Vue.use(VueApollo);
 
     const requestHandlers = [
       [getPackagesQuery, resolver],
@@ -37,7 +35,6 @@ describe('DeletePackage', () => {
 
     wrapper = shallowMountExtended(DeletePackage, {
       propsData,
-      localVue,
       apolloProvider,
       scopedSlots: {
         default(props) {
diff --git a/spec/frontend/packages_and_registries/package_registry/components/list/package_list_row_spec.js b/spec/frontend/packages_and_registries/package_registry/components/list/package_list_row_spec.js
index 9467a613b2a..12a3eaa3873 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/list/package_list_row_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/list/package_list_row_spec.js
@@ -1,5 +1,5 @@
 import { GlSprintf } from '@gitlab/ui';
-import { createLocalVue } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
 import VueRouter from 'vue-router';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
@@ -17,8 +17,7 @@ import { PACKAGE_ERROR_STATUS } from '~/packages_and_registries/package_registry
 import ListItem from '~/vue_shared/components/registry/list_item.vue';
 import { packageData, packagePipelines, packageProject, packageTags } from '../../mock_data';
 
-const localVue = createLocalVue();
-localVue.use(VueRouter);
+Vue.use(VueRouter);
 
 describe('packages_list_row', () => {
   let wrapper;
@@ -47,7 +46,6 @@ describe('packages_list_row', () => {
     provide = defaultProvide,
   } = {}) => {
     wrapper = shallowMountExtended(PackagesListRow, {
-      localVue,
       provide,
       stubs: {
         ListItem,
@@ -121,7 +119,7 @@ describe('packages_list_row', () => {
 
       findDeleteButton().vm.$emit('click');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(wrapper.emitted('packageToDelete')).toBeTruthy();
       expect(wrapper.emitted('packageToDelete')[0]).toEqual([packageWithoutTags]);
     });
diff --git a/spec/frontend/packages_and_registries/package_registry/components/list/packages_search_spec.js b/spec/frontend/packages_and_registries/package_registry/components/list/packages_search_spec.js
index bed7a07ff36..9e91b15bc6e 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/list/packages_search_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/list/packages_search_spec.js
@@ -5,7 +5,10 @@ import component from '~/packages_and_registries/package_registry/components/lis
 import PackageTypeToken from '~/packages_and_registries/package_registry/components/list/tokens/package_type_token.vue';
 import RegistrySearch from '~/vue_shared/components/registry/registry_search.vue';
 import UrlSync from '~/vue_shared/components/url_sync.vue';
+import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
+import { LIST_KEY_CREATED_AT } from '~/packages_and_registries/package_registry/constants';
+
 import { getQueryParams, extractFilterAndSorting } from '~/packages_and_registries/shared/utils';
 
 jest.mock('~/packages_and_registries/shared/utils');
@@ -22,6 +25,7 @@ describe('Package Search', () => {
 
   const findRegistrySearch = () => wrapper.findComponent(RegistrySearch);
   const findUrlSync = () => wrapper.findComponent(UrlSync);
+  const findLocalStorageSync = () => wrapper.findComponent(LocalStorageSync);
 
   const mountComponent = (isGroupPage = false) => {
     wrapper = shallowMountExtended(component, {
@@ -32,6 +36,7 @@ describe('Package Search', () => {
       },
       stubs: {
         UrlSync,
+        LocalStorageSync,
       },
     });
   };
@@ -64,6 +69,19 @@ describe('Package Search', () => {
     expect(findUrlSync().exists()).toBe(true);
   });
 
+  it('has a LocalStorageSync component', () => {
+    mountComponent();
+
+    expect(findLocalStorageSync().props()).toMatchObject({
+      asJson: true,
+      storageKey: 'package_registry_list_sorting',
+      value: {
+        orderBy: LIST_KEY_CREATED_AT,
+        sort: 'desc',
+      },
+    });
+  });
+
   it.each`
     isGroupPage | page
     ${false}    | ${'project'}
@@ -92,7 +110,7 @@ describe('Package Search', () => {
 
     await nextTick();
 
-    expect(findRegistrySearch().props('sorting')).toEqual({ sort: 'foo', orderBy: 'name' });
+    expect(findRegistrySearch().props('sorting')).toEqual({ sort: 'foo', orderBy: 'created_at' });
 
     // there is always a first call on mounted that emits up default values
     expect(wrapper.emitted('update')[1]).toEqual([
@@ -101,7 +119,7 @@ describe('Package Search', () => {
           packageName: '',
           packageType: undefined,
         },
-        sort: 'NAME_FOO',
+        sort: 'CREATED_FOO',
       },
     ]);
   });
@@ -133,7 +151,7 @@ describe('Package Search', () => {
           packageName: '',
           packageType: undefined,
         },
-        sort: 'NAME_DESC',
+        sort: 'CREATED_DESC',
       },
     ]);
   });
diff --git a/spec/frontend/packages_and_registries/package_registry/mock_data.js b/spec/frontend/packages_and_registries/package_registry/mock_data.js
index c6a59f20998..0a4747fc9ec 100644
--- a/spec/frontend/packages_and_registries/package_registry/mock_data.js
+++ b/spec/frontend/packages_and_registries/package_registry/mock_data.js
@@ -119,6 +119,7 @@ export const packageVersions = () => [
 ];
 
 export const packageData = (extend) => ({
+  __typename: 'Package',
   id: 'gid://gitlab/Packages::Package/111',
   canDestroy: true,
   name: '@gitlab-org/package-15',
diff --git a/spec/frontend/packages_and_registries/package_registry/pages/__snapshots__/list_spec.js.snap b/spec/frontend/packages_and_registries/package_registry/pages/__snapshots__/list_spec.js.snap
index ed96abe24b1..0154486e224 100644
--- a/spec/frontend/packages_and_registries/package_registry/pages/__snapshots__/list_spec.js.snap
+++ b/spec/frontend/packages_and_registries/package_registry/pages/__snapshots__/list_spec.js.snap
@@ -38,8 +38,8 @@ exports[`PackagesListApp renders 1`] = `
             class="gl-font-size-h-display gl-line-height-36 h4"
           >
             
-        There are no packages yet
-      
+          There are no packages yet
+        
           </h1>
            
           <p
diff --git a/spec/frontend/packages_and_registries/package_registry/pages/details_spec.js b/spec/frontend/packages_and_registries/package_registry/pages/details_spec.js
index 637e2edf3be..a7e31d42c9e 100644
--- a/spec/frontend/packages_and_registries/package_registry/pages/details_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/pages/details_spec.js
@@ -1,6 +1,6 @@
 import { GlEmptyState, GlBadge, GlTabs, GlTab } from '@gitlab/ui';
-import { createLocalVue } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import Vue, { nextTick } from 'vue';
+
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
@@ -41,8 +41,6 @@ import {
 jest.mock('~/flash');
 useMockLocationHelper();
 
-const localVue = createLocalVue();
-
 describe('PackagesApp', () => {
   let wrapper;
   let apolloProvider;
@@ -59,12 +57,14 @@ describe('PackagesApp', () => {
     breadCrumbState,
   };
 
+  const { __typename, ...packageWithoutTypename } = packageData();
+
   function createComponent({
     resolver = jest.fn().mockResolvedValue(packageDetailsQuery()),
     fileDeleteMutationResolver = jest.fn().mockResolvedValue(packageDestroyFileMutation()),
     routeId = '1',
   } = {}) {
-    localVue.use(VueApollo);
+    Vue.use(VueApollo);
 
     const requestHandlers = [
       [getPackageDetails, resolver],
@@ -73,7 +73,6 @@ describe('PackagesApp', () => {
     apolloProvider = createMockApollo(requestHandlers);
 
     wrapper = shallowMountExtended(PackagesApp, {
-      localVue,
       apolloProvider,
       provide,
       stubs: {
@@ -133,7 +132,7 @@ describe('PackagesApp', () => {
 
     expect(findPackageTitle().exists()).toBe(true);
     expect(findPackageTitle().props()).toMatchObject({
-      packageEntity: expect.objectContaining(packageData()),
+      packageEntity: expect.objectContaining(packageWithoutTypename),
     });
   });
 
@@ -156,7 +155,7 @@ describe('PackagesApp', () => {
 
     expect(findPackageHistory().exists()).toBe(true);
     expect(findPackageHistory().props()).toMatchObject({
-      packageEntity: expect.objectContaining(packageData()),
+      packageEntity: expect.objectContaining(packageWithoutTypename),
       projectName: packageDetailsQuery().data.package.project.name,
     });
   });
@@ -168,7 +167,7 @@ describe('PackagesApp', () => {
 
     expect(findAdditionalMetadata().exists()).toBe(true);
     expect(findAdditionalMetadata().props()).toMatchObject({
-      packageEntity: expect.objectContaining(packageData()),
+      packageEntity: expect.objectContaining(packageWithoutTypename),
     });
   });
 
@@ -179,7 +178,7 @@ describe('PackagesApp', () => {
 
     expect(findInstallationCommands().exists()).toBe(true);
     expect(findInstallationCommands().props()).toMatchObject({
-      packageEntity: expect.objectContaining(packageData()),
+      packageEntity: expect.objectContaining(packageWithoutTypename),
     });
   });
 
diff --git a/spec/frontend/packages_and_registries/package_registry/pages/list_spec.js b/spec/frontend/packages_and_registries/package_registry/pages/list_spec.js
index 2ac2a6455ef..0e74fbbc6d9 100644
--- a/spec/frontend/packages_and_registries/package_registry/pages/list_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/pages/list_spec.js
@@ -1,8 +1,8 @@
 import { GlEmptyState, GlSprintf, GlLink } from '@gitlab/ui';
-import { createLocalVue } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
 
 import VueApollo from 'vue-apollo';
-import { nextTick } from 'vue';
+
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -27,8 +27,6 @@ import { packagesListQuery, packageData, pagination } from '../mock_data';
 jest.mock('~/lib/utils/common_utils');
 jest.mock('~/flash');
 
-const localVue = createLocalVue();
-
 describe('PackagesListApp', () => {
   let wrapper;
   let apolloProvider;
@@ -61,13 +59,12 @@ describe('PackagesListApp', () => {
     resolver = jest.fn().mockResolvedValue(packagesListQuery()),
     provide = defaultProvide,
   } = {}) => {
-    localVue.use(VueApollo);
+    Vue.use(VueApollo);
 
     const requestHandlers = [[getPackagesQuery, resolver]];
     apolloProvider = createMockApollo(requestHandlers);
 
     wrapper = shallowMountExtended(ListPage, {
-      localVue,
       apolloProvider,
       provide,
       stubs: {
@@ -85,7 +82,7 @@ describe('PackagesListApp', () => {
     wrapper.destroy();
   });
 
-  const waitForFirstRequest = () => {
+  const waitForFirstRequest = async () => {
     // emit a search update so the query is executed
     findSearch().vm.$emit('update', { sort: 'NAME_DESC', filters: [] });
     return waitForPromises();
@@ -149,11 +146,10 @@ describe('PackagesListApp', () => {
     beforeEach(() => {
       resolver = jest.fn().mockResolvedValue(packagesListQuery());
       mountComponent({ resolver });
-
-      return waitForFirstRequest();
     });
 
-    it('exists and has the right props', () => {
+    it('exists and has the right props', async () => {
+      await waitForFirstRequest();
       expect(findListComponent().props()).toMatchObject({
         list: expect.arrayContaining([expect.objectContaining({ id: packageData().id })]),
         isLoading: false,
@@ -161,16 +157,20 @@ describe('PackagesListApp', () => {
       });
     });
 
-    it('when list emits next-page fetches the next set of records', () => {
+    it('when list emits next-page fetches the next set of records', async () => {
+      await waitForFirstRequest();
       findListComponent().vm.$emit('next-page');
+      await waitForPromises();
 
       expect(resolver).toHaveBeenCalledWith(
         expect.objectContaining({ after: pagination().endCursor, first: GRAPHQL_PAGE_SIZE }),
       );
     });
 
-    it('when list emits prev-page fetches the prev set of records', () => {
+    it('when list emits prev-page fetches the prev set of records', async () => {
+      await waitForFirstRequest();
       findListComponent().vm.$emit('prev-page');
+      await waitForPromises();
 
       expect(resolver).toHaveBeenCalledWith(
         expect.objectContaining({ before: pagination().startCursor, last: GRAPHQL_PAGE_SIZE }),
diff --git a/spec/frontend/packages_and_registries/settings/group/components/dependency_proxy_settings_spec.js b/spec/frontend/packages_and_registries/settings/group/components/dependency_proxy_settings_spec.js
index f6c1d212b51..94f56e5c979 100644
--- a/spec/frontend/packages_and_registries/settings/group/components/dependency_proxy_settings_spec.js
+++ b/spec/frontend/packages_and_registries/settings/group/components/dependency_proxy_settings_spec.js
@@ -1,5 +1,5 @@
 import { GlSprintf, GlToggle } from '@gitlab/ui';
-import { createLocalVue } from '@vue/test-utils';
+import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
@@ -33,8 +33,6 @@ import {
 jest.mock('~/flash');
 jest.mock('~/packages_and_registries/settings/group/graphql/utils/optimistic_responses');
 
-const localVue = createLocalVue();
-
 describe('DependencyProxySettings', () => {
   let wrapper;
   let apolloProvider;
@@ -47,7 +45,7 @@ describe('DependencyProxySettings', () => {
     groupDependencyProxyPath: 'group_dependency_proxy_path',
   };
 
-  localVue.use(VueApollo);
+  Vue.use(VueApollo);
 
   const mountComponent = ({
     provide = defaultProvide,
@@ -63,7 +61,6 @@ describe('DependencyProxySettings', () => {
     apolloProvider = createMockApollo(requestHandlers);
 
     wrapper = shallowMountExtended(component, {
-      localVue,
       apolloProvider,
       provide,
       propsData: {
diff --git a/spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js b/spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js
index 933dac7f5a8..5c30074a6af 100644
--- a/spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js
+++ b/spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js
@@ -1,7 +1,8 @@
 import { GlAlert } from '@gitlab/ui';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
-import { nextTick } from 'vue';
+
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import PackagesSettings from '~/packages_and_registries/settings/group/components/packages_settings.vue';
@@ -19,8 +20,6 @@ import {
 
 jest.mock('~/flash');
 
-const localVue = createLocalVue();
-
 describe('Group Settings App', () => {
   let wrapper;
   let apolloProvider;
@@ -36,14 +35,13 @@ describe('Group Settings App', () => {
     resolver = jest.fn().mockResolvedValue(groupPackageSettingsMock),
     provide = defaultProvide,
   } = {}) => {
-    localVue.use(VueApollo);
+    Vue.use(VueApollo);
 
     const requestHandlers = [[getGroupPackagesSettingsQuery, resolver]];
 
     apolloProvider = createMockApollo(requestHandlers);
 
     wrapper = shallowMount(component, {
-      localVue,
       apolloProvider,
       provide,
       mocks: {
diff --git a/spec/frontend/packages_and_registries/settings/group/components/package_settings_spec.js b/spec/frontend/packages_and_registries/settings/group/components/package_settings_spec.js
index 693af21e24a..d92d42e7834 100644
--- a/spec/frontend/packages_and_registries/settings/group/components/package_settings_spec.js
+++ b/spec/frontend/packages_and_registries/settings/group/components/package_settings_spec.js
@@ -1,5 +1,5 @@
 import { GlSprintf, GlLink } from '@gitlab/ui';
-import { createLocalVue } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
@@ -28,8 +28,6 @@ import {
 jest.mock('~/flash');
 jest.mock('~/packages_and_registries/settings/group/graphql/utils/optimistic_responses');
 
-const localVue = createLocalVue();
-
 describe('Packages Settings', () => {
   let wrapper;
   let apolloProvider;
@@ -42,14 +40,13 @@ describe('Packages Settings', () => {
   const mountComponent = ({
     mutationResolver = jest.fn().mockResolvedValue(groupPackageSettingsMutationMock()),
   } = {}) => {
-    localVue.use(VueApollo);
+    Vue.use(VueApollo);
 
     const requestHandlers = [[updateNamespacePackageSettings, mutationResolver]];
 
     apolloProvider = createMockApollo(requestHandlers);
 
     wrapper = shallowMountExtended(component, {
-      localVue,
       apolloProvider,
       provide: defaultProvide,
       propsData: {
@@ -252,7 +249,7 @@ describe('Packages Settings', () => {
 
         emitMavenSettingsUpdate();
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         // errors are reset on mutation call
         expect(findMavenDuplicatedSettings().props('duplicateExceptionRegexError')).toBe('');
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js
index 8266f9bee89..a6c929844b1 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js
@@ -1,7 +1,9 @@
 import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 import component from '~/packages_and_registries/settings/project/components/registry_settings_app.vue';
 import SettingsForm from '~/packages_and_registries/settings/project/components/settings_form.vue';
 import {
@@ -19,8 +21,6 @@ import {
   containerExpirationPolicyData,
 } from '../mock_data';
 
-const localVue = createLocalVue();
-
 describe('Registry Settings App', () => {
   let wrapper;
   let fakeApollo;
@@ -55,17 +55,14 @@ describe('Registry Settings App', () => {
   };
 
   const mountComponentWithApollo = ({ provide = defaultProvidedValues, resolver } = {}) => {
-    localVue.use(VueApollo);
+    Vue.use(VueApollo);
 
     const requestHandlers = [[expirationPolicyQuery, resolver]];
 
     fakeApollo = createMockApollo(requestHandlers);
     mountComponent(provide, {
-      localVue,
       apolloProvider: fakeApollo,
     });
-
-    return requestHandlers.map((request) => request[1]);
   };
 
   afterEach(() => {
@@ -101,25 +98,25 @@ describe('Registry Settings App', () => {
       ${'response and changes'}                    | ${expirationPolicyPayload()}      | ${{ ...containerExpirationPolicyData(), nameRegex: '12345' }} | ${true}
       ${'response and empty'}                      | ${expirationPolicyPayload()}      | ${{}}                                                         | ${true}
     `('$description', async ({ apiResponse, workingCopy, result }) => {
-      const requests = mountComponentWithApollo({
+      mountComponentWithApollo({
         provide: { ...defaultProvidedValues, enableHistoricEntries: true },
         resolver: jest.fn().mockResolvedValue(apiResponse),
       });
-      await Promise.all(requests);
+      await waitForPromises();
 
       findSettingsComponent().vm.$emit('input', workingCopy);
 
-      await wrapper.vm.$nextTick();
+      await waitForPromises();
 
       expect(findSettingsComponent().props('isEdited')).toBe(result);
     });
   });
 
   it('renders the setting form', async () => {
-    const requests = mountComponentWithApollo({
+    mountComponentWithApollo({
       resolver: jest.fn().mockResolvedValue(expirationPolicyPayload()),
     });
-    await Promise.all(requests);
+    await waitForPromises();
 
     expect(findSettingsComponent().exists()).toBe(true);
   });
@@ -153,11 +150,11 @@ describe('Registry Settings App', () => {
   });
 
   describe('fetchSettingsError', () => {
-    beforeEach(() => {
-      const requests = mountComponentWithApollo({
+    beforeEach(async () => {
+      mountComponentWithApollo({
         resolver: jest.fn().mockRejectedValue(new Error('GraphQL error')),
       });
-      return Promise.all(requests);
+      await waitForPromises();
     });
 
     it('the form is hidden', () => {
@@ -175,14 +172,14 @@ describe('Registry Settings App', () => {
       ${true}               | ${true}
       ${false}              | ${false}
     `('is $isShown that the form is shown', async ({ enableHistoricEntries, isShown }) => {
-      const requests = mountComponentWithApollo({
+      mountComponentWithApollo({
         provide: {
           ...defaultProvidedValues,
           enableHistoricEntries,
         },
         resolver: jest.fn().mockResolvedValue(emptyExpirationPolicyPayload()),
       });
-      await Promise.all(requests);
+      await waitForPromises();
 
       expect(findSettingsComponent().exists()).toBe(isShown);
     });
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/settings_form_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/settings_form_spec.js
index bc104a25ef9..625aa37fc0f 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/settings_form_spec.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/settings_form_spec.js
@@ -1,5 +1,6 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
+import { nextTick } from 'vue';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { GlCard, GlLoadingIcon } from 'jest/packages_and_registries/shared/stubs';
@@ -201,7 +202,7 @@ describe('Settings Form', () => {
         finder().vm.$emit('input', 'foo');
         expect(finder().props('error')).toEqual('bar');
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(finder().props('error')).toEqual('');
       });
@@ -213,7 +214,7 @@ describe('Settings Form', () => {
 
         finder().vm.$emit('validation', false);
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(findSaveButton().props('disabled')).toBe(true);
       });
@@ -252,7 +253,7 @@ describe('Settings Form', () => {
 
         findForm().trigger('reset');
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(findKeepRegexInput().props('error')).toBe('');
         expect(findRemoveRegexInput().props('error')).toBe('');
@@ -319,7 +320,7 @@ describe('Settings Form', () => {
 
         findForm().trigger('submit');
         await waitForPromises();
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(UPDATE_SETTINGS_SUCCESS_MESSAGE);
       });
@@ -335,7 +336,7 @@ describe('Settings Form', () => {
 
             findForm().trigger('submit');
             await waitForPromises();
-            await wrapper.vm.$nextTick();
+            await nextTick();
 
             expect(wrapper.vm.$toast.show).toHaveBeenCalledWith('foo');
           });
@@ -349,7 +350,7 @@ describe('Settings Form', () => {
 
             findForm().trigger('submit');
             await waitForPromises();
-            await wrapper.vm.$nextTick();
+            await nextTick();
 
             expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(UPDATE_SETTINGS_ERROR_MESSAGE);
           });
@@ -368,7 +369,7 @@ describe('Settings Form', () => {
 
             findForm().trigger('submit');
             await waitForPromises();
-            await wrapper.vm.$nextTick();
+            await nextTick();
 
             expect(findKeepRegexInput().props('error')).toEqual('baz');
           });
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/mock_data.js b/spec/frontend/packages_and_registries/settings/project/settings/mock_data.js
index a56bb75f8ed..33406c98f4b 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/mock_data.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/mock_data.js
@@ -13,6 +13,7 @@ export const expirationPolicyPayload = (override) => ({
     project: {
       id: '1',
       containerExpirationPolicy: {
+        __typename: 'ContainerExpirationPolicy',
         ...containerExpirationPolicyData(),
         ...override,
       },