Add data to system info help page

[MAILPOET-949]

assets/js/src/help/system_info.jsx

@@ -1,10 +1,35 @@
 import React from 'react'
 import MailPoet from 'mailpoet'
+import _ from 'underscore'
 
 import Tabs from './tabs.jsx'
 
-function KnowledgeBase() {
+function handleFocus(event) {
+  event.target.select();
+}
 
+function printData(data) {
+  if (_.isObject(data)) {
+    const printableData = Object.keys(data).map((key) => {
+      return `${key}: ${data[key]}`;
+    });
+
+    return (<textarea
+      readOnly={true}
+      onFocus={handleFocus}
+      value={printableData.join("\n")}
+      style={{
+        width: "100%",
+        height: "400px",
+      }}
+    />);
+  } else {
+    return (<p>{MailPoet.I18n.t('systemInfoDataError')}</p>);
+  }
+}
+
+function KnowledgeBase() {
+  const data = window.help_scout_data;
   return (
     <div>
       <h1 className="title">
@@ -17,7 +42,7 @@ function KnowledgeBase() {
         <p>{MailPoet.I18n.t('systemInfoIntro')}</p>
       </div>
 
-      <textarea readOnly={true}></textarea>
+      {printData(data)}
     </div>
   );
 };