Feature - CLI Tutor Mode

.gitignore

@@ -21,3 +21,4 @@ yarn-debug.log*
 yarn-error.log*
 
 .vscode
+.idea

public/locales/en/files.json

@@ -36,7 +36,8 @@
     "save": "Save",
     "pin": "Pin",
     "unpin": "Unpin",
-    "unselectAll": "Unselect all"
+    "unselectAll": "Unselect all",
+    "copyCommand": "Copy"
   },
   "shareModal": {
     "title": "Share files",
@@ -120,5 +121,8 @@
   "more": "More",
   "files": "Files",
   "cidNotFileNorDir": "The current link isn't a file, nor a directory. Try to <0>inspect</0> it instead.",
-  "sortBy": "Sort items by {name}"
+  "sortBy": "Sort items by {name}",
+  "cliModal": {
+    "description": "Paste the following into your terminal to do this task in IPFS via the command line. Remember that you'll need to replace placeholders with your specific parameters."
+  }
 }

public/locales/en/peers.json

@@ -14,7 +14,7 @@
   "insertPeerAddress": "Insert the peer address you want to connect to.",
   "add": "Add",
   "example": "Example:",
-  "plusPeers": "+ {number} more peers", 
+  "plusPeers": "+ {number} more peers",
   "tour": {
     "back": "Back",
     "close": "Close",
@@ -34,5 +34,13 @@
       "title": "Peers table",
       "paragraph1": "Check the IDs of the connected peers, their address and approximate location."
     }
+  },
+  "actions": {
+    "edit": "Change",
+    "close": "Close",
+    "copyCommand": "Copy"
+  },
+  "cliModal": {
+    "description": "Paste the following into your terminal to do this task in IPFS via the command line. Remember that you'll need to replace placeholders with your specific parameters."
   }
 }

public/locales/en/settings.json

@@ -6,18 +6,25 @@
   "language": "Language",
   "analytics": "Analytics",
   "api": "API Address",
+  "cliTutorMode": "CLI Tutor Mode",
   "config": "IPFS Config",
   "languageModal": {
     "title": "Change language",
     "description": "Pick your preferred language.",
     "translationProjectIntro": "Add or improve translations and make IPFS better for everyone!",
     "translationProjectLink": "Join the IPFS Translation Project"
   },
+  "cliModal": {
+    "description": "Paste the following into your terminal to do this task in IPFS via the command line. Remember that you'll need to replace placeholders with your specific parameters.",
+    "extraNotes": "If you've made changes to the config in this page's code editor that you'd like to save, click the download icon next to the copy button to download it as a JSON file."
+  },
   "actions": {
     "edit": "Change",
-    "close": "Close"
+    "close": "Close",
+    "copyCommand": "Copy"
   },
   "apiDescription": "<0>If your node is configured with a <1>custom API address</1>, including a port other than the default 5001, enter it here to update your config file.</0>",
+  "cliDescription": "<0>Enable this option to display a \"view code\" <1></1> icon next to common IPFS commands. Clicking it opens a modal with that command's CLI code, so you can paste it into the IPFS command-line interface in your terminal.</0>",
   "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.",
@@ -62,6 +69,9 @@
       "details": "Records JavaScript error messages and stack traces that occur while using the app, where possible. It is very helpful to know when the app is not working for you, but <1>error messages may include identifiable information</1> like CIDs or file paths, so only enable this if you are comfortable sharing that information with us."
     }
   },
+  "cliToggle": {
+    "label": "Enable command-line interface (CLI) tutor mode"
+  },
   "tour": {
     "back": "Back",
     "close": "Close",

public/locales/en/welcome.json

@@ -41,5 +41,12 @@
       "paragraph2": "If you aren't connected to the IPFS API, this page also appears in place of some other pages, with hints for how to get connected.",
       "paragraph3": "You can visit this page from anywhere in the app by clicking the IPFS cube logo in the navigation bar."
     }
+  },
+  "actions": {
+    "close": "Close",
+    "copyCommand": "Copy"
+  },
+  "cliModal": {
+    "description": "Paste the following into your terminal to do this task in IPFS via the command line. Remember that you'll need to replace placeholders with your specific parameters."
   }
 }

src/bundles/cli-tutor-mode.js

@@ -0,0 +1,74 @@
+import { createAsyncResourceBundle, createSelector } from 'redux-bundler'
+
+const bundle = createAsyncResourceBundle({
+  name: 'cliTutorMode',
+  actionBaseType: 'CLI_TUTOR_MODE_TOGGLE',
+  persist: true,
+  checkIfOnline: false,
+  getPromise: () => {}
+})
+
+bundle.reactIsCliTutorModeEnabled = createSelector(
+  'selectIsCliTutorModeEnabled',
+  (isCliTutorModeEnabled) => {
+    const isEnabled = Boolean(JSON.parse(localStorage.getItem('isCliTutorModeEnabled')))
+
+    if (isCliTutorModeEnabled !== undefined && isCliTutorModeEnabled !== isEnabled) {
+      localStorage.setItem('isCliTutorModeEnabled', isCliTutorModeEnabled)
+    }
+  }
+)
+
+bundle.selectIsCliTutorModeEnabled = state => state.cliTutorMode.isCliTutorModeEnabled
+
+bundle.selectIsCliTutorModalOpen = state => !!state.cliTutorMode.showCliTutorModal
+
+bundle.selectCliOptions = state => state.cliTutorMode.cliOptions
+
+bundle.reducer = (state = {}, action) => {
+  if (action.type === 'CLI_TUTOR_MODE_TOGGLE') {
+    return { ...state, isCliTutorModeEnabled: action.payload }
+  }
+  if (action.type === 'CLI_TUTOR_MODAL_ENABLE') {
+    return { ...state, showCliTutorModal: action.payload }
+  }
+  if (action.type === 'CLI_OPTIONS') {
+    return { ...state, cliOptions: action.payload }
+  }
+
+  return state
+}
+
+bundle.doToggleCliTutorMode = key => ({ dispatch }) => {
+  dispatch({
+    type: 'CLI_TUTOR_MODE_TOGGLE',
+    payload: key
+  })
+}
+
+bundle.doSetCliOptions = cliOptions => ({ dispatch }) => {
+  dispatch({
+    type: 'CLI_OPTIONS',
+    payload: cliOptions
+  })
+}
+
+bundle.doOpenCliTutorModal = openModal => ({ dispatch }) => {
+  dispatch({
+    type: 'CLI_TUTOR_MODAL_ENABLE',
+    payload: openModal
+  })
+}
+
+bundle.doOpenCliTutorModal = openModal => ({ dispatch }) => {
+  dispatch({
+    type: 'CLI_TUTOR_MODAL_ENABLE',
+    payload: openModal
+  })
+}
+
+bundle.init = store => {
+  const isEnabled = Boolean(JSON.parse(localStorage.getItem('isCliTutorModeEnabled')))
+  return store.doToggleCliTutorMode(isEnabled)
+}
+export default bundle

src/bundles/files/actions.js

@@ -54,7 +54,7 @@ const fileFromStats = ({ cumulativeSize, type, size, cid, name, path, pinned, is
  * @returns {string}
  */
 // TODO: use sth else
-const realMfsPath = (path) => {
+export const realMfsPath = (path) => {
   if (path.startsWith('/files')) {
     return path.substr('/files'.length) || '/'
   }

src/bundles/files/consts.js

@@ -40,3 +40,46 @@ export const DEFAULT_STATE = {
   finished: [],
   failed: []
 }
+
+export const cliCmdKeys = {
+  DOWNLOAD_OBJECT_COMMAND: 'downloadObjectCommand',
+  DELETE_FILE_FROM_IPFS: 'deleteFileFromIpfs',
+  UPDATE_IPFS_CONFIG: 'updateIpfsConfig',
+  PIN_OBJECT: 'pinObject',
+  RENAME_IPFS_OBJECT: 'renameObject',
+  ADD_FILE: 'addNewFile',
+  ADD_DIRECTORY: 'addNewDirectory',
+  CREATE_NEW_DIRECTORY: 'createNewDirectory',
+  FROM_IPFS: 'fromIpfs',
+  ADD_NEW_PEER: 'addNewPeer'
+}
+
+export const cliCommandList = {
+  [cliCmdKeys.UPDATE_IPFS_CONFIG]: () => 'ipfs config replace <path-to-settings.json>',
+  /**
+   * @param {string} filePath
+   */
+  [cliCmdKeys.DELETE_FILE_FROM_IPFS]: (filePath) => `ipfs files rm -r "${filePath}"`,
+  /**
+   * @param {string} cid
+   */
+  [cliCmdKeys.DOWNLOAD_OBJECT_COMMAND]: (cid) => `ipfs get ${cid}`,
+  /**
+   * @param {string} cid
+   * @param {string} op
+   */
+  [cliCmdKeys.PIN_OBJECT]: (cid, op) => `ipfs pin ${op} ${cid}`,
+  /**
+   * @param {string} filePath
+   * @param {string} fileName
+   */
+  [cliCmdKeys.RENAME_IPFS_OBJECT]: (filePath, fileName) => {
+    const prefix = filePath.replace(fileName, '').trim()
+    return `ipfs files mv "${filePath}" "${prefix}<new-name>"`
+  },
+  [cliCmdKeys.ADD_FILE]: () => 'ipfs add <file-name>',
+  [cliCmdKeys.ADD_DIRECTORY]: () => 'ipfs add -r <folder-name>',
+  [cliCmdKeys.CREATE_NEW_DIRECTORY]: () => 'ipfs files mkdir <folder-name>',
+  [cliCmdKeys.FROM_IPFS]: () => 'ipfs cp <content-path-or-cid> <dest-name>',
+  [cliCmdKeys.ADD_NEW_PEER]: () => 'ipfs swarm connect <peer-multiaddr>'
+}

src/bundles/index.js

@@ -21,6 +21,7 @@ import ipfsDesktop from './ipfs-desktop'
 import repoStats from './repo-stats'
 import createAnalyticsBundle from './analytics'
 import experimentsBundle from './experiments'
+import cliTutorModeBundle from './cli-tutor-mode'
 
 export default composeBundles(
   createCacheBundle({
@@ -46,5 +47,6 @@ export default composeBundles(
   experimentsBundle,
   ipfsDesktop,
   repoStats,
+  cliTutorModeBundle,
   createAnalyticsBundle({})
 )

src/components/api-address-form/ApiAddressForm.js

@@ -18,6 +18,7 @@ const ApiAddressForm = ({ t, doUpdateIpfsApiAddress, ipfsApiAddress = '' }) => {
       onSubmit(event)
     }
   }
+
   return (
     <form onSubmit={onSubmit}>
       <label htmlFor='api-address' className='db f7 mb2 ttu tracked charcoal pl1'>{t('apiAddressForm.apiLabel')}</label>

src/components/button/Button.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import './Button.css'
 
-const Button = ({ bg = 'bg-teal', color = 'white', fill = 'white', className = '', disabled, danger, minWidth = 140, children, style, ...props }) => {
+const Button = ({ bg = 'bg-teal', color = 'white', fill = 'white', className = '', disabled, danger, minWidth = 86, children, style, ...props }) => {
   const bgClass = danger ? 'bg-red' : disabled ? 'bg-gray-muted' : bg
   const fillClass = danger ? 'fill-white' : disabled ? 'fill-snow' : fill
   const colorClass = danger ? 'white' : disabled ? 'light-gray' : color

src/components/cli-tutor-mode/CliTutorMode.js

@@ -0,0 +1,107 @@
+import React, { Fragment } from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'redux-bundler-react'
+
+// Components
+import { Modal, ModalBody, ModalActions } from '../modal/Modal'
+import StrokeCode from '../../icons/StrokeCode'
+import Button from '../button/Button'
+import Overlay from '../overlay/Overlay'
+import Shell from '../shell/Shell'
+import StrokeDownload from '../../icons/StrokeDownload'
+import { cliCmdKeys, cliCommandList } from '../../bundles/files/consts'
+
+export const CliTutorialModal = ({ command, t, onLeave, className, downloadConfig, ...props }) => {
+  const onClickCopyToClipboard = (cmd) => {
+    navigator.clipboard.writeText(cmd).then(() => {
+      onLeave()
+    })
+  }
+
+  return (
+    <Modal {...props} className={className} onCancel={onLeave} style={{ maxWidth: '40em' }}>
+      <ModalBody icon={StrokeCode}>
+        <p className='charcoal w-80 center' style={{ lineHeight: '1.3' }}>
+          {t('cliModal.description')}
+        </p>
+        <p className='charcoal-muted w-90 center'>
+          { command && command === cliCommandList[cliCmdKeys.UPDATE_IPFS_CONFIG]() ? t('cliModal.extraNotes') : ''}
+        </p>
+        <div>
+          <Shell className='tl' title="Shell">
+            <code className='db'><b className='no-select'>$ </b>{command}</code>
+          </Shell>
+        </div>
+      </ModalBody>
+
+      <ModalActions>
+        <div>
+          <Button className='ma2 tc' bg='bg-gray' onClick={onLeave}>{t('actions.close')}</Button>
+        </div>
+        <div className='flex items-center'>
+          {
+            command && command === cliCommandList[cliCmdKeys.UPDATE_IPFS_CONFIG]()
+              ? <StrokeDownload onClick={downloadConfig} className='dib fill-link pointer' style={{ height: 38 }}
+              /> : <div />
+          }
+          <Button className='ma2 tc' onClick={() => onClickCopyToClipboard(command)}>
+            {t('actions.copyCommand')}
+          </Button>
+        </div>
+      </ModalActions>
+    </Modal>
+  )
+}
+
+const CliTutorMode = ({
+  t, filesPage, isCliTutorModeEnabled, onLeave, isCliTutorModalOpen, command, config, showIcon, doOpenCliTutorModal
+}) => {
+  const downloadConfig = (config) => {
+    const url = window.URL.createObjectURL(new Blob([config]))
+    const link = document.createElement('a')
+    link.style.display = 'none'
+    link.href = url
+    link.download = 'settings.json'
+    document.body.appendChild(link)
+    link.click()
+    window.URL.revokeObjectURL(url)
+  }
+
+  if (isCliTutorModeEnabled) {
+    if (filesPage) {
+      return <CliTutorialModal className='outline-0' onLeave={onLeave} t={t} command={command}/>
+    }
+    return (
+      <Fragment>
+        {
+          showIcon
+            ? <StrokeCode onClick={() => doOpenCliTutorModal(true)} className='dib fill-link pointer mh2' style={{ height: 44 }}/>
+            : <div/>
+        }
+        <Overlay show={isCliTutorModalOpen} onLeave={() => doOpenCliTutorModal(false)}>
+          <CliTutorialModal className='outline-0' onLeave={() => doOpenCliTutorModal(false)} t={t} command={command}
+            downloadConfig={() => downloadConfig(config)}/>
+        </Overlay>
+      </Fragment>
+    )
+  }
+
+  return null
+}
+
+CliTutorialModal.propTypes = {
+  onLeave: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired,
+  command: PropTypes.string.isRequired
+}
+
+CliTutorialModal.defaultProps = {
+  className: ''
+}
+
+export default connect(
+  'doOpenCliTutorModal',
+  'selectIsCliTutorModalOpen',
+  'selectIsCliTutorModeEnabled',
+  CliTutorMode
+)