Commit 3e66795e authored by Felipe Artur's avatar Felipe Artur Committed by Tim Zallmann

Changes tab VUE refactoring

parent 14e35ac9
......@@ -31,7 +31,9 @@ export default class Autosave {
// https://github.com/vuejs/vue/issues/2804#issuecomment-216968137
const event = new Event('change', { bubbles: true, cancelable: false });
const field = this.field.get(0);
field.dispatchEvent(event);
if (field) {
field.dispatchEvent(event);
}
}
save() {
......
This diff is collapsed.
/* eslint-disable comma-dangle, object-shorthand, func-names, quote-props, no-else-return, camelcase, max-len */
/* global CommentsStore */
/* global ResolveService */
......@@ -41,54 +40,54 @@ const ResolveBtn = Vue.extend({
required: true,
},
},
data: function () {
data() {
return {
discussions: CommentsStore.state,
loading: false
loading: false,
};
},
computed: {
discussion: function () {
discussion() {
return this.discussions[this.discussionId];
},
note: function () {
note() {
return this.discussion ? this.discussion.getNote(this.noteId) : {};
},
buttonText: function () {
buttonText() {
if (this.isResolved) {
return `Resolved by ${this.resolvedByName}`;
} else if (this.canResolve) {
return 'Mark as resolved';
} else {
return 'Unable to resolve';
}
return 'Unable to resolve';
},
isResolved: function () {
isResolved() {
if (this.note) {
return this.note.resolved;
} else {
return false;
}
return false;
},
resolvedByName: function () {
resolvedByName() {
return this.note.resolved_by;
},
},
watch: {
'discussions': {
discussions: {
handler: 'updateTooltip',
deep: true
}
deep: true,
},
},
mounted: function () {
mounted() {
$(this.$refs.button).tooltip({
container: 'body'
container: 'body',
});
},
beforeDestroy: function () {
beforeDestroy() {
CommentsStore.delete(this.discussionId, this.noteId);
},
created: function () {
created() {
CommentsStore.create({
discussionId: this.discussionId,
noteId: this.noteId,
......@@ -101,43 +100,41 @@ const ResolveBtn = Vue.extend({
});
},
methods: {
updateTooltip: function () {
updateTooltip() {
this.$nextTick(() => {
$(this.$refs.button)
.tooltip('hide')
.tooltip('_fixTitle');
});
},
resolve: function () {
resolve() {
if (!this.canResolve) return;
let promise;
this.loading = true;
if (this.isResolved) {
promise = ResolveService
.unresolve(this.noteId);
promise = ResolveService.unresolve(this.noteId);
} else {
promise = ResolveService
.resolve(this.noteId);
promise = ResolveService.resolve(this.noteId);
}
promise
.then(resp => resp.json())
.then((data) => {
.then(data => {
this.loading = false;
const resolved_by = data ? data.resolved_by : null;
const resolvedBy = data ? data.resolved_by : null;
CommentsStore.update(this.discussionId, this.noteId, !this.isResolved, resolved_by);
CommentsStore.update(this.discussionId, this.noteId, !this.isResolved, resolvedBy);
this.discussion.updateHeadline(data);
gl.mrWidget.checkStatus();
document.dispatchEvent(new CustomEvent('refreshVueNotes'));
this.updateTooltip();
})
.catch(() => new Flash('An error occurred when trying to resolve a comment. Please try again.'));
}
.catch(
() => new Flash('An error occurred when trying to resolve a comment. Please try again.'),
);
},
},
});
......
/* eslint-disable func-names, comma-dangle, new-cap, no-new */
/* global ResolveCount */
/* eslint-disable func-names, new-cap */
import $ from 'jquery';
import Vue from 'vue';
......@@ -15,12 +14,13 @@ import './components/resolve_count';
import './components/resolve_discussion_btn';
import './components/diff_note_avatars';
import './components/new_issue_for_discussion';
import { hasVueMRDiscussionsCookie } from '../lib/utils/common_utils';
export default () => {
const projectPathHolder = document.querySelector('.merge-request') || document.querySelector('.commit-box');
const projectPathHolder =
document.querySelector('.merge-request') || document.querySelector('.commit-box');
const projectPath = projectPathHolder.dataset.projectPath;
const COMPONENT_SELECTOR = 'resolve-btn, resolve-discussion-btn, jump-to-discussion, comment-and-resolve-btn, new-issue-for-discussion-btn';
const COMPONENT_SELECTOR =
'resolve-btn, resolve-discussion-btn, jump-to-discussion, comment-and-resolve-btn, new-issue-for-discussion-btn';
window.gl = window.gl || {};
window.gl.diffNoteApps = {};
......@@ -28,9 +28,9 @@ export default () => {
window.ResolveService = new gl.DiffNotesResolveServiceClass(projectPath);
gl.diffNotesCompileComponents = () => {
$('diff-note-avatars').each(function () {
$('diff-note-avatars').each(function() {
const tmp = Vue.extend({
template: $(this).get(0).outerHTML
template: $(this).get(0).outerHTML,
});
const tmpApp = new tmp().$mount();
......@@ -41,12 +41,12 @@ export default () => {
});
});
const $components = $(COMPONENT_SELECTOR).filter(function () {
const $components = $(COMPONENT_SELECTOR).filter(function() {
return $(this).closest('resolve-count').length !== 1;
});
if ($components) {
$components.each(function () {
$components.each(function() {
const $this = $(this);
const noteId = $this.attr(':note-id');
const discussionId = $this.attr(':discussion-id');
......@@ -54,7 +54,7 @@ export default () => {
if ($this.is('comment-and-resolve-btn') && !discussionId) return;
const tmp = Vue.extend({
template: $this.get(0).outerHTML
template: $this.get(0).outerHTML,
});
const tmpApp = new tmp().$mount();
......@@ -69,15 +69,5 @@ export default () => {
gl.diffNotesCompileComponents();
const resolveCountAppEl = document.querySelector('#resolve-count-app');
if (!hasVueMRDiscussionsCookie() && resolveCountAppEl) {
new Vue({
el: resolveCountAppEl,
components: {
'resolve-count': ResolveCount
},
});
}
$(window).trigger('resize.nav');
};
......@@ -8,8 +8,12 @@ window.gl = window.gl || {};
class ResolveServiceClass {
constructor(root) {
this.noteResource = Vue.resource(`${root}/notes{/noteId}/resolve?html=true`);
this.discussionResource = Vue.resource(`${root}/merge_requests{/mergeRequestId}/discussions{/discussionId}/resolve?html=true`);
this.noteResource = Vue.resource(
`${root}/notes{/noteId}/resolve?html=true`,
);
this.discussionResource = Vue.resource(
`${root}/merge_requests{/mergeRequestId}/discussions{/discussionId}/resolve?html=true`,
);
}
resolve(noteId) {
......@@ -33,7 +37,7 @@ class ResolveServiceClass {
promise
.then(resp => resp.json())
.then((data) => {
.then(data => {
discussion.loading = false;
const resolvedBy = data ? data.resolved_by : null;
......@@ -45,9 +49,13 @@ class ResolveServiceClass {
if (gl.mrWidget) gl.mrWidget.checkStatus();
discussion.updateHeadline(data);
document.dispatchEvent(new CustomEvent('refreshVueNotes'));
})
.catch(() => new Flash('An error occurred when trying to resolve a discussion. Please try again.'));
.catch(
() =>
new Flash(
'An error occurred when trying to resolve a discussion. Please try again.',
),
);
}
resolveAll(mergeRequestId, discussionId) {
......@@ -55,10 +63,13 @@ class ResolveServiceClass {
discussion.loading = true;
return this.discussionResource.save({
mergeRequestId,
discussionId,
}, {});
return this.discussionResource.save(
{
mergeRequestId,
discussionId,
},
{},
);
}
unResolveAll(mergeRequestId, discussionId) {
......@@ -66,10 +77,13 @@ class ResolveServiceClass {
discussion.loading = true;
return this.discussionResource.delete({
mergeRequestId,
discussionId,
}, {});
return this.discussionResource.delete(
{
mergeRequestId,
discussionId,
},
{},
);
}
}
......
<script>
import { mapState, mapGetters, mapActions } from 'vuex';
import Icon from '~/vue_shared/components/icon.vue';
import { __ } from '~/locale';
import createFlash from '~/flash';
import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
import CompareVersions from './compare_versions.vue';
import ChangedFiles from './changed_files.vue';
import DiffFile from './diff_file.vue';
import NoChanges from './no_changes.vue';
import HiddenFilesWarning from './hidden_files_warning.vue';
export default {
name: 'DiffsApp',
components: {
Icon,
LoadingIcon,
CompareVersions,
ChangedFiles,
DiffFile,
NoChanges,
HiddenFilesWarning,
},
props: {
endpoint: {
type: String,
required: true,
},
shouldShow: {
type: Boolean,
required: false,
default: false,
},
currentUser: {
type: Object,
required: true,
},
},
data() {
return {
activeFile: '',
};
},
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,
}),
...mapGetters(['isParallelView']),
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');
},
},
watch: {
diffViewType() {
this.adjustView();
},
shouldShow() {
this.adjustView();
},
},
mounted() {
this.setEndpoint(this.endpoint);
this
.fetchDiffFiles()
.catch(() => {
createFlash(__('Something went wrong on our end. Please try again!'));
});
},
created() {
this.adjustView();
},
methods: {
...mapActions(['setEndpoint', 'fetchDiffFiles']),
setActive(filePath) {
this.activeFile = filePath;
},
unsetActive(filePath) {
if (this.activeFile === filePath) {
this.activeFile = '';
}
},
adjustView() {
if (this.shouldShow && this.isParallelView) {
window.mrTabs.expandViewContainer();
} else {
window.mrTabs.resetViewContainer();
}
},
},
};
</script>
<template>
<div v-if="shouldShow">
<div
v-if="isLoading"
class="loading"
>
<loading-icon />
</div>
<div
v-else
id="diffs"
:class="{ active: shouldShow }"
class="diffs tab-pane"
>
<compare-versions
v-if="!commit && mergeRequestDiffs.length > 1"
: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>
<changed-files
:diff-files="diffFiles"
:active-file="activeFile"
/>
<div
v-if="diffFiles.length > 0"
class="files"
>
<diff-file
v-for="file in diffFiles"
:key="file.newPath"
:file="file"
:current-user="currentUser"
@setActive="setActive(file.filePath)"
@unsetActive="unsetActive(file.filePath)"
/>
</div>
<no-changes v-else />
</div>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import Icon from '~/vue_shared/components/icon.vue';
import { pluralize } from '~/lib/utils/text_utility';
import { getParameterValues, mergeUrlParams } from '~/lib/utils/url_utility';
import { contentTop } from '~/lib/utils/common_utils';
import { __ } from '~/locale';
import ChangedFilesDropdown from './changed_files_dropdown.vue';
import changedFilesMixin from '../mixins/changed_files';
export default {
components: {
Icon,
ChangedFilesDropdown,
ClipboardButton,
},
mixins: [changedFilesMixin],
props: {
activeFile: {
type: String,
required: false,
default: '',
},
},
data() {
return {
isStuck: false,
maxWidth: 'auto',
offsetTop: 0,
};
},
computed: {
...mapGetters(['isInlineView', 'isParallelView', 'areAllFilesCollapsed']),
sumAddedLines() {
return this.sumValues('addedLines');
},
sumRemovedLines() {
return this.sumValues('removedLines');
},
whitespaceVisible() {
return !getParameterValues('w')[0];
},
toggleWhitespaceText() {
if (this.whitespaceVisible) {
return __('Hide whitespace changes');
}
return __('Show whitespace changes');
},
toggleWhitespacePath() {
if (this.whitespaceVisible) {
return mergeUrlParams({ w: 1 }, window.location.href);
}
return mergeUrlParams({ w: 0 }, window.location.href);
},
top() {
return `${this.offsetTop}px`;
},
},
created() {
document.addEventListener('scroll', this.handleScroll);
this.offsetTop = contentTop();
},
beforeDestroy() {
document.removeEventListener('scroll', this.handleScroll);
},
methods: {
...mapActions(['setInlineDiffViewType', 'setParallelDiffViewType', 'expandAllFiles']),
pluralize,
handleScroll() {
if (!this.updating) {
requestAnimationFrame(this.updateIsStuck);
this.updating = true;
}
},
updateIsStuck() {
if (!this.$refs.wrapper) {
return;
}
const scrollPosition = window.scrollY;
this.isStuck = scrollPosition + this.offsetTop >= this.$refs.placeholder.offsetTop;
this.updating = false;
},
sumValues(key) {
return this.diffFiles.reduce((total, file) => total + file[key], 0);
},
},
};
</script>
<template>
<span>
<div ref="placeholder"></div>
<div
ref="wrapper"
:style="{ top }"
:class="{'is-stuck': isStuck}"
class="content-block oneline-block diff-files-changed