2020-05-28 09:08:05 +00:00
|
|
|
<script>
|
2020-06-22 18:08:47 +00:00
|
|
|
import { GlTooltipDirective, GlIcon, GlSprintf } from '@gitlab/ui';
|
2020-05-28 09:08:05 +00:00
|
|
|
import { n__ } from '~/locale';
|
|
|
|
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
|
2020-09-02 12:10:35 +00:00
|
|
|
import ListItem from '~/vue_shared/components/registry/list_item.vue';
|
2020-06-22 18:08:47 +00:00
|
|
|
import DeleteButton from '../delete_button.vue';
|
2020-05-28 09:08:05 +00:00
|
|
|
|
|
|
|
import {
|
|
|
|
ASYNC_DELETE_IMAGE_ERROR_MESSAGE,
|
|
|
|
LIST_DELETE_BUTTON_DISABLED,
|
|
|
|
REMOVE_REPOSITORY_LABEL,
|
|
|
|
ROW_SCHEDULED_FOR_DELETION,
|
2020-06-04 12:08:21 +00:00
|
|
|
} from '../../constants/index';
|
2020-05-28 09:08:05 +00:00
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'ImageListrow',
|
|
|
|
components: {
|
|
|
|
ClipboardButton,
|
2020-06-22 18:08:47 +00:00
|
|
|
DeleteButton,
|
2020-05-28 09:08:05 +00:00
|
|
|
GlSprintf,
|
|
|
|
GlIcon,
|
2020-06-22 18:08:47 +00:00
|
|
|
ListItem,
|
2020-05-28 09:08:05 +00:00
|
|
|
},
|
|
|
|
directives: {
|
|
|
|
GlTooltip: GlTooltipDirective,
|
|
|
|
},
|
|
|
|
props: {
|
|
|
|
item: {
|
|
|
|
type: Object,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
i18n: {
|
|
|
|
LIST_DELETE_BUTTON_DISABLED,
|
|
|
|
REMOVE_REPOSITORY_LABEL,
|
|
|
|
ROW_SCHEDULED_FOR_DELETION,
|
|
|
|
ASYNC_DELETE_IMAGE_ERROR_MESSAGE,
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
encodedItem() {
|
|
|
|
const params = JSON.stringify({
|
|
|
|
name: this.item.path,
|
|
|
|
tags_path: this.item.tags_path,
|
|
|
|
id: this.item.id,
|
2020-10-02 12:09:03 +00:00
|
|
|
cleanup_policy_started_at: this.item.cleanup_policy_started_at,
|
2020-05-28 09:08:05 +00:00
|
|
|
});
|
|
|
|
return window.btoa(params);
|
|
|
|
},
|
|
|
|
disabledDelete() {
|
|
|
|
return !this.item.destroy_path || this.item.deleting;
|
|
|
|
},
|
|
|
|
tagsCountText() {
|
|
|
|
return n__(
|
|
|
|
'ContainerRegistry|%{count} Tag',
|
|
|
|
'ContainerRegistry|%{count} Tags',
|
|
|
|
this.item.tags_count,
|
|
|
|
);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
2020-06-22 18:08:47 +00:00
|
|
|
<list-item
|
2020-05-28 09:08:05 +00:00
|
|
|
v-gl-tooltip="{
|
|
|
|
placement: 'left',
|
|
|
|
disabled: !item.deleting,
|
|
|
|
title: $options.i18n.ROW_SCHEDULED_FOR_DELETION,
|
|
|
|
}"
|
2020-07-03 18:08:58 +00:00
|
|
|
v-bind="$attrs"
|
2020-06-22 18:08:47 +00:00
|
|
|
:disabled="item.deleting"
|
2020-05-28 09:08:05 +00:00
|
|
|
>
|
2020-06-22 18:08:47 +00:00
|
|
|
<template #left-primary>
|
|
|
|
<router-link
|
2020-07-28 12:09:49 +00:00
|
|
|
class="gl-text-body gl-font-weight-bold"
|
2020-06-22 18:08:47 +00:00
|
|
|
data-testid="detailsLink"
|
|
|
|
:to="{ name: 'details', params: { id: encodedItem } }"
|
2020-05-28 09:08:05 +00:00
|
|
|
>
|
2020-06-22 18:08:47 +00:00
|
|
|
{{ item.path }}
|
|
|
|
</router-link>
|
|
|
|
<clipboard-button
|
|
|
|
v-if="item.location"
|
|
|
|
:disabled="item.deleting"
|
|
|
|
:text="item.location"
|
|
|
|
:title="item.location"
|
2020-10-03 00:08:46 +00:00
|
|
|
category="tertiary"
|
2020-06-22 18:08:47 +00:00
|
|
|
/>
|
|
|
|
<gl-icon
|
|
|
|
v-if="item.failedDelete"
|
|
|
|
v-gl-tooltip="{ title: $options.i18n.ASYNC_DELETE_IMAGE_ERROR_MESSAGE }"
|
|
|
|
name="warning"
|
2020-07-10 09:09:01 +00:00
|
|
|
class="gl-text-orange-500"
|
2020-06-22 18:08:47 +00:00
|
|
|
/>
|
|
|
|
</template>
|
|
|
|
<template #left-secondary>
|
|
|
|
<span class="gl-display-flex gl-align-items-center" data-testid="tagsCount">
|
|
|
|
<gl-icon name="tag" class="gl-mr-2" />
|
|
|
|
<gl-sprintf :message="tagsCountText">
|
|
|
|
<template #count>
|
|
|
|
{{ item.tags_count }}
|
|
|
|
</template>
|
|
|
|
</gl-sprintf>
|
|
|
|
</span>
|
|
|
|
</template>
|
2020-06-26 09:08:59 +00:00
|
|
|
<template #right-action>
|
2020-06-22 18:08:47 +00:00
|
|
|
<delete-button
|
|
|
|
:title="$options.i18n.REMOVE_REPOSITORY_LABEL"
|
|
|
|
:disabled="disabledDelete"
|
|
|
|
:tooltip-disabled="Boolean(item.destroy_path)"
|
|
|
|
:tooltip-title="$options.i18n.LIST_DELETE_BUTTON_DISABLED"
|
|
|
|
@delete="$emit('delete', item)"
|
|
|
|
/>
|
|
|
|
</template>
|
|
|
|
</list-item>
|
2020-05-28 09:08:05 +00:00
|
|
|
</template>
|