feat: Add option for custom ui links (#195)

frontend/src/component/menu/__tests__/__snapshots__/drawer-test.jsx.snap

@@ -105,29 +105,7 @@ exports[`should render DrawerMenu 1`] = `
   <hr />
   <react-mdl-Navigation
     className="navigation"
-  >
-    <a
-      className="navigationLink mdl-color-text--grey-900"
-      href="https://unleash.github.io"
-      target="_blank"
-    >
-      <react-mdl-Icon
-        className="navigationIcon"
-        name="library_books"
-      />
-       User documentation
-    </a>
-    <a
-      className="navigationLink mdl-color-text--grey-900"
-      href="https://github.com/Unleash"
-      target="_blank"
-    >
-      <i
-        className="material-icons navigationIcon iconGitHub"
-      />
-       GitHub
-    </a>
-  </react-mdl-Navigation>
+  />
 </react-mdl-Drawer>
 `;
 
@@ -237,28 +215,6 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
   <hr />
   <react-mdl-Navigation
     className="navigation"
-  >
-    <a
-      className="navigationLink mdl-color-text--grey-900"
-      href="https://unleash.github.io"
-      target="_blank"
-    >
-      <react-mdl-Icon
-        className="navigationIcon"
-        name="library_books"
-      />
-       User documentation
-    </a>
-    <a
-      className="navigationLink mdl-color-text--grey-900"
-      href="https://github.com/Unleash"
-      target="_blank"
-    >
-      <i
-        className="material-icons navigationIcon iconGitHub"
-      />
-       GitHub
-    </a>
-  </react-mdl-Navigation>
+  />
 </react-mdl-Drawer>
 `;

frontend/src/component/menu/drawer.jsx

@@ -1,11 +1,20 @@
 import React from 'react';
 import { Drawer, Icon, Navigation } from 'react-mdl';
 import { NavLink } from 'react-router-dom';
+import PropTypes from 'prop-types';
 import styles from '../styles.scss';
 
 import { baseRoutes as routes } from './routes';
 
-export const DrawerMenu = () => (
+function getIcon(name) {
+    if (name === 'c_github') {
+        return <i className={['material-icons', styles.navigationIcon, styles.iconGitHub].join(' ')} />;
+    } else {
+        return <Icon name={name} className={styles.navigationIcon} />;
+    }
+}
+
+export const DrawerMenu = ({ links = [] }) => (
     <Drawer className="mdl-color--white">
         <span className={[styles.drawerTitle, 'mdl-layout-title'].join(' ')}>
             <img src="public/logo.png" width="32" height="32" className={styles.drawerTitleLogo} />
@@ -28,20 +37,20 @@ export const DrawerMenu = () => (
         </Navigation>
         <hr />
         <Navigation className={styles.navigation}>
-            <a
-                href="https://unleash.github.io"
-                target="_blank"
-                className={[styles.navigationLink, 'mdl-color-text--grey-900'].join(' ')}
-            >
-                <Icon name="library_books" className={styles.navigationIcon} /> User documentation
-            </a>
-            <a
-                href="https://github.com/Unleash"
-                target="_blank"
-                className={[styles.navigationLink, 'mdl-color-text--grey-900'].join(' ')}
-            >
-                <i className={['material-icons', styles.navigationIcon, styles.iconGitHub].join(' ')} /> GitHub
-            </a>
+            {links.map(link => (
+                <a
+                    href={link.href}
+                    target="_blank"
+                    className={[styles.navigationLink, 'mdl-color-text--grey-900'].join(' ')}
+                    title={link.title}
+                >
+                    {getIcon(link.icon)} {link.value}
+                </a>
+            ))}
         </Navigation>
     </Drawer>
 );
+
+DrawerMenu.propTypes = {
+    links: PropTypes.array,
+};

frontend/src/component/menu/header.jsx

@@ -37,7 +37,7 @@ class HeaderComponent extends PureComponent {
     }
 
     render() {
-        const { headerBackground } = this.props.uiConfig;
+        const { headerBackground, links } = this.props.uiConfig;
         const style = headerBackground ? { background: headerBackground } : {};
         return (
             <React.Fragment>
@@ -46,7 +46,7 @@ class HeaderComponent extends PureComponent {
                         <ShowUserContainer />
                     </Navigation>
                 </Header>
-                <DrawerMenu />
+                <DrawerMenu links={links} />
             </React.Fragment>
         );
     }

frontend/src/component/styles.scss

@@ -79,7 +79,7 @@
 }
 
 .navigationIcon {
-    margin-right: 32px;
+    margin-right: 24px;
 }
 
 .iconGitHub {

frontend/src/store/ui-config/__tests__/__snapshots__/ui-config-store.test.js.snap

@@ -2,9 +2,23 @@
 
 exports[`should be default state 1`] = `
 Object {
-  "environment": undefined,
+  "environment": "Open-Soruce",
   "headerBackground": undefined,
-  "slogan": "A product originally created by FINN.no.",
+  "links": Array [
+    Object {
+      "href": "https://unleash.github.io",
+      "icon": "library_books",
+      "title": "User documentation",
+      "value": "User documentation",
+    },
+    Object {
+      "href": "https://github.com/Unleash",
+      "icon": "c_github",
+      "title": "Source code on GitHub",
+      "value": "GitHub",
+    },
+  ],
+  "slogan": "The enterprise ready feature toggle service.",
 }
 `;
 
@@ -12,14 +26,42 @@ exports[`should be merged state all 1`] = `
 Object {
   "environment": "dev",
   "headerBackground": "red",
+  "links": Array [
+    Object {
+      "href": "https://unleash.github.io",
+      "icon": "library_books",
+      "title": "User documentation",
+      "value": "User documentation",
+    },
+    Object {
+      "href": "https://github.com/Unleash",
+      "icon": "c_github",
+      "title": "Source code on GitHub",
+      "value": "GitHub",
+    },
+  ],
   "slogan": "hello",
 }
 `;
 
 exports[`should only update headerBackground 1`] = `
 Object {
-  "environment": undefined,
+  "environment": "Open-Soruce",
   "headerBackground": "black",
-  "slogan": "A product originally created by FINN.no.",
+  "links": Array [
+    Object {
+      "href": "https://unleash.github.io",
+      "icon": "library_books",
+      "title": "User documentation",
+      "value": "User documentation",
+    },
+    Object {
+      "href": "https://github.com/Unleash",
+      "icon": "c_github",
+      "title": "Source code on GitHub",
+      "value": "GitHub",
+    },
+  ],
+  "slogan": "The enterprise ready feature toggle service.",
 }
 `;

frontend/src/store/ui-config/index.js

@@ -11,8 +11,22 @@ const UI_CONFIG = `${basePath}:ui_config`;
 
 const DEFAULT = new $Map({
     headerBackground: undefined,
-    environment: undefined,
-    slogan: 'A product originally created by FINN.no.',
+    environment: 'Open-Soruce',
+    slogan: 'The enterprise ready feature toggle service.',
+    links: [
+        {
+            value: 'User documentation',
+            icon: 'library_books',
+            href: 'https://unleash.github.io',
+            title: 'User documentation',
+        },
+        {
+            value: 'GitHub',
+            icon: 'c_github',
+            href: 'https://github.com/Unleash',
+            title: 'Source code on GitHub',
+        },
+    ],
 });
 
 function getInitState() {