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

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()
+
+        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()
+            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) ->
+          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)

app/assets/stylesheets/pages/issuable.scss

@@ -150,6 +150,10 @@
       font-weight: 600;
     }
 
+    .light {
+      font-weight: normal;
+    }
+
     .sidebar-collapsed-icon {
       display: none;
     }

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
+            %span.value-content
               - if issuable.due_date
                 = issuable.due_date.to_s(:medium)
               - else
-              .light None
+                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

spec/features/issues_spec.rb

@@ -431,6 +431,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