Add latest changes from gitlab-org/gitlab@13-11-stable-eev13.11.0-rc42

10 files changed, 122 insertions, 53 deletions

diff --git a/app/assets/javascripts/packages/list/components/package_search.vue b/app/assets/javascripts/packages/list/components/package_search.vue
index cd61d323d83..2e183b1b978 100644
--- a/app/assets/javascripts/packages/list/components/package_search.vue
+++ b/app/assets/javascripts/packages/list/components/package_search.vue
@@ -2,7 +2,8 @@
 import { mapState, mapActions } from 'vuex';
 import { __, s__ } from '~/locale';
 import RegistrySearch from '~/vue_shared/components/registry/registry_search.vue';
-import getTableHeaders from '../utils';
+import UrlSync from '~/vue_shared/components/url_sync.vue';
+import { sortableFields } from '../utils';
 import PackageTypeToken from './tokens/package_type_token.vue';
 
 export default {
@@ -16,7 +17,7 @@ export default {
       operators: [{ value: '=', description: __('is'), default: 'true' }],
     },
   ],
-  components: { RegistrySearch },
+  components: { RegistrySearch, UrlSync },
   computed: {
     ...mapState({
       isGroupPage: (state) => state.config.isGroupPage,
@@ -24,7 +25,7 @@ export default {
       filter: (state) => state.filter,
     }),
     sortableFields() {
-      return getTableHeaders(this.isGroupPage);
+      return sortableFields(this.isGroupPage);
     },
   },
   methods: {
@@ -38,13 +39,18 @@ export default {
 </script>
 
 <template>
-  <registry-search
-    :filter="filter"
-    :sorting="sorting"
-    :tokens="$options.tokens"
-    :sortable-fields="sortableFields"
-    @sorting:changed="updateSorting"
-    @filter:changed="setFilter"
-    @filter:submit="$emit('update')"
-  />
+  <url-sync>
+    <template #default="{ updateQuery }">
+      <registry-search
+        :filter="filter"
+        :sorting="sorting"
+        :tokens="$options.tokens"
+        :sortable-fields="sortableFields"
+        @sorting:changed="updateSorting"
+        @filter:changed="setFilter"
+        @filter:submit="$emit('update')"
+        @query:changed="updateQuery"
+      />
+    </template>
+  </url-sync>
 </template>
diff --git a/app/assets/javascripts/packages/list/components/package_title.vue b/app/assets/javascripts/packages/list/components/package_title.vue
index 6176e15ffd4..426ad150ea9 100644
--- a/app/assets/javascripts/packages/list/components/package_title.vue
+++ b/app/assets/javascripts/packages/list/components/package_title.vue
@@ -11,25 +11,25 @@ export default {
     MetadataItem,
   },
   props: {
-    packagesCount: {
+    count: {
       type: Number,
       required: false,
       default: null,
     },
-    packageHelpUrl: {
+    helpUrl: {
       type: String,
       required: true,
     },
   },
   computed: {
     showPackageCount() {
-      return Number.isInteger(this.packagesCount);
+      return Number.isInteger(this.count);
     },
     packageAmountText() {
-      return n__(`%d Package`, `%d Packages`, this.packagesCount);
+      return n__(`%d Package`, `%d Packages`, this.count);
     },
     infoMessages() {
-      return [{ text: LIST_INTRO_TEXT, link: this.packageHelpUrl }];
+      return [{ text: LIST_INTRO_TEXT, link: this.helpUrl }];
     },
   },
   i18n: {
diff --git a/app/assets/javascripts/packages/list/components/packages_list_app.vue b/app/assets/javascripts/packages/list/components/packages_list_app.vue
index a609dfebedf..4c5fb0ee7c9 100644
--- a/app/assets/javascripts/packages/list/components/packages_list_app.vue
+++ b/app/assets/javascripts/packages/list/components/packages_list_app.vue
@@ -5,9 +5,9 @@ import createFlash from '~/flash';
 import { historyReplaceState } from '~/lib/utils/common_utils';
 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 { DELETE_PACKAGE_SUCCESS_MESSAGE } from '../constants';
-import PackageSearch from './package_search.vue';
-import PackageTitle from './package_title.vue';
 import PackageList from './packages_list.vue';
 
 export default {
@@ -16,8 +16,38 @@ export default {
     GlLink,
     GlSprintf,
     PackageList,
-    PackageTitle,
-    PackageSearch,
+    PackageTitle: () =>
+      import(/* webpackChunkName: 'package_registry_components' */ './package_title.vue'),
+    PackageSearch: () =>
+      import(/* webpackChunkName: 'package_registry_components' */ './package_search.vue'),
+    InfrastructureTitle: () =>
+      import(
+        /* webpackChunkName: 'infrastructure_registry_components' */ '~/packages_and_registries/infrastructure_registry/components/infrastructure_title.vue'
+      ),
+    InfrastructureSearch: () =>
+      import(
+        /* webpackChunkName: 'infrastructure_registry_components' */ '~/packages_and_registries/infrastructure_registry/components/infrastructure_search.vue'
+      ),
+  },
+  inject: {
+    titleComponent: {
+      from: 'titleComponent',
+      default: 'PackageTitle',
+    },
+    searchComponent: {
+      from: 'searchComponent',
+      default: 'PackageSearch',
+    },
+    emptyPageTitle: {
+      from: 'emptyPageTitle',
+      default: s__('PackageRegistry|There are no packages yet'),
+    },
+    noResultsText: {
+      from: 'noResultsText',
+      default: s__(
+        'PackageRegistry|Learn how to %{noPackagesLinkStart}publish and share your packages%{noPackagesLinkEnd} with GitLab.',
+      ),
+    },
   },
   computed: {
     ...mapState({
@@ -30,22 +60,32 @@ export default {
     }),
     emptySearch() {
       return (
-        this.filter.filter((f) => f.type !== 'filtered-search-term' || f.value?.data).length === 0
+        this.filter.filter((f) => f.type !== FILTERED_SEARCH_TERM || f.value?.data).length === 0
       );
     },
 
     emptyStateTitle() {
       return this.emptySearch
-        ? s__('PackageRegistry|There are no packages yet')
+        ? this.emptyPageTitle
         : s__('PackageRegistry|Sorry, your filter produced no results');
     },
   },
   mounted() {
+    const queryParams = getQueryParams(window.document.location.search);
+    const { sorting, filters } = extractFilterAndSorting(queryParams);
+    this.setSorting(sorting);
+    this.setFilter(filters);
     this.requestPackagesList();
     this.checkDeleteAlert();
   },
   methods: {
-    ...mapActions(['requestPackagesList', 'requestDeletePackage', 'setSelectedType']),
+    ...mapActions([
+      'requestPackagesList',
+      'requestDeletePackage',
+      'setSelectedType',
+      'setSorting',
+      'setFilter',
+    ]),
     onPageChanged(page) {
       return this.requestPackagesList({ page });
     },
@@ -65,24 +105,21 @@ export default {
   },
   i18n: {
     widenFilters: s__('PackageRegistry|To widen your search, change or remove the filters above.'),
-    noResults: s__(
-      'PackageRegistry|Learn how to %{noPackagesLinkStart}publish and share your packages%{noPackagesLinkEnd} with GitLab.',
-    ),
   },
 };
 </script>
 
 <template>
   <div>
-    <package-title :package-help-url="packageHelpUrl" :packages-count="packagesCount" />
-    <package-search @update="requestPackagesList" />
+    <component :is="titleComponent" :help-url="packageHelpUrl" :count="packagesCount" />
+    <component :is="searchComponent" @update="requestPackagesList" />
 
     <package-list @page:changed="onPageChanged" @package:delete="onPackageDeleteRequest">
       <template #empty-state>
         <gl-empty-state :title="emptyStateTitle" :svg-path="emptyListIllustration">
           <template #description>
             <gl-sprintf v-if="!emptySearch" :message="$options.i18n.widenFilters" />
-            <gl-sprintf v-else :message="$options.i18n.noResults">
+            <gl-sprintf v-else :message="noResultsText">
               <template #noPackagesLink="{ content }">
                 <gl-link :href="emptyListHelpUrl" target="_blank">{{ content }}</gl-link>
               </template>
diff --git a/app/assets/javascripts/packages/list/constants.js b/app/assets/javascripts/packages/list/constants.js
index 25a55200df2..b4fe3c70dea 100644
--- a/app/assets/javascripts/packages/list/constants.js
+++ b/app/assets/javascripts/packages/list/constants.js
@@ -82,6 +82,10 @@ export const PACKAGE_TYPES = [
     title: s__('PackageRegistry|PyPI'),
     type: PackageType.PYPI,
   },
+  {
+    title: s__('PackageRegistry|RubyGems'),
+    type: PackageType.RUBYGEMS,
+  },
 ];
 
 export const LIST_TITLE_TEXT = s__('PackageRegistry|Package Registry');
diff --git a/app/assets/javascripts/packages/list/packages_list_app_bundle.js b/app/assets/javascripts/packages/list/packages_list_app_bundle.js
index 58b09c1ebd1..2911cf70a33 100644
--- a/app/assets/javascripts/packages/list/packages_list_app_bundle.js
+++ b/app/assets/javascripts/packages/list/packages_list_app_bundle.js
@@ -1,11 +1,8 @@
 import Vue from 'vue';
-import VueApollo from 'vue-apollo';
-import createDefaultClient from '~/lib/graphql';
 import Translate from '~/vue_shared/translate';
 import PackagesListApp from './components/packages_list_app.vue';
 import { createStore } from './stores';
 
-Vue.use(VueApollo);
 Vue.use(Translate);
 
 export default () => {
@@ -13,14 +10,9 @@ export default () => {
   const store = createStore();
   store.dispatch('setInitialState', el.dataset);
 
-  const apolloProvider = new VueApollo({
-    defaultClient: createDefaultClient(),
-  });
-
   return new Vue({
     el,
     store,
-    apolloProvider,
     components: {
       PackagesListApp,
     },
diff --git a/app/assets/javascripts/packages/list/utils.js b/app/assets/javascripts/packages/list/utils.js
index ee89d3cdefe..537b30d2ca4 100644
--- a/app/assets/javascripts/packages/list/utils.js
+++ b/app/assets/javascripts/packages/list/utils.js
@@ -1,7 +1,7 @@
 import { LIST_KEY_PROJECT, SORT_FIELDS } from './constants';
 
-export default (isGroupPage) =>
-  SORT_FIELDS.filter((f) => f.key !== LIST_KEY_PROJECT || isGroupPage);
+export const sortableFields = (isGroupPage) =>
+  SORT_FIELDS.filter((f) => f.orderBy !== LIST_KEY_PROJECT || isGroupPage);
 
 /**
  * A small util function that works out if the delete action has deleted the
diff --git a/app/assets/javascripts/packages/shared/components/package_icon_and_name.vue b/app/assets/javascripts/packages/shared/components/package_icon_and_name.vue
new file mode 100644
index 00000000000..105f7bbe132
--- /dev/null
+++ b/app/assets/javascripts/packages/shared/components/package_icon_and_name.vue
@@ -0,0 +1,17 @@
+<script>
+import { GlIcon } from '@gitlab/ui';
+
+export default {
+  name: 'PackageIconAndName',
+  components: {
+    GlIcon,
+  },
+};
+</script>
+
+<template>
+  <div class="gl-display-flex gl-align-items-center">
+    <gl-icon name="package" class="gl-ml-3 gl-mr-2" />
+    <span><slot></slot></span>
+  </div>
+</template>
diff --git a/app/assets/javascripts/packages/shared/components/package_list_row.vue b/app/assets/javascripts/packages/shared/components/package_list_row.vue
index 172b356227a..4de4c191e51 100644
--- a/app/assets/javascripts/packages/shared/components/package_list_row.vue
+++ b/app/assets/javascripts/packages/shared/components/package_list_row.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlIcon, GlLink, GlSprintf, GlTooltipDirective, GlTruncate } from '@gitlab/ui';
+import { GlButton, GlLink, GlSprintf, GlTooltipDirective, GlTruncate } from '@gitlab/ui';
 import ListItem from '~/vue_shared/components/registry/list_item.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import { getPackageTypeLabel } from '../utils';
@@ -11,7 +11,6 @@ export default {
   name: 'PackageListRow',
   components: {
     GlButton,
-    GlIcon,
     GlLink,
     GlSprintf,
     GlTruncate,
@@ -19,11 +18,23 @@ 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'
+      ),
   },
   directives: {
     GlTooltip: GlTooltipDirective,
   },
   mixins: [timeagoMixin],
+  inject: {
+    iconComponent: {
+      from: 'iconComponent',
+      default: 'PackageIconAndName',
+    },
+  },
   props: {
     packageEntity: {
       type: Object,
@@ -94,10 +105,9 @@ export default {
           </gl-sprintf>
         </div>
 
-        <div v-if="showPackageType" class="d-flex align-items-center" data-testid="package-type">
-          <gl-icon name="package" class="gl-ml-3 gl-mr-2" />
-          <span>{{ packageType }}</span>
-        </div>
+        <component :is="iconComponent" v-if="showPackageType">
+          {{ packageType }}
+        </component>
 
         <package-path v-if="hasProjectLink" :path="packageEntity.project_path" />
       </div>
diff --git a/app/assets/javascripts/packages/shared/constants.js b/app/assets/javascripts/packages/shared/constants.js
index c0f7f150337..f7de31c2c86 100644
--- a/app/assets/javascripts/packages/shared/constants.js
+++ b/app/assets/javascripts/packages/shared/constants.js
@@ -7,6 +7,7 @@ export const PackageType = {
   NUGET: 'nuget',
   PYPI: 'pypi',
   COMPOSER: 'composer',
+  RUBYGEMS: 'rubygems',
   GENERIC: 'generic',
 };
 
diff --git a/app/assets/javascripts/packages/shared/utils.js b/app/assets/javascripts/packages/shared/utils.js
index d34372e89b6..bd35a47ca4d 100644
--- a/app/assets/javascripts/packages/shared/utils.js
+++ b/app/assets/javascripts/packages/shared/utils.js
@@ -10,19 +10,21 @@ export const beautifyPath = (path) => (path ? path.split('/').join(' / ') : '');
 export const getPackageTypeLabel = (packageType) => {
   switch (packageType) {
     case PackageType.CONAN:
-      return s__('PackageType|Conan');
+      return s__('PackageRegistry|Conan');
     case PackageType.MAVEN:
-      return s__('PackageType|Maven');
+      return s__('PackageRegistry|Maven');
     case PackageType.NPM:
-      return s__('PackageType|npm');
+      return s__('PackageRegistry|npm');
     case PackageType.NUGET:
-      return s__('PackageType|NuGet');
+      return s__('PackageRegistry|NuGet');
     case PackageType.PYPI:
-      return s__('PackageType|PyPI');
+      return s__('PackageRegistry|PyPI');
+    case PackageType.RUBYGEMS:
+      return s__('PackageRegistry|RubyGems');
     case PackageType.COMPOSER:
-      return s__('PackageType|Composer');
+      return s__('PackageRegistry|Composer');
     case PackageType.GENERIC:
-      return s__('PackageType|Generic');
+      return s__('PackageRegistry|Generic');
     default:
       return null;
   }