Replace existing uses of timeline-entry with timeline entry component

5 files changed, 65 insertions, 62 deletions

diff --git a/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue b/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue
index b1faebf409b..8d3a3009c55 100644
--- a/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue
@@ -17,12 +17,14 @@
  *   />
  */
 import { mapGetters } from 'vuex';
+import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
 import userAvatarLink from '../user_avatar/user_avatar_link.vue';
 
 export default {
   name: 'PlaceholderNote',
   components: {
     userAvatarLink,
+    TimelineEntryItem,
   },
   props: {
     note: {
@@ -37,30 +39,28 @@ export default {
 </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="d-none d-sm-inline-block">{{ getUserData.name }}</span>
-              <span class="note-headline-light">@{{ getUserData.username }}</span>
-            </a>
-          </div>
+  <timeline-entry-item class="note being-posted fade-in-half">
+    <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="d-none d-sm-inline-block">{{ getUserData.name }}</span>
+            <span class="note-headline-light">@{{ getUserData.username }}</span>
+          </a>
         </div>
-        <div class="note-body">
-          <div class="note-text">
-            <p>{{ note.body }}</p>
-          </div>
+      </div>
+      <div class="note-body">
+        <div class="note-text">
+          <p>{{ note.body }}</p>
         </div>
       </div>
     </div>
-  </li>
+  </timeline-entry-item>
 </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
index 674f923478d..7689425eb52 100644
--- a/app/assets/javascripts/vue_shared/components/notes/placeholder_system_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/placeholder_system_note.vue
@@ -1,4 +1,6 @@
 <script>
+import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
+
 /**
  * Common component to render a placeholder system note.
  *
@@ -9,6 +11,9 @@
  */
 export default {
   name: 'PlaceholderSystemNote',
+  components: {
+    TimelineEntryItem,
+  },
   props: {
     note: {
       type: Object,
@@ -19,11 +24,9 @@ export default {
 </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>
+  <timeline-entry-item class="note system-note being-posted fade-in-half">
+    <div class="timeline-content">
+      <em>{{ note.body }}</em>
     </div>
-  </li>
+  </timeline-entry-item>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue b/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue
index c6cf4661222..e61d1fd2031 100644
--- a/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue
@@ -1,22 +1,22 @@
 <script>
 import { GlSkeletonLoading } from '@gitlab/ui';
+import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
 
 export default {
   name: 'SkeletonNote',
   components: {
     GlSkeletonLoading,
+    TimelineEntryItem,
   },
 };
 </script>
 
 <template>
-  <li class="timeline-entry note note-wrapper">
-    <div class="timeline-entry-inner">
-      <div class="timeline-icon"></div>
-      <div class="timeline-content">
-        <div class="note-header"></div>
-        <div class="note-body"><gl-skeleton-loading /></div>
-      </div>
+  <timeline-entry-item class="note note-wrapper">
+    <div class="timeline-icon"></div>
+    <div class="timeline-content">
+      <div class="note-header"></div>
+      <div class="note-body"><gl-skeleton-loading /></div>
     </div>
-  </li>
+  </timeline-entry-item>
 </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
index fb86262d0b4..31df26f7b05 100644
--- a/app/assets/javascripts/vue_shared/components/notes/system_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
@@ -20,6 +20,7 @@ import $ from 'jquery';
 import { mapGetters } from 'vuex';
 import noteHeader from '~/notes/components/note_header.vue';
 import Icon from '~/vue_shared/components/icon.vue';
+import TimelineEntryItem from './timeline_entry_item.vue';
 import { spriteIcon } from '../../../lib/utils/common_utils';
 
 const MAX_VISIBLE_COMMIT_LIST_COUNT = 3;
@@ -29,6 +30,7 @@ export default {
   components: {
     Icon,
     noteHeader,
+    TimelineEntryItem,
   },
   props: {
     note: {
@@ -73,36 +75,34 @@ export default {
 </script>
 
 <template>
-  <li
+  <timeline-entry-item
     :id="noteAnchorId"
     :class="{ target: isTargetNote }"
-    class="note system-note timeline-entry note-wrapper"
+    class="note system-note note-wrapper"
   >
-    <div class="timeline-entry-inner">
-      <div class="timeline-icon" v-html="iconHtml"></div>
-      <div class="timeline-content">
-        <div class="note-header">
-          <note-header :author="note.author" :created-at="note.created_at" :note-id="note.id">
-            <span v-html="actionTextHtml"></span>
-          </note-header>
-        </div>
-        <div class="note-body">
-          <div
-            :class="{
-              'system-note-commit-list': hasMoreCommits,
-              'hide-shade': expanded,
-            }"
-            class="note-text"
-            v-html="note.note_html"
-          ></div>
-          <div v-if="hasMoreCommits" class="flex-list">
-            <div class="system-note-commit-list-toggler flex-row" @click="expanded = !expanded;">
-              <icon :name="toggleIcon" :size="8" class="append-right-5" />
-              <span>Toggle commit list</span>
-            </div>
+    <div class="timeline-icon" v-html="iconHtml"></div>
+    <div class="timeline-content">
+      <div class="note-header">
+        <note-header :author="note.author" :created-at="note.created_at" :note-id="note.id">
+          <span v-html="actionTextHtml"></span>
+        </note-header>
+      </div>
+      <div class="note-body">
+        <div
+          :class="{
+            'system-note-commit-list': hasMoreCommits,
+            'hide-shade': expanded,
+          }"
+          class="note-text"
+          v-html="note.note_html"
+        ></div>
+        <div v-if="hasMoreCommits" class="flex-list">
+          <div class="system-note-commit-list-toggler flex-row" @click="expanded = !expanded;">
+            <icon :name="toggleIcon" :size="8" class="append-right-5" />
+            <span>Toggle commit list</span>
           </div>
         </div>
       </div>
     </div>
-  </li>
+  </timeline-entry-item>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/notes/timeline_entry_item.vue b/app/assets/javascripts/vue_shared/components/notes/timeline_entry_item.vue
index c58a18ce269..06974a12aed 100644
--- a/app/assets/javascripts/vue_shared/components/notes/timeline_entry_item.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/timeline_entry_item.vue
@@ -1,6 +1,6 @@
 <script>
 export default {
-  name: 'TimelineEntry',
+  name: 'TimelineEntryItem',
 };
 </script>