Refactor key value table to accept data content as a property

[MAILPOET-1517]

assets/js/src/common/key_value_table.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 const KeyValueTable = props => (
   <table className={'widefat fixed'} style={{ maxWidth: props.max_width }}>
     <tbody>
-      {props.children.map(row => (
+      {props.rows.map(row => (
         <tr key={`row_${row.key}`}>
           <td className={'row-title'}>{ row.key }</td><td>{ row.value }</td>
         </tr>
@@ -14,7 +14,7 @@ const KeyValueTable = props => (
 
 KeyValueTable.propTypes = {
   max_width: React.PropTypes.string,
-  children: React.PropTypes.arrayOf(React.PropTypes.shape({
+  rows: React.PropTypes.arrayOf(React.PropTypes.shape({
     key: React.PropTypes.string.isRequired,
     value: React.PropTypes.oneOfType([
       React.PropTypes.string,

assets/js/src/help/cron_status.jsx

@@ -12,7 +12,9 @@ const CronStatus = (props) => {
   return (
     <div>
       <h2>{MailPoet.I18n.t('systemStatusCronStatusTitle')}</h2>
-      <KeyValueTable max_width={'400px'}>{[
+      <KeyValueTable
+        max_width={'400px'}
+        rows={[
           {
             key: MailPoet.I18n.t('accessible'),
             value: <PrintBoolean>{status.accessible}</PrintBoolean>,
@@ -36,8 +38,9 @@ const CronStatus = (props) => {
           {
             key: MailPoet.I18n.t('lastSeenError'),
             value: status.last_error || MailPoet.I18n.t('none'),
-        }]}
-      </KeyValueTable>
+          },
+        ]}
+      />
     </div>
   );
 };

assets/js/src/help/queue_status.jsx

@@ -9,8 +9,10 @@ const QueueStatus = (props) => {
   return (
     <div>
       <h2>{MailPoet.I18n.t('systemStatusQueueTitle')}</h2>
-      <KeyValueTable max_width={'400px'}>{
-        [{
+      <KeyValueTable
+        max_width={'400px'}
+        rows={[
+          {
             key: MailPoet.I18n.t('status'),
             value: status.status === 'paused' ? MailPoet.I18n.t('paused') : MailPoet.I18n.t('running'),
           }, {
@@ -40,9 +42,9 @@ const QueueStatus = (props) => {
           }, {
             key: MailPoet.I18n.t('totalScheduledTasks'),
             value: status.tasksStatusCounts.scheduled,
-        }]}
-      </KeyValueTable>
-
+          },
+        ]}
+      />
       <h4>{MailPoet.I18n.t('scheduledTasks')}</h4>
       <TasksList show_scheduled_at tasks={status.latestTasks.filter(task => (task.status === 'scheduled'))} />