Add option to restart jobs upon comment submission

- Renamed `addComments` to `bulkJobsAction` to handle both commenting and
restarting jobs.
- Added button-specific actions using `form.clickedButton`.
- Updated `fetchWithCSRF` logic to dynamically determine request URLs based on
the button clicked.
- Introduced separate success and error messages for restarting and commenting
actions.
- Updated HTML to include "Restart and Comment" and "Comment" buttons with
individual data URLs.
- Adjusted modal to allow submission of comments or restarts through the
correct action handlers.

These updates enhance the user experience by allowing users to either comment
on jobs, or perform restart with a comment simultaneously from the
overview page. Comments always add to the original job of the overview
page. By integrating this functionality we provide a workflow for
users managing multiple jobs on the overview page.

https://progress.opensuse.org/issues/166559

Signed-off-by: Ioannis Bonatakis <[email protected]>

assets/javascripts/overview.js

@@ -287,11 +287,13 @@ function showAddCommentsDialog() {
   modal.show();
 }
 
-function addComments(form) {
+function bulkJobsAction(form) {
   const text = form.elements.text.value;
   if (!text.length) {
     return window.alert("The comment text mustn't be empty.");
   }
+  const actionBtn = form.clickedButton.value;
+  let reqUrl = form.clickedButton.dataset.url || form.action;
   const progressIndication = document.getElementById('add-comments-progress-indication');
   const controls = document.getElementById('add-comments-controls');
   progressIndication.style.display = 'flex';
@@ -301,17 +303,36 @@ function addComments(form) {
     controls.style.display = 'inline';
     window.addCommentsModal.hide();
   };
-  fetchWithCSRF(form.action, {method: 'POST', body: new FormData(form)})
+
+  let infoTxt =
+    'The comments have been created. <a href="javascript: location.reload()">Reload</a> the page to show changes.';
+  let errTxt = 'The comments could not be added:';
+  if (actionBtn == 'restartAndCommentJobs') {
+    infoTxt = '<a href="javascript: location.reload()">Reload</a> the page to show restarted Jobs.';
+    errTx = 'Failed to restart jobs: ';
+  }
+  fetchWithCSRF(reqUrl, {method: 'POST', body: new FormData(form)})
     .then(response => {
       if (!response.ok) throw `Server returned ${response.status}: ${response.statusText}`;
-      addFlash(
-        'info',
-        'The comments have been created. <a href="javascript: location.reload()">Reload</a> the page to show changes.'
-      );
+      addFlash('info', infoTxt);
       done();
     })
     .catch(error => {
-      addFlash('danger', `The comments could not be added: ${error}`);
+      addFlash('danger', `${errTxt} ${error}`);
       done();
     });
+  if (actionBtn == 'restartAndCommentJobs') {
+    reqtUrl = document.getElementById('CommentJobsBtn').dataset.url;
+    console.log(reqUrl);
+    fetchWithCSRF(reqUrl, {method: 'POST', body: new FormData(form)})
+      .then(response => {
+        if (!response.ok) throw `Server returned ${response.status}: ${response.statusText}`;
+        addFlash('info', 'The comments have been created on the previous jobs');
+        done();
+      })
+      .catch(error => {
+        addFlash('danger', `The comments could not be added: ${error}`);
+        done();
+      });
+  }
 }

t/ui/10-tests_overview.t

@@ -544,17 +544,17 @@ subtest 'filter by result and state' => sub {
 };
 
 subtest 'add comments' => sub {
-    my @buttons = $driver->find_elements('button[title="Add comments"]');
+    my @buttons = $driver->find_elements('button[title="Add comments or Restart Jobs"]');
     is @buttons, 0, 'button for adding comments not present if not logged-in';
 
     $driver->find_element_by_link_text('Login')->click;
     $driver->get('/tests/overview?state=done&result=failed');
     disable_bootstrap_animations;
-    $driver->find_element('button[title="Add comments"]')->click;
+    $driver->find_element('button[title="Add comments or Restart Jobs"]')->click;
     my $comment_text = 'comment via add-comments';
-    my $submit_button = $driver->find_element('#add-comments-controls button[type="submit"]');
-    $driver->find_element_by_id('text')->send_keys($comment_text);
-    is $submit_button->get_text, 'Submit comment on all 2 jobs', 'submit button displayed with number of jobs';
+    my $submit_button = $driver->find_element('#add-comments-controls button[id="CommentJobsBtn"]');
+    $driver->find_element_by_id('text')->send_keys($comment_text);    #sleep(300);
+    is $submit_button->get_text, 'Comment on all 2 jobs', 'submit button displayed with number of jobs';
     $submit_button->click;
     wait_for_ajax msg => 'comments created';
     like $driver->find_element_by_id('flash-messages')->get_text, qr/The comments have been created. Reload/,

templates/webapi/test/overview.html.ep

@@ -42,7 +42,8 @@
         <div class="card-body">
             % my $allow_commenting = @$job_ids && current_user;
             % if ($allow_commenting) {
-            <button type="button" class="btn btn-secondary btn-circle btn-sm trigger-edit-button" onclick="showAddCommentsDialog()" title="Add comments">
+            <button type="button" class="btn btn-secondary btn-circle btn-sm
+            trigger-edit-button" onclick="showAddCommentsDialog()" title="Add comments or Restart Jobs">
                 <i class="fa fa-comment" aria-hidden="true"></i>
             </button>
             % }
@@ -217,7 +218,7 @@
 <div class="modal fade" id="add-comments-modal">
     <div class="modal-dialog modal-lg">
         <div class="modal-content">
-            <form action="<%= url_for('apiv1_post_comments')->query(job_id => $job_ids) %>" method="post" onsubmit="addComments(this); return false;">
+            <form action="<%= url_for('apiv1_restart_jobs')->query(jobs => $job_ids) %>" method="post" onsubmit="bulkJobsAction(this); return false;">
                 <div class="modal-header">
                     <h4 class="modal-title">Add comment on all currently shown jobs</h4>
                     <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
@@ -231,10 +232,17 @@
                         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                     </div>
                     <div id="add-comments-controls">
-                        <button type="submit" class="btn btn-danger">
-                            <i class="fa fa-comment"></i> Submit comment on all <%= scalar @$job_ids %> jobs
-                        </button>
-                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Discard</button>
+                      <button type="submit" name="bulkAction" class="btn btn-warning"
+                              value="restartAndCommentJobs"
+                               id="restartAndCommentJobsBtn" onclick="form.clickedButton = this;">
+                        <i class="fa fa-play-circle-o"></i> Restart and Comment <%= scalar @$job_ids %> jobs
+                      </button>
+                      <button type="submit" name="bulkAction" class="btn btn-info"
+                              value="commentJobs" id="CommentJobsBtn"
+                              data-url="<%= url_for('apiv1_post_comments')->query(job_id=> $job_ids) %>" onclick="form.clickedButton = this;">
+                        <i class="fa fa-comment"></i> Comment on all <%= scalar @$job_ids %> jobs
+                      </button>
+                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Discard</button>
                     </div>
                 </div>
             </form>