Migrate package list to vue-router

app/assets/javascripts/packages_and_registries/package_registry/constants.js

 import { s__, __ } from '~/locale';
+import { helpPagePath } from '~/helpers/help_page_helper';
 
 export {
   DELETE_PACKAGE_TRACKING_ACTION,
@@ -136,3 +137,8 @@ export const PACKAGE_TYPES = [
   s__('PackageRegistry|Debian'),
   s__('PackageRegistry|Helm'),
 ];
+
+// links
+
+export const EMPTY_LIST_HELP_URL = helpPagePath('user/packages/package_registry/index');
+export const PACKAGE_HELP_URL = helpPagePath('user/packages/index');

app/assets/javascripts/packages_and_registries/package_registry/pages/list.js → app/assets/javascripts/packages_and_registries/package_registry/index.js

 import Vue from 'vue';
 import Translate from '~/vue_shared/translate';
 import { apolloProvider } from '~/packages_and_registries/package_registry/graphql/index';
-import PackagesListApp from '../components/list/app.vue';
+import PackageRegistry from '~/packages_and_registries/package_registry/pages/index.vue';
+import createRouter from './router';
 
 Vue.use(Translate);
 
 export default () => {
   const el = document.getElementById('js-vue-packages-list');
+  const { endpoint, resourceId, fullPath, pageType, emptyListIllustration } = el.dataset;
+  const router = createRouter(endpoint);
 
-  const isGroupPage = el.dataset.pageType === 'groups';
+  const isGroupPage = pageType === 'groups';
 
   return new Vue({
     el,
+    router,
     apolloProvider,
     provide: {
-      ...el.dataset,
+      resourceId,
+      fullPath,
+      emptyListIllustration,
       isGroupPage,
     },
     render(createElement) {
-      return createElement(PackagesListApp);
+      return createElement(PackageRegistry);
     },
   });
 };

app/assets/javascripts/packages_and_registries/package_registry/pages/index.vue

+<template>
+  <div>
+    <router-view />
+  </div>
+</template>

app/assets/javascripts/packages_and_registries/package_registry/components/list/app.vue → app/assets/javascripts/packages_and_registries/package_registry/pages/list.vue

@@ -9,13 +9,15 @@ import {
   GROUP_RESOURCE_TYPE,
   GRAPHQL_PAGE_SIZE,
   DELETE_PACKAGE_SUCCESS_MESSAGE,
+  EMPTY_LIST_HELP_URL,
+  PACKAGE_HELP_URL,
 } from '~/packages_and_registries/package_registry/constants';
 import getPackagesQuery from '~/packages_and_registries/package_registry/graphql/queries/get_packages.query.graphql';
 
 import DeletePackage from '~/packages_and_registries/package_registry/components/functional/delete_package.vue';
-import PackageTitle from './package_title.vue';
-import PackageSearch from './package_search.vue';
-import PackageList from './packages_list.vue';
+import PackageTitle from '~/packages_and_registries/package_registry/components/list/package_title.vue';
+import PackageSearch from '~/packages_and_registries/package_registry/components/list/package_search.vue';
+import PackageList from '~/packages_and_registries/package_registry/components/list/packages_list.vue';
 
 export default {
   components: {
@@ -27,13 +29,7 @@ export default {
     PackageSearch,
     DeletePackage,
   },
-  inject: [
-    'packageHelpUrl',
-    'emptyListIllustration',
-    'emptyListHelpUrl',
-    'isGroupPage',
-    'fullPath',
-  ],
+  inject: ['emptyListIllustration', 'isGroupPage', 'fullPath'],
   data() {
     return {
       packages: {},
@@ -156,12 +152,16 @@ export default {
       'PackageRegistry|Learn how to %{noPackagesLinkStart}publish and share your packages%{noPackagesLinkEnd} with GitLab.',
     ),
   },
+  links: {
+    EMPTY_LIST_HELP_URL,
+    PACKAGE_HELP_URL,
+  },
 };
 </script>
 
 <template>
   <div>
-    <package-title :help-url="packageHelpUrl" :count="packagesCount" />
+    <package-title :help-url="$options.links.PACKAGE_HELP_URL" :count="packagesCount" />
     <package-search @update="handleSearchUpdate" />
 
     <delete-package
@@ -185,7 +185,9 @@ export default {
                 <gl-sprintf v-if="hasFilters" :message="$options.i18n.widenFilters" />
                 <gl-sprintf v-else :message="$options.i18n.noResultsText">
                   <template #noPackagesLink="{ content }">
-                    <gl-link :href="emptyListHelpUrl" target="_blank">{{ content }}</gl-link>
+                    <gl-link :href="$options.links.EMPTY_LIST_HELP_URL" target="_blank">{{
+                      content
+                    }}</gl-link>
                   </template>
                 </gl-sprintf>
               </template>

app/assets/javascripts/packages_and_registries/package_registry/router.js

+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import List from '~/packages_and_registries/package_registry/pages/list.vue';
+
+Vue.use(VueRouter);
+
+export default function createRouter(base) {
+  const router = new VueRouter({
+    base,
+    mode: 'history',
+    routes: [
+      {
+        name: 'list',
+        path: '/',
+        component: List,
+      },
+    ],
+  });
+
+  return router;
+}

app/assets/javascripts/pages/groups/packages/index/index.js

-import packageList from '~/packages_and_registries/package_registry/pages/list';
+import packageApp from '~/packages_and_registries/package_registry/index';
 
-packageList();
+packageApp();

app/assets/javascripts/pages/projects/packages/packages/index/index.js

-import packageList from '~/packages_and_registries/package_registry/pages/list';
+import packageApp from '~/packages_and_registries/package_registry/index';
 
-packageList();
+packageApp();

app/helpers/packages_helper.rb

@@ -38,17 +38,6 @@ module PackagesHelper
     "#{Gitlab.config.gitlab.host}/#{group_id}"
   end
 
-  def packages_list_data(type, resource)
-    {
-      resource_id: resource.id,
-      full_path: resource.full_path,
-      page_type: type,
-      empty_list_help_url: help_page_path('user/packages/package_registry/index'),
-      empty_list_illustration: image_path('illustrations/no-packages.svg'),
-      package_help_url: help_page_path('user/packages/index')
-    }
-  end
-
   def track_package_event(event_name, scope, **args)
     ::Packages::CreateEventService.new(nil, current_user, event_name: event_name, scope: scope).execute
     category = args.delete(:category) || self.class.name

app/views/groups/packages/index.html.haml

@@ -3,4 +3,8 @@
 
 .row
   .col-12
-    #js-vue-packages-list{ data: packages_list_data('groups', @group) }
+    #js-vue-packages-list{ data: { resource_id: @group.id,
+      full_path: @group.full_path,
+      endpoint: group_packages_path(@group),
+      page_type: 'groups',
+      empty_list_illustration: image_path('illustrations/no-packages.svg'), } }

app/views/projects/packages/packages/index.html.haml

@@ -3,4 +3,8 @@
 
 .row
   .col-12
-    #js-vue-packages-list{ data: packages_list_data('projects', @project) }
+    #js-vue-packages-list{ data: { resource_id: @project.id,
+      full_path: @project.full_path,
+      endpoint: project_packages_path(@project),
+      page_type: 'projects',
+      empty_list_illustration: image_path('illustrations/no-packages.svg'), } }

spec/frontend/packages_and_registries/package_registry/components/list/__snapshots__/app_spec.js.snap → spec/frontend/packages_and_registries/package_registry/pages/__snapshots__/list_spec.js.snap

@@ -4,7 +4,7 @@ exports[`PackagesListApp renders 1`] = `
 <div>
   <package-title-stub
     count="2"
-    helpurl="packageHelpUrl"
+    helpurl="/help/user/packages/index"
   />
    
   <package-search-stub />
@@ -49,7 +49,7 @@ exports[`PackagesListApp renders 1`] = `
             <b-link-stub
               class="gl-link"
               event="click"
-              href="emptyListHelpUrl"
+              href="/help/user/packages/package_registry/index"
               routertag="a"
               target="_blank"
             >

spec/frontend/packages_and_registries/package_registry/components/list/app_spec.js → spec/frontend/packages_and_registries/package_registry/pages/list_spec.js

@@ -6,7 +6,7 @@ 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';
-import PackageListApp from '~/packages_and_registries/package_registry/components/list/app.vue';
+import ListPage from '~/packages_and_registries/package_registry/pages/list.vue';
 import PackageTitle from '~/packages_and_registries/package_registry/components/list/package_title.vue';
 import PackageSearch from '~/packages_and_registries/package_registry/components/list/package_search.vue';
 import OriginalPackageList from '~/packages_and_registries/package_registry/components/list/packages_list.vue';
@@ -16,11 +16,13 @@ import {
   PROJECT_RESOURCE_TYPE,
   GROUP_RESOURCE_TYPE,
   GRAPHQL_PAGE_SIZE,
+  EMPTY_LIST_HELP_URL,
+  PACKAGE_HELP_URL,
 } from '~/packages_and_registries/package_registry/constants';
 
 import getPackagesQuery from '~/packages_and_registries/package_registry/graphql/queries/get_packages.query.graphql';
 
-import { packagesListQuery, packageData, pagination } from '../../mock_data';
+import { packagesListQuery, packageData, pagination } from '../mock_data';
 
 jest.mock('~/lib/utils/common_utils');
 jest.mock('~/flash');
@@ -32,9 +34,7 @@ describe('PackagesListApp', () => {
   let apolloProvider;
 
   const defaultProvide = {
-    packageHelpUrl: 'packageHelpUrl',
     emptyListIllustration: 'emptyListIllustration',
-    emptyListHelpUrl: 'emptyListHelpUrl',
     isGroupPage: true,
     fullPath: 'gitlab-org',
   };
@@ -66,7 +66,7 @@ describe('PackagesListApp', () => {
     const requestHandlers = [[getPackagesQuery, resolver]];
     apolloProvider = createMockApollo(requestHandlers);
 
-    wrapper = shallowMountExtended(PackageListApp, {
+    wrapper = shallowMountExtended(ListPage, {
       localVue,
       apolloProvider,
       provide,
@@ -113,7 +113,10 @@ describe('PackagesListApp', () => {
     await waitForFirstRequest();
 
     expect(findPackageTitle().exists()).toBe(true);
-    expect(findPackageTitle().props('count')).toBe(2);
+    expect(findPackageTitle().props()).toMatchObject({
+      count: 2,
+      helpUrl: PACKAGE_HELP_URL,
+    });
   });
 
   describe('search component', () => {
@@ -213,12 +216,12 @@ describe('PackagesListApp', () => {
     it('generate the correct empty list link', () => {
       const link = findListComponent().findComponent(GlLink);
 
-      expect(link.attributes('href')).toBe(defaultProvide.emptyListHelpUrl);
+      expect(link.attributes('href')).toBe(EMPTY_LIST_HELP_URL);
       expect(link.text()).toBe('publish and share your packages');
     });
 
     it('includes the right content on the default tab', () => {
-      expect(findEmptyState().text()).toContain(PackageListApp.i18n.emptyPageTitle);
+      expect(findEmptyState().text()).toContain(ListPage.i18n.emptyPageTitle);
     });
   });
 
@@ -234,8 +237,8 @@ describe('PackagesListApp', () => {
     });
 
     it('should show specific empty message', () => {
-      expect(findEmptyState().text()).toContain(PackageListApp.i18n.noResultsTitle);
-      expect(findEmptyState().text()).toContain(PackageListApp.i18n.widenFilters);
+      expect(findEmptyState().text()).toContain(ListPage.i18n.noResultsTitle);
+      expect(findEmptyState().text()).toContain(ListPage.i18n.widenFilters);
     });
   });
 

spec/helpers/packages_helper_spec.rb

@@ -260,34 +260,4 @@ RSpec.describe PackagesHelper do
       end
     end
   end
-
-  describe '#packages_list_data' do
-    let_it_be(:resource) { project }
-    let_it_be(:type) { 'project' }
-
-    let(:expected_result) do
-      {
-        resource_id: resource.id,
-        full_path: resource.full_path,
-        page_type: type
-      }
-    end
-
-    subject(:result) { helper.packages_list_data(type, resource) }
-
-    context 'at a project level' do
-      it 'populates presenter data' do
-        expect(result).to match(hash_including(expected_result))
-      end
-    end
-
-    context 'at a group level' do
-      let_it_be(:resource) { create(:group) }
-      let_it_be(:type) { 'group' }
-
-      it 'populates presenter data' do
-        expect(result).to match(hash_including(expected_result))
-      end
-    end
-  end
 end