@electerm/electerm-react 1.38.60 → 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/quick-commands/quick-commands-box.jsx

@@ -182,7 +182,7 @@ export default class QuickCommandsFooterBox extends Component {
   sortArray (array, keyword, labels, qmSortByFrequency) {
     const sorters = [
       (obj) => !(keyword && obj.name.toLowerCase().includes(keyword)),
-      (obj) => !labels.some((label) => obj.labels.includes(label))
+      (obj) => !labels.some((label) => (obj.labels || []).includes(label))
     ]
     if (qmSortByFrequency) {
       sorters.push((obj) => -(obj.clickCount || 0))
@@ -194,9 +194,10 @@ export default class QuickCommandsFooterBox extends Component {
     const {
       openQuickCommandBar,
       pinnedQuickCommandBar,
-      qmSortByFrequency
+      qmSortByFrequency,
+      inActiveTerminal
     } = this.props.store
-    if (!openQuickCommandBar && !pinnedQuickCommandBar) {
+    if ((!openQuickCommandBar && !pinnedQuickCommandBar) || !inActiveTerminal) {
       return null
     }
     const all = this.props.store.currentQuickCommands
@@ -210,7 +211,7 @@ export default class QuickCommandsFooterBox extends Component {
         return {
           ...d,
           nameMatch: keyword && d.name.toLowerCase().includes(keyword),
-          labelMatch: labels.some((label) => d.labels.includes(label))
+          labelMatch: labels.some((label) => (d.labels || []).includes(label))
         }
       })
     const sprops = {