Port of '23674-simplify-milestone-summary' to EE

adds issue weight to the sidebar

app/assets/javascripts/dispatcher.js

@@ -33,8 +33,10 @@
 /* global ProjectShow */
 /* global Labels */
 /* global Shortcuts */
+/* global Sidebar */
 /* global WeightSelect */
 /* global AdminEmailSelect */
+
 import Issue from './issue';
 
 import BindInOut from './behaviors/bind_in_out';
@@ -122,6 +124,7 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'groups:milestones:show':
         case 'dashboard:milestones:show':
           new Milestone();
+          new Sidebar();
           break;
         case 'dashboard:todos:index':
           new gl.Todos();

app/assets/stylesheets/pages/milestone.scss

@@ -52,67 +52,52 @@
   }
 }
 
-.milestone-summary {
-  .milestone-stat {
-    white-space: nowrap;
-    margin-right: 10px;
+.milestone-sidebar {
+  .gutter-toggle {
+    margin-bottom: 10px;
+  }
 
-    &.with-drilldown {
-      margin-right: 2px;
+  .milestone-progress {
+    .title {
+      padding-top: 5px;
     }
-  }
 
-  .remaining-days {
-    color: $orange-600;
+    .progress {
+      height: 6px;
+      margin: 0;
+    }
   }
 
-  .milestone-stats-and-buttons {
-    display: flex;
-    justify-content: flex-start;
-    flex-wrap: wrap;
-
-    @media (min-width: $screen-xs-min) {
-      justify-content: space-between;
-      flex-wrap: nowrap;
-    }
+  .remaining-days strong {
+    font-weight: normal;
   }
 
-  .milestone-progress-buttons {
-    order: 1;
-    margin-top: 10px;
+  .milestone-stat {
+    float: left;
+    font-weight: bold;
+    margin-right: 14px;
+  }
 
-    @media (min-width: $screen-xs-min) {
-      order: 2;
-      margin-top: 0;
-      flex-shrink: 0;
-    }
+  .milestone-stat:last-child {
+    margin-right: 0;
+  }
 
-    .btn {
-      float: left;
-      margin-right: $btn-side-margin;
+  .milestone-progress {
+    .sidebar-collapsed-icon {
+      clear: both;
+      padding: 15px 5px 5px;
 
-      &:last-child {
-        margin-right: 0;
+      .progress {
+        margin: 5px 0;
       }
     }
   }
 
-  .milestone-stats {
-    order: 2;
-    width: 100%;
-    padding: 7px 0;
-    flex-shrink: 1;
-
-    @media (min-width: $screen-xs-min) {
-      // when displayed on one line stats go first, buttons second
-      order: 1;
+  .right-sidebar-collapsed & {
+    .reference {
+      border-top: 1px solid $border-gray-normal;
     }
   }
-
-  .progress {
-    width: 100%;
-    margin: 15px 0;
-  }
 }
 
 .issues-sortable-list,

app/helpers/milestones_helper.rb

@@ -19,8 +19,8 @@ module MilestonesHelper
     end
   end
 
-  def milestones_browse_issuables_path(milestone, type:)
-    opts = { milestone_title: milestone.title }
+  def milestones_browse_issuables_path(milestone, state: nil, type:)
+    opts = { milestone_title: milestone.title, state: state }
 
     if @project
       polymorphic_path([@project.namespace.becomes(Namespace), @project, type], opts)
@@ -89,10 +89,12 @@ module MilestonesHelper
       content = time_ago.gsub(/\d+/) { |match| "<strong>#{match}</strong>" }
       content.slice!("about ")
       content << " remaining"
+      content.html_safe
     elsif milestone.start_date && milestone.start_date.past?
       days    = milestone.elapsed_days
       content = content_tag(:strong, days)
       content << " #{'day'.pluralize(days)} elapsed"
+      content.html_safe
     end
   end
 

app/helpers/nav_helper.rb

@@ -6,7 +6,8 @@ module NavHelper
         current_path?('merge_requests#builds') ||
         current_path?('merge_requests#conflicts') ||
         current_path?('merge_requests#pipelines') ||
-        current_path?('issues#show')
+        current_path?('issues#show') ||
+        current_path?('milestones#show')
       if cookies[:collapsed_gutter] == 'true'
         "page-gutter right-sidebar-collapsed"
       else

app/views/dashboard/milestones/show.html.haml

 - 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

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

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

app/views/shared/milestones/_sidebar.html.haml

+- 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== #{milestone.percent_complete(current_user)}%
+        %span.hide-collapsed
+          complete
+      .value.hide-collapsed
+        = milestone_progress_bar(milestone)
+
+    - if project
+      .block.due_date
+        .sidebar-collapsed-icon
+          = icon('calendar', 'aria-hidden': 'true')
+          %span.js-due-date-sidebar-value
+            = milestone.due_date.try(:to_s, :medium) || 'None'
+        .title.hide-collapsed
+          Due date
+          - if 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).size
+        .title.hide-collapsed
+          Issues
+          %span.badge= milestone.issues_visible_to_user(current_user).size
+          - 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
+          - if project && can?(current_user, :read_issue, project)
+            %span.milestone-stat
+              = link_to milestones_browse_issuables_path(milestone, type: :issues) do
+                Open:
+                = milestone.issues_visible_to_user(current_user).opened.size
+            %span.milestone-stat
+              = link_to milestones_browse_issuables_path(milestone, type: :issues, state: 'closed') do
+                Closed:
+                = milestone.issues_visible_to_user(current_user).closed.size
+          - else
+            %span.milestone-stat
+              Open:
+              = milestone.issues_visible_to_user(current_user).opened.size
+            %span.milestone-stat
+              Closed:
+              = milestone.issues_visible_to_user(current_user).closed.size
+
+    - total_weight = milestone.issues_visible_to_user(current_user).sum(:weight)
+    .block.weight
+      .sidebar-collapsed-icon
+        = icon('balance-scale')
+        %span
+          - unless total_weight.zero?
+            = total_weight
+          - else
+            None
+      .title.hide-collapsed
+        Total issue weight
+      .value.hide-collapsed
+        - unless total_weight.zero?
+          %strong= total_weight
+        - else
+          .no-value None
+
+    .block
+      .sidebar-collapsed-icon
+        %strong
+          = icon('exclamation', 'aria-hidden': 'true')
+        %span= milestone.issues_visible_to_user(current_user).size
+      .title.hide-collapsed
+        Merge requests
+        %span.badge= milestone.merge_requests.size
+      .value.hide-collapsed
+        - 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.size
+          %span.milestone-stat
+            = link_to milestones_browse_issuables_path(milestone, type: :merge_requests, state: 'closed') do
+              Closed:
+              = milestone.merge_requests.closed.size
+          %span.milestone-stat
+            = link_to milestones_browse_issuables_path(milestone, type: :merge_requests, state: 'merged') do
+              Merged:
+              = milestone.merge_requests.merged.size
+        - else
+          %span.milestone-stat
+            Open:
+            = milestone.merge_requests.opened.size
+          %span.milestone-stat
+            Closed:
+            = milestone.merge_requests.closed.size
+          %span.milestone-stat
+            Merged:
+            = milestone.merge_requests.merged.size
+
+    - 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")

app/views/shared/milestones/_summary.html.haml

-- 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
-        - total_weight = milestone.issues_visible_to_user(current_user).sum(:weight)
-        - unless total_weight.zero?
-          %span.milestone-stat
-            Total weight:
-            %strong= total_weight
-
-      .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)

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

changelogs/unreleased/23674-simplify-milestone-summary.yml

+---
+title: Move milestone summary content into the sidebar
+merge_request: 10096
+author: