diff options
Diffstat (limited to 'app/assets/javascripts/packages_and_registries/package_registry/components/list')
5 files changed, 156 insertions, 78 deletions
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/list/app.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/list/app.vue index 08481ac5655..11eeaf933ff 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/list/app.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/list/app.vue @@ -1,33 +1,31 @@ <script> -/* - * The following component has several commented lines, this is because we are refactoring them piece by piece on several mrs - * For a complete overview of the plan please check: https://gitlab.com/gitlab-org/gitlab/-/issues/330846 - * This work is behind feature flag: https://gitlab.com/gitlab-org/gitlab/-/issues/341136 - */ -// import { GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui'; +import { GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui'; import createFlash from '~/flash'; import { historyReplaceState } from '~/lib/utils/common_utils'; import { s__ } from '~/locale'; -import { DELETE_PACKAGE_SUCCESS_MESSAGE } from '~/packages/list/constants'; import { SHOW_DELETE_SUCCESS_ALERT } from '~/packages/shared/constants'; -import getPackagesQuery from '~/packages_and_registries/package_registry/graphql/queries/get_packages.query.graphql'; import { PROJECT_RESOURCE_TYPE, GROUP_RESOURCE_TYPE, - LIST_QUERY_DEBOUNCE_TIME, + GRAPHQL_PAGE_SIZE, + DELETE_PACKAGE_SUCCESS_MESSAGE, } 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 PackageList from './packages_list.vue'; export default { components: { - // GlEmptyState, - // GlLink, - // GlSprintf, - // PackageList, + GlEmptyState, + GlLink, + GlSprintf, + PackageList, PackageTitle, PackageSearch, + DeletePackage, }, inject: [ 'packageHelpUrl', @@ -41,6 +39,7 @@ export default { packages: {}, sort: '', filters: {}, + mutationLoading: false, }; }, apollo: { @@ -52,7 +51,9 @@ export default { update(data) { return data[this.graphqlResource].packages; }, - debounce: LIST_QUERY_DEBOUNCE_TIME, + skip() { + return !this.sort; + }, }, }, computed: { @@ -64,22 +65,40 @@ export default { groupSort: this.isGroupPage ? this.sort : undefined, packageName: this.filters?.packageName, packageType: this.filters?.packageType, + first: GRAPHQL_PAGE_SIZE, }; }, graphqlResource() { return this.isGroupPage ? GROUP_RESOURCE_TYPE : PROJECT_RESOURCE_TYPE; }, + pageInfo() { + return this.packages?.pageInfo ?? {}; + }, packagesCount() { return this.packages?.count; }, hasFilters() { return this.filters.packageName && this.filters.packageType; }, + emptySearch() { + return !this.filters.packageName && !this.filters.packageType; + }, emptyStateTitle() { return this.emptySearch ? this.$options.i18n.emptyPageTitle : this.$options.i18n.noResultsTitle; }, + isLoading() { + return this.$apollo.queries.packages.loading || this.mutationLoading; + }, + refetchQueriesData() { + return [ + { + query: getPackagesQuery, + variables: this.queryVariables, + }, + ]; + }, }, mounted() { this.checkDeleteAlert(); @@ -99,6 +118,35 @@ export default { this.sort = sort; this.filters = { ...filters }; }, + updateQuery(_, { fetchMoreResult }) { + return fetchMoreResult; + }, + fetchNextPage() { + const variables = { + ...this.queryVariables, + first: GRAPHQL_PAGE_SIZE, + last: null, + after: this.pageInfo?.endCursor, + }; + + this.$apollo.queries.packages.fetchMore({ + variables, + updateQuery: this.updateQuery, + }); + }, + fetchPreviousPage() { + const variables = { + ...this.queryVariables, + first: null, + last: GRAPHQL_PAGE_SIZE, + before: this.pageInfo?.startCursor, + }; + + this.$apollo.queries.packages.fetchMore({ + variables, + updateQuery: this.updateQuery, + }); + }, }, i18n: { widenFilters: s__('PackageRegistry|To widen your search, change or remove the filters above.'), @@ -116,19 +164,35 @@ export default { <package-title :help-url="packageHelpUrl" :count="packagesCount" /> <package-search @update="handleSearchUpdate" /> - <!-- <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="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> + <delete-package + :refetch-queries="refetchQueriesData" + show-success-alert + @start="mutationLoading = true" + @end="mutationLoading = false" + > + <template #default="{ deletePackage }"> + <package-list + :list="packages.nodes" + :is-loading="isLoading" + :page-info="pageInfo" + @prev-page="fetchPreviousPage" + @next-page="fetchNextPage" + @package:delete="deletePackage" + > + <template #empty-state> + <gl-empty-state :title="emptyStateTitle" :svg-path="emptyListIllustration"> + <template #description> + <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> + </template> + </gl-sprintf> </template> - </gl-sprintf> + </gl-empty-state> </template> - </gl-empty-state> + </package-list> </template> - </package-list> --> + </delete-package> </div> </template> diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_search.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_search.vue index 836df59ca58..3483d23e251 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_search.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_search.vue @@ -1,6 +1,6 @@ <script> import { s__ } from '~/locale'; -import { sortableFields } from '~/packages/list/utils'; +import { sortableFields } from '~/packages_and_registries/package_registry/utils'; import { OPERATOR_IS_ONLY } from '~/vue_shared/components/filtered_search_bar/constants'; import RegistrySearch from '~/vue_shared/components/registry/registry_search.vue'; import UrlSync from '~/vue_shared/components/url_sync.vue'; diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_title.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_title.vue index 6e00a48586e..bf41c36e09b 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_title.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_title.vue @@ -1,6 +1,5 @@ <script> -import { n__ } from '~/locale'; -import { LIST_INTRO_TEXT, LIST_TITLE_TEXT } from '~/packages/list/constants'; +import { n__, s__ } from '~/locale'; import MetadataItem from '~/vue_shared/components/registry/metadata_item.vue'; import TitleArea from '~/vue_shared/components/registry/title_area.vue'; @@ -29,11 +28,14 @@ export default { return n__(`%d Package`, `%d Packages`, this.count); }, infoMessages() { - return [{ text: LIST_INTRO_TEXT, link: this.helpUrl }]; + return [{ text: this.$options.i18n.LIST_INTRO_TEXT, link: this.helpUrl }]; }, }, i18n: { - LIST_TITLE_TEXT, + LIST_TITLE_TEXT: s__('PackageRegistry|Package Registry'), + LIST_INTRO_TEXT: s__( + 'PackageRegistry|Publish and share packages for a variety of common package managers. %{docLinkStart}More information%{docLinkEnd}', + ), }, }; </script> diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue index 25bac687dbf..2a946544c2f 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue @@ -1,82 +1,94 @@ <script> -import { GlPagination, GlModal, GlSprintf } from '@gitlab/ui'; -import { mapState, mapGetters } from 'vuex'; +import { GlModal, GlSprintf, GlKeysetPagination } from '@gitlab/ui'; import { s__ } from '~/locale'; -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 { TrackingActions } from '~/packages/shared/constants'; -import { packageTypeToTrackCategory } from '~/packages/shared/utils'; +import { + DELETE_PACKAGE_TRACKING_ACTION, + REQUEST_DELETE_PACKAGE_TRACKING_ACTION, + CANCEL_DELETE_PACKAGE_TRACKING_ACTION, +} from '~/packages_and_registries/package_registry/constants'; +import { packageTypeToTrackCategory } from '~/packages_and_registries/package_registry/utils'; import Tracking from '~/tracking'; export default { components: { - GlPagination, + GlKeysetPagination, GlModal, GlSprintf, PackagesListLoader, PackagesListRow, }, mixins: [Tracking.mixin()], + props: { + list: { + type: Array, + required: false, + default: () => [], + }, + isLoading: { + type: Boolean, + required: false, + default: false, + }, + pageInfo: { + type: Object, + required: true, + }, + }, + data() { return { itemToBeDeleted: null, }; }, computed: { - ...mapState({ - perPage: (state) => state.pagination.perPage, - totalItems: (state) => state.pagination.total, - page: (state) => state.pagination.page, - isGroupPage: (state) => state.config.isGroupPage, - isLoading: 'isLoading', - }), - ...mapGetters({ list: 'getList' }), - currentPage: { - get() { - return this.page; - }, - set(value) { - this.$emit('page:changed', value); - }, - }, isListEmpty() { return !this.list || this.list.length === 0; }, - modalAction() { - return s__('PackageRegistry|Delete package'); - }, deletePackageName() { return this.itemToBeDeleted?.name ?? ''; }, tracking() { const category = this.itemToBeDeleted - ? packageTypeToTrackCategory(this.itemToBeDeleted.package_type) + ? packageTypeToTrackCategory(this.itemToBeDeleted.packageType) : undefined; return { category, }; }, + showPagination() { + return this.pageInfo.hasPreviousPage || this.pageInfo.hasNextPage; + }, + showDeleteModal: { + get() { + return Boolean(this.itemToBeDeleted); + }, + set(value) { + if (!value) { + this.itemToBeDeleted = null; + } + }, + }, }, methods: { setItemToBeDeleted(item) { this.itemToBeDeleted = { ...item }; - this.track(TrackingActions.REQUEST_DELETE_PACKAGE); - this.$refs.packageListDeleteModal.show(); + this.track(REQUEST_DELETE_PACKAGE_TRACKING_ACTION); }, deleteItemConfirmation() { this.$emit('package:delete', this.itemToBeDeleted); - this.track(TrackingActions.DELETE_PACKAGE); - this.itemToBeDeleted = null; + this.track(DELETE_PACKAGE_TRACKING_ACTION); }, deleteItemCanceled() { - this.track(TrackingActions.CANCEL_DELETE_PACKAGE); - this.itemToBeDeleted = null; + this.track(CANCEL_DELETE_PACKAGE_TRACKING_ACTION); }, }, i18n: { deleteModalContent: s__( 'PackageRegistry|You are about to delete %{name}, this operation is irreversible, are you sure?', ), + modalAction: s__('PackageRegistry|Delete package'), }, }; </script> @@ -95,29 +107,29 @@ export default { v-for="packageEntity in list" :key="packageEntity.id" :package-entity="packageEntity" - :package-link="packageEntity._links.web_path" - :is-group="isGroupPage" @packageToDelete="setItemToBeDeleted" /> </div> - <gl-pagination - v-model="currentPage" - :per-page="perPage" - :total-items="totalItems" - align="center" - class="gl-w-full gl-mt-3" - /> + <div class="gl-display-flex gl-justify-content-center"> + <gl-keyset-pagination + v-if="showPagination" + v-bind="pageInfo" + class="gl-mt-3" + @prev="$emit('prev-page')" + @next="$emit('next-page')" + /> + </div> <gl-modal - ref="packageListDeleteModal" + v-model="showDeleteModal" modal-id="confirm-delete-pacakge" ok-variant="danger" @ok="deleteItemConfirmation" @cancel="deleteItemCanceled" > - <template #modal-title>{{ modalAction }}</template> - <template #modal-ok>{{ modalAction }}</template> + <template #modal-title>{{ $options.i18n.modalAction }}</template> + <template #modal-ok>{{ $options.i18n.modalAction }}</template> <gl-sprintf :message="$options.i18n.deleteModalContent"> <template #name> <strong>{{ deletePackageName }}</strong> diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/list/tokens/package_type_token.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/list/tokens/package_type_token.vue index 529a7893dfc..59354e77ee9 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/list/tokens/package_type_token.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/list/tokens/package_type_token.vue @@ -1,6 +1,6 @@ <script> import { GlFilteredSearchToken, GlFilteredSearchSuggestion } from '@gitlab/ui'; -import { PACKAGE_TYPES } from '~/packages/list/constants'; +import { PACKAGE_TYPES } from '~/packages_and_registries/package_registry/constants'; export default { components: { @@ -17,9 +17,9 @@ export default { <gl-filtered-search-suggestion v-for="(type, index) in $options.PACKAGE_TYPES" :key="index" - :value="type.type" + :value="type" > - {{ type.title }} + {{ type }} </gl-filtered-search-suggestion> </template> </gl-filtered-search-token> |