@electerm/electerm-react 1.38.60 → 1.38.70

package/client/components/sftp/{confirm-modal.jsx → confirm-modal-store.jsx}

@@ -3,6 +3,7 @@
  *
  */
 
+import { Component } from '../common/react-subx'
 import { Modal, Button } from 'antd'
 import { isString } from 'lodash-es'
 import AnimateText from '../common/animate-text'
@@ -23,42 +24,51 @@ function formatTimeAuto (strOrDigit) {
   return formatTime(strOrDigit * 1000)
 }
 
-export default (props) => {
-  if (!props.transferToConfirm) {
-    return null
-  }
-  const {
-    fromPath,
-    toPath,
-    fromFile: {
-      isDirectory,
-      name,
-      id: fileId,
-      modifyTime: modifyTimeFrom,
-      size: sizeFrom,
-      type: typeFrom
-    },
-    toFile: {
-      modifyTime: modifyTimeTo,
-      size: sizeTo,
-      type: typeTo
-    },
-    id,
-    transferGroupId
-  } = props.transferToConfirm
-  function act (action) {
-    props.modifier({
-      transferToConfirm: null
-    })
+export default class ConfirmModalStore extends Component {
+  act (action) {
+    const { store } = this.props
+    const {
+      transferToConfirm
+    } = store
+    store.setState(
+      'transferToConfirm', {}
+    )
+    const {
+      fromFile: {
+        id: fileId
+      },
+      id,
+      transferGroupId
+    } = transferToConfirm
     postMessage({
       transferGroupId,
       fileId,
       id,
-      transfer: props.transferToConfirm,
+      transfer: transferToConfirm,
       action
     })
   }
-  function renderContent () {
+
+  renderContent () {
+    const {
+      transferToConfirm
+    } = this.props.store
+    const {
+      fromPath,
+      toPath,
+      fromFile: {
+        isDirectory,
+        name,
+        modifyTime: modifyTimeFrom,
+        size: sizeFrom,
+        type: typeFrom
+      },
+      toFile: {
+        modifyTime: modifyTimeTo,
+        size: sizeTo,
+        type: typeTo
+      }
+    } = transferToConfirm
     const action = isDirectory ? e('merge') : e('replace')
     const typeTxt = isDirectory ? e('folder') : e('file')
     const Icon = isDirectory ? FolderOutlined : FileOutlined
@@ -95,27 +105,39 @@ export default (props) => {
       </div>
     )
   }
-  function renderFooter () {
+
+  renderFooter () {
+    const {
+      transferToConfirm
+    } = this.props.store
+    if (!transferToConfirm) {
+      return null
+    }
+    const {
+      fromFile: {
+        isDirectory
+      }
+    } = transferToConfirm
     return (
       <div className='mgq1t pd1y alignright'>
         <Button
           type='dashed'
           className='mg1l'
-          onClick={() => act(fileActions.cancel)}
+          onClick={() => this.act(fileActions.cancel)}
         >
           {e('cancel')}
         </Button>
         <Button
           type='dashed'
           className='mg1l'
-          onClick={() => act(fileActions.skip)}
+          onClick={() => this.act(fileActions.skip)}
         >
           {e('skip')}
         </Button>
         <Button
           type='dashed'
           className='mg1l'
-          onClick={() => act(fileActions.skipAll)}
+          onClick={() => this.act(fileActions.skipAll)}
         >
           {e('skipAll')}
         </Button>
@@ -123,7 +145,7 @@ export default (props) => {
           danger
           className='mg1l'
           onClick={
-            () => act(fileActions.mergeOrOverwrite)
+            () => this.act(fileActions.mergeOrOverwrite)
           }
         >
           {isDirectory ? e('merge') : e('overwrite')}
@@ -132,7 +154,7 @@ export default (props) => {
           type='primary'
           className='mg1l'
           onClick={
-            () => act(fileActions.rename)
+            () => this.act(fileActions.rename)
           }
         >
           {e('rename')}
@@ -148,7 +170,7 @@ export default (props) => {
                 : e('overwriteDesc')
             }
             onClick={
-              () => act(fileActions.mergeOrOverwriteAll)
+              () => this.act(fileActions.mergeOrOverwriteAll)
             }
           >
             {isDirectory ? e('mergeAll') : e('overwriteAll')}
@@ -158,7 +180,7 @@ export default (props) => {
             className='mg1l'
             title={e('renameDesc')}
             onClick={
-              () => act(fileActions.renameAll)
+              () => this.act(fileActions.renameAll)
             }
           >
             {e('renameAll')}
@@ -167,18 +189,27 @@ export default (props) => {
       </div>
     )
   }
-  const modalProps = {
-    open: true,
-    width: 500,
-    title: e('fileConflict'),
-    footer: renderFooter(),
-    onCancel: () => act(fileActions.cancel)
+
+  render () {
+    const {
+      transferToConfirm
+    } = this.props.store
+    if (!transferToConfirm.id) {
+      return null
+    }
+    const modalProps = {
+      open: true,
+      width: 500,
+      title: e('fileConflict'),
+      footer: this.renderFooter(),
+      onCancel: () => this.act(fileActions.cancel)
+    }
+    return (
+      <Modal
+        {...modalProps}
+      >
+        {this.renderContent()}
+      </Modal>
+    )
   }
-  return (
-    <Modal
-      {...modalProps}
-    >
-      {renderContent()}
-    </Modal>
-  )
 }

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

@@ -168,6 +168,7 @@ export default class FileSection extends React.Component {
         fromPath,
         toPath,
         id: generate(),
+        host: this.props.tab?.host,
         ...createTransferProps(this.props),
         operation
       })
@@ -804,6 +805,7 @@ export default class FileSection extends React.Component {
     }
     toPath = resolve(toPath, name)
     const obj = {
+      host: this.props.tab?.host,
       typeFrom: type,
       typeTo,
       fromPath: resolve(path, name),

package/client/components/sftp/sftp-entry.jsx

@@ -14,8 +14,10 @@ import {
   typeMap, maxSftpHistory, paneMap,
   eventTypes,
   fileTypeMap,
-  terminalSshConfigType, terminalSerialType,
-  unexpectedPacketErrorDesc, sftpRetryInterval,
+  terminalSshConfigType,
+  terminalSerialType,
+  unexpectedPacketErrorDesc,
+  sftpRetryInterval,
   commonActions
 } from '../../common/constants'
 import { hasFileInClipboardText } from '../../common/clipboard'
@@ -27,7 +29,6 @@ import ListTable from './list-table-ui'
 import deepCopy from 'json-deep-copy'
 import isValidPath from '../../common/is-valid-path'
 import memoizeOne from 'memoize-one'
-import TransportEntry from './transport-entry'
 import postMessage from '../../common/post-msg'
 import { runCmd } from '../terminal/terminal-apis'
 import * as owner from './owner-list'
@@ -58,9 +59,6 @@ export default class Sftp extends Component {
       onEditFile: false,
       ...this.defaultState(),
       loadingSftp: false,
-      transferToConfirm: null,
-      transferList: [],
-      pauseAll: false,
       inited: false
     }
     this.retryCount = 0
@@ -190,11 +188,27 @@ export default class Sftp extends Component {
   }, isEqual)
 
   initEvent () {
+    window.addEventListener('message', this.handleMsg)
     window.addEventListener('keydown', this.handleEvent)
   }
 
   destroyEvent () {
     window.removeEventListener('keydown', this.handleEvent)
+    window.removeEventListener('message', this.handleMsg)
+  }
+
+  handleMsg = event => {
+    const {
+      action,
+      sessionId,
+      type
+    } = event?.data || {}
+    if (
+      action === commonActions.sftpList &&
+      sessionId === this.props.sessionId
+    ) {
+      this[type + 'List']()
+    }
   }
 
   isActive () {
@@ -437,32 +451,28 @@ export default class Sftp extends Component {
     }
     const { type } = lastClickedFile
     const { inputFocus, onDelete } = this
+    e.stopPropagation()
     if (keyControlPressed(e) && keyPressed(e, 'keyA') && !inputFocus) {
-      e.stopPropagation()
       this.selectAll(type, e)
     } else if (keyPressed(e, 'arrowdown') && !inputFocus) {
-      e.stopPropagation()
       this.selectNext(type)
     } else if (keyPressed(e, 'arrowup') && !inputFocus) {
-      e.stopPropagation()
       this.selectPrev(type)
-    } else if (keyPressed(e, 'delete') && !inputFocus) {
-      e.stopPropagation()
+    } else if (
+      keyPressed(e, 'delete') &&
+      !inputFocus &&
+      !this.state.onEditFile
+    ) {
       this.onDel(type)
     } else if (keyPressed(e, 'enter') && !inputFocus && !onDelete) {
-      e.stopPropagation()
       this.enter(type, e)
     } else if (keyControlPressed(e) && keyPressed(e, 'keyC') && !inputFocus) {
-      e.stopPropagation()
       this.doCopy(type, e)
     } else if (keyControlPressed(e) && keyPressed(e, 'keyX') && !inputFocus) {
-      e.stopPropagation()
       this.doCut(type, e)
     } else if (keyControlPressed(e) && keyPressed(e, 'keyV') && !inputFocus) {
-      e.stopPropagation()
       this.doPaste(type, e)
     } else if (keyPressed(e, 'f5')) {
-      e.stopPropagation()
       this.onGoto(type)
     }
   }
@@ -496,11 +506,7 @@ export default class Sftp extends Component {
   }
 
   addTransferList = list => {
-    postMessage({
-      list,
-      action: commonActions.addTransfer,
-      sessionId: this.props.sessionId
-    })
+    window.store.addTransferList(list)
   }
 
   computeListHeight = () => {
@@ -568,10 +574,14 @@ export default class Sftp extends Component {
         return arr.map(item => {
           const { type } = item
           return {
-            ...pick(item, ['name', 'size', 'accessTime', 'modifyTime', 'mode', 'owner', 'group']),
+            ...pick(
+              item,
+              ['name', 'size', 'accessTime', 'modifyTime', 'mode', 'owner', 'group']
+            ),
             isDirectory: type === fileTypeMap.directory,
             type: typeMap.remote,
             path: remotePath,
+            isSymbol: type === fileTypeMap.link,
             id: generate()
           }
         })
@@ -711,8 +721,8 @@ export default class Sftp extends Component {
   ) => {
     const remote = []
     for (const r of remotes) {
-      const { type, name } = r
-      if (type === fileTypeMap.link) {
+      const { name } = r
+      if (r.isSymbol) {
         const linkPath = resolve(remotePath, name)
         let realpath = await sftp.readlink(linkPath)
           .catch(e => {
@@ -902,11 +912,8 @@ export default class Sftp extends Component {
         typeMap.remote,
         'lastClickedFile',
         'lastMataKey',
-        'transferToConfirm',
-        'transferList',
         'targetTransferType',
         'selectedFiles',
-        'pauseAll',
         'localGidTree',
         'remoteUidTree',
         'localUidTree',
@@ -1104,18 +1111,6 @@ export default class Sftp extends Component {
     const {
       id
     } = this.state
-    const prps = {
-      localList: this.localList,
-      remoteList: this.remoteList,
-      sftp: this.sftp,
-      sessionId: this.props.sessionId,
-      host: this.props.tab.host,
-      localListDebounce: this.localListDebounce,
-      remoteListDebounce: this.remoteListDebounce,
-      config: this.props.config,
-      tab: this.props.tab,
-      pid: this.props.pid
-    }
     const all = {
       className: 'sftp-wrap overhide relative',
       id: `id-${id}`,
@@ -1128,7 +1123,6 @@ export default class Sftp extends Component {
         {
           this.renderSections()
         }
-        <TransportEntry {...prps} />
       </div>
     )
   }

package/client/components/sftp/transfer-conflict-store.jsx

@@ -0,0 +1,291 @@
+/**
+ * pass transfer list from props
+ * when list changes, do transfer and other op
+ */
+
+import { Component } from '../common/react-subx'
+import { typeMap } from '../../common/constants'
+import {
+  getLocalFileInfo,
+  getRemoteFileInfo,
+  getFolderFromFilePath,
+  getFileExt,
+  checkFolderSize
+} from './file-read'
+import { findIndex, find } from 'lodash-es'
+import generate from '../../common/uid'
+import resolve from '../../common/resolve'
+
+export default class TransferConflictStore extends Component {
+  state = {
+    currentId: ''
+  }
+
+  componentDidMount () {
+    this.watchFile()
+  }
+
+  componentDidUpdate (prevProps) {
+    if (
+      prevProps._fileTransfers !== this.props._fileTransfers
+    ) {
+      this.watchFile()
+    }
+  }
+
+  localCheckExist = (path) => {
+    return getLocalFileInfo(path)
+  }
+
+  remoteCheckExist = (path, sessionId) => {
+    const sftp = window.sftps[sessionId]
+    return getRemoteFileInfo(sftp, path)
+      .then(r => r)
+      .catch(() => false)
+  }
+
+  checkExist = (type, path, sessionId) => {
+    return this[type + 'CheckExist'](path, sessionId)
+  }
+
+  rename = (tr, action, _renameId) => {
+    const isRemote = tr.typeTo === typeMap.remote
+    const { path, name } = getFolderFromFilePath(tr.toPath, isRemote)
+    const { base, ext } = getFileExt(name)
+    const renameId = _renameId || generate()
+    const newName = ext
+      ? `${base}(rename-${renameId}).${ext}`
+      : `${base}(rename-${renameId})`
+    const res = {
+      ...tr,
+      renameId,
+      newName,
+      oldName: base,
+      toPath: resolve(path, newName)
+    }
+    if (action) {
+      res.action = action
+    }
+    return res
+  }
+
+  updateTransferAction = (data) => {
+    const {
+      id,
+      action,
+      transfer
+    } = data
+    const {
+      fromFile
+    } = transfer
+    this.clear()
+    const { store } = this.props
+    let {
+      fileTransfers
+    } = store
+    const index = findIndex(fileTransfers, d => d.id === id)
+    if (index < 0) {
+      return store.setFileTransfers(fileTransfers)
+    }
+    fileTransfers[index].fromFile = fromFile
+    fileTransfers[index].action = action
+    if (action === 'skip') {
+      fileTransfers.splice(index, 1)
+    } else if (action === 'cancel') {
+      fileTransfers = fileTransfers.slice(0, index)
+    }
+    if (action.includes('All')) {
+      fileTransfers = fileTransfers.map((t, i) => {
+        if (i < index) {
+          return t
+        }
+        return {
+          ...t,
+          action: action.replace('All', '')
+        }
+      })
+    }
+    if (action.includes('rename')) {
+      fileTransfers[index] = this.rename(fileTransfers[index])
+    } else if (action === 'skipAll') {
+      fileTransfers.splice(index, 1)
+    }
+    store.setFileTransfers(fileTransfers)
+  }
+
+  tagTransferError = (id, errorMsg) => {
+    const { store } = this.props
+    const {
+      fileTransfers
+    } = store
+    const tr = find(fileTransfers, d => d.id === id)
+    if (!tr) {
+      return
+    }
+    window.store.addTransferHistory({
+      ...tr,
+      host: tr.host,
+      error: errorMsg,
+      finishTime: Date.now()
+    })
+    const index = findIndex(fileTransfers, d => d.id === id)
+    if (index >= 0) {
+      fileTransfers.splice(index, 1)
+    }
+    store.setFileTransfers(fileTransfers)
+  }
+
+  setConflict (tr) {
+    if (window.store.transferToConfirm.id) {
+      return
+    }
+    window.store.setState(
+      'transferToConfirm', tr
+    )
+  }
+
+  onDecision = (event) => {
+    if (
+      event &&
+      event.data &&
+      event.data.id === this.currentId
+    ) {
+      this.currentId = ''
+      this.updateTransferAction(event.data)
+      this.onConfirm = false
+      window.removeEventListener('message', this.onDecision)
+    }
+  }
+
+  waitForSignal = () => {
+    window.addEventListener('message', this.onDecision)
+  }
+
+  setCanTransfer = (fromFile, tr) => {
+    this.clear()
+    const {
+      store
+    } = this.props
+    const {
+      fileTransfers
+    } = store
+    const index = findIndex(fileTransfers, t => {
+      return t.id === tr.id
+    })
+    if (index >= 0) {
+      const up = {
+        action: 'transfer',
+        fromFile
+      }
+      Object.assign(fileTransfers[index], up)
+    } else {
+      fileTransfers[0].r = Math.random()
+    }
+    store.setFileTransfers(fileTransfers)
+  }
+
+  clear = () => {
+    this.currentId = ''
+  }
+
+  watchFile = async () => {
+    const { store } = this.props
+    const {
+      fileTransfers
+    } = store
+    if (!fileTransfers.length && this.currentId) {
+      return this.clear()
+    }
+    const tr = fileTransfers
+      .filter(t => {
+        return (
+          !t.action ||
+          !t.fromFile ||
+          t.fromFile.isDirectory
+        )
+      })[0]
+    if (!tr) {
+      this.onConfirm = false
+      return this.clear()
+    }
+    if (this.currentId) {
+      // fileTransfers[0].r = Math.random()
+      return store.setFileTransfers(fileTransfers)
+    }
+    this.currentId = tr.id
+    const {
+      typeFrom,
+      typeTo,
+      fromPath,
+      toPath,
+      id,
+      action,
+      renameId,
+      parentId,
+      skipConfirm,
+      sessionId
+    } = tr
+    const fromFile = tr.fromFile
+      ? tr.fromFile
+      : await this.checkExist(typeFrom, fromPath, sessionId)
+    if (!fromFile) {
+      this.currentId = ''
+      return this.tagTransferError(id, 'file not exist')
+    }
+    let toFile = false
+    if (renameId || parentId) {
+      toFile = false
+    } else if (fromPath === toPath && typeFrom === typeTo) {
+      toFile = true
+    } else {
+      toFile = await this.checkExist(typeTo, toPath, sessionId)
+    }
+    if (fromFile.isDirectory) {
+      const props = {
+        sftp: window.sftps[sessionId]
+      }
+      const skip = await checkFolderSize(props, fromFile)
+        .then(d => d && typeFrom !== typeTo)
+      if (!skip) {
+        return this.tagTransferError(id, 'folder too big or too many files in folder')
+      }
+      tr.zip = true
+      tr.skipExpand = true
+    }
+    if (fromPath === toPath && typeFrom === typeTo) {
+      return this.updateTransferAction({
+        id,
+        action: 'rename',
+        transfer: {
+          ...tr,
+          operation: 'cp',
+          fromFile
+        }
+      })
+    } else if (toFile && !action && !skipConfirm) {
+      this.waitForSignal(id)
+      if (!this.onConfirm) {
+        this.onConfirm = true
+        return this.setConflict({
+          ...tr,
+          fromFile,
+          toFile
+        })
+      }
+    } else if (toFile && !tr.fromFile && action) {
+      return this.updateTransferAction({
+        id,
+        action,
+        transfer: {
+          ...tr,
+          fromFile
+        }
+      })
+    }
+    this.setCanTransfer(fromFile, tr)
+  }
+
+  render () {
+    return null
+  }
+}