@electerm/electerm-react 1.38.65 → 1.38.80

package/client/components/session/sessions.jsx

@@ -1,5 +1,6 @@
 import { Component } from '../common/react-subx'
 import Session from './session'
+import WebSession from './web-session'
 import { findIndex, pick } from 'lodash-es'
 import classNames from 'classnames'
 import generate from '../../common/uid'
@@ -11,7 +12,8 @@ import {
   tabActions,
   termInitId,
   paneMap,
-  statusMap
+  statusMap,
+  terminalWebType
 } from '../../common/constants'
 import newTerm, { updateCount } from '../../common/new-terminal'
 import postMsg from '../../common/post-msg'
@@ -336,7 +338,7 @@ class Sessions extends Component {
       return this.renderNoSession()
     }
     return tabs.map((tab) => {
-      const { id } = tab
+      const { id, type } = tab
       const cls = classNames(
         `session-wrap session-${id}`,
         {
@@ -372,6 +374,18 @@ class Sessions extends Component {
           'editTab'
         ])
       }
+      if (type === terminalWebType) {
+        const webProps = {
+          tab
+        }
+        return (
+          <div className={cls} key={id}>
+            <WebSession
+              {...webProps}
+            />
+          </div>
+        )
+      }
       return (
         <div className={cls} key={id}>
           <Session

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

@@ -0,0 +1,20 @@
+import { useEffect } from 'react'
+import Link from '../common/external-link'
+
+export default function WebSession (props) {
+  const {
+    tab
+  } = props
+  useEffect(() => {
+    tab.url && window.openLink(tab.url)
+  }, [])
+  return (
+    <div className='web-session-wrap'>
+      <div className='pd3 aligncenter'>
+        <h1>{tab.title}</h1>
+        <p>{tab.description}</p>
+        <Link to={tab.url}>{tab.url}</Link>
+      </div>
+    </div>
+  )
+}

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 = () => {
@@ -906,11 +912,8 @@ export default class Sftp extends Component {
         typeMap.remote,
         'lastClickedFile',
         'lastMataKey',
-        'transferToConfirm',
-        'transferList',
         'targetTransferType',
         'selectedFiles',
-        'pauseAll',
         'localGidTree',
         'remoteUidTree',
         'localUidTree',
@@ -1108,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}`,
@@ -1132,7 +1123,6 @@ export default class Sftp extends Component {
         {
           this.renderSections()
         }
-        <TransportEntry {...prps} />
       </div>
     )
   }