Add help without any content

[MAILPOET-949]

assets/js/src/help/help.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { Router, Route, IndexRedirect, useRouterHistory } from 'react-router'
+import { createHashHistory } from 'history'
+
+import KnowledgeBase from 'help/knowledge_base.jsx'
+import SystemInfo from 'help/system_info.jsx'
+
+const history = useRouterHistory(createHashHistory)({ queryKey: false });
+
+const App = React.createClass({
+  render() {
+    return this.props.children;
+  }
+});
+
+const container = document.getElementById('mailpoet_help');
+
+if(container) {
+
+  const mailpoet_listing = ReactDOM.render((
+    <Router history={ history }>
+      <Route path="/" component={ App }>
+        <IndexRedirect to="knowledgeBase" />
+        {/* Listings */}
+        <Route path="knowledgeBase(/)**" params={{ tab: 'knowledgeBase' }} component={ KnowledgeBase } />
+        <Route path="systemInfo(/)**" params={{ tab: 'systemInfo' }} component={ SystemInfo } />
+
+      </Route>
+    </Router>
+  ), container);
+
+  window.mailpoet_listing = mailpoet_listing;
+}

assets/js/src/help/knowledge_base.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import MailPoet from 'mailpoet'
+
+import Tabs from './tabs.jsx'
+
+function KnowledgeBase() {
+
+  return (
+    <div>
+      <h1 className="title">
+        {MailPoet.I18n.t('pageTitle')}
+      </h1>
+
+      <Tabs tab="knowledgeBase" />
+
+      <div>asdfasdf</div>
+    </div>
+  );
+};
+
+module.exports = KnowledgeBase;

assets/js/src/help/system_info.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import MailPoet from 'mailpoet'
+
+import Tabs from './tabs.jsx'
+
+function KnowledgeBase() {
+
+  return (
+    <div>
+      <h1 className="title">
+        {MailPoet.I18n.t('pageTitle')}
+      </h1>
+
+      <Tabs tab="systemInfo" />
+
+      <div>asdfasdf</div>
+    </div>
+  );
+};
+
+module.exports = KnowledgeBase;

assets/js/src/help/tabs.jsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { Link } from 'react-router'
+import classNames from 'classnames'
+import MailPoet from 'mailpoet'
+
+const tabs = [
+  {
+    name: 'knowledgeBase',
+    label: MailPoet.I18n.t('tabKnowledgeBaseTitle'),
+    link: '/knowledgeBase'
+  },
+  {
+    name: 'systemInfo',
+    label: MailPoet.I18n.t('tabSystemInfoTitle'),
+    link: '/systemInfo'
+  },
+];
+
+function Tabs(props) {
+
+  const tabLinks = tabs.map((tab, index) => {
+    const tabClasses = classNames(
+      'nav-tab',
+      { 'nav-tab-active': (props.tab === tab.name) }
+    );
+
+    return (
+      <Link
+        key={ 'tab-'+index }
+        className={ tabClasses }
+        to={ tab.link }
+      >{ tab.label }</Link>
+    );
+  });
+
+  return (
+    <h2 className="nav-tab-wrapper">
+      { tabLinks }
+    </h2>
+  );
+};
+
+Tabs.propTypes = { tab: React.PropTypes.string };
+Tabs.defaultProps = { tab: "knowledgeBase" };
+
+module.exports = Tabs;

lib/Config/Menu.php

@@ -167,6 +167,18 @@ class Menu {
       )
     );
 
+    add_submenu_page(
+      $main_page_slug,
+      $this->setPageTitle(__('Help', 'mailpoet')),
+      __('Help', 'mailpoet'),
+      Env::$required_permission,
+      'mailpoet-help',
+      array(
+        $this,
+        'help'
+      )
+    );
+
     // Only show this page in menu if the Premium plugin is not activated
     add_submenu_page(
       License::getLicense() ? true : $main_page_slug,
@@ -377,6 +389,10 @@ class Menu {
     $this->displayPage('settings.html', $data);
   }
 
+  function help() {
+    $this->displayPage('help.html', array());
+  }
+
   private function _getFlags() {
     // flags (available features on WP install)
     $flags = array();

views/help.html

@@ -0,0 +1,18 @@
+<% extends 'layout.html' %>
+
+<% block content %>
+<div id="mailpoet_help">
+
+  <div id="help_container"></div>
+
+</div>
+
+<% endblock %>
+<% block translations %>
+<%= localize({
+  'pageTitle': __('Help'),
+  'tabKnowledgeBaseTitle': __('Knowledge Base'),
+  'tabSystemInfoTitle': __('System Info')
+}) %>
+<% endblock %>
+

webpack.config.js

@@ -168,6 +168,7 @@ var adminConfig = {
       'segments/segments.jsx',
       'forms/forms.jsx',
       'settings/tabs.js',
+      'help/help.jsx',
       'settings/reinstall_from_scratch.js',
       'subscribers/importExport/import.js',
       'subscribers/importExport/export.js',