diff options
Diffstat (limited to 'app/assets/javascripts/packages_and_registries/harbor_registry/components/list')
3 files changed, 193 insertions, 0 deletions
diff --git a/app/assets/javascripts/packages_and_registries/harbor_registry/components/list/harbor_list.vue b/app/assets/javascripts/packages_and_registries/harbor_registry/components/list/harbor_list.vue new file mode 100644 index 00000000000..c1b5367c96a --- /dev/null +++ b/app/assets/javascripts/packages_and_registries/harbor_registry/components/list/harbor_list.vue @@ -0,0 +1,42 @@ +<script> +import RegistryList from '~/packages_and_registries/shared/components/registry_list.vue'; +import HarborListRow from '~/packages_and_registries/harbor_registry/components/list/harbor_list_row.vue'; + +export default { + name: 'HarborList', + components: { + RegistryList, + HarborListRow, + }, + props: { + images: { + type: Array, + required: true, + }, + metadataLoading: { + type: Boolean, + default: false, + required: false, + }, + pageInfo: { + type: Object, + required: true, + }, + }, +}; +</script> + +<template> + <registry-list + :items="images" + :hidden-delete="true" + :pagination="pageInfo" + id-property="name" + @prev-page="$emit('prev-page')" + @next-page="$emit('next-page')" + > + <template #default="{ item }"> + <harbor-list-row :item="item" :metadata-loading="metadataLoading" /> + </template> + </registry-list> +</template> diff --git a/app/assets/javascripts/packages_and_registries/harbor_registry/components/list/harbor_list_header.vue b/app/assets/javascripts/packages_and_registries/harbor_registry/components/list/harbor_list_header.vue new file mode 100644 index 00000000000..086b9c73d75 --- /dev/null +++ b/app/assets/javascripts/packages_and_registries/harbor_registry/components/list/harbor_list_header.vue @@ -0,0 +1,67 @@ +<script> +import { sprintf } from '~/locale'; +import TitleArea from '~/vue_shared/components/registry/title_area.vue'; +import { + HARBOR_REGISTRY_TITLE, + LIST_INTRO_TEXT, + imagesCountInfoText, +} from '~/packages_and_registries/harbor_registry/constants'; +import MetadataItem from '~/vue_shared/components/registry/metadata_item.vue'; + +export default { + name: 'HarborListHeader', + components: { + TitleArea, + MetadataItem, + }, + props: { + imagesCount: { + type: Number, + default: 0, + required: false, + }, + helpPagePath: { + type: String, + default: '', + required: false, + }, + metadataLoading: { + type: Boolean, + required: false, + default: false, + }, + }, + i18n: { + HARBOR_REGISTRY_TITLE, + }, + computed: { + imagesCountText() { + const pluralisedString = imagesCountInfoText(this.imagesCount); + return sprintf(pluralisedString, { count: this.imagesCount }); + }, + infoMessages() { + return [{ text: LIST_INTRO_TEXT, link: this.helpPagePath }]; + }, + }, +}; +</script> + +<template> + <title-area + :title="$options.i18n.HARBOR_REGISTRY_TITLE" + :info-messages="infoMessages" + :metadata-loading="metadataLoading" + > + <template #right-actions> + <slot name="commands"></slot> + </template> + <template #metadata-count> + <metadata-item + v-if="imagesCount" + data-testid="images-count" + icon="container-image" + :text="imagesCountText" + /> + </template> + </title-area> +</template> diff --git a/app/assets/javascripts/packages_and_registries/harbor_registry/components/list/harbor_list_row.vue b/app/assets/javascripts/packages_and_registries/harbor_registry/components/list/harbor_list_row.vue new file mode 100644 index 00000000000..258472fe16e --- /dev/null +++ b/app/assets/javascripts/packages_and_registries/harbor_registry/components/list/harbor_list_row.vue @@ -0,0 +1,84 @@ +<script> +import { GlIcon, GlSprintf, GlSkeletonLoader } from '@gitlab/ui'; +import { n__ } from '~/locale'; + +import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; +import ListItem from '~/vue_shared/components/registry/list_item.vue'; + +export default { + name: 'HarborListRow', + components: { + ClipboardButton, + GlSprintf, + GlIcon, + ListItem, + GlSkeletonLoader, + }, + props: { + item: { + type: Object, + required: true, + }, + metadataLoading: { + type: Boolean, + default: false, + required: false, + }, + }, + computed: { + id() { + return this.item.id; + }, + artifactCountText() { + return n__( + 'HarborRegistry|%{count} Tag', + 'HarborRegistry|%{count} Tags', + this.item.artifactCount, + ); + }, + imageName() { + return this.item.name; + }, + }, +}; +</script> + +<template> + <list-item v-bind="$attrs"> + <template #left-primary> + <router-link + class="gl-text-body gl-font-weight-bold" + data-testid="details-link" + data-qa-selector="registry_image_content" + :to="{ name: 'details', params: { id } }" + > + {{ imageName }} + </router-link> + <clipboard-button + v-if="item.location" + :text="item.location" + :title="item.location" + category="tertiary" + /> + </template> + <template #left-secondary> + <template v-if="!metadataLoading"> + <span class="gl-display-flex gl-align-items-center" data-testid="tags-count"> + <gl-icon name="tag" class="gl-mr-2" /> + <gl-sprintf :message="artifactCountText"> + <template #count> + {{ item.artifactCount }} + </template> + </gl-sprintf> + </span> + </template> + + <div v-else class="gl-w-full"> + <gl-skeleton-loader :width="900" :height="16" preserve-aspect-ratio="xMinYMax meet"> + <circle cx="6" cy="8" r="6" /> + <rect x="16" y="4" width="100" height="8" rx="4" /> + </gl-skeleton-loader> + </div> + </template> + </list-item> +</template> |