From 6b4212988524306dd3c4b95613c77d554d839221 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20P=C3=B6tzinger?= <daniel.poetzinger@aoe.com>
Date: Fri, 31 Mar 2017 11:51:57 +0200
Subject: [PATCH] Add Toolbox Page and rename help page

---
 common/config.js             |  3 ++-
 js/components/Header.js      |  2 +-
 js/components/PageToolbox.js | 41 ++++++++++++++++++++++++++++++++++++
 js/components/Router.js      |  6 +++++-
 4 files changed, 49 insertions(+), 3 deletions(-)
 create mode 100644 js/components/PageToolbox.js

diff --git a/common/config.js b/common/config.js
index 82750d1..3cdd778 100644
--- a/common/config.js
+++ b/common/config.js
@@ -9,7 +9,8 @@ export const getPageNames = (radar) => {
   return [
     'index',
     'overview',
-    'help',
+    'help-and-about-tech-radar',
+    'aoe-toolbox',
     ...quadrants,
     ...getItemPageNames(radar.items),
   ]
diff --git a/js/components/Header.js b/js/components/Header.js
index c94aa68..dbe353b 100644
--- a/js/components/Header.js
+++ b/js/components/Header.js
@@ -66,7 +66,7 @@ class Header extends React.Component {
       >
         <div className="nav">
           <div className="nav__item">
-            <Link pageName="help" className="icon-link">
+            <Link pageName="help-and-about-tech-radar" className="icon-link">
               <span className="icon icon--question icon-link__icon"></span>How to Use Technology Radar?
             </Link>
           </div>
diff --git a/js/components/PageToolbox.js b/js/components/PageToolbox.js
new file mode 100644
index 0000000..9e427e4
--- /dev/null
+++ b/js/components/PageToolbox.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import HeroHeadline from './HeroHeadline';
+import Fadeable from './Fadeable';
+import SetTitle from './SetTitle';
+
+export default function PageToolbox({ leaving, onLeave, ...props }) {
+  return (
+    <Fadeable leaving={leaving} onLeave={onLeave}>
+      <SetTitle {...props} title="Small AOE Toolbox" />
+      <HeroHeadline>Small AOE Toolbox</HeroHeadline>
+      <div className="fullpage-content">
+        <h3>Useful Tools</h3>
+        <p>
+          <ul>
+            <li>Fiddler - free web debugging proxy ( http://www.telerik.com/fiddler )</li>
+            <li>SoapUI - Webservice Test Tool (https://www.soapui.org/ )</li>
+            <li>Postman - API Test Tool ( https://www.getpostman.com/ )</li>
+            <li> Modelio  - Simple free UML Modelling tool ( https://www.modelio.org/ )</li>
+          </ul>
+        </p>
+        <h3>Useful Tools (commercial)</h3>
+        <p>
+          <ul>
+            <li> Paw Rest Client</li>
+          </ul>
+        </p>
+
+        <h3>Estabilshed Technologies</h3>
+        <p>
+          Not mentionable but adopted for a while now:
+          <ul>
+            <li>Jenkins</li>
+            <li>Redis</li>
+            <li>Varnish</li>
+            <li>Symfony2</li>
+          </ul>
+        </p>
+      </div>
+    </Fadeable>
+  );
+}
diff --git a/js/components/Router.js b/js/components/Router.js
index c1a76a6..bc7693f 100644
--- a/js/components/Router.js
+++ b/js/components/Router.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PageIndex from './PageIndex';
 import PageOverview from './PageOverview';
 import PageHelp from './PageHelp';
+import PageToolbox from './PageToolbox';
 import PageQuadrant from './PageQuadrant';
 import PageItem from './PageItem';
 import { quadrants, getItemPageNames } from '../../common/config';
@@ -14,9 +15,12 @@ const getPageByName = (items, pageName) => {
   if (pageName === 'overview') {
     return PageOverview;
   }
-  if (pageName === 'help') {
+  if (pageName === 'help-and-about-tech-radar') {
     return PageHelp;
   }
+  if (pageName === 'aoe-toolbox') {
+    return PageToolbox;
+  }
   if (quadrants.includes(pageName)) {
     return PageQuadrant;
   }