Moves placeholders components into shared folder with documentation. Makes them easier to reuse in MR and Snippets comments38178-fl-mr-notes-components

10 files changed, 94 insertions, 39 deletions

diff --git a/app/assets/javascripts/notes/components/issue_discussion.vue b/app/assets/javascripts/notes/components/issue_discussion.vue
index baf43190d9e..0f13221b81e 100644
--- a/app/assets/javascripts/notes/components/issue_discussion.vue
+++ b/app/assets/javascripts/notes/components/issue_discussion.vue
@@ -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 {
diff --git a/app/assets/javascripts/notes/components/issue_notes_app.vue b/app/assets/javascripts/notes/components/issue_notes_app.vue
index aecd1f957e5..5c9119644e3 100644
--- a/app/assets/javascripts/notes/components/issue_notes_app.vue
+++ b/app/assets/javascripts/notes/components/issue_notes_app.vue
@@ -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;
diff --git a/app/assets/javascripts/notes/components/issue_placeholder_note.vue b/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue
index 6921d91372f..e467ca56704 100644
--- a/app/assets/javascripts/notes/components/issue_placeholder_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue
@@ -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,
diff --git a/app/assets/javascripts/notes/components/issue_placeholder_system_note.vue b/app/assets/javascripts/vue_shared/components/notes/placeholder_system_note.vue
index 80a8ef56a83..d805fea8006 100644
--- a/app/assets/javascripts/notes/components/issue_placeholder_system_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/placeholder_system_note.vue
@@ -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: {
diff --git a/app/assets/javascripts/notes/components/issue_system_note.vue b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
index 0cfb6522e77..98f8f32557d 100644
--- a/app/assets/javascripts/notes/components/issue_system_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
@@ -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>
diff --git a/changelogs/unreleased/38178-fl-mr-notes-components.yml b/changelogs/unreleased/38178-fl-mr-notes-components.yml
new file mode 100644
index 00000000000..244ccfb3071
--- /dev/null
+++ b/changelogs/unreleased/38178-fl-mr-notes-components.yml
@@ -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
diff --git a/spec/javascripts/notes/components/issue_placeholder_system_note_spec.js b/spec/javascripts/notes/components/issue_placeholder_system_note_spec.js
deleted file mode 100644
index d508a49f710..00000000000
--- a/spec/javascripts/notes/components/issue_placeholder_system_note_spec.js
+++ /dev/null
@@ -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');
-  });
-});
diff --git a/spec/javascripts/notes/components/issue_placeholder_note_spec.js b/spec/javascripts/vue_shared/components/notes/placeholder_note_spec.js
index 6e5275087f3..ba8ab0b2cd7 100644
--- a/spec/javascripts/notes/components/issue_placeholder_note_spec.js
+++ b/spec/javascripts/vue_shared/components/notes/placeholder_note_spec.js
@@ -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;
diff --git a/spec/javascripts/vue_shared/components/notes/placeholder_system_note_spec.js b/spec/javascripts/vue_shared/components/notes/placeholder_system_note_spec.js
new file mode 100644
index 00000000000..7b8e6c330c2
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/notes/placeholder_system_note_spec.js
@@ -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');
+  });
+});
diff --git a/spec/javascripts/notes/components/issue_system_note_spec.js b/spec/javascripts/vue_shared/components/notes/system_note_spec.js
index c317ce32716..36aaf0a6c2e 100644
--- a/spec/javascripts/notes/components/issue_system_note_spec.js
+++ b/spec/javascripts/vue_shared/components/notes/system_note_spec.js
@@ -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}`);
   });