npm - @electerm/electerm-react - Versions diffs - 3.5.6 → 3.6.16 - Mend

@electerm/electerm-react 3.5.6 → 3.6.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/client/common/ws.js CHANGED Viewed

@@ -4,7 +4,6 @@
 import generate from './uid'
 import wait from './wait'
-import copy from 'json-deep-copy'
 import { pick } from 'lodash-es'
 const onces = {}
@@ -32,7 +31,13 @@ class Ws {
   }
   async once (func, id) {
+    const maxWait = 300
+    let waited = 0
     while (this.closed) {
+      if (++waited >= maxWait) {
+        console.warn('ws once timeout waiting for reconnection', id)
+        return
+      }
       await wait(100)
     }
     this.onceIds.push(id)
@@ -83,7 +88,7 @@ class Ws {
     if (this.eid) {
       delete persists[this.eid]
     }
-    const ids = copy(this.onceIds)
+    const ids = [...this.onceIds]
     ids.forEach(k => {
       delete onces[k]
     })
@@ -115,10 +120,16 @@ function onEvent (e) {
     action,
     persist
   } = e.data
-  if (wss[id]) {
-    if (action === 'close') {
-      wss[id].close && wss[id].close()
+  if (wss[id] && action === 'close') {
+    const ws = wss[id]
+    ws.onclose()
+    if (ws.persist) {
+      ws.closed = true
+    } else {
+      ws.clearOnces()
+      delete wss[id]
     }
+    return
   }
   if (persists[id]) {
     persists[id].resolve(data)

package/client/components/ai/ai-history.jsx CHANGED Viewed

@@ -3,12 +3,10 @@
  */
 import { useState, useEffect } from 'react'
 import { Space } from 'antd'
-import { HistoryOutlined } from '@ant-design/icons'
 import { safeGetItemJSON, safeSetItemJSON } from '../../common/safe-local-storage'
 import AiHistoryItem from './ai-history-item'
 const MAX_HISTORY = 20
-const e = window.translate
 export function getHistory (storageKey) {
   return safeGetItemJSON(storageKey, [])
@@ -81,10 +79,6 @@ export default function AiHistory (props) {
   return (
     <div className='ai-bookmark-history pd1b'>
-      <div className='pd1b text-muted'>
-        <HistoryOutlined className='mg1r' />
-        <span className='mg1r'>{e('history') || 'History'}:</span>
-      </div>
       <Space size={[8, 8]} wrap>
         {history.map((item, index) => {
           const keyStr = typeof item === 'string' ? item : JSON.stringify(item)

package/client/components/bookmark-form/common/ssh-tunnel-form.jsx ADDED Viewed

@@ -0,0 +1,183 @@
+import {
+  Form,
+  Input,
+  InputNumber,
+  Radio,
+  Space,
+  Button,
+  Tooltip
+} from 'antd'
+import {
+  PlusOutlined,
+  QuestionCircleOutlined,
+  SaveOutlined,
+  UserOutlined
+} from '@ant-design/icons'
+import { formItemLayout, tailFormItemLayout } from '../../../common/form-layout'
+import { useState } from 'react'
+const FormItem = Form.Item
+const {
+  Button: RadioButton,
+  Group: RadioGroup
+} = Radio
+const e = window.translate
+export default function SshTunnelForm (props) {
+  const {
+    formChild,
+    initialValues,
+    onFinish,
+    isEdit
+  } = props
+  const [isDynamic, setIsDynamic] = useState(
+    (initialValues?.sshTunnel || 'forwardRemoteToLocal') === 'dynamicForward'
+  )
+  function onChange (ev) {
+    setIsDynamic(ev.target.value === 'dynamicForward')
+  }
+  function onSubmit () {
+    formChild.submit()
+  }
+  function renderSshTunnelFlow (direction) {
+    const localToRemote = direction === 'localToRemote'
+    const middle = localToRemote ? e('local') : e('remote')
+    const last = localToRemote ? e('remote') : e('local')
+    return (
+      <div>
+        <p>{e(direction)}</p>
+        <p><UserOutlined /> → {middle} → {last}</p>
+      </div>
+    )
+  }
+  function renderDynamicForward () {
+    return (
+      <p><UserOutlined /> → socks proxy → url</p>
+    )
+  }
+  function renderRemote () {
+    if (isDynamic) {
+      return null
+    }
+    return (
+      <FormItem
+        label={e('remote')}
+        {...formItemLayout}
+        required
+        className='ssh-tunnels-host'
+      >
+        <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>
+    )
+  }
+  return (
+    <Form
+      form={formChild}
+      onFinish={onFinish}
+      initialValues={initialValues}
+      component='div'
+    >
+      <FormItem
+        label={e('sshTunnel')}
+        name='sshTunnel'
+        {...formItemLayout}
+        required
+      >
+        <RadioGroup onChange={onChange}>
+          <RadioButton value='forwardRemoteToLocal'>
+            <Tooltip title={renderSshTunnelFlow('remoteToLocal')}>
+              <span>R→L <QuestionCircleOutlined /></span>
+            </Tooltip>
+          </RadioButton>
+          <RadioButton value='forwardLocalToRemote'>
+            <Tooltip title={renderSshTunnelFlow('localToRemote')}>
+              <span>L→R <QuestionCircleOutlined /></span>
+            </Tooltip>
+          </RadioButton>
+          <RadioButton value='dynamicForward'>
+            <Tooltip title={renderDynamicForward()}>
+              <span>{e('dynamicForward')}(socks proxy) <QuestionCircleOutlined /></span>
+            </Tooltip>
+          </RadioButton>
+        </RadioGroup>
+      </FormItem>
+      {renderRemote()}
+      <FormItem
+        label={e('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}
+              placeholder={e('port')}
+            />
+          </FormItem>
+        </Space.Compact>
+      </FormItem>
+      <FormItem
+        name='name'
+        label={e('name')}
+        {...formItemLayout}
+      >
+        <Input
+          placeholder={e('name')}
+        />
+      </FormItem>
+      <FormItem {...tailFormItemLayout} className='mg60b'>
+        <Button
+          type='default'
+          htmlType='button'
+          icon={isEdit ? <SaveOutlined /> : <PlusOutlined />}
+          onClick={onSubmit}
+        >
+          {isEdit ? e('save') : e('sshTunnel')}
+        </Button>
+      </FormItem>
+    </Form>
+  )
+}

package/client/components/bookmark-form/common/ssh-tunnels.jsx CHANGED Viewed

@@ -1,46 +1,37 @@
 import {
   Form,
   Input,
-  InputNumber,
-  Radio,
-  Space,
-  Button,
-  Tooltip,
   Table
 } from 'antd'
 import { useState } from 'react'
-import { PlusOutlined, QuestionCircleOutlined, MinusCircleFilled, UserOutlined } from '@ant-design/icons'
-import { formItemLayout, tailFormItemLayout } from '../../../common/form-layout'
+import { MinusCircleFilled, EditOutlined } from '@ant-design/icons'
+import { tailFormItemLayout } from '../../../common/form-layout'
 import uid from '../../../common/uid'
+import Modal from '../../common/modal'
+import SshTunnelForm from './ssh-tunnel-form'
 const FormItem = Form.Item
-const {
-  Button: RadioButton,
-  Group: RadioGroup
-} = Radio
 const e = window.translate
+const defaultInitialValues = {
+  sshTunnel: 'forwardRemoteToLocal',
+  sshTunnelLocalPort: 12200,
+  sshTunnelLocalHost: '127.0.0.1',
+  sshTunnelRemotePort: 12300,
+  sshTunnelRemoteHost: '127.0.0.1'
+}
 export default function renderSshTunnels (props) {
   const {
     form,
     formData
   } = props
   const [formChild] = Form.useForm()
-  const [initialValues] = useState({
-    sshTunnel: 'forwardRemoteToLocal',
-    sshTunnelLocalPort: 12200,
-    sshTunnelLocalHost: '127.0.0.1',
-    sshTunnelRemotePort: 12300,
-    sshTunnelRemoteHost: '127.0.0.1'
-  })
-  const [isDynamic, setter] = useState(formData.sshTunnel === 'dynamicForward')
+  const [editFormChild] = Form.useForm()
+  const [initialValues] = useState(defaultInitialValues)
+  const [editModalVisible, setEditModalVisible] = useState(false)
+  const [editingItem, setEditingItem] = useState(null)
   const [list, setList] = useState(formData.sshTunnels || [])
-  function onSubmit () {
-    formChild.submit()
-  }
-  function onChange (e) {
-    setter(e.target.value === 'dynamicForward')
-  }
   function handleFinish (data) {
     const nd = {
       ...data,
@@ -56,7 +47,7 @@ export default function renderSshTunnels (props) {
     setList(old => {
       return [
         ...old,
-        data
+        nd
       ]
     })
     formChild.resetFields()
@@ -72,6 +63,38 @@ export default function renderSshTunnels (props) {
     })
     formChild.resetFields()
   }
+  function openEdit (record) {
+    setEditingItem(record)
+    setEditModalVisible(true)
+    setTimeout(() => {
+      editFormChild.setFieldsValue(record)
+    }, 100)
+  }
+  function handleEditFinish (data) {
+    const updatedItem = {
+      ...data,
+      id: editingItem.id
+    }
+    setList(old => old.map(item => item.id === editingItem.id ? updatedItem : item))
+    const v = (form.getFieldValue('sshTunnels') || []).map(
+      item => item.id === editingItem.id ? updatedItem : item
+    )
+    form.setFieldsValue({
+      sshTunnels: v
+    })
+    setEditModalVisible(false)
+    setEditingItem(null)
+    editFormChild.resetFields()
+  }
+  function closeEditModal () {
+    setEditModalVisible(false)
+    setEditingItem(null)
+    editFormChild.resetFields()
+  }
   const cols = [
     {
       title: 'NO.',
@@ -108,15 +131,21 @@ export default function renderSshTunnels (props) {
         )
       }
     }, {
-      title: e('del'),
+      title: e('op'),
       key: 'op',
       dataIndex: 'id',
-      render: (id) => {
+      render: (id, record) => {
         return (
-          <MinusCircleFilled
-            className='pointer'
-            onClick={() => remove(id)}
-          />
+          <span>
+            <EditOutlined
+              className='pointer mg1r'
+              onClick={() => openEdit(record)}
+            />
+            <MinusCircleFilled
+              className='pointer'
+              onClick={() => remove(id)}
+            />
+          </span>
         )
       }
     }
@@ -141,62 +170,6 @@ export default function renderSshTunnels (props) {
     )
   }
-  // direction = localToRemote or remoteToLocal, should render user, remote port, local port visit directions connected with arrows accordingly
-  function renderSshTunnelFlow (direction) {
-    const localToRemote = direction === 'localToRemote'
-    const middle = localToRemote ? e('local') : e('remote')
-    const last = localToRemote ? e('remote') : e('local')
-    return (
-      <div>
-        <p>{e(direction)}</p>
-        <p><UserOutlined /> → {middle} → {last}</p>
-      </div>
-    )
-  }
-  function renderDynamicForward () {
-    return (
-      <p><UserOutlined /> → socks proxy → url</p>
-    )
-  }
-  function renderRemote () {
-    if (isDynamic) {
-      return null
-    }
-    return (
-      <FormItem
-        label={e('remote')}
-        {...formItemLayout}
-        required
-        className='ssh-tunnels-host'
-      >
-        <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>
-    )
-  }
   return (
     <>
       <FormItem
@@ -205,94 +178,29 @@ export default function renderSshTunnels (props) {
       >
         <Input />
       </FormItem>
-      <Form
-        form={formChild}
-        onFinish={handleFinish}
+      {renderList()}
+      <SshTunnelForm
+        formChild={formChild}
         initialValues={initialValues}
-        component='div'
-      >
-        {renderList()}
-        <FormItem
-          label={e('sshTunnel')}
-          name='sshTunnel'
-          {...formItemLayout}
-          defaultValue='forwardRemoteToLocal'
-          required
-        >
-          <RadioGroup onChange={onChange}>
-            <RadioButton
-              value='forwardRemoteToLocal'
-            >
-              <Tooltip title={renderSshTunnelFlow('remoteToLocal')}>
-                <span>R→L <QuestionCircleOutlined /></span>
-              </Tooltip>
-            </RadioButton>
-            <RadioButton
-              value='forwardLocalToRemote'
-            >
-              <Tooltip title={renderSshTunnelFlow('localToRemote')}>
-                <span>L→R <QuestionCircleOutlined /></span>
-              </Tooltip>
-            </RadioButton>
-            <RadioButton
-              value='dynamicForward'
-            >
-              <Tooltip title={renderDynamicForward()}>
-                <span>{e('dynamicForward')}(socks proxy) <QuestionCircleOutlined /></span>
-              </Tooltip>
-            </RadioButton>
-          </RadioGroup>
-        </FormItem>
-        {renderRemote()}
-        <FormItem
-          label={e('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}
-                placeholder={e('port')}
-              />
-            </FormItem>
-          </Space.Compact>
-        </FormItem>
-        <FormItem
-          name='name'
-          label={e('name')}
-          {...formItemLayout}
+        onFinish={handleFinish}
+      />
+      {editModalVisible && (
+        <Modal
+          open={editModalVisible}
+          onCancel={closeEditModal}
+          footer={null}
+          title={e('edit') + ' ' + e('sshTunnel')}
+          width={600}
         >
-          <Input
-            placeholder={e('name')}
+          <SshTunnelForm
+            key={editingItem?.id}
+            formChild={editFormChild}
+            initialValues={editingItem}
+            onFinish={handleEditFinish}
+            isEdit
           />
-        </FormItem>
-        <FormItem {...tailFormItemLayout} className='mg60b'>
-          <Button
-            type='default'
-            htmlType='button'
-            icon={<PlusOutlined />}
-            onClick={onSubmit}
-          >
-            {e('sshTunnel')}
-          </Button>
-        </FormItem>
-      </Form>
+        </Modal>
+      )}
     </>
   )
 }

package/client/components/main/upgrade.jsx CHANGED Viewed

@@ -28,7 +28,8 @@ const {
 const downloadMirrorList = [
   'github',
   'gh-proxy',
-  'sourceforge'
+  'sourceforge',
+  'r2'
 ]
 export default class Upgrade extends PureComponent {

package/client/components/shortcuts/shortcut-control.jsx CHANGED Viewed

@@ -172,6 +172,15 @@ class ShortcutControl extends React.PureComponent {
     window.store.onNewSsh()
   }, 500)
+  newTabShortcut = throttle((e) => {
+    e.stopPropagation()
+    if (window.store.hasNodePty) {
+      window.store.addTab()
+    } else {
+      window.store.onNewSsh()
+    }
+  }, 500)
   toggleAddBtnShortcut = throttle((e) => {
     e.stopPropagation()
     const { currentLayoutBatch } = window.store

package/client/components/shortcuts/shortcuts-defaults.js CHANGED Viewed

@@ -36,6 +36,11 @@ export default () => {
       shortcut: 'ctrl+n',
       shortcutMac: 'meta+n'
     },
+    {
+      name: 'app_newTab',
+      shortcut: 'alt+q',
+      shortcutMac: 'alt+q'
+    },
     {
       name: 'app_toggleAddBtn',
       shortcut: 'alt+n',

package/client/components/ssh-config/load-ssh-configs.jsx CHANGED Viewed

@@ -1,5 +1,4 @@
 import {
-  Modal,
   Spin,
   Button,
   Empty
@@ -9,6 +8,7 @@ import * as ls from '../../common/safe-local-storage'
 import {
   sshConfigLoadKey
 } from '../../common/constants'
+import Modal from '../common/modal'
 import { ReloadOutlined } from '@ant-design/icons'
 import LoadSshConfigsItem from './load-ssh-configs-item'
 import './ssh-config.styl'

package/client/components/sys-menu/menu-btn.jsx CHANGED Viewed

@@ -76,7 +76,8 @@ class MenuBtn extends PureComponent {
       items.push({
         func: 'addTab',
         icon: 'RightSquareFilled',
-        text: e('newTab')
+        text: e('newTab'),
+        subText: this.getShortcut('app_newTab')
       })
     }
     // {

package/package.json CHANGED Viewed

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