Skip to content

G
gitlab-ce
Commit 36a242fc authored by Robert Speicher's avatar Robert Speicher
Browse files
Options

Merge branch '3559-group-level-roadmap' into 'master' 

Show Group level Roadmap

Closes #3559

See merge request gitlab-org/gitlab-ee!4361
parents ac16a3f7 05abde35
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 3433 additions and 20 deletions
app/assets/images/icons.json
View file @ 36a242fc
{"iconCount":191,"spriteSize":86607,"icons":["abuse","account","admin","angle-double-left","angle-double-right","angle-down","angle-left","angle-right","angle-up","appearance","applications","approval","arrow-down","arrow-right","assignee","bold","book","bookmark","branch","bullhorn","calendar","cancel","chart","chevron-down","chevron-left","chevron-right","chevron-up","clock","close","code","collapse","comment-dots","comment-next","comment","comments","commit","credit-card","cut","dashboard","disk","doc_code","doc_image","doc_text","double-headed-arrow","download","duplicate","earth","ellipsis_v","emoji_slightly_smiling_face","emoji_smile","emoji_smiley","epic","external-link","eye-slash","eye","file-addition","file-deletion","file-modified","filter","folder-o","folder-open","folder","fork","geo-nodes","git-merge","group","history","home","hook","hourglass","image-comment-dark","image-comment-light","import","issue-block","issue-child","issue-close","issue-duplicate","issue-external","issue-new","issue-open-m","issue-open","issue-parent","issues","italic","key-2","key","label","labels","leave","level-up","license","link","list-bulleted","list-numbered","location-dot","location","lock-open","lock","log","mail","menu","merge-request-close","messages","mobile-issue-close","monitor","more","notifications-off","notifications","overview","pencil-square","pencil","pipeline","play","plus-square-o","plus-square","plus","podcast","preferences","profile","project","push-rules","question-o","question","quote","redo","remove","repeat","retry","scale","screen-full","screen-normal","scroll_down","scroll_up","search","settings","shield","slight-frown","slight-smile","smile","smiley","snippet","soft-unwrap","soft-wrap","spam","spinner","staged","star-o","star","status_canceled_borderless","status_canceled","status_closed","status_created_borderless","status_created","status_failed_borderless","status_failed","status_manual_borderless","status_manual","status_notfound_borderless","status_notfound","status_open","status_pending_borderless","status_pending","status_running_borderless","status_running","status_skipped_borderless","status_skipped","status_success_borderless","status_success_solid","status_success","status_warning_borderless","status_warning","stop","task-done","template","terminal","thumb-down","thumb-up","thumbtack","timer","todo-add","todo-done","token","unapproval","unassignee","unlink","unstaged","user","users","volume-up","warning","work"]} {"iconCount":194,"spriteSize":87772,"icons":["abuse","account","admin","angle-double-left","angle-double-right","angle-down","angle-left","angle-right","angle-up","appearance","applications","approval","arrow-down","arrow-right","assignee","bold","book","bookmark","branch","bullhorn","calendar","cancel","chart","chevron-down","chevron-left","chevron-right","chevron-up","clock","close","code","collapse","comment-dots","comment-next","comment","comments","commit","compress","credit-card","cut","dashboard","disk","doc_code","doc_image","doc_text","double-headed-arrow","download","duplicate","earth","ellipsis_v","emoji_slightly_smiling_face","emoji_smile","emoji_smiley","epic","error","expand","external-link","eye-slash","eye","file-addition","file-deletion","file-modified","filter","folder-o","folder-open","folder","fork","geo-nodes","git-merge","group","history","home","hook","hourglass","image-comment-dark","image-comment-light","import","issue-block","issue-child","issue-close","issue-duplicate","issue-external","issue-new","issue-open-m","issue-open","issue-parent","issues","italic","key-2","key","label","labels","leave","level-up","license","link","list-bulleted","list-numbered","location-dot","location","lock-open","lock","log","mail","menu","merge-request-close","messages","mobile-issue-close","monitor","more","notifications-off","notifications","overview","pencil-square","pencil","pipeline","play","plus-square-o","plus-square","plus","podcast","preferences","profile","project","push-rules","question-o","question","quote","redo","remove","repeat","retry","scale","screen-full","screen-normal","scroll_down","scroll_up","search","settings","shield","slight-frown","slight-smile","smile","smiley","snippet","soft-unwrap","soft-wrap","spam","spinner","staged","star-o","star","status_canceled_borderless","status_canceled","status_closed","status_created_borderless","status_created","status_failed_borderless","status_failed","status_manual_borderless","status_manual","status_notfound_borderless","status_notfound","status_open","status_pending_borderless","status_pending","status_running_borderless","status_running","status_skipped_borderless","status_skipped","status_success_borderless","status_success_solid","status_success","status_warning_borderless","status_warning","stop","task-done","template","terminal","thumb-down","thumb-up","thumbtack","timer","todo-add","todo-done","token","unapproval","unassignee","unlink","unstaged","user","users","volume-up","warning","work"]}
\ No newline at end of file \ No newline at end of file
app/assets/images/icons.svg
View file @ 36a242fc
This source diff could not be displayed because it is too large. You can view the blob instead.
app/assets/images/illustrations/epics.svg
View file @ 36a242fc
This diff is collapsed.
app/assets/images/illustrations/epics/list.svg 0 → 100644
View file @ 36a242fc
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="312" height="240" viewBox="0 0 312 240"><defs><rect id="a" width="280" height="180" x="77" y="60" rx="10"/><rect id="c" width="100" height="48" rx="10"/><filter id="b" width="105%" height="120.8%" x="-2.5%" y="-5.2%" filterUnits="objectBoundingBox"><feOffset dy="5" in="SourceAlpha" result="shadowOffsetOuter1"/><feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/><feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0.976470588 0 0 0 0 0.976470588 0 0 0 0 0.976470588 0 0 0 1 0"/></filter><rect id="e" width="84" height="76" rx="10"/><filter id="d" width="106%" height="113.2%" x="-3%" y="-3.3%" filterUnits="objectBoundingBox"><feOffset dy="5" in="SourceAlpha" result="shadowOffsetOuter1"/><feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/><feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0.976470588 0 0 0 0 0.976470588 0 0 0 0 0.976470588 0 0 0 1 0"/></filter><rect id="g" width="52" height="76" rx="10"/><filter id="f" width="109.6%" height="113.2%" x="-4.8%" y="-3.3%" filterUnits="objectBoundingBox"><feOffset dy="5" in="SourceAlpha" result="shadowOffsetOuter1"/><feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/><feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0.976470588 0 0 0 0 0.976470588 0 0 0 0 0.976470588 0 0 0 1 0"/></filter><rect id="i" width="36" height="132" rx="10"/><filter id="h" width="113.9%" height="107.6%" x="-6.9%" y="-1.9%" filterUnits="objectBoundingBox"><feOffset dy="5" in="SourceAlpha" result="shadowOffsetOuter1"/><feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/><feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0.976470588 0 0 0 0 0.976470588 0 0 0 0 0.976470588 0 0 0 1 0"/></filter><rect id="k" width="52" height="48" rx="10"/><filter id="j" width="109.6%" height="120.8%" x="-4.8%" y="-5.2%" filterUnits="objectBoundingBox"><feOffset dy="5" in="SourceAlpha" result="shadowOffsetOuter1"/><feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/><feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0.976470588 0 0 0 0 0.976470588 0 0 0 0 0.976470588 0 0 0 1 0"/></filter></defs><g fill="none" fill-rule="evenodd" transform="translate(-57 -30)"><path d="M0 0h430v300H0z"/><use fill="#FFF" xlink:href="#a"/><rect width="276" height="176" x="79" y="62" stroke="#EEE" stroke-width="4" rx="10"/><rect width="8" height="20" x="244" y="141" fill="#EEE" rx="4"/><rect width="8" height="20" x="311" y="103" fill="#EEE" rx="4"/><rect width="8" height="20" x="272" y="166" fill="#FEE1D3" rx="4"/><rect width="8" height="20" x="257" y="203" fill="#EEE" rx="4"/><rect width="8" height="20" x="169" y="77" fill="#EEE" rx="4"/><rect width="8" height="20" x="191" y="104" fill="#FFF" rx="4"/><rect width="8" height="20" x="140" y="157" fill="#E1DBF1" rx="4"/><rect width="8" height="20" x="154" y="119" fill="#FEE1D3" rx="4"/><rect width="8" height="20" x="163" y="205" fill="#FEE1D3" rx="4"/><rect width="8" height="20" x="294" y="186" fill="#E1DBF1" rx="4"/><rect width="8" height="20" x="327" y="73" fill="#FEE1D3" rx="4"/><g transform="translate(197 79)"><use fill="#000" filter="url(#b)" xlink:href="#c"/><use fill="#FFF" xlink:href="#c"/><rect width="96" height="44" x="2" y="2" stroke="#FEE1D3" stroke-width="4" rx="10"/><rect width="8" height="20" x="62" y="14" fill="#FEE1D3" rx="4"/><rect width="8" height="20" x="78" y="14" fill="#FDC4A8" rx="4"/><rect width="8" height="20" x="46" y="14" fill="#FC6D26" rx="4"/><rect width="8" height="20" x="30" y="14" fill="#FEE1D3" rx="4"/><rect width="8" height="20" x="14" y="14" fill="#EEE" rx="4"/></g><g transform="translate(57 30)"><use fill="#000" filter="url(#d)" xlink:href="#e"/><use fill="#FFF" xlink:href="#e"/><rect width="80" height="72" x="2" y="2" stroke="#E1DBF1" stroke-width="4" rx="10"/><rect width="8" height="20" x="62" y="42" fill="#6B4FBB" rx="4"/><rect width="8" height="20" x="46" y="42" fill="#E1DBF1" rx="4"/><rect width="8" height="20" x="30" y="42" fill="#C3B8E3" rx="4"/><rect width="8" height="20" x="14" y="42" fill="#E1DBF1" rx="4"/><rect width="8" height="20" x="62" y="14" fill="#E1DBF1" rx="4"/><rect width="8" height="20" x="46" y="14" fill="#C3B8E3" rx="4"/><rect width="8" height="20" x="30" y="14" fill="#EEE" rx="4"/><rect width="8" height="20" x="14" y="14" fill="#C3B8E3" rx="4"/></g><g transform="translate(317 133)"><use fill="#000" filter="url(#f)" xlink:href="#g"/><use fill="#FFF" xlink:href="#g"/><rect width="48" height="72" x="2" y="2" stroke="#FEE1D3" stroke-width="4" rx="10"/><rect width="8" height="20" x="14" y="14" fill="#FEE1D3" rx="4"/><rect width="8" height="20" x="14" y="42" fill="#FC6D26" rx="4"/><rect width="8" height="20" x="30" y="14" fill="#EEE" rx="4"/><rect width="8" height="20" x="30" y="42" fill="#FDC4A8" rx="4"/></g><g transform="translate(89 133)"><use fill="#000" filter="url(#h)" xlink:href="#i"/><use fill="#FFF" xlink:href="#i"/><rect width="32" height="128" x="2" y="2" stroke="#FEE1D3" stroke-width="4" rx="10"/><rect width="8" height="20" x="14" y="14" fill="#FDC4A8" rx="4"/><rect width="8" height="20" x="14" y="42" fill="#EEE" rx="4"/><rect width="8" height="20" x="14" y="70" fill="#FEE1D3" rx="4"/><rect width="8" height="20" x="14" y="98" fill="#FC6D26" rx="4"/></g><g transform="translate(181 161)"><use fill="#000" filter="url(#j)" xlink:href="#k"/><use fill="#FFF" xlink:href="#k"/><rect width="48" height="44" x="2" y="2" stroke="#E1DBF1" stroke-width="4" rx="10"/><rect width="8" height="20" x="30" y="14" fill="#6B4FBB" rx="4"/><rect width="8" height="20" x="14" y="14" fill="#C3B8E3" rx="4"/></g></g></svg>
\ No newline at end of file
app/assets/images/illustrations/epics/roadmap.svg 0 → 100644
View file @ 36a242fc
This diff is collapsed.
app/assets/images/illustrations/prometheus-graphs_empty.svg 0 → 100644
View file @ 36a242fc
<svg width="430" height="267" viewBox="0 0 430 267" xmlns="http://www.w3.org/2000/svg"><title>prometheus-graphs_empty</title><g fill="none" fill-rule="evenodd"><path d="M187 43a2 2 0 0 1 0-4h8a2 2 0 0 1 0 4h-8zm18 0a2 2 0 0 1 0-4h8a2 2 0 0 1 0 4h-8zm18 0a2 2 0 0 1 0-4h8a2 2 0 0 1 0 4h-8zm18 0a2 2 0 0 1 0-4h8a2 2 0 0 1 0 4h-8zm18 0a2 2 0 0 1 0-4h8a2 2 0 0 1 0 4h-8zm18 0a2 2 0 0 1 0-4h8a2 2 0 0 1 0 4h-8zm18 0a2 2 0 0 1 0-4h8a2 2 0 0 1 0 4h-8zm18 0a2 2 0 0 1 0-4h8a2 2 0 0 1 0 4h-8zm15.769 2.457a2 2 0 0 1 2.883-2.772A11.964 11.964 0 0 1 335 51v.39a2 2 0 0 1-4 0V51a7.965 7.965 0 0 0-2.231-5.543zm2.225 159.857a2 2 0 0 1 3.997.154 11.973 11.973 0 0 1-4.02 8.503 2 2 0 0 1-2.658-2.99 7.974 7.974 0 0 0 2.681-5.667zM320.218 213a2 2 0 1 1 0 4h-8a2 2 0 0 1 0-4h8zm-18 0a2 2 0 1 1 0 4h-8a2 2 0 0 1 0-4h8zm-18 0a2 2 0 1 1 0 4h-8a2 2 0 0 1 0-4h8zm-18 0a2 2 0 1 1 0 4h-8a2 2 0 0 1 0-4h8zm-18 0a2 2 0 1 1 0 4h-8a2 2 0 0 1 0-4h8zm-18 0a2 2 0 1 1 0 4h-8a2 2 0 0 1 0-4h8zm-18 0a2 2 0 1 1 0 4h-8a2 2 0 0 1 0-4h8zm-18 0a2 2 0 1 1 0 4h-8a2 2 0 0 1 0-4h8zm-18 0a2 2 0 1 1 0 4h-8a2 2 0 0 1 0-4h8zm-18 0a2 2 0 1 1 0 4h-8a2 2 0 0 1 0-4h8zM89 155.827a2 2 0 1 1-4 0v-8a2 2 0 0 1 4 0v8zm0-18a2 2 0 1 1-4 0v-8a2 2 0 0 1 4 0v8z" fill="#EEE" fill-rule="nonzero"/><path d="M175.116 125.116A10.002 10.002 0 0 1 166 131H54c-5.523 0-10-4.477-10-10V31a10 10 0 0 1 5.884-9.116A9.964 9.964 0 0 0 49 26v90c0 5.523 4.477 10 10 10h112c1.467 0 2.86-.316 4.116-.884z" fill="#F9F9F9"/><path d="M59 20a6 6 0 0 0-6 6v90a6 6 0 0 0 6 6h112a6 6 0 0 0 6-6V26a6 6 0 0 0-6-6H59zm0-4h112c5.523 0 10 4.477 10 10v90c0 5.523-4.477 10-10 10H59c-5.523 0-10-4.477-10-10V26c0-5.523 4.477-10 10-10z" fill="#EEE" fill-rule="nonzero"/><path d="M73 58h4a3 3 0 0 1 3 3v45H70V61a3 3 0 0 1 3-3z" fill="#EFEDF8"/><path d="M93 70h4a3 3 0 0 1 3 3v33H90V73a3 3 0 0 1 3-3z" fill="#E1DBF1"/><path d="M153 70h4a3 3 0 0 1 3 3v33h-10V73a3 3 0 0 1 3-3z" fill="#C3B8E3"/><path d="M133 89h4a3 3 0 0 1 3 3v14h-10V92a3 3 0 0 1 3-3z" fill="#EFEDF8"/><path d="M113 46h4a3 3 0 0 1 3 3v57h-10V49a3 3 0 0 1 3-3z" fill="#6B4FBB"/><path d="M385.4 191.418A10.004 10.004 0 0 1 376 198H221c-5.523 0-10-4.477-10-10V74a9.992 9.992 0 0 1 4.6-8.418A9.981 9.981 0 0 0 215 69v114c0 5.523 4.477 10 10 10h155c1.99 0 3.843-.58 5.4-1.582z" fill="#F9F9F9" opacity=".99"/><path d="M225 63a6 6 0 0 0-6 6v114a6 6 0 0 0 6 6h155a6 6 0 0 0 6-6V69a6 6 0 0 0-6-6H225zm0-4h155c5.523 0 10 4.477 10 10v114c0 5.523-4.477 10-10 10H225c-5.523 0-10-4.477-10-10V69c0-5.523 4.477-10 10-10z" fill="#EEE" fill-rule="nonzero"/><g transform="translate(238 92)"><path d="M44.584 31.917L28.808 49.434a2 2 0 0 1-2.695.255L3.791 32.749a2 2 0 0 1 2.418-3.186l20.858 15.828 15.966-17.73a2 2 0 0 1 2.912-.064l16.09 16.344L77.35.058c.641-1.838 3.263-1.77 3.808.098l19.827 67.92 22.3-37.106a2 2 0 0 1 3.43 2.06l-24.656 41.024c-.898 1.494-3.145 1.204-3.634-.47L79.07 7.273l-14.315 41.02a2 2 0 0 1-3.314.745L44.584 31.917z" fill="#FEF0E8" fill-rule="nonzero"/><circle fill="#FEE1D3" cx="100" cy="71" r="4"/><circle fill="#FDC4A8" cx="44" cy="30" r="4"/><circle stroke="#FC6D26" stroke-width="4" fill="#FFF" cx="5" cy="32" r="5"/><circle stroke="#FC6D26" stroke-width="4" fill="#FFF" cx="125" cy="32" r="5"/></g><path d="M80.41 166.41C72.69 175.07 68 186.486 68 199c0 27.062 21.938 49 49 49 12.513 0 23.93-4.69 32.59-12.41C140.618 245.66 127.55 252 113 252c-27.062 0-49-21.938-49-49 0-14.549 6.34-27.617 16.41-36.59z" fill="#F9F9F9"/><path d="M117 244c24.853 0 45-20.147 45-45s-20.147-45-45-45-45 20.147-45 45 20.147 45 45 45zm0 4c-27.062 0-49-21.938-49-49s21.938-49 49-49 49 21.938 49 49-21.938 49-49 49z" fill="#EEE" fill-rule="nonzero"/><path d="M117 223c-13.255 0-24-10.745-24-24s10.745-24 24-24 24 10.745 24 24-10.745 24-24 24zm0-12c6.627 0 12-5.373 12-12s-5.373-12-12-12-12 5.373-12 12 5.373 12 12 12z" fill="#FEF0E8"/><path d="M117 175c13.255 0 24 10.745 24 24 0 .674-.028 1.34-.082 2h-12.084c.11-.65.166-1.319.166-2 0-6.627-5.373-12-12-12v-12z" fill="#FDC4A8"/></g></svg>
\ No newline at end of file
changelogs/unreleased-ee/3559-group-level-roadmap.yml 0 → 100644
View file @ 36a242fc
---
title: Show Group level Roadmap
merge_request: 4361
author:
type: added
config/routes/group.rb
View file @ 36a242fc
...@@ -96,7 +96,9 @@ constraints(GroupUrlConstrainer.new) do ...@@ -96,7 +96,9 @@ constraints(GroupUrlConstrainer.new) do
path path
end end
get 'boards(/*extra_params)', as: :legacy_ee_group_boards_redirect, to: legacy_ee_group_boards_redirect get 'boards(/*extra_params)', as: :legacy_ee_group_boards_redirect, to: legacy_ee_group_boards_redirect
## EE-specific ## EE-specific
resource :roadmap, only: [:show], controller: 'roadmap'
end end
scope(path: '*id', scope(path: '*id',
......
config/webpack.config.js
View file @ 36a242fc
...@@ -101,6 +101,7 @@ var config = { ...@@ -101,6 +101,7 @@ var config = {
service_desk: './projects/settings_service_desk/service_desk_bundle.js', service_desk: './projects/settings_service_desk/service_desk_bundle.js',
service_desk_issues: './service_desk_issues/index.js', service_desk_issues: './service_desk_issues/index.js',
registry_list: './registry/index.js', registry_list: './registry/index.js',
roadmap: 'ee/roadmap',
ide: './ide/index.js', ide: './ide/index.js',
sidebar: './sidebar/sidebar_bundle.js', sidebar: './sidebar/sidebar_bundle.js',
ee_sidebar: 'ee/sidebar/sidebar_bundle.js', ee_sidebar: 'ee/sidebar/sidebar_bundle.js',
......
ee/app/assets/javascripts/roadmap/components/app.vue 0 → 100644
View file @ 36a242fc
<script>
import _ from 'underscore';
import Flash from '~/flash';
import { s__ } from '~/locale';
import loadingIcon from '~/vue_shared/components/loading_icon.vue';
import epicsListEmpty from './epics_list_empty.vue';
import roadmapShell from './roadmap_shell.vue';
export default {
components: {
loadingIcon,
epicsListEmpty,
roadmapShell,
},
props: {
store: {
type: Object,
required: true,
},
service: {
type: Object,
required: true,
},
emptyStateIllustrationPath: {
type: String,
required: true,
},
},
data() {
return {
isLoading: true,
isEpicsListEmpty: false,
hasError: false,
handleResizeThrottled: {},
};
},
computed: {
epics() {
return this.store.getEpics();
},
timeframe() {
return this.store.getTimeframe();
},
timeframeStart() {
return this.timeframe[0];
},
timeframeEnd() {
const last = this.timeframe.length - 1;
return this.timeframe[last];
},
currentGroupId() {
return this.store.getCurrentGroupId();
},
showRoadmap() {
return !this.hasError && !this.isLoading && !this.isEpicsListEmpty;
},
},
mounted() {
this.fetchEpics();
this.handleResizeThrottled = _.throttle(this.handleResize, 600);
window.addEventListener('resize', this.handleResizeThrottled, false);
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResizeThrottled, false);
},
methods: {
fetchEpics() {
this.hasError = false;
this.service.getEpics()
.then(res => res.data)
.then((epics) => {
this.isLoading = false;
if (epics.length) {
this.store.setEpics(epics);
} else {
this.isEpicsListEmpty = true;
}
})
.catch(() => {
this.isLoading = false;
this.hasError = true;
Flash(s__('GroupRoadmap|Something went wrong while fetching epics'));
});
},
/**
* Roadmap view works with absolute sizing and positioning
* of following child components of RoadmapShell;
*
* - RoadmapTimelineSection
* - TimelineTodayIndicator
* - EpicItemTimeline
*
* And hence when window is resized, any size attributes passed
* down to child components are no longer valid, so best approach
* to refresh entire app is to re-render it on resize, hence
* we toggle `isLoading` variable which is bound to `RoadmapShell`.
*/
handleResize() {
this.isLoading = true;
// We need to debounce the toggle to make sure loading animation
// shows up while app is being rerendered.
_.debounce(() => {
this.isLoading = false;
}, 200)();
},
},
};
</script>
<template>
<div class="roadmap-container">
<loading-icon
class="loading-animation prepend-top-20 append-bottom-20"
size="2"
v-if="isLoading"
:label="s__('GroupRoadmap|Loading roadmap')"
/>
<roadmap-shell
v-if="showRoadmap"
:epics="epics"
:timeframe="timeframe"
:current-group-id="currentGroupId"
/>
<epics-list-empty
v-if="isEpicsListEmpty"
:timeframe-start="timeframeStart"
:timeframe-end="timeframeEnd"
:empty-state-illustration-path="emptyStateIllustrationPath"
/>
</div>
</template>
ee/app/assets/javascripts/roadmap/components/epic_item.vue 0 → 100644
View file @ 36a242fc
<script>
import epicItemDetails from './epic_item_details.vue';
import epicItemTimeline from './epic_item_timeline.vue';
export default {
components: {
epicItemDetails,
epicItemTimeline,
},
props: {
epic: {
type: Object,
required: true,
},
timeframe: {
type: Array,
required: true,
},
currentGroupId: {
type: Number,
required: true,
},
shellWidth: {
type: Number,
required: true,
},
},
};
</script>
<template>
<tr class="epics-list-item">
<epic-item-details
:epic="epic"
:current-group-id="currentGroupId"
/>
<epic-item-timeline
v-for="(timeframeItem, index) in timeframe"
:key="index"
:timeframe="timeframe"
:timeframe-item="timeframeItem"
:epic="epic"
:shell-width="shellWidth"
/>
</tr>
</template>
ee/app/assets/javascripts/roadmap/components/epic_item_details.vue 0 → 100644
View file @ 36a242fc
<script>
import { s__, sprintf } from '~/locale';
import { dateInWords } from '~/lib/utils/datetime_utility';
import tooltip from '~/vue_shared/directives/tooltip';
export default {
directives: {
tooltip,
},
props: {
epic: {
type: Object,
required: true,
},
currentGroupId: {
type: Number,
required: true,
},
},
computed: {
isEpicGroupDifferent() {
return this.currentGroupId !== this.epic.groupId;
},
/**
* In case Epic start date is out of range
* we need to use original date instead of proxy date
*/
startDate() {
if (this.epic.startDateOutOfRange) {
return this.epic.originalStartDate;
}
return this.epic.startDate;
},
/**
* In case Epic end date is out of range
* we need to use original date instead of proxy date
*/
endDate() {
if (this.epic.endDateOutOfRange) {
return this.epic.originalEndDate;
}
return this.epic.endDate;
},
/**
* Compose timeframe string to show on UI
* based on start and end date availability
*/
timeframeString() {
if (this.epic.startDateUndefined) {
return sprintf(s__('GroupRoadmap|Until %{dateWord}'), {
dateWord: dateInWords(this.endDate, true),
});
} else if (this.epic.endDateUndefined) {
return sprintf(s__('GroupRoadmap|From %{dateWord}'), {
dateWord: dateInWords(this.startDate, true),
});
}
// In case both start and end date fall in same year
// We should hide year from start date
const startDateInWords = dateInWords(
this.startDate,
true,
this.startDate.getFullYear() === this.endDate.getFullYear(),
);
return `${startDateInWords} &ndash; ${dateInWords(this.endDate, true)}`;
},
},
};
</script>
<template>
<td class="epic-details-cell">
<div class="epic-title">
<a
v-tooltip
data-container="body"
class="epic-url"
:href="epic.webUrl"
:title="epic.title"
>
{{ epic.title }}
</a>
</div>
<div class="epic-group-timeframe">
<span
v-tooltip
v-if="isEpicGroupDifferent"
class="epic-group"
data-placement="right"
data-container="body"
:title="epic.groupFullName"
>
{{ epic.groupName }} &middot;
</span>
<span
class="epic-timeframe"
v-html="timeframeString"
>
</span>
</div>
</td>
</template>
ee/app/assets/javascripts/roadmap/components/epic_item_timeline.vue 0 → 100644
View file @ 36a242fc
<script>
import { totalDaysInMonth } from '~/lib/utils/datetime_utility';
import tooltip from '~/vue_shared/directives/tooltip';
import {
EPIC_DETAILS_CELL_WIDTH,
TIMELINE_CELL_MIN_WIDTH,
TIMELINE_END_OFFSET_FULL,
TIMELINE_END_OFFSET_HALF,
} from '../constants';
export default {
directives: {
tooltip,
},
props: {
timeframe: {
type: Array,
required: true,
},
timeframeItem: {
type: Date,
required: true,
},
epic: {
type: Object,
required: true,
},
shellWidth: {
type: Number,
required: true,
},
},
data() {
return {
timelineBarReady: false,
timelineBarStyles: '',
};
},
computed: {
tdStyles() {
return `min-width: ${this.getCellWidth()}px;`;
},
showTimelineBar() {
return this.hasStartDate();
},
},
watch: {
shellWidth: function shellWidth() {
// Render timeline bar only when shellWidth is updated.
this.renderTimelineBar();
},
},
methods: {
/**
* Gets cell width based on total number cells for
* current timeframe and shellWidth.
*
* In case cell width is too narrow, we have fixed minimum
* cell width (TIMELINE_CELL_MIN_WIDTH) to obey.
*/
getCellWidth() {
const minWidth =
Math.ceil((this.shellWidth - EPIC_DETAILS_CELL_WIDTH) / this.timeframe.length);
return Math.max(minWidth, TIMELINE_CELL_MIN_WIDTH);
},
/**
* Check if current timeline cell has start date for current epic
*/
hasStartDate() {
return this.epic.startDate.getMonth() === this.timeframeItem.getMonth() &&
this.epic.startDate.getFullYear() === this.timeframeItem.getFullYear();
},
/**
* In case startDate for any epic is undefined or is out of range
* for current timeframe, we have to provide specific offset while
* positioning it to ensure that;
*
* 1. Timeline bar starts at correct position based on start date.
* 2. Bar starts exactly at the start of cell in case start date is `1`.
* 3. A "triangle" shape is shown at the beginning of timeline bar
* when startDate is out of range.
*/
getTimelineBarStartOffset() {
const daysInMonth = totalDaysInMonth(this.timeframeItem);
const startDate = this.epic.startDate.getDate();
let offset = '';
if (this.epic.startDateOutOfRange ||
(this.epic.startDateUndefined && this.epic.endDateOutOfRange)) {
// If Epic startDate is out of timeframe range
// OR
// Epic startDate is undefined AND Epic endDate is out of timeframe range
// no offset is needed.
offset = '';
} else if (startDate === 1) {
// If Epic startDate is first day of the month
// Set offset to 0.
offset = 'left: 0;';
} else {
// Calculate proportional offset based on startDate and total days in
// current month.
offset = `left: ${Math.floor((startDate / daysInMonth) * 100)}%;`;
}
return offset;
},
/**
* In case startDate or endDate for any epic is undefined or is out of range
* for current timeframe, we have to provide specific offset while
* setting width to ensure that;
*
* 1. Timeline bar ends at correct position based on end date.
* 2. A "triangle" shape is shown at the end of timeline bar
* when endDate is out of range.
*/
getTimelineBarEndOffset() {
let offset = 0;
if ((this.epic.startDateOutOfRange && this.epic.endDateOutOfRange) ||
(this.epic.startDateUndefined && this.epic.endDateOutOfRange)) {
// If Epic startDate is undefined or out of range
// AND
// endDate is out of range
// Reduce offset size from the width to compensate for fadeout of timelinebar
// and/or showing triangle at the end and beginning
offset = TIMELINE_END_OFFSET_FULL;
} else if (this.epic.endDateOutOfRange) {
// If Epic end date is out of range
// Reduce offset size from the width to compensate for triangle (which is sized at 8px)
offset = TIMELINE_END_OFFSET_HALF;
} else {
// No offset needed if all dates are defined.
offset = 0;
}
return offset;
},
/**
* Check if current timeframe is under the range of Epic endDate
*/
isTimeframeUnderEndDate(timeframeItem, epicEndDate) {
return timeframeItem.getYear() <= epicEndDate.getYear() &&
timeframeItem.getMonth() === epicEndDate.getMonth();
},
/**
* Get width for timeline bar for current cell (representing a month)
* Based on total days in the month and width of month on UI
*/
getBarWidthForMonth(cellWidth, daysInMonth, date) {
const dayWidth = cellWidth / daysInMonth;
const barWidth = date === daysInMonth ? cellWidth : dayWidth * date;
return Math.min(cellWidth, barWidth);
},
/**
* This method is externally only called when current timeframe cell has timeline
* bar to show. So when this method is called, we iterate over entire timeframe
* array starting from current timeframeItem.
*
* For eg;
* If timeframe range for 6 months is;
* 2017 Oct, 2017 Nov, 2017 Dec, 2018 Jan, 2018 Feb, 2018 Mar
*
* And if Epic starts in 2017 Dec and ends in 2018 Feb.
*
* Then this method will iterate over timeframe as;
* 2017 Dec => 2018 Feb
* And will add up width(see 1.) for timeline bar for each month in iteration
* based on provided start and end dates.
*
* 1. Width from date is calculated by totalWidthCell / totalDaysInMonth = widthOfSingleDay
* and then dateOfMonth x widthOfSingleDay = totalBarWidth
*/
getTimelineBarWidth() {
let timelineBarWidth = 0;
const indexOfCurrentMonth = this.timeframe.indexOf(this.timeframeItem);
const cellWidth = this.getCellWidth();
const offsetEnd = this.getTimelineBarEndOffset();
const epicStartDate = this.epic.startDate;
const epicEndDate = this.epic.endDate;
// Start iteration from current month
for (let i = indexOfCurrentMonth; i < this.timeframe.length; i += 1) {
// Get total days for current month
const daysInMonth = totalDaysInMonth(this.timeframe[i]);
if (i === indexOfCurrentMonth) {
// If this is current month
if (this.isTimeframeUnderEndDate(this.timeframe[i], epicEndDate)) {
// If Epic endDate falls under the range of current timeframe month
// then get width for number of days between start and end dates (inclusive)
timelineBarWidth += this.getBarWidthForMonth(
cellWidth,
daysInMonth,
((epicEndDate.getDate() - epicStartDate.getDate()) + 1),
);
// Break as Epic start and end date fall within current timeframe month itself!
break;
} else {
// Epic end date does NOT fall in current month.
// If start date is first day of the month,
// we need width of full cell (i.e. total days of month)
// otherwise, we need width only for date from total days of month.
const date = epicStartDate.getDate() === 1 ?
daysInMonth : daysInMonth - epicStartDate.getDate();
timelineBarWidth += this.getBarWidthForMonth(cellWidth, daysInMonth, date);
}
} else if (this.isTimeframeUnderEndDate(this.timeframe[i], epicEndDate)) {
// If this is NOT current month but epicEndDate falls under
// current timeframe month then calculate width
// based on date of the month
timelineBarWidth += this.getBarWidthForMonth(
cellWidth,
daysInMonth,
epicEndDate.getDate(),
);
// Break as Epic end date falls within current timeframe month!
break;
} else {
// This is neither current month,
// nor does the Epic end date fall under current timeframe month
// add width for entire cell of current timeframe.
timelineBarWidth += this.getBarWidthForMonth(cellWidth, daysInMonth, daysInMonth);
}
}
// Reduce any offset from total width and round it off.
return Math.round(timelineBarWidth - offsetEnd);
},
/**
* Renders timeline bar only if current
* timeframe item has startDate for the epic.
*/
renderTimelineBar() {
if (this.hasStartDate()) {
this.timelineBarStyles = `width: ${this.getTimelineBarWidth()}px; ${this.getTimelineBarStartOffset()}`;
this.timelineBarReady = true;
}
},
},
};
</script>
<template>
<td
class="epic-timeline-cell"
:style="tdStyles"
>
<div class="timeline-bar-wrapper">
<a
v-if="showTimelineBar"
class="timeline-bar"
:href="epic.webUrl"
:class="{
'start-date-undefined': epic.startDateUndefined,
'start-date-outside': epic.startDateOutOfRange,
'end-date-undefined': epic.endDateUndefined,
'end-date-outside': epic.endDateOutOfRange,
}"
:style="timelineBarStyles"
>
</a>
</div>
</td>
</template>
ee/app/assets/javascripts/roadmap/components/epics_list_empty.vue 0 → 100644
View file @ 36a242fc
<script>
import { s__, sprintf } from '~/locale';
import { dateInWords } from '~/lib/utils/datetime_utility';
export default {
props: {
timeframeStart: {
type: Date,
required: true,
},
timeframeEnd: {
type: Date,
required: true,
},
emptyStateIllustrationPath: {
type: String,
required: true,
},
},
computed: {
timeframeRange() {
const startDate = dateInWords(
this.timeframeStart,
true,
this.timeframeStart.getFullYear() === this.timeframeEnd.getFullYear(),
);
const endDate = dateInWords(this.timeframeEnd, true);
return {
startDate,
endDate,
};
},
message() {
return s__('GroupRoadmap|Epics let you manage your portfolio of projects more efficiently and with less effort');
},
subMessage() {
return sprintf(s__('GroupRoadmap|To view the roadmap, add a planned start or finish date to one of your epics in this group or its subgroups. Only epics in the past 3 months and the next 3 months are shown &ndash; from %{startDate} to %{endDate}.'), {
startDate: this.timeframeRange.startDate,
endDate: this.timeframeRange.endDate,
});
},
},
};
</script>
<template>
<div class="row empty-state">
<div class="col-xs-12">
<div class="svg-content">
<img
:src="emptyStateIllustrationPath"
/>
</div>
</div>
<div class="col-xs-12">
<div class="text-content">
<h4>{{ message }}</h4>
<p v-html="subMessage"></p>
</div>
</div>
</div>
</template>
ee/app/assets/javascripts/roadmap/components/epics_list_section.vue 0 → 100644
View file @ 36a242fc
<script>
import eventHub from '../event_hub';
import { SCROLL_BAR_SIZE } from '../constants';
import epicItem from './epic_item.vue';
export default {
components: {
epicItem,
},
props: {
epics: {
type: Array,
required: true,
},
timeframe: {
type: Array,
required: true,
},
currentGroupId: {
type: Number,
required: true,
},
shellWidth: {
type: Number,
required: true,
},
},
data() {
return {
shellHeight: 0,
emptyRowHeight: 0,
showEmptyRow: false,
};
},
computed: {
/**
* Return width after reducing scrollbar size
* such that Epic item cells do not consider
* scrollbar
*/
calcShellWidth() {
return this.shellWidth - SCROLL_BAR_SIZE;
},
/**
* Adjust tbody styles while pushing scrollbar further away
* from the view
*/
tbodyStyles() {
return `width: ${this.shellWidth + SCROLL_BAR_SIZE}px; height: ${this.shellHeight}px;`;
},
emptyRowCellStyles() {
return `height: ${this.emptyRowHeight}px;`;
},
},
watch: {
shellWidth: function shellWidth() {
// Scroll view to today indicator only when shellWidth is updated.
this.scrollToTodayIndicator();
},
},
mounted() {
this.$nextTick(() => {
this.initMounted();
});
},
methods: {
initMounted() {
// Get available shell height based on viewport height
this.shellHeight = window.innerHeight - (this.$el.offsetTop + this.$root.$el.offsetTop);
// In case there are epics present, initialize empty row
if (this.epics.length) {
this.initEmptyRow();
}
eventHub.$emit('epicsListRendered', {
width: this.$el.clientWidth,
height: this.shellHeight,
});
},
/**
* In case number of epics in the list are not sufficient
* to fill in full page height, we need to show an empty row
* at the bottom with fixed absolute height such that the
* column rulers expand to full page height
*
* This method calculates absolute height for empty column in pixels
* based on height of available list items and sets it to component
* props.
*/
initEmptyRow() {
const children = this.$children;
let approxChildrenHeight = children[0].$el.clientHeight * this.epics.length;
// Check if approximate height is greater than shell height
if (approxChildrenHeight < this.shellHeight) {
// reset approximate height and recalculate actual height
approxChildrenHeight = 0;
children.forEach((child) => {
// accumulate children height
// compensate for bottom border
approxChildrenHeight += child.$el.clientHeight;
});
// set height and show empty row reducing horizontal scrollbar size
this.emptyRowHeight = (this.shellHeight - approxChildrenHeight) - 1;
this.showEmptyRow = true;
}
},
/**
* We can easily use `eventHub` and dispatch this event
* to all sibling and child components but it adds an overhead/delay
* resulting to janky element positioning. Hence, we directly
* update raw element properties upon event via jQuery.
*/
handleScroll() {
const scrollLeft = this.$el.scrollLeft;
const tableEl = this.$el.parentElement;
if (tableEl) {
const $theadEl = $(tableEl).find('thead');
const $tbodyEl = $(tableEl).find('tbody');
$theadEl.css('left', -scrollLeft);
$theadEl.find('th:nth-child(1)').css('left', scrollLeft);
$tbodyEl.find('td:nth-child(1)').css('left', scrollLeft);
}
eventHub.$emit('epicsListScrolled', this.$el.scrollTop, this.$el.scrollLeft);
},
/**
* `clientWidth` is full width of list section, and we need to
* scroll up to 60% of the view where today indicator is present.
*
* Reason for 60% is that "today" always falls in the middle of timeframe range.
*/
scrollToTodayIndicator() {
const uptoTodayIndicator = Math.ceil((this.$el.clientWidth * 60) / 100);
this.$el.scrollTo(uptoTodayIndicator, 0);
},
},
};
</script>
<template>
<tbody
class="epics-list-section"
:style="tbodyStyles"
@scroll="handleScroll"
>
<epic-item
v-for="(epic, index) in epics"
:key="index"
:epic="epic"
:timeframe="timeframe"
:current-group-id="currentGroupId"
:shell-width="calcShellWidth"
/>
<tr
v-if="showEmptyRow"
class="epics-list-item epics-list-item-empty"
>
<td
class="epic-details-cell"
:style="emptyRowCellStyles"
>
</td>
<td
class="epic-timeline-cell"
v-for="(timeframeItem, index) in timeframe"
:key="index"
:style="emptyRowCellStyles"
>
</td>
</tr>
</tbody>
</template>
ee/app/assets/javascripts/roadmap/components/roadmap_shell.vue 0 → 100644
View file @ 36a242fc
<script>
import { SCROLL_BAR_SIZE } from '../constants';
import epicsListSection from './epics_list_section.vue';
import roadmapTimelineSection from './roadmap_timeline_section.vue';
export default {
components: {
epicsListSection,
roadmapTimelineSection,
},
props: {
epics: {
type: Array,
required: true,
},
timeframe: {
type: Array,
required: true,
},
currentGroupId: {
type: Number,
required: true,
},
},
data() {
return {
shellWidth: 0,
};
},
computed: {
tableStyles() {
// return width after deducting size of vertical scrollbar
// to hide the scrollbar while preserving ability to scroll
return `width: ${this.shellWidth - SCROLL_BAR_SIZE}px;`;
},
},
mounted() {
this.$nextTick(() => {
// Client width at the time of component mount will not
// provide accurate size of viewport until child contents are
// actually loaded and rendered into the DOM, hence
// we wait for nextTick which ensures DOM update has completed
// before setting shellWidth
// see https://vuejs.org/v2/api/#Vue-nextTick
if (this.$el.parentElement) {
this.shellWidth = this.$el.parentElement.clientWidth;
}
});
},
};
</script>
<template>
<table
class="roadmap-shell"
:style="tableStyles"
>
<roadmap-timeline-section
:epics="epics"
:timeframe="timeframe"
:shell-width="shellWidth"
/>
<epics-list-section
:epics="epics"
:timeframe="timeframe"
:shell-width="shellWidth"
:current-group-id="currentGroupId"
/>
</table>
</template>
ee/app/assets/javascripts/roadmap/components/roadmap_timeline_section.vue 0 → 100644
View file @ 36a242fc
<script>
import eventHub from '../event_hub';
import { SCROLL_BAR_SIZE } from '../constants';
import timelineHeaderItem from './timeline_header_item.vue';
export default {
components: {
timelineHeaderItem,
},
props: {
epics: {
type: Array,
required: true,
},
timeframe: {
type: Array,
required: true,
},
shellWidth: {
type: Number,
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);
},
beforeDestroy() {
eventHub.$off('epicsListScrolled', this.handleEpicsListScroll);
},
methods: {
handleEpicsListScroll(scrollTop) {
// Add class only when content are scrolled at half the height of header
this.scrolledHeaderClass = (scrollTop > this.$el.clientHeight / 2) ? 'scrolled-ahead' : '';
},
},
};
</script>
<template>
<thead
class="roadmap-timeline-section"
:class="scrolledHeaderClass"
:style="theadStyles"
>
<tr>
<th class="timeline-header-blank"></th>
<timeline-header-item
v-for="(timeframeItem, index) in timeframe"
:key="index"
:timeframe-index="index"
:timeframe-item="timeframeItem"
:timeframe="timeframe"
:shell-width="calcShellWidth"
/>
</tr>
</thead>
</template>
ee/app/assets/javascripts/roadmap/components/timeline_header_item.vue 0 → 100644
View file @ 36a242fc
<script>
import { monthInWords } from '~/lib/utils/datetime_utility';
import { EPIC_DETAILS_CELL_WIDTH, TIMELINE_CELL_MIN_WIDTH } from '../constants';
import timelineHeaderSubItem from './timeline_header_sub_item.vue';
export default {
components: {
timelineHeaderSubItem,
},
props: {
timeframeIndex: {
type: Number,
required: true,
},
timeframeItem: {
type: Date,
required: true,
},
timeframe: {
type: Array,
required: true,
},
shellWidth: {
type: Number,
required: true,
},
},
data() {
const currentDate = new Date();
return {
currentDate,
currentYear: currentDate.getFullYear(),
currentMonth: currentDate.getMonth(),
};
},
computed: {
thStyles() {
const timeframeLength = this.timeframe.length;
// Calculate minimum width for single cell
// based on total number of months in current timeframe
// and available shellWidth
const minWidth =
Math.ceil((this.shellWidth - EPIC_DETAILS_CELL_WIDTH) / timeframeLength);
// When shellWidth is too low, we need to obey global
// minimum cell width.
if (minWidth < TIMELINE_CELL_MIN_WIDTH) {
return `min-width: ${TIMELINE_CELL_MIN_WIDTH}px;`;
}
return `min-width: ${minWidth}px;`;
},
timelineHeaderLabel() {
const year = this.timeframeItem.getFullYear();
const month = monthInWords(this.timeframeItem, true);
// Show Year only if current timeframe has months between
// two years and current timeframe item is first month
// from one of the two years.
//
// End result of doing this is;
// 2017 Nov, Dec, 2018 Jan, Feb, Mar
if (this.timeframeIndex !== 0 &&
this.timeframe[this.timeframeIndex - 1].getFullYear() === year) {
return month;
}
return `${year} ${month}`;
},
timelineHeaderClass() {
let itemLabelClass = '';
const timeframeYear = this.timeframeItem.getFullYear();
const timeframeMonth = this.timeframeItem.getMonth();
// Show dark color text only if timeframe item year & month
// are greater than current year.
if (timeframeYear >= this.currentYear &&
timeframeMonth >= this.currentMonth) {
itemLabelClass += 'label-dark';
}
// Show bold text only if timeframe item year & month
// is current year & month
if (timeframeYear === this.currentYear &&
timeframeMonth === this.currentMonth) {
itemLabelClass += ' label-bold';
}
return itemLabelClass;
},
},
};
</script>
<template>
<th
class="timeline-header-item"
:style="thStyles"
>
<div
class="item-label"
:class="timelineHeaderClass"
>
{{ timelineHeaderLabel }}
</div>
<timeline-header-sub-item
:timeframe-item="timeframeItem"
:current-date="currentDate"
/>
</th>
</template>
ee/app/assets/javascripts/roadmap/components/timeline_header_sub_item.vue 0 → 100644
View file @ 36a242fc
<script>
import { getSundays } from '~/lib/utils/datetime_utility';
import timelineTodayIndicator from './timeline_today_indicator.vue';
export default {
components: {
timelineTodayIndicator,
},
props: {
currentDate: {
type: Date,
required: true,
},
timeframeItem: {
type: Date,
required: true,
},
},
computed: {
headerSubItems() {
return getSundays(this.timeframeItem);
},
headerSubItemClass() {
const currentYear = this.currentDate.getFullYear();
const currentMonth = this.currentDate.getMonth();
const timeframeYear = this.timeframeItem.getFullYear();
const timeframeMonth = this.timeframeItem.getMonth();
// Show dark color text only for dates from current month and future months.
return timeframeYear >= currentYear && timeframeMonth >= currentMonth ? 'label-dark' : '';
},
hasToday() {
const timeframeYear = this.timeframeItem.getFullYear();
const timeframeMonth = this.timeframeItem.getMonth();
return this.currentDate.getMonth() === timeframeMonth &&
this.currentDate.getFullYear() === timeframeYear;
},
},
methods: {
getSubItemValueClass(subItem) {
// Show light color text for dates which are
// older than today
if (subItem < this.currentDate) {
return 'value-light';
}
return '';
},
},
};
</script>
<template>
<div
class="item-sublabel"
:class="headerSubItemClass"
>
<span
v-for="(subItem, index) in headerSubItems"
:key="index"
class="sublabel-value"
:class="getSubItemValueClass(subItem)"
>
{{ subItem.getDate() }}
</span>
<timeline-today-indicator
v-if="hasToday"
:timeframe-item="timeframeItem"
:current-date="currentDate"
/>
</div>
</template>
ee/app/assets/javascripts/roadmap/components/timeline_today_indicator.vue 0 → 100644
View file @ 36a242fc
<script>
import { totalDaysInMonth } from '~/lib/utils/datetime_utility';
import eventHub from '../event_hub';
export default {
props: {
currentDate: {
type: Date,
required: true,
},
timeframeItem: {
type: Date,
required: true,
},
},
data() {
return {
todayBarStyles: '',
todayBarReady: false,
};
},
mounted() {
eventHub.$on('epicsListRendered', this.handleEpicsListRender);
},
beforeDestroy() {
eventHub.$off('epicsListRendered', this.handleEpicsListRender);
},
methods: {
/**
* This method takes height of current shell
* and renders vertical line over the area where
* today falls in current timeline
*/
handleEpicsListRender({ height }) {
// Get total days of current timeframe Item
const daysInMonth = totalDaysInMonth(this.timeframeItem);
// Get size in % from current date and days in month.
const left = Math.floor((this.currentDate.getDate() / daysInMonth) * 100);
// Set styles and reduce scrollbar height from total shell height.
this.todayBarStyles = `height: ${height}px; left: ${left}%;`;
this.todayBarReady = true;
},
},
};
</script>
<template>
<span
v-if="todayBarReady"
class="today-bar"
:style="todayBarStyles"
>
</span>
</template>
ee/app/assets/javascripts/roadmap/constants.js 0 → 100644
View file @ 36a242fc
export const TIMEFRAME_LENGTH = 6;
export const EPIC_DETAILS_CELL_WIDTH = 320;
export const TIMELINE_CELL_MIN_WIDTH = 180;
export const SCROLL_BAR_SIZE = 15;
export const TIMELINE_END_OFFSET_HALF = 17;
export const TIMELINE_END_OFFSET_FULL = 26;
ee/app/assets/javascripts/roadmap/event_hub.js 0 → 100644
View file @ 36a242fc
import Vue from 'vue';
export default new Vue();
ee/app/assets/javascripts/roadmap/index.js 0 → 100644
View file @ 36a242fc
import Vue from 'vue';
import Translate from '~/vue_shared/translate';
import { getTimeframeWindow } from '~/lib/utils/datetime_utility';
import { TIMEFRAME_LENGTH } from './constants';
import RoadmapStore from './store/roadmap_store';
import RoadmapService from './service/roadmap_service';
import roadmapApp from './components/app.vue';
Vue.use(Translate);
document.addEventListener('DOMContentLoaded', () => {
const el = document.getElementById('js-roadmap');
if (!el) {
return false;
}
return new Vue({
el,
components: {
roadmapApp,
},
data() {
const dataset = this.$options.el.dataset;
// Construct Epic API path to include
// `start_date` & `end_date` query params to get list of
// epics only for current timeframe.
const timeframe = getTimeframeWindow(TIMEFRAME_LENGTH);
const start = timeframe[0];
const end = timeframe[TIMEFRAME_LENGTH - 1];
const startDate = `${start.getFullYear()}-${start.getMonth() + 1}-${start.getDate()}`;
const endDate = `${end.getFullYear()}-${end.getMonth() + 1}-${end.getDate()}`;
const epicsPath = `${dataset.epicsPath}?start_date=${startDate}&end_date=${endDate}`;
const store = new RoadmapStore(parseInt(dataset.groupId, 0), timeframe);
const service = new RoadmapService(epicsPath);
return {
store,
service,
emptyStateIllustrationPath: dataset.emptyStateIllustration,
};
},
render(createElement) {
return createElement('roadmap-app', {
props: {
store: this.store,
service: this.service,
emptyStateIllustrationPath: this.emptyStateIllustrationPath,
},
});
},
});
});
ee/app/assets/javascripts/roadmap/service/roadmap_service.js 0 → 100644
View file @ 36a242fc
import axios from '~/lib/utils/axios_utils';
export default class RoadmapService {
constructor(epicsPath) {
this.epicsPath = epicsPath;
}
getEpics() {
return axios.get(this.epicsPath);
}
}
ee/app/assets/javascripts/roadmap/store/roadmap_store.js 0 → 100644
View file @ 36a242fc
import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
export default class RoadmapStore {
constructor(groupId, timeframe) {
this.state = {};
this.state.epics = [];
this.state.currentGroupId = groupId;
this.state.timeframe = timeframe;
this.firstTimeframeItem = this.state.timeframe[0];
this.lastTimeframeItem = this.state.timeframe[this.state.timeframe.length - 1];
}
setEpics(epics) {
this.state.epics = epics.map(
epic => RoadmapStore.formatEpicDetails(epic, this.firstTimeframeItem, this.lastTimeframeItem),
);
}
getEpics() {
return this.state.epics;
}
getCurrentGroupId() {
return this.state.currentGroupId;
}
getTimeframe() {
return this.state.timeframe;
}
/**
* This method constructs Epic object and assigns proxy dates
* in case start or end dates are unavailable.
*
* @param {Object} rawEpic
* @param {Date} firstTimeframeItem
* @param {Date} lastTimeframeItem
*/
static formatEpicDetails(rawEpic, firstTimeframeItem, lastTimeframeItem) {
const epicItem = convertObjectPropsToCamelCase(rawEpic);
if (rawEpic.start_date) {
// If startDate is present
const startDate = new Date(rawEpic.start_date);
if (startDate <= firstTimeframeItem) {
// If startDate is less than first timeframe item
// startDate is out of range;
epicItem.startDateOutOfRange = true;
// store original start date in different object
epicItem.originalStartDate = startDate;
// Use startDate object to set a proxy date so
// that timeline bar can render it.
epicItem.startDate = new Date(firstTimeframeItem.getTime());
} else {
// startDate is within timeframe range
epicItem.startDate = startDate;
}
} else {
// Start date is not available
epicItem.startDateUndefined = true;
// Set proxy date so that timeline bar can render it.
epicItem.startDate = new Date(firstTimeframeItem.getTime());
}
// Same as above but for endDate
// This entire chunk can be moved into generic method
// but we're keeping it here for the sake of simplicity.
if (rawEpic.end_date) {
const endDate = new Date(rawEpic.end_date);
if (endDate >= lastTimeframeItem) {
epicItem.endDateOutOfRange = true;
epicItem.originalEndDate = endDate;
epicItem.endDate = new Date(lastTimeframeItem.getTime());
} else {
epicItem.endDate = endDate;
}
} else {
epicItem.endDateUndefined = true;
epicItem.endDate = new Date(lastTimeframeItem.getTime());
}
return epicItem;
}
}
ee/app/assets/stylesheets/pages/roadmap.scss 0 → 100644
View file @ 36a242fc
$item-height: 50px;
$column-shadow: 15px 0 15px -15px rgba(0, 0, 0, 0.12) inset;
$scroll-top-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.12);
$border-style: 1px solid $border-gray-normal;
$details-cell-width: 320px;
.group-epics-roadmap-wrapper {
padding-bottom: 0;
}
.breadcrumbs.group-epics-roadmap {
border-bottom: $border-style;
.breadcrumbs-container {
border-bottom: none;
}
}
.roadmap-shell {
width: 100%;
overflow: hidden;
&,
.roadmap-timeline-section,
.epics-list-section {
display: block;
position: relative;
}
.epics-list-section .epic-details-cell:after,
.roadmap-timeline-section .timeline-header-blank:after,
.roadmap-timeline-section.scrolled-ahead .timeline-header-blank:before {
content: '';
position: absolute;
}
.epics-list-section .epic-details-cell:after,
.roadmap-timeline-section .timeline-header-blank:after {
top: 0;
right: -15px;
height: 100%;
width: 14px;
box-shadow: $column-shadow;
pointer-events: none;
}
.roadmap-timeline-section .timeline-header-blank:after {
top: -2px;
height: 60px;
}
.roadmap-timeline-section.scrolled-ahead .timeline-header-blank:before {
bottom: -1px;
left: 0;
height: 15px;
width: 100%;
box-shadow: $scroll-top-shadow;
}
.roadmap-timeline-section {
overflow: visible;
}
.epics-list-section {
overflow: auto;
.epics-list-item-empty {
.epic-details-cell {
border-bottom: none;
}
}
tr:not(.epics-list-item-empty):hover {
&,
.epic-details-cell {
background-color: $theme-gray-100;
}
}
}
}
.roadmap-timeline-section {
.timeline-header-blank {
position: relative;
display: block;
top: 2px;
height: 60px;
width: $details-cell-width;
background-color: $white-light;
border-right: $border-style;
z-index: 3;
}
.timeline-header-blank,
.timeline-header-item {
border-bottom: $border-style;
}
.timeline-header-item {
&:last-of-type .item-label {
border-right: none;
}
.item-label,
.item-sublabel {
color: $theme-gray-600;
font-weight: 400;
&.label-dark {
color: $theme-gray-900;
.value-light {
color: $theme-gray-600;
}
}
}
.item-label {
padding: $gl-padding-8 $gl-padding;
border-right: $border-style;
border-bottom: $border-style;
&.label-bold {
font-weight: 700;
}
}
.item-sublabel {
position: relative;
display: flex;
.sublabel-value {
flex: 1;
text-align: center;
font-size: $code_font_size;
padding: 2px 0;
}
.today-bar {
position: absolute;
top: 20px;
width: 2px;
background-color: $red-500;
pointer-events: none;
z-index: 1;
}
.today-bar:before {
content: '';
position: absolute;
top: -3px;
left: -3px;
height: $grid-size;
width: $grid-size;
background-color: inherit;
border-radius: 50%;
}
}
}
}
.epics-list-section {
.epics-list-item {
&.epics-list-item-empty {
.epic-details-cell,
.epic-timeline-cell {
padding: 0;
}
}
.epic-details-cell,
.epic-timeline-cell {
border-right: $border-style;
border-bottom: $border-style;
}
.epic-details-cell {
position: relative;
display: block;
top: 1px; /* Remove cell spacing */
width: $details-cell-width;
padding: $gl-padding-8 $gl-padding;
font-size: $code_font_size;
background-color: $white-light;
z-index: 2;
.epic-title {
display: table;
table-layout: fixed;
width: 100%;
}
.epic-title .epic-url {
display: table-cell;
color: $theme-gray-900;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.epic-group-timeframe {
color: $theme-gray-700;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.epic-group:hover {
cursor: pointer;
}
}
.epic-timeline-cell {
.timeline-bar-wrapper {
position: relative;
}
.timeline-bar {
position: absolute;
top: -12px;
height: 24px;
background-color: $blue-500;
border-radius: $border-radius-default;
opacity: 0.75;
&:hover {
opacity: 1;
}
&.start-date-outside:before,
&.end-date-outside:after {
content: '';
position: absolute;
top: 0;
height: 100%;
}
&.start-date-outside:before,
&.end-date-outside:after {
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
}
&.start-date-undefined {
background: linear-gradient(to right, transparent 0%, $blue-200 50%, $blue-500 100%);
}
&.end-date-undefined {
background: linear-gradient(to right, $blue-500 0%, $blue-200 50%, transparent 100%);
}
&.start-date-outside {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
&:before {
left: -8px;
border-right: 8px solid $blue-500;
}
}
&.end-date-outside {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
&:after {
right: -8px;
border-left: 8px solid $blue-500;
}
}
&.start-date-outside,
&.start-date-undefined.end-date-outside {
left: 8px;
}
}
&:last-child {
border-right: none;
}
}
}
}
ee/app/controllers/groups/epics_controller.rb
View file @ 36a242fc
...@@ -96,4 +96,8 @@ class Groups::EpicsController < Groups::ApplicationController ...@@ -96,4 +96,8 @@ class Groups::EpicsController < Groups::ApplicationController
def authorize_create_epic! def authorize_create_epic!
return render_404 unless can?(current_user, :create_epic, group) return render_404 unless can?(current_user, :create_epic, group)
end end
def filter_params
super.merge(start_date: params[:start_date], end_date: params[:end_date])
end
end end
ee/app/controllers/groups/roadmap_controller.rb 0 → 100644
View file @ 36a242fc
module Groups
class RoadmapController < Groups::ApplicationController
before_action :group
def show
# show roadmap for a group
@epics_count = EpicsFinder.new(current_user, group_id: @group.id).execute.count
end
end
end
ee/app/finders/epics_finder.rb
View file @ 36a242fc
...@@ -53,9 +53,14 @@ class EpicsFinder < IssuableFinder ...@@ -53,9 +53,14 @@ class EpicsFinder < IssuableFinder
def by_timeframe(items) def by_timeframe(items)
return items unless params[:start_date] && params[:end_date] return items unless params[:start_date] && params[:end_date]
end_date = params[:end_date].to_datetime.end_of_day
start_date = params[:start_date].to_datetime.beginning_of_day
items items
.where('epics.start_date is not NULL or epics.end_date is not NULL') .where('epics.start_date is not NULL or epics.end_date is not NULL')
.where('epics.start_date is NULL or epics.start_date <= ?', params[:end_date].end_of_day) .where('epics.start_date is NULL or epics.start_date <= ?', end_date)
.where('epics.end_date is NULL or epics.end_date >= ?', params[:start_date].beginning_of_day) .where('epics.end_date is NULL or epics.end_date >= ?', start_date)
rescue ArgumentError
items
end end
end end
ee/app/serializers/epic_entity.rb
View file @ 36a242fc
class EpicEntity < IssuableEntity class EpicEntity < IssuableEntity
expose :group_id expose :group_id
expose :group_name do |epic|
epic.group.name
end
expose :group_full_name do |epic|
epic.group.full_name
end
expose :start_date expose :start_date
expose :end_date expose :end_date
expose :web_url do |epic| expose :web_url do |epic|
......
ee/app/views/groups/roadmap/show.html.haml 0 → 100644
View file @ 36a242fc
- @no_breadcrumb_container = true
- @no_container = true
- @content_wrapper_class = "group-epics-roadmap-wrapper"
- @content_class = "group-epics-roadmap"
- breadcrumb_title _("Epics Roadmap")
- if @epics_count != 0
- content_for :page_specific_javascripts do
= webpack_bundle_tag 'common_vue'
= webpack_bundle_tag 'roadmap'
#js-roadmap{ data: { epics_path: group_epics_path(@group, format: :json), group_id: @group.id, empty_state_illustration: image_path('illustrations/epics/roadmap.svg') } }
- else
= render 'shared/empty_states/roadmap'
ee/app/views/layouts/nav/ee/_epic_link.html.haml
View file @ 36a242fc
- return unless group.feature_available?(:epics) - return unless group.feature_available?(:epics)
- epics = EpicsFinder.new(current_user, group_id: @group.id).execute - epics = EpicsFinder.new(current_user, group_id: @group.id).execute
- epics_items = ['epics#show', 'epics#index'] - epics_items = ['epics#show', 'epics#index', 'roadmap#show']
= nav_link(path: epics_items) do = nav_link(path: epics_items) do
= link_to group_epics_path(group) do = link_to group_epics_path(group) do
...@@ -10,9 +10,16 @@ ...@@ -10,9 +10,16 @@
%span.nav-item-name %span.nav-item-name
Epics Epics
%span.badge.count= number_with_delimiter(epics.count) %span.badge.count= number_with_delimiter(epics.count)
%ul.sidebar-sub-level-items.is-fly-out-only %ul.sidebar-sub-level-items
= nav_link(path: epics_items, html_options: { class: "fly-out-top-item" } ) do = nav_link(path: epics_items, html_options: { class: "fly-out-top-item" } ) do
= link_to group_epics_path(group) do = link_to group_epics_path(group) do
%strong.fly-out-top-item-name %strong.fly-out-top-item-name= _('Epics')
#{ _('Epics') }
%span.badge.count.epic_counter.fly-out-badge= number_with_delimiter(epics.count) %span.badge.count.epic_counter.fly-out-badge= number_with_delimiter(epics.count)
%li.divider.fly-out-top-item
= nav_link(path: 'epics#index', html_options: { class: 'home' }) do
= link_to group_epics_path(group), title: 'List' do
%span= _('List')
= nav_link(path: 'roadmap#show', html_options: { class: 'home' }) do
= link_to group_roadmap_path(group), title: 'Roadmap' do
%span= _('Roadmap')
ee/app/views/shared/empty_states/_epics.html.haml
View file @ 36a242fc
.row.empty-state .row.empty-state
.col-xs-12 .col-xs-12
.svg-content .svg-content
= image_tag('illustrations/epics.svg') = image_tag 'illustrations/epics/list.svg'
.col-xs-12.text-center .col-xs-12
.text-content .text-content
%h4 %h4
= _('Epics let you manage your portfolio of projects more efficiently and with less effort') = _('Epics let you manage your portfolio of projects more efficiently and with less effort')
......
ee/app/views/shared/empty_states/_roadmap.html.haml 0 → 100644
View file @ 36a242fc
.row.empty-state
.col-xs-12
.svg-content
= image_tag 'illustrations/epics/roadmap.svg'
.col-xs-12
.text-content
%h4
= _('The roadmap shows the progress of your epics along a timeline')
%p
= _('To view the roadmap, add a planned start or finish date to one of your epics in this group or its subgroups. Only epics in the past 3 months and the next 3 months are shown.')
- if can?(current_user, :create_epic, @group)
- content_for :page_specific_javascripts do
= webpack_bundle_tag 'common_vue'
= webpack_bundle_tag 'new_epic'
#new-epic-app{ data: { endpoint: request.url } }
= link_to group_epics_path(@group), title: 'List', class: 'btn' do
%span= _('View epics list')
spec/ee/spec/finders/epics_finder_spec.rb
View file @ 36a242fc
...@@ -92,19 +92,30 @@ describe EpicsFinder do ...@@ -92,19 +92,30 @@ describe EpicsFinder do
context 'by timeframe' do context 'by timeframe' do
it 'returns epics which start in the timeframe' do it 'returns epics which start in the timeframe' do
expect(epics(start_date: 2.days.ago, end_date: 1.day.ago)).to contain_exactly(epic2) params = {
start_date: 2.days.ago.strftime('%Y-%m-%d'),
end_date: 1.day.ago.strftime('%Y-%m-%d')
}
expect(epics(params)).to contain_exactly(epic2)
end end
it 'returns epics which end in the timeframe' do it 'returns epics which end in the timeframe' do
expect(epics(start_date: 4.days.ago, end_date: 3.days.ago)).to contain_exactly(epic3) params = {
start_date: 4.days.ago.strftime('%Y-%m-%d'),
end_date: 3.days.ago.strftime('%Y-%m-%d')
}
expect(epics(params)).to contain_exactly(epic3)
end end
it 'returns epics which start before and end after the timeframe' do it 'returns epics which start before and end after the timeframe' do
expect(epics(start_date: 4.days.ago, end_date: 4.days.ago)).to contain_exactly(epic3) params = {
end start_date: 4.days.ago.strftime('%Y-%m-%d'),
end_date: 4.days.ago.strftime('%Y-%m-%d')
}
it 'ignores epics which do not have start and end date set' do expect(epics(params)).to contain_exactly(epic3)
expect(epics(start_date: 2.days.ago, end_date: 1.day.ago)).not_to include(epic1)
end end
end end
end end
......
spec/ee/spec/serializers/epic_entity_spec.rb
View file @ 36a242fc
...@@ -14,6 +14,6 @@ describe EpicEntity do ...@@ -14,6 +14,6 @@ describe EpicEntity do
end end
it 'has epic specific attributes' do it 'has epic specific attributes' do
expect(subject).to include(:start_date, :end_date, :group_id, :web_url) expect(subject).to include(:start_date, :end_date, :group_id, :group_name, :group_full_name, :web_url)
end end
end end
spec/fixtures/api/schemas/entities/epic.json
View file @ 36a242fc
...@@ -20,6 +20,8 @@ ...@@ -20,6 +20,8 @@
"web_url": { "type": "string" }, "web_url": { "type": "string" },
"milestone": { "type": ["object", "null"] }, "milestone": { "type": ["object", "null"] },
"labels": { "type": ["array", "null"] }, "labels": { "type": ["array", "null"] },
"group_name": { "type": "string" },
"group_full_name": { "type": "string" },
"group": { "group": {
"id": { "type": "integer" }, "id": { "type": "integer" },
"path": { "type": "string" } "path": { "type": "string" }
......
spec/javascripts/roadmap/components/app_spec.js 0 → 100644
View file @ 36a242fc
import Vue from 'vue';
import MockAdapter from 'axios-mock-adapter';
import axios from '~/lib/utils/axios_utils';
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 { mockTimeframe, mockGroupId, epicsPath, rawEpics, mockSvgPath } from '../mock_data';
import mountComponent from '../../helpers/vue_mount_component_helper';
const createComponent = () => {
const Component = Vue.extend(appComponent);
const timeframe = mockTimeframe;
const store = new RoadmapStore(mockGroupId, timeframe);
const service = new RoadmapService(epicsPath);
return mountComponent(Component, {
store,
service,
emptyStateIllustrationPath: mockSvgPath,
});
};
describe('AppComponent', () => {
let vm;
beforeEach(() => {
vm = createComponent();
});
afterEach(() => {
vm.$destroy();
});
describe('data', () => {
it('returns default data props', () => {
expect(vm.isLoading).toBe(true);
expect(vm.isEpicsListEmpty).toBe(false);
expect(vm.hasError).toBe(false);
expect(vm.handleResizeThrottled).toBeDefined();
});
});
describe('computed', () => {
describe('epics', () => {
it('returns array of epics', () => {
expect(Array.isArray(vm.epics)).toBe(true);
});
});
describe('timeframe', () => {
it('returns array of timeframe', () => {
expect(Array.isArray(vm.timeframe)).toBe(true);
});
});
describe('timeframeStart', () => {
it('returns first item of timeframe array', () => {
expect(vm.timeframeStart instanceof Date).toBe(true);
});
});
describe('timeframeEnd', () => {
it('returns last item of timeframe array', () => {
expect(vm.timeframeEnd instanceof Date).toBe(true);
});
});
describe('currentGroupId', () => {
it('returns current group Id', () => {
expect(vm.currentGroupId).toBe(mockGroupId);
});
});
describe('showRoadmap', () => {
it('returns true if `isLoading`, `isEpicsListEmpty` and `hasError` are all `false`', () => {
vm.isLoading = false;
vm.isEpicsListEmpty = false;
vm.hasError = false;
expect(vm.showRoadmap).toBe(true);
});
it('returns false if either of `isLoading`, `isEpicsListEmpty` and `hasError` is `true`', () => {
vm.isLoading = true;
vm.isEpicsListEmpty = false;
vm.hasError = false;
expect(vm.showRoadmap).toBe(false);
vm.isLoading = false;
vm.isEpicsListEmpty = true;
vm.hasError = false;
expect(vm.showRoadmap).toBe(false);
vm.isLoading = false;
vm.isEpicsListEmpty = false;
vm.hasError = true;
expect(vm.showRoadmap).toBe(false);
});
});
});
describe('methods', () => {
describe('fetchEpics', () => {
let mock;
beforeEach(() => {
mock = new MockAdapter(axios);
document.body.innerHTML += '<div class="flash-container"></div>';
});
afterEach(() => {
mock.restore();
document.querySelector('.flash-container').remove();
});
it('calls service.getEpics and sets response to the store on success', (done) => {
mock.onGet(vm.service.epicsPath).reply(200, rawEpics);
spyOn(vm.store, 'setEpics');
vm.fetchEpics();
expect(vm.hasError).toBe(false);
setTimeout(() => {
expect(vm.isLoading).toBe(false);
expect(vm.store.setEpics).toHaveBeenCalledWith(rawEpics);
done();
}, 0);
});
it('calls service.getEpics and sets `isEpicsListEmpty` to true if response is empty', (done) => {
mock.onGet(vm.service.epicsPath).reply(200, []);
spyOn(vm.store, 'setEpics');
vm.fetchEpics();
expect(vm.isEpicsListEmpty).toBe(false);
setTimeout(() => {
expect(vm.isEpicsListEmpty).toBe(true);
expect(vm.store.setEpics).not.toHaveBeenCalled();
done();
}, 0);
});
it('calls service.getEpics and sets `hasError` to true and shows flash message if request failed', (done) => {
mock.onGet(vm.service.epicsPath).reply(500, {});
vm.fetchEpics();
expect(vm.hasError).toBe(false);
setTimeout(() => {
expect(vm.hasError).toBe(true);
expect(document.querySelector('.flash-text').innerText.trim()).toBe('Something went wrong while fetching epics');
done();
}, 0);
});
});
});
describe('mounted', () => {
it('binds window resize event listener', () => {
spyOn(window, 'addEventListener');
const vmX = createComponent();
expect(vmX.handleResizeThrottled).toBeDefined();
expect(window.addEventListener).toHaveBeenCalledWith('resize', vmX.handleResizeThrottled, false);
vmX.$destroy();
});
});
describe('beforeDestroy', () => {
it('unbinds window resize event listener', () => {
spyOn(window, 'removeEventListener');
const vmX = createComponent();
vmX.$destroy();
expect(window.removeEventListener).toHaveBeenCalledWith('resize', vmX.handleResizeThrottled, false);
});
});
describe('template', () => {
it('renders roadmap container with class `roadmap-container`', () => {
expect(vm.$el.classList.contains('roadmap-container')).toBe(true);
});
});
});
spec/javascripts/roadmap/components/epic_item_details_spec.js 0 → 100644
View file @ 36a242fc
import Vue from 'vue';
import epicItemDetailsComponent from 'ee/roadmap/components/epic_item_details.vue';
import { mockGroupId, mockEpic } from '../mock_data';
import mountComponent from '../../helpers/vue_mount_component_helper';
const createComponent = (epic = mockEpic, currentGroupId = mockGroupId) => {
const Component = Vue.extend(epicItemDetailsComponent);
return mountComponent(Component, {
epic,
currentGroupId,
});
};
describe('EpicItemDetailsComponent', () => {
let vm;
afterEach(() => {
vm.$destroy();
});
describe('computed', () => {
describe('isEpicGroupDifferent', () => {
it('returns true when Epic.groupId is different from currentGroupId', () => {
const mockEpicItem = Object.assign({}, mockEpic, { groupId: 1 });
vm = createComponent(mockEpicItem, 2);
expect(vm.isEpicGroupDifferent).toBe(true);
});
it('returns false when Epic.groupId is same as currentGroupId', () => {
const mockEpicItem = Object.assign({}, mockEpic, { groupId: 1 });
vm = createComponent(mockEpicItem, 1);
expect(vm.isEpicGroupDifferent).toBe(false);
});
});
describe('startDate', () => {
it('returns Epic.startDate when start date is within range', () => {
vm = createComponent(mockEpic);
expect(vm.startDate).toBe(mockEpic.startDate);
});
it('returns Epic.originalStartDate when start date is out of range', () => {
const mockStartDate = new Date(2018, 0, 1);
const mockEpicItem = Object.assign({}, mockEpic, {
startDateOutOfRange: true,
originalStartDate: mockStartDate,
});
vm = createComponent(mockEpicItem);
expect(vm.startDate).toBe(mockStartDate);
});
});
describe('endDate', () => {
it('returns Epic.endDate when end date is within range', () => {
vm = createComponent(mockEpic);
expect(vm.endDate).toBe(mockEpic.endDate);
});
it('returns Epic.originalEndDate when end date is out of range', () => {
const mockEndDate = new Date(2018, 0, 1);
const mockEpicItem = Object.assign({}, mockEpic, {
endDateOutOfRange: true,
originalEndDate: mockEndDate,
});
vm = createComponent(mockEpicItem);
expect(vm.endDate).toBe(mockEndDate);
});
});
describe('timeframeString', () => {
it('returns timeframe string correctly when both start and end dates are defined', () => {
vm = createComponent(mockEpic);
expect(vm.timeframeString).toBe('Jul 10, 2017 &ndash; Jun 2, 2018');
});
it('returns timeframe string correctly when only start date is defined', () => {
const mockEpicItem = Object.assign({}, mockEpic, {
endDateUndefined: true,
});
vm = createComponent(mockEpicItem);
expect(vm.timeframeString).toBe('From Jul 10, 2017');
});
it('returns timeframe string correctly when only end date is defined', () => {
const mockEpicItem = Object.assign({}, mockEpic, {
startDateUndefined: true,
});
vm = createComponent(mockEpicItem);
expect(vm.timeframeString).toBe('Until Jun 2, 2018');
});
it('returns timeframe string with hidden year for start date when both start and end dates are from same year', () => {
const mockEpicItem = Object.assign({}, mockEpic, {
startDate: new Date(2018, 0, 1),
endDate: new Date(2018, 3, 1),
});
vm = createComponent(mockEpicItem);
expect(vm.timeframeString).toBe('Jan 1 &ndash; Apr 1, 2018');
});
});
});
describe('template', () => {
it('renders component container element with class `epic-details-cell`', () => {
vm = createComponent();
expect(vm.$el.classList.contains('epic-details-cell')).toBe(true);
});
it('renders Epic title correctly', () => {
vm = createComponent();
const epicTitleEl = vm.$el.querySelector('.epic-title .epic-url');
expect(epicTitleEl).not.toBeNull();
expect(epicTitleEl.getAttribute('href')).toBe(mockEpic.webUrl);
expect(epicTitleEl.innerText.trim()).toBe(mockEpic.title);
});
it('renders Epic group name and tooltip', () => {
const mockEpicItem = Object.assign({}, mockEpic, {
groupId: 1,
groupName: 'Bar',
groupFullName: 'Foo / Bar',
});
vm = createComponent(mockEpicItem, 2);
const epicGroupNameEl = vm.$el.querySelector('.epic-group-timeframe .epic-group');
expect(epicGroupNameEl).not.toBeNull();
expect(epicGroupNameEl.innerText.trim()).toContain(mockEpicItem.groupName);
expect(epicGroupNameEl.dataset.originalTitle).toBe(mockEpicItem.groupFullName);
});
it('renders Epic timeframe', () => {
vm = createComponent();
const epicTimeframeEl = vm.$el.querySelector('.epic-group-timeframe .epic-timeframe');
expect(epicTimeframeEl).not.toBeNull();
expect(epicTimeframeEl.innerText.trim()).toBe('Jul 10, 2017 – Jun 2, 2018');
});
});
});
spec/javascripts/roadmap/components/epic_item_spec.js 0 → 100644
View file @ 36a242fc
import Vue from 'vue';
import epicItemComponent from 'ee/roadmap/components/epic_item.vue';
import { mockTimeframe, mockEpic, mockGroupId, mockShellWidth } from '../mock_data';
import mountComponent from '../../helpers/vue_mount_component_helper';
const createComponent = ({
epic = mockEpic,
timeframe = mockTimeframe,
currentGroupId = mockGroupId,
shellWidth = mockShellWidth,
}) => {
const Component = Vue.extend(epicItemComponent);
return mountComponent(Component, {
epic,
timeframe,
currentGroupId,
shellWidth,
});
};
describe('EpicItemComponent', () => {
let vm;
beforeEach(() => {
vm = createComponent({});
});
afterEach(() => {
vm.$destroy();
});
describe('template', () => {
it('renders component container element class `epics-list-item`', () => {
expect(vm.$el.classList.contains('epics-list-item')).toBeTruthy();
});
it('renders Epic item details element with class `epic-details-cell`', () => {
expect(vm.$el.querySelector('.epic-details-cell')).not.toBeNull();
});
it('renders Epic timeline element with class `epic-timeline-cell`', () => {
expect(vm.$el.querySelector('.epic-timeline-cell')).not.toBeNull();
});
});
});
spec/javascripts/roadmap/components/epic_item_timeline_spec.js 0 → 100644
View file @ 36a242fc
This diff is collapsed.
spec/javascripts/roadmap/components/epics_list_empty_spec.js 0 → 100644
View file @ 36a242fc
import Vue from 'vue';
import epicsListEmptyComponent from 'ee/roadmap/components/epics_list_empty.vue';
import { mockTimeframe, mockSvgPath } from '../mock_data';
import mountComponent from '../../helpers/vue_mount_component_helper';
const createComponent = () => {
const Component = Vue.extend(epicsListEmptyComponent);
return mountComponent(Component, {
timeframeStart: mockTimeframe[0],
timeframeEnd: mockTimeframe[mockTimeframe.length - 1],
emptyStateIllustrationPath: mockSvgPath,
});
};
describe('EpicsListEmptyComponent', () => {
let vm;
beforeEach(() => {
vm = createComponent();
});
afterEach(() => {
vm.$destroy();
});
describe('computed', () => {
describe('message', () => {
it('returns correct empty state message', () => {
expect(vm.message).toBe('Epics let you manage your portfolio of projects more efficiently and with less effort');
});
});
describe('subMessage', () => {
it('returns correct empty state sub-message', () => {
expect(vm.subMessage).toBe('To view the roadmap, add a planned start or finish date to one of your epics in this group or its subgroups. Only epics in the past 3 months and the next 3 months are shown &ndash; from Nov 1, 2017 to Apr 30, 2018.');
});
});
describe('timeframeRange', () => {
it('returns correct timeframe startDate and endDate in words', () => {
expect(vm.timeframeRange.startDate).toBe('Nov 1, 2017');
expect(vm.timeframeRange.endDate).toBe('Apr 30, 2018');
});
});
});
describe('template', () => {
it('renders empty state illustration in image element with provided `emptyStateIllustrationPath`', () => {
expect(vm.$el.querySelector('.svg-content img').getAttribute('src')).toBe(vm.emptyStateIllustrationPath);
});
});
});
spec/javascripts/roadmap/components/epics_list_section_spec.js 0 → 100644
View file @ 36a242fc
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 { rawEpics, mockTimeframe, mockGroupId, mockShellWidth } from '../mock_data';
import mountComponent from '../../helpers/vue_mount_component_helper';
const store = new RoadmapStore(mockGroupId, mockTimeframe);
store.setEpics(rawEpics);
const mockEpics = store.getEpics();
const createComponent = ({
epics = mockEpics,
timeframe = mockTimeframe,
currentGroupId = mockGroupId,
shellWidth = mockShellWidth,
}) => {
const Component = Vue.extend(epicsListSectionComponent);
return mountComponent(Component, {
epics,
timeframe,
currentGroupId,
shellWidth,
});
};
describe('EpicsListSectionComponent', () => {
let vm;
afterEach(() => {
vm.$destroy();
});
describe('data', () => {
it('returns default data props', () => {
vm = createComponent({});
expect(vm.shellHeight).toBe(0);
expect(vm.emptyRowHeight).toBe(0);
expect(vm.showEmptyRow).toBe(false);
});
});
describe('computed', () => {
beforeEach(() => {
vm = createComponent({});
});
describe('calcShellWidth', () => {
it('returns shellWidth after deducting predefined 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('tbodyStyles', () => {
it('returns computed style string based on shellWidth and shellHeight', () => {
expect(vm.tbodyStyles).toBe('width: 2015px; height: 0px;');
});
});
describe('emptyRowCellStyles', () => {
it('returns computed style string based on emptyRowHeight', () => {
expect(vm.emptyRowCellStyles).toBe('height: 0px;');
});
});
});
describe('methods', () => {
beforeEach(() => {
vm = createComponent({});
});
describe('initMounted', () => {
it('initializes shellHeight based on window.innerHeight and component element position', (done) => {
vm.$nextTick(() => {
expect(vm.shellHeight).toBe(600);
done();
});
});
it('calls initEmptyRow() when there are Epics to render', (done) => {
spyOn(vm, 'initEmptyRow').and.callThrough();
vm.$nextTick(() => {
expect(vm.initEmptyRow).toHaveBeenCalled();
done();
});
});
it('emits `epicsListRendered` via eventHub', (done) => {
spyOn(eventHub, '$emit');
vm.$nextTick(() => {
expect(eventHub.$emit).toHaveBeenCalledWith('epicsListRendered', jasmine.any(Object));
done();
});
});
});
describe('initEmptyRow', () => {
it('sets `emptyRowHeight` and `showEmptyRow` props when shellHeight is greater than approximate height of epics list', (done) => {
vm.$nextTick(() => {
expect(vm.emptyRowHeight).toBe(599); // total size -1px
expect(vm.showEmptyRow).toBe(true);
done();
});
});
it('does not set `emptyRowHeight` and `showEmptyRow` props when shellHeight is less than approximate height of epics list', (done) => {
const initialHeight = window.innerHeight;
window.innerHeight = 0;
const vmMoreEpics = createComponent({
epics: mockEpics.concat(mockEpics).concat(mockEpics),
});
vmMoreEpics.$nextTick(() => {
expect(vmMoreEpics.emptyRowHeight).toBe(0);
expect(vmMoreEpics.showEmptyRow).toBe(false);
window.innerHeight = initialHeight; // reset to prevent any side effects
done();
});
});
});
describe('handleScroll', () => {
it('emits `epicsListScrolled` event via eventHub', () => {
spyOn(eventHub, '$emit');
vm.handleScroll();
expect(eventHub.$emit).toHaveBeenCalledWith('epicsListScrolled', jasmine.any(Number), jasmine.any(Number));
});
});
describe('scrollToTodayIndicator', () => {
it('scrolls table body to put timeline today indicator in focus', () => {
spyOn(vm.$el, 'scrollTo');
vm.scrollToTodayIndicator();
expect(vm.$el.scrollTo).toHaveBeenCalledWith(jasmine.any(Number), 0);
});
});
});
describe('template', () => {
beforeEach(() => {
vm = createComponent({});
});
it('renders component container element with class `epics-list-section`', (done) => {
vm.$nextTick(() => {
expect(vm.$el.classList.contains('epics-list-section')).toBe(true);
done();
});
});
it('renders component container element with `width` and `left` properties applied via style attribute', (done) => {
vm.$nextTick(() => {
expect(vm.$el.getAttribute('style')).toBe('width: 2015px; height: 0px;');
done();
});
});
});
});
spec/javascripts/roadmap/components/roadmap_shell_spec.js 0 → 100644
View file @ 36a242fc
import Vue from 'vue';
import roadmapShellComponent from 'ee/roadmap/components/roadmap_shell.vue';
import { mockEpic, mockTimeframe, mockGroupId } from '../mock_data';
import mountComponent from '../../helpers/vue_mount_component_helper';
const createComponent = ({
epics = [mockEpic],
timeframe = mockTimeframe,
currentGroupId = mockGroupId,
}) => {
const Component = Vue.extend(roadmapShellComponent);
return mountComponent(Component, {
epics,
timeframe,
currentGroupId,
});
};
describe('RoadmapShellComponent', () => {
let vm;
beforeEach(() => {
vm = createComponent({});
});
afterEach(() => {
vm.$destroy();
});
describe('data', () => {
it('returns default data props', () => {
expect(vm.shellWidth).toBe(0);
});
});
describe('tableStyles', () => {
it('returns style string based on shellWidth and Scollbar size', () => {
// Since shellWidth is initialized on component mount
// from parentElement.clientWidth, it will always be Zero
// as parentElement is not available during tests.
// so end result is 0 - scrollbar_size = -15
expect(vm.tableStyles).toBe('width: -15px;');
});
});
describe('template', () => {
it('renders component container element with class `roadmap-shell`', () => {
expect(vm.$el.classList.contains('roadmap-shell')).toBeTruthy();
});
});
});
spec/javascripts/roadmap/components/roadmap_timeline_section_spec.js 0 → 100644
View file @ 36a242fc
import Vue from 'vue';
import roadmapTimelineSectionComponent from 'ee/roadmap/components/roadmap_timeline_section.vue';
import eventHub from 'ee/roadmap/event_hub';
import { mockEpic, mockTimeframe, mockShellWidth } from '../mock_data';
import mountComponent from '../../helpers/vue_mount_component_helper';
const createComponent = ({
epics = [mockEpic],
timeframe = mockTimeframe,
shellWidth = mockShellWidth,
}) => {
const Component = Vue.extend(roadmapTimelineSectionComponent);
return mountComponent(Component, {
epics,
timeframe,
shellWidth,
});
};
describe('RoadmapTimelineSectionComponent', () => {
let vm;
beforeEach(() => {
vm = createComponent({});
});
afterEach(() => {
vm.$destroy();
});
describe('data', () => {
it('returns default data props', () => {
expect(vm.scrolledHeaderClass).toBe('');
});
});
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(0);
expect(vm.scrolledHeaderClass).toBe('');
});
});
});
describe('mounted', () => {
it('binds `epicsListScrolled` event listener via eventHub', () => {
spyOn(eventHub, '$on');
const vmX = createComponent({});
expect(eventHub.$on).toHaveBeenCalledWith('epicsListScrolled', jasmine.any(Function));
vmX.$destroy();
});
});
describe('beforeDestroy', () => {
it('unbinds `epicsListScrolled` event listener via eventHub', () => {
spyOn(eventHub, '$off');
const vmX = createComponent({});
vmX.$destroy();
expect(eventHub.$off).toHaveBeenCalledWith('epicsListScrolled', jasmine.any(Function));
});
});
describe('template', () => {
it('renders component container element with class `roadmap-timeline-section`', () => {
expect(vm.$el.classList.contains('roadmap-timeline-section')).toBe(true);
});
it('renders empty header cell element with class `timeline-header-blank`', () => {
expect(vm.$el.querySelector('.timeline-header-blank')).not.toBeNull();
});
});
});
spec/javascripts/roadmap/components/timeline_header_item_spec.js 0 → 100644
View file @ 36a242fc
import Vue from 'vue';
import timelineHeaderItemComponent from 'ee/roadmap/components/timeline_header_item.vue';
import { TIMELINE_CELL_MIN_WIDTH } from 'ee/roadmap/constants';
import { mockTimeframe, mockShellWidth } from '../mock_data';
import mountComponent from '../../helpers/vue_mount_component_helper';
const mockTimeframeIndex = 0;
const createComponent = ({
timeframeIndex = mockTimeframeIndex,
timeframeItem = mockTimeframe[mockTimeframeIndex],
timeframe = mockTimeframe,
shellWidth = mockShellWidth,
}) => {
const Component = Vue.extend(timelineHeaderItemComponent);
return mountComponent(Component, {
timeframeIndex,
timeframeItem,
timeframe,
shellWidth,
});
};
describe('TimelineHeaderItemComponent', () => {
let vm;
afterEach(() => {
vm.$destroy();
});
describe('data', () => {
it('returns default data props', () => {
vm = createComponent({});
const currentDate = new Date();
expect(vm.currentDate.getDate()).toBe(currentDate.getDate());
expect(vm.currentYear).toBe(currentDate.getFullYear());
expect(vm.currentMonth).toBe(currentDate.getMonth());
});
});
describe('computed', () => {
describe('thStyles', () => {
it('returns style string for th element based on shellWidth, timeframe length and Epic details cell width', () => {
vm = createComponent({});
expect(vm.thStyles).toBe('min-width: 280px;');
});
it('returns style string for th element with minimum permissible width when calculated width is lower defined minimum width', () => {
vm = createComponent({ shellWidth: 1000 });
expect(vm.thStyles).toBe(`min-width: ${TIMELINE_CELL_MIN_WIDTH}px;`);
});
});
describe('timelineHeaderLabel', () => {
it('returns string containing Year and Month for current timeline header item', () => {
vm = createComponent({});
expect(vm.timelineHeaderLabel).toBe('2017 Nov');
});
it('returns string containing only Month for current timeline header item when previous header contained Year', () => {
vm = createComponent({
timeframeIndex: mockTimeframeIndex + 1,
timeframeItem: mockTimeframe[mockTimeframeIndex + 1],
});
expect(vm.timelineHeaderLabel).toBe('Dec');
});
});
describe('timelineHeaderClass', () => {
it('returns empty string when timeframeItem year or month is less than current year or month', () => {
vm = createComponent({});
expect(vm.timelineHeaderClass).toBe('');
});
it('returns string containing `label-dark label-bold` when current year and month is same as timeframeItem year and month', () => {
vm = createComponent({
timeframeItem: new Date(),
});
expect(vm.timelineHeaderClass).toBe('label-dark label-bold');
});
it('returns string containing `label-dark` when current year and month is less than timeframeItem year and month', () => {
const timeframeIndex = 2;
const timeframeItem = new Date(
mockTimeframe[timeframeIndex].getFullYear(),
mockTimeframe[timeframeIndex].getMonth() + 2,
1,
);
vm = createComponent({
timeframeIndex,
timeframeItem,
});
expect(vm.timelineHeaderClass).toBe('label-dark');
});
});
});
describe('template', () => {
beforeEach(() => {
vm = createComponent({});
});
it('renders component container element with class `timeline-header-item`', () => {
expect(vm.$el.classList.contains('timeline-header-item')).toBeTruthy();
});
it('renders item label element class `item-label` and value as `timelineHeaderLabel`', () => {
const itemLabelEl = vm.$el.querySelector('.item-label');
expect(itemLabelEl).not.toBeNull();
expect(itemLabelEl.innerText.trim()).toBe('2017 Nov');
});
});
});
spec/javascripts/roadmap/components/timeline_header_sub_item_spec.js 0 → 100644
View file @ 36a242fc
import Vue from 'vue';
import timelineHeaderSubItemComponent from 'ee/roadmap/components/timeline_header_sub_item.vue';
import { mockTimeframe } from '../mock_data';
import mountComponent from '../../helpers/vue_mount_component_helper';
const createComponent = ({
currentDate = mockTimeframe[0],
timeframeItem = mockTimeframe[0],
}) => {
const Component = Vue.extend(timelineHeaderSubItemComponent);
return mountComponent(Component, {
currentDate,
timeframeItem,
});
};
describe('TimelineHeaderSubItemComponent', () => {
let vm;
afterEach(() => {
vm.$destroy();
});
describe('computed', () => {
describe('headerSubItems', () => {
it('returns array of dates containing Sundays from timeframeItem', () => {
vm = createComponent({});
expect(Array.isArray(vm.headerSubItems)).toBe(true);
});
});
describe('headerSubItemClass', () => {
it('returns string containing `label-dark` when timeframe year and month are greater than current year and month', () => {
vm = createComponent({});
expect(vm.headerSubItemClass).toBe('label-dark');
});
it('returns empty string when timeframe year and month are less than current year and month', () => {
vm = createComponent({
currentDate: new Date(2017, 10, 1), // Nov 1, 2017
timeframeItem: new Date(2018, 0, 1), // Jan 1, 2018
});
expect(vm.headerSubItemClass).toBe('');
});
});
describe('hasToday', () => {
it('returns true when current month and year is same as timeframe month and year', () => {
vm = createComponent({});
expect(vm.hasToday).toBe(true);
});
it('returns false when current month and year is different from timeframe month and year', () => {
vm = createComponent({
currentDate: new Date(2017, 10, 1), // Nov 1, 2017
timeframeItem: new Date(2018, 0, 1), // Jan 1, 2018
});
expect(vm.hasToday).toBe(false);
});
});
});
describe('methods', () => {
describe('getSubItemValueClass', () => {
it('returns empty string when provided subItem is greater than current date', () => {
vm = createComponent({
currentDate: new Date(2018, 0, 1), // Jan 1, 2018
});
const subItem = new Date(2018, 0, 15); // Jan 15, 2018
expect(vm.getSubItemValueClass(subItem)).toBe('');
});
it('returns string containing `value-light` when provided subItem is less than current date', () => {
vm = createComponent({
currentDate: new Date(2018, 0, 15), // Jan 15, 2018
});
const subItem = new Date(2018, 0, 1); // Jan 1, 2018
expect(vm.getSubItemValueClass(subItem)).toBe('value-light');
});
});
});
describe('template', () => {
beforeEach(() => {
vm = createComponent({});
});
it('renders component container element with class `item-sublabel`', () => {
expect(vm.$el.classList.contains('item-sublabel')).toBe(true);
});
it('renders sub item element with class `sublabel-value`', () => {
expect(vm.$el.querySelector('.sublabel-value')).not.toBeNull();
});
});
});
spec/javascripts/roadmap/components/timeline_today_indicator_spec.js 0 → 100644
View file @ 36a242fc
import Vue from 'vue';
import timelineTodayIndicatorComponent from 'ee/roadmap/components/timeline_today_indicator.vue';
import eventHub from 'ee/roadmap/event_hub';
import { mockTimeframe } from '../mock_data';
import mountComponent from '../../helpers/vue_mount_component_helper';
const mockCurrentDate = new Date(
mockTimeframe[0].getFullYear(),
mockTimeframe[0].getMonth(),
15,
);
const createComponent = ({
currentDate = mockCurrentDate,
timeframeItem = mockTimeframe[0],
}) => {
const Component = Vue.extend(timelineTodayIndicatorComponent);
return mountComponent(Component, {
currentDate,
timeframeItem,
});
};
describe('TimelineTodayIndicatorComponent', () => {
let vm;
afterEach(() => {
vm.$destroy();
});
describe('data', () => {
it('returns default data props', () => {
vm = createComponent({});
expect(vm.todayBarStyles).toBe('');
expect(vm.todayBarReady).toBe(false);
});
});
describe('methods', () => {
describe('handleEpicsListRender', () => {
it('sets `todayBarStyles` and `todayBarReady` props based on provided height param, timeframeItem and currentDate props', () => {
vm = createComponent({});
vm.handleEpicsListRender({
height: 100,
});
expect(vm.todayBarStyles).toBe('height: 100px; left: 50%;'); // Current date being 15th
expect(vm.todayBarReady).toBe(true);
});
});
});
describe('mounted', () => {
it('binds `epicsListRendered` event listener via eventHub', () => {
spyOn(eventHub, '$on');
const vmX = createComponent({});
expect(eventHub.$on).toHaveBeenCalledWith('epicsListRendered', jasmine.any(Function));
vmX.$destroy();
});
});
describe('beforeDestroy', () => {
it('unbinds `epicsListRendered` event listener via eventHub', () => {
spyOn(eventHub, '$off');
const vmX = createComponent({});
vmX.$destroy();
expect(eventHub.$off).toHaveBeenCalledWith('epicsListRendered', jasmine.any(Function));
});
});
describe('template', () => {
it('renders component container element with class `today-bar`', (done) => {
vm = createComponent({});
vm.handleEpicsListRender({
height: 100,
});
vm.$nextTick(() => {
expect(vm.$el.classList.contains('today-bar')).toBe(true);
done();
});
});
});
});
spec/javascripts/roadmap/mock_data.js 0 → 100644
View file @ 36a242fc
import { getTimeframeWindow } from '~/lib/utils/datetime_utility';
import { TIMEFRAME_LENGTH } from 'ee/roadmap/constants';
export const mockGroupId = 2;
export const mockShellWidth = 2000;
export const epicsPath = '/groups/gitlab-org/-/epics.json?start_date=2017-11-1&end_date=2018-4-30';
export const mockSvgPath = '/foo/bar.svg';
export const mockTimeframe = getTimeframeWindow(TIMEFRAME_LENGTH, new Date(2018, 1, 1));
export const mockEpic = {
id: 1,
iid: 1,
description: 'Explicabo et soluta minus praesentium minima ab et voluptatem. Quas architecto vero corrupti voluptatibus labore accusantium consectetur. Aliquam aut impedit voluptates illum molestias aut harum. Aut non odio praesentium aut.\n\nQuo asperiores aliquid sed nobis. Omnis sint iste provident numquam. Qui voluptatem tempore aut aut voluptas dolorem qui.\n\nEst est nemo quod est. Odit modi eos natus cum illo aut. Expedita nostrum ea est omnis magnam ut eveniet maxime. Itaque ipsam provident minima et occaecati ut. Dicta est perferendis sequi perspiciatis rerum voluptatum deserunt.',
title: 'Cupiditate exercitationem unde harum reprehenderit maxime eius velit recusandae incidunt quia.',
groupId: 2,
groupName: 'Gitlab Org',
groupFullName: 'Gitlab Org',
startDate: new Date('2017-07-10'),
endDate: new Date('2018-06-02'),
webUrl: '/groups/gitlab-org/-/epics/1',
};
export const rawEpics = [
{
id: 41,
iid: 2,
description: null,
title: 'Another marketing',
group_id: 56,
group_name: 'Marketing',
group_full_name: 'Gitlab Org / Marketing',
start_date: '2017-12-26',
end_date: '2018-03-10',
web_url: '/groups/gitlab-org/marketing/-/epics/2',
},
{
id: 40,
iid: 1,
description: null,
title: 'Marketing epic',
group_id: 56,
group_name: 'Marketing',
group_full_name: 'Gitlab Org / Marketing',
start_date: '2017-12-25',
end_date: '2018-03-09',
web_url: '/groups/gitlab-org/marketing/-/epics/1',
},
{
id: 39,
iid: 12,
description: null,
title: 'Epic with end in first timeframe month',
group_id: 2,
group_name: 'Gitlab Org',
group_full_name: 'Gitlab Org',
start_date: '2017-04-02',
end_date: '2017-11-30',
web_url: '/groups/gitlab-org/-/epics/12',
},
{
id: 38,
iid: 11,
description: null,
title: 'Epic with end date out of range',
group_id: 2,
group_name: 'Gitlab Org',
group_full_name: 'Gitlab Org',
start_date: '2018-01-15',
end_date: '2020-01-03',
web_url: '/groups/gitlab-org/-/epics/11',
},
{
id: 37,
iid: 10,
description: null,
title: 'Epic with timeline in same month',
group_id: 2,
group_name: 'Gitlab Org',
group_full_name: 'Gitlab Org',
start_date: '2018-01-01',
end_date: '2018-01-31',
web_url: '/groups/gitlab-org/-/epics/10',
},
{
id: 35,
iid: 8,
description: null,
title: 'Epic with out of range start & null end',
group_id: 2,
group_name: 'Gitlab Org',
group_full_name: 'Gitlab Org',
start_date: '2017-09-04',
end_date: null,
web_url: '/groups/gitlab-org/-/epics/8',
},
{
id: 33,
iid: 6,
description: null,
title: 'Epic with only start date',
group_id: 2,
group_name: 'Gitlab Org',
group_full_name: 'Gitlab Org',
start_date: '2017-11-27',
end_date: null,
web_url: '/groups/gitlab-org/-/epics/6',
},
{
id: 4,
iid: 4,
description: 'Animi dolorem error ipsam assumenda. Dolor reprehenderit sit soluta molestias id. Explicabo vel dolores numquam earum ut aliquid. Quisquam aliquam a totam laborum quia.\n\nEt voluptatem reiciendis qui cum. Labore ratione delectus minus et voluptates. Dolor voluptatem nisi neque fugiat ut ullam dicta odit. Aut quaerat provident ducimus aut molestiae hic esse.\n\nSuscipit non repellat laudantium quaerat. Voluptatum dolor explicabo vel illo earum. Laborum vero occaecati qui autem cumque dolorem autem. Enim voluptatibus a dolorem et.',
title: 'Et repellendus quo et laboriosam corrupti ex nisi qui.',
group_id: 2,
group_name: 'Gitlab Org',
group_full_name: 'Gitlab Org',
start_date: '2018-01-01',
end_date: '2018-02-02',
web_url: '/groups/gitlab-org/-/epics/4',
},
{
id: 3,
iid: 3,
description: 'Magnam placeat ut esse aut vel. Et sit ab soluta ut eos et et. Nesciunt expedita sit et optio maiores quas facilis. Provident ut aut et nihil. Nesciunt ipsum fuga labore dolor quia.\n\nSit suscipit impedit aut dolore non provident. Nesciunt nemo excepturi voluptatem natus veritatis. Vel ut possimus reiciendis dolorem et. Recusandae voluptatem voluptatum aut iure. Sapiente quia est iste similique quidem quia omnis et.\n\nId aut assumenda beatae iusto est dicta consequatur. Tempora voluptatem pariatur ab velit vero ut reprehenderit fuga. Dolor modi aspernatur eos atque eveniet harum sed voluptatem. Dolore iusto voluptas dolor enim labore dolorum consequatur dolores.',
title: 'Nostrum ut nisi fugiat accusantium qui velit dignissimos.',
group_id: 2,
group_name: 'Gitlab Org',
group_full_name: 'Gitlab Org',
start_date: '2017-12-01',
end_date: '2018-03-26',
web_url: '/groups/gitlab-org/-/epics/3',
},
{
id: 2,
iid: 2,
description: 'Deleniti id facere numquam cum consectetur sint ipsum consequatur. Odit nihil harum consequuntur est nemo adipisci. Incidunt suscipit voluptatem et culpa at voluptatem consequuntur. Rerum aliquam earum quia consequatur ipsam quae ut.\n\nQuod molestias ducimus quia ratione nostrum ut adipisci. Fugiat officiis reiciendis repellendus quia ut ipsa. Voluptatum ut dolor perferendis nostrum. Porro a ducimus sequi qui quos ea. Earum velit architecto necessitatibus at dicta.\n\nModi aut non fugiat autem doloribus nobis ea. Sit quam corrupti blanditiis nihil tempora ratione enim ex. Aliquam quia ut impedit ut velit reprehenderit quae amet. Unde quod at dolorum eligendi in ducimus perspiciatis accusamus.',
title: 'Sit beatae amet quaerat consequatur non repudiandae qui.',
group_id: 2,
group_name: 'Gitlab Org',
group_full_name: 'Gitlab Org',
start_date: '2017-11-26',
end_date: '2018-03-22',
web_url: '/groups/gitlab-org/-/epics/2',
},
{
id: 1,
iid: 1,
description: 'Explicabo et soluta minus praesentium minima ab et voluptatem. Quas architecto vero corrupti voluptatibus labore accusantium consectetur. Aliquam aut impedit voluptates illum molestias aut harum. Aut non odio praesentium aut.\n\nQuo asperiores aliquid sed nobis. Omnis sint iste provident numquam. Qui voluptatem tempore aut aut voluptas dolorem qui.\n\nEst est nemo quod est. Odit modi eos natus cum illo aut. Expedita nostrum ea est omnis magnam ut eveniet maxime. Itaque ipsam provident minima et occaecati ut. Dicta est perferendis sequi perspiciatis rerum voluptatum deserunt.',
title: 'Cupiditate exercitationem unde harum reprehenderit maxime eius velit recusandae incidunt quia.',
group_id: 2,
group_name: 'Gitlab Org',
group_full_name: 'Gitlab Org',
start_date: '2017-07-10',
end_date: '2018-06-02',
web_url: '/groups/gitlab-org/-/epics/1',
},
];
spec/javascripts/roadmap/service/roadmap_service_spec.js 0 → 100644
View file @ 36a242fc
import axios from '~/lib/utils/axios_utils';
import RoadmapService from 'ee/roadmap/service/roadmap_service';
import { epicsPath } from '../mock_data';
describe('RoadmapService', () => {
let service;
beforeEach(() => {
service = new RoadmapService(epicsPath);
});
describe('getEpics', () => {
it('returns axios instance for Epics path', () => {
spyOn(axios, 'get').and.stub();
service.getEpics();
expect(axios.get).toHaveBeenCalledWith(service.epicsPath);
});
});
});
spec/javascripts/roadmap/store/roadmap_store_spec.js 0 → 100644
View file @ 36a242fc
import RoadmapStore from 'ee/roadmap/store/roadmap_store';
import { mockGroupId, mockTimeframe, rawEpics } from '../mock_data';
describe('RoadmapStore', () => {
let store;
beforeEach(() => {
store = new RoadmapStore(mockGroupId, mockTimeframe);
});
describe('constructor', () => {
it('initializes default state', () => {
expect(store.state).toBeDefined();
expect(Array.isArray(store.state.epics)).toBe(true);
expect(store.state.currentGroupId).toBe(mockGroupId);
expect(store.state.timeframe).toBe(mockTimeframe);
expect(store.firstTimeframeItem).toBe(store.state.timeframe[0]);
expect(store.lastTimeframeItem).toBe(store.state.timeframe[store.state.timeframe.length - 1]);
});
});
describe('setEpics', () => {
it('sets Epics list to state', () => {
store.setEpics(rawEpics);
expect(store.getEpics().length).toBe(rawEpics.length);
});
});
describe('getCurrentGroupId', () => {
it('gets currentGroupId from store state', () => {
expect(store.getCurrentGroupId()).toBe(mockGroupId);
});
});
describe('getTimeframe', () => {
it('gets timeframe from store state', () => {
expect(store.getTimeframe()).toBe(mockTimeframe);
});
});
describe('formatEpicDetails', () => {
const rawEpic = rawEpics[0];
it('returns formatted Epic object from raw Epic object', () => {
const epic = RoadmapStore.formatEpicDetails(rawEpic);
expect(epic.id).toBe(rawEpic.id);
expect(epic.name).toBe(rawEpic.name);
expect(epic.groupId).toBe(rawEpic.group_id);
expect(epic.groupName).toBe(rawEpic.group_name);
});
it('returns formatted Epic object with startDateUndefined and proxy date set when start date is not available', () => {
const rawEpicWithoutSD = Object.assign({}, rawEpic, {
start_date: null,
});
const epic = RoadmapStore.formatEpicDetails(
rawEpicWithoutSD,
store.firstTimeframeItem,
store.lastTimeframeItem,
);
expect(epic.id).toBe(rawEpic.id);
expect(epic.startDateUndefined).toBe(true);
expect(epic.startDate.getTime()).toBe(store.firstTimeframeItem.getTime());
});
it('returns formatted Epic object with endDateUndefined and proxy date set when end date is not available', () => {
const rawEpicWithoutED = Object.assign({}, rawEpic, {
end_date: null,
});
const epic = RoadmapStore.formatEpicDetails(
rawEpicWithoutED,
store.firstTimeframeItem,
store.lastTimeframeItem,
);
expect(epic.id).toBe(rawEpic.id);
expect(epic.endDateUndefined).toBe(true);
expect(epic.endDate.getTime()).toBe(store.lastTimeframeItem.getTime());
});
it('returns formatted Epic object with startDateOutOfRange, proxy date and cached original start date set when start date is out of timeframe range', () => {
const rawStartDate = '2017-1-1';
const rawEpicSDOut = Object.assign({}, rawEpic, {
start_date: rawStartDate,
});
const epic = RoadmapStore.formatEpicDetails(
rawEpicSDOut,
store.firstTimeframeItem,
store.lastTimeframeItem,
);
expect(epic.id).toBe(rawEpic.id);
expect(epic.startDateOutOfRange).toBe(true);
expect(epic.startDate.getTime()).toBe(store.firstTimeframeItem.getTime());
expect(epic.originalStartDate.getTime()).toBe(new Date(rawStartDate).getTime());
});
it('returns formatted Epic object with endDateOutOfRange, proxy date and cached original end date set when end date is out of timeframe range', () => {
const rawEndDate = '2019-1-1';
const rawEpicEDOut = Object.assign({}, rawEpic, {
end_date: rawEndDate,
});
const epic = RoadmapStore.formatEpicDetails(
rawEpicEDOut,
store.firstTimeframeItem,
store.lastTimeframeItem,
);
expect(epic.id).toBe(rawEpic.id);
expect(epic.endDateOutOfRange).toBe(true);
expect(epic.endDate.getTime()).toBe(store.lastTimeframeItem.getTime());
expect(epic.originalEndDate.getTime()).toBe(new Date(rawEndDate).getTime());
});
});
});
yarn.lock
View file @ 36a242fc
...@@ -55,8 +55,8 @@ ...@@ -55,8 +55,8 @@
to-fast-properties "^2.0.0" to-fast-properties "^2.0.0"
"@gitlab-org/gitlab-svgs@^1.8.0": "@gitlab-org/gitlab-svgs@^1.8.0":
version "1.8.0" version "1.9.0"
resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-svgs/-/gitlab-svgs-1.8.0.tgz#95d6afa94395860699ddad60a82bd1bbbc2ba89f" resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-svgs/-/gitlab-svgs-1.9.0.tgz#0ca4a901b30dc9b4c5ac839a26535940c0e42fdc"
"@types/jquery@^2.0.40": "@types/jquery@^2.0.40":
version "2.0.48" version "2.0.48"
...@@ -7103,6 +7103,12 @@ supports-color@^4.4.0: ...@@ -7103,6 +7103,12 @@ supports-color@^4.4.0:
dependencies: dependencies:
has-flag "^2.0.0" has-flag "^2.0.0"
supports-color@^5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.1.0.tgz#058a021d1b619f7ddf3980d712ea3590ce7de3d5"
dependencies:
has-flag "^2.0.0"
svg4everybody@2.1.9: svg4everybody@2.1.9:
version "2.1.9" version "2.1.9"
resolved "https://registry.yarnpkg.com/svg4everybody/-/svg4everybody-2.1.9.tgz#5bd9f6defc133859a044646d4743fabc28db7e2d" resolved "https://registry.yarnpkg.com/svg4everybody/-/svg4everybody-2.1.9.tgz#5bd9f6defc133859a044646d4743fabc28db7e2d"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7