@electerm/electerm-react 1.38.65 → 1.38.70

package/client/common/constants.js

@@ -38,7 +38,7 @@ export const contextMenuPaddingTop = 10
 export const sftpControlHeight = 28 + 42 + 33 + 36
 export const sidebarWidth = 43
 export const maxHistory = 50
-export const maxTransport = 5
+export const maxTransport = 1
 export const maxSftpHistory = 20
 export const maxZoom = 8
 export const minZoom = 0.5
@@ -278,7 +278,8 @@ export const commonActions = {
   closeContextMenu: 'close-context-menu',
   clickContextMenu: 'click-context-menu',
   openContextMenu: 'open-context-menu',
-  addTransfer: 'add-transfer'
+  addTransfer: 'add-transfer',
+  sftpList: 'sftp-list'
 }
 
 export const srcsSkipUpgradeCheck = [

package/client/common/create-title.jsx

@@ -15,7 +15,7 @@ export default function createTitle (res) {
   }
   const {
     host, port, username, title, type,
-    path, connectionHoppings
+    path, connectionHoppings, sshTunnels
   } = res
   const fixTitle = `${username || ''}@${host}:${port}`
   const extra = host || path ? (path || fixTitle) : ''
@@ -25,6 +25,14 @@ export default function createTitle (res) {
   if (connectionHoppings && connectionHoppings.length) {
     f = `[⋙]${f}`
   }
+  if (
+    sshTunnels &&
+    sshTunnels.length &&
+    sshTunnels[0].sshTunnel &&
+    sshTunnels[0].sshTunnelRemoteHost
+  ) {
+    f = `[T]${f}`
+  }
   if (type) {
     f = `[${type}]${f}`
   }

package/client/common/sftp.js

@@ -7,6 +7,7 @@ import Transfer from './transfer'
 import { transferTypeMap, instSftpKeys as keys } from './constants'
 import initWs from './ws'
 
+window.sftps = {}
 const transferKeys = Object.keys(transferTypeMap)
 
 class Sftp {
@@ -56,6 +57,7 @@ class Sftp {
   }
 
   async destroy () {
+    delete window.sftps[this.sessionId]
     const { ws } = this
     ws.s({
       action: 'sftp-destroy',
@@ -69,5 +71,6 @@ class Sftp {
 export default async (sessionId) => {
   const sftp = new Sftp()
   await sftp.init(sessionId)
+  window.sftps[sessionId] = sftp
   return sftp
 }

package/client/components/batch-op/batch-op.jsx

@@ -26,7 +26,6 @@ import { autoRun } from 'manate'
 import { pick } from 'lodash-es'
 import { runCmd } from '../terminal/terminal-apis'
 import deepCopy from 'json-deep-copy'
-import postMsg from '../../common/post-msg'
 import uid from '../../common/uid'
 import wait from '../../common/wait'
 import { getFolderFromFilePath } from '../sftp/file-read'
@@ -186,11 +185,7 @@ export default class BatchOp extends Component {
         zip: true,
         skipConfirm: true
       }
-      postMsg({
-        list: [obj],
-        action: commonActions.addTransfer,
-        sessionId: tab.sessionId
-      })
+      window.store.addTransferList([obj])
       const { store } = window
       this.tm = setTimeout(() => {
         reject(new Error('timeout'))

package/client/components/bookmark-form/bookmark-form.styl

@@ -5,4 +5,6 @@
 .mg60b
   margin-bottom 60px
 .compact-input input
-  width 80px !important
+  width 80px !important
+.ssh-tunnels-host
+  margin-bottom 0

package/client/components/bookmark-form/render-ssh-tunnel.jsx

@@ -5,30 +5,154 @@ import {
   Radio,
   Space,
   Button,
-  Tooltip
+  Tooltip,
+  Table
 } from 'antd'
-import { MinusCircleOutlined, PlusOutlined, QuestionCircleOutlined } from '@ant-design/icons'
-import { formItemLayout } from '../../common/form-layout'
+import { useState } from 'react'
+import { PlusOutlined, QuestionCircleOutlined, MinusCircleFilled } from '@ant-design/icons'
+import { formItemLayout, tailFormItemLayout } from '../../common/form-layout'
+import uid from '../../common/uid'
 
 const FormItem = Form.Item
-const FormList = Form.List
 const {
   Button: RadioButton,
   Group: RadioGroup
 } = Radio
 const { prefix } = window
 const e = prefix('ssh')
+const s = prefix('sftp')
+const m = prefix('menu')
 
-export default function renderSshTunnel () {
-  function renderItem (field, i, add, remove) {
+export default function renderSshTunnels (props) {
+  const {
+    form,
+    formData
+  } = props
+  const [formChild] = Form.useForm()
+  const [initialValues] = useState({
+    sshTunnelLocalPort: 12200,
+    sshTunnelLocalHost: '127.0.0.1',
+    sshTunnelRemotePort: 12300,
+    sshTunnelRemoteHost: '127.0.0.1'
+  })
+  const [list, setList] = useState(formData.sshTunnels || [])
+  function onSubmit () {
+    formChild.submit()
+  }
+  function handleFinish (data) {
+    const nd = {
+      ...data,
+      id: uid()
+    }
+    const v = [
+      ...form.getFieldValue('sshTunnels'),
+      nd
+    ]
+    form.setFieldsValue({
+      sshTunnels: v
+    })
+    setList(old => {
+      return [
+        ...old,
+        data
+      ]
+    })
+    formChild.resetFields()
+  }
+
+  function remove (id) {
+    setList(old => {
+      return old.filter(i => i.id !== id)
+    })
+    const v = form.getFieldValue('sshTunnels').filter(i => i.id !== id)
+    form.setFieldsValue({
+      sshTunnels: v
+    })
+    formChild.resetFields()
+  }
+  const cols = [
+    {
+      title: 'NO.',
+      dataIndex: 'index',
+      key: 'index',
+      render: (k) => k
+    }, {
+      title: e('sshTunnel'),
+      key: 'sshTunnel',
+      render: (k, item) => {
+        // sshTunnel is forwardRemoteToLocal or forwardLocalToRemote
+        const {
+          sshTunnel,
+          sshTunnelRemoteHost = '127.0.0.1',
+          sshTunnelRemotePort,
+          sshTunnelLocalHost = '127.0.0.1',
+          sshTunnelLocalPort,
+          name
+        } = item
+        const to = sshTunnel === 'forwardRemoteToLocal'
+          ? `${s('local')}:${sshTunnelLocalHost}:${sshTunnelLocalPort}`
+          : `${s('remote')}:${sshTunnelRemoteHost}:${sshTunnelRemotePort}`
+        const from = sshTunnel === 'forwardRemoteToLocal'
+          ? `${s('remote')}:${sshTunnelRemoteHost}:${sshTunnelRemotePort}`
+          : `${s('local')}:${sshTunnelLocalHost}:${sshTunnelLocalPort}`
+        return (
+          <span>
+            {name ? `[${name}] ` : ''}→ {from} → {to}
+          </span>
+        )
+      }
+    }, {
+      title: m('del'),
+      key: 'op',
+      dataIndex: 'id',
+      render: (id) => {
+        return (
+          <MinusCircleFilled
+            className='pointer'
+            onClick={() => remove(id)}
+          />
+        )
+      }
+    }
+  ]
+
+  function renderList () {
     return (
-      <Space
-        align='center'
-        key={field.key}
+      <FormItem {...tailFormItemLayout}>
+        <Table
+          columns={cols}
+          className='mg3b'
+          pagination={false}
+          size='small'
+          dataSource={list.map((d, i) => {
+            return {
+              ...d,
+              index: i + 1
+            }
+          })}
+        />
+      </FormItem>
+    )
+  }
+
+  return (
+    <div>
+      <FormItem
+        name='sshTunnels'
+        className='hide'
+      >
+        <Input />
+      </FormItem>
+      <Form
+        form={formChild}
+        onFinish={handleFinish}
+        initialValues={initialValues}
       >
+        {renderList()}
         <FormItem
           label={e('sshTunnel')}
-          name={[field.name, 'sshTunnel']}
+          name='sshTunnel'
+          {...formItemLayout}
           required
         >
           <RadioGroup>
@@ -48,87 +172,85 @@ export default function renderSshTunnel () {
             </RadioButton>
           </RadioGroup>
         </FormItem>
-        <Space.Compact className='mg2x'>
-          <FormItem
-            label={e('destination')}
-            name={[field.name, 'sshTunnelRemoteHost']}
-            initialValue='127.0.0.1'
-            required
-          >
-            <Input
-              className='compact-input'
-              placeholder={e('host')}
-            />
-          </FormItem>
-          <FormItem
-            label=''
-            name={[field.name, 'sshTunnelRemotePort']}
-            initialValue={22}
-            required
-          >
-            <InputNumber
-              min={1}
-              max={65535}
-              // addonBefore={e('remotePort')}
-              className='compact-input'
-              placeholder={e('port')}
-            />
-          </FormItem>
-        </Space.Compact>
         <FormItem
-          label={e('localPort')}
-          name={[field.name, 'sshTunnelLocalPort']}
-          initialValue={22}
+          label={s('remote')}
+          {...formItemLayout}
           required
-          className='mg2x'
+          className='ssh-tunnels-host'
         >
-          <InputNumber
-            min={1}
-            max={65535}
-            // addonBefore={e('localPort')}
-            className='compact-input'
-            placeholder={e('port')}
+          <Space.Compact>
+            <FormItem
+              name='sshTunnelRemoteHost'
+              label=''
+              required
+            >
+              <Input
+                placeholder={e('host')}
+              />
+            </FormItem>
+            <FormItem
+              label=''
+              name='sshTunnelRemotePort'
+              required
+            >
+              <InputNumber
+                min={1}
+                max={65535}
+                placeholder={e('port')}
+              />
+            </FormItem>
+          </Space.Compact>
+        </FormItem>
+        <FormItem
+          label={s('local')}
+          {...formItemLayout}
+          required
+          className='ssh-tunnels-host'
+        >
+          <Space.Compact>
+            <FormItem
+              name='sshTunnelLocalHost'
+              label=''
+              required
+            >
+              <Input
+                placeholder={e('host')}
+              />
+            </FormItem>
+            <FormItem
+              label=''
+              name='sshTunnelLocalPort'
+              required
+            >
+              <InputNumber
+                min={1}
+                max={65535}
+                // addonBefore={e('localPort')}
+                placeholder={e('port')}
+              />
+            </FormItem>
+          </Space.Compact>
+        </FormItem>
+        <FormItem
+          name='name'
+          label={s('name')}
+          {...formItemLayout}
+        >
+          <Input
+            placeholder={e('name')}
           />
         </FormItem>
-        <Button
-          icon={<MinusCircleOutlined />}
-          onClick={() => remove(field.name)}
-          className='mg24b'
-        />
-      </Space>
-    )
-  }
-
-  return [
-    <FormList
-      {...formItemLayout}
-      label={e('sshTunnel')}
-      name='sshTunnels'
-      key='sshTunnels'
-    >
-      {
-        (fields, { add, remove }, { errors }) => {
-          return (
-            <div>
-              {
-                fields.map((field, i) => {
-                  return renderItem(field, i, add, remove)
-                })
-              }
-              <FormItem>
-                <Button
-                  type='dashed'
-                  onClick={() => add()}
-                  block
-                  icon={<PlusOutlined />}
-                >
-                  {e('sshTunnel')}
-                </Button>
-              </FormItem>
-            </div>
-          )
-        }
-      }
-    </FormList>
-  ]
+        <FormItem {...tailFormItemLayout} className='mg60b'>
+          <Button
+            type='default'
+            htmlType='button'
+            icon={<PlusOutlined />}
+            onClick={onSubmit}
+          >
+            {e('sshTunnel')}
+          </Button>
+        </FormItem>
+      </Form>
+    </div>
+  )
 }

package/client/components/bookmark-form/ssh-form-ui.jsx

@@ -65,7 +65,7 @@ export default function BookmarkFormUI (props) {
     encode: encodes[0],
     envLang: defaultEnvLang,
     enableSsh: true,
-    sshTunnels: [{}],
+    sshTunnels: [],
     runScripts: [{}],
     category: initBookmarkGroupId,
     connectionHoppings: []

package/client/components/main/main.jsx

@@ -12,6 +12,9 @@ import CssOverwrite from './css-overwrite'
 import UiTheme from './ui-theme'
 import CustomCss from './custom-css.jsx'
 import TerminalInteractive from '../terminal/terminal-interactive'
+import ConfirmModalStore from '../sftp/confirm-modal-store.jsx'
+import TransferConflictStore from '../sftp/transfer-conflict-store.jsx'
+import TransportsActionStore from '../sftp/transports-action-store.jsx'
 import classnames from 'classnames'
 import ShortcutControl from '../shortcuts/shortcut-control.jsx'
 import { isMac, isWin } from '../../common/constants'
@@ -149,6 +152,17 @@ export default class Index extends Component {
             />
           </div>
           <ContextMenu store={store} />
+          <ConfirmModalStore
+            store={store}
+          />
+          <TransferConflictStore
+            store={store}
+            _fileTransfers={store._fileTransfers}
+          />
+          <TransportsActionStore
+            store={store}
+            _fileTransfers={store._fileTransfers}
+          />
         </div>
       </ConfigProvider>
     )

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),