Refactor logs to javascript

[MAILPOET-3135]

assets/js/src/logs/list.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import MailPoet from 'mailpoet';
+
+type Log = {
+  id: number;
+  name: string;
+  message: string;
+  created_at: string;
+}
+
+export type Logs = Log[];
+
+type LogProps = {
+  log: Log;
+}
+
+type ListProps = {
+  logs: Logs;
+}
+
+const Log: React.FunctionComponent<LogProps> = ({ log }: LogProps) => {
+  return (
+    <tr key={`log-row-${log.id}`}>
+      <td>{log.name}</td>
+      <td>
+        {log.message.substr(0, 150)}
+        …
+      </td>
+      <td>{MailPoet.Date.full(log.created_at)}</td>
+    </tr>
+  );
+}
+
+export const List: React.FunctionComponent<ListProps> = ({ logs }: ListProps) => (
+  <table className="mailpoet-listing-table widefat striped">
+    <thead>
+      <tr>
+        <th>{MailPoet.I18n.t('tableHeaderName')}</th>
+        <th>{MailPoet.I18n.t('tableHeaderMessage')}</th>
+        <th>{MailPoet.I18n.t('tableHeaderCreatedOn')}</th>
+      </tr>
+    </thead>
+    <tbody>
+      {logs.map((log) => <Log log={log} />)}
+    </tbody>
+  </table>
+);

assets/js/src/logs/logs.tsx

@@ -0,0 +1,19 @@
+import ReactDOM from 'react-dom';
+import React from 'react';
+
+import { List, Logs } from './list';
+
+interface LogsWindow extends Window {
+  mailpoet_logs: Logs;
+}
+
+declare let window: LogsWindow;
+
+const logsContainer = document.getElementById('mailpoet_logs_container');
+
+if (logsContainer) {
+  ReactDOM.render(
+    <List logs={window.mailpoet_logs} />,
+    logsContainer
+  );
+}

assets/js/src/webpack_admin_index.jsx

@@ -13,4 +13,5 @@ import 'subscribers/importExport/import.jsx'; // side effect - executes on doc r
 import 'subscribers/importExport/export.ts'; // side effect - executes on doc ready
 import 'wizard/wizard.jsx'; // side effect - renders ReactDOM to document
 import 'experimental_features/experimental_features.jsx'; // side effect - renders ReactDOM to document
+import 'logs/logs'; // side effect - renders ReactDOM to document
 import 'sending-paused-notices-fix-button.tsx'; // side effect - renders ReactDOM to document