Add Submit Button to Review Due Date Changes (#22555)

* Changed due_date_update to update on blur rather than on change

* Add visual indicator (button) of status of date change

* prettier

* removed extra </li>

* moved inline style to class

* Submit on click rather than onblur

src/olympia/reviewers/templates/reviewers/review.html

@@ -299,11 +299,15 @@
     <ul class="admin_only">
       <li {% if not version.due_date %}class="hidden"{% endif %}>
         <label for="due_date_update">Change latest version review due date</label>
-        <input type="datetime-local" id="due_date_update"
+        <div class="datetime-wrapper">
+          <input type="datetime-local" id="due_date_update"
                 {% if version.due_date %} value="{{ version.due_date.isoformat(timespec='seconds') }}" {% endif %}
                 data-api-data="{{ version.pk }}"
                 data-api-url="{{ drf_url('reviewers-addon-due-date', addon.pk) }}"
-        />
+                autocomplete="off"
+          />
+          <button id="submit_due_date_update" class="disabled" type="button">OK</button>
+        </div>
       </li>
       {% if addon.is_deleted %}
         <li {% if not addon.is_guid_denied %}class="hidden"{% endif %}>

static/css/zamboni/reviewers.less

@@ -1379,6 +1379,11 @@ table.abuse_reports {
     }
 }
 
+.datetime-wrapper {
+    display: flex;
+    gap: 0.5em;
+}
+
 #addon-queue-filter-form {
     margin: 1em;
     padding: 1em;

static/js/zamboni/reviewers.js

@@ -281,9 +281,18 @@ function initExtraReviewActions() {
     }),
   );
 
-  $('#due_date_update').change(
+  $('#due_date_update').on(
+    'change',
     _pd(function () {
-      var $input = $(this).prop('disabled', true); // Prevent double-send.
+      $('#submit_due_date_update').removeClass('disabled');
+    }),
+  );
+
+  $('#submit_due_date_update').on(
+    'click',
+    _pd(function () {
+      $(this).addClass('disabled');
+      var $input = $('#due_date_update').prop('disabled', true); // Prevent double-send.
       var apiUrl = $input.data('api-url');
       var data = { due_date: $input.val(), version: $input.data('api-data') };
       callReviewersAPI(apiUrl, 'post', data, function (response) {