Commit 4e734a90 authored by Fatih Acet's avatar Fatih Acet

Implement MR diff notes autosave feature.

parent c1fa6f7c
<script> <script>
import $ from 'jquery';
import { mapState, mapGetters, mapActions } from 'vuex'; import { mapState, mapGetters, mapActions } from 'vuex';
import createFlash from '~/flash'; import createFlash from '~/flash';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import noteForm from '../../notes/components/note_form.vue'; import noteForm from '../../notes/components/note_form.vue';
import { getNoteFormData } from '../store/utils'; import { getNoteFormData } from '../store/utils';
import Autosave from '../../autosave';
import { DIFF_NOTE_TYPE, NOTE_TYPE } from '../constants';
export default { export default {
components: { components: {
...@@ -37,11 +40,29 @@ export default { ...@@ -37,11 +40,29 @@ export default {
noteableData: state => state.notes.noteableData, noteableData: state => state.notes.noteableData,
diffViewType: state => state.diffs.diffViewType, diffViewType: state => state.diffs.diffViewType,
}), }),
...mapGetters(['noteableType', 'getNotesDataByProp']), ...mapGetters(['isLoggedIn', 'noteableType', 'getNoteableData', 'getNotesDataByProp']),
},
mounted() {
if (this.isLoggedIn) {
const textarea = this.$el.querySelector('.js-note-text');
const noteableData = this.getNoteableData;
const keys = [
NOTE_TYPE,
this.noteableType,
noteableData.id,
noteableData.diff_head_sha,
DIFF_NOTE_TYPE,
noteableData.source_project_id,
this.line.lineCode,
];
this.autosave = new Autosave($(textarea), keys);
}
}, },
methods: { methods: {
...mapActions(['cancelCommentForm', 'saveNote', 'fetchDiscussions']), ...mapActions(['cancelCommentForm', 'saveNote', 'fetchDiscussions']),
handleCancelCommentForm() { handleCancelCommentForm() {
this.autosave.reset();
this.cancelCommentForm({ this.cancelCommentForm({
lineCode: this.line.lineCode, lineCode: this.line.lineCode,
}); });
......
...@@ -7,6 +7,7 @@ export const CONTEXT_LINE_TYPE = 'context'; ...@@ -7,6 +7,7 @@ export const CONTEXT_LINE_TYPE = 'context';
export const EMPTY_CELL_TYPE = 'empty-cell'; export const EMPTY_CELL_TYPE = 'empty-cell';
export const COMMENT_FORM_TYPE = 'commentForm'; export const COMMENT_FORM_TYPE = 'commentForm';
export const DIFF_NOTE_TYPE = 'DiffNote'; export const DIFF_NOTE_TYPE = 'DiffNote';
export const NOTE_TYPE = 'Note';
export const NEW_LINE_TYPE = 'new'; export const NEW_LINE_TYPE = 'new';
export const OLD_LINE_TYPE = 'old'; export const OLD_LINE_TYPE = 'old';
export const TEXT_DIFF_POSITION_TYPE = 'text'; export const TEXT_DIFF_POSITION_TYPE = 'text';
......
...@@ -19,7 +19,15 @@ describe('DiffLineNoteForm', () => { ...@@ -19,7 +19,15 @@ describe('DiffLineNoteForm', () => {
diffLines, diffLines,
line: diffLines[0], line: diffLines[0],
noteTargetLine: diffLines[0], noteTargetLine: diffLines[0],
}).$mount(); });
Object.defineProperty(component, 'isLoggedIn', {
get() {
return true;
},
});
component.$mount();
}); });
describe('methods', () => { describe('methods', () => {
...@@ -56,6 +64,15 @@ describe('DiffLineNoteForm', () => { ...@@ -56,6 +64,15 @@ describe('DiffLineNoteForm', () => {
}); });
}); });
describe('mounted', () => {
it('should init autosave', () => {
const key = 'autosave/Note/issue///DiffNote//1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_1';
expect(component.autosave).toBeDefined();
expect(component.autosave.key).toEqual(key);
});
});
describe('template', () => { describe('template', () => {
it('should have note form', () => { it('should have note form', () => {
const { $el } = component; const { $el } = component;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment