diff options
Diffstat (limited to 'app/assets/javascripts/packages_and_registries/container_registry/explorer')
8 files changed, 62 insertions, 30 deletions
diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/delete_button.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/delete_button.vue index e4a1a1a8266..bb1dac40b92 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/delete_button.vue +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/delete_button.vue @@ -1,13 +1,13 @@ <script> -import { GlTooltipDirective, GlButton } from '@gitlab/ui'; +import { GlButton, GlLink, GlTooltip, GlSprintf } from '@gitlab/ui'; export default { name: 'DeleteButton', components: { GlButton, - }, - directives: { - GlTooltip: GlTooltipDirective, + GlLink, + GlTooltip, + GlSprintf, }, props: { title: { @@ -18,6 +18,11 @@ export default { type: String, required: true, }, + tooltipLink: { + type: String, + default: '', + required: false, + }, disabled: { type: Boolean, default: false, @@ -29,21 +34,12 @@ export default { required: false, }, }, - computed: { - tooltipConfiguration() { - return { - disabled: this.tooltipDisabled, - title: this.tooltipTitle, - }; - }, - }, }; </script> <template> - <div v-gl-tooltip="tooltipConfiguration"> + <div ref="deleteImageButton"> <gl-button - v-gl-tooltip :disabled="disabled" :title="title" :aria-label="title" @@ -52,5 +48,14 @@ export default { icon="remove" @click="$emit('delete')" /> + <gl-tooltip :target="() => $refs.deleteImageButton" :disabled="tooltipDisabled" placement="top"> + <gl-sprintf :message="tooltipTitle"> + <template #docLink="{ content }"> + <gl-link v-if="tooltipLink" :href="tooltipLink" target="_blank"> + {{ content }} + </gl-link> + </template> + </gl-sprintf> + </gl-tooltip> </div> </template> 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 c1ec523574a..484903354e8 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 @@ -8,11 +8,13 @@ import ListItem from '~/vue_shared/components/registry/list_item.vue'; import { ASYNC_DELETE_IMAGE_ERROR_MESSAGE, LIST_DELETE_BUTTON_DISABLED, + LIST_DELETE_BUTTON_DISABLED_FOR_MIGRATION, REMOVE_REPOSITORY_LABEL, ROW_SCHEDULED_FOR_DELETION, CLEANUP_TIMED_OUT_ERROR_MESSAGE, IMAGE_DELETE_SCHEDULED_STATUS, IMAGE_FAILED_DELETED_STATUS, + IMAGE_MIGRATING_STATE, ROOT_IMAGE_TEXT, } from '../../constants/index'; import DeleteButton from '../delete_button.vue'; @@ -32,6 +34,7 @@ export default { directives: { GlTooltip: GlTooltipDirective, }, + inject: ['config'], props: { item: { type: Object, @@ -44,13 +47,12 @@ export default { }, }, i18n: { - LIST_DELETE_BUTTON_DISABLED, REMOVE_REPOSITORY_LABEL, ROW_SCHEDULED_FOR_DELETION, }, computed: { disabledDelete() { - return !this.item.canDelete || this.deleting; + return !this.item.canDelete || this.deleting || this.migrating; }, id() { return getIdFromGraphQLId(this.item.id); @@ -58,6 +60,9 @@ export default { deleting() { return this.item.status === IMAGE_DELETE_SCHEDULED_STATUS; }, + migrating() { + return this.item.migrationState === IMAGE_MIGRATING_STATE; + }, failedDelete() { return this.item.status === IMAGE_FAILED_DELETED_STATUS; }, @@ -83,6 +88,11 @@ export default { routerLinkEvent() { return this.deleting ? '' : 'click'; }, + deleteButtonTooltipTitle() { + return this.migrating + ? LIST_DELETE_BUTTON_DISABLED_FOR_MIGRATION + : LIST_DELETE_BUTTON_DISABLED; + }, }, }; </script> @@ -144,8 +154,9 @@ export default { <delete-button :title="$options.i18n.REMOVE_REPOSITORY_LABEL" :disabled="disabledDelete" - :tooltip-disabled="item.canDelete" - :tooltip-title="$options.i18n.LIST_DELETE_BUTTON_DISABLED" + :tooltip-disabled="!disabledDelete" + :tooltip-link="config.containerRegistryImportingHelpPagePath" + :tooltip-title="deleteButtonTooltipTitle" @delete="$emit('delete', item)" /> </template> diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/registry_header.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/registry_header.vue index 6d2ff9ea7b6..154e176dc6e 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/registry_header.vue +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/registry_header.vue @@ -1,4 +1,5 @@ <script> +import { GlLink } from '@gitlab/ui'; import { approximateDuration, calculateRemainingMilliseconds } from '~/lib/utils/datetime_utility'; import { n__, sprintf } from '~/locale'; import MetadataItem from '~/vue_shared/components/registry/metadata_item.vue'; @@ -9,6 +10,7 @@ import { LIST_INTRO_TEXT, EXPIRATION_POLICY_WILL_RUN_IN, EXPIRATION_POLICY_DISABLED_TEXT, + SET_UP_CLEANUP, } from '../../constants/index'; export default { @@ -16,6 +18,7 @@ export default { components: { TitleArea, MetadataItem, + GlLink, }, props: { expirationPolicy: { @@ -43,6 +46,16 @@ export default { required: false, default: false, }, + cleanupPoliciesSettingsPath: { + type: String, + default: '', + required: false, + }, + showCleanupPolicyLink: { + type: Boolean, + required: false, + default: false, + }, }, loader: { repeat: 10, @@ -51,6 +64,7 @@ export default { }, i18n: { CONTAINER_REGISTRY_TITLE, + SET_UP_CLEANUP, }, computed: { imagesCountText() { @@ -105,6 +119,9 @@ export default { :text="expirationPolicyText" size="xl" /> + <gl-link v-if="showCleanupPolicyLink" class="gl-ml-2" :href="cleanupPoliciesSettingsPath">{{ + $options.i18n.SET_UP_CLEANUP + }}</gl-link> </template> </title-area> </template> diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/expiration_policies.js b/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/expiration_policies.js index 40f9b09a982..e584da23edb 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/expiration_policies.js +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/expiration_policies.js @@ -4,7 +4,7 @@ export const EXPIRATION_POLICY_WILL_RUN_IN = s__( 'ContainerRegistry|Expiration policy will run in %{time}', ); export const EXPIRATION_POLICY_DISABLED_TEXT = s__( - 'ContainerRegistry|Expiration policy is disabled', + 'ContainerRegistry|Expiration policy is disabled.', ); export const DELETE_ALERT_TITLE = s__('ContainerRegistry|Some tags were not deleted'); export const DELETE_ALERT_LINK_TEXT = s__( @@ -13,3 +13,4 @@ export const DELETE_ALERT_LINK_TEXT = s__( export const CLEANUP_TIMED_OUT_ERROR_MESSAGE = s__( 'ContainerRegistry|Cleanup timed out before it could delete all tags', ); +export const SET_UP_CLEANUP = s__('ContainerRegistry|Set up cleanup'); 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 7fa950ccfd0..c7022d6070f 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 @@ -14,6 +14,9 @@ export const LIST_INTRO_TEXT = s__( export const LIST_DELETE_BUTTON_DISABLED = s__( 'ContainerRegistry|Missing or insufficient permission, delete button disabled', ); +export const LIST_DELETE_BUTTON_DISABLED_FOR_MIGRATION = s__( + `ContainerRegistry|Image repository temporarily cannot be marked for deletion. Please try again in a few minutes. %{docLinkStart}More details%{docLinkEnd}`, +); export const REMOVE_REPOSITORY_LABEL = s__('ContainerRegistry|Remove repository'); export const REMOVE_REPOSITORY_MODAL_TEXT = s__( 'ContainerRegistry|You are about to remove repository %{title}. Once you confirm, this repository will be permanently deleted.', @@ -45,6 +48,7 @@ export const EMPTY_RESULT_MESSAGE = s__( export const IMAGE_DELETE_SCHEDULED_STATUS = 'DELETE_SCHEDULED'; export const IMAGE_FAILED_DELETED_STATUS = 'DELETE_FAILED'; +export const IMAGE_MIGRATING_STATE = 'importing'; export const GRAPHQL_PAGE_SIZE = 10; export const SORT_FIELDS = [ diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/graphql/queries/get_container_repository_tags.query.graphql b/app/assets/javascripts/packages_and_registries/container_registry/explorer/graphql/queries/get_container_repository_tags.query.graphql index d753d33a02c..8c577cc7b17 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/graphql/queries/get_container_repository_tags.query.graphql +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/graphql/queries/get_container_repository_tags.query.graphql @@ -1,4 +1,4 @@ -#import "~/graphql_shared/fragments/pageInfo.fragment.graphql" +#import "~/graphql_shared/fragments/page_info.fragment.graphql" query getContainerRepositoryTags( $id: ID! diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/index.js b/app/assets/javascripts/packages_and_registries/container_registry/explorer/index.js index ca5bd8d6964..a558550c91f 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/index.js +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/index.js @@ -35,7 +35,7 @@ export default () => { expirationPolicy, isGroupPage, isAdmin, - showCleanupPolicyOnAlert, + showCleanupPolicyLink, showUnfinishedTagCleanupCallout, connectionError, invalidPathError, @@ -68,7 +68,7 @@ export default () => { expirationPolicy: expirationPolicy ? JSON.parse(expirationPolicy) : undefined, isGroupPage: parseBoolean(isGroupPage), isAdmin: parseBoolean(isAdmin), - showCleanupPolicyOnAlert: parseBoolean(showCleanupPolicyOnAlert), + showCleanupPolicyLink: parseBoolean(showCleanupPolicyLink), showUnfinishedTagCleanupCallout: parseBoolean(showUnfinishedTagCleanupCallout), connectionError: parseBoolean(connectionError), invalidPathError: parseBoolean(invalidPathError), diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue index 5f9e614bebb..d1cab406984 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue @@ -11,7 +11,6 @@ import { import { get } from 'lodash'; import getContainerRepositoriesQuery from 'shared_queries/container_registry/get_container_repositories.query.graphql'; import createFlash from '~/flash'; -import CleanupPolicyEnabledAlert from '~/packages_and_registries/shared/components/cleanup_policy_enabled_alert.vue'; import { FILTERED_SEARCH_TERM } from '~/packages_and_registries/shared/constants'; import Tracking from '~/tracking'; import PersistedSearch from '~/packages_and_registries/shared/components/persisted_search.vue'; @@ -60,7 +59,6 @@ export default { GlSkeletonLoader, RegistryHeader, DeleteImage, - CleanupPolicyEnabledAlert, PersistedSearch, }, directives: { @@ -273,12 +271,6 @@ export default { </gl-sprintf> </gl-alert> - <cleanup-policy-enabled-alert - v-if="config.showCleanupPolicyOnAlert" - :project-path="config.projectPath" - :cleanup-policies-settings-path="config.cleanupPoliciesSettingsPath" - /> - <gl-empty-state v-if="showConnectionError" :title="$options.i18n.CONNECTION_ERROR_TITLE" @@ -304,6 +296,8 @@ export default { :expiration-policy="config.expirationPolicy" :help-page-path="config.helpPagePath" :hide-expiration-policy-data="config.isGroupPage" + :cleanup-policies-settings-path="config.cleanupPoliciesSettingsPath" + :show-cleanup-policy-link="config.showCleanupPolicyLink" > <template #commands> <cli-commands |