## Problem to solve ### Summary When using the roadmap, there is currently no way to know if an epic is on track to be completed by the assigned end date. ##### Situation _When I'm viewing the roadmap..._ _I want to quickly understand the completion progress of each item on the roadmap..._ _Force:_ It's frustrating that I can't understand the overall progress of a given epic item on the roadmap. There are timelines but those are set before something is usually started and aren't adequately maintained while an given epic is in progress. _Force:_ Issues aren't groomed regularly, especially when it comes to issue weights, so I'm hesitant to trust any progress completion data I will see on the roadmap when this is completed because it doesn't necessarily take into account historical velocity of the team implementing it. ##### Expected Outcome _So that I can report progress outwards, provide additional support as necessary to lagging items, and get better visibility into where we said we were going and how we are progressing towards those goals._ ## Intended users Product managers, project managers, directors, executives ## Proposal * Expose weight completed vs. weight outstanding in some form or fashion on a roadmap epic. #### Implementation Notes * The entire roadmap needs to support real time functionality sooner rather than later. Engineering, can you please take this into consideration when thinking through the implementation? * This is a good opportunity to pay down some technical debt and refactor the Roadmap to use GraphQL (https://gitlab.com/gitlab-org/gitlab-ee/issues/12887) #### Design   *See the designs tab for more* #### Design requirements View specs here: https://gitlab-org.gitlab.io/gitlab-design/hosted/alexis/ee%235164-roadmap-progress-spec-previews/ ###### Epic bar * Give epic bars greater hierarchy. They should be indexed above the date grid and "today" indicator. * Epic bar color: * Epics with start and end dates: `#1b69b6` * Epics without start or end date: `#ffffff` with 1px `#1b69b6` border * Progress bar color: * Epics with start and end dates: Filled progress: `#ffffff` , Unfilled progress: `#ffffff` with 30% opacity. * Epics without start or end date: Filled progress: `#1b69b6` , Unfilled progress: `#1b69b6` with 30% opacity. * Icon and text color: * Epics with start and end dates: `#ffffff` * Epics without start or end date: `#1b69b6` * Font * Size: 14 * Weight: Medium ###### Epic bar hover state * Epic bar color: * Epics with start and end dates: `#17599c` * Epics without start or end date: `#ffffff` with 1px `#17599c` border * Progress bar color: * Epics with start and end dates: Filled progress: `#ffffff` , Unfilled progress: `#ffffff` with 30% opacity. * Epics without start or end date: Filled progress: `#17599c` , Unfilled progress: `#17599c` with 30% opacity. * Icon and text color: * Epics with start and end dates: `#ffffff` * Epics without start or end date: `#17599c` ###### Popover * Use our popover component ###### Future I have designs for bars that have less height, but for now we might as well use the real estate we have to make these as readable as possible. This could also allow for us to add in more affordance for things like linking dependencies, dragging to change dates, etc. From the [specs](https://gitlab-org.gitlab.io/gitlab-design/hosted/alexis/ee%235164-roadmap-progress-spec-previews/) : <img src="/uploads/d060b3051b069698674902d9d25cffb2/Roadmap-bar-large-specs.png" height="200"> ## Permissions and Security * As the MVC exposes no configuration options, users with access to view the Roadmap will be able to view progress completion. ## Documentation * Update [Roadmap Documentation](https://docs.gitlab.com/ee/user/group/roadmap/) ## Interested Customers/Prospects * [Interested Customer](https://gitlab.my.salesforce.com/00161000010fYg0) * [Interested Customer](https://gitlab.lightning.force.com/lightning/r/Account/0016100001XuomUAAR/view) * [Interested Customer](https://gitlab.lightning.force.com/lightning/r/Account/0016100001CXGCsAAP/view) * [Interested Prospect](https://gitlab.my.salesforce.com/0064M00000V6EZW) <!-- triage-serverless v3 PLEASE DO NOT REMOVE THIS SECTION --> *This page may contain information related to upcoming products, features and functionality. It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes. Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.* <!-- triage-serverless v3 PLEASE DO NOT REMOVE THIS SECTION -->