From c47d147ae79cdab7174eb03728715332468244fa Mon Sep 17 00:00:00 2001
From: Tom Kirkpatrick <tkp@kirkdesigns.co.uk>
Date: Mon, 26 Nov 2018 14:06:06 +0100
Subject: [PATCH] feat(modal): add help link in modal header

---
 app/components/UI/Modal.js          |  1 +
 app/main.dev.js                     |  6 +++++-
 app/preload.js                      | 18 ++++++++++++++++
 stories/components/modal.stories.js | 32 ++++++++++++++++-------------
 4 files changed, 42 insertions(+), 15 deletions(-)
 create mode 100644 app/preload.js

diff --git a/app/components/UI/Modal.js b/app/components/UI/Modal.js
index 40ae7fab..4519b25c 100644
--- a/app/components/UI/Modal.js
+++ b/app/components/UI/Modal.js
@@ -49,6 +49,7 @@ class Modal extends React.Component {
               <Text
                 fontWeight="normal"
                 css={{ cursor: 'pointer', opacity: 0.6, '&:hover': { opacity: 1 } }}
+                onClick={() => window.Zap.openHelpPage()}
               >
                 Need Help?
               </Text>
diff --git a/app/main.dev.js b/app/main.dev.js
index 603f78b2..b4ccecae 100644
--- a/app/main.dev.js
+++ b/app/main.dev.js
@@ -12,6 +12,7 @@ import installExtension, {
   REDUX_DEVTOOLS
 } from 'electron-devtools-installer'
 import get from 'lodash.get'
+import path from 'path'
 import { mainLog } from './lib/utils/log'
 import ZapMenuBuilder from './lib/zap/menuBuilder'
 import ZapController from './lib/zap/controller'
@@ -118,7 +119,10 @@ app.on('ready', async () => {
     height: 650,
     minWidth: 900,
     minHeight: 425,
-    backgroundColor: get(theme, 'colors.primaryColor', '#242633')
+    backgroundColor: get(theme, 'colors.primaryColor', '#242633'),
+    webPreferences: {
+      preload: path.resolve(__dirname, './preload.js')
+    }
   })
 
   // Initialise the updater.
diff --git a/app/preload.js b/app/preload.js
new file mode 100644
index 00000000..071eb01f
--- /dev/null
+++ b/app/preload.js
@@ -0,0 +1,18 @@
+const { shell } = require('electron')
+
+init()
+
+function init() {
+  // Expose a bridging API to by setting an global on `window`.
+  //
+  // !CAREFUL! do not expose any functionality or APIs that could compromise the
+  // user's computer. E.g. don't directly expose core Electron (even IPC) or node.js modules.
+  window.Zap = {
+    openHelpPage
+  }
+}
+
+// Open the help page in a new browser window,.
+function openHelpPage() {
+  shell.openExternal('https://ln-zap.github.io/zap-tutorials/zap-desktop-getting-started')
+}
diff --git a/stories/components/modal.stories.js b/stories/components/modal.stories.js
index 6a5d9b6a..3cf43ffe 100644
--- a/stories/components/modal.stories.js
+++ b/stories/components/modal.stories.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
+import { boolean } from '@storybook/addon-knobs'
 import { Modal, Page, Text } from 'components/UI'
 
 storiesOf('Components', module).addWithChapters('Modal', {
@@ -11,20 +12,23 @@ storiesOf('Components', module).addWithChapters('Modal', {
     {
       sections: [
         {
-          sectionFn: () => (
-            <Page>
-              <Modal onClose={action('clicked')}>
-                <Text>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-                  irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-                  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-                  officia deserunt mollit anim id est laborum.
-                </Text>
-              </Modal>
-            </Page>
-          )
+          sectionFn: () => {
+            const withHeader = boolean('With header', false)
+            return (
+              <Page>
+                <Modal onClose={action('clicked')} withHeader={withHeader}>
+                  <Text>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+                    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+                    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+                    culpa qui officia deserunt mollit anim id est laborum.
+                  </Text>
+                </Modal>
+              </Page>
+            )
+          }
         }
       ]
     }