Moves placeholders components into shared folder with documentation. Makes them easier to reuse in MR and Snippets comments
This commit is contained in:
parent
00c15cc27c
commit
1ab8aeeefd
|
@ -9,8 +9,8 @@
|
||||||
import issueNoteSignedOutWidget from './issue_note_signed_out_widget.vue';
|
import issueNoteSignedOutWidget from './issue_note_signed_out_widget.vue';
|
||||||
import issueNoteEditedText from './issue_note_edited_text.vue';
|
import issueNoteEditedText from './issue_note_edited_text.vue';
|
||||||
import issueNoteForm from './issue_note_form.vue';
|
import issueNoteForm from './issue_note_form.vue';
|
||||||
import placeholderNote from './issue_placeholder_note.vue';
|
import placeholderNote from '../../vue_shared/components/notes/placeholder_note.vue';
|
||||||
import placeholderSystemNote from './issue_placeholder_system_note.vue';
|
import placeholderSystemNote from '../../vue_shared/components/notes/placeholder_system_note.vue';
|
||||||
import autosave from '../mixins/autosave';
|
import autosave from '../mixins/autosave';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
|
@ -5,10 +5,10 @@
|
||||||
import * as constants from '../constants';
|
import * as constants from '../constants';
|
||||||
import issueNote from './issue_note.vue';
|
import issueNote from './issue_note.vue';
|
||||||
import issueDiscussion from './issue_discussion.vue';
|
import issueDiscussion from './issue_discussion.vue';
|
||||||
import issueSystemNote from './issue_system_note.vue';
|
import systemNote from '../../vue_shared/components/notes/system_note.vue';
|
||||||
import issueCommentForm from './issue_comment_form.vue';
|
import issueCommentForm from './issue_comment_form.vue';
|
||||||
import placeholderNote from './issue_placeholder_note.vue';
|
import placeholderNote from '../../vue_shared/components/notes/placeholder_note.vue';
|
||||||
import placeholderSystemNote from './issue_placeholder_system_note.vue';
|
import placeholderSystemNote from '../../vue_shared/components/notes/placeholder_system_note.vue';
|
||||||
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
|
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
@ -37,7 +37,7 @@
|
||||||
components: {
|
components: {
|
||||||
issueNote,
|
issueNote,
|
||||||
issueDiscussion,
|
issueDiscussion,
|
||||||
issueSystemNote,
|
systemNote,
|
||||||
issueCommentForm,
|
issueCommentForm,
|
||||||
loadingIcon,
|
loadingIcon,
|
||||||
placeholderNote,
|
placeholderNote,
|
||||||
|
@ -68,7 +68,7 @@
|
||||||
}
|
}
|
||||||
return placeholderNote;
|
return placeholderNote;
|
||||||
} else if (note.individual_note) {
|
} else if (note.individual_note) {
|
||||||
return note.notes[0].system ? issueSystemNote : issueNote;
|
return note.notes[0].system ? systemNote : issueNote;
|
||||||
}
|
}
|
||||||
|
|
||||||
return issueDiscussion;
|
return issueDiscussion;
|
||||||
|
|
|
@ -1,9 +1,26 @@
|
||||||
<script>
|
<script>
|
||||||
|
/**
|
||||||
|
* Common component to render a placeholder note and user information.
|
||||||
|
*
|
||||||
|
* This component needs to be used with a vuex store.
|
||||||
|
* That vuex store needs to have a `getUserData` getter that contains
|
||||||
|
* {
|
||||||
|
* path: String,
|
||||||
|
* avatar_url: String,
|
||||||
|
* name: String,
|
||||||
|
* username: String,
|
||||||
|
* }
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* <placeholder-note
|
||||||
|
* :note="{body: 'This is a note'}"
|
||||||
|
* />
|
||||||
|
*/
|
||||||
import { mapGetters } from 'vuex';
|
import { mapGetters } from 'vuex';
|
||||||
import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
|
import userAvatarLink from '../user_avatar/user_avatar_link.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'issuePlaceholderNote',
|
name: 'placeholderNote',
|
||||||
props: {
|
props: {
|
||||||
note: {
|
note: {
|
||||||
type: Object,
|
type: Object,
|
|
@ -1,4 +1,12 @@
|
||||||
<script>
|
<script>
|
||||||
|
/**
|
||||||
|
* Common component to render a placeholder system note.
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* <placeholder-system-note
|
||||||
|
* :note="{ body: 'Commands are being applied'}"
|
||||||
|
* />
|
||||||
|
*/
|
||||||
export default {
|
export default {
|
||||||
name: 'placeholderSystemNote',
|
name: 'placeholderSystemNote',
|
||||||
props: {
|
props: {
|
|
@ -1,6 +1,24 @@
|
||||||
<script>
|
<script>
|
||||||
|
/**
|
||||||
|
* Common component to render a system note, icon and user information.
|
||||||
|
*
|
||||||
|
* This component needs to be used with a vuex store.
|
||||||
|
* That vuex store needs to have a `targetNoteHash` getter
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* <system-note
|
||||||
|
* :note="{
|
||||||
|
* id: String,
|
||||||
|
* author: Object,
|
||||||
|
* createdAt: String,
|
||||||
|
* note_html: String,
|
||||||
|
* system_note_icon_name: String
|
||||||
|
* }"
|
||||||
|
* />
|
||||||
|
*/
|
||||||
import { mapGetters } from 'vuex';
|
import { mapGetters } from 'vuex';
|
||||||
import issueNoteHeader from './issue_note_header.vue';
|
import issueNoteHeader from '../../../notes/components/issue_note_header.vue';
|
||||||
|
import { spriteIcon } from '../../../lib/utils/common_utils';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'systemNote',
|
name: 'systemNote',
|
||||||
|
@ -24,7 +42,7 @@
|
||||||
return this.targetNoteHash === this.noteAnchorId;
|
return this.targetNoteHash === this.noteAnchorId;
|
||||||
},
|
},
|
||||||
iconHtml() {
|
iconHtml() {
|
||||||
return gl.utils.spriteIcon(this.note.system_note_icon_name);
|
return spriteIcon(this.note.system_note_icon_name);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -46,7 +64,8 @@
|
||||||
:author="note.author"
|
:author="note.author"
|
||||||
:created-at="note.created_at"
|
:created-at="note.created_at"
|
||||||
:note-id="note.id"
|
:note-id="note.id"
|
||||||
:action-text-html="note.note_html" />
|
:action-text-html="note.note_html"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
|
@ -0,0 +1,6 @@
|
||||||
|
---
|
||||||
|
title: Moves placeholders components into shared folder with documentation. Makes
|
||||||
|
them easier to reuse in MR and Snippets comments
|
||||||
|
merge_request:
|
||||||
|
author:
|
||||||
|
type: other
|
|
@ -1,24 +0,0 @@
|
||||||
import Vue from 'vue';
|
|
||||||
import placeholderSystemNote from '~/notes/components/issue_placeholder_system_note.vue';
|
|
||||||
|
|
||||||
describe('issue placeholder system note component', () => {
|
|
||||||
let mountComponent;
|
|
||||||
beforeEach(() => {
|
|
||||||
const PlaceholderSystemNote = Vue.extend(placeholderSystemNote);
|
|
||||||
|
|
||||||
mountComponent = props => new PlaceholderSystemNote({
|
|
||||||
propsData: {
|
|
||||||
note: {
|
|
||||||
body: props,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}).$mount();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render system note placeholder with plain text', () => {
|
|
||||||
const vm = mountComponent('This is a placeholder');
|
|
||||||
|
|
||||||
expect(vm.$el.tagName).toEqual('LI');
|
|
||||||
expect(vm.$el.querySelector('.timeline-content em').textContent.trim()).toEqual('This is a placeholder');
|
|
||||||
});
|
|
||||||
});
|
|
|
@ -1,7 +1,7 @@
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import issuePlaceholderNote from '~/notes/components/issue_placeholder_note.vue';
|
import issuePlaceholderNote from '~/vue_shared/components/notes/placeholder_note.vue';
|
||||||
import store from '~/notes/stores';
|
import store from '~/notes/stores';
|
||||||
import { userDataMock } from '../mock_data';
|
import { userDataMock } from '../../../notes/mock_data';
|
||||||
|
|
||||||
describe('issue placeholder system note component', () => {
|
describe('issue placeholder system note component', () => {
|
||||||
let vm;
|
let vm;
|
|
@ -0,0 +1,25 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
import placeholderSystemNote from '~/vue_shared/components/notes/placeholder_system_note.vue';
|
||||||
|
import mountComponent from '../../../helpers/vue_mount_component_helper';
|
||||||
|
|
||||||
|
describe('placeholder system note component', () => {
|
||||||
|
let PlaceholderSystemNote;
|
||||||
|
let vm;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
PlaceholderSystemNote = Vue.extend(placeholderSystemNote);
|
||||||
|
});
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
vm.$destroy();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render system note placeholder with plain text', () => {
|
||||||
|
vm = mountComponent(PlaceholderSystemNote, {
|
||||||
|
note: { body: 'This is a placeholder' },
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(vm.$el.tagName).toEqual('LI');
|
||||||
|
expect(vm.$el.querySelector('.timeline-content em').textContent.trim()).toEqual('This is a placeholder');
|
||||||
|
});
|
||||||
|
});
|
|
@ -1,5 +1,5 @@
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import issueSystemNote from '~/notes/components/issue_system_note.vue';
|
import issueSystemNote from '~/vue_shared/components/notes/system_note.vue';
|
||||||
import store from '~/notes/stores';
|
import store from '~/notes/stores';
|
||||||
|
|
||||||
describe('issue system note', () => {
|
describe('issue system note', () => {
|
||||||
|
@ -33,6 +33,10 @@ describe('issue system note', () => {
|
||||||
}).$mount();
|
}).$mount();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
vm.$destroy();
|
||||||
|
});
|
||||||
|
|
||||||
it('should render a list item with correct id', () => {
|
it('should render a list item with correct id', () => {
|
||||||
expect(vm.$el.getAttribute('id')).toEqual(`note_${props.note.id}`);
|
expect(vm.$el.getAttribute('id')).toEqual(`note_${props.note.id}`);
|
||||||
});
|
});
|
Loading…
Reference in New Issue