Move package components to infra registry

app/assets/javascripts/packages/list/packages_list_app_bundle.js

-import Vue from 'vue';
-import Translate from '~/vue_shared/translate';
-import PackagesListApp from './components/packages_list_app.vue';
-import { createStore } from './stores';
-
-Vue.use(Translate);
-
-export default () => {
-  const el = document.getElementById('js-vue-packages-list');
-  const store = createStore();
-  store.dispatch('setInitialState', el.dataset);
-
-  return new Vue({
-    el,
-    store,
-    components: {
-      PackagesListApp,
-    },
-    render(createElement) {
-      return createElement('packages-list-app');
-    },
-  });
-};

app/assets/javascripts/packages_and_registries/infrastructure_registry/details/components/app.vue

@@ -16,7 +16,7 @@ import { s__, __ } from '~/locale';
 import TerraformTitle from '~/packages_and_registries/infrastructure_registry/details/components/details_title.vue';
 import TerraformInstallation from '~/packages_and_registries/infrastructure_registry/details/components/terraform_installation.vue';
 import Tracking from '~/tracking';
-import PackageListRow from '~/packages/shared/components/package_list_row.vue';
+import PackageListRow from '~/packages_and_registries/infrastructure_registry/shared/package_list_row.vue';
 import PackagesListLoader from '~/packages/shared/components/packages_list_loader.vue';
 import { TrackingActions, SHOW_DELETE_SUCCESS_ALERT } from '~/packages/shared/constants';
 import { packageTypeToTrackCategory } from '~/packages/shared/utils';

app/assets/javascripts/packages/list/components/packages_list.vue → app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/packages_list.vue

@@ -3,10 +3,10 @@ import { GlPagination, GlModal, GlSprintf } from '@gitlab/ui';
 import { mapState, mapGetters } from 'vuex';
 import { s__ } from '~/locale';
 import Tracking from '~/tracking';
-import PackagesListRow from '../../shared/components/package_list_row.vue';
-import PackagesListLoader from '../../shared/components/packages_list_loader.vue';
-import { TrackingActions } from '../../shared/constants';
-import { packageTypeToTrackCategory } from '../../shared/utils';
+import PackagesListRow from '~/packages_and_registries/infrastructure_registry/shared/package_list_row.vue';
+import PackagesListLoader from '~/packages/shared/components/packages_list_loader.vue';
+import { TrackingActions } from '~/packages/shared/constants';
+import { packageTypeToTrackCategory } from '~/packages/shared/utils';
 
 export default {
   components: {

app/assets/javascripts/packages/list/components/packages_list_app.vue → app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/packages_list_app.vue

@@ -7,10 +7,10 @@ import { s__ } from '~/locale';
 import { SHOW_DELETE_SUCCESS_ALERT } from '~/packages/shared/constants';
 import { FILTERED_SEARCH_TERM } from '~/packages_and_registries/shared/constants';
 import { getQueryParams, extractFilterAndSorting } from '~/packages_and_registries/shared/utils';
-import InfrastructureTitle from '~/packages_and_registries/infrastructure_registry/components/infrastructure_title.vue';
-import InfrastructureSearch from '~/packages_and_registries/infrastructure_registry/components/infrastructure_search.vue';
-import { DELETE_PACKAGE_SUCCESS_MESSAGE } from '../constants';
-import PackageList from './packages_list.vue';
+import InfrastructureTitle from '~/packages_and_registries/infrastructure_registry/list/components/infrastructure_title.vue';
+import InfrastructureSearch from '~/packages_and_registries/infrastructure_registry/list/components/infrastructure_search.vue';
+import PackageList from '~/packages_and_registries/infrastructure_registry/list/components/packages_list.vue';
+import { DELETE_PACKAGE_SUCCESS_MESSAGE } from '~/packages/list/constants';
 
 export default {
   components: {

app/assets/javascripts/packages_and_registries/infrastructure_registry/list_app_bundle.js

 import Vue from 'vue';
 import { s__ } from '~/locale';
-import PackagesListApp from '~/packages/list/components/packages_list_app.vue';
+import PackagesListApp from '~/packages_and_registries/infrastructure_registry/list/components/packages_list_app.vue';
 import { createStore } from '~/packages/list/stores';
 import Translate from '~/vue_shared/translate';
 
@@ -18,9 +18,6 @@ export default () => {
       PackagesListApp,
     },
     provide: {
-      titleComponent: 'InfrastructureTitle',
-      searchComponent: 'InfrastructureSearch',
-      iconComponent: 'InfrastructureIconAndName',
       emptyPageTitle: s__('InfrastructureRegistry|You have no Terraform modules in your project'),
       noResultsText: s__(
         'InfrastructureRegistry|Terraform modules are the main way to package and reuse resource configurations with Terraform. Learn more about how to %{noPackagesLinkStart}create Terraform modules%{noPackagesLinkEnd} in GitLab.',

app/assets/javascripts/packages/shared/components/package_list_row.vue → app/assets/javascripts/packages_and_registries/infrastructure_registry/shared/package_list_row.vue

@@ -3,11 +3,12 @@ import { GlButton, GlLink, GlSprintf, GlTooltipDirective, GlTruncate } from '@gi
 import { s__ } from '~/locale';
 import ListItem from '~/vue_shared/components/registry/list_item.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
-import { PACKAGE_ERROR_STATUS, PACKAGE_DEFAULT_STATUS } from '../constants';
-import { getPackageTypeLabel } from '../utils';
-import PackagePath from './package_path.vue';
-import PackageTags from './package_tags.vue';
-import PublishMethod from './publish_method.vue';
+import { PACKAGE_ERROR_STATUS, PACKAGE_DEFAULT_STATUS } from '~/packages/shared/constants';
+import { getPackageTypeLabel } from '~/packages/shared/utils';
+import PackagePath from '~/packages/shared/components/package_path.vue';
+import PackageTags from '~/packages/shared/components/package_tags.vue';
+import PublishMethod from '~/packages/shared/components/publish_method.vue';
+import InfrastructureIconAndName from '~/packages_and_registries/infrastructure_registry/shared/infrastructure_icon_and_name.vue';
 
 export default {
   name: 'PackageListRow',
@@ -20,23 +21,12 @@ export default {
     PackagePath,
     PublishMethod,
     ListItem,
-    PackageIconAndName: () =>
-      import(/* webpackChunkName: 'package_registry_components' */ './package_icon_and_name.vue'),
-    InfrastructureIconAndName: () =>
-      import(
-        /* webpackChunkName: 'infrastructure_registry_components' */ '~/packages_and_registries/infrastructure_registry/components/infrastructure_icon_and_name.vue'
-      ),
+    InfrastructureIconAndName,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
   },
   mixins: [timeagoMixin],
-  inject: {
-    iconComponent: {
-      from: 'iconComponent',
-      default: 'PackageIconAndName',
-    },
-  },
   props: {
     packageEntity: {
       type: Object,
@@ -130,9 +120,9 @@ export default {
           </gl-sprintf>
         </div>
 
-        <component :is="iconComponent" v-if="showPackageType">
+        <infrastructure-icon-and-name v-if="showPackageType">
           {{ packageType }}
-        </component>
+        </infrastructure-icon-and-name>
 
         <package-path
           v-if="hasProjectLink"

qa/qa/page/project/packages/index.rb

@@ -5,7 +5,7 @@ module QA
     module Project
       module Packages
         class Index < QA::Page::Base
-          view 'app/assets/javascripts/packages/shared/components/package_list_row.vue' do
+          view 'app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue' do
             element :package_row
             element :package_link
           end

spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/app_spec.js

@@ -9,7 +9,7 @@ import PackagesApp from '~/packages_and_registries/infrastructure_registry/detai
 import PackageFiles from '~/packages_and_registries/infrastructure_registry/details/components/package_files.vue';
 import PackageHistory from '~/packages_and_registries/infrastructure_registry/details/components/package_history.vue';
 import * as getters from '~/packages_and_registries/infrastructure_registry/details/store/getters';
-import PackageListRow from '~/packages/shared/components/package_list_row.vue';
+import PackageListRow from '~/packages_and_registries/infrastructure_registry/shared/package_list_row.vue';
 import PackagesListLoader from '~/packages/shared/components/packages_list_loader.vue';
 import { TrackingActions } from '~/packages/shared/constants';
 import * as SharedUtils from '~/packages/shared/utils';

spec/frontend/packages_and_registries/infrastructure_registry/components/infrastructure_search_spec.js → spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_search_spec.js

 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
-import component from '~/packages_and_registries/infrastructure_registry/components/infrastructure_search.vue';
+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';
 

spec/frontend/packages_and_registries/infrastructure_registry/components/infrastructure_title_spec.js → spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_title_spec.js

 import { shallowMount } from '@vue/test-utils';
-import component from '~/packages_and_registries/infrastructure_registry/components/infrastructure_title.vue';
+import component from '~/packages_and_registries/infrastructure_registry/list/components/infrastructure_title.vue';
 import MetadataItem from '~/vue_shared/components/registry/metadata_item.vue';
 import TitleArea from '~/vue_shared/components/registry/title_area.vue';
 

spec/frontend/packages/list/components/packages_list_app_spec.js → spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_app_spec.js

@@ -4,12 +4,12 @@ import Vuex from 'vuex';
 import setWindowLocation from 'helpers/set_window_location_helper';
 import createFlash from '~/flash';
 import * as commonUtils from '~/lib/utils/common_utils';
-import PackageListApp from '~/packages/list/components/packages_list_app.vue';
+import PackageListApp from '~/packages_and_registries/infrastructure_registry/list/components/packages_list_app.vue';
 import { DELETE_PACKAGE_SUCCESS_MESSAGE } from '~/packages/list/constants';
 import { SHOW_DELETE_SUCCESS_ALERT } from '~/packages/shared/constants';
 import { FILTERED_SEARCH_TERM } from '~/packages_and_registries/shared/constants';
 import * as packageUtils from '~/packages_and_registries/shared/utils';
-import InfrastructureSearch from '~/packages_and_registries/infrastructure_registry/components/infrastructure_search.vue';
+import InfrastructureSearch from '~/packages_and_registries/infrastructure_registry/list/components/infrastructure_search.vue';
 
 jest.mock('~/lib/utils/common_utils');
 jest.mock('~/flash');

spec/frontend/packages/list/components/packages_list_spec.js → spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_spec.js

@@ -3,13 +3,13 @@ import { mount, createLocalVue } from '@vue/test-utils';
 import { last } from 'lodash';
 import Vuex from 'vuex';
 import stubChildren from 'helpers/stub_children';
-import PackagesList from '~/packages/list/components/packages_list.vue';
-import PackagesListRow from '~/packages/shared/components/package_list_row.vue';
+import PackagesList from '~/packages_and_registries/infrastructure_registry/list/components/packages_list.vue';
+import PackagesListRow from '~/packages_and_registries/infrastructure_registry/shared/package_list_row.vue';
 import PackagesListLoader from '~/packages/shared/components/packages_list_loader.vue';
 import { TrackingActions } from '~/packages/shared/constants';
 import * as SharedUtils from '~/packages/shared/utils';
 import Tracking from '~/tracking';
-import { packageList } from '../../mock_data';
+import { packageList } from '../../../../../packages/mock_data';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);

spec/frontend/packages_and_registries/infrastructure_registry/components/infrastructure_icon_and_name_spec.js → spec/frontend/packages_and_registries/infrastructure_registry/components/shared/infrastructure_icon_and_name_spec.js

 import { GlIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import InfrastructureIconAndName from '~/packages_and_registries/infrastructure_registry/components/infrastructure_icon_and_name.vue';
+import InfrastructureIconAndName from '~/packages_and_registries/infrastructure_registry/shared/infrastructure_icon_and_name.vue';
 
 describe('InfrastructureIconAndName', () => {
   let wrapper;

spec/frontend/packages/shared/components/package_list_row_spec.js → spec/frontend/packages_and_registries/infrastructure_registry/components/shared/package_list_row_spec.js

@@ -2,13 +2,13 @@ import { GlLink } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 
-import PackagesListRow from '~/packages/shared/components/package_list_row.vue';
+import PackagesListRow from '~/packages_and_registries/infrastructure_registry/shared/package_list_row.vue';
 import PackagePath from '~/packages/shared/components/package_path.vue';
 import PackageTags from '~/packages/shared/components/package_tags.vue';
 import { PACKAGE_ERROR_STATUS } from '~/packages/shared/constants';
 
 import ListItem from '~/vue_shared/components/registry/list_item.vue';
-import { packageList } from '../../mock_data';
+import { packageList } from '../../../../packages/mock_data';
 
 describe('packages_list_row', () => {
   let wrapper;
@@ -17,12 +17,10 @@ describe('packages_list_row', () => {
   const [packageWithoutTags, packageWithTags] = packageList;
 
   const InfrastructureIconAndName = { name: 'InfrastructureIconAndName', template: '<div></div>' };
-  const PackageIconAndName = { name: 'PackageIconAndName', template: '<div></div>' };
 
   const findPackageTags = () => wrapper.findComponent(PackageTags);
   const findPackagePath = () => wrapper.findComponent(PackagePath);
   const findDeleteButton = () => wrapper.findByTestId('action-delete');
-  const findPackageIconAndName = () => wrapper.findComponent(PackageIconAndName);
   const findInfrastructureIconAndName = () => wrapper.findComponent(InfrastructureIconAndName);
   const findListItem = () => wrapper.findComponent(ListItem);
   const findPackageLink = () => wrapper.findComponent(GlLink);
@@ -41,7 +39,6 @@ describe('packages_list_row', () => {
       stubs: {
         ListItem,
         InfrastructureIconAndName,
-        PackageIconAndName,
       },
       propsData: {
         packageLink: 'foo',
@@ -93,13 +90,13 @@ describe('packages_list_row', () => {
     it('shows the type when set', () => {
       mountComponent();
 
-      expect(findPackageIconAndName().exists()).toBe(true);
+      expect(findInfrastructureIconAndName().exists()).toBe(true);
     });
 
     it('does not show the type when not set', () => {
       mountComponent({ showPackageType: false });
 
-      expect(findPackageIconAndName().exists()).toBe(false);
+      expect(findInfrastructureIconAndName().exists()).toBe(false);
     });
   });
 
@@ -135,27 +132,6 @@ describe('packages_list_row', () => {
     });
   });
 
-  describe('Infrastructure config', () => {
-    it('defaults to package registry components', () => {
-      mountComponent();
-
-      expect(findPackageIconAndName().exists()).toBe(true);
-      expect(findInfrastructureIconAndName().exists()).toBe(false);
-    });
-
-    it('mounts different component based on the provided values', () => {
-      mountComponent({
-        provide: {
-          iconComponent: 'InfrastructureIconAndName',
-        },
-      });
-
-      expect(findPackageIconAndName().exists()).toBe(false);
-
-      expect(findInfrastructureIconAndName().exists()).toBe(true);
-    });
-  });
-
   describe(`when the package is in ${PACKAGE_ERROR_STATUS} status`, () => {
     beforeEach(() => {
       mountComponent({ packageEntity: { ...packageWithoutTags, status: PACKAGE_ERROR_STATUS } });

spec/frontend/packages_and_registries/package_registry/components/list/packages_list_spec.js

 import { GlKeysetPagination, GlModal, GlSprintf } from '@gitlab/ui';
 import { nextTick } from 'vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import PackagesListRow from '~/packages/shared/components/package_list_row.vue';
+import PackagesListRow from '~/packages_and_registries/package_registry/components/list/package_list_row.vue';
 import PackagesListLoader from '~/packages/shared/components/packages_list_loader.vue';
 import {
   DELETE_PACKAGE_TRACKING_ACTION,