diff options
Diffstat (limited to 'app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list.vue')
-rw-r--r-- | app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list.vue | 86 |
1 files changed, 29 insertions, 57 deletions
diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list.vue index 3e19a646f53..2d32295b537 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list.vue +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list.vue @@ -1,7 +1,8 @@ <script> -import { GlButton, GlKeysetPagination } from '@gitlab/ui'; import createFlash from '~/flash'; +import { n__ } from '~/locale'; import { joinPaths } from '~/lib/utils/url_utility'; +import RegistryList from '~/packages_and_registries/shared/components/registry_list.vue'; import { REMOVE_TAGS_BUTTON_TITLE, TAGS_LIST_TITLE, @@ -16,11 +17,10 @@ import TagsLoader from './tags_loader.vue'; export default { name: 'TagsList', components: { - GlButton, - GlKeysetPagination, TagsListRow, EmptyState, TagsLoader, + RegistryList, }, inject: ['config'], props: { @@ -61,11 +61,13 @@ export default { }, data() { return { - selectedItems: {}, containerRepository: {}, }; }, computed: { + listTitle() { + return n__('%d tag', '%d tags', this.tags.length); + }, tags() { return this.containerRepository?.tags?.nodes || []; }, @@ -78,18 +80,9 @@ export default { first: GRAPHQL_PAGE_SIZE, }; }, - hasSelectedItems() { - return this.tags.some((tag) => this.selectedItems[tag.name]); - }, showMultiDeleteButton() { return this.tags.some((tag) => tag.canDelete) && !this.isMobile; }, - multiDeleteButtonIsDisabled() { - return !this.hasSelectedItems || this.disabled; - }, - showPagination() { - return this.tagsPageInfo.hasPreviousPage || this.tagsPageInfo.hasNextPage; - }, hasNoTags() { return this.tags.length === 0; }, @@ -98,19 +91,13 @@ export default { }, }, methods: { - updateSelectedItems(name) { - this.$set(this.selectedItems, name, !this.selectedItems[name]); - }, - mapTagsToBeDleeted(items) { - return this.tags.filter((tag) => items[tag.name]); - }, fetchNextPage() { this.$apollo.queries.containerRepository.fetchMore({ variables: { after: this.tagsPageInfo?.endCursor, first: GRAPHQL_PAGE_SIZE, }, - updateQuery(previousResult, { fetchMoreResult }) { + updateQuery(_, { fetchMoreResult }) { return fetchMoreResult; }, }); @@ -122,7 +109,7 @@ export default { before: this.tagsPageInfo?.startCursor, last: GRAPHQL_PAGE_SIZE, }, - updateQuery(previousResult, { fetchMoreResult }) { + updateQuery(_, { fetchMoreResult }) { return fetchMoreResult; }, }); @@ -137,42 +124,27 @@ export default { <template v-else> <empty-state v-if="hasNoTags" :no-containers-image="config.noContainersImage" /> <template v-else> - <div class="gl-display-flex gl-justify-content-space-between gl-mb-3"> - <h5 data-testid="list-title"> - {{ $options.i18n.TAGS_LIST_TITLE }} - </h5> - - <gl-button - v-if="showMultiDeleteButton" - :disabled="multiDeleteButtonIsDisabled" - category="secondary" - variant="danger" - @click="$emit('delete', mapTagsToBeDleeted(selectedItems))" - > - {{ $options.i18n.REMOVE_TAGS_BUTTON_TITLE }} - </gl-button> - </div> - <tags-list-row - v-for="(tag, index) in tags" - :key="tag.path" - :tag="tag" - :first="index === 0" - :selected="selectedItems[tag.name]" - :is-mobile="isMobile" - :disabled="disabled" - @select="updateSelectedItems(tag.name)" - @delete="$emit('delete', mapTagsToBeDleeted({ [tag.name]: true }))" - /> - <div class="gl-display-flex gl-justify-content-center"> - <gl-keyset-pagination - v-if="showPagination" - :has-next-page="tagsPageInfo.hasNextPage" - :has-previous-page="tagsPageInfo.hasPreviousPage" - class="gl-mt-3" - @prev="fetchPreviousPage" - @next="fetchNextPage" - /> - </div> + <registry-list + :title="listTitle" + :pagination="tagsPageInfo" + :items="tags" + id-property="name" + @prev-page="fetchPreviousPage" + @next-page="fetchNextPage" + @delete="$emit('delete', $event)" + > + <template #default="{ selectItem, isSelected, item, first }"> + <tags-list-row + :tag="item" + :first="first" + :selected="isSelected(item)" + :is-mobile="isMobile" + :disabled="disabled" + @select="selectItem(item)" + @delete="$emit('delete', [item])" + /> + </template> + </registry-list> </template> </template> </div> |