Commit 3ddffec0 authored by Phil Hughes's avatar Phil Hughes

Merge branch '38178-fl-mr-notes-components' into 'master'

Moves placeholders components into shared folder with documentation.

See merge request gitlab-org/gitlab-ce!14964
parents 53ab16f6 1ab8aeee
......@@ -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;
......
<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,
......
<script>
/**
* Common component to render a placeholder system note.
*
* @example
* <placeholder-system-note
* :note="{ body: 'Commands are being applied'}"
* />
*/
export default {
name: 'placeholderSystemNote',
props: {
......
<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>
......
---
title: Moves placeholders components into shared folder with documentation. Makes
them easier to reuse in MR and Snippets comments
merge_request:
author:
type: other
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;
......
import Vue from 'vue';
import placeholderSystemNote from '~/notes/components/issue_placeholder_system_note.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;
describe('issue placeholder system note component', () => {
let mountComponent;
beforeEach(() => {
const PlaceholderSystemNote = Vue.extend(placeholderSystemNote);
PlaceholderSystemNote = Vue.extend(placeholderSystemNote);
});
mountComponent = props => new PlaceholderSystemNote({
propsData: {
note: {
body: props,
},
},
}).$mount();
afterEach(() => {
vm.$destroy();
});
it('should render system note placeholder with plain text', () => {
const vm = mountComponent('This is a placeholder');
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');
......
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}`);
});
......
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