@electerm/electerm-react 3.1.26 → 3.2.0

package/client/common/db.js

@@ -31,7 +31,8 @@ export const dbNames = [
   ),
   'history',
   'terminalCommandHistory',
-  'aiChatHistory'
+  'aiChatHistory',
+  'autoRunWidgets'
 ]
 export const dbNamesForSync = [
   ...without(
@@ -45,7 +46,8 @@ export const dbNamesForWatch = [
   ...dbNamesForSync,
   'history',
   'terminalCommandHistory',
-  'aiChatHistory'
+  'aiChatHistory',
+  'autoRunWidgets'
 ]
 
 /**

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

@@ -4,14 +4,14 @@
 import { useState, useEffect } from 'react'
 import { Space } from 'antd'
 import { HistoryOutlined } from '@ant-design/icons'
-import { getItemJSON, setItemJSON } from '../../common/safe-local-storage'
+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 getItemJSON(storageKey, [])
+  return safeGetItemJSON(storageKey, [])
 }
 
 export function addHistoryItem (storageKey, itemData, eventName) {
@@ -37,7 +37,7 @@ export function addHistoryItem (storageKey, itemData, eventName) {
   if (history.length > MAX_HISTORY) {
     history = history.slice(0, MAX_HISTORY)
   }
-  setItemJSON(storageKey, history)
+  safeSetItemJSON(storageKey, history)
 
   // Custom event to trigger update
   if (eventName) {
@@ -72,7 +72,7 @@ export default function AiHistory (props) {
       return hStr !== itemStr
     })
     setHistory(newHistory)
-    setItemJSON(storageKey, newHistory)
+    safeSetItemJSON(storageKey, newHistory)
   }
 
   if (!history.length) {

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/quick-commands/qm.styl

@@ -27,8 +27,6 @@
   border: 1px dashed var(--primary)
 .qm-item-dragover
   border-left 2px solid var(--primary)
-.qm-drag-handle
-  cursor grab
 .qm-field-dragging
   opacity 0.4
 .qm-field-dragover

package/client/components/quick-commands/quick-commands-list-form.jsx

@@ -76,7 +76,7 @@ export default function renderQm (form) {
         onDrop={(e) => handleDrop(e, i, form)}
         onDragEnd={handleDragEnd}
       >
-        <HolderOutlined className='mg1r qm-drag-handle' />
+        <HolderOutlined className='mg1r drag' />
 
         <Space.Addon>{e('delay')}</Space.Addon>
         <FormItem

package/client/components/setting-panel/hotkey.jsx

@@ -51,6 +51,12 @@ export default class HotkeySetting extends Component {
     })
   }
 
+  handleClear = () => {
+    return this.props.onSaveConfig({
+      hotkey: ''
+    })
+  }
+
   convertToElectronAccelerator = (shortcut) => {
     if (!shortcut) return shortcut
 
@@ -117,7 +123,9 @@ export default class HotkeySetting extends Component {
         index: 0
       },
       updateConfig: this.onChangeHotkey,
-      keysTaken: this.getKeysTaken(hotkey)
+      keysTaken: this.getKeysTaken(hotkey),
+      handleClear: this.handleClear,
+      renderClear: true
     }
 
     return (

package/client/components/setting-panel/list.jsx

@@ -11,7 +11,6 @@ import { noop } from 'lodash-es'
 import highlight from '../common/highlight'
 import { settingSyncId, settingCommonId, staticNewItemTabs } from '../../common/constants'
 import getInitItem from '../../common/init-setting-item'
-import './list.styl'
 
 const e = window.translate
 

package/client/components/setting-panel/list.styl

@@ -8,6 +8,7 @@
 .list-item-remove
 .list-item-bookmark
 .list-item-duplicate
+.list-item-autorun
   display none
   width 24px
   line-height 35px
@@ -15,6 +16,8 @@
   position absolute
   right 0
   top 0
+.list-item-autorun
+  right 24px
 
 .list-item-title
   flex-grow: 1
@@ -37,6 +40,7 @@
     .list-item-remove
     .list-item-bookmark
     .list-item-duplicate
+    .list-item-autorun
       display block
 .theme-item:hover
     .list-item-remove