feat: add 'Open Web UI' button to the welcome page (#769)

* add 'Open Web UI' button to the welcome page * update welcome button css * add webextension/polyfill for brave * remove unnecessary class
ipfs · Oct 2, 2019 · d01b2d3 · d01b2d3
1 parent 5974d63
commit d01b2d3
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/add-on/src/landing-pages/welcome/page.js b/add-on/src/landing-pages/welcome/page.js
@@ -17,6 +17,7 @@ function createWelcomePage (i18n) {
   return function welcomePage (state, emit) {
     const isIpfsOnline = state.isIpfsOnline
     const peerCount = state.peerCount
+    const onOpenWebUi = () => emit('openWebUi')
 
     // Set translated title
     document.title = i18n.getMessage('page_landingWelcome_title')
@@ -25,7 +26,7 @@ function createWelcomePage (i18n) {
       <div class="flex flex-column flex-row-l">
         <div id="left-col" class="min-vh-100 flex flex-column justify-center items-center bg-navy white">
           ${renderCompanionLogo(i18n, isIpfsOnline)}
-          ${isIpfsOnline ? renderWelcome(i18n, peerCount) : renderInstallSteps(i18n, isIpfsOnline)}
+          ${isIpfsOnline ? renderWelcome(i18n, peerCount, onOpenWebUi) : renderInstallSteps(i18n, isIpfsOnline)}
         </div>
 
         <div id="right-col" class="min-vh-100 flex flex-column justify-around items-center">
@@ -55,7 +56,7 @@ const renderCompanionLogo = (i18n, isIpfsOnline) => {
   `
 }
 
-const renderWelcome = (i18n, peerCount) => {
+const renderWelcome = (i18n, peerCount, onOpenWebUi) => {
   const anchorClass = 'white link underline-under hover-aqua'
   const copyClass = 'mv0 tc lh-copy f5'
   const svgWidth = 80
@@ -84,6 +85,9 @@ const renderWelcome = (i18n, peerCount) => {
       </div>
       <p class="${copyClass}">${renderTranslatedSpans('page_landingWelcome_welcome_peers', [peerCount], 'class="aqua fw6"')}</p>
       <p class="${copyClass} mb4">${renderTranslatedLinks('page_landingWelcome_welcome_discover', ['https://github.com/ipfs-shipyard/ipfs-companion#features'], `target="_blank" class="${anchorClass}"`)}</p>
+      <div class="mt4 f5 flex justify-center items-center">
+        <button class="pv3 ph4 b navy br2 bn bg-white hover-bg-white-90 pointer" onclick=${onOpenWebUi}>${i18n.getMessage('panel_openWebui')}</button>
+      </div>
     </div>
   `
 }

diff --git a/add-on/src/landing-pages/welcome/store.js b/add-on/src/landing-pages/welcome/store.js
@@ -1,26 +1,38 @@
 'use strict'
 /* eslint-env browser, webextensions */
+const browser = require('webextension-polyfill')
 
 function createWelcomePageStore (i18n, runtime) {
   return function welcomePageStore (state, emitter) {
     state.isIpfsOnline = null
     state.peerCount = null
+    state.webuiRootUrl = null
     let port
     emitter.on('DOMContentLoaded', async () => {
       emitter.emit('render')
       port = runtime.connect({ name: 'browser-action-port' })
       port.onMessage.addListener(async (message) => {
         if (message.statusUpdate) {
+          const webuiRootUrl = message.statusUpdate.webuiRootUrl
           const peerCount = message.statusUpdate.peerCount
           const isIpfsOnline = peerCount > -1
-          if (isIpfsOnline !== state.isIpfsOnline || peerCount !== state.peerCount) {
+          if (isIpfsOnline !== state.isIpfsOnline || peerCount !== state.peerCount || webuiRootUrl !== state.webuiRootUrl) {
+            state.webuiRootUrl = webuiRootUrl
             state.isIpfsOnline = isIpfsOnline
             state.peerCount = peerCount
             emitter.emit('render')
           }
         }
       })
     })
+
+    emitter.on('openWebUi', async () => {
+      try {
+        browser.tabs.create({ url: state.webuiRootUrl })
+      } catch (error) {
+        console.error(`Unable Open Web UI due to ${error}`)
+      }
+    })
   }
 }