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>
   );
 };

lib/Config/Menu.php

@@ -4,6 +4,7 @@ namespace MailPoet\Config;
 use MailPoet\Cron\CronTrigger;
 use MailPoet\Form\Block;
 use MailPoet\Form\Renderer as FormRenderer;
+use MailPoet\Helpscout\Beacon;
 use MailPoet\Listing;
 use MailPoet\Models\CustomField;
 use MailPoet\Models\Form;
@@ -390,7 +391,7 @@ class Menu {
   }
 
   function help() {
-    $this->displayPage('help.html', array());
+    $this->displayPage('help.html', array('data' => Beacon::getData()));
   }
 
   private function _getFlags() {

views/help.html

@@ -1,8 +1,13 @@
 <% extends 'layout.html' %>
 
 <% block content %>
+
 <div id="mailpoet_help">
 
+  <script type="text/javascript">
+    var help_scout_data = <%= json_encode(data) %>;
+  </script>
+
   <div id="help_container"></div>
 
 </div>
@@ -16,6 +21,7 @@
   'knowledgeBaseIntro': __('Click on one of these categories below to find more information'),
   'knowledgeBaseButton': __('Visit our Knowledge Base for more articles'),
   'systemInfoIntro': __('The information below is useful when you need to get in touch with our support. Just copy all the text below and paste it on a message to us'),
+  'systemInfoDataError': __('Sorry, there was an error, please try again later'),
 }) %>
 <% endblock %>