Merge branch 'winh-timeline-entry-component' into 'master'

Extract shared timeline entry component

See merge request gitlab-org/gitlab-ce!23447

app/assets/javascripts/notes/components/comment_form.vue

@@ -4,6 +4,7 @@ import { mapActions, mapGetters, mapState } from 'vuex';
 import _ from 'underscore';
 import Autosize from 'autosize';
 import { __, sprintf } from '~/locale';
+import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
 import Flash from '../../flash';
 import Autosave from '../../autosave';
 import {
@@ -30,6 +31,7 @@ export default {
     markdownField,
     userAvatarLink,
     loadingButton,
+    TimelineEntryItem,
   },
   mixins: [issuableStateMixin],
   props: {
@@ -309,9 +311,8 @@ Please check your network connection and try again.`;
   <div>
     <note-signed-out-widget v-if="!isLoggedIn" />
     <discussion-locked-widget v-else-if="!canCreateNote" :issuable-type="issuableTypeTitle" />
-    <div v-else-if="canCreateNote" class="notes notes-form timeline">
-      <div class="timeline-entry note-form">
-        <div class="timeline-entry-inner">
+    <ul v-else-if="canCreateNote" class="notes notes-form timeline">
+      <timeline-entry-item class="note-form">
         <div class="flash-container error-alert timeline-content"></div>
         <div class="timeline-icon d-none d-sm-none d-md-block">
           <user-avatar-link
@@ -438,8 +439,7 @@ append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown"
             </div>
           </form>
         </div>
-        </div>
-      </div>
-    </div>
+      </timeline-entry-item>
+    </ul>
   </div>
 </template>

app/assets/javascripts/notes/components/noteable_discussion.vue

@@ -6,6 +6,7 @@ import { truncateSha } from '~/lib/utils/text_utility';
 import { s__, __, sprintf } from '~/locale';
 import systemNote from '~/vue_shared/components/notes/system_note.vue';
 import icon from '~/vue_shared/components/icon.vue';
+import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
 import Flash from '../../flash';
 import { SYSTEM_NOTE } from '../constants';
 import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
@@ -37,6 +38,7 @@ export default {
     placeholderNote,
     placeholderSystemNote,
     systemNote,
+    TimelineEntryItem,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -301,8 +303,7 @@ Please check your network connection and try again.`;
 </script>
 
 <template>
-  <li class="note note-discussion timeline-entry" :class="componentClassName">
-    <div class="timeline-entry-inner">
+  <timeline-entry-item class="note note-discussion" :class="componentClassName">
     <div class="timeline-content">
       <div :data-discussion-id="discussion.id" class="discussion js-discussion-container">
         <div v-if="shouldRenderDiffs" class="discussion-header note-wrapper">
@@ -405,11 +406,7 @@ Please check your network connection and try again.`;
                         class="btn btn-default mr-sm-2"
                         @click="resolveHandler();"
                       >
-                          <i
-                            v-if="isResolving"
-                            aria-hidden="true"
-                            class="fa fa-spinner fa-spin"
-                          ></i>
+                        <i v-if="isResolving" aria-hidden="true" class="fa fa-spinner fa-spin"></i>
                         {{ resolveButtonTitle }}
                       </button>
                     </div>
@@ -457,6 +454,5 @@ Please check your network connection and try again.`;
         </div>
       </div>
     </div>
-    </div>
-  </li>
+  </timeline-entry-item>
 </template>

app/assets/javascripts/notes/components/noteable_note.vue

@@ -2,6 +2,7 @@
 import $ from 'jquery';
 import { mapGetters, mapActions } from 'vuex';
 import { escape } from 'underscore';
+import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
 import Flash from '../../flash';
 import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
 import noteHeader from './note_header.vue';
@@ -18,6 +19,7 @@ export default {
     noteHeader,
     noteActions,
     noteBody,
+    TimelineEntryItem,
   },
   mixins: [noteable, resolvable],
   props: {
@@ -169,14 +171,13 @@ export default {
 </script>
 
 <template>
-  <li
+  <timeline-entry-item
     :id="noteAnchorId"
     :class="classNameBindings"
     :data-award-url="note.toggle_award_path"
     :data-note-id="note.id"
-    class="note timeline-entry note-wrapper"
+    class="note note-wrapper"
   >
-    <div class="timeline-entry-inner">
     <div v-once class="timeline-icon">
       <user-avatar-link
         :link-href="author.path"
@@ -225,6 +226,5 @@ export default {
         @cancelForm="formCancelHandler"
       />
     </div>
-    </div>
-  </li>
+  </timeline-entry-item>
 </template>

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,8 +39,7 @@ export default {
 </script>
 
 <template>
-  <li class="note being-posted fade-in-half timeline-entry">
-    <div class="timeline-entry-inner">
+  <timeline-entry-item class="note being-posted fade-in-half">
     <div class="timeline-icon">
       <user-avatar-link
         :link-href="getUserData.path"
@@ -61,6 +62,5 @@ export default {
         </div>
       </div>
     </div>
-    </div>
-  </li>
+  </timeline-entry-item>
 </template>

app/assets/javascripts/vue_shared/components/notes/placeholder_system_note.vue

 <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">
+  <timeline-entry-item class="note system-note being-posted fade-in-half">
     <div class="timeline-content">
       <em>{{ note.body }}</em>
     </div>
-    </div>
-  </li>
+  </timeline-entry-item>
 </template>

app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue

 <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">
+  <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>
-    </div>
-  </li>
+  </timeline-entry-item>
 </template>

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,12 +75,11 @@ 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">
@@ -103,6 +104,5 @@ export default {
         </div>
       </div>
     </div>
-    </div>
-  </li>
+  </timeline-entry-item>
 </template>

app/assets/javascripts/vue_shared/components/notes/timeline_entry_item.vue

+<script>
+export default {
+  name: 'TimelineEntryItem',
+};
+</script>
+
+<template>
+  <li class="timeline-entry">
+    <div class="timeline-entry-inner"><slot></slot></div>
+  </li>
+</template>

spec/javascripts/vue_shared/components/notes/timeline_entry_item_spec.js

+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
+
+describe(TimelineEntryItem.name, () => {
+  let wrapper;
+
+  const factory = (options = {}) => {
+    const localVue = createLocalVue();
+
+    wrapper = shallowMount(TimelineEntryItem, {
+      localVue,
+      ...options,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders correctly', () => {
+    factory();
+
+    expect(wrapper.is('.timeline-entry')).toBe(true);
+
+    expect(wrapper.contains('.timeline-entry-inner')).toBe(true);
+  });
+
+  it('accepts default slot', () => {
+    const dummyContent = '<p>some content</p>';
+    factory({
+      slots: {
+        default: dummyContent,
+      },
+    });
+
+    const content = wrapper.find('.timeline-entry-inner :first-child');
+
+    expect(content.html()).toBe(dummyContent);
+  });
+});