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

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

496 lines
14 KiB
Vue
Raw Normal View History

2018-11-08 19:23:39 +05:30
<script>
2021-10-27 15:23:28 +05:30
import {
GlButton,
GlLoadingIcon,
GlSafeHtmlDirective as SafeHtml,
GlSprintf,
GlAlert,
} from '@gitlab/ui';
2020-05-24 23:13:21 +05:30
import { escape } from 'lodash';
2021-03-11 19:13:27 +05:30
import { mapActions, mapGetters, mapState } from 'vuex';
2021-09-30 23:02:18 +05:30
import { IdState } from 'vendor/vue-virtual-scroller';
2022-01-26 12:08:38 +05:30
import DiffContent from 'jh_else_ce/diffs/components/diff_content.vue';
2021-09-04 01:27:46 +05:30
import createFlash from '~/flash';
2020-03-13 15:44:24 +05:30
import { hasDiff } from '~/helpers/diffs_helper';
2019-07-07 11:18:12 +05:30
import { diffViewerErrors } from '~/ide/constants';
2021-06-08 01:23:25 +05:30
import { scrollToElement } from '~/lib/utils/common_utils';
2021-03-11 19:13:27 +05:30
import { sprintf } from '~/locale';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
2022-06-21 17:19:12 +05:30
import notesEventHub from '~/notes/event_hub';
2021-03-11 19:13:27 +05:30
2021-01-29 00:20:46 +05:30
import {
DIFF_FILE_AUTOMATIC_COLLAPSE,
DIFF_FILE_MANUAL_COLLAPSE,
EVT_EXPAND_ALL_FILES,
EVT_PERF_MARK_DIFF_FILES_END,
EVT_PERF_MARK_FIRST_DIFF_FILE_SHOWN,
} from '../constants';
import eventHub from '../event_hub';
2021-10-27 15:23:28 +05:30
import { DIFF_FILE, GENERIC_ERROR, CONFLICT_TEXT } from '../i18n';
2021-09-30 23:02:18 +05:30
import { collapsedType, getShortShaFromFile } from '../utils/diff_file';
2021-03-11 19:13:27 +05:30
import DiffFileHeader from './diff_file_header.vue';
2018-11-08 19:23:39 +05:30
export default {
components: {
DiffFileHeader,
DiffContent,
2021-01-29 00:20:46 +05:30
GlButton,
2018-12-13 13:39:08 +05:30
GlLoadingIcon,
2021-03-11 19:13:27 +05:30
GlSprintf,
2021-10-27 15:23:28 +05:30
GlAlert,
2018-11-08 19:23:39 +05:30
},
2020-11-24 15:15:51 +05:30
directives: {
SafeHtml,
},
2021-09-30 23:02:18 +05:30
mixins: [glFeatureFlagsMixin(), IdState({ idProp: (vm) => vm.file.file_hash })],
2018-11-08 19:23:39 +05:30
props: {
file: {
type: Object,
required: true,
},
2021-03-08 18:12:59 +05:30
reviewed: {
type: Boolean,
required: false,
default: false,
},
2021-01-29 00:20:46 +05:30
isFirstFile: {
type: Boolean,
required: false,
default: false,
},
isLastFile: {
type: Boolean,
required: false,
default: false,
},
2018-11-08 19:23:39 +05:30
canCurrentUserFork: {
type: Boolean,
required: true,
},
2019-02-15 15:39:39 +05:30
helpPagePath: {
type: String,
required: false,
default: '',
},
2020-07-28 23:09:34 +05:30
viewDiffsFileByFile: {
type: Boolean,
required: true,
},
2021-09-30 23:02:18 +05:30
active: {
type: Boolean,
required: false,
default: true,
},
preRender: {
type: Boolean,
required: false,
default: false,
},
2018-11-08 19:23:39 +05:30
},
2021-09-30 23:02:18 +05:30
idState() {
2018-11-08 19:23:39 +05:30
return {
isLoadingCollapsedDiff: false,
2021-10-27 15:23:28 +05:30
hasLoadedCollapsedDiff: false,
2018-11-08 19:23:39 +05:30
forkMessageVisible: false,
2021-09-30 23:02:18 +05:30
hasToggled: false,
2018-11-08 19:23:39 +05:30
};
},
2021-01-29 00:20:46 +05:30
i18n: {
...DIFF_FILE,
genericError: GENERIC_ERROR,
},
2018-11-08 19:23:39 +05:30
computed: {
2021-10-27 15:23:28 +05:30
...mapState('diffs', [
'currentDiffFileId',
'codequalityDiff',
'conflictResolutionPath',
'canMerge',
]),
2018-12-13 13:39:08 +05:30
...mapGetters(['isNotesFetched']),
2021-06-08 01:23:25 +05:30
...mapGetters('diffs', ['getDiffFileDiscussions', 'isVirtualScrollingEnabled']),
2021-03-11 19:13:27 +05:30
viewBlobHref() {
return escape(this.file.view_path);
},
shortSha() {
return getShortShaFromFile(this.file);
2018-11-08 19:23:39 +05:30
},
2018-11-20 20:47:30 +05:30
showLoadingIcon() {
2021-09-30 23:02:18 +05:30
return this.idState.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() {
2021-03-11 19:13:27 +05:30
return !this.manuallyCollapsed && this.file.viewer.error === diffViewerErrors.too_large;
2019-07-07 11:18:12 +05:30
},
errorMessage() {
2021-01-29 00:20:46 +05:30
return !this.manuallyCollapsed ? this.file.viewer.error_message : '';
2019-07-07 11:18:12 +05:30
},
2019-09-30 21:07:59 +05:30
forkMessage() {
return sprintf(
2021-01-29 00:20:46 +05:30
this.$options.i18n.editInFork,
2019-09-30 21:07:59 +05:30
{
tag_start: '<span class="js-file-fork-suggestion-section-action">',
tag_end: '</span>',
},
false,
);
},
2021-01-29 00:20:46 +05:30
hasBodyClasses() {
const domParts = {
header: 'gl-rounded-base!',
contentByHash: '',
content: '',
};
if (this.showBody) {
domParts.header = 'gl-rounded-bottom-left-none gl-rounded-bottom-right-none';
domParts.contentByHash =
'gl-rounded-none gl-rounded-bottom-left-base gl-rounded-bottom-right-base gl-border-1 gl-border-t-0! gl-border-solid gl-border-gray-100';
domParts.content = 'gl-rounded-bottom-left-base gl-rounded-bottom-right-base';
2018-12-13 13:39:08 +05:30
}
2019-07-07 11:18:12 +05:30
2021-01-29 00:20:46 +05:30
return domParts;
2019-07-07 11:18:12 +05:30
},
2021-01-29 00:20:46 +05:30
automaticallyCollapsed() {
return collapsedType(this.file) === DIFF_FILE_AUTOMATIC_COLLAPSE;
},
manuallyCollapsed() {
return collapsedType(this.file) === DIFF_FILE_MANUAL_COLLAPSE;
},
showBody() {
return !this.isCollapsed || this.automaticallyCollapsed;
},
showWarning() {
2021-03-08 18:12:59 +05:30
return this.isCollapsed && this.automaticallyCollapsed && !this.viewDiffsFileByFile;
2021-01-29 00:20:46 +05:30
},
showContent() {
return !this.isCollapsed && !this.isFileTooLarge;
},
2021-03-11 19:13:27 +05:30
showLocalFileReviews() {
2021-11-11 11:23:49 +05:30
return Boolean(gon.current_user_id);
2021-03-11 19:13:27 +05:30
},
2021-06-08 01:23:25 +05:30
codequalityDiffForFile() {
return this.codequalityDiff?.files?.[this.file.file_path] || [];
2021-04-29 21:17:54 +05:30
},
2021-09-30 23:02:18 +05:30
isCollapsed() {
if (collapsedType(this.file) !== DIFF_FILE_MANUAL_COLLAPSE) {
return this.viewDiffsFileByFile ? false : this.file.viewer?.automaticallyCollapsed;
}
return this.file.viewer?.manuallyCollapsed;
},
2021-01-29 00:20:46 +05:30
},
watch: {
2021-04-17 20:07:23 +05:30
'file.id': {
handler: function fileIdHandler() {
2021-09-30 23:02:18 +05:30
if (this.preRender) return;
2021-04-17 20:07:23 +05:30
this.manageViewedEffects();
},
},
2020-10-24 23:57:45 +05:30
'file.file_hash': {
2021-01-29 00:20:46 +05:30
handler: function hashChangeWatch(newHash, oldHash) {
2021-10-27 15:23:28 +05:30
if (
newHash &&
oldHash &&
!this.hasDiff &&
!this.preRender &&
!this.idState.hasLoadedCollapsedDiff
) {
2021-01-29 00:20:46 +05:30
this.requestDiff();
2020-10-24 23:57:45 +05:30
}
},
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() {
2021-09-30 23:02:18 +05:30
if (this.preRender) return;
2021-01-29 00:20:46 +05:30
notesEventHub.$on(`loadCollapsedDiff/${this.file.file_hash}`, this.requestDiff);
eventHub.$on(EVT_EXPAND_ALL_FILES, this.expandAllListener);
},
mounted() {
2021-09-30 23:02:18 +05:30
if (this.preRender) return;
2021-01-29 00:20:46 +05:30
if (this.hasDiff) {
this.postRender();
2021-10-27 15:23:28 +05:30
} else if (this.viewDiffsFileByFile && !this.isCollapsed) {
this.requestDiff();
2021-01-29 00:20:46 +05:30
}
2021-03-11 19:13:27 +05:30
2021-04-17 20:07:23 +05:30
this.manageViewedEffects();
2021-01-29 00:20:46 +05:30
},
beforeDestroy() {
2021-09-30 23:02:18 +05:30
if (this.preRender) return;
2021-01-29 00:20:46 +05:30
eventHub.$off(EVT_EXPAND_ALL_FILES, this.expandAllListener);
2019-02-15 15:39:39 +05:30
},
2018-11-08 19:23:39 +05:30
methods: {
2019-07-07 11:18:12 +05:30
...mapActions('diffs', [
'loadCollapsedDiff',
'assignDiscussionsToDiff',
'setRenderIt',
2021-01-29 00:20:46 +05:30
'setFileCollapsedByUser',
2019-07-07 11:18:12 +05:30
]),
2021-04-17 20:07:23 +05:30
manageViewedEffects() {
2021-09-30 23:02:18 +05:30
if (
!this.idState.hasToggled &&
this.reviewed &&
!this.isCollapsed &&
this.showLocalFileReviews
) {
2021-04-17 20:07:23 +05:30
this.handleToggle();
2021-09-30 23:02:18 +05:30
this.idState.hasToggled = true;
2021-04-17 20:07:23 +05:30
}
},
2021-01-29 00:20:46 +05:30
expandAllListener() {
if (this.isCollapsed) {
this.handleToggle();
}
},
async postRender() {
const eventsForThisFile = [];
if (this.isFirstFile) {
eventsForThisFile.push(EVT_PERF_MARK_FIRST_DIFF_FILE_SHOWN);
}
if (this.isLastFile) {
eventsForThisFile.push(EVT_PERF_MARK_DIFF_FILES_END);
}
await this.$nextTick();
2021-03-08 18:12:59 +05:30
eventsForThisFile.forEach((event) => {
2021-01-29 00:20:46 +05:30
eventHub.$emit(event);
});
},
2021-06-08 01:23:25 +05:30
handleToggle({ viaUserInteraction = false } = {}) {
const collapsingNow = !this.isCollapsed;
const contentElement = this.$el.querySelector(`#diff-content-${this.file.file_hash}`);
2021-01-29 00:20:46 +05:30
this.setFileCollapsedByUser({
filePath: this.file.file_path,
2021-06-08 01:23:25 +05:30
collapsed: collapsingNow,
2021-01-29 00:20:46 +05:30
});
2021-06-08 01:23:25 +05:30
if (collapsingNow && viaUserInteraction && contentElement) {
scrollToElement(contentElement, { duration: 1 });
}
if (!this.hasDiff && !collapsingNow) {
2021-01-29 00:20:46 +05:30
this.requestDiff();
2018-11-08 19:23:39 +05:30
}
},
2021-01-29 00:20:46 +05:30
requestDiff() {
2021-10-27 15:23:28 +05:30
const { idState, file } = this;
idState.isLoadingCollapsedDiff = true;
2018-11-08 19:23:39 +05:30
2021-10-27 15:23:28 +05:30
this.loadCollapsedDiff(file)
2018-11-08 19:23:39 +05:30
.then(() => {
2021-10-27 15:23:28 +05:30
idState.isLoadingCollapsedDiff = false;
idState.hasLoadedCollapsedDiff = true;
if (this.file.file_hash === file.file_hash) {
this.setRenderIt(this.file);
}
2018-11-20 20:47:30 +05:30
})
.then(() => {
2021-10-27 15:23:28 +05:30
if (this.file.file_hash !== file.file_hash) return;
2018-11-20 20:47:30 +05:30
requestIdleCallback(
() => {
2021-01-29 00:20:46 +05:30
this.postRender();
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(() => {
2021-10-27 15:23:28 +05:30
idState.isLoadingCollapsedDiff = false;
2021-09-04 01:27:46 +05:30
createFlash({
message: this.$options.i18n.genericError,
});
2018-11-08 19:23:39 +05:30
});
},
showForkMessage() {
2021-09-30 23:02:18 +05:30
this.idState.forkMessageVisible = true;
2018-11-08 19:23:39 +05:30
},
hideForkMessage() {
2021-09-30 23:02:18 +05:30
this.idState.forkMessageVisible = false;
2018-11-08 19:23:39 +05:30
},
},
2021-10-27 15:23:28 +05:30
CONFLICT_TEXT,
2018-11-08 19:23:39 +05:30
};
</script>
<template>
<div
2021-09-30 23:02:18 +05:30
:id="!preRender && active && 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,
2020-10-24 23:57:45 +05:30
'comments-disabled': Boolean(file.brokenSymlink),
2021-01-29 00:20:46 +05:30
'has-body': showBody,
2021-06-08 01:23:25 +05:30
'is-virtual-scrolling': isVirtualScrollingEnabled,
2018-12-05 23:21:45 +05:30
}"
2020-04-22 19:07:51 +05:30
:data-path="file.new_path"
2021-01-29 00:20:46 +05:30
class="diff-file file-holder gl-border-none"
2018-11-08 19:23:39 +05:30
>
<diff-file-header
:can-current-user-fork="canCurrentUserFork"
:diff-file="file"
:collapsible="true"
2021-03-11 19:13:27 +05:30
:reviewed="reviewed"
2018-11-08 19:23:39 +05:30
:expanded="!isCollapsed"
:add-merge-request-buttons="true"
2020-07-28 23:09:34 +05:30
:view-diffs-file-by-file="viewDiffsFileByFile"
2021-03-11 19:13:27 +05:30
:show-local-file-reviews="showLocalFileReviews"
2021-06-08 01:23:25 +05:30
:codequality-diff="codequalityDiffForFile"
2021-01-29 00:20:46 +05:30
class="js-file-title file-title gl-border-1 gl-border-solid gl-border-gray-100"
:class="hasBodyClasses.header"
2021-06-08 01:23:25 +05:30
@toggleFile="handleToggle({ viaUserInteraction: true })"
2018-11-08 19:23:39 +05:30
@showForkMessage="showForkMessage"
/>
2021-09-30 23:02:18 +05:30
<div
v-if="idState.forkMessageVisible"
class="js-file-fork-suggestion-section file-fork-suggestion"
>
2020-11-24 15:15:51 +05:30
<span v-safe-html="forkMessage" class="file-fork-suggestion-note"></span>
2022-07-16 23:28:13 +05:30
<gl-button
2019-02-15 15:39:39 +05:30
:href="file.fork_path"
2022-07-16 23:28:13 +05:30
class="js-fork-suggestion-button"
category="secondary"
variant="confirm"
>{{ $options.i18n.fork }}</gl-button
2018-11-08 19:23:39 +05:30
>
<button
class="js-cancel-fork-suggestion-button btn btn-grouped"
type="button"
@click="hideForkMessage"
>
2021-01-29 00:20:46 +05:30
{{ $options.i18n.cancel }}
2018-11-08 19:23:39 +05:30
</button>
</div>
2019-07-07 11:18:12 +05:30
<template v-else>
2021-01-29 00:20:46 +05:30
<div
2021-09-30 23:02:18 +05:30
:id="!preRender && active && `diff-content-${file.file_hash}`"
2021-01-29 00:20:46 +05:30
:class="hasBodyClasses.contentByHash"
data-testid="content-area"
>
2022-07-16 23:28:13 +05:30
<gl-alert
v-if="!showLoadingIcon && file.conflict_type"
variant="danger"
:dismissible="false"
data-testid="conflictsAlert"
>
{{ $options.CONFLICT_TEXT[file.conflict_type] }}
<template v-if="!canMerge">
{{ __('Ask someone with write access to resolve it.') }}
</template>
<gl-sprintf
v-else-if="conflictResolutionPath"
:message="
__(
'You can %{gitlabLinkStart}resolve conflicts on GitLab%{gitlabLinkEnd} or %{resolveLocallyStart}resolve it locally%{resolveLocallyEnd}.',
)
"
>
<template #gitlabLink="{ content }">
<gl-button
:href="conflictResolutionPath"
variant="link"
class="gl-vertical-align-text-bottom"
>{{ content }}</gl-button
>
</template>
<template #resolveLocally="{ content }">
<gl-button
variant="link"
class="gl-vertical-align-text-bottom js-check-out-modal-trigger"
>{{ content }}</gl-button
>
</template>
</gl-sprintf>
<gl-sprintf
v-else
:message="__('You can %{resolveLocallyStart}resolve it locally%{resolveLocallyEnd}.')"
>
<template #resolveLocally="{ content }">
<gl-button
variant="link"
class="gl-vertical-align-text-bottom js-check-out-modal-trigger"
>{{ content }}</gl-button
>
</template>
</gl-sprintf>
</gl-alert>
2021-01-29 00:20:46 +05:30
<gl-loading-icon
v-if="showLoadingIcon"
2021-09-30 23:02:18 +05:30
size="sm"
2021-01-29 00:20:46 +05:30
class="diff-content loading gl-my-0 gl-pt-3"
data-testid="loader-icon"
/>
<div v-else-if="errorMessage" class="diff-viewer">
2021-03-11 19:13:27 +05:30
<div
v-if="isFileTooLarge"
class="collapsed-file-warning gl-p-7 gl-bg-orange-50 gl-text-center gl-rounded-bottom-left-base gl-rounded-bottom-right-base"
>
<p class="gl-mb-5">
{{ $options.i18n.tooLarge }}
</p>
<gl-button data-testid="blob-button" category="secondary" :href="viewBlobHref">
<gl-sprintf :message="$options.i18n.blobView">
<template #commitSha>{{ shortSha }}</template>
</gl-sprintf>
</gl-button>
</div>
<div v-else v-safe-html="errorMessage" class="nothing-here-block"></div>
2019-07-07 11:18:12 +05:30
</div>
2020-04-08 14:13:33 +05:30
<template v-else>
2021-01-29 00:20:46 +05:30
<div
2021-09-30 23:02:18 +05:30
v-if="showWarning"
2021-01-29 00:20:46 +05:30
class="collapsed-file-warning gl-p-7 gl-bg-orange-50 gl-text-center gl-rounded-bottom-left-base gl-rounded-bottom-right-base"
>
2021-03-11 19:13:27 +05:30
<p class="gl-mb-5">
2021-01-29 00:20:46 +05:30
{{ $options.i18n.autoCollapsed }}
</p>
<gl-button
data-testid="expand-button"
category="secondary"
variant="warning"
@click.prevent="handleToggle"
>
{{ $options.i18n.expand }}
</gl-button>
2020-04-08 14:13:33 +05:30
</div>
<diff-content
2021-09-30 23:02:18 +05:30
v-if="showContent"
2021-01-29 00:20:46 +05:30
:class="hasBodyClasses.content"
2020-04-08 14:13:33 +05:30
: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>