diff options
Diffstat (limited to 'app/assets/javascripts/packages_and_registries/package_registry')
6 files changed, 96 insertions, 41 deletions
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_title.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_title.vue index 118c509828c..f5946797626 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_title.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_title.vue @@ -1,5 +1,5 @@ <script> -import { GlIcon, GlSprintf, GlBadge, GlResizeObserverDirective } from '@gitlab/ui'; +import { GlSprintf, GlBadge, GlResizeObserverDirective } from '@gitlab/ui'; import { GlBreakpointInstance } from '@gitlab/ui/dist/utils'; import { numberToHumanSize } from '~/lib/utils/number_utils'; import { __ } from '~/locale'; @@ -14,7 +14,6 @@ export default { name: 'PackageTitle', components: { TitleArea, - GlIcon, GlSprintf, PackageTags, MetadataItem, @@ -84,7 +83,6 @@ export default { data-qa-selector="package_title" > <template #sub-header> - <gl-icon name="eye" class="gl-mr-3" /> <span data-testid="sub-header"> <gl-sprintf :message="$options.i18n.packageInfo"> <template #version> diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue index 6222c2e73d7..04faff1a75b 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue @@ -1,5 +1,12 @@ <script> -import { GlButton, GlSprintf, GlTooltipDirective, GlTruncate } from '@gitlab/ui'; +import { + GlDropdown, + GlDropdownItem, + GlIcon, + GlSprintf, + GlTooltipDirective, + GlTruncate, +} from '@gitlab/ui'; import { s__, __ } from '~/locale'; import ListItem from '~/vue_shared/components/registry/list_item.vue'; import { @@ -17,7 +24,9 @@ import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; export default { name: 'PackageListRow', components: { - GlButton, + GlDropdown, + GlDropdownItem, + GlIcon, GlSprintf, GlTruncate, PackageTags, @@ -50,31 +59,42 @@ export default { pipelineUser() { return this.pipeline?.user?.name; }, - showWarningIcon() { + errorStatusRow() { return this.packageEntity.status === PACKAGE_ERROR_STATUS; }, showTags() { return Boolean(this.packageEntity.tags?.nodes?.length); }, - disabledRow() { + nonDefaultRow() { return this.packageEntity.status && this.packageEntity.status !== PACKAGE_DEFAULT_STATUS; }, routerLinkEvent() { - return this.disabledRow ? '' : 'click'; + return this.nonDefaultRow ? '' : 'click'; + }, + errorPackageStyle() { + return { + 'gl-text-red-500': this.errorStatusRow, + 'gl-font-weight-normal': this.errorStatusRow, + }; }, }, i18n: { erroredPackageText: s__('PackageRegistry|Invalid Package: failed metadata extraction'), createdAt: __('Created %{timestamp}'), + deletePackage: s__('PackageRegistry|Delete package'), + errorPublishing: s__('PackageRegistry|Error publishing'), + warning: __('Warning'), + moreActions: __('More actions'), }, }; </script> <template> - <list-item data-qa-selector="package_row" :disabled="disabledRow"> + <list-item data-qa-selector="package_row"> <template #left-primary> <div class="gl-display-flex gl-align-items-center gl-mr-3 gl-min-w-0"> <router-link + :class="errorPackageStyle" class="gl-text-body gl-min-w-0" data-testid="details-link" data-qa-selector="package_link" @@ -84,16 +104,6 @@ export default { <gl-truncate :text="packageEntity.name" /> </router-link> - <gl-button - v-if="showWarningIcon" - v-gl-tooltip="{ title: $options.i18n.erroredPackageText }" - class="gl-hover-bg-transparent!" - icon="warning" - category="tertiary" - data-testid="warning-icon" - :aria-label="__('Warning')" - /> - <package-tags v-if="showTags" class="gl-ml-3" @@ -104,7 +114,7 @@ export default { </div> </template> <template #left-secondary> - <div class="gl-display-flex" data-testid="left-secondary-infos"> + <div v-if="!errorStatusRow" class="gl-display-flex" data-testid="left-secondary-infos"> <span>{{ packageEntity.version }}</span> <div v-if="pipelineUser" class="gl-display-none gl-sm-display-flex gl-ml-2"> @@ -120,9 +130,19 @@ export default { <package-path v-if="isGroupPage" :path="packageEntity.project.fullPath" - :disabled="disabledRow" + :disabled="nonDefaultRow" /> </div> + <div v-else> + <gl-icon + v-gl-tooltip="{ title: $options.i18n.erroredPackageText }" + name="warning" + class="gl-text-red-500" + :aria-label="$options.i18n.warning" + data-testid="warning-icon" + /> + <span class="gl-text-red-500">{{ $options.i18n.errorPublishing }}</span> + </div> </template> <template #right-primary> @@ -139,16 +159,22 @@ export default { </span> </template> - <template v-if="!disabledRow" #right-action> - <gl-button - data-testid="action-delete" - icon="remove" - category="secondary" - variant="danger" - :title="s__('PackageRegistry|Remove package')" - :aria-label="s__('PackageRegistry|Remove package')" - @click="$emit('packageToDelete', packageEntity)" - /> + <template v-if="packageEntity.canDestroy" #right-action> + <gl-dropdown + data-testid="delete-dropdown" + icon="ellipsis_v" + :text="$options.i18n.moreActions" + :text-sr-only="true" + category="tertiary" + no-caret + > + <gl-dropdown-item + data-testid="action-delete" + variant="danger" + @click="$emit('packageToDelete', packageEntity)" + >{{ $options.i18n.deletePackage }}</gl-dropdown-item + > + </gl-dropdown> </template> </list-item> </template> 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 bf41c36e09b..440e11a99f2 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 @@ -27,21 +27,15 @@ export default { packageAmountText() { return n__(`%d Package`, `%d Packages`, this.count); }, - infoMessages() { - return [{ text: this.$options.i18n.LIST_INTRO_TEXT, link: this.helpUrl }]; - }, }, i18n: { 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> <template> - <title-area :title="$options.i18n.LIST_TITLE_TEXT" :info-messages="infoMessages"> + <title-area :title="$options.i18n.LIST_TITLE_TEXT"> <template #metadata-amount> <metadata-item v-if="showPackageCount" icon="package" :text="packageAmountText" /> </template> 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 298ed9bccdb..1aff23bc112 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,18 +1,20 @@ <script> -import { GlModal, GlSprintf, GlKeysetPagination } from '@gitlab/ui'; -import { s__ } from '~/locale'; +import { GlAlert, GlModal, GlSprintf, GlKeysetPagination } from '@gitlab/ui'; +import { s__, sprintf } from '~/locale'; import PackagesListRow from '~/packages_and_registries/package_registry/components/list/package_list_row.vue'; import PackagesListLoader from '~/packages_and_registries/shared/components/packages_list_loader.vue'; import { DELETE_PACKAGE_TRACKING_ACTION, REQUEST_DELETE_PACKAGE_TRACKING_ACTION, CANCEL_DELETE_PACKAGE_TRACKING_ACTION, + PACKAGE_ERROR_STATUS, } from '~/packages_and_registries/package_registry/constants'; import { packageTypeToTrackCategory } from '~/packages_and_registries/package_registry/utils'; import Tracking from '~/tracking'; export default { components: { + GlAlert, GlKeysetPagination, GlModal, GlSprintf, @@ -40,6 +42,7 @@ export default { data() { return { itemToBeDeleted: null, + errorPackages: [], }; }, computed: { @@ -70,6 +73,24 @@ export default { } }, }, + errorTitleAlert() { + return sprintf( + s__('PackageRegistry|There was an error publishing a %{packageName} package'), + { packageName: this.errorPackages[0].name }, + ); + }, + showErrorPackageAlert() { + return this.errorPackages.length > 0; + }, + }, + watch: { + list(newVal) { + this.errorPackages = newVal.filter((pkg) => pkg.status === PACKAGE_ERROR_STATUS); + }, + }, + created() { + this.errorPackages = + this.list.length > 0 ? this.list.filter((pkg) => pkg.status === PACKAGE_ERROR_STATUS) : []; }, methods: { setItemToBeDeleted(item) { @@ -83,12 +104,19 @@ export default { deleteItemCanceled() { this.track(CANCEL_DELETE_PACKAGE_TRACKING_ACTION); }, + showConfirmationModal() { + this.setItemToBeDeleted(this.errorPackages[0]); + }, }, i18n: { deleteModalContent: s__( 'PackageRegistry|You are about to delete %{name}, this operation is irreversible, are you sure?', ), modalAction: s__('PackageRegistry|Delete package'), + errorMessageBodyAlert: s__( + 'PackageRegistry|There was a timeout and the package was not published. Delete this package and try again.', + ), + deleteThisPackage: s__('PackageRegistry|Delete this package'), }, }; </script> @@ -102,6 +130,14 @@ export default { </div> <template v-else> + <gl-alert + v-if="showErrorPackageAlert" + variant="danger" + :title="errorTitleAlert" + :primary-button-text="$options.i18n.deleteThisPackage" + @primaryAction="showConfirmationModal" + >{{ $options.i18n.errorMessageBodyAlert }}</gl-alert + > <div data-qa-selector="packages-table"> <packages-list-row v-for="packageEntity in list" diff --git a/app/assets/javascripts/packages_and_registries/package_registry/graphql/fragments/package_data.fragment.graphql b/app/assets/javascripts/packages_and_registries/package_registry/graphql/fragments/package_data.fragment.graphql index 66315fda9e9..b5695a01376 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/graphql/fragments/package_data.fragment.graphql +++ b/app/assets/javascripts/packages_and_registries/package_registry/graphql/fragments/package_data.fragment.graphql @@ -5,6 +5,7 @@ fragment PackageData on Package { packageType createdAt status + canDestroy tags { nodes { id diff --git a/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql b/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql index c45cbe56e00..41b0c285fff 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql +++ b/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql @@ -1,4 +1,4 @@ -query getPackageDetails($id: ID!) { +query getPackageDetails($id: PackagesPackageID!) { package(id: $id) { id name |