Skip to content

View roadmap at group level

  • There is one default roadmap view at the group level.
  • It is in the navigation under Epics. So the nav will be:
    • Epics
      • List
      • Roadmap
  • The route for the Roadmap page should be /groups/GROUP/-/roadmap
  • The roadmap view pulls in all epics in the current group (and in all subgroups) and displays it if qualifies.
  • In this first issue, we do not consider the issues within the epic. We only consider the start date and end date (if they exist) in the epic and that impacts how the epic roadmap bar is displayed.
  • The blue roadmap bar and the epic list item (the whole list item) are clickable. Clicking them navigates to that epic's detail page.
  • Display the dates with the week granularity (the number corresponds to the week's Sunday; Future issue will expand/contract that scale.)
  • You can scroll infinite past and infinite future.
  • The screen loads so that it is showing the right side of the bar that is situated furthest in the future. (Future issue will be smarter on the focus, depending on epic "states". For this issue, we don't have that.)
  • View the vertical line that indicates today.
  • When loading the view, today is always centered
  • We display a time span of 6 months at all times. So, when today is centered, you see 3 months in the past and 3 months in the future.
  • The year appears on the first month from the left that is in view
  • Current month/week are bolded
  • Past months/weeks have a lighter, faded color
  • Epic start and finish dates are shown below the epic title
  • If the epic belongs to a sub-group, the sub-group's name is shown below the epic title
    • The subgroup's name is truncated so that the start/finish dates are always visible
  • A tooltip should be shown for truncated epic titles and subgroup names
  • Long epics list should have a gradient at the bottom of the list, and on the top after scrolling. The behavior of that gradient is the same as implemented in https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/3384.
  • gitlab-svgs!54 (merged) adds the new empty state illustrations to the SVG project
    • The illustrations folder will be reorganized now that we have 2 epic empty state illustrations, so this line will need to be changed to = image_tag('illustrations/epics/list.svg')

Both start date and end date do not exist

  • Do not display the roadmap bar on the roadmap view.

Both start date and end date exist

Only start date exists

  • The epic bar starts at the start date, and then the bar has a gradient that fades away on the right.

Only end date exists

  • The epic bar ends at the end date, and then the bar has a gradient that fades away on the left.

Sorting logic of epics

When displaying the roadmap page, take all the epics in the group. For each epic, we need a date to be sorted on. So for each epic, take the start date, if it exists, otherwise, take the end date. Now simply sort all the epics according to the date you chose. The earliest date epic is at the top of the screen. The latest date epic is at the bottom of the screen.

&01: [Jan 30, Apr 19]
&02: [Mar 18, May 17]
&04: [Mar 27, +INF]
&05: [-INF, Apr 18]

So we take the above and do the sorting. If an epic has a start date, use that for the sort. Otherwise for issues that don't have a start date, use the end date.

So simply: the sorting is: Jan 30, Mar 18, Mar 27, Apr 18, which corresponds to the the order in the mockup itself.

Permissions

Scrolling behaviours

The user will be able to scroll both horizontally and vertically in order to get to see each epic. As each epic has it's own row.. epics which are of a later start or end date will be displayed at the bottom and more to the right in the timeline.

Design

Check all design variations and specs (for implementation notes, spacing, sizes, colors and text copying)

filled

Edited by Pedro Moreira da Silva
OSZAR »