fix: work around dot in pin service name (#1772)

* fix: work around dot in pin service name

This is a temporary workaround that maintains most of the functionality
and works with go-ipfs 0.8.0

Context:
#1770

* refactor: support Pinning.RemoteServices["name"]

This adds fallback to new notation
from ipfs/kubo#8096

We default to old one because new one matters only when '.' is present
in the service name

Author: lidel

src/bundles/pinning.js

@@ -20,7 +20,17 @@ const parseService = async (service, remoteServiceTemplates, ipfs) => {
 }
 
 const mfsPolicyEnableFlag = memoize(async (serviceName, ipfs) => {
-  return await ipfs.config.get(`Pinning.RemoteServices.${serviceName}.Policies.MFS.Enable`)
+  try {
+    return await ipfs.config.get(`Pinning.RemoteServices.${serviceName}.Policies.MFS.Enable`)
+  } catch (e) {
+    if (e.message?.includes('key has no attribute')) {
+      try { // retry with notation from https://github.com/ipfs/go-ipfs/pull/8096
+        return await ipfs.config.get(`Pinning.RemoteServices["${serviceName}"].Policies.MFS.Enable`)
+      } catch (_) {}
+    }
+    console.error(`unexpected config.get error for "${serviceName}": ${e.message}`)
+  }
+  return false
 }, { maxAge: 3000 })
 
 const uniqueCidBatches = (arrayOfCids, size) => {
@@ -223,6 +233,9 @@ const pinningBundle = {
   doAddPinningService: ({ apiEndpoint, nickname, secretApiKey }) => async ({ getIpfs }) => {
     const ipfs = getIpfs()
 
+    // temporary mitigation for https://github.com/ipfs/ipfs-webui/issues/1770
+    nickname = nickname.replaceAll('.', '_')
+
     await ipfs.pin.remote.service.add(nickname, {
       endpoint: apiEndpoint,
       key: secretApiKey

src/components/pinning-manager/PinningManager.js

@@ -163,16 +163,20 @@ const OptionsCell = ({ doRemovePinningService, name, visitServiceUrl, autoUpload
     setContextVisibility(false)
   }
 
+  const showAutoUpload = !name.includes('.') // temporary mitigation for https://github.com/ipfs/ipfs-webui/issues/1770
+
   return (
     <div>
       <button className="button-inside-focus" onClick={() => setContextVisibility(true)} ref={buttonRef} aria-label={t('showOptions')}>
         <GlyphDots width={24} className='fill-gray-muted hover-fill-gray transition-all'/>
       </button>
       <ContextMenu className="pv2 ph1" style={{ zIndex: 1001 }} visible={isContextVisible}
         target={buttonRef} onDismiss={() => setContextVisibility(false)} arrowAlign="right">
-        <ContextMenuItem className='pv2 ph1' onClick={ () => onToggleModalOpen(name) }>
-          <StrokeCloud width="28" className='fill-aqua'/> <span className="ph1">{autoUpload ? t('pinningServices.removeAutoUpload') : t('pinningServices.addAutoUpload')}</span>
-        </ContextMenuItem>
+        { showAutoUpload && (
+          <ContextMenuItem className='pv2 ph1' onClick={ () => onToggleModalOpen(name) }>
+            <StrokeCloud width="28" className='fill-aqua'/> <span className="ph1">{autoUpload ? t('pinningServices.removeAutoUpload') : t('pinningServices.addAutoUpload')}</span>
+          </ContextMenuItem>)
+        }
         { visitServiceUrl && (
           <a className='link flex items-center' href={visitServiceUrl} target='_blank' rel='noopener noreferrer'>
             <ContextMenuItem className='pv2 ph1' onClick={ () => setContextVisibility(false) }>