Pass `presetType` prop

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

@@ -22,6 +22,10 @@
         type: Object,
         required: true,
       },
+      presetType: {
+        type: String,
+        required: true,
+      },
       hasFiltersApplied: {
         type: Boolean,
         required: true,
@@ -129,12 +133,14 @@
     />
     <roadmap-shell
       v-if="showRoadmap"
+      :preset-type="presetType"
       :epics="epics"
       :timeframe="timeframe"
       :current-group-id="currentGroupId"
     />
     <epics-list-empty
       v-if="isEpicsListEmpty"
+      :preset-type="presetType"
       :timeframe-start="timeframeStart"
       :timeframe-end="timeframeEnd"
       :has-filters-applied="hasFiltersApplied"

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

@@ -8,6 +8,10 @@
       epicItemTimeline,
     },
     props: {
+      presetType: {
+        type: String,
+        required: true,
+      },
       epic: {
         type: Object,
         required: true,
@@ -41,6 +45,7 @@
     <epic-item-timeline
       v-for="(timeframeItem, index) in timeframe"
       :key="index"
+      :preset-type="presetType"
       :timeframe="timeframe"
       :timeframe-item="timeframeItem"
       :epic="epic"

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

@@ -13,6 +13,10 @@
       SectionMixin,
     ],
     props: {
+      presetType: {
+        type: String,
+        required: true,
+      },
       epics: {
         type: Array,
         required: true,
@@ -148,6 +152,7 @@
     <epic-item
       v-for="(epic, index) in epics"
       :key="index"
+      :preset-type="presetType"
       :epic="epic"
       :timeframe="timeframe"
       :current-group-id="currentGroupId"

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

@@ -12,6 +12,10 @@
       roadmapTimelineSection,
     },
     props: {
+      presetType: {
+        type: String,
+        required: true,
+      },
       epics: {
         type: Array,
         required: true,
@@ -65,9 +69,7 @@
       },
       handleScroll() {
         const { scrollTop, scrollLeft, clientHeight, scrollHeight } = this.$el;
-        if (!this.noScroll) {
-          eventHub.$emit('epicsListScrolled', { scrollTop, scrollLeft, clientHeight, scrollHeight });
-        }
+        eventHub.$emit('epicsListScrolled', { scrollTop, scrollLeft, clientHeight, scrollHeight });
       },
     },
   };
@@ -81,12 +83,14 @@
     @scroll="handleScroll"
   >
     <roadmap-timeline-section
+      :preset-type="presetType"
       :epics="epics"
       :timeframe="timeframe"
       :shell-width="shellWidth"
       :list-scrollable="!noScroll"
     />
     <epics-list-section
+      :preset-type="presetType"
       :epics="epics"
       :timeframe="timeframe"
       :shell-width="shellWidth"

spec/javascripts/roadmap/components/app_spec.js

@@ -7,12 +7,14 @@ import appComponent from 'ee/roadmap/components/app.vue';
 import RoadmapStore from 'ee/roadmap/store/roadmap_store';
 import RoadmapService from 'ee/roadmap/service/roadmap_service';
 
+import { PRESET_TYPES } from 'ee/roadmap/constants';
+
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { mockTimeframe, mockGroupId, epicsPath, mockNewEpicEndpoint, rawEpics, mockSvgPath } from '../mock_data';
+import { mockTimeframeMonths, mockGroupId, epicsPath, mockNewEpicEndpoint, rawEpics, mockSvgPath } from '../mock_data';
 
 const createComponent = () => {
   const Component = Vue.extend(appComponent);
-  const timeframe = mockTimeframe;
+  const timeframe = mockTimeframeMonths;
 
   const store = new RoadmapStore(mockGroupId, timeframe);
   const service = new RoadmapService(epicsPath);
@@ -20,6 +22,7 @@ const createComponent = () => {
   return mountComponent(Component, {
     store,
     service,
+    presetType: PRESET_TYPES.MONTHS,
     hasFiltersApplied: true,
     newEpicEndpoint: mockNewEpicEndpoint,
     emptyStateIllustrationPath: mockSvgPath,

spec/javascripts/roadmap/components/epic_item_spec.js

@@ -2,12 +2,15 @@ import Vue from 'vue';
 
 import epicItemComponent from 'ee/roadmap/components/epic_item.vue';
 
+import { PRESET_TYPES } from 'ee/roadmap/constants';
+
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { mockTimeframe, mockEpic, mockGroupId, mockShellWidth, mockItemWidth } from '../mock_data';
+import { mockTimeframeMonths, mockEpic, mockGroupId, mockShellWidth, mockItemWidth } from '../mock_data';
 
 const createComponent = ({
+  presetType = PRESET_TYPES.MONTHS,
   epic = mockEpic,
-  timeframe = mockTimeframe,
+  timeframe = mockTimeframeMonths,
   currentGroupId = mockGroupId,
   shellWidth = mockShellWidth,
   itemWidth = mockItemWidth,
@@ -15,6 +18,7 @@ const createComponent = ({
   const Component = Vue.extend(epicItemComponent);
 
   return mountComponent(Component, {
+    presetType,
     epic,
     timeframe,
     currentGroupId,

spec/javascripts/roadmap/components/epics_list_section_spec.js

@@ -3,23 +3,26 @@ import Vue from 'vue';
 import epicsListSectionComponent from 'ee/roadmap/components/epics_list_section.vue';
 import RoadmapStore from 'ee/roadmap/store/roadmap_store';
 import eventHub from 'ee/roadmap/event_hub';
+import { PRESET_TYPES } from 'ee/roadmap/constants';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { rawEpics, mockTimeframe, mockGroupId, mockShellWidth } from '../mock_data';
+import { rawEpics, mockTimeframeMonths, mockGroupId, mockShellWidth } from '../mock_data';
 
-const store = new RoadmapStore(mockGroupId, mockTimeframe);
+const store = new RoadmapStore(mockGroupId, mockTimeframeMonths, PRESET_TYPES.MONTHS);
 store.setEpics(rawEpics);
 const mockEpics = store.getEpics();
 
 const createComponent = ({
   epics = mockEpics,
-  timeframe = mockTimeframe,
+  timeframe = mockTimeframeMonths,
   currentGroupId = mockGroupId,
   shellWidth = mockShellWidth,
   listScrollable = false,
+  presetType = PRESET_TYPES.MONTHS,
 }) => {
   const Component = Vue.extend(epicsListSectionComponent);
 
   return mountComponent(Component, {
+    presetType,
     epics,
     timeframe,
     currentGroupId,
@@ -59,7 +62,7 @@ describe('EpicsListSectionComponent', () => {
 
     describe('emptyRowCellStyles', () => {
       it('returns computed style object based on sectionItemWidth prop value', () => {
-        expect(vm.emptyRowCellStyles.width).toBe('280px');
+        expect(vm.emptyRowCellStyles.width).toBe('240px');
       });
     });
 

spec/javascripts/roadmap/components/roadmap_shell_spec.js

@@ -3,17 +3,20 @@ import Vue from 'vue';
 import roadmapShellComponent from 'ee/roadmap/components/roadmap_shell.vue';
 import eventHub from 'ee/roadmap/event_hub';
 
+import { PRESET_TYPES } from 'ee/roadmap/constants';
+
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { mockEpic, mockTimeframe, mockGroupId, mockScrollBarSize } from '../mock_data';
+import { mockEpic, mockTimeframeMonths, mockGroupId, mockScrollBarSize } from '../mock_data';
 
 const createComponent = ({
   epics = [mockEpic],
-  timeframe = mockTimeframe,
+  timeframe = mockTimeframeMonths,
   currentGroupId = mockGroupId,
 }, el) => {
   const Component = Vue.extend(roadmapShellComponent);
 
   return mountComponent(Component, {
+    presetType: PRESET_TYPES.MONTHS,
     epics,
     timeframe,
     currentGroupId,
@@ -82,17 +85,11 @@ describe('RoadmapShellComponent', () => {
         spyOn(eventHub, '$emit');
       });
 
-      it('emits `epicsListScrolled` event via eventHub when `noScroll` prop is false', () => {
+      it('emits `epicsListScrolled` event via eventHub', () => {
         vm.noScroll = false;
         vm.handleScroll();
         expect(eventHub.$emit).toHaveBeenCalledWith('epicsListScrolled', jasmine.any(Object));
       });
-
-      it('does not emit any event via eventHub when `noScroll` prop is true', () => {
-        vm.noScroll = true;
-        vm.handleScroll();
-        expect(eventHub.$emit).not.toHaveBeenCalled();
-      });
     });
   });