diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-04-20 23:50:22 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-04-20 23:50:22 +0000 |
commit | 9dc93a4519d9d5d7be48ff274127136236a3adb3 (patch) | |
tree | 70467ae3692a0e35e5ea56bcb803eb512a10bedb /app/assets/javascripts/packages/list | |
parent | 4b0f34b6d759d6299322b3a54453e930c6121ff0 (diff) | |
download | gitlab-ce-9dc93a4519d9d5d7be48ff274127136236a3adb3.tar.gz |
Add latest changes from gitlab-org/gitlab@13-11-stable-eev13.11.0-rc43
Diffstat (limited to 'app/assets/javascripts/packages/list')
6 files changed, 79 insertions, 40 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 |