Merge branch '23674-simplify-milestone-summary' into 'master'

Resolve "Simplify milestone summary"

Closes #23674

See merge request !10096

6 files changed, 140 insertions, 48 deletions

diff --git a/app/views/dashboard/milestones/show.html.haml b/app/views/dashboard/milestones/show.html.haml
index 60c84a26420..2129920afd2 100644
--- a/app/views/dashboard/milestones/show.html.haml
+++ b/app/views/dashboard/milestones/show.html.haml
@@ -1,5 +1,5 @@
 - header_title "Milestones", dashboard_milestones_path
 
 = render 'shared/milestones/top', milestone: @milestone
-= render 'shared/milestones/summary', milestone: @milestone
 = render 'shared/milestones/tabs', milestone: @milestone, show_full_project_name: true
+= render 'shared/milestones/sidebar', milestone: @milestone, affix_offset: 51
diff --git a/app/views/groups/milestones/show.html.haml b/app/views/groups/milestones/show.html.haml
index e66a8e0a3b3..8e83b2002b2 100644
--- a/app/views/groups/milestones/show.html.haml
+++ b/app/views/groups/milestones/show.html.haml
@@ -4,5 +4,5 @@
   = page_specific_javascript_bundle_tag('simulate_drag') if Rails.env.test?
 
 = render 'shared/milestones/top', milestone: @milestone, group: @group
-= render 'shared/milestones/summary', milestone: @milestone
 = render 'shared/milestones/tabs', milestone: @milestone, show_project_name: true
+= render 'shared/milestones/sidebar', milestone: @milestone, affix_offset: 102
diff --git a/app/views/projects/milestones/show.html.haml b/app/views/projects/milestones/show.html.haml
index d16f49bd33a..f612b5c7d6b 100644
--- a/app/views/projects/milestones/show.html.haml
+++ b/app/views/projects/milestones/show.html.haml
@@ -36,6 +36,9 @@
         = link_to namespace_project_milestone_path(@project.namespace, @project, @milestone), data: { confirm: 'Are you sure?' }, method: :delete, class: "btn btn-grouped btn-danger" do
           Delete
 
+      %a.btn.btn-default.btn-grouped.pull-right.visible-xs-block.js-sidebar-toggle{ href: "#" }
+        = icon('angle-double-left')
+
   .detail-page-description.milestone-detail{ class: ('hide-bottom-border' unless @milestone.description.present? ) }
     %h2.title
       = markdown_field(@milestone, :title)
@@ -53,5 +56,5 @@
     .alert.alert-success.prepend-top-default
       %span All issues for this milestone are closed. You may close this milestone now.
 
-  = render 'shared/milestones/summary', milestone: @milestone, project: @project
   = render 'shared/milestones/tabs', milestone: @milestone
+  = render 'shared/milestones/sidebar', milestone: @milestone, project: @project, affix_offset: 153
diff --git a/app/views/shared/milestones/_sidebar.html.haml b/app/views/shared/milestones/_sidebar.html.haml
new file mode 100644
index 00000000000..2810f1377b2
--- /dev/null
+++ b/app/views/shared/milestones/_sidebar.html.haml
@@ -0,0 +1,131 @@
+- affix_offset = local_assigns.fetch(:affix_offset, "102")
+- project = local_assigns[:project]
+
+%aside.right-sidebar.js-right-sidebar{ data: { "offset-top" => affix_offset, "spy" => "affix" }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' }
+  .issuable-sidebar.milestone-sidebar
+    .block.milestone-progress.issuable-sidebar-header
+      %a.gutter-toggle.pull-right.js-sidebar-toggle{ role: "button", href: "#", "aria-label" => "Toggle sidebar" }
+        = sidebar_gutter_toggle_icon
+
+      .sidebar-collapsed-icon
+        %span== #{milestone.percent_complete(current_user)}%
+        = milestone_progress_bar(milestone)
+      .title.hide-collapsed
+        %strong.bold== #{milestone.percent_complete(current_user)}%
+        %span.hide-collapsed
+          complete
+      .value.hide-collapsed
+        = milestone_progress_bar(milestone)
+
+    .block.start_date.hide-collapsed
+      .title
+        Start date
+        - if @project && can?(current_user, :admin_milestone, @project)
+          = link_to 'Edit', edit_namespace_project_milestone_path(@project.namespace, @project, @milestone), class: 'edit-link pull-right'
+      .value
+        %span.value-content
+          - if milestone.start_date
+            %span.bold= milestone.start_date.to_s(:medium)
+          - else
+            %span.no-value No start date
+
+    .block.due_date
+      .sidebar-collapsed-icon
+        = icon('calendar', 'aria-hidden': 'true')
+        %span.collapsed-milestone-date
+          - if milestone.start_date && milestone.due_date
+            - if milestone.start_date.year == milestone.due_date.year
+              .milestone-date= milestone.start_date.strftime('%b %-d')
+            - else
+              .milestone-date= milestone.start_date.strftime('%b %-d %Y')
+            .date-separator -
+            .due_date= milestone.due_date.strftime('%b %-d %Y')
+          - elsif milestone.start_date
+            From
+            .milestone-date= milestone.start_date.strftime('%b %-d %Y')
+          - elsif milestone.due_date
+            Until
+            .milestone-date= milestone.due_date.strftime('%b %-d %Y')
+          - else
+            None
+      .title.hide-collapsed
+        Due date
+        - if @project && can?(current_user, :admin_milestone, @project)
+          = link_to 'Edit', edit_namespace_project_milestone_path(@project.namespace, @project, @milestone), class: 'edit-link pull-right'
+      .value.hide-collapsed
+        %span.value-content
+          - if milestone.due_date
+            %span.bold= milestone.due_date.to_s(:medium)
+          - else
+            %span.no-value No due date
+        - remaining_days = milestone_remaining_days(milestone)
+        - if remaining_days.present?
+          = surround '(', ')' do
+            %span.remaining-days= remaining_days
+
+    - if !project || can?(current_user, :read_issue, project)
+      .block
+        .sidebar-collapsed-icon
+          %strong
+            = icon('hashtag', 'aria-hidden': 'true')
+          %span= milestone.issues_visible_to_user(current_user).count
+        .title.hide-collapsed
+          Issues
+          %span.badge= milestone.issues_visible_to_user(current_user).count
+          - if project && can?(current_user, :create_issue, project)
+            = link_to new_namespace_project_issue_path(project.namespace, project, issue: { milestone_id: milestone.id }), class: "pull-right", title: "New Issue" do
+              New issue
+        .value.hide-collapsed.bold
+          %span.milestone-stat
+            = link_to milestones_browse_issuables_path(milestone, type: :issues) do
+              Open:
+              = milestone.issues_visible_to_user(current_user).opened.count
+          %span.milestone-stat
+            = link_to milestones_browse_issuables_path(milestone, type: :issues, state: 'closed') do
+              Closed:
+              = milestone.issues_visible_to_user(current_user).closed.count
+
+    .block
+      .sidebar-collapsed-icon
+        %strong
+          = icon('exclamation', 'aria-hidden': 'true')
+        %span= milestone.issues_visible_to_user(current_user).count
+      .title.hide-collapsed
+        Merge requests
+        %span.badge= milestone.merge_requests.count
+      .value.hide-collapsed.bold
+        - if !project || can?(current_user, :read_merge_request, project)
+          %span.milestone-stat
+            = link_to milestones_browse_issuables_path(milestone, type: :merge_requests) do
+              Open:
+              = milestone.merge_requests.opened.count
+          %span.milestone-stat
+            = link_to milestones_browse_issuables_path(milestone, type: :merge_requests, state: 'closed') do
+              Closed:
+              = milestone.merge_requests.closed.count
+          %span.milestone-stat
+            = link_to milestones_browse_issuables_path(milestone, type: :merge_requests, state: 'merged') do
+              Merged:
+              = milestone.merge_requests.merged.count
+        - else
+          %span.milestone-stat
+            Open:
+            = milestone.merge_requests.opened.count
+          %span.milestone-stat
+            Closed:
+            = milestone.merge_requests.closed.count
+          %span.milestone-stat
+            Merged:
+            = milestone.merge_requests.merged.count
+
+    - milestone_ref = milestone.try(:to_reference, full: true)
+    - if milestone_ref.present?
+      .block.reference
+        .sidebar-collapsed-icon.dont-change-state
+          = clipboard_button(clipboard_text: milestone_ref, title: "Copy reference to clipboard", placement: "left")
+        .cross-project-reference.hide-collapsed
+          %span
+            Reference:
+            %cite{ title: milestone_ref }
+              = milestone_ref
+          = clipboard_button(clipboard_text: milestone_ref, title: "Copy reference to clipboard", placement: "left")
diff --git a/app/views/shared/milestones/_summary.html.haml b/app/views/shared/milestones/_summary.html.haml
deleted file mode 100644
index 78079f633d5..00000000000
--- a/app/views/shared/milestones/_summary.html.haml
+++ /dev/null
@@ -1,45 +0,0 @@
-- project = local_assigns[:project]
-
-.context.prepend-top-default
-  .milestone-summary
-    %h4 Progress
-
-    .milestone-stats-and-buttons
-      .milestone-stats
-        - if !project || can?(current_user, :read_issue, project)
-          %span.milestone-stat.with-drilldown
-            %strong= milestone.issues_visible_to_user(current_user).size
-            issues:
-          %span.milestone-stat
-            %strong= milestone.issues_visible_to_user(current_user).opened.size
-            open and
-            %strong= milestone.issues_visible_to_user(current_user).closed.size
-            closed
-        %span.milestone-stat.with-drilldown
-          %strong= milestone.merge_requests.size
-          merge requests:
-        %span.milestone-stat
-          %strong= milestone.merge_requests.opened.size
-          open and
-          %strong= milestone.merge_requests.merged.size
-          merged
-        %span.milestone-stat
-          %strong== #{milestone.percent_complete(current_user)}%
-          complete
-        - remaining_days = milestone_remaining_days(milestone)
-        - if remaining_days.present?
-          %span.milestone-stat
-            %span.remaining-days= remaining_days
-
-      .milestone-progress-buttons
-        %span.tab-issues-buttons
-          - if project
-            - if can?(current_user, :create_issue, project)
-              = link_to new_namespace_project_issue_path(project.namespace, project, issue: { milestone_id: milestone.id }), class: "btn", title: "New Issue" do
-                New Issue
-            - if can?(current_user, :read_issue, project)
-              = link_to 'Browse Issues', milestones_browse_issuables_path(milestone, type: :issues), class: "btn"
-        %span.tab-merge-requests-buttons.hidden
-          = link_to 'Browse Merge Requests', milestones_browse_issuables_path(milestone, type: :merge_requests), class: "btn"
-
-    = milestone_progress_bar(milestone)
diff --git a/app/views/shared/milestones/_top.html.haml b/app/views/shared/milestones/_top.html.haml
index 497446c1ef3..2562f085338 100644
--- a/app/views/shared/milestones/_top.html.haml
+++ b/app/views/shared/milestones/_top.html.haml
@@ -3,6 +3,9 @@
 - group = local_assigns[:group]
 
 .detail-page-header
+  %a.btn.btn-default.btn-grouped.pull-right.visible-xs-block.js-sidebar-toggle{ href: "#" }
+    = icon('angle-double-left')
+
   .status-box{ class: "status-box-#{milestone.closed? ? 'closed' : 'open'}" }
     - if milestone.closed?
       Closed