From d837f525bd8309bca1b54cff5f691d81603e38d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ivar=20Conradi=20=C3=98sthus?= <ivarconr@gmail.com>
Date: Sat, 26 Oct 2019 22:05:38 +0200
Subject: [PATCH] feat: Add option for custom ui links (#195)

---
 .../__snapshots__/drawer-test.jsx.snap        | 48 +-----------------
 frontend/src/component/menu/drawer.jsx        | 39 +++++++++------
 frontend/src/component/menu/header.jsx        |  4 +-
 frontend/src/component/styles.scss            |  2 +-
 .../ui-config-store.test.js.snap              | 50 +++++++++++++++++--
 frontend/src/store/ui-config/index.js         | 18 ++++++-
 6 files changed, 91 insertions(+), 70 deletions(-)

diff --git a/frontend/src/component/menu/__tests__/__snapshots__/drawer-test.jsx.snap b/frontend/src/component/menu/__tests__/__snapshots__/drawer-test.jsx.snap
index 8d2dfeff86..380fa40512 100644
--- a/frontend/src/component/menu/__tests__/__snapshots__/drawer-test.jsx.snap
+++ b/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>
 `;
diff --git a/frontend/src/component/menu/drawer.jsx b/frontend/src/component/menu/drawer.jsx
index ba701f1f76..095b31ed9f 100644
--- a/frontend/src/component/menu/drawer.jsx
+++ b/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,
+};
diff --git a/frontend/src/component/menu/header.jsx b/frontend/src/component/menu/header.jsx
index 61ced8aae2..22cf6219ee 100644
--- a/frontend/src/component/menu/header.jsx
+++ b/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>
         );
     }
diff --git a/frontend/src/component/styles.scss b/frontend/src/component/styles.scss
index 58c1797aaa..6482ea5f28 100644
--- a/frontend/src/component/styles.scss
+++ b/frontend/src/component/styles.scss
@@ -79,7 +79,7 @@
 }
 
 .navigationIcon {
-    margin-right: 32px;
+    margin-right: 24px;
 }
 
 .iconGitHub {
diff --git a/frontend/src/store/ui-config/__tests__/__snapshots__/ui-config-store.test.js.snap b/frontend/src/store/ui-config/__tests__/__snapshots__/ui-config-store.test.js.snap
index c62af75765..d3dfe601c3 100644
--- a/frontend/src/store/ui-config/__tests__/__snapshots__/ui-config-store.test.js.snap
+++ b/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.",
 }
 `;
diff --git a/frontend/src/store/ui-config/index.js b/frontend/src/store/ui-config/index.js
index 59937e8be9..60b4af856b 100644
--- a/frontend/src/store/ui-config/index.js
+++ b/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() {