debian-mirror-gitlab/app/assets/javascripts/snippets/components/snippet_header.vue

277 lines
8.1 KiB
Vue
Raw Normal View History

2020-01-01 13:55:28 +05:30
<script>
import {
GlAvatar,
GlIcon,
GlSprintf,
GlModal,
GlAlert,
GlLoadingIcon,
2020-10-24 23:57:45 +05:30
GlDeprecatedDropdown,
GlDeprecatedDropdownItem,
2020-04-22 19:07:51 +05:30
GlButton,
2020-05-24 23:13:21 +05:30
GlTooltipDirective,
2020-01-01 13:55:28 +05:30
} from '@gitlab/ui';
2020-10-24 23:57:45 +05:30
import { __ } from '~/locale';
2020-01-01 13:55:28 +05:30
import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
import DeleteSnippetMutation from '../mutations/deleteSnippet.mutation.graphql';
import CanCreatePersonalSnippet from '../queries/userPermissions.query.graphql';
import CanCreateProjectSnippet from '../queries/projectPermissions.query.graphql';
2020-11-24 15:15:51 +05:30
import { joinPaths } from '~/lib/utils/url_utility';
2021-01-03 14:25:43 +05:30
import { fetchPolicies } from '~/lib/graphql';
2020-01-01 13:55:28 +05:30
export default {
components: {
GlAvatar,
GlIcon,
GlSprintf,
GlModal,
GlAlert,
GlLoadingIcon,
2020-10-24 23:57:45 +05:30
GlDeprecatedDropdown,
GlDeprecatedDropdownItem,
2020-01-01 13:55:28 +05:30
TimeAgoTooltip,
2020-04-22 19:07:51 +05:30
GlButton,
2020-01-01 13:55:28 +05:30
},
2020-05-24 23:13:21 +05:30
directives: {
GlTooltip: GlTooltipDirective,
},
2020-01-01 13:55:28 +05:30
apollo: {
canCreateSnippet: {
2021-01-03 14:25:43 +05:30
fetchPolicy: fetchPolicies.NO_CACHE,
2020-01-01 13:55:28 +05:30
query() {
return this.snippet.project ? CanCreateProjectSnippet : CanCreatePersonalSnippet;
},
variables() {
return {
fullPath: this.snippet.project ? this.snippet.project.fullPath : undefined,
};
},
update(data) {
return this.snippet.project
? data.project.userPermissions.createSnippet
2020-05-24 23:13:21 +05:30
: data.currentUser?.userPermissions.createSnippet;
2020-01-01 13:55:28 +05:30
},
},
},
props: {
snippet: {
type: Object,
required: true,
},
},
data() {
return {
isDeleting: false,
errorMessage: '',
canCreateSnippet: false,
};
},
computed: {
2020-07-28 23:09:34 +05:30
snippetHasBinary() {
return Boolean(this.snippet.blobs.find(blob => blob.binary));
},
2020-10-24 23:57:45 +05:30
authoredMessage() {
return this.snippet.author
? __('Authored %{timeago} by %{author}')
: __('Authored %{timeago}');
},
2020-01-01 13:55:28 +05:30
personalSnippetActions() {
return [
{
condition: this.snippet.userPermissions.updateSnippet,
text: __('Edit'),
href: this.editLink,
2020-07-28 23:09:34 +05:30
disabled: this.snippetHasBinary,
title: this.snippetHasBinary
2020-05-24 23:13:21 +05:30
? __('Snippets with non-text files can only be edited via Git.')
: undefined,
2020-01-01 13:55:28 +05:30
},
{
condition: this.snippet.userPermissions.adminSnippet,
text: __('Delete'),
click: this.showDeleteModal,
2020-04-22 19:07:51 +05:30
variant: 'danger',
category: 'secondary',
cssClass: 'ml-2',
2020-01-01 13:55:28 +05:30
},
{
condition: this.canCreateSnippet,
text: __('New snippet'),
href: this.snippet.project
2020-11-24 15:15:51 +05:30
? joinPaths(this.snippet.project.webUrl, '-/snippets/new')
: joinPaths('/', gon.relative_url_root, '/-/snippets/new'),
2020-04-22 19:07:51 +05:30
variant: 'success',
category: 'secondary',
cssClass: 'ml-2',
2020-01-01 13:55:28 +05:30
},
];
},
editLink() {
return `${this.snippet.webUrl}/edit`;
},
visibility() {
return this.snippet.visibilityLevel;
},
snippetVisibilityLevelDescription() {
switch (this.visibility) {
case 'private':
return this.snippet.project !== null
? __('The snippet is visible only to project members.')
: __('The snippet is visible only to me.');
case 'internal':
return __('The snippet is visible to any logged in user.');
default:
return __('The snippet can be accessed without any authentication.');
}
},
visibilityLevelIcon() {
switch (this.visibility) {
case 'private':
return 'lock';
case 'internal':
return 'shield';
default:
return 'earth';
}
},
},
methods: {
redirectToSnippets() {
2020-10-24 23:57:45 +05:30
window.location.pathname = this.snippet.project
? `${this.snippet.project.fullPath}/-/snippets`
2020-11-24 15:15:51 +05:30
: `${gon.relative_url_root}dashboard/snippets`;
2020-01-01 13:55:28 +05:30
},
closeDeleteModal() {
this.$refs.deleteModal.hide();
},
showDeleteModal() {
this.$refs.deleteModal.show();
},
deleteSnippet() {
this.isDeleting = true;
this.$apollo
.mutate({
mutation: DeleteSnippetMutation,
variables: { id: this.snippet.id },
})
2020-04-22 19:07:51 +05:30
.then(({ data }) => {
if (data?.destroySnippet?.errors.length) {
throw new Error(data?.destroySnippet?.errors[0]);
}
2020-01-01 13:55:28 +05:30
this.isDeleting = false;
this.errorMessage = undefined;
this.closeDeleteModal();
this.redirectToSnippets();
})
.catch(err => {
this.isDeleting = false;
this.errorMessage = err.message;
});
},
},
};
</script>
<template>
<div class="detail-page-header">
<div class="detail-page-header-body">
<div
2020-07-28 23:09:34 +05:30
class="snippet-box has-tooltip d-flex align-items-center gl-mr-2 mb-1"
2020-06-23 00:09:42 +05:30
data-qa-selector="snippet_container"
2020-01-01 13:55:28 +05:30
:title="snippetVisibilityLevelDescription"
data-container="body"
>
<span class="sr-only">
{{ s__(`VisibilityLevel|${visibility}`) }}
</span>
<gl-icon :name="visibilityLevelIcon" :size="14" />
</div>
2020-10-24 23:57:45 +05:30
<div class="creator" data-testid="authored-message">
<gl-sprintf :message="authoredMessage">
2020-01-01 13:55:28 +05:30
<template #timeago>
<time-ago-tooltip
:time="snippet.createdAt"
tooltip-placement="bottom"
css-class="snippet_updated_ago"
/>
</template>
<template #author>
<a :href="snippet.author.webUrl" class="d-inline">
<gl-avatar :size="24" :src="snippet.author.avatarUrl" />
<span class="bold">{{ snippet.author.name }}</span>
</a>
</template>
</gl-sprintf>
</div>
</div>
<div class="detail-page-header-actions">
2020-04-22 19:07:51 +05:30
<div class="d-none d-sm-flex">
2020-01-01 13:55:28 +05:30
<template v-for="(action, index) in personalSnippetActions">
2020-05-24 23:13:21 +05:30
<div
2020-01-01 13:55:28 +05:30
v-if="action.condition"
:key="index"
2020-05-24 23:13:21 +05:30
v-gl-tooltip
:title="action.title"
class="d-inline-block"
2020-01-01 13:55:28 +05:30
>
2020-05-24 23:13:21 +05:30
<gl-button
:disabled="action.disabled"
:variant="action.variant"
:category="action.category"
:class="action.cssClass"
:href="action.href"
data-qa-selector="snippet_action_button"
:data-qa-action="action.text"
@click="action.click ? action.click() : undefined"
>
{{ action.text }}
</gl-button>
</div>
2020-01-01 13:55:28 +05:30
</template>
</div>
<div class="d-block d-sm-none dropdown">
2020-10-24 23:57:45 +05:30
<gl-deprecated-dropdown :text="__('Options')" class="w-100" toggle-class="text-center">
<gl-deprecated-dropdown-item
2020-01-01 13:55:28 +05:30
v-for="(action, index) in personalSnippetActions"
:key="index"
2020-05-24 23:13:21 +05:30
:disabled="action.disabled"
:title="action.title"
2020-04-22 19:07:51 +05:30
:href="action.href"
2020-01-01 13:55:28 +05:30
@click="action.click ? action.click() : undefined"
2020-10-24 23:57:45 +05:30
>{{ action.text }}</gl-deprecated-dropdown-item
2020-01-01 13:55:28 +05:30
>
2020-10-24 23:57:45 +05:30
</gl-deprecated-dropdown>
2020-01-01 13:55:28 +05:30
</div>
</div>
<gl-modal ref="deleteModal" modal-id="delete-modal" title="Example title">
<template #modal-title>{{ __('Delete snippet?') }}</template>
<gl-alert v-if="errorMessage" variant="danger" class="mb-2" @dismiss="errorMessage = ''">{{
errorMessage
}}</gl-alert>
2020-03-13 15:44:24 +05:30
<gl-sprintf :message="__('Are you sure you want to delete %{name}?')">
2020-01-01 13:55:28 +05:30
<template #name
><strong>{{ snippet.title }}</strong></template
>
</gl-sprintf>
<template #modal-footer>
<gl-button @click="closeDeleteModal">{{ __('Cancel') }}</gl-button>
<gl-button
variant="danger"
2020-04-22 19:07:51 +05:30
category="primary"
2020-01-01 13:55:28 +05:30
:disabled="isDeleting"
data-qa-selector="delete_snippet_button"
@click="deleteSnippet"
>
<gl-loading-icon v-if="isDeleting" inline />
{{ __('Delete snippet') }}
</gl-button>
</template>
</gl-modal>
</div>
</template>