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 issueNoteEditedText from './issue_note_edited_text.vue';
|
||||
import issueNoteForm from './issue_note_form.vue';
|
||||
import placeholderNote from './issue_placeholder_note.vue';
|
||||
import placeholderSystemNote from './issue_placeholder_system_note.vue';
|
||||
import placeholderNote from '../../vue_shared/components/notes/placeholder_note.vue';
|
||||
import placeholderSystemNote from '../../vue_shared/components/notes/placeholder_system_note.vue';
|
||||
import autosave from '../mixins/autosave';
|
||||
|
||||
export default {
|
||||
|
|
|
@ -5,10 +5,10 @@
|
|||
import * as constants from '../constants';
|
||||
import issueNote from './issue_note.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 placeholderNote from './issue_placeholder_note.vue';
|
||||
import placeholderSystemNote from './issue_placeholder_system_note.vue';
|
||||
import placeholderNote from '../../vue_shared/components/notes/placeholder_note.vue';
|
||||
import placeholderSystemNote from '../../vue_shared/components/notes/placeholder_system_note.vue';
|
||||
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
|
||||
|
||||
export default {
|
||||
|
@ -37,7 +37,7 @@
|
|||
components: {
|
||||
issueNote,
|
||||
issueDiscussion,
|
||||
issueSystemNote,
|
||||
systemNote,
|
||||
issueCommentForm,
|
||||
loadingIcon,
|
||||
placeholderNote,
|
||||
|
@ -68,7 +68,7 @@
|
|||
}
|
||||
return placeholderNote;
|
||||
} else if (note.individual_note) {
|
||||
return note.notes[0].system ? issueSystemNote : issueNote;
|
||||
return note.notes[0].system ? systemNote : issueNote;
|
||||
}
|
||||
|
||||
return issueDiscussion;
|
||||
|
|
|
@ -1,9 +1,26 @@
|
|||
<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 userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
|
||||
import userAvatarLink from '../user_avatar/user_avatar_link.vue';
|
||||
|
||||
export default {
|
||||
name: 'issuePlaceholderNote',
|
||||
name: 'placeholderNote',
|
||||
props: {
|
||||
note: {
|
||||
type: Object,
|
|
@ -1,4 +1,12 @@
|
|||
<script>
|
||||
/**
|
||||
* Common component to render a placeholder system note.
|
||||
*
|
||||
* @example
|
||||
* <placeholder-system-note
|
||||
* :note="{ body: 'Commands are being applied'}"
|
||||
* />
|
||||
*/
|
||||
export default {
|
||||
name: 'placeholderSystemNote',
|
||||
props: {
|
|
@ -1,6 +1,24 @@
|
|||
<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 issueNoteHeader from './issue_note_header.vue';
|
||||
import issueNoteHeader from '../../../notes/components/issue_note_header.vue';
|
||||
import { spriteIcon } from '../../../lib/utils/common_utils';
|
||||
|
||||
export default {
|
||||
name: 'systemNote',
|
||||
|
@ -24,7 +42,7 @@
|
|||
return this.targetNoteHash === this.noteAnchorId;
|
||||
},
|
||||
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"
|
||||
:created-at="note.created_at"
|
||||
:note-id="note.id"
|
||||
:action-text-html="note.note_html" />
|
||||
:action-text-html="note.note_html"
|
||||
/>
|
||||
</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 issuePlaceholderNote from '~/notes/components/issue_placeholder_note.vue';
|
||||
import issuePlaceholderNote from '~/vue_shared/components/notes/placeholder_note.vue';
|
||||
import store from '~/notes/stores';
|
||||
import { userDataMock } from '../mock_data';
|
||||
import { userDataMock } from '../../../notes/mock_data';
|
||||
|
||||
describe('issue placeholder system note component', () => {
|
||||
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 issueSystemNote from '~/notes/components/issue_system_note.vue';
|
||||
import issueSystemNote from '~/vue_shared/components/notes/system_note.vue';
|
||||
import store from '~/notes/stores';
|
||||
|
||||
describe('issue system note', () => {
|
||||
|
@ -33,6 +33,10 @@ describe('issue system note', () => {
|
|||
}).$mount();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vm.$destroy();
|
||||
});
|
||||
|
||||
it('should render a list item with correct id', () => {
|
||||
expect(vm.$el.getAttribute('id')).toEqual(`note_${props.note.id}`);
|
||||
});
|
Loading…
Reference in New Issue