diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-04-26 15:09:50 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-04-26 15:09:50 +0300 |
commit | ae4756174c3c379caeca8da50ade9675e157ae95 (patch) | |
tree | 96efa063ad7ea7363388b84bfc034b4d4cd7b554 /app/assets/javascripts/packages_and_registries | |
parent | 52fd2a9921bdaa1938143703811f565a7c60a8c4 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/packages_and_registries')
2 files changed, 92 insertions, 30 deletions
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..09988f4e1d9 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 #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/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" |