Moves placeholders components into shared folder with documentation. Makes them easier to reuse in MR and Snippets comments

5 files changed, 7 insertions, 135 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/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>