diff options
Diffstat (limited to 'app/assets/javascripts/packages/list/components/packages_list_app.vue')
-rw-r--r-- | app/assets/javascripts/packages/list/components/packages_list_app.vue | 87 |
1 files changed, 29 insertions, 58 deletions
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 2a786b92515..ee93ed2ad89 100644 --- a/app/assets/javascripts/packages/list/components/packages_list_app.vue +++ b/app/assets/javascripts/packages/list/components/packages_list_app.vue @@ -1,39 +1,43 @@ <script> import { mapActions, mapState } from 'vuex'; -import { GlEmptyState, GlTab, GlTabs, GlLink, GlSprintf } from '@gitlab/ui'; -import { s__, sprintf } from '~/locale'; +import { GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui'; +import { s__ } from '~/locale'; import createFlash from '~/flash'; import { historyReplaceState } from '~/lib/utils/common_utils'; import { SHOW_DELETE_SUCCESS_ALERT } from '~/packages/shared/constants'; -import PackageFilter from './packages_filter.vue'; +import { DELETE_PACKAGE_SUCCESS_MESSAGE } from '../constants'; import PackageList from './packages_list.vue'; -import PackageSort from './packages_sort.vue'; -import { PACKAGE_REGISTRY_TABS, DELETE_PACKAGE_SUCCESS_MESSAGE } from '../constants'; import PackageTitle from './package_title.vue'; +import PackageSearch from './package_search.vue'; export default { components: { GlEmptyState, - GlTab, - GlTabs, GlLink, GlSprintf, - PackageFilter, PackageList, - PackageSort, PackageTitle, + PackageSearch, }, computed: { ...mapState({ emptyListIllustration: (state) => state.config.emptyListIllustration, emptyListHelpUrl: (state) => state.config.emptyListHelpUrl, - filterQuery: (state) => state.filterQuery, + filter: (state) => state.filter, selectedType: (state) => state.selectedType, packageHelpUrl: (state) => state.config.packageHelpUrl, packagesCount: (state) => state.pagination?.total, }), - tabsToRender() { - return PACKAGE_REGISTRY_TABS; + emptySearch() { + return ( + 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') + : s__('PackageRegistry|Sorry, your filter produced no results'); }, }, mounted() { @@ -48,27 +52,6 @@ export default { onPackageDeleteRequest(item) { return this.requestDeletePackage(item); }, - tabChanged(index) { - const selected = PACKAGE_REGISTRY_TABS[index]; - - if (selected !== this.selectedType) { - this.setSelectedType(selected); - this.requestPackagesList(); - } - }, - emptyStateTitle({ title, type }) { - if (this.filterQuery) { - return s__('PackageRegistry|Sorry, your filter produced no results'); - } - - if (type) { - return sprintf(s__('PackageRegistry|There are no %{packageType} packages yet'), { - packageType: title, - }); - } - - return s__('PackageRegistry|There are no packages yet'); - }, checkDeleteAlert() { const urlParams = new URLSearchParams(window.location.search); const showAlert = urlParams.get(SHOW_DELETE_SUCCESS_ALERT); @@ -92,33 +75,21 @@ export default { <template> <div> <package-title :package-help-url="packageHelpUrl" :packages-count="packagesCount" /> + <package-search @sort:changed="requestPackagesList" @filter:changed="requestPackagesList" /> - <gl-tabs @input="tabChanged"> - <template #tabs-end> - <div - class="gl-display-flex gl-align-self-center gl-py-2 gl-flex-grow-1 gl-justify-content-end" - > - <package-filter class="gl-mr-2" @filter="requestPackagesList" /> - <package-sort @sort:changed="requestPackagesList" /> - </div> - </template> - - <gl-tab v-for="(tab, index) in tabsToRender" :key="index" :title="tab.title"> - <package-list @page:changed="onPageChanged" @package:delete="onPackageDeleteRequest"> - <template #empty-state> - <gl-empty-state :title="emptyStateTitle(tab)" :svg-path="emptyListIllustration"> - <template #description> - <gl-sprintf v-if="filterQuery" :message="$options.i18n.widenFilters" /> - <gl-sprintf v-else :message="$options.i18n.noResults"> - <template #noPackagesLink="{ content }"> - <gl-link :href="emptyListHelpUrl" target="_blank">{{ content }}</gl-link> - </template> - </gl-sprintf> + <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"> + <template #noPackagesLink="{ content }"> + <gl-link :href="emptyListHelpUrl" target="_blank">{{ content }}</gl-link> </template> - </gl-empty-state> + </gl-sprintf> </template> - </package-list> - </gl-tab> - </gl-tabs> + </gl-empty-state> + </template> + </package-list> </div> </template> |