Add column with (non-implemented) action to cancel or reschedule

[MAILPOET-5755]

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

@@ -0,0 +1,18 @@
+import { Button } from '@wordpress/components';
+import { MailPoet } from 'mailpoet';
+
+function TaskButton({ id, type }: { id: number, type: string }): JSX.Element {
+  return (
+    <Button variant="secondary" size="small" isDestructive={type === 'cancel'}>
+      {MailPoet.I18n.t(`${type}Action`)}
+    </Button>
+  );
+}
+
+export function CancelTaskButton({ id }: { id: number }): JSX.Element {
+  return <TaskButton id={id} type="cancel" />;
+}
+
+export function RescheduleTaskButton({ id }: { id: number }): JSX.Element {
+  return <TaskButton id={id} type="reschedule" />;
+}

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

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import { MailPoet } from 'mailpoet';
 import parseDate from 'date-fns/parse';
+import { CancelTaskButton, RescheduleTaskButton } from './tasks-list-actions';
 
 function TasksListDataRow(props) {
   let scheduled = props.task.scheduled_at;
@@ -68,6 +69,16 @@ function TasksListDataRow(props) {
           updated,
         )}`}</abbr>
       </td>
+      {props.show_scheduled_at ? (
+        <td>
+          <CancelTaskButton id={props.task.id} />
+        </td>
+      ) : null}
+      {props.show_cancelled_at ? (
+        <td>
+          <RescheduleTaskButton id={props.task.id} />
+        </td>
+      ) : null}
     </tr>
   );
 }

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

@@ -15,6 +15,9 @@ function TasksListLabelsRow(props) {
         <th className="row-title">{MailPoet.I18n.t('cancelledAt')}</th>
       ) : null}
       <th className="row-title">{MailPoet.I18n.t('updatedAt')}</th>
+      {props.show_scheduled_at || props.show_cancelled_at ? (
+        <th className="row-title">{MailPoet.I18n.t('action')}</th>
+      ) : null}
     </tr>
   );
 }

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

@@ -4,7 +4,7 @@ import { TasksListDataRow } from './tasks-list-data-row.jsx';
 import { TasksListLabelsRow } from './tasks-list-labels-row.jsx';
 
 function TasksList(props) {
-  const colsCount = props.show_scheduled_at || props.show_cancelled_at ? 6 : 5;
+  const colsCount = props.show_scheduled_at || props.show_cancelled_at ? 7 : 5;
 
   return (
     <table className="widefat fixed striped">

mailpoet/views/help.html

@@ -72,6 +72,9 @@
     'scheduledAt': __('Scheduled At'),
     'cancelledAt': __('Cancelled At'),
     'updatedAt': __('Updated At'),
+    'action': _x('Action', 'Table column heading to perform an action.'),
+    'cancelAction': __('Cancel task'),
+    'rescheduleAction': __('Reschedule task'),
     'nothingToShow': __('Nothing to show.'),
     'preview': _x('Preview', 'Text of a link to email preview page.'),
     'actionSchedulerStatus': __('WP Cron / Action Scheduler Status'),