diff options
Diffstat (limited to 'app/assets/javascripts/packages_and_registries/container_registry')
6 files changed, 66 insertions, 12 deletions
diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/details_header.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/details_header.vue index ab0418388cd..5d77ff9dc0d 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/details_header.vue +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/details_header.vue @@ -20,7 +20,6 @@ import { UNSCHEDULED_STATUS, SCHEDULED_STATUS, ONGOING_STATUS, - ROOT_IMAGE_TEXT, ROOT_IMAGE_TOOLTIP, } from '../../constants/index'; @@ -100,7 +99,7 @@ export default { return !this.imageDetails.name ? ROOT_IMAGE_TOOLTIP : ''; }, imageName() { - return this.imageDetails.name || ROOT_IMAGE_TEXT; + return this.imageDetails.name || this.imageDetails.project?.path; }, formattedSize() { const { size } = this.imageDetails; diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status.vue index 56da8e88b7a..bfa99c01c3f 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status.vue +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status.vue @@ -1,4 +1,5 @@ <script> +import { uniqueId } from 'lodash'; import { GlIcon, GlPopover, GlLink, GlSprintf } from '@gitlab/ui'; import { helpPagePath } from '~/helpers/help_page_helper'; import { timeTilRun } from '../../utils'; @@ -43,6 +44,11 @@ export default { CLEANUP_STATUS_UNFINISHED, PARTIAL_CLEANUP_CONTINUE_MESSAGE, }, + data() { + return { + iconId: uniqueId('status-info-'), + }; + }, computed: { showStatus() { return this.status !== UNSCHEDULED_STATUS; @@ -85,14 +91,14 @@ export default { </span> <gl-icon v-if="failedDelete" - id="status-info" + :id="iconId" :size="14" class="gl-text-gray-500" data-testid="extra-info" name="information-o" /> <gl-popover - target="status-info" + :target="iconId" container="status-popover-container" v-bind="$options.statusPopoverOptions" > diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list_row.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list_row.vue index e67d77210bb..aecc0bf92ea 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list_row.vue +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list_row.vue @@ -1,10 +1,12 @@ <script> -import { GlTooltipDirective, GlIcon, GlSprintf, GlSkeletonLoader } from '@gitlab/ui'; +import { GlTooltipDirective, GlIcon, GlSprintf, GlSkeletonLoader, GlButton } from '@gitlab/ui'; import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import { n__ } from '~/locale'; - +import Tracking from '~/tracking'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import ListItem from '~/vue_shared/components/registry/list_item.vue'; +import { joinPaths } from '~/lib/utils/url_utility'; import { LIST_DELETE_BUTTON_DISABLED, LIST_DELETE_BUTTON_DISABLED_FOR_MIGRATION, @@ -13,8 +15,10 @@ import { IMAGE_DELETE_SCHEDULED_STATUS, IMAGE_FAILED_DELETED_STATUS, IMAGE_MIGRATING_STATE, - ROOT_IMAGE_TEXT, COPY_IMAGE_PATH_TITLE, + IMAGE_FULL_PATH_LABEL, + TRACKING_ACTION_CLICK_SHOW_FULL_PATH, + TRACKING_LABEL_REGISTRY_IMAGE_LIST, } from '../../constants/index'; import DeleteButton from '../delete_button.vue'; import CleanupStatus from './cleanup_status.vue'; @@ -25,6 +29,7 @@ export default { ClipboardButton, DeleteButton, GlSprintf, + GlButton, GlIcon, ListItem, GlSkeletonLoader, @@ -33,6 +38,7 @@ export default { directives: { GlTooltip: GlTooltipDirective, }, + mixins: [Tracking.mixin(), glFeatureFlagsMixin()], inject: ['config'], props: { item: { @@ -54,6 +60,12 @@ export default { REMOVE_REPOSITORY_LABEL, ROW_SCHEDULED_FOR_DELETION, COPY_IMAGE_PATH_TITLE, + IMAGE_FULL_PATH_LABEL, + }, + data() { + return { + showFullPath: false, + }; }, computed: { disabledDelete() { @@ -79,7 +91,17 @@ export default { ); }, imageName() { - return this.item.name ? this.item.path : `${this.item.path}/ ${ROOT_IMAGE_TEXT}`; + if (this.glFeatures.containerRegistryShowShortenedPath) { + if (this.showFullPath) { + return this.item.path; + } + const projectPath = this.item?.project?.path ?? ''; + if (this.item.name) { + return joinPaths(projectPath, this.item.name); + } + return projectPath; + } + return this.item.path; }, routerLinkEvent() { return this.deleting ? '' : 'click'; @@ -90,6 +112,15 @@ export default { : LIST_DELETE_BUTTON_DISABLED; }, }, + methods: { + hideButton() { + this.showFullPath = true; + this.$refs.imageName.$el.focus(); + this.track(TRACKING_ACTION_CLICK_SHOW_FULL_PATH, { + label: TRACKING_LABEL_REGISTRY_IMAGE_LIST, + }); + }, + }, }; </script> @@ -104,7 +135,20 @@ export default { :disabled="deleting" > <template #left-primary> + <gl-button + v-if="glFeatures.containerRegistryShowShortenedPath && !showFullPath" + v-gl-tooltip="{ + placement: 'top', + title: $options.i18n.IMAGE_FULL_PATH_LABEL, + }" + icon="ellipsis_h" + size="small" + class="gl-mr-2" + :aria-label="$options.i18n.IMAGE_FULL_PATH_LABEL" + @click="hideButton" + /> <router-link + ref="imageName" class="gl-text-body gl-font-weight-bold" data-testid="details-link" data-qa-selector="registry_image_content" diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/common.js b/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/common.js index 17adaec7a7d..67ad281b835 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/common.js +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/common.js @@ -1,6 +1,5 @@ -import { s__, __ } from '~/locale'; +import { __ } from '~/locale'; -export const ROOT_IMAGE_TEXT = s__('ContainerRegistry|Root image'); export const MORE_ACTIONS_TEXT = __('More actions'); export const NAME_SORT_FIELD = { orderBy: 'NAME', label: __('Name') }; diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/list.js b/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/list.js index c6a7591e0d9..020d78ad364 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/list.js +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/list.js @@ -43,6 +43,13 @@ export const EMPTY_RESULT_MESSAGE = s__( export const COPY_IMAGE_PATH_TITLE = s__('ContainerRegistry|Copy image path'); +export const IMAGE_FULL_PATH_LABEL = s__('ContainerRegistry|Show full path'); + +// Tracking + +export const TRACKING_LABEL_REGISTRY_IMAGE_LIST = 'registry_image_list'; +export const TRACKING_ACTION_CLICK_SHOW_FULL_PATH = 'click_show_full_path'; + // Parameters export const IMAGE_DELETE_SCHEDULED_STATUS = 'DELETE_SCHEDULED'; diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/details.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/details.vue index 71a85d8885e..9ebbdfa920d 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/details.vue +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/details.vue @@ -24,7 +24,6 @@ import { FETCH_IMAGES_LIST_ERROR_MESSAGE, UNFINISHED_STATUS, MISSING_OR_DELETED_IMAGE_BREADCRUMB, - ROOT_IMAGE_TEXT, GRAPHQL_PAGE_SIZE, MISSING_OR_DELETED_IMAGE_TITLE, MISSING_OR_DELETED_IMAGE_MESSAGE, @@ -111,7 +110,7 @@ export default { methods: { updateBreadcrumb() { const name = this.containerRepository?.id - ? this.containerRepository?.name || ROOT_IMAGE_TEXT + ? this.containerRepository?.name || this.containerRepository?.project?.path : MISSING_OR_DELETED_IMAGE_BREADCRUMB; this.breadCrumbState.updateName(name); }, |