Added remove due date button

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

Closes #17392

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')
@@ -26,8 +27,12 @@ class @DueDateSelect
       addDueDate = ->
         # 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] = {}
@@ -43,13 +48,23 @@ class @DueDateSelect
             $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')
           $loading.fadeOut()
 
+      $block.on 'click', '.js-remove-due-date', (e) ->
+        e.preventDefault()
+        $("input[name='#{fieldName}']").val ''
+        addDueDate()
+
       $datePicker.datepicker(
         dateFormat: 'yy-mm-dd',
         defaultDate: $("input[name='#{fieldName}']").val()

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
-            - 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