Merge branch 'remove-due-date' into 'master'

Added remove due date button

In the sidebar when there is a due date a link to remove due date becomes visible

![remove-due-date](/uploads/126baa61f5ec44ce503ce374d5331ba6/remove-due-date.gif)

Closes #17392

See merge request !4209

4 files changed, 77 insertions, 13 deletions

diff --git a/app/assets/javascripts/due_date_select.js.coffee b/app/assets/javascripts/due_date_select.js.coffee
index a4304786cbb..3cc70185178 100644
--- a/app/assets/javascripts/due_date_select.js.coffee
+++ b/app/assets/javascripts/due_date_select.js.coffee
@@ -11,6 +11,7 @@ class @DueDateSelect
       $block = $dropdown.closest('.block')
       $selectbox = $dropdown.closest('.selectbox')
       $value = $block.find('.value')
+      $valueContent = $block.find('.value-content')
       $sidebarValue = $('.js-due-date-sidebar-value', $block)
 
       fieldName = $dropdown.data('field-name')
@@ -23,11 +24,15 @@ class @DueDateSelect
           $value.removeAttr('style')
       )
 
-      addDueDate = ->
+      addDueDate = (isDropdown) ->
         # Create the post date
         value = $("input[name='#{fieldName}']").val()
-        date = new Date value.replace(new RegExp('-', 'g'), ',')
-        mediumDate = $.datepicker.formatDate 'M d, yy', date
+
+        if value isnt ''
+          date = new Date value.replace(new RegExp('-', 'g'), ',')
+          mediumDate = $.datepicker.formatDate 'M d, yy', date
+        else
+          mediumDate = 'None'
 
         data = {}
         data[abilityName] = {}
@@ -39,23 +44,35 @@ class @DueDateSelect
           data: data
           beforeSend: ->
             $loading.fadeIn()
-            $dropdown.trigger('loading.gl.dropdown')
-            $selectbox.hide()
+            if isDropdown
+              $dropdown.trigger('loading.gl.dropdown')
+              $selectbox.hide()
             $value.removeAttr('style')
 
-            $value.html(mediumDate)
+            $valueContent.html(mediumDate)
             $sidebarValue.html(mediumDate)
+
+            if value isnt ''
+              $('.js-remove-due-date-holder').removeClass 'hidden'
+            else
+              $('.js-remove-due-date-holder').addClass 'hidden'
         ).done (data) ->
-          $dropdown.trigger('loaded.gl.dropdown')
-          $dropdown.dropdown('toggle')
+          if isDropdown
+            $dropdown.trigger('loaded.gl.dropdown')
+            $dropdown.dropdown('toggle')
           $loading.fadeOut()
 
+      $block.on 'click', '.js-remove-due-date', (e) ->
+        e.preventDefault()
+        $("input[name='#{fieldName}']").val ''
+        addDueDate(false)
+
       $datePicker.datepicker(
         dateFormat: 'yy-mm-dd',
         defaultDate: $("input[name='#{fieldName}']").val()
         altField: "input[name='#{fieldName}']"
         onSelect: ->
-          addDueDate()
+          addDueDate(true)
       )
 
     $(document)
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index d06086a581b..787c387379e 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -150,6 +150,10 @@
       font-weight: 600;
     }
 
+    .light {
+      font-weight: normal;
+    }
+
     .sidebar-collapsed-icon {
       display: none;
     }
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index ed1b8a8da2a..c1eec450193 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -87,10 +87,16 @@
             - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
               = link_to 'Edit', '#', class: 'edit-link pull-right'
           .value.bold.hide-collapsed
-            - if issuable.due_date
-              = issuable.due_date.to_s(:medium)
-            - else
-              .light None
+            %span.value-content
+              - if issuable.due_date
+                = issuable.due_date.to_s(:medium)
+              - else
+                None
+            - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
+              %span.light.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
diff --git a/spec/features/issues_spec.rb b/spec/features/issues_spec.rb
index dd114db7e88..749ee01890c 100644
--- a/spec/features/issues_spec.rb
+++ b/spec/features/issues_spec.rb
@@ -489,6 +489,43 @@ describe 'Issues', feature: true do
     end
   end
 
+  describe 'due date' do
+    context 'update due on issue#show', js: true do
+      let(:issue) { create(:issue, project: project, author: @user, assignee: @user) }
+
+      before do
+        visit namespace_project_issue_path(project.namespace, project, issue)
+      end
+
+      it 'should add due date to issue' do
+        page.within '.due_date' do
+          click_link 'Edit'
+
+          page.within '.ui-datepicker-calendar' do
+            first('.ui-state-default').click
+          end
+
+          expect(page).to have_no_content 'None'
+        end
+      end
+
+      it 'should remove due date from issue' do
+        page.within '.due_date' do
+          click_link 'Edit'
+
+          page.within '.ui-datepicker-calendar' do
+            first('.ui-state-default').click
+          end
+
+          expect(page).to have_no_content 'None'
+
+          click_link 'remove due date'
+          expect(page).to have_content 'None'
+        end
+      end
+    end
+  end
+
   def first_issue
     page.all('ul.issues-list > li').first.text
   end