Milestone pages cleanup (#35833) · Issues · GitLab.org / GitLab FOSS

Milestone pages cleanup

Clean up design of project milestones list page.
Clean up design of group milestones list page.
Clean up design of dashboard milestones list page.
Promote project milestone to group milestone.

Design

Currently, "Project milestone" and "Group milestone" are plain text after milestone name. In the new design, they are changed to labels in a new column bewtween progress bar and button.

Project milestone list page

e.g. https://gitlab.com/gitlab-org/gitlab-ce/milestones
All the milestones here are project milestones, so display that accordingly.
If no dates entered, display nothing.
If start date entered only, display Start date: Aug 17, 2017
If end date entered only, display End date: Aug 18, 2017
If both start date and end date entered, display Aug 17, 2017 - Aug 18, 2017
If the end date is entered and today is after the end date and the milestone is open, it is a past due milestone.

Open	Closed

Group milestone list page

e.g. https://gitlab.com/groups/gitlab-org/milestones
Some of the milestones are group milestones. Others are project milestones. So display that accordingly.
For project milestones in this page, there are links to the actual project milestone for that project.
For group milestones, date information is currently not being shown. Leave that as is.
For project milestones in this page, you cannot show date information, because these "project milestones" on this page are actually just pointers to other real project milestones.

Open	Close

Dashboard milestone

e.g. https://gitlab.com/dashboard/milestones
This is currently only showing project milestones and not showing any date information. This does not change.
Implement the new visual design.

Promote to group milestone

It has a tooltip with text Promote to group milestone under the icon when it's hovering.

Modal

After clicking Promote to group milestone icon, it has a modal to confirm with users.
Copy:
For the promote icon tooltip, Promote to group milestone
For the modal title, Promote 9.1 to Group Milestone? (Milestone name should be bold)
For the modal body, 9.1 will be available to *all projects* inside GitLab.org. Other project milestones named 9.1 in GitLab.org will be merged. This cannot be undone.
For the banner, 9.1 promoted to a [group milestone] (Milestone name should be bold)

Modal	Banner

- Clean up design of project milestones list page.
- Clean up design of group milestones list page.
- Clean up design of dashboard milestones list page.
- Promote project milestone to group milestone.

## Design
- Currently, "Project milestone" and "Group milestone" are plain text after milestone name. In the new design, they are changed to labels in a new column bewtween progress bar and button.

#### Project milestone list page
- e.g. https://gitlab.com/gitlab-org/gitlab-ce/milestones
- All the milestones here are project milestones, so display that accordingly.
- If no dates entered, display nothing.
- If start date entered only, display `Start date: Aug 17, 2017`
- If end date entered only, display `End date: Aug 18, 2017`
- If both start date and end date entered, display `Aug 17, 2017 - Aug 18, 2017`
- If the end date is entered _and_ today is after the end date _and_ the milestone is open, it is a past due milestone.

| Open | Closed |
| ---- | ------ |
| ![milestone-project](/uploads/990c6be784a9c3ffca76e69cedc611e9/milestone-project.png)![milestone-project](/uploads/fbeb735dd839c7f184e06f85cdc19413/milestone-project.png) | ![milestone-project-closed](/uploads/8d7fbaab70bc3caf92df156798e64f81/milestone-project-closed.png) |

#### Group milestone list page
- e.g. https://gitlab.com/groups/gitlab-org/milestones
- Some of the milestones are group milestones. Others are project milestones. So display that accordingly.
- For project milestones in this page, there are links to the actual project milestone for that project.
- For group milestones, date information is currently _not_ being shown. Leave that as is.
- For project milestones in this page, you _cannot_ show date information, because these "project milestones" on this page are actually just pointers to other real project milestones.

| Open | Close |
| ---- | ----- |
| ![milestone-group](/uploads/d50836498b4f9bc55bc6eca9ef3205ee/milestone-group.png) | ![milestone-group-closed](/uploads/315643388fa4ee3fa94b024f8da404ad/milestone-group-closed.png) |

#### Dashboard milestone
- e.g. https://gitlab.com/dashboard/milestones
- This is currently only showing project milestones and not showing any date information. This does not change.
- Implement the new visual design.

![milestone-dashboard](/uploads/c4dbaee7645751b8d6c1dbb795883fae/milestone-dashboard.png)

#### Promote to group milestone

- It has a tooltip with text `Promote to group milestone` under the icon when it's hovering.

![milestone-tooltip](/uploads/db570e724be7e695d799d2d6910c6b47/milestone-tooltip.png)

##### Modal

- After clicking `Promote to group milestone` icon, it has a modal to confirm with users.
- Copy:
 - For the promote icon tooltip, `Promote to group milestone`
 - For the modal title, `Promote 9.1 to Group Milestone?` (Milestone name should be **bold**)
 - For the modal body, `9.1 will be available to *all projects* inside GitLab.org. Other project milestones named 9.1 in GitLab.org will be merged. This cannot be undone.`
 - For the banner, `9.1 promoted to a [group milestone]` (Milestone name should be **bold**)

| Modal | Banner |
| ----- | ------ |
| ![milestone-project-modal-promote](/uploads/4e1979d2b07e041d0e385a6126ae3631/milestone-project-modal-promote.png) | ![milestone-project-promoted](/uploads/de27e91de4bbea6861b681329dc2f53a/milestone-project-promoted.png) |

Edited Oct 23, 2017 by Victor Wu