feat: add pinning to files page (#1678)

* chore: refactor files page * feat: add pinning services mock to files page * chore: update remotePin dimensions Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: update local pin icon dimension Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: change pin icon fill color Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: change remote pin icon fill color Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: update pinning modal text size Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: update pinning modal text size Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: pinning modal secondary text changes Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: update pinning modal image size Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: update pinning modal pin icon Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: add pin status column to fileslist * chore: fix modals icons * chore: fix linting error * chore: fix files sorting Co-authored-by: Jessica Schilling <jessica@protocol.ai>
ipfs · Nov 3, 2020 · de44936 · de44936
1 parent 4612b7c
commit de44936
Show file tree

Hide file tree

Showing 36 changed files with 793 additions and 560 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/locales/en/app.json b/public/locales/en/app.json
@@ -23,6 +23,7 @@
     "save": "Save",
     "saving": "Saving…",
     "selectAll": "Select all",
+    "setPinning": "Set pinning",
     "submit": "Submit",
     "unpin": "Unpin",
     "unselectAll": "Unselect all"
@@ -68,6 +69,7 @@
     "peers": "Peers",
     "pinNoun": "Pin",
     "pins": "Pins",
+    "pinStatus": "Pin Status",
     "publicKey": "Public key",
     "rateIn": "Rate in",
     "rateOut": "Rate out",

diff --git a/public/locales/en/files.json b/public/locales/en/files.json
@@ -37,6 +37,11 @@
     "descriptionFolder": "{count, plural, one {Are you sure you want to delete this folder? This action is permanent and cannot be reversed.} other {Are you sure you want to delete these {count} folders? This action is permanent and cannot be reversed.}}",
     "descriptionFile": "{count, plural, one {Are you sure you want to delete this file? This action is permanent and cannot be reversed.} other {Are you sure you want to delete these {count} files? This action is permanent and cannot be reversed.}}"
   },
+  "pinningModal": {
+    "title": "Select the services with which you wish to pin these files.",
+    "footer": "Need to add or configure a pinning service? Go to <1>Settings</1>.",
+    "localNode": "Local node"
+  },
   "addByPathModal": {
     "title": "Import from IPFS",
     "description": "Insert an IPFS path (CID) to import.",

diff --git a/public/locales/en/settings.json b/public/locales/en/settings.json
@@ -59,16 +59,6 @@
     "DISABLED": "Disabled",
     "PINS_ONLY": "Pins only"
   },
-  "localPinning": "Local Pinning",
-  "service": "Service",
-  "files": "Files",
-  "bandwidthUsed": "Bandwidth Used",
-  "autoUpload": "Auto Upload",
-  "autoUploadKeys": {
-    "ALL_FILES": "All files",
-    "DISABLED": "Disabled",
-    "PINS_ONLY": "Pins only"
-  },
   "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.",

diff --git a/src/App.js b/src/App.js
@@ -62,9 +62,9 @@ export class App extends Component {
 
     return connectDropTarget(
       // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-      <div className='sans-serif h-100' onClick={getNavHelper(this.props.doUpdateUrl)}>
+      <div className='sans-serif h-100 relative' onClick={getNavHelper(this.props.doUpdateUrl)}>
         {/* Tinted overlay that appears when dragging and dropping an item */}
-        { canDrop && isOver && <div className='w-100 h-100 top-0 left-0 absolute' style={{ background: 'rgba(99, 202, 210, 0.2)' }} /> }
+        { canDrop && isOver && <div className='h-100 top-0 right-0 fixed appOverlay' style={{ background: 'rgba(99, 202, 210, 0.2)' }} /> }
         <div className='flex flex-row-reverse-l flex-column-reverse justify-end justify-start-l' style={{ minHeight: '100vh' }}>
           <div className='flex-auto-l'>
             <div className='flex items-center ph3 ph4-l' style={{ WebkitAppRegion: 'drag', height: 75, background: '#F0F6FA', paddingTop: '20px', paddingBottom: '15px' }}>

diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js
@@ -463,21 +463,28 @@ const actions = () => ({
   doFilesDismissErrors: () => send({ type: ACTIONS.DISMISS_ERRORS }),
 
   /**
-   * @param {string} path
-   */
-  doFilesNavigateTo: (path) =>
+   * @param {Object} fileArgs
+   * @param {string} fileArgs.path
+   * @param {string|CID} fileArgs.cid
+  */
+  doFilesNavigateTo: ({ path, cid }) =>
     /**
      * @param {Context} context
      */
     async ({ store }) => {
-      const link = path.split('/').map(p => encodeURIComponent(p)).join('/')
-      const files = store.selectFiles()
-      const url = store.selectFilesPathInfo()
-
-      if (files && files.path === link && url) {
-        await store.doFilesFetch()
-      } else {
-        await store.doUpdateHash(link)
+      try {
+        const link = path.split('/').map(p => encodeURIComponent(p)).join('/')
+        const files = store.selectFiles()
+        const url = store.selectFilesPathInfo()
+
+        if (files && files.path === link && url) {
+          await store.doFilesFetch()
+        } else {
+          await store.doUpdateHash(link)
+        }
+      } catch (e) {
+        console.error(e)
+        store.doUpdateHash(`/ipfs/${cid}`)
       }
     },
 

diff --git a/src/bundles/files/index.js b/src/bundles/files/index.js
@@ -91,7 +91,8 @@ export default () => {
               pageContent: {
                 ...pageContent,
                 content
-              }
+              },
+              sorting: action.payload
             }
           } else {
             return state

diff --git a/src/bundles/pinning.js b/src/bundles/pinning.js
@@ -1,6 +1,63 @@
+// @ts-check
+/**
+ * TODO: This might change, current version from: https://github.com/ipfs/go-ipfs/blob/petar/pincli/core/commands/remotepin.go#L53
+ * @typedef {Object} RemotePin
+ * @property {string} id
+ * @property {string} name
+ * @property {('queued'|'pinning'|'pinned'|'failed')} status
+ * @property {string} cid
+ * @property {Array<string>} [delegates] e.g. ["/dnsaddr/pin-service.example.com"]
+*/
 export default {
   name: 'pinning',
-  reducer: (state = {}) => state,
+  reducer: (state = {
+    remotePins: []
+  }, action) => {
+    if (action.type === 'SET_REMOTE_PINS') {
+      return { ...state, remotePins: action.payload }
+    }
+    return state
+  },
+
+  doFetchRemotePins: () => async ({ dispatch, store }) => {
+    const pinningServices = store.selectPinningServices()
+
+    if (!pinningServices?.length) return
+
+    // TODO: unmock this (e.g. const pins = ipfs.pin.remote.ls ...)
+    const response = [
+      {
+        id: 'Pinata:UniqueIdOfPinRequest',
+        status: 'queued',
+        cid: 'QmQsUbcVx6Vu8vtL858FdxD3sVBE6m8uP3bjFoTzrGubmX',
+        name: '26_remote.png',
+        delegates: ['/dnsaddr/pin-service.example.com']
+      }
+    ]
+
+    // TODO: get type of item?
+
+    const remotePins = response.map(item => ({
+      ...item,
+      isRemotePin: true,
+      type: item.type || 'unknown',
+      size: Math.random() * 1000// TODO: files.stat in the future
+    }))
+
+    // TODO: handle different status (queued = async fetch in batches to update ui?)
+
+    dispatch({ type: 'SET_REMOTE_PINS', payload: remotePins })
+  },
+
+  selectRemotePins: (state) => state.pinning.remotePins || [],
+
+  doSelectRemotePinsForFile: (file) => ({ store }) => {
+    const pinningServicesNames = store.selectPinningServices().map(remote => remote.name)
+    const remotePinForFile = store.selectRemotePins().filter(pin => pin.cid === file.cid.string)
+    const servicesBeingUsed = remotePinForFile.map(pin => pin.id.split(':')[0]).filter(pinId => pinningServicesNames.includes(pinId))
+
+    return servicesBeingUsed
+  },
 
   // selectPinningServices: state => state.pinning
   // TODO: unmock this

diff --git a/src/components/cli-tutor-mode/CliTutorMode.js b/src/components/cli-tutor-mode/CliTutorMode.js
@@ -20,7 +20,7 @@ export const CliTutorialModal = ({ command, t, onLeave, className, downloadConfi
 
   return (
     <Modal {...props} className={className} onCancel={onLeave} style={{ maxWidth: '40em' }}>
-      <ModalBody icon={StrokeCode}>
+      <ModalBody Icon={StrokeCode}>
         <p className='charcoal w-80 center' style={{ lineHeight: '1.3' }}>
           {t('app:cliModal.description')}
         </p>

diff --git a/src/components/text-input-modal/TextInputModal.js b/src/components/text-input-modal/TextInputModal.js
@@ -12,7 +12,7 @@ class TextInputModal extends React.Component {
     onChange: PropTypes.func,
     onInputChange: PropTypes.func,
     title: PropTypes.string.isRequired,
-    icon: PropTypes.func.isRequired,
+    Icon: PropTypes.func.isRequired,
     description: PropTypes.node,
     submitText: PropTypes.string,
     validate: PropTypes.func,
@@ -98,7 +98,7 @@ class TextInputModal extends React.Component {
       mustBeDifferent,
       onSubmit,
       className,
-      icon,
+      Icon,
       submitText,
       validate,
       defaultValue,
@@ -111,7 +111,7 @@ class TextInputModal extends React.Component {
 
     return (
       <Modal {...props} className={className} onCancel={onCancel}>
-        <ModalBody title={title} icon={icon}>
+        <ModalBody title={title} Icon={Icon}>
           { description && typeof description === 'object' && description }
 
           { description && typeof description === 'string' &&

diff --git a/src/files/FilesPage.js b/src/files/FilesPage.js
@@ -17,7 +17,7 @@ import FilesList from './files-list/FilesList'
 import { getJoyrideLocales } from '../helpers/i8n'
 
 // Icons
-import Modals, { DELETE, NEW_FOLDER, SHARE, RENAME, ADD_BY_PATH, CLI_TUTOR_MODE } from './modals/Modals'
+import Modals, { DELETE, NEW_FOLDER, SHARE, RENAME, ADD_BY_PATH, CLI_TUTOR_MODE, PINNING } from './modals/Modals'
 import Header from './header/Header'
 import FileImportStatus from './file-import-status/FileImportStatus'
 
@@ -48,6 +48,7 @@ class FilesPage extends React.Component {
     this.props.doFilesFetch()
     this.props.doPinsFetch()
     this.props.doFilesSizeGet()
+    this.props.doFetchRemotePins()
   }
 
   componentDidUpdate (prev) {
@@ -141,7 +142,7 @@ class FilesPage extends React.Component {
   }
 
   get mainView () {
-    const { t, files, doExploreUserProvidedPath } = this.props
+    const { t, files, remotePins, doExploreUserProvidedPath } = this.props
 
     if (!files) {
       return (<div/>)
@@ -170,15 +171,17 @@ class FilesPage extends React.Component {
     return (
       <FilesList
         key={window.encodeURIComponent(files.path)}
-        root={files.path}
         updateSorting={this.props.doFilesUpdateSorting}
         files={files.content}
+        remotePins={remotePins}
         upperDir={files.upper}
         downloadProgress={this.state.downloadProgress}
         onShare={(files) => this.showModal(SHARE, files)}
         onRename={(files) => this.showModal(RENAME, files)}
         onDelete={(files) => this.showModal(DELETE, files)}
+        onSetPinning={(files) => this.showModal(PINNING, files)}
         onInspect={this.onInspect}
+        onRemotePinClick={this.onRemotePinClick}
         onDownload={this.onDownload}
         onAddFiles={this.onAddFiles}
         onNavigate={this.props.doFilesNavigateTo}
@@ -234,8 +237,7 @@ class FilesPage extends React.Component {
           onRename={() => this.showModal(RENAME, [contextMenu.file])}
           onInspect={() => this.onInspect(contextMenu.file.cid)}
           onDownload={() => this.onDownload([contextMenu.file])}
-          onPin={() => this.props.doFilesPin(contextMenu.file.cid)}
-          onUnpin={() => this.props.doFilesUnpin(contextMenu.file.cid)}
+          onPinning={() => this.showModal(PINNING, [contextMenu.file])}
           isCliTutorModeEnabled={isCliTutorModeEnabled}
           onCliTutorMode={() => this.showModal(CLI_TUTOR_MODE, [contextMenu.file])}
           doSetCliOptions={doSetCliOptions}
@@ -265,6 +267,7 @@ class FilesPage extends React.Component {
           onShareLink={this.props.doFilesShareLink}
           onDelete={this.props.doFilesDelete}
           onAddByPath={this.onAddByPath}
+          onPinningSet={this.props.doSetPinning}
           cliOptions={cliOptions}
           { ...this.state.modals } />
 
@@ -300,8 +303,6 @@ FilesPage.propTypes = {
   doFilesDelete: PropTypes.func.isRequired,
   doFilesAddPath: PropTypes.func.isRequired,
   doFilesNavigateTo: PropTypes.func.isRequired,
-  doFilesPin: PropTypes.func.isRequired,
-  doFilesUnpin: PropTypes.func.isRequired,
   doFilesUpdateSorting: PropTypes.func.isRequired,
   doFilesWrite: PropTypes.func.isRequired,
   doFilesDownloadLink: PropTypes.func.isRequired
@@ -311,18 +312,18 @@ export default connect(
   'selectIpfsProvider',
   'selectIpfsConnected',
   'selectFiles',
+  'selectRemotePins',
   'selectFilesPathInfo',
   'doUpdateHash',
   'doPinsFetch',
+  'doFetchRemotePins',
   'doFilesFetch',
   'doFilesMove',
   'doFilesMakeDir',
   'doFilesShareLink',
   'doFilesDelete',
   'doFilesAddPath',
   'doFilesNavigateTo',
-  'doFilesPin',
-  'doFilesUnpin',
   'doFilesUpdateSorting',
   'selectFilesSorting',
   'selectToursEnabled',
@@ -335,5 +336,6 @@ export default connect(
   'doOpenCliTutorModal',
   'doSetCliOptions',
   'selectCliOptions',
+  'doSetPinning',
   withTour(withTranslation('files')(FilesPage))
 )
diff --git a/src/files/breadcrumbs/Breadcrumbs.js b/src/files/breadcrumbs/Breadcrumbs.js
@@ -59,7 +59,7 @@ const DropableBreadcrumb = ({ index, link, immutable, onAddFiles, onMove, onClic
           index === 0 && (immutable ? 'bg-charcoal-muted white' : 'bg-navy white'),
           immutable && (link.last || index === 0) && 'no-events',
           link.last && 'b', isOver && 'dragging')}
-        onClick={() => onClick(link.path)} onContextMenu={(ev) => index !== 0 && handleOnContextMenuHandle(ev)}>
+        onClick={() => onClick({ path: link.path })} onContextMenu={(ev) => index !== 0 && handleOnContextMenuHandle(ev)}>
         {link.name}
       </button>
     </span>

diff --git a/src/files/context-menu/ContextMenu.js b/src/files/context-menu/ContextMenu.js
@@ -44,7 +44,7 @@ class ContextMenu extends React.Component {
   render () {
     const {
       t, onRename, onDelete, onDownload, onInspect, onShare,
-      translateX, translateY, className, isMfs, isUnknown, pinned, isCliTutorModeEnabled
+      translateX, translateY, className, isMfs, isUnknown, isCliTutorModeEnabled
     } = this.props
     return (
       <Dropdown className={className}>
@@ -75,10 +75,10 @@ class ContextMenu extends React.Component {
               {t('app:actions.inspect')}
             </Option>
           }
-          <Option onClick={this.wrap(pinned ? 'onUnpin' : 'onPin')} isCliTutorModeEnabled={isCliTutorModeEnabled}
+          <Option onClick={this.wrap('onPinning')} isCliTutorModeEnabled={isCliTutorModeEnabled}
             onCliTutorMode={this.wrap('onCliTutorMode', cliCmdKeys.PIN_OBJECT)}>
             <StrokePin className='w2 mr2 fill-aqua' />
-            { pinned ? t('app:actions.unpin') : t('app:actions.pinVerb') }
+            { t('app:actions.setPinning') }
           </Option>
           { !isUnknown && onDownload &&
             <Option onClick={this.wrap('onDownload')} isCliTutorModeEnabled={isCliTutorModeEnabled}

diff --git a/src/files/explore-form/FilesExploreForm.js b/src/files/explore-form/FilesExploreForm.js
@@ -36,7 +36,7 @@ class FilesExploreForm extends React.Component {
         path = `/ipfs/${path}`
       }
 
-      this.props.onBrowse(path)
+      this.props.onBrowse({ path })
       this.setState({ path: '' })
     }
   }

diff --git a/src/files/file/File.js b/src/files/file/File.js
@@ -10,14 +10,15 @@ import { useDrag, useDrop } from 'react-dnd'
 // Components
 import GlyphDots from '../../icons/GlyphDots'
 import GlyphPin from '../../icons/GlyphPin'
+import GlyphPinCloud from '../../icons/GlyphPinCloud'
 import Tooltip from '../../components/tooltip/Tooltip'
 import Checkbox from '../../components/checkbox/Checkbox'
 import FileIcon from '../file-icon/FileIcon'
 import CID from 'cids'
 import { NativeTypes } from 'react-dnd-html5-backend'
 
 const File = ({
-  name, type, size, cid, path, pinned, t, selected, focused, translucent, coloured, cantSelect, cantDrag, isMfs,
+  name, type, size, cid, path, pinned, t, selected, focused, translucent, coloured, cantSelect, cantDrag, isMfs, isRemotePin,
   onAddFiles, onMove, onSelect, onNavigate, handleContextMenuClick
 }) => {
   const dotsWrapper = useRef()
@@ -126,9 +127,12 @@ const File = ({
           </div>
         </button>
 
-        <div className='ph2 pv1 flex-none dn db-l tr mw3'>
-          { pinned && <div className='bg-snow br-100 o-70' title={t('pinned')} style={{ width: '1.5rem', height: '1.5rem' }}>
-            <GlyphPin className='fill-teal-muted' />
+        <div className='ph2 pv1 flex-none dn db-l tr mw3 w-20'>
+          { pinned && !isRemotePin && <div className='br-100 o-70' title={t('pinned')} style={{ width: '2rem', height: '2rem' }}>
+            <GlyphPin className='fill-aqua' />
+          </div> }
+          { isRemotePin && <div className='br-100 o-70' title={t('pinned')} style={{ width: '2rem', height: '2rem' }}>
+            <GlyphPinCloud className='fill-aqua' />
           </div> }
         </div>
         <div className='size pl2 pr4 pv1 flex-none f6 dn db-l tr charcoal-muted w-10 mw4'>