Show "Cancel task" button on running tasks

[MAILPOET-5755]

mailpoet/assets/js/src/help/queue-status.tsx

@@ -85,23 +85,25 @@ function QueueStatus({ statusData }: Props): JSX.Element {
       />
       <h5>{MailPoet.I18n.t('scheduledTasks')}</h5>
       <TasksList
-        showScheduledAt
+        type="scheduled"
         tasks={status.latestTasks.filter((task) => task.status === 'scheduled')}
       />
 
       <h5>{MailPoet.I18n.t('cancelledTasks')}</h5>
       <TasksList
-        showCancelledAt
+        type="cancelled"
         tasks={status.latestTasks.filter((task) => task.status === 'cancelled')}
       />
 
       <h5>{MailPoet.I18n.t('runningTasks')}</h5>
       <TasksList
+        type="running"
         tasks={status.latestTasks.filter((task) => task.status === null)}
       />
 
       <h5>{MailPoet.I18n.t('completedTasks')}</h5>
       <TasksList
+        type="completed"
         tasks={status.latestTasks.filter((task) => task.status === 'completed')}
       />
     </>

mailpoet/assets/js/src/help/tasks-list/tasks-list-data-row.tsx

@@ -3,8 +3,7 @@ import parseDate from 'date-fns/parse';
 import { CancelTaskButton, RescheduleTaskButton } from './tasks-list-actions';
 
 export type Props = {
-  showScheduledAt: boolean;
-  showCancelledAt: boolean;
+  type: string;
   task: {
     id: number;
     type: string;
@@ -23,11 +22,12 @@ export type Props = {
   };
 };
 
-function TasksListDataRow({
-  showScheduledAt = false,
-  showCancelledAt = false,
-  task,
-}: Props): JSX.Element {
+function TasksListDataRow({ type, task }: Props): JSX.Element {
+  const showScheduledAt = type === 'scheduled';
+  const showCancelledAt = type === 'cancelled';
+  const canCancelTask = type === 'scheduled' || type === 'running';
+  const canRescheduleTask = type === 'cancelled';
+
   let scheduled: Date;
   if (showScheduledAt) {
     scheduled = parseDate(task.scheduledAt, 'yyyy-MM-dd HH:mm:ss', new Date());
@@ -102,12 +102,12 @@ function TasksListDataRow({
           updated,
         )}`}</abbr>
       </td>
-      {showScheduledAt ? (
+      {canCancelTask ? (
         <td>
           <CancelTaskButton task={task} />
         </td>
       ) : null}
-      {showCancelledAt ? (
+      {canRescheduleTask ? (
         <td>
           <RescheduleTaskButton task={task} />
         </td>

mailpoet/assets/js/src/help/tasks-list/tasks-list-labels-row.tsx

@@ -1,28 +1,25 @@
 import { MailPoet } from 'mailpoet';
 
 type Props = {
-  showScheduledAt?: boolean;
-  showCancelledAt?: boolean;
+  type: string;
 };
 
-function TasksListLabelsRow({
-  showScheduledAt = false,
-  showCancelledAt = false,
-}: Props): JSX.Element {
+function TasksListLabelsRow({ type }: Props): JSX.Element {
+  const hasAction = ['scheduled', 'running', 'cancelled'].includes(type);
   return (
     <tr>
       <th className="row-title">Id</th>
       <th className="row-title">{MailPoet.I18n.t('email')}</th>
       <th className="row-title">{MailPoet.I18n.t('subscriber')}</th>
       <th className="row-title">{MailPoet.I18n.t('priority')}</th>
-      {showScheduledAt ? (
+      {type === 'scheduled' ? (
         <th className="row-title">{MailPoet.I18n.t('scheduledAt')}</th>
       ) : null}
-      {showCancelledAt ? (
+      {type === 'cancelled' ? (
         <th className="row-title">{MailPoet.I18n.t('cancelledAt')}</th>
       ) : null}
       <th className="row-title">{MailPoet.I18n.t('updatedAt')}</th>
-      {showScheduledAt || showCancelledAt ? (
+      {hasAction ? (
         <th className="row-title">{MailPoet.I18n.t('action')}</th>
       ) : null}
     </tr>

mailpoet/assets/js/src/help/tasks-list/tasks-list.tsx

@@ -6,34 +6,27 @@ import {
 import { TasksListLabelsRow } from './tasks-list-labels-row';
 
 type Props = {
-  showScheduledAt?: boolean;
-  showCancelledAt?: boolean;
   tasks: TasksListLabelsRowProps['task'][];
+  type: string;
 };
-function TasksList({
-  showScheduledAt = false,
-  showCancelledAt = false,
-  tasks,
-}: Props): JSX.Element {
-  const colsCount = showScheduledAt || showCancelledAt ? 7 : 5;
+function TasksList({ tasks, type }: Props): JSX.Element {
+  let colsCount = 5;
+  if (type === 'running') {
+    colsCount += 1;
+  }
+  if (type === 'scheduled' || type === 'cancelled') {
+    colsCount += 2;
+  }
 
   return (
     <table className="widefat fixed striped">
       <thead>
-        <TasksListLabelsRow
-          showScheduledAt={showScheduledAt}
-          showCancelledAt={showCancelledAt}
-        />
+        <TasksListLabelsRow type={type} />
       </thead>
       <tbody>
         {tasks.length ? (
           tasks.map((task) => (
-            <TasksListDataRow
-              key={task.id}
-              task={task}
-              showScheduledAt={showScheduledAt}
-              showCancelledAt={showCancelledAt}
-            />
+            <TasksListDataRow key={task.id} task={task} type={type} />
           ))
         ) : (
           <tr className="mailpoet-listing-no-items">
@@ -42,10 +35,7 @@ function TasksList({
         )}
       </tbody>
       <tfoot>
-        <TasksListLabelsRow
-          showScheduledAt={showScheduledAt}
-          showCancelledAt={showCancelledAt}
-        />
+        <TasksListLabelsRow type={type} />
       </tfoot>
     </table>
   );