feat: allow settings even when the daemon is offline

License: MIT
Signed-off-by: Henrique Dias <hacdias@gmail.com>

public/locales/en/settings.json

@@ -16,6 +16,7 @@
   },
   "fetchingSettings": "Fetching settings...",
   "configApiNotAvailable": "The IPFS config API is not available. Please disable the \"IPFS Companion\" Web Extension and try again.",
+  "ipfsDaemonOffline": "The IPFS daemon is offline. Please turn it on and try again.",
   "settingsUnavailable": "Settings not available. Please check your IPFS daemon is running.",
   "settingsHaveChanged": "The settings have changed, please click <1>Reset</1> to update the editor contents",
   "errorOccured": "An error occured while saving your changes",

src/App.js

@@ -66,7 +66,7 @@ export class App extends Component {
               </div>
             </div>
             <main className='bg-white pv3 pa3-ns pa4-l'>
-              { (ipfsReady || url === '/welcome')
+              { (ipfsReady || url === '/welcome' || url.startsWith('/settings'))
                 ? <Page />
                 : <ComponentLoader pastDelay />
               }

src/bundles/redirects.js

@@ -25,7 +25,7 @@ export default {
     'selectIpfsInitFailed',
     'selectHash',
     (failed, hash) => {
-      if (failed && hash !== '/welcome') {
+      if (failed && hash !== '/welcome' && !hash.startsWith('/settings')) {
         return { actionCreator: 'doUpdateHash', args: ['#/welcome'] }
       }
     }

src/navigation/NavBar.js

@@ -51,7 +51,7 @@ const NavLink = ({
   )
 }
 
-export const NavBar = ({ t, isSettingsEnabled, width, open, onToggle }) => {
+export const NavBar = ({ t, width, open, onToggle }) => {
   const codeUrl = 'https://github.com/ipfs-shipyard/ipfs-webui'
   const bugsUrl = `${codeUrl}/issues`
   const gitRevision = process.env.REACT_APP_GIT_REV
@@ -68,7 +68,7 @@ export const NavBar = ({ t, isSettingsEnabled, width, open, onToggle }) => {
           <NavLink to='/files/' icon={StrokeWeb} open={open}>{t('files:title')}</NavLink>
           <NavLink to='/explore' icon={StrokeIpld} open={open}>{t('explore:tabName')}</NavLink>
           <NavLink to='/peers' icon={StrokeCube} open={open}>{t('peers:title')}</NavLink>
-          <NavLink to='/settings' icon={StrokeSettings} disabled={!isSettingsEnabled} open={open}>{t('settings:title')}</NavLink>
+          <NavLink to='/settings' icon={StrokeSettings} open={open}>{t('settings:title')}</NavLink>
         </nav>
       </div>
       { open &&
@@ -86,12 +86,9 @@ export const NavBar = ({ t, isSettingsEnabled, width, open, onToggle }) => {
   )
 }
 
-export const NavBarContainer = ({ doToggleNavbar, configRaw, navbarIsOpen, navbarWidth, ...props }) => {
-  const isSettingsEnabled = !!configRaw.data
-
+export const NavBarContainer = ({ doToggleNavbar, navbarIsOpen, navbarWidth, ...props }) => {
   return (
     <NavBar
-      isSettingsEnabled={isSettingsEnabled}
       open={navbarIsOpen}
       width={navbarWidth}
       onToggle={doToggleNavbar}
@@ -101,7 +98,6 @@ export const NavBarContainer = ({ doToggleNavbar, configRaw, navbarIsOpen, navba
 
 export default connect(
   'doToggleNavbar',
-  'selectConfigRaw',
   'selectNavbarIsOpen',
   'selectNavbarWidth',
   translate()(NavBarContainer)

src/settings/SettingsPage.js

@@ -16,7 +16,7 @@ import Title from './Title'
 const PAUSE_AFTER_SAVE_MS = 3000
 
 export const SettingsPage = ({
-  t, tReady,
+  t, tReady, isIpfsConnected,
   isConfigBlocked, isLoading, isSaving,
   hasSaveFailed, hasSaveSucceded, hasErrors, hasLocalChanges, hasExternalChanges, isIpfsDesktop,
   config, onChange, onReset, onSave, editorKey
@@ -49,6 +49,7 @@ export const SettingsPage = ({
               t={t}
               tReady={tReady}
               config={config}
+              isIpfsConnected={isIpfsConnected}
               isConfigBlocked={isConfigBlocked}
               isLoading={isLoading}
               hasExternalChanges={hasExternalChanges}
@@ -110,13 +111,19 @@ const SaveButton = ({ t, hasErrors, hasSaveFailed, hasSaveSucceded, isSaving, ha
   )
 }
 
-const SettingsInfo = ({ t, isConfigBlocked, hasExternalChanges, hasSaveFailed, hasSaveSucceded, isLoading, config }) => {
+const SettingsInfo = ({ t, isIpfsConnected, isConfigBlocked, hasExternalChanges, hasSaveFailed, hasSaveSucceded, isLoading, config }) => {
   if (isConfigBlocked) {
     return (
       <p className='ma0 lh-copy charcoal f5 mw7'>
         {t('configApiNotAvailable')}
       </p>
     )
+  } else if (!isIpfsConnected) {
+    return (
+      <p className='ma0 lh-copy charcoal f5 mw7'>
+        {t('ipfsDaemonOffline')}
+      </p>
+    )
   } else if (!config) {
     return (
       <p className='ma0 lh-copy charcoal f5 mw7'>
@@ -223,7 +230,7 @@ export class SettingsPageContainer extends React.Component {
   }
 
   render () {
-    const { t, tReady, isConfigBlocked, configIsLoading, configLastError, configIsSaving, configSaveLastSuccess, configSaveLastError, isIpfsDesktop } = this.props
+    const { t, tReady, isConfigBlocked, ipfsConnected, configIsLoading, configLastError, configIsSaving, configSaveLastSuccess, configSaveLastError, isIpfsDesktop } = this.props
     const { hasErrors, hasLocalChanges, hasExternalChanges, editableConfig, editorKey } = this.state
     const hasSaveSucceded = this.isRecent(configSaveLastSuccess)
     const hasSaveFailed = this.isRecent(configSaveLastError)
@@ -232,6 +239,7 @@ export class SettingsPageContainer extends React.Component {
       <SettingsPage
         t={t}
         tReady={tReady}
+        isIpfsConnected={ipfsConnected}
         isConfigBlocked={isConfigBlocked}
         isLoading={isLoading}
         isSaving={configIsSaving}
@@ -254,6 +262,7 @@ export const TranslatedSettingsPage = translate('settings')(SettingsPageContaine
 
 export default connect(
   'selectConfig',
+  'selectIpfsConnected',
   'selectIsConfigBlocked',
   'selectConfigLastError',
   'selectConfigIsLoading',

test/e2e/navigation.test.js

@@ -13,10 +13,6 @@ it('Navigation test: node not running', async () => {
   const page = (await browser.pages())[0]
   await page.goto(appUrl)
   await page.waitForFunction(`document.title === 'Welcome to IPFS'`, { timeout: 8000 })
-
-  // No settings tab if IPFS is not available.
-  const settingsLink = await page.$('nav a[href="#/settings"]')
-  expect(settingsLink).toBeNull()
 }, ms.minutes(1))
 
 it('Navigation test: node running', async () => {