Update TaskButton component to accept the whole task, not just ID

[MAILPOET-5755]

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

@@ -1,7 +1,29 @@
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-function TaskButton({ id, type }: { id: number, type: string }): JSX.Element {
+type TasksListDataRowProps = {
+  id: number;
+  type: string;
+  priority: number;
+  updatedAt: string;
+  scheduledAt?: string;
+  cancelledAt?: string;
+  status?: string;
+  newsletter: {
+    newsletterId?: number;
+    queueId?: number;
+    previewUrl?: string;
+    subject?: string;
+  };
+  subscriberEmail?: string;
+};
+
+type Props = {
+  task: TasksListDataRowProps;
+  type: 'cancel' | 'reschedule';
+};
+
+function TaskButton({ task, type }: Props): JSX.Element {
   const isCancelButton = type === 'cancel';
 
   return (
@@ -17,10 +39,14 @@ function TaskButton({ id, type }: { id: number, type: string }): JSX.Element {
   );
 }
 
-export function CancelTaskButton({ id }: { id: number }): JSX.Element {
+type ButtonProps = {
-  return <TaskButton id={id} type="cancel" />;
+  task: TasksListDataRowProps;
+};
+
+export function CancelTaskButton({ task }: ButtonProps): JSX.Element {
+  return <TaskButton task={task} type="cancel" />;
 }
 
-export function RescheduleTaskButton({ id }: { id: number }): JSX.Element {
+export function RescheduleTaskButton({ task }: ButtonProps): JSX.Element {
-  return <TaskButton id={id} type="reschedule" />;
+  return <TaskButton task={task} type="reschedule" />;
 }

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

@@ -95,12 +95,12 @@ function TasksListDataRow({
       </td>
       {showScheduledAt ? (
         <td>
-          <CancelTaskButton id={task.id} />
+          <CancelTaskButton task={task} />
         </td>
       ) : null}
       {showCancelledAt ? (
         <td>
-          <RescheduleTaskButton id={task.id} />
+          <RescheduleTaskButton task={task} />
         </td>
       ) : null}
     </tr>