Re-add structure for sidebar-app to sidebar.html.async-sidebar-updates

1 files changed, 14 insertions, 77 deletions

diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index 4235b4dd6a3..8ec255e0d1c 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -1,6 +1,9 @@
 - todo = issuable_todo(issuable)
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_tag('issuable/issuable_bundle.js')
+- can_edit_issuable = can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
 %aside.right-sidebar{ class: sidebar_gutter_collapsed_class }
-  .issuable-sidebar
+  #issuable-sidebar-app.issuable-sidebar{ 'data-issuable' => issuable.to_json, 'data-admin' => can_edit_issuable.to_s }
     - can_edit_issuable = can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
     .block.issuable-sidebar-header
       - if current_user
@@ -48,65 +51,10 @@
         .selectbox.hide-collapsed
           = f.hidden_field 'assignee_id', value: issuable.assignee_id, id: 'issue_assignee_id'
           = dropdown_tag('Select assignee', options: { toggle_class: 'js-user-search js-author-search', title: 'Assign to', filter: true, dropdown_class: 'dropdown-menu-user dropdown-menu-selectable dropdown-menu-author', placeholder: 'Search users', data: { first_user: (current_user.username if current_user), current_user: true, project_id: (@project.id if @project), author_id: issuable.author_id, field_name: "#{issuable.to_ability_name}[assignee_id]", issue_update: issuable_json_path(issuable), ability_name: issuable.to_ability_name, null_user: true } })
-
-      .block.milestone
-        .sidebar-collapsed-icon
-          = icon('clock-o')
-          %span
-            - if issuable.milestone
-              %span.has-tooltip{title: milestone_remaining_days(issuable.milestone), data: {container: 'body', html: 1, placement: 'left'}}
-                = issuable.milestone.title
-            - else
-              None
-        .title.hide-collapsed
-          Milestone
-          = icon('spinner spin', class: 'block-loading')
-          - if can_edit_issuable
-            = link_to 'Edit', '#', class: 'edit-link pull-right'
-        .value.hide-collapsed
-          - if issuable.milestone
-            = link_to issuable.milestone.title, namespace_project_milestone_path(@project.namespace, @project, issuable.milestone), class: "bold has-tooltip", title: milestone_remaining_days(issuable.milestone), data: { container: "body", html: 1 }
-          - else
-            %span.no-value None
-
-        .selectbox.hide-collapsed
-          = f.hidden_field 'milestone_id', value: issuable.milestone_id, id: nil
-          = dropdown_tag('Milestone', options: { title: 'Assign milestone', toggle_class: 'js-milestone-select js-extra-options', filter: true, dropdown_class: 'dropdown-menu-selectable', placeholder: 'Search milestones', data: { show_no: true, field_name: "#{issuable.to_ability_name}[milestone_id]", project_id: @project.id, issuable_id: issuable.id, milestones: namespace_project_milestones_path(@project.namespace, @project, :json), ability_name: issuable.to_ability_name, issue_update: issuable_json_path(issuable), use_id: true }})
-
+      
+      %issuable-milestone-select{':milestone' => 'issuable.milestone', ':admin' => 'admin'}
       - if issuable.has_attribute?(:due_date)
-        .block.due_date
-          .sidebar-collapsed-icon
-            = icon('calendar')
-            %span.js-due-date-sidebar-value
-              = issuable.due_date.try(:to_s, :medium) || 'None'
-          .title.hide-collapsed
-            Due date
-            = icon('spinner spin', class: 'block-loading')
-            - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
-              = link_to 'Edit', '#', class: 'edit-link pull-right'
-          .value.hide-collapsed
-            %span.value-content
-              - if issuable.due_date
-                %span.bold= issuable.due_date.to_s(:medium)
-              - else
-                %span.no-value No due date
-            - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
-              %span.no-value.js-remove-due-date-holder{ class: ("hidden" if issuable.due_date.nil?) }
-                \-
-                %a.js-remove-due-date{ href: "#", role: "button" }
-                  remove due date
-          - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
-            .selectbox.hide-collapsed
-              = f.hidden_field :due_date, value: issuable.due_date
-              .dropdown
-                %button.dropdown-menu-toggle.js-due-date-select{ type: 'button', data: { toggle: 'dropdown', field_name: "#{issuable.to_ability_name}[due_date]", ability_name: issuable.to_ability_name, issue_update: issuable_json_path(issuable) } }
-                  %span.dropdown-toggle-text Due date
-                  = icon('chevron-down')
-                .dropdown-menu.dropdown-menu-due-date
-                  = dropdown_title('Due date')
-                  = dropdown_content do
-                    .js-due-date-calendar
-
+        %issuable-due-date-select{':due_date' => 'issuable.due_date', ':admin' => 'admin'}
       - if @labels && @labels.any?
         - selected_labels = issuable.labels
         .block.labels
@@ -166,21 +114,10 @@
               = project_ref
           = clipboard_button(clipboard_text: project_ref)
 
-    :javascript
-      gl.IssuableResource = new gl.SubbableResource('#{issuable_json_path(issuable)}');
-      function fetcher() {
-        return gl.IssuableResource.get.call(gl.IssuableResource, { type: 'GET', url: gl.IssuableResource.endpoint });
-      }
-      new gl.SmartInterval({
-        startingInterval: 5000,
-        maxInterval: 5000,
-        increaseByFactorOf: 2,
-        lazyStart: false,
-        callback: fetcher 
-      });
-      new MilestoneSelect('{"namespace":"#{@project.namespace.path}","path":"#{@project.path}"}');
-      new LabelsSelect();
-      new IssuableContext('#{escape_javascript(current_user.to_json(only: [:username, :id, :name]))}');
-      new Subscription('.subscription')
-      new gl.DueDateSelectors();
-      sidebar = new Sidebar();
+  :javascript
+    new MilestoneSelect('{"namespace":"#{@project.namespace.path}","path":"#{@project.path}"}');
+    new LabelsSelect();
+    new IssuableContext('#{escape_javascript(current_user.to_json(only: [:username, :id, :name]))}');
+    new Subscription('.subscription')
+    new gl.DueDateSelectors();
+    sidebar = new Sidebar();