Use new tabs in Help

[MAILPOET-2775]

assets/js/src/help/help.jsx

@@ -1,28 +1,32 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import {
-  HashRouter, Route, Redirect, Switch,
-} from 'react-router-dom';
-
+import MailPoet from 'mailpoet';
 import KnowledgeBase from 'help/knowledge_base.jsx';
 import SystemInfo from 'help/system_info.jsx';
 import SystemStatus from 'help/system_status.jsx';
 import YourPrivacy from 'help/your_privacy.jsx';
 import { GlobalContext, useGlobalContextValue } from 'context/index.jsx';
 import Notices from 'notices/notices.jsx';
+import RoutedTabs from '../common/tabs/routed_tabs';
+import Tab from '../common/tabs/tab';
 
 const App = () => (
   <GlobalContext.Provider value={useGlobalContextValue(window)}>
-    <HashRouter>
-      <Notices />
-      <Switch>
-        <Route exact path="/" render={() => <Redirect to="/knowledgeBase" />} />
-        <Route path="/knowledgeBase" component={KnowledgeBase} />
-        <Route path="/systemStatus" component={SystemStatus} />
-        <Route path="/systemInfo" component={SystemInfo} />
-        <Route path="/yourPrivacy" component={YourPrivacy} />
-      </Switch>
-    </HashRouter>
+    <Notices />
+    <RoutedTabs activeKey="knowledgeBase">
+      <Tab key="knowledgeBase" title={MailPoet.I18n.t('tabKnowledgeBaseTitle')}>
+        <KnowledgeBase />
+      </Tab>
+      <Tab key="systemStatus" title={MailPoet.I18n.t('tabSystemStatusTitle')}>
+        <SystemStatus />
+      </Tab>
+      <Tab key="systemInfo" title={MailPoet.I18n.t('tabSystemInfoTitle')}>
+        <SystemInfo />
+      </Tab>
+      <Tab key="yourPrivacy" title={MailPoet.I18n.t('tabYourPrivacyTitle')}>
+        <YourPrivacy />
+      </Tab>
+    </RoutedTabs>
   </GlobalContext.Provider>
 );
 

assets/js/src/help/knowledge_base.jsx

@@ -1,14 +1,9 @@
 import React from 'react';
 import MailPoet from 'mailpoet';
 
-import Tabs from './tabs.jsx';
-
 function KnowledgeBase() {
   return (
-    <div>
-
-      <Tabs tab="knowledgeBase" />
-
+    <>
       <p>{MailPoet.I18n.t('knowledgeBaseIntro')}</p>
       <ul>
         <li><a target="_blank" rel="noreferrer noopener" href="https://kb.mailpoet.com/category/116-common-problems">Common Problems</a></li>
@@ -21,7 +16,7 @@ function KnowledgeBase() {
         <li><a target="_blank" rel="noreferrer noopener" href="https://kb.mailpoet.com/category/121-subscribers-and-lists">Subscribers and Lists</a></li>
       </ul>
       <a target="_blank" rel="noreferrer noopener" href="https://kb.mailpoet.com/" className="button button-primary">{MailPoet.I18n.t('knowledgeBaseButton')}</a>
-    </div>
+    </>
   );
 }
 

assets/js/src/help/queue_status.jsx

@@ -8,7 +8,7 @@ import TasksListDataRow from './tasks_list/tasks_list_data_row.jsx';
 const QueueStatus = (props) => {
   const status = props.status_data;
   return (
-    <div>
+    <>
       <h4>{MailPoet.I18n.t('systemStatusQueueTitle')}</h4>
       <KeyValueTable
         max_width="400px"
@@ -54,7 +54,7 @@ const QueueStatus = (props) => {
 
       <h5>{MailPoet.I18n.t('completedTasks')}</h5>
       <TasksList tasks={status.latestTasks.filter((task) => (task.status === 'completed'))} />
-    </div>
+    </>
   );
 };
 

assets/js/src/help/system_info.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import MailPoet from 'mailpoet';
 import _ from 'underscore';
-import Tabs from './tabs.jsx';
 
 function handleFocus(event) {
   event.target.select();
@@ -29,16 +28,13 @@ function printData(data) {
 function SystemInfo() {
   const systemInfoData = window.systemInfoData;
   return (
-    <div>
-
-      <Tabs tab="systemInfo" />
-
-      <div className="mailpoet_notice notice inline" style={{ marginTop: '1em' }}>
+    <>
+      <div className="mailpoet_notice notice inline">
         <p>{MailPoet.I18n.t('systemInfoIntro')}</p>
       </div>
 
       {printData(systemInfoData)}
-    </div>
+    </>
   );
 }
 

assets/js/src/help/system_status.jsx

@@ -3,7 +3,6 @@ import React from 'react';
 import ReactStringReplace from 'react-string-replace';
 import CronStatus from './cron_status.jsx';
 import QueueStatus from './queue_status.jsx';
-import Tabs from './tabs.jsx';
 
 function renderStatusMessage(status, error, link, linkBeacon, additionalInfo) {
   const noticeType = (status) ? 'success' : 'error';
@@ -63,16 +62,15 @@ function SystemStatus() {
   const systemStatusData = window.systemStatusData;
 
   return (
-    <div>
-      <Tabs tab="systemStatus" />
-      <div className="mailpoet_notice notice inline" style={{ marginTop: '1em' }}>
+    <>
+      <div className="mailpoet_notice notice inline">
         <p>{systemStatusData.mss.enabled ? MailPoet.I18n.t('systemStatusIntroCronMSS') : MailPoet.I18n.t('systemStatusIntroCron')}</p>
       </div>
       {renderCronSection(systemStatusData)}
       {renderMSSSection(systemStatusData)}
       <CronStatus status_data={systemStatusData.cronStatus} />
       <QueueStatus status_data={systemStatusData.queueStatus} />
-    </div>
+    </>
   );
 }
 export default SystemStatus;

assets/js/src/help/tabs.jsx

@@ -1,58 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Link } from 'react-router-dom';
-import classNames from 'classnames';
-import MailPoet from 'mailpoet';
-
-const tabs = [
-  {
-    name: 'knowledgeBase',
-    label: MailPoet.I18n.t('tabKnowledgeBaseTitle'),
-    link: '/knowledgeBase',
-  },
-  {
-    name: 'systemStatus',
-    label: MailPoet.I18n.t('tabSystemStatusTitle'),
-    link: '/systemStatus',
-  },
-  {
-    name: 'systemInfo',
-    label: MailPoet.I18n.t('tabSystemInfoTitle'),
-    link: '/systemInfo',
-  },
-  {
-    name: 'yourPrivacy',
-    label: MailPoet.I18n.t('tabYourPrivacyTitle'),
-    link: '/yourPrivacy',
-  },
-];
-
-function Tabs(props) {
-  const tabLinks = tabs.map((tab) => {
-    const tabClasses = classNames(
-      'nav-tab',
-      { 'nav-tab-active': (props.tab === tab.name) }
-    );
-
-    return (
-      <Link
-        key={`tab-${tab.name}`}
-        className={tabClasses}
-        to={tab.link}
-      >
-        { tab.label }
-      </Link>
-    );
-  });
-
-  return (
-    <h2 className="nav-tab-wrapper">
-      { tabLinks }
-    </h2>
-  );
-}
-
-Tabs.propTypes = { tab: PropTypes.string };
-Tabs.defaultProps = { tab: 'knowledgeBase' };
-
-export default Tabs;

assets/js/src/help/your_privacy.jsx

@@ -1,19 +1,15 @@
 import React from 'react';
 import MailPoet from 'mailpoet';
 
-import Tabs from './tabs.jsx';
-
 function YourPrivacy() {
   return (
-    <div>
-      <Tabs tab="yourPrivacy" />
-
+    <>
       <p>{MailPoet.I18n.t('yourPrivacyContent1')}</p>
       <p>{MailPoet.I18n.t('yourPrivacyContent2')}</p>
       <p>{MailPoet.I18n.t('yourPrivacyContent3')}</p>
 
       <a target="_blank" rel="noreferrer noopener" href="https://www.mailpoet.com/privacy-notice/" className="button button-primary">{MailPoet.I18n.t('yourPrivacyButton')}</a>
-    </div>
+    </>
   );
 }