Show error message in activity modal

[MAILPOET-5436]

mailpoet/assets/css/src/components-automation-analytics/tabs/_subscribers.scss

@@ -73,3 +73,8 @@
     margin-right: 10px;
   }
 }
+
+.mailpoet-analytics-activity-modal-status-info {
+  margin-top: 8px;
+  max-width: 220px;
+}

mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/components/tabs/subscribers/modal/rows.tsx

@@ -47,7 +47,14 @@ export function transformLogsToRows(logs: Log[], steps: Steps) {
           value: log.updated_at,
         },
         {
-          display: <AutomationRunStatus status={log.status} />,
+          display: (
+            <>
+              <AutomationRunStatus status={log.status} />
+              <div className="mailpoet-analytics-activity-modal-status-info">
+                {log.error && log.error.message}
+              </div>
+            </>
+          ),
         },
       ])
     : [];

mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/store/samples/run-logs.ts

@@ -86,7 +86,11 @@ export const runLogs: RunData = {
       updated_at: `${datePrefix}-26T14:22:02.000Z`,
       run_number: 1,
       data: '{}',
-      error: null,
+      error: {
+        message: 'Subscriber is not subscribed to marketing emails.',
+        errorClass: '',
+        code: 400,
+      },
     },
   ],
   steps: {

mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/store/types.ts

@@ -189,6 +189,12 @@ export type State = {
   };
 };
 
+export type Error = {
+  message: string;
+  errorClass: string;
+  code: number;
+};
+
 export type Run = {
   id: number;
   automation_id: number;
@@ -206,7 +212,7 @@ export type Log = {
   updated_at: string;
   run_number: number;
   data: string;
-  error: string | null;
+  error: Error | null;
 };
 
 export type RunData = {