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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -37,7 +37,7 @@
components: { components: {
issueNote, issueNote,
issueDiscussion, issueDiscussion,
issueSystemNote, systemNote,
issueCommentForm, issueCommentForm,
loadingIcon, loadingIcon,
placeholderNote, placeholderNote,
...@@ -68,7 +68,7 @@ ...@@ -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;
......
<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,
......
<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: {
......
<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 @@ ...@@ -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 @@ ...@@ -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>
......
---
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 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;
......
import Vue from 'vue'; 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(() => { beforeEach(() => {
const PlaceholderSystemNote = Vue.extend(placeholderSystemNote); PlaceholderSystemNote = Vue.extend(placeholderSystemNote);
});
mountComponent = props => new PlaceholderSystemNote({ afterEach(() => {
propsData: { vm.$destroy();
note: {
body: props,
},
},
}).$mount();
}); });
it('should render system note placeholder with plain text', () => { 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.tagName).toEqual('LI');
expect(vm.$el.querySelector('.timeline-content em').textContent.trim()).toEqual('This is a placeholder'); expect(vm.$el.querySelector('.timeline-content em').textContent.trim()).toEqual('This is a placeholder');
......
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', () => { ...@@ -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}`);
}); });
......
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