@electerm/electerm-react 2.12.0 → 2.13.0

package/client/common/file-drop-utils.js

@@ -29,7 +29,10 @@ export const getFilePath = (file) => {
 export const getDropFileList = (dataTransfer) => {
   const fromFile = dataTransfer.getData('fromFile')
   if (fromFile) {
-    return [JSON.parse(fromFile)]
+    const parsed = JSON.parse(fromFile)
+    return Array.isArray(parsed)
+      ? parsed
+      : [parsed]
   }
 
   const { files } = dataTransfer

package/client/components/file-transfer/remote2remote-handler.jsx

@@ -0,0 +1,176 @@
+import { autoRun } from 'manate'
+import copy from 'json-deep-copy'
+import uid from '../../common/uid'
+import resolve from '../../common/resolve'
+import fs from '../../common/fs'
+import { typeMap } from '../../common/constants'
+import { getFolderFromFilePath, getLocalFileInfo } from '../sftp/file-read'
+
+export default class Remote2RemoteHandler {
+  constructor (props) {
+    this.props = props
+    this.id = uid()
+  }
+
+  get store () {
+    return window.store
+  }
+
+  get fromFile () {
+    return this.props.fromFile
+  }
+
+  get fromPath () {
+    const { path, name } = this.fromFile
+    return resolve(path, name)
+  }
+
+  get toPath () {
+    return this.props.toPath
+  }
+
+  buildTempPath = () => {
+    const { name, ext, base } = getFolderFromFilePath(this.fromPath, true)
+    const tail = uid()
+    const tempName = ext
+      ? `${base}-${tail}.${ext}`
+      : `${name}-${tail}`
+    return resolve(window.pre.tempDir, tempName)
+  }
+
+  buildStep1Transfer = () => {
+    const {
+      title,
+      tabType,
+      sourceTabId,
+      sourceHost
+    } = this.props
+    const transfer = {
+      id: uid(),
+      typeFrom: typeMap.remote,
+      typeTo: typeMap.local,
+      fromPath: this.fromPath,
+      toPath: this.tempPath,
+      tabId: sourceTabId,
+      host: sourceHost,
+      title,
+      tabType,
+      operation: '',
+      remote2remoteStep: 1,
+      remote2remoteId: this.id
+    }
+    return transfer
+  }
+
+  buildStep2Transfer = (fromFile) => {
+    const {
+      targetTabId,
+      targetHost,
+      targetTitle,
+      targetTabType
+    } = this.props
+    const transfer = {
+      id: uid(),
+      typeFrom: typeMap.local,
+      typeTo: typeMap.remote,
+      fromPath: this.tempPath,
+      toPath: this.toPath,
+      fromFile,
+      tabId: targetTabId,
+      host: targetHost,
+      title: targetTitle,
+      tabType: targetTabType,
+      operation: '',
+      remote2remoteStep: 2,
+      remote2remoteId: this.id,
+      originalId: this.step1Transfer?.id
+    }
+    return transfer
+  }
+
+  start = () => {
+    this.tempPath = this.buildTempPath()
+    this.step1Transfer = this.buildStep1Transfer()
+    this.store.addTransferList([copy(this.step1Transfer)])
+    this.startWatch()
+  }
+
+  startWatch = () => {
+    this.ref = autoRun(() => {
+      this.tick()
+      return this.store.transferHistory
+    })
+    this.ref.start()
+  }
+
+  stopWatch = () => {
+    this.ref?.stop()
+    this.ref = null
+  }
+
+  tick = async () => {
+    const step1 = this.findHistory(this.step1Transfer?.id)
+
+    if (!this.step2Transfer) {
+      if (this.creatingStep2) {
+        return
+      }
+      if (!step1) {
+        return
+      }
+      if (step1.error) {
+        return this.finish(step1.error)
+      }
+      this.creatingStep2 = true
+      const localFromFile = await getLocalFileInfo(this.tempPath).catch(() => null)
+      if (!localFromFile) {
+        this.creatingStep2 = false
+        return this.finish('local temp file/folder not found')
+      }
+      this.step2Transfer = this.buildStep2Transfer(localFromFile)
+      this.creatingStep2 = false
+      this.store.addTransferList([copy(this.step2Transfer)])
+      return
+    }
+
+    const step2 = this.findHistory(this.step2Transfer.id)
+    if (!step2) {
+      return
+    }
+
+    return this.finish(step2.error)
+  }
+
+  findHistory = (transferId) => {
+    if (!transferId) {
+      return null
+    }
+    return this.store.transferHistory.find(item => {
+      return item.id === transferId || item.originalId === transferId
+    })
+  }
+
+  cleanup = async () => {
+    if (!this.tempPath) {
+      return
+    }
+    await fs.rmrf(this.tempPath).catch(() => {})
+  }
+
+  finish = async (error) => {
+    if (this.finished) {
+      return
+    }
+    this.finished = true
+    this.stopWatch()
+    await this.cleanup()
+    this.props.onDone?.({
+      id: this.id,
+      error
+    })
+  }
+
+  stop = async () => {
+    await this.finish()
+  }
+}

package/client/components/file-transfer/remote2remote-handlers.jsx

@@ -0,0 +1,81 @@
+import { Component } from 'react'
+import resolve from '../../common/resolve'
+import { typeMap } from '../../common/constants'
+import { refsStatic } from '../common/ref'
+import Remote2RemoteHandler from './remote2remote-handler'
+
+const handlerRefId = 'remote2remote-handlers'
+
+export default class Remote2RemoteHandlers extends Component {
+  constructor (props) {
+    super(props)
+    this.handlers = new Map()
+  }
+
+  componentDidMount () {
+    refsStatic.add(handlerRefId, this)
+  }
+
+  componentWillUnmount () {
+    refsStatic.remove(handlerRefId)
+    this.handlers.forEach(handler => {
+      handler.stop()
+    })
+    this.handlers.clear()
+  }
+
+  canHandle = ({ fromFile, targetHost }) => {
+    return fromFile?.type === typeMap.remote &&
+      fromFile?.host &&
+      targetHost &&
+      fromFile.host !== targetHost &&
+      fromFile?.tabId
+  }
+
+  createHandler = ({ fromFile, targetPathBase, targetTab }) => {
+    const handler = new Remote2RemoteHandler({
+      fromFile,
+      toPath: resolve(targetPathBase, fromFile.name),
+      sourceHost: fromFile.host,
+      sourceTabId: fromFile.tabId,
+      title: fromFile.title,
+      tabType: fromFile.tabType,
+      targetHost: targetTab.host,
+      targetTabId: targetTab.id,
+      targetTitle: targetTab.title || targetTab.host,
+      targetTabType: targetTab.type,
+      onDone: this.onDone
+    })
+    this.handlers.set(handler.id, handler)
+    handler.start()
+  }
+
+  onDone = ({ id, error }) => {
+    this.handlers.delete(id)
+    if (error) {
+      window.store.onError(new Error(error))
+    }
+  }
+
+  onRemote2RemoteDrop = ({ fromFiles, toFile, targetTab }) => {
+    const targetPathBase = resolve(toFile.path, toFile.name)
+    const targetHost = targetTab?.host
+    let handled = false
+    for (const fromFile of fromFiles) {
+      if (!this.canHandle({ fromFile, targetHost })) {
+        continue
+      }
+      handled = true
+      this.createHandler({
+        fromFile,
+        targetPathBase,
+        targetTab
+      })
+    }
+    return handled
+  }
+
+  render () {
+    return null
+  }
+}

package/client/components/main/main.jsx

@@ -14,6 +14,7 @@ import Resolutions from '../rdp/resolution-edit'
 import TerminalInteractive from '../terminal/terminal-interactive'
 import ConfirmModalStore from '../file-transfer/conflict-resolve.jsx'
 import TransferQueue from '../file-transfer/transfer-queue'
+import Remote2RemoteHandlers from '../file-transfer/remote2remote-handlers.jsx'
 import TerminalCmdSuggestions from '../terminal/terminal-command-dropdown'
 import TransportsActionStore from '../file-transfer/transports-action-store.jsx'
 import classnames from 'classnames'
@@ -280,6 +281,7 @@ export default auto(function Index (props) {
           {...conflictStoreProps}
           config={config}
         />
+        <Remote2RemoteHandlers />
         <Resolutions {...resProps} />
         <InfoModal {...infoModalProps} />
         <RightSidePanel {...rightPanelProps}>

package/client/components/profile/profile-form-ftp.jsx

@@ -26,7 +26,7 @@ export default function ProfileFormSsh (props) {
         {...formItemLayout}
         label={e('password')}
         hasFeedback
-        name={['rdp', 'password']}
+        name={['ftp', 'password']}
       >
         <Password />
       </FormItem>

package/client/components/sftp/file-item.jsx

@@ -225,7 +225,21 @@ export default class FileSection extends React.Component {
       ? onDragCls + ' ' + onMultiDragCls
       : onDragCls
     addClass(this.domRef.current, cls)
-    e.dataTransfer.setData('fromFile', JSON.stringify(this.props.file))
+    const transferProps = createTransferProps(this.props)
+    const selected = this.isSelected(this.props.file.id)
+    const dragFiles = selected
+      ? this.props.getSelectedFiles()
+      : [this.props.file]
+    const filesWithMeta = dragFiles.map(file => {
+      return {
+        ...file,
+        host: this.props.tab?.host,
+        tabType: this.props.tab?.type,
+        tabId: transferProps.tabId,
+        title: transferProps.title
+      }
+    })
+    e.dataTransfer.setData('fromFile', JSON.stringify(filesWithMeta))
   }
 
   getDropFileList = data => {
@@ -283,6 +297,23 @@ export default class FileSection extends React.Component {
     } = toFile
 
     let operation = ''
+    const targetHost = this.props.tab?.host
+    const isCrossHostRemoteDrop = !fromFileManager &&
+      fromType === typeMap.remote &&
+      toType === typeMap.remote &&
+      fromFiles.every(file => file?.host && file.host !== targetHost)
+
+    if (isCrossHostRemoteDrop) {
+      const handled = refsStatic.get('remote2remote-handlers')?.onRemote2RemoteDrop({
+        fromFiles,
+        toFile,
+        targetTab: this.props.tab
+      })
+      if (handled) {
+        return
+      }
+    }
+
     // same side and drop to file = drop to folder
     if (!fromFileManager && fromType === toType && !isDirectoryTo) {
       return

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electerm/electerm-react",
-  "version": "2.12.0",
+  "version": "2.13.0",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",