@electerm/electerm-react 2.12.0 → 2.13.6

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/rdp/rdp-session.jsx

@@ -601,35 +601,44 @@ export default class RdpSession extends PureComponent {
 
   render () {
     const { width: w, height: h } = this.props
-    const rdpProps = {
-      style: {
-        width: w + 'px',
-        height: h + 'px'
-      }
-    }
     const { width, height, loading, scaleViewport } = this.state
+    const innerWidth = w - 10
+    const innerHeight = h - 80
+    const wrapperStyle = {
+      width: innerWidth + 'px',
+      height: innerHeight + 'px',
+      overflow: scaleViewport ? 'hidden' : 'auto'
+    }
     const canvasProps = {
       width,
       height,
       tabIndex: 0
     }
-    if (scaleViewport) {
-      canvasProps.className = 'scale-viewport'
-    }
     const cls = `rdp-session-wrap session-v-wrap${scaleViewport ? ' scale-viewport' : ''}`
+    const sessProps = {
+      className: cls,
+      style: {
+        width: w + 'px',
+        height: h + 'px'
+      }
+    }
     const controlProps = this.getControlProps()
     return (
       <Spin spinning={loading}>
         <div
-          {...rdpProps}
-          className={cls}
+          {...sessProps}
         >
           {this.renderControl()}
-          <canvas
-            {...canvasProps}
-            ref={this.canvasRef}
-          />
           <RemoteFloatControl {...controlProps} />
+          <div
+            style={wrapperStyle}
+            className='rdp-scroll-wrapper s-scroll-wrapper'
+          >
+            <canvas
+              {...canvasProps}
+              ref={this.canvasRef}
+            />
+          </div>
         </div>
       </Spin>
     )

package/client/components/rdp/rdp.styl

@@ -9,7 +9,27 @@
     left: 0
     width: 100%
   &.scale-viewport
-    canvas
+    .rdp-scroll-wrapper canvas
       width: 100% !important
+      height: 100% !important
       object-fit: contain
 
+.s-scroll-wrapper
+  &::-webkit-scrollbar
+    width 16px
+    height 16px
+    background var(--main-darker)
+  &::-webkit-scrollbar-track
+    background var(--main-darker)
+    box-shadow inset 0 0 5px var(--main-darker)
+  &::-webkit-scrollbar-thumb
+    background var(--primary)
+    border-radius 0
+  &::-webkit-scrollbar-corner
+    background var(--main-darker)
+.rdp-scroll-wrapper
+  position relative
+  background var(--main)
+  z-index 299
+
+

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
@@ -739,6 +770,7 @@ export default class FileSection extends React.Component {
       typeTo,
       fromPath: resolve(path, name),
       toPath,
+      fromFile: file,
       id: generate(),
       ...createTransferProps(this.props),
       operation

package/client/components/sftp/file-read.js

@@ -22,6 +22,61 @@ export const getFileExt = fileName => {
   }
 }
 
+const modeDirectoryMask = 0o170000
+const modeDirectoryValue = 0o040000
+
+const toIsDirectory = (stat) => {
+  if (!stat) {
+    return false
+  }
+
+  if (typeof stat.isDirectory === 'function') {
+    return stat.isDirectory()
+  }
+
+  if (typeof stat.isDirectory === 'boolean') {
+    return stat.isDirectory
+  }
+
+  if (typeof stat.type === 'string') {
+    return stat.type === 'd'
+  }
+
+  if (typeof stat.type === 'number') {
+    return stat.type === 2
+  }
+
+  if (typeof stat.mode === 'number') {
+    return (stat.mode & modeDirectoryMask) === modeDirectoryValue
+  }
+
+  return false
+}
+
+const toIsSymbolicLink = (stat) => {
+  if (!stat) {
+    return false
+  }
+
+  if (typeof stat.isSymbolicLink === 'function') {
+    return stat.isSymbolicLink()
+  }
+
+  if (typeof stat.isSymbolicLink === 'boolean') {
+    return stat.isSymbolicLink
+  }
+
+  if (typeof stat.type === 'string') {
+    return stat.type === 'l'
+  }
+
+  if (typeof stat.type === 'number') {
+    return stat.type === 3
+  }
+
+  return false
+}
+
 export const getFolderFromFilePath = (filePath, isRemote) => {
   const sep = isRemote ? '/' : window.pre.sep
   const arr = filePath.split(sep)
@@ -54,8 +109,8 @@ export const getLocalFileInfo = async (filePath) => {
     type: 'local',
     ...getFolderFromFilePath(filePath, false),
     id: generate(),
-    isDirectory: statr.isDirectory,
-    isSymbolicLink: stat.isSymbolicLink
+    isDirectory: toIsDirectory(statr),
+    isSymbolicLink: toIsSymbolicLink(stat)
   }
 }
 
@@ -71,6 +126,6 @@ export const getRemoteFileInfo = async (sftp, filePath) => {
     type: 'remote',
     ...getFolderFromFilePath(filePath, true),
     id: generate(),
-    isDirectory: stat.isDirectory
+    isDirectory: toIsDirectory(stat)
   }
 }

package/client/components/spice/spice-session.jsx

@@ -269,20 +269,23 @@ export default class SpiceSession extends PureComponent {
     }
     const cls = `spice-session-wrap session-v-wrap${scaleViewport ? ' scale-viewport' : ''}`
     const contrlProps = this.getControlProps()
+    const sessProps = {
+      className: cls,
+      style: {
+        width: w + 'px',
+        height: h + 'px'
+      }
+    }
     return (
       <Spin spinning={loading}>
         <div
-          className={cls}
-          style={{
-            width: w + 'px',
-            height: h + 'px'
-          }}
+          {...sessProps}
         >
           {this.renderControl()}
           <RemoteFloatControl {...contrlProps} />
           <div
             style={wrapperStyle}
-            className='spice-scroll-wrapper'
+            className='spice-scroll-wrapper s-scroll-wrapper'
           >
             <div
               ref={this.domRef}

package/client/components/spice/spice.styl

@@ -1,11 +1,29 @@
-.spice-session-wrap.scale-viewport
-  canvas
-    width: 100% !important
-    object-fit: contain
-  .spice-scroll-wrapper
-    display block
-.spice-scroll-wrapper
+.spice-session-wrap
   display: flex
   flex-direction: column
-  justify-content: center
-  align-items: center
+  align-items: center
+  .session-v-info
+    position: relative
+    width: 100%
+    z-index: 300
+  &.scale-viewport
+    .spice-scroll-wrapper
+      display flex
+      align-items center
+      justify-content center
+      > div
+        width 100% !important
+        height 100% !important
+        display flex
+        align-items center
+        justify-content center
+      canvas
+        width 100% !important
+        height 100% !important
+        max-width 100% !important
+        max-height 100% !important
+        object-fit contain
+.spice-scroll-wrapper
+  position relative
+  background var(--main)
+  z-index 299

package/client/components/tree-list/bookmark-toolbar.jsx

@@ -23,7 +23,6 @@ export default function BookmarkToolbar (props) {
   const {
     onNewBookmark,
     onNewBookmarkGroup,
-    onImport,
     onExport,
     onSshConfigs,
     bookmarkGroups,
@@ -121,7 +120,12 @@ export default function BookmarkToolbar (props) {
     },
     {
       label: e('import'),
-      onClick: onImport,
+      onClick: () => {
+        const fileInput = document.querySelector('.upload-bookmark-icon')
+        if (fileInput) {
+          fileInput.click()
+        }
+      },
       icon: <ImportOutlined />
     },
     {

package/client/components/tree-list/tree-list.jsx

@@ -680,10 +680,6 @@ export default class ItemListTree extends Component {
     )
   }
 
-  handleImport = () => {
-    document.querySelector('.upload-bookmark-icon input')?.click()
-  }
-
   handleExport = () => {
     document.querySelector('.download-bookmark-icon')?.click()
   }
@@ -697,7 +693,6 @@ export default class ItemListTree extends Component {
       <NewButtonsGroup
         onNewBookmark={this.handleNewBookmark}
         onNewBookmarkGroup={this.handleNewBookmarkGroup}
-        onImport={this.handleImport}
         onExport={this.handleExport}
         onSshConfigs={this.handleSshConfigs}
         bookmarkGroups={this.props.bookmarkGroups}

package/client/components/vnc/vnc-session.jsx

@@ -18,6 +18,7 @@ import Modal from '../common/modal'
 import { copy } from '../../common/clipboard'
 import VncForm from './vnc-form'
 import RemoteFloatControl from '../common/remote-float-control'
+import './vnc.styl'
 
 // noVNC module imports — loaded dynamically
 async function loadVncModule () {
@@ -602,14 +603,17 @@ export default class VncSession extends PureComponent {
       className: 'vnc-session-wrap session-v-wrap'
     }
     const contrlProps = this.getControlProps()
+    const sessProps = {
+      className: 'vnc-session-wrap',
+      style: {
+        width: w + 'px',
+        height: h + 'px'
+      }
+    }
     return (
       <Spin spinning={loading}>
         <div
-          className='rdp-session-wrap pd1'
-          style={{
-            width: w + 'px',
-            height: h + 'px'
-          }}
+          {...sessProps}
         >
           {this.renderControl()}
           <RemoteFloatControl

package/client/components/vnc/vnc.styl

@@ -0,0 +1,17 @@
+.vnc-session-wrap
+  display: flex
+  flex-direction: column
+  justify-content: center
+  align-items: center
+  .session-v-info
+    position: absolute
+    top: 0
+    left: 0
+    width: 100%
+  &.scale-viewport
+    .rdp-scroll-wrapper canvas
+      width: 100% !important
+      height: 100% !important
+      object-fit: contain
+  > div
+    background: transparent !important 

package/package.json

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