@electerm/electerm-react 3.1.26 → 3.3.8

package/client/components/bookmark-form/bookmark-from-history-modal.jsx

@@ -3,7 +3,8 @@
  */
 
 import React from 'react'
-import { Button, message } from 'antd'
+import { Button } from 'antd'
+import message from '../common/message'
 import { PlusOutlined } from '@ant-design/icons'
 import Modal from '../common/modal'
 import { refsStatic } from '../common/ref'

package/client/components/bookmark-form/common/bookmark-select.jsx

@@ -4,6 +4,16 @@ import { TreeSelect } from 'antd'
 
 const e = window.translate
 
+const hoppingProps = [
+  'host',
+  'port',
+  'username',
+  'password',
+  'privateKey',
+  'passphrase',
+  'certificate'
+]
+
 function buildTreeData (bookmarkGroups, tree) {
   const cats = bookmarkGroups
   const btree = cats.reduce((p, k) => ({ ...p, [k.id]: k }), {})
@@ -53,8 +63,14 @@ export default function BookmarkSelect (props) {
   function onSelect (id) {
     const item = tree[id]
     if (item) {
-      item.bookmarkId = item.id
-      props.onSelect(item)
+      const selected = hoppingProps.reduce((p, k) => {
+        if (item[k] !== undefined) {
+          p[k] = item[k]
+        }
+        return p
+      }, {})
+      selected.bookmarkId = item.id
+      props.onSelect(selected)
     }
   }
 

package/client/components/bookmark-form/common/connection-hopping-form.jsx

@@ -0,0 +1,153 @@
+import {
+  Form,
+  InputNumber,
+  Input,
+  Radio,
+  Button
+} from 'antd'
+import {
+  formItemLayout,
+  tailFormItemLayout
+} from '../../../common/form-layout'
+import {
+  PlusOutlined,
+  SaveOutlined
+} from '@ant-design/icons'
+import RenderAuth from './render-auth-ssh'
+import {
+  authTypeMap
+} from '../../../common/constants'
+import { useState } from 'react'
+import BookmarkSelect from './bookmark-select'
+
+const FormItem = Form.Item
+const RadioButton = Radio.Button
+const RadioGroup = Radio.Group
+const e = window.translate
+
+export default function ConnectionHoppingForm (props) {
+  const {
+    store,
+    formChild,
+    initialValues,
+    onFinish,
+    authTypes: authTypesProp,
+    trim,
+    isEdit
+  } = props
+  const [authType, setAuthType] = useState(initialValues.authType || authTypeMap.password)
+
+  function onChangeAuthType (e) {
+    setAuthType(e.target.value)
+  }
+
+  function onSubmit () {
+    formChild.submit()
+  }
+
+  const authTypes = authTypesProp || Object.keys(authTypeMap).map(k => k)
+
+  const treeProps = {
+    bookmarks: store.bookmarks.filter(d => {
+      return d.host && d.port && d.username
+    }),
+    bookmarkGroups: store.bookmarkGroups,
+    onSelect: onFinish
+  }
+
+  return (
+    <Form
+      form={formChild}
+      onFinish={onFinish}
+      initialValues={initialValues}
+      component='div'
+    >
+      <FormItem
+        {...formItemLayout}
+        label={e('chooseFromBookmarks')}
+        className='mg60b'
+        style={{ display: isEdit ? 'none' : '' }}
+      >
+        <BookmarkSelect {...treeProps} />
+      </FormItem>
+      <FormItem
+        {...formItemLayout}
+        label={e('host')}
+        hasFeedback
+        rules={[{
+          max: 520, message: '520 chars max'
+        }, {
+          required: true, message: 'host required'
+        }]}
+        normalize={trim}
+        name='host'
+      >
+        <Input />
+      </FormItem>
+      <FormItem
+        {...formItemLayout}
+        label={e('port')}
+        hasFeedback
+        name='port'
+        rules={[{
+          required: true, message: 'port required'
+        }]}
+      >
+        <InputNumber
+          placeholder={e('port')}
+          min={1}
+          max={65535}
+          step={1}
+        />
+      </FormItem>
+      <FormItem
+        {...formItemLayout}
+        label={e('username')}
+        hasFeedback
+        name='username'
+        rules={[{
+          max: 128, message: '128 chars max'
+        }]}
+        normalize={trim}
+      >
+        <Input />
+      </FormItem>
+      <FormItem
+        {...tailFormItemLayout}
+        className='mg1b'
+        name='authType'
+      >
+        <RadioGroup
+          size='small'
+          onChange={onChangeAuthType}
+          buttonStyle='solid'
+        >
+          {
+            authTypes.map(t => {
+              return (
+                <RadioButton value={t} key={t}>
+                  {e(t)}
+                </RadioButton>
+              )
+            })
+          }
+        </RadioGroup>
+      </FormItem>
+      <RenderAuth
+        form={formChild}
+        store={store}
+        authType={authType}
+      />
+      <FormItem {...tailFormItemLayout} className='mg60b'>
+        <Button
+          type='default'
+          htmlType='button'
+          icon={isEdit ? <SaveOutlined /> : <PlusOutlined />}
+          onClick={onSubmit}
+        >
+          {isEdit ? e('save') : e('connectionHopping')}
+        </Button>
+      </FormItem>
+    </Form>
+  )
+}

package/client/components/bookmark-form/common/connection-hopping.jsx

@@ -1,33 +1,28 @@
 import {
   Form,
-  InputNumber,
   Input,
-  Radio,
-  Button,
   Table
 } from 'antd'
 import {
-  formItemLayout,
   tailFormItemLayout
 } from '../../../common/form-layout'
 import {
   MinusCircleFilled,
-  PlusOutlined
+  EditOutlined,
+  HolderOutlined
 } from '@ant-design/icons'
-import RenderAuth from './render-auth-ssh'
 import uid from '../../../common/uid'
 import {
   authTypeMap,
   connectionHoppingWarnKey
 } from '../../../common/constants'
-import { useState } from 'react'
+import { useState, useRef, useCallback } from 'react'
 import ConnectionHoppingWarningText from '../../common/connection-hopping-warning-text'
-import BookmarkSelect from './bookmark-select'
 import * as ls from '../../../common/safe-local-storage'
+import Modal from '../../common/modal'
+import ConnectionHoppingForm from './connection-hopping-form'
 
 const FormItem = Form.Item
-const RadioButton = Radio.Button
-const RadioGroup = Radio.Group
 const e = window.translate
 
 export default function renderConnectionHopping (props) {
@@ -37,28 +32,54 @@ export default function renderConnectionHopping (props) {
     formData
   } = props
   const [formChild] = Form.useForm()
-  const [initialValues, editState] = useState({
+  const [editFormChild] = Form.useForm()
+  const [initialValues] = useState({
     port: 22,
     authType: authTypeMap.password
   })
   const [showWarn, setShowWarn] = useState(
     window.store.hasOldConnectionHoppingBookmark && ls.getItem(connectionHoppingWarnKey) !== 'yes'
   )
+  const [editModalVisible, setEditModalVisible] = useState(false)
+  const [editingItem, setEditingItem] = useState(null)
+
   function closeWarn () {
     setShowWarn(false)
   }
   const [list, setList] = useState(formData.connectionHoppings || [])
-  function onChangeAuthType (e) {
-    editState(old => {
-      return {
-        ...old,
-        authType: e.target.value
-      }
+  const dragItem = useRef(null)
+  const dragOverItem = useRef(null)
+
+  const handleDragStart = useCallback((index) => {
+    dragItem.current = index
+  }, [])
+
+  const handleDragEnter = useCallback((index) => {
+    dragOverItem.current = index
+  }, [])
+
+  const handleDragEnd = useCallback(() => {
+    if (dragItem.current === null || dragOverItem.current === null) {
+      return
+    }
+    if (dragItem.current === dragOverItem.current) {
+      dragItem.current = null
+      dragOverItem.current = null
+      return
+    }
+    setList(old => {
+      const newList = [...old]
+      const [removed] = newList.splice(dragItem.current, 1)
+      newList.splice(dragOverItem.current, 0, removed)
+      form.setFieldsValue({
+        connectionHoppings: newList
+      })
+      dragItem.current = null
+      dragOverItem.current = null
+      return newList
     })
-  }
-  function onSubmit () {
-    formChild.submit()
-  }
+  }, [form])
+
   function handleFinish (data) {
     const nd = {
       ...data,
@@ -74,14 +95,11 @@ export default function renderConnectionHopping (props) {
     setList(old => {
       return [
         ...old,
-        data
+        nd
       ]
     })
     formChild.resetFields()
   }
-  const authTypes = props.authTypes || Object.keys(authTypeMap).map(k => {
-    return k
-  })
 
   function remove (id) {
     setList(old => {
@@ -93,7 +111,51 @@ export default function renderConnectionHopping (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 => {
+      return old.map(item => item.id === editingItem.id ? updatedItem : item)
+    })
+    const v = (form.getFieldValue('connectionHoppings') || []).map(
+      item => item.id === editingItem.id ? updatedItem : item
+    )
+    form.setFieldsValue({
+      connectionHoppings: v
+    })
+    setEditModalVisible(false)
+    setEditingItem(null)
+    editFormChild.resetFields()
+  }
+
+  function closeEditModal () {
+    setEditModalVisible(false)
+    setEditingItem(null)
+    editFormChild.resetFields()
+  }
+
   const cols = [
+    {
+      title: '',
+      key: 'drag',
+      width: 30,
+      render: () => (
+        <HolderOutlined
+          className='drag'
+        />
+      )
+    },
     {
       title: 'NO.',
       dataIndex: 'index',
@@ -110,15 +172,21 @@ export default function renderConnectionHopping (props) {
         return <span>{useProfile}{item.username}{pass}@{item.host}:{item.port}{pk}{ph}</span>
       }
     }, {
-      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>
         )
       }
     }
@@ -140,6 +208,13 @@ export default function renderConnectionHopping (props) {
           className='mg3b'
           pagination={false}
           size='small'
+          onRow={(record, index) => ({
+            draggable: true,
+            onDragStart: () => handleDragStart(index),
+            onDragEnter: () => handleDragEnter(index),
+            onDragEnd: handleDragEnd,
+            onDragOver: (e) => e.preventDefault()
+          })}
           dataSource={list.map((d, i) => {
             return {
               ...d,
@@ -161,13 +236,15 @@ export default function renderConnectionHopping (props) {
       </FormItem>
     )
   }
-  const treeProps = {
-    bookmarks: store.bookmarks.filter(d => {
-      return d.host && d.port && d.username
-    }),
-    bookmarkGroups: store.bookmarkGroups,
-    onSelect: handleFinish
+
+  const editModalProps = {
+    open: editModalVisible,
+    onCancel: closeEditModal,
+    footer: null,
+    title: e('edit') + ' ' + e('connectionHopping'),
+    width: 600
   }
+
   return (
     <>
       <FormItem
@@ -176,100 +253,30 @@ export default function renderConnectionHopping (props) {
       >
         <Input />
       </FormItem>
-      <Form
-        form={formChild}
-        onFinish={handleFinish}
+      {renderList()}
+      {renderWarn()}
+      <ConnectionHoppingForm
+        store={store}
+        formChild={formChild}
         initialValues={initialValues}
-        component='div'
-      >
-        {renderList()}
-        {renderWarn()}
-        <FormItem
-          {...formItemLayout}
-          label={e('chooseFromBookmarks')}
-          className='mg60b'
-        >
-          <BookmarkSelect {...treeProps} />
-        </FormItem>
-        <FormItem
-          {...formItemLayout}
-          label={e('host')}
-          hasFeedback
-          rules={[{
-            max: 520, message: '520 chars max'
-          }, {
-            required: true, message: 'host required'
-          }]}
-          normalize={props.trim}
-          name='host'
-        >
-          <Input />
-        </FormItem>
-        <FormItem
-          {...formItemLayout}
-          label={e('port')}
-          hasFeedback
-          name='port'
-          rules={[{
-            required: true, message: 'port required'
-          }]}
-        >
-          <InputNumber
-            placeholder={e('port')}
-            min={1}
-            max={65535}
-            step={1}
+        onFinish={handleFinish}
+        authTypes={props.authTypes}
+        trim={props.trim}
+      />
+      {editModalVisible && (
+        <Modal {...editModalProps}>
+          <ConnectionHoppingForm
+            key={editingItem?.id}
+            store={store}
+            formChild={editFormChild}
+            initialValues={editingItem}
+            onFinish={handleEditFinish}
+            authTypes={props.authTypes}
+            trim={props.trim}
+            isEdit
           />
-        </FormItem>
-        <FormItem
-          {...formItemLayout}
-          label={e('username')}
-          hasFeedback
-          name='username'
-          rules={[{
-            max: 128, message: '128 chars max'
-          }]}
-          normalize={props.trim}
-        >
-          <Input />
-        </FormItem>
-        <FormItem
-          {...tailFormItemLayout}
-          className='mg1b'
-          name='authType'
-        >
-          <RadioGroup
-            size='small'
-            onChange={onChangeAuthType}
-            buttonStyle='solid'
-          >
-            {
-              authTypes.map(t => {
-                return (
-                  <RadioButton value={t} key={t}>
-                    {e(t)}
-                  </RadioButton>
-                )
-              })
-            }
-          </RadioGroup>
-        </FormItem>
-        <RenderAuth
-          form={formChild}
-          store={store}
-          authType={initialValues.authType}
-        />
-        <FormItem {...tailFormItemLayout} className='mg60b'>
-          <Button
-            type='default'
-            htmlType='button'
-            icon={<PlusOutlined />}
-            onClick={onSubmit}
-          >
-            {e('connectionHopping')}
-          </Button>
-        </FormItem>
-      </Form>
+        </Modal>
+      )}
     </>
   )
 }

package/client/components/common/auto-check-update.jsx

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from 'react'
+
+export default function AutoCheckUpdate ({ config }) {
+  const lastCheckTimeRef = useRef(0)
+  const intervalIdRef = useRef(null)
+
+  useEffect(() => {
+    if (!config.checkUpdateOnStart) {
+      clearInterval(intervalIdRef.current)
+      return
+    }
+
+    const checkForUpdate = () => {
+      const { store } = window
+      if (store.config.checkUpdateOnStart) {
+        store.onCheckUpdate(false)
+      }
+      lastCheckTimeRef.current = Date.now()
+    }
+
+    intervalIdRef.current = setInterval(checkForUpdate, 60 * 60 * 1000)
+
+    return () => {
+      if (intervalIdRef.current) {
+        clearInterval(intervalIdRef.current)
+      }
+    }
+  }, [config.checkUpdateOnStart])
+
+  return null
+}

package/client/components/common/notification.styl

@@ -2,7 +2,7 @@
   position fixed
   bottom 20px
   right 20px
-  z-index 1000
+  z-index 9999
 
 .notification
   background var(--main-lighter)

package/client/components/file-transfer/conflict-resolve.jsx

@@ -21,6 +21,9 @@ function formatTimeAuto (strOrDigit) {
   if (isString(strOrDigit)) {
     return formatTime(strOrDigit)
   }
+  if (strOrDigit > 9999999999) {
+    return formatTime(strOrDigit)
+  }
   return formatTime(strOrDigit * 1000)
 }
 

package/client/components/footer/batch-input.jsx

@@ -136,12 +136,10 @@ export default class BatchInput extends Component {
     } = this.props
     const opts = {
       options: this.buildOptions(),
-      placeholder: e('batchInput'),
       value: cmd,
       onChange: this.handleChange,
       defaultOpen: false,
       open,
-      allowClear: true,
       className: 'batch-input-wrap'
     }
     const cls = classNames(
@@ -155,6 +153,15 @@ export default class BatchInput extends Component {
       placeholder: e('batchInput'),
       className: 'batch-input-holder'
     }
+    const textAreaProps = {
+      onPressEnter: this.handleEnter,
+      onClick: this.handleClick,
+      onBlur: this.handleBlur,
+      size: 'small',
+      autoSize: { minRows: 1 },
+      placeholder: e('batchInput'),
+      allowClear: true
+    }
     const tabSelectProps = {
       activeTabId: this.props.activeTabId,
       tabs: this.getTabs(),
@@ -179,11 +186,7 @@ export default class BatchInput extends Component {
             {...opts}
           >
             <Input.TextArea
-              onPressEnter={this.handleEnter}
-              onClick={this.handleClick}
-              onBlur={this.handleBlur}
-              size='small'
-              autoSize={{ minRows: 1 }}
+              {...textAreaProps}
             />
           </AutoComplete>
           <TabSelect {...tabSelectProps} />

package/client/components/main/error-wrapper.jsx

@@ -77,12 +77,9 @@ export default class ErrorBoundary extends React.PureComponent {
   }
 
   renderTroubleShoot = () => {
-    const {
-      bugs: {
-        url: bugReportLink
-      }
-    } = packInfo
-    const bugUrl = `${bugReportLink}/new/choose`
+    if (window.et.isWebApp) {
+      return this.renderContacts()
+    }
     return (
       <div className='pd1y wordbreak'>
         <h2>{e('troubleShoot')}</h2>
@@ -99,6 +96,20 @@ export default class ErrorBoundary extends React.PureComponent {
             )
           })
         }
+        {this.renderContacts()}
+      </div>
+    )
+  }
+
+  renderContacts () {
+    const {
+      bugs: {
+        url: bugReportLink
+      }
+    } = packInfo
+    const bugUrl = `${bugReportLink}/new/choose`
+    return (
+      <>
         <div className='pd1b'>
           <Link to={bugUrl}>{e('bugReport')}</Link>
         </div>
@@ -112,7 +123,7 @@ export default class ErrorBoundary extends React.PureComponent {
             className='mwm-100'
           />
         </div>
-      </div>
+      </>
     )
   }