Update template, move shared code to SectionMixin

ee/app/assets/javascripts/roadmap/components/roadmap_timeline_section.vue

 <script>
   import eventHub from '../event_hub';
 
-  import { SCROLL_BAR_SIZE } from '../constants';
+  import SectionMixin from '../mixins/section_mixin';
 
   import timelineHeaderItem from './timeline_header_item.vue';
 
@@ -9,6 +9,9 @@
     components: {
       timelineHeaderItem,
     },
+    mixins: [
+      SectionMixin,
+    ],
     props: {
       epics: {
         type: Array,
@@ -22,20 +25,16 @@
         type: Number,
         required: true,
       },
+      listScrollable: {
+        type: Boolean,
+        required: true,
+      },
     },
     data() {
       return {
         scrolledHeaderClass: '',
       };
     },
-    computed: {
-      calcShellWidth() {
-        return this.shellWidth - SCROLL_BAR_SIZE;
-      },
-      theadStyles() {
-        return `width: ${this.calcShellWidth}px;`;
-      },
-    },
     mounted() {
       eventHub.$on('epicsListScrolled', this.handleEpicsListScroll);
     },
@@ -43,30 +42,28 @@
       eventHub.$off('epicsListScrolled', this.handleEpicsListScroll);
     },
     methods: {
-      handleEpicsListScroll(scrollTop) {
+      handleEpicsListScroll({ scrollTop }) {
         // Add class only when epics list is scrolled at 1% the height of header
-        this.scrolledHeaderClass = (scrollTop > this.$el.clientHeight / 100) ? 'scrolled-ahead' : '';
+        this.scrolledHeaderClass = (scrollTop > this.$el.clientHeight / 100) ? 'scroll-top-shadow' : '';
       },
     },
   };
 </script>
 
 <template>
-  <thead
-    class="roadmap-timeline-section"
+  <div
+    class="roadmap-timeline-section clearfix"
     :class="scrolledHeaderClass"
-    :style="theadStyles"
+    :style="sectionContainerStyles"
   >
-    <tr>
-      <th class="timeline-header-blank"></th>
+    <span class="timeline-header-blank"></span>
     <timeline-header-item
       v-for="(timeframeItem, index) in timeframe"
       :key="index"
       :timeframe-index="index"
       :timeframe-item="timeframeItem"
       :timeframe="timeframe"
-        :shell-width="calcShellWidth"
+      :item-width="sectionItemWidth"
     />
-    </tr>
-  </thead>
+  </div>
 </template>

spec/javascripts/roadmap/components/roadmap_timeline_section_spec.js

@@ -10,6 +10,7 @@ const createComponent = ({
   epics = [mockEpic],
   timeframe = mockTimeframe,
   shellWidth = mockShellWidth,
+  listScrollable = false,
 }) => {
   const Component = Vue.extend(roadmapTimelineSectionComponent);
 
@@ -17,6 +18,7 @@ const createComponent = ({
     epics,
     timeframe,
     shellWidth,
+    listScrollable,
   });
 };
 
@@ -37,33 +39,16 @@ describe('RoadmapTimelineSectionComponent', () => {
     });
   });
 
-  describe('computed', () => {
-    describe('calcShellWidth', () => {
-      it('returns shellWidth by deducting Scrollbar size', () => {
-        // shellWidth is 2000 (as defined above in mockShellWidth)
-        // SCROLLBAR_SIZE is 15 (as defined in app's constants.js)
-        // Hence, calcShellWidth = shellWidth - SCROLLBAR_SIZE
-        expect(vm.calcShellWidth).toBe(1985);
-      });
-    });
-
-    describe('theadStyles', () => {
-      it('returns style string for thead based on calcShellWidth', () => {
-        expect(vm.theadStyles).toBe('width: 1985px;');
-      });
-    });
-  });
-
   describe('methods', () => {
     describe('handleEpicsListScroll', () => {
       it('sets `scrolled-ahead` class on thead element based on provided scrollTop value', () => {
         // vm.$el.clientHeight is 0 during tests
         // hence any value greater than 0 should
         // update scrolledHeaderClass prop
-        vm.handleEpicsListScroll(1);
-        expect(vm.scrolledHeaderClass).toBe('scrolled-ahead');
+        vm.handleEpicsListScroll({ scrollTop: 1 });
+        expect(vm.scrolledHeaderClass).toBe('scroll-top-shadow');
 
-        vm.handleEpicsListScroll(0);
+        vm.handleEpicsListScroll({ scrollTop: 0 });
         expect(vm.scrolledHeaderClass).toBe('');
       });
     });