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

254 lines
6.7 KiB
Vue
Raw Normal View History

2018-11-08 19:23:39 +05:30
<script>
import { mapState, mapGetters, mapActions } from 'vuex';
import Icon from '~/vue_shared/components/icon.vue';
import { __ } from '~/locale';
import createFlash from '~/flash';
2018-12-13 13:39:08 +05:30
import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
2018-11-08 19:23:39 +05:30
import eventHub from '../../notes/event_hub';
import CompareVersions from './compare_versions.vue';
import DiffFile from './diff_file.vue';
import NoChanges from './no_changes.vue';
import HiddenFilesWarning from './hidden_files_warning.vue';
2018-12-05 23:21:45 +05:30
import CommitWidget from './commit_widget.vue';
import TreeList from './tree_list.vue';
2018-11-08 19:23:39 +05:30
export default {
name: 'DiffsApp',
components: {
Icon,
CompareVersions,
DiffFile,
NoChanges,
HiddenFilesWarning,
2018-12-05 23:21:45 +05:30
CommitWidget,
TreeList,
2018-12-13 13:39:08 +05:30
GlLoadingIcon,
2018-11-08 19:23:39 +05:30
},
props: {
endpoint: {
type: String,
required: true,
},
projectPath: {
type: String,
required: true,
},
shouldShow: {
type: Boolean,
required: false,
default: false,
},
currentUser: {
type: Object,
required: true,
},
},
2018-12-13 13:39:08 +05:30
data() {
return {
assignedDiscussions: false,
};
},
2018-11-08 19:23:39 +05:30
computed: {
...mapState({
isLoading: state => state.diffs.isLoading,
diffFiles: state => state.diffs.diffFiles,
diffViewType: state => state.diffs.diffViewType,
mergeRequestDiffs: state => state.diffs.mergeRequestDiffs,
mergeRequestDiff: state => state.diffs.mergeRequestDiff,
latestVersionPath: state => state.diffs.latestVersionPath,
startVersion: state => state.diffs.startVersion,
commit: state => state.diffs.commit,
targetBranchName: state => state.diffs.targetBranchName,
renderOverflowWarning: state => state.diffs.renderOverflowWarning,
numTotalFiles: state => state.diffs.realSize,
numVisibleFiles: state => state.diffs.size,
plainDiffPath: state => state.diffs.plainDiffPath,
emailPatchPath: state => state.diffs.emailPatchPath,
}),
2018-12-13 13:39:08 +05:30
...mapState('diffs', ['showTreeList', 'isLoading']),
2018-11-08 19:23:39 +05:30
...mapGetters('diffs', ['isParallelView']),
2018-12-13 13:39:08 +05:30
...mapGetters(['isNotesFetched', 'getNoteableData']),
2018-11-08 19:23:39 +05:30
targetBranch() {
return {
branchName: this.targetBranchName,
versionIndex: -1,
path: '',
};
},
notAllCommentsDisplayed() {
if (this.commit) {
return __('Only comments from the following commit are shown below');
} else if (this.startVersion) {
return __(
"Not all comments are displayed because you're comparing two versions of the diff.",
);
}
return __(
"Not all comments are displayed because you're viewing an old version of the diff.",
);
},
showLatestVersion() {
if (this.commit) {
return __('Show latest version of the diff');
}
return __('Show latest version');
},
canCurrentUserFork() {
return this.currentUser.canFork === true && this.currentUser.canCreateMergeRequest;
},
2018-12-05 23:21:45 +05:30
showCompareVersions() {
return this.mergeRequestDiffs && this.mergeRequestDiff;
},
2018-11-08 19:23:39 +05:30
},
watch: {
diffViewType() {
this.adjustView();
},
shouldShow() {
// When the shouldShow property changed to true, the route is rendered for the first time
// and if we have the isLoading as true this means we didn't fetch the data
if (this.isLoading) {
this.fetchData();
}
this.adjustView();
},
2018-12-05 23:21:45 +05:30
isLoading: 'adjustView',
showTreeList: 'adjustView',
2018-11-08 19:23:39 +05:30
},
mounted() {
this.setBaseConfig({ endpoint: this.endpoint, projectPath: this.projectPath });
if (this.shouldShow) {
this.fetchData();
}
},
created() {
this.adjustView();
2018-11-20 20:47:30 +05:30
eventHub.$once('fetchedNotesData', this.setDiscussions);
2018-11-08 19:23:39 +05:30
},
methods: {
2018-11-20 20:47:30 +05:30
...mapActions('diffs', [
'setBaseConfig',
'fetchDiffFiles',
'startRenderDiffsQueue',
'assignDiscussionsToDiff',
]),
2018-11-08 19:23:39 +05:30
fetchData() {
2018-11-20 20:47:30 +05:30
this.fetchDiffFiles()
.then(() => {
requestIdleCallback(
() => {
this.setDiscussions();
this.startRenderDiffsQueue();
},
{ timeout: 1000 },
);
})
.catch(() => {
createFlash(__('Something went wrong on our end. Please try again!'));
});
2018-11-08 19:23:39 +05:30
if (!this.isNotesFetched) {
eventHub.$emit('fetchNotesData');
}
},
2018-11-20 20:47:30 +05:30
setDiscussions() {
2018-12-13 13:39:08 +05:30
if (this.isNotesFetched && !this.assignedDiscussions && !this.isLoading) {
this.assignedDiscussions = true;
requestIdleCallback(() => this.assignDiscussionsToDiff(), { timeout: 1000 });
2018-11-20 20:47:30 +05:30
}
},
2018-11-08 19:23:39 +05:30
adjustView() {
2018-12-05 23:21:45 +05:30
if (this.shouldShow) {
this.$nextTick(() => {
window.mrTabs.resetViewContainer();
window.mrTabs.expandViewContainer(this.showTreeList);
});
2018-11-08 19:23:39 +05:30
}
},
},
};
</script>
<template>
<div v-show="shouldShow">
<div
v-if="isLoading"
class="loading"
>
2018-12-05 23:21:45 +05:30
<gl-loading-icon />
2018-11-08 19:23:39 +05:30
</div>
<div
v-else
id="diffs"
:class="{ active: shouldShow }"
class="diffs tab-pane"
>
<compare-versions
2018-12-05 23:21:45 +05:30
v-if="showCompareVersions"
2018-11-08 19:23:39 +05:30
:merge-request-diffs="mergeRequestDiffs"
:merge-request-diff="mergeRequestDiff"
:start-version="startVersion"
:target-branch="targetBranch"
/>
<hidden-files-warning
v-if="renderOverflowWarning"
:visible="numVisibleFiles"
:total="numTotalFiles"
:plain-diff-path="plainDiffPath"
:email-patch-path="emailPatchPath"
/>
<div
v-if="commit || startVersion || (mergeRequestDiff && !mergeRequestDiff.latest)"
class="mr-version-controls"
>
<div class="content-block comments-disabled-notif clearfix">
<i class="fa fa-info-circle"></i>
{{ notAllCommentsDisplayed }}
<div class="pull-right">
<a
:href="latestVersionPath"
class="btn btn-sm"
>
{{ showLatestVersion }}
</a>
</div>
</div>
</div>
2018-12-05 23:21:45 +05:30
<commit-widget
v-if="commit"
:commit="commit"
2018-11-08 19:23:39 +05:30
/>
2018-12-13 13:39:08 +05:30
<div
:data-can-create-note="getNoteableData.current_user.can_create_note"
class="files d-flex prepend-top-default"
>
2018-12-05 23:21:45 +05:30
<div
v-show="showTreeList"
class="diff-tree-list"
>
<tree-list />
</div>
<div
v-if="diffFiles.length > 0"
class="diff-files-holder"
>
<diff-file
v-for="file in diffFiles"
:key="file.newPath"
:file="file"
:can-current-user-fork="canCurrentUserFork"
/>
</div>
<no-changes v-else />
2018-11-08 19:23:39 +05:30
</div>
</div>
</div>
</template>