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

217 lines
5.8 KiB
Vue
Raw Normal View History

2018-11-08 19:23:39 +05:30
<script>
2018-12-05 23:21:45 +05:30
import { mapActions, mapGetters, mapState } from 'vuex';
2020-05-24 23:13:21 +05:30
import { escape } from 'lodash';
2020-01-01 13:55:28 +05:30
import { GlLoadingIcon } from '@gitlab/ui';
2018-11-08 19:23:39 +05:30
import { __, sprintf } from '~/locale';
import createFlash from '~/flash';
2020-03-13 15:44:24 +05:30
import { hasDiff } from '~/helpers/diffs_helper';
2019-02-15 15:39:39 +05:30
import eventHub from '../../notes/event_hub';
2018-11-08 19:23:39 +05:30
import DiffFileHeader from './diff_file_header.vue';
import DiffContent from './diff_content.vue';
2019-07-07 11:18:12 +05:30
import { diffViewerErrors } from '~/ide/constants';
2018-11-08 19:23:39 +05:30
export default {
components: {
DiffFileHeader,
DiffContent,
2018-12-13 13:39:08 +05:30
GlLoadingIcon,
2018-11-08 19:23:39 +05:30
},
props: {
file: {
type: Object,
required: true,
},
canCurrentUserFork: {
type: Boolean,
required: true,
},
2019-02-15 15:39:39 +05:30
helpPagePath: {
type: String,
required: false,
default: '',
},
2018-11-08 19:23:39 +05:30
},
data() {
return {
isLoadingCollapsedDiff: false,
forkMessageVisible: false,
2019-07-07 11:18:12 +05:30
isCollapsed: this.file.viewer.collapsed || false,
2018-11-08 19:23:39 +05:30
};
},
computed: {
2018-12-05 23:21:45 +05:30
...mapState('diffs', ['currentDiffFileId']),
2018-12-13 13:39:08 +05:30
...mapGetters(['isNotesFetched']),
...mapGetters('diffs', ['getDiffFileDiscussions']),
2018-11-08 19:23:39 +05:30
viewBlobLink() {
return sprintf(
__('You can %{linkStart}view the blob%{linkEnd} instead.'),
{
2020-05-24 23:13:21 +05:30
linkStart: `<a href="${escape(this.file.view_path)}">`,
2018-11-08 19:23:39 +05:30
linkEnd: '</a>',
},
false,
);
},
2018-11-20 20:47:30 +05:30
showLoadingIcon() {
return this.isLoadingCollapsedDiff || (!this.file.renderIt && !this.isCollapsed);
2018-11-08 19:23:39 +05:30
},
2019-12-26 22:10:19 +05:30
hasDiff() {
2020-03-13 15:44:24 +05:30
return hasDiff(this.file);
2018-12-13 13:39:08 +05:30
},
2019-07-07 11:18:12 +05:30
isFileTooLarge() {
return this.file.viewer.error === diffViewerErrors.too_large;
},
errorMessage() {
return this.file.viewer.error_message;
},
2019-09-30 21:07:59 +05:30
forkMessage() {
return sprintf(
__(
"You're not allowed to %{tag_start}edit%{tag_end} files in this project directly. Please fork this project, make your changes there, and submit a merge request.",
),
{
tag_start: '<span class="js-file-fork-suggestion-section-action">',
tag_end: '</span>',
},
false,
);
},
2018-12-13 13:39:08 +05:30
},
watch: {
2019-07-07 11:18:12 +05:30
isCollapsed: function fileCollapsedWatch(newVal, oldVal) {
2019-12-26 22:10:19 +05:30
if (!newVal && oldVal && !this.hasDiff) {
2018-12-13 13:39:08 +05:30
this.handleLoadCollapsedDiff();
}
2019-07-07 11:18:12 +05:30
this.setFileCollapsed({ filePath: this.file.file_path, collapsed: newVal });
},
'file.viewer.collapsed': function setIsCollapsed(newVal) {
this.isCollapsed = newVal;
2018-12-13 13:39:08 +05:30
},
2018-11-08 19:23:39 +05:30
},
2019-02-15 15:39:39 +05:30
created() {
eventHub.$on(`loadCollapsedDiff/${this.file.file_hash}`, this.handleLoadCollapsedDiff);
},
2018-11-08 19:23:39 +05:30
methods: {
2019-07-07 11:18:12 +05:30
...mapActions('diffs', [
'loadCollapsedDiff',
'assignDiscussionsToDiff',
'setRenderIt',
'setFileCollapsed',
]),
2018-11-08 19:23:39 +05:30
handleToggle() {
2019-12-26 22:10:19 +05:30
if (!this.hasDiff) {
2018-11-08 19:23:39 +05:30
this.handleLoadCollapsedDiff();
} else {
2019-07-07 11:18:12 +05:30
this.isCollapsed = !this.isCollapsed;
this.setRenderIt(this.file);
2018-11-08 19:23:39 +05:30
}
},
handleLoadCollapsedDiff() {
this.isLoadingCollapsedDiff = true;
this.loadCollapsedDiff(this.file)
.then(() => {
this.isLoadingCollapsedDiff = false;
2019-07-07 11:18:12 +05:30
this.isCollapsed = false;
this.setRenderIt(this.file);
2018-11-20 20:47:30 +05:30
})
.then(() => {
requestIdleCallback(
() => {
2018-12-13 13:39:08 +05:30
this.assignDiscussionsToDiff(this.getDiffFileDiscussions(this.file));
2018-11-20 20:47:30 +05:30
},
{ timeout: 1000 },
);
2018-11-08 19:23:39 +05:30
})
.catch(() => {
this.isLoadingCollapsedDiff = false;
createFlash(__('Something went wrong on our end. Please try again!'));
});
},
showForkMessage() {
this.forkMessageVisible = true;
},
hideForkMessage() {
this.forkMessageVisible = false;
},
},
};
</script>
<template>
<div
2019-02-15 15:39:39 +05:30
:id="file.file_hash"
2018-12-05 23:21:45 +05:30
:class="{
2019-02-15 15:39:39 +05:30
'is-active': currentDiffFileId === file.file_hash,
2018-12-05 23:21:45 +05:30
}"
2020-04-22 19:07:51 +05:30
:data-path="file.new_path"
2018-11-08 19:23:39 +05:30
class="diff-file file-holder"
>
<diff-file-header
:can-current-user-fork="canCurrentUserFork"
:diff-file="file"
:collapsible="true"
:expanded="!isCollapsed"
:add-merge-request-buttons="true"
class="js-file-title file-title"
@toggleFile="handleToggle"
@showForkMessage="showForkMessage"
/>
2019-02-15 15:39:39 +05:30
<div v-if="forkMessageVisible" class="js-file-fork-suggestion-section file-fork-suggestion">
2019-09-30 21:07:59 +05:30
<span class="file-fork-suggestion-note" v-html="forkMessage"></span>
2018-11-08 19:23:39 +05:30
<a
2019-02-15 15:39:39 +05:30
:href="file.fork_path"
2018-11-08 19:23:39 +05:30
class="js-fork-suggestion-button btn btn-grouped btn-inverted btn-success"
2019-09-30 21:07:59 +05:30
>{{ __('Fork') }}</a
2018-11-08 19:23:39 +05:30
>
<button
class="js-cancel-fork-suggestion-button btn btn-grouped"
type="button"
@click="hideForkMessage"
>
2019-09-30 21:07:59 +05:30
{{ __('Cancel') }}
2018-11-08 19:23:39 +05:30
</button>
</div>
2019-02-15 15:39:39 +05:30
<gl-loading-icon v-if="showLoadingIcon" class="diff-content loading" />
2019-07-07 11:18:12 +05:30
<template v-else>
<div :id="`diff-content-${file.file_hash}`">
<div v-if="errorMessage" class="diff-viewer">
<div class="nothing-here-block" v-html="errorMessage"></div>
</div>
2020-04-08 14:13:33 +05:30
<template v-else>
<div v-show="isCollapsed" class="nothing-here-block diff-collapsed">
{{ __('This diff is collapsed.') }}
<a class="click-to-expand js-click-to-expand" href="#" @click.prevent="handleToggle">{{
__('Click to expand it.')
}}</a>
</div>
<diff-content
v-show="!isCollapsed && !isFileTooLarge"
:diff-file="file"
:help-page-path="helpPagePath"
/>
</template>
2019-07-07 11:18:12 +05:30
</div>
</template>
2018-11-08 19:23:39 +05:30
</div>
</template>
2018-12-05 23:21:45 +05:30
<style>
@keyframes shadow-fade {
from {
box-shadow: 0 0 4px #919191;
}
to {
box-shadow: 0 0 0 #dfdfdf;
}
}
.diff-file.is-active {
box-shadow: 0 0 0 #dfdfdf;
animation: shadow-fade 1.2s 0.1s 1;
}
</style>