feat: option to opt-in for bleeding edge ipfs-webui (#893)

Co-authored-by: Jessica Schilling <[email protected]>

Author: lidel

add-on/_locales/en/messages.json

@@ -379,6 +379,14 @@
     "message": "Be warned: these features are new or work-in-progress. YMMV.",
     "description": "Warning about Experiments section on the Preferences screen (option_experiments_warning)"
   },
+  "option_useLatestWebUI_title": {
+    "message": "Use Latest WebUI",
+    "description": "An option title on the Preferences screen (option_useLatestWebUI_title)"
+  },
+  "option_useLatestWebUI_description": {
+    "message": "Loads bleeding-edge Web UI from DNSLink at webui.ipfs.io, instead of the hardcoded release CID shipped with IPFS daemon. Enable only if you trust your DNS resolver and know how to set up the required CORS headers.",
+    "description": "An option description on the Preferences screen (option_useLatestWebUI_description)"
+  },
   "option_displayNotifications_title": {
     "message": "Enable Notifications",
     "description": "An option title on the Preferences screen (option_displayNotifications_title)"

add-on/src/lib/ipfs-companion.js

@@ -686,6 +686,7 @@ module.exports = async function init () {
         case 'detectIpfsPathHeader':
         case 'preloadAtPublicGateway':
         case 'openViaWebUI':
+        case 'useLatestWebUI':
         case 'noIntegrationsHostnames':
         case 'dnslinkRedirect':
           state[key] = change.newValue

add-on/src/lib/options.js

@@ -31,6 +31,7 @@ exports.optionDefaults = Object.freeze({
   ipfsProxy: true, // window.ipfs
   logNamespaces: 'jsipfs*,ipfs*,libp2p:mdns*,libp2p-delegated*,-*:ipns*,-ipfs:preload*,-ipfs-http-client:request*,-ipfs:http-api*',
   importDir: '/ipfs-companion-imports/%Y-%M-%D_%h%m%s/',
+  useLatestWebUI: false,
   openViaWebUI: true
 })
 

add-on/src/lib/state.js

@@ -45,6 +45,9 @@ function initState (options, overrides) {
   })
   Object.defineProperty(state, 'webuiRootUrl', {
     get: function () {
+      // Did user opt-in for rolling release published on DNSLink?
+      if (state.useLatestWebUI) return `${state.gwURLString}ipns/webui.ipfs.io/`
+
       // Below is needed to make webui work for embedded js-ipfs
       // TODO: revisit if below is still needed after upgrading to js-ipfs >= 44
       const webuiUrl = state.ipfsNodeType === 'embedded:chromesockets'

add-on/src/options/forms/experiments-form.js

@@ -6,6 +6,7 @@ const html = require('choo/html')
 const switchToggle = require('../../pages/components/switch-toggle')
 
 function experimentsForm ({
+  useLatestWebUI,
   displayNotifications,
   catchUnhandledProtocols,
   linkify,
@@ -17,6 +18,7 @@ function experimentsForm ({
   onOptionsReset
 }) {
   const onDisplayNotificationsChange = onOptionChange('displayNotifications')
+  const onUseLatestWebUIChange = onOptionChange('useLatestWebUI')
   const onCatchUnhandledProtocolsChange = onOptionChange('catchUnhandledProtocols')
   const onLinkifyChange = onOptionChange('linkify')
   const onrecoverFailedHttpRequestsChange = onOptionChange('recoverFailedHttpRequests')
@@ -28,6 +30,15 @@ function experimentsForm ({
       <fieldset class="mb3 pa1 pa4-ns pa3 bg-snow-muted charcoal">
         <h2 class="ttu tracked f6 fw4 teal mt0-ns mb3-ns mb1 mt2 ">${browser.i18n.getMessage('option_header_experiments')}</h2>
         <div class="mb2">${browser.i18n.getMessage('option_experiments_warning')}</div>
+        <div class="flex-row-ns pb0-ns">
+          <label for="useLatestWebUI">
+            <dl>
+              <dt>${browser.i18n.getMessage('option_useLatestWebUI_title')}</dt>
+              <dd>${browser.i18n.getMessage('option_useLatestWebUI_description')}</dd>
+            </dl>
+          </label>
+          <div class="self-center-ns">${switchToggle({ id: 'useLatestWebUI', checked: useLatestWebUI, onchange: onUseLatestWebUIChange })}</div>
+        </div>
         <div class="flex-row-ns pb0-ns">
           <label for="displayNotifications">
             <dl>

add-on/src/options/page.js

@@ -86,6 +86,7 @@ module.exports = function optionsPage (state, emit) {
     onOptionChange
   })}
   ${experimentsForm({
+    useLatestWebUI: state.options.useLatestWebUI,
     displayNotifications: state.options.displayNotifications,
     catchUnhandledProtocols: state.options.catchUnhandledProtocols,
     linkify: state.options.linkify,