debian-mirror-gitlab/app/assets/javascripts/diffs/components/diff_file_header.vue

253 lines
6.9 KiB
Vue
Raw Normal View History

2018-11-08 19:23:39 +05:30
<script>
import _ from 'underscore';
import { mapActions, mapGetters } from 'vuex';
2019-02-15 15:39:39 +05:30
import { polyfillSticky } from '~/lib/utils/sticky';
2018-11-08 19:23:39 +05:30
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import Icon from '~/vue_shared/components/icon.vue';
import FileIcon from '~/vue_shared/components/file_icon.vue';
2019-02-15 15:39:39 +05:30
import { GlTooltipDirective } from '@gitlab/ui';
2018-11-08 19:23:39 +05:30
import { truncateSha } from '~/lib/utils/text_utility';
import { __, s__, sprintf } from '~/locale';
import EditButton from './edit_button.vue';
2019-03-02 22:35:43 +05:30
import DiffStats from './diff_stats.vue';
2018-11-08 19:23:39 +05:30
export default {
components: {
ClipboardButton,
EditButton,
Icon,
FileIcon,
2019-03-02 22:35:43 +05:30
DiffStats,
2018-11-08 19:23:39 +05:30
},
directives: {
2019-02-15 15:39:39 +05:30
GlTooltip: GlTooltipDirective,
2018-11-08 19:23:39 +05:30
},
props: {
2018-12-13 13:39:08 +05:30
discussionPath: {
type: String,
required: false,
default: '',
},
2018-11-08 19:23:39 +05:30
diffFile: {
type: Object,
required: true,
},
collapsible: {
type: Boolean,
required: false,
default: false,
},
addMergeRequestButtons: {
type: Boolean,
required: false,
default: false,
},
expanded: {
type: Boolean,
required: false,
default: true,
},
canCurrentUserFork: {
type: Boolean,
required: true,
},
},
data() {
return {
blobForkSuggestion: null,
};
},
computed: {
2018-11-18 11:00:15 +05:30
...mapGetters('diffs', ['diffHasExpandedDiscussions', 'diffHasDiscussions']),
2018-11-08 19:23:39 +05:30
hasExpandedDiscussions() {
return this.diffHasExpandedDiscussions(this.diffFile);
},
icon() {
if (this.diffFile.submodule) {
return 'archive';
}
return this.diffFile.blob.icon;
},
titleLink() {
if (this.diffFile.submodule) {
2019-02-15 15:39:39 +05:30
return this.diffFile.submodule_tree_url || this.diffFile.submodule_link;
2018-11-08 19:23:39 +05:30
}
2018-12-13 13:39:08 +05:30
return this.discussionPath;
2018-11-08 19:23:39 +05:30
},
filePath() {
if (this.diffFile.submodule) {
2019-02-15 15:39:39 +05:30
return `${this.diffFile.file_path} @ ${truncateSha(this.diffFile.blob.id)}`;
2018-11-08 19:23:39 +05:30
}
2019-02-15 15:39:39 +05:30
if (this.diffFile.deleted_file) {
return sprintf(__('%{filePath} deleted'), { filePath: this.diffFile.file_path }, false);
2018-11-08 19:23:39 +05:30
}
2019-02-15 15:39:39 +05:30
return this.diffFile.file_path;
2018-11-08 19:23:39 +05:30
},
titleTag() {
2019-02-15 15:39:39 +05:30
return this.diffFile.file_hash ? 'a' : 'span';
2018-11-08 19:23:39 +05:30
},
isUsingLfs() {
2019-02-15 15:39:39 +05:30
return this.diffFile.stored_externally && this.diffFile.external_storage === 'lfs';
2018-11-08 19:23:39 +05:30
},
collapseIcon() {
return this.expanded ? 'chevron-down' : 'chevron-right';
},
viewFileButtonText() {
2019-02-15 15:39:39 +05:30
const truncatedContentSha = _.escape(truncateSha(this.diffFile.content_sha));
2018-11-08 19:23:39 +05:30
return sprintf(
s__('MergeRequests|View file @ %{commitId}'),
{
commitId: `<span class="commit-sha">${truncatedContentSha}</span>`,
},
false,
);
},
viewReplacedFileButtonText() {
2019-02-15 15:39:39 +05:30
const truncatedBaseSha = _.escape(truncateSha(this.diffFile.diff_refs.base_sha));
2018-11-08 19:23:39 +05:30
return sprintf(
s__('MergeRequests|View replaced file @ %{commitId}'),
{
commitId: `<span class="commit-sha">${truncatedBaseSha}</span>`,
},
false,
);
},
2018-11-18 11:00:15 +05:30
gfmCopyText() {
2019-02-15 15:39:39 +05:30
return `\`${this.diffFile.file_path}\``;
2018-11-18 11:00:15 +05:30
},
2018-11-08 19:23:39 +05:30
},
2019-02-15 15:39:39 +05:30
mounted() {
polyfillSticky(this.$refs.header);
},
2018-11-08 19:23:39 +05:30
methods: {
...mapActions('diffs', ['toggleFileDiscussions']),
handleToggleFile(e, checkTarget) {
if (
!checkTarget ||
e.target === this.$refs.header ||
(e.target.classList && e.target.classList.contains('diff-toggle-caret'))
) {
this.$emit('toggleFile');
}
},
showForkMessage() {
this.$emit('showForkMessage');
},
handleToggleDiscussions() {
this.toggleFileDiscussions(this.diffFile);
},
},
};
</script>
<template>
<div
ref="header"
class="js-file-title file-title file-title-flex-parent"
2019-03-02 22:35:43 +05:30
@click="handleToggleFile($event, true)"
2018-11-08 19:23:39 +05:30
>
<div class="file-header-content">
<icon
v-if="collapsible"
:name="collapseIcon"
:size="16"
aria-hidden="true"
class="diff-toggle-caret append-right-5"
@click.stop="handleToggle"
/>
2019-02-15 15:39:39 +05:30
<a v-once ref="titleWrapper" :href="titleLink" class="append-right-4 js-title-wrapper">
2018-11-08 19:23:39 +05:30
<file-icon
:file-name="filePath"
:size="18"
aria-hidden="true"
css-classes="js-file-icon append-right-5"
/>
2019-02-15 15:39:39 +05:30
<span v-if="diffFile.renamed_file">
2018-11-08 19:23:39 +05:30
<strong
2019-02-15 15:39:39 +05:30
v-gl-tooltip
:title="diffFile.old_path"
2018-11-08 19:23:39 +05:30
class="file-title-name"
2019-02-15 15:39:39 +05:30
v-html="diffFile.old_path_html"
2018-12-05 23:21:45 +05:30
></strong>
2018-11-08 19:23:39 +05:30
<strong
2019-02-15 15:39:39 +05:30
v-gl-tooltip
:title="diffFile.new_path"
2018-11-08 19:23:39 +05:30
class="file-title-name"
2019-02-15 15:39:39 +05:30
v-html="diffFile.new_path_html"
2018-12-05 23:21:45 +05:30
></strong>
2018-11-08 19:23:39 +05:30
</span>
2019-02-15 15:39:39 +05:30
<strong v-else v-gl-tooltip :title="filePath" class="file-title-name" data-container="body">
2018-11-08 19:23:39 +05:30
{{ filePath }}
</strong>
</a>
<clipboard-button
:title="__('Copy file path to clipboard')"
2019-02-15 15:39:39 +05:30
:text="diffFile.file_path"
2018-11-18 11:00:15 +05:30
:gfm="gfmCopyText"
2018-11-08 19:23:39 +05:30
css-class="btn-default btn-transparent btn-clipboard"
/>
2019-02-15 15:39:39 +05:30
<small v-if="diffFile.mode_changed" ref="fileMode">
{{ diffFile.a_mode }} {{ diffFile.b_mode }}
2018-11-08 19:23:39 +05:30
</small>
2019-02-15 15:39:39 +05:30
<span v-if="isUsingLfs" class="label label-lfs append-right-5"> {{ __('LFS') }} </span>
2018-11-08 19:23:39 +05:30
</div>
<div
v-if="!diffFile.submodule && addMergeRequestButtons"
class="file-actions d-none d-sm-block"
>
2019-03-02 22:35:43 +05:30
<diff-stats :added-lines="diffFile.added_lines" :removed-lines="diffFile.removed_lines" />
2019-02-15 15:39:39 +05:30
<template v-if="diffFile.blob && diffFile.blob.readable_text">
2018-11-08 19:23:39 +05:30
<button
2018-11-18 11:00:15 +05:30
:disabled="!diffHasDiscussions(diffFile)"
2018-11-08 19:23:39 +05:30
:class="{ active: hasExpandedDiscussions }"
:title="s__('MergeRequests|Toggle comments for this file')"
class="js-btn-vue-toggle-comments btn"
type="button"
@click="handleToggleDiscussions"
>
<icon name="comment" />
</button>
<edit-button
2019-02-15 15:39:39 +05:30
v-if="!diffFile.deleted_file"
2018-11-08 19:23:39 +05:30
:can-current-user-fork="canCurrentUserFork"
2019-02-15 15:39:39 +05:30
:edit-path="diffFile.edit_path"
:can-modify-blob="diffFile.can_modify_blob"
2018-11-08 19:23:39 +05:30
@showForkMessage="showForkMessage"
/>
</template>
<a
2019-02-15 15:39:39 +05:30
v-if="diffFile.replaced_view_path"
:href="diffFile.replaced_view_path"
2018-11-08 19:23:39 +05:30
class="btn view-file js-view-file"
v-html="viewReplacedFileButtonText"
>
</a>
2019-02-15 15:39:39 +05:30
<a :href="diffFile.view_path" class="btn view-file js-view-file" v-html="viewFileButtonText">
2018-11-08 19:23:39 +05:30
</a>
<a
2019-02-15 15:39:39 +05:30
v-if="diffFile.external_url"
v-gl-tooltip.hover
:href="diffFile.external_url"
:title="`View on ${diffFile.formatted_external_url}`"
2018-11-08 19:23:39 +05:30
target="_blank"
rel="noopener noreferrer"
class="btn btn-file-option"
>
<icon name="external-link" />
</a>
</div>
</div>
</template>