From 1ab8aeeefd2ee826485a0be9d1c862782eaba3d4 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Thu, 19 Oct 2017 10:36:20 +0100
Subject: Moves placeholders components into shared folder with documentation.
 Makes them easier to reuse in MR and Snippets comments

---
 .../notes/components/issue_discussion.vue          |  4 +-
 .../notes/components/issue_notes_app.vue           | 10 +--
 .../notes/components/issue_placeholder_note.vue    | 53 ----------------
 .../components/issue_placeholder_system_note.vue   | 21 -------
 .../notes/components/issue_system_note.vue         | 54 ----------------
 .../components/notes/placeholder_note.vue          | 70 +++++++++++++++++++++
 .../components/notes/placeholder_system_note.vue   | 29 +++++++++
 .../vue_shared/components/notes/system_note.vue    | 73 ++++++++++++++++++++++
 .../unreleased/38178-fl-mr-notes-components.yml    |  6 ++
 .../components/issue_placeholder_note_spec.js      | 39 ------------
 .../issue_placeholder_system_note_spec.js          | 24 -------
 .../notes/components/issue_system_note_spec.js     | 53 ----------------
 .../components/notes/placeholder_note_spec.js      | 39 ++++++++++++
 .../notes/placeholder_system_note_spec.js          | 25 ++++++++
 .../components/notes/system_note_spec.js           | 57 +++++++++++++++++
 15 files changed, 306 insertions(+), 251 deletions(-)
 delete mode 100644 app/assets/javascripts/notes/components/issue_placeholder_note.vue
 delete mode 100644 app/assets/javascripts/notes/components/issue_placeholder_system_note.vue
 delete mode 100644 app/assets/javascripts/notes/components/issue_system_note.vue
 create mode 100644 app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue
 create mode 100644 app/assets/javascripts/vue_shared/components/notes/placeholder_system_note.vue
 create mode 100644 app/assets/javascripts/vue_shared/components/notes/system_note.vue
 create mode 100644 changelogs/unreleased/38178-fl-mr-notes-components.yml
 delete mode 100644 spec/javascripts/notes/components/issue_placeholder_note_spec.js
 delete mode 100644 spec/javascripts/notes/components/issue_placeholder_system_note_spec.js
 delete mode 100644 spec/javascripts/notes/components/issue_system_note_spec.js
 create mode 100644 spec/javascripts/vue_shared/components/notes/placeholder_note_spec.js
 create mode 100644 spec/javascripts/vue_shared/components/notes/placeholder_system_note_spec.js
 create mode 100644 spec/javascripts/vue_shared/components/notes/system_note_spec.js

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/notes/components/issue_placeholder_note.vue
deleted file mode 100644
index 6921d91372f..00000000000
--- a/app/assets/javascripts/notes/components/issue_placeholder_note.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<script>
-  import { mapGetters } from 'vuex';
-  import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
-
-  export default {
-    name: 'issuePlaceholderNote',
-    props: {
-      note: {
-        type: Object,
-        required: true,
-      },
-    },
-    components: {
-      userAvatarLink,
-    },
-    computed: {
-      ...mapGetters([
-        'getUserData',
-      ]),
-    },
-  };
-</script>
-
-<template>
-  <li class="note being-posted fade-in-half timeline-entry">
-    <div class="timeline-entry-inner">
-      <div class="timeline-icon">
-        <user-avatar-link
-          :link-href="getUserData.path"
-          :img-src="getUserData.avatar_url"
-          :img-size="40"
-          />
-      </div>
-      <div
-        :class="{ discussion: !note.individual_note }"
-        class="timeline-content">
-        <div class="note-header">
-          <div class="note-header-info">
-            <a :href="getUserData.path">
-              <span class="hidden-xs">{{getUserData.name}}</span>
-              <span class="note-headline-light">@{{getUserData.username}}</span>
-            </a>
-          </div>
-        </div>
-        <div class="note-body">
-          <div class="note-text">
-            <p>{{note.body}}</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </li>
-</template>
diff --git a/app/assets/javascripts/notes/components/issue_placeholder_system_note.vue b/app/assets/javascripts/notes/components/issue_placeholder_system_note.vue
deleted file mode 100644
index 80a8ef56a83..00000000000
--- a/app/assets/javascripts/notes/components/issue_placeholder_system_note.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script>
-  export default {
-    name: 'placeholderSystemNote',
-    props: {
-      note: {
-        type: Object,
-        required: true,
-      },
-    },
-  };
-</script>
-
-<template>
-  <li class="note system-note timeline-entry being-posted fade-in-half">
-   <div class="timeline-entry-inner">
-     <div class="timeline-content">
-       <em>{{note.body}}</em>
-     </div>
-   </div>
-  </li>
-</template>
diff --git a/app/assets/javascripts/notes/components/issue_system_note.vue b/app/assets/javascripts/notes/components/issue_system_note.vue
deleted file mode 100644
index 0cfb6522e77..00000000000
--- a/app/assets/javascripts/notes/components/issue_system_note.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<script>
-  import { mapGetters } from 'vuex';
-  import issueNoteHeader from './issue_note_header.vue';
-
-  export default {
-    name: 'systemNote',
-    props: {
-      note: {
-        type: Object,
-        required: true,
-      },
-    },
-    components: {
-      issueNoteHeader,
-    },
-    computed: {
-      ...mapGetters([
-        'targetNoteHash',
-      ]),
-      noteAnchorId() {
-        return `note_${this.note.id}`;
-      },
-      isTargetNote() {
-        return this.targetNoteHash === this.noteAnchorId;
-      },
-      iconHtml() {
-        return gl.utils.spriteIcon(this.note.system_note_icon_name);
-      },
-    },
-  };
-</script>
-
-<template>
-  <li
-    :id="noteAnchorId"
-    :class="{ target: isTargetNote }"
-    class="note system-note timeline-entry">
-    <div class="timeline-entry-inner">
-      <div
-        class="timeline-icon"
-        v-html="iconHtml">
-      </div>
-      <div class="timeline-content">
-        <div class="note-header">
-          <issue-note-header
-            :author="note.author"
-            :created-at="note.created_at"
-            :note-id="note.id"
-            :action-text-html="note.note_html" />
-        </div>
-      </div>
-    </div>
-  </li>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue b/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue
new file mode 100644
index 00000000000..e467ca56704
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue
@@ -0,0 +1,70 @@
+<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 '../user_avatar/user_avatar_link.vue';
+
+  export default {
+    name: 'placeholderNote',
+    props: {
+      note: {
+        type: Object,
+        required: true,
+      },
+    },
+    components: {
+      userAvatarLink,
+    },
+    computed: {
+      ...mapGetters([
+        'getUserData',
+      ]),
+    },
+  };
+</script>
+
+<template>
+  <li class="note being-posted fade-in-half timeline-entry">
+    <div class="timeline-entry-inner">
+      <div class="timeline-icon">
+        <user-avatar-link
+          :link-href="getUserData.path"
+          :img-src="getUserData.avatar_url"
+          :img-size="40"
+          />
+      </div>
+      <div
+        :class="{ discussion: !note.individual_note }"
+        class="timeline-content">
+        <div class="note-header">
+          <div class="note-header-info">
+            <a :href="getUserData.path">
+              <span class="hidden-xs">{{getUserData.name}}</span>
+              <span class="note-headline-light">@{{getUserData.username}}</span>
+            </a>
+          </div>
+        </div>
+        <div class="note-body">
+          <div class="note-text">
+            <p>{{note.body}}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/notes/placeholder_system_note.vue b/app/assets/javascripts/vue_shared/components/notes/placeholder_system_note.vue
new file mode 100644
index 00000000000..d805fea8006
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/notes/placeholder_system_note.vue
@@ -0,0 +1,29 @@
+<script>
+  /**
+   * Common component to render a placeholder system note.
+   *
+   * @example
+   * <placeholder-system-note
+   *  :note="{ body: 'Commands are being applied'}"
+   *  />
+   */
+  export default {
+    name: 'placeholderSystemNote',
+    props: {
+      note: {
+        type: Object,
+        required: true,
+      },
+    },
+  };
+</script>
+
+<template>
+  <li class="note system-note timeline-entry being-posted fade-in-half">
+   <div class="timeline-entry-inner">
+     <div class="timeline-content">
+       <em>{{note.body}}</em>
+     </div>
+   </div>
+  </li>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/notes/system_note.vue b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
new file mode 100644
index 00000000000..98f8f32557d
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
@@ -0,0 +1,73 @@
+<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 '../../../notes/components/issue_note_header.vue';
+  import { spriteIcon } from '../../../lib/utils/common_utils';
+
+  export default {
+    name: 'systemNote',
+    props: {
+      note: {
+        type: Object,
+        required: true,
+      },
+    },
+    components: {
+      issueNoteHeader,
+    },
+    computed: {
+      ...mapGetters([
+        'targetNoteHash',
+      ]),
+      noteAnchorId() {
+        return `note_${this.note.id}`;
+      },
+      isTargetNote() {
+        return this.targetNoteHash === this.noteAnchorId;
+      },
+      iconHtml() {
+        return spriteIcon(this.note.system_note_icon_name);
+      },
+    },
+  };
+</script>
+
+<template>
+  <li
+    :id="noteAnchorId"
+    :class="{ target: isTargetNote }"
+    class="note system-note timeline-entry">
+    <div class="timeline-entry-inner">
+      <div
+        class="timeline-icon"
+        v-html="iconHtml">
+      </div>
+      <div class="timeline-content">
+        <div class="note-header">
+          <issue-note-header
+            :author="note.author"
+            :created-at="note.created_at"
+            :note-id="note.id"
+            :action-text-html="note.note_html"
+            />
+        </div>
+      </div>
+    </div>
+  </li>
+</template>
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_note_spec.js b/spec/javascripts/notes/components/issue_placeholder_note_spec.js
deleted file mode 100644
index 6e5275087f3..00000000000
--- a/spec/javascripts/notes/components/issue_placeholder_note_spec.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import Vue from 'vue';
-import issuePlaceholderNote from '~/notes/components/issue_placeholder_note.vue';
-import store from '~/notes/stores';
-import { userDataMock } from '../mock_data';
-
-describe('issue placeholder system note component', () => {
-  let vm;
-
-  beforeEach(() => {
-    const Component = Vue.extend(issuePlaceholderNote);
-    store.dispatch('setUserData', userDataMock);
-    vm = new Component({
-      store,
-      propsData: { note: { body: 'Foo' } },
-    }).$mount();
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  describe('user information', () => {
-    it('should render user avatar with link', () => {
-      expect(vm.$el.querySelector('.user-avatar-link').getAttribute('href')).toEqual(userDataMock.path);
-      expect(vm.$el.querySelector('.user-avatar-link img').getAttribute('src')).toEqual(userDataMock.avatar_url);
-    });
-  });
-
-  describe('note content', () => {
-    it('should render note header information', () => {
-      expect(vm.$el.querySelector('.note-header-info a').getAttribute('href')).toEqual(userDataMock.path);
-      expect(vm.$el.querySelector('.note-header-info .note-headline-light').textContent.trim()).toEqual(`@${userDataMock.username}`);
-    });
-
-    it('should render note body', () => {
-      expect(vm.$el.querySelector('.note-text p').textContent.trim()).toEqual('Foo');
-    });
-  });
-});
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_system_note_spec.js b/spec/javascripts/notes/components/issue_system_note_spec.js
deleted file mode 100644
index c317ce32716..00000000000
--- a/spec/javascripts/notes/components/issue_system_note_spec.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import Vue from 'vue';
-import issueSystemNote from '~/notes/components/issue_system_note.vue';
-import store from '~/notes/stores';
-
-describe('issue system note', () => {
-  let vm;
-  let props;
-
-  beforeEach(() => {
-    props = {
-      note: {
-        id: 1424,
-        author: {
-          id: 1,
-          name: 'Root',
-          username: 'root',
-          state: 'active',
-          avatar_url: 'path',
-          path: '/root',
-        },
-        note_html: '<p dir="auto">closed</p>',
-        system_note_icon_name: 'icon_status_closed',
-        created_at: '2017-08-02T10:51:58.559Z',
-      },
-    };
-
-    store.dispatch('setTargetNoteHash', `note_${props.note.id}`);
-
-    const Component = Vue.extend(issueSystemNote);
-    vm = new Component({
-      store,
-      propsData: props,
-    }).$mount();
-  });
-
-  it('should render a list item with correct id', () => {
-    expect(vm.$el.getAttribute('id')).toEqual(`note_${props.note.id}`);
-  });
-
-  it('should render target class is note is target note', () => {
-    expect(vm.$el.classList).toContain('target');
-  });
-
-  it('should render svg icon', () => {
-    expect(vm.$el.querySelector('.timeline-icon svg')).toBeDefined();
-  });
-
-  it('should render note header component', () => {
-    expect(
-      vm.$el.querySelector('.system-note-message').innerHTML,
-    ).toEqual(props.note.note_html);
-  });
-});
diff --git a/spec/javascripts/vue_shared/components/notes/placeholder_note_spec.js b/spec/javascripts/vue_shared/components/notes/placeholder_note_spec.js
new file mode 100644
index 00000000000..ba8ab0b2cd7
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/notes/placeholder_note_spec.js
@@ -0,0 +1,39 @@
+import Vue from 'vue';
+import issuePlaceholderNote from '~/vue_shared/components/notes/placeholder_note.vue';
+import store from '~/notes/stores';
+import { userDataMock } from '../../../notes/mock_data';
+
+describe('issue placeholder system note component', () => {
+  let vm;
+
+  beforeEach(() => {
+    const Component = Vue.extend(issuePlaceholderNote);
+    store.dispatch('setUserData', userDataMock);
+    vm = new Component({
+      store,
+      propsData: { note: { body: 'Foo' } },
+    }).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('user information', () => {
+    it('should render user avatar with link', () => {
+      expect(vm.$el.querySelector('.user-avatar-link').getAttribute('href')).toEqual(userDataMock.path);
+      expect(vm.$el.querySelector('.user-avatar-link img').getAttribute('src')).toEqual(userDataMock.avatar_url);
+    });
+  });
+
+  describe('note content', () => {
+    it('should render note header information', () => {
+      expect(vm.$el.querySelector('.note-header-info a').getAttribute('href')).toEqual(userDataMock.path);
+      expect(vm.$el.querySelector('.note-header-info .note-headline-light').textContent.trim()).toEqual(`@${userDataMock.username}`);
+    });
+
+    it('should render note body', () => {
+      expect(vm.$el.querySelector('.note-text p').textContent.trim()).toEqual('Foo');
+    });
+  });
+});
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/vue_shared/components/notes/system_note_spec.js b/spec/javascripts/vue_shared/components/notes/system_note_spec.js
new file mode 100644
index 00000000000..36aaf0a6c2e
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/notes/system_note_spec.js
@@ -0,0 +1,57 @@
+import Vue from 'vue';
+import issueSystemNote from '~/vue_shared/components/notes/system_note.vue';
+import store from '~/notes/stores';
+
+describe('issue system note', () => {
+  let vm;
+  let props;
+
+  beforeEach(() => {
+    props = {
+      note: {
+        id: 1424,
+        author: {
+          id: 1,
+          name: 'Root',
+          username: 'root',
+          state: 'active',
+          avatar_url: 'path',
+          path: '/root',
+        },
+        note_html: '<p dir="auto">closed</p>',
+        system_note_icon_name: 'icon_status_closed',
+        created_at: '2017-08-02T10:51:58.559Z',
+      },
+    };
+
+    store.dispatch('setTargetNoteHash', `note_${props.note.id}`);
+
+    const Component = Vue.extend(issueSystemNote);
+    vm = new Component({
+      store,
+      propsData: props,
+    }).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('should render a list item with correct id', () => {
+    expect(vm.$el.getAttribute('id')).toEqual(`note_${props.note.id}`);
+  });
+
+  it('should render target class is note is target note', () => {
+    expect(vm.$el.classList).toContain('target');
+  });
+
+  it('should render svg icon', () => {
+    expect(vm.$el.querySelector('.timeline-icon svg')).toBeDefined();
+  });
+
+  it('should render note header component', () => {
+    expect(
+      vm.$el.querySelector('.system-note-message').innerHTML,
+    ).toEqual(props.note.note_html);
+  });
+});
-- 
cgit v1.2.1