@electerm/electerm-react 1.39.56 → 1.39.76

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

@@ -22,6 +22,7 @@ import {
   modals
 } from '../../common/constants'
 import HelpIcon from '../common/help-icon'
+import download from '../../common/download'
 import { autoRun } from 'manate'
 import { pick } from 'lodash-es'
 import { runCmd } from '../terminal/terminal-apis'
@@ -48,6 +49,45 @@ export default class BatchOp extends Component {
     tab: 'tasks'
   }
 
+  exampleColumns = [
+    { title: f('host'), dataIndex: 'host', key: 'host' },
+    { title: f('port'), dataIndex: 'port', key: 'port', responsive: ['md'] },
+    { title: f('username'), dataIndex: 'username', key: 'username', responsive: ['lg'] },
+    { title: f('password'), dataIndex: 'password', key: 'password', responsive: ['xl'] },
+    { title: 'Command', dataIndex: 'command', key: 'command', responsive: ['lg'] },
+    { title: t('localPath'), dataIndex: 'localPath', key: 'localPath', responsive: ['xl'] },
+    { title: t('remotePath'), dataIndex: 'remotePath', key: 'remotePath', responsive: ['xl'] },
+    { title: 'Action', dataIndex: 'action', key: 'action', responsive: ['md'] },
+    { title: 'Command After', dataIndex: 'commandAfter', key: 'commandAfter', responsive: ['xl'] }
+  ]
+
+  exampleData = [
+    {
+      key: '1',
+      host: '192.168.1.3',
+      port: '22',
+      username: 'username',
+      password: 'password',
+      command: 'touch yy.js && ls -al',
+      localPath: '/home/user/some_local_file_or_folder_to_upload',
+      remotePath: '/server/some_server_folder_for_upload',
+      action: 'upload',
+      commandAfter: 'touch yy1.js && ls -al'
+    },
+    {
+      key: '2',
+      host: '192.168.1.3',
+      port: '22',
+      username: 'username',
+      password: 'password',
+      command: 'ls -al',
+      localPath: '/home/user/some_local_folder_for_download',
+      remotePath: '/server/some_server_file_or_folder',
+      action: 'download',
+      commandAfter: 'ls'
+    }
+  ]
+
   componentDidMount () {
     this.watch()
   }
@@ -64,6 +104,15 @@ export default class BatchOp extends Component {
     window.removeEventListener('message', this.handleEvent)
   }
 
+  handleDownloadExample = () => {
+    const csvText = this.exampleData.map(d => {
+      return Object.keys(d).filter(d => d !== 'key').map(k => {
+        return d[k]
+      }).join(',')
+    }).join('\n')
+    download('batch-op-example.csv', csvText)
+  }
+
   handleEvent = e => {
     if (e && e.data && e.data.action === commonActions.batchOp) {
       const {
@@ -448,6 +497,14 @@ export default class BatchOp extends Component {
       working
     } = this.state
     const disabled = loading || working
+    const exampleTableProps = {
+      dataSource: this.exampleData,
+      columns: this.exampleColumns,
+      pagination: false,
+      size: 'small',
+      rowKey: 'key'
+    }
+
     return (
       <div>
         <div className='pd1y'>
@@ -458,12 +515,25 @@ export default class BatchOp extends Component {
             />
           </h2>
           <div className='pd1y'>{c('examples')}:</div>
-          <pre>
-            <code>"192.168.1.3","22","username","password","touch yy.js && ls -al","/home/user/some_local_file_or_folder_to_upload","/server/some_server_folder_for_upload","upload","touch yy1.js && ls -al"</code>
-          </pre>
-          <pre>
-            <code>"192.168.1.3","22","username","password","ls -al","/home/user/some_local_folder_for_download","/server/some_server_file_or_folder","download","ls"</code>
-          </pre>
+          <Table
+            {...exampleTableProps}
+          />
+          <div className='pd1t pd2b'>
+            <Button
+              onClick={this.handleDownloadExample}
+              type='dashed'
+            >
+              Download example csv
+            </Button>
+          </div>
+          <div className='pd2y'>
+            <pre>
+              <code>"192.168.1.3","22","username","password","touch yy.js && ls -al","/home/user/some_local_file_or_folder_to_upload","/server/some_server_folder_for_upload","upload","touch yy1.js && ls -al"</code>
+            </pre>
+            <pre>
+              <code>"192.168.1.3","22","username","password","ls -al","/home/user/some_local_folder_for_download","/server/some_server_file_or_folder","download","ls"</code>
+            </pre>
+          </div>
         </div>
         {this.renderErrors()}
         <div className='pd1y'>

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

@@ -24,6 +24,13 @@ export default function renderAuth (props) {
     form,
     authType
   } = props
+  const beforeUpload = async (file) => {
+    const privateKey = await window.fs.readFile(file.path)
+    form.setFieldsValue({
+      privateKey
+    })
+    return false
+  }
   if (authType === 'password') {
     const opts = {
       options: uniqBy(
@@ -101,7 +108,7 @@ export default function renderAuth (props) {
         />
       </FormItem>
       <Upload
-        beforeUpload={file => props.beforeUpload(file, form)}
+        beforeUpload={beforeUpload}
         fileList={[]}
       >
         <Button

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

@@ -307,17 +307,8 @@ export default class BookmarkForm extends PureComponent {
     }
   }
 
-  beforeUpload = async (file, form) => {
-    const privateKey = await window.fs.readFile(file.path)
-    form.setFieldsValue({
-      privateKey
-    })
-    return false
-  }
-
   getProps = () => {
     const funcs = pick(this, [
-      'beforeUpload',
       'handleFinish',
       'testConnection',
       'connect',

package/client/components/footer/footer-entry.jsx

@@ -17,7 +17,7 @@ const {
 const { prefix } = window
 const f = prefix('form')
 
-export default class SystemMenu extends Component {
+export default class FooterEntry extends Component {
   handleInfoPanel = () => {
     const { activeTerminalId } = this.props.store
     postMessage({

package/client/components/quick-commands/quick-command-item.jsx

@@ -18,7 +18,7 @@ export default class QuickCommandsItem extends PureComponent {
   }
 
   render () {
-    const { name, id, nameMatch, labelMatch } = this.props.item
+    const { name, id, nameMatch, labelMatch, shortcut } = this.props.item
     const {
       draggable,
       handleDragOver,
@@ -29,16 +29,20 @@ export default class QuickCommandsItem extends PureComponent {
       'name-match': nameMatch,
       'label-match': labelMatch
     })
+    const btnProps = {
+      className: cls,
+      onClick: this.handleSelect,
+      'data-id': id,
+      title: shortcut,
+      draggable,
+      onDragOver: handleDragOver,
+      onDragStart: handleDragStart,
+      onDrop: handleDrop
+    }
     return (
       <Button
         key={id}
-        className={cls}
-        onClick={this.handleSelect}
-        data-id={id}
-        draggable={draggable}
-        onDragOver={handleDragOver}
-        onDragStart={handleDragStart}
-        onDrop={handleDrop}
+        {...btnProps}
       >
         {name}
       </Button>

package/client/components/quick-commands/quick-commands-box.jsx

@@ -3,13 +3,11 @@
  */
 
 import { Component } from '../common/react-subx'
-import { isWin, quickCommandLabelsLsKey } from '../../common/constants'
-import { find, sortBy } from 'lodash-es'
+import { quickCommandLabelsLsKey } from '../../common/constants'
+import { sortBy } from 'lodash-es'
 import { Button, Input, Select, Space } from 'antd'
 import * as ls from '../../common/safe-local-storage'
-import generate from '../../common/uid'
 import CmdItem from './quick-command-item'
-import delay from '../../common/wait'
 import {
   EditOutlined,
   CloseCircleOutlined,
@@ -54,33 +52,7 @@ export default class QuickCommandsFooterBox extends Component {
     if (id === addQuickCommands) {
       store.handleOpenQuickCommandsSetting()
     } else {
-      const qm = find(
-        this.props.store.currentQuickCommands,
-        a => a.id === id
-      )
-      const { runQuickCommand } = this.props.store
-      const qms = qm && qm.commands
-        ? qm.commands
-        : (qm && qm.command
-            ? [
-                {
-                  command: qm.command,
-                  id: generate(),
-                  delay: 100
-                }
-              ]
-            : []
-          )
-      for (const q of qms) {
-        const realCmd = isWin
-          ? q.command.replace(/\n/g, '\n\r')
-          : q.command
-        await delay(q.delay || 100)
-        runQuickCommand(realCmd, qm.inputOnly)
-        store.editQuickCommand(qm.id, {
-          clickCount: ((qm.clickCount || 0) + 1)
-        })
-      }
+      store.runQuickCommandItem(id)
     }
   }
 
@@ -195,7 +167,9 @@ export default class QuickCommandsFooterBox extends Component {
       openQuickCommandBar,
       pinnedQuickCommandBar,
       qmSortByFrequency,
-      inActiveTerminal
+      inActiveTerminal,
+      leftSidebarWidth,
+      openedSideBar
     } = this.props.store
     if ((!openQuickCommandBar && !pinnedQuickCommandBar) || !inActiveTerminal) {
       return null
@@ -233,11 +207,18 @@ export default class QuickCommandsFooterBox extends Component {
       { 'fil-keyword': !!keyword }
     )
     const type = qmSortByFrequency ? 'primary' : 'default'
+    const w = openedSideBar ? 43 + leftSidebarWidth : 43
+    const qmProps = {
+      className: 'qm-wrap-tooltip',
+      style: {
+        left: w
+      },
+      onMouseLeave: this.handleMouseLeave,
+      onMouseEnter: this.handleMouseEnter
+    }
     return (
       <div
-        className='qm-wrap-tooltip'
-        onMouseLeave={this.handleMouseLeave}
-        onMouseEnter={this.handleMouseEnter}
+        {...qmProps}
       >
         <div className='pd2'>
           <div className='pd2b fix'>

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

@@ -1,48 +1,118 @@
-import { Button, Switch, Form, message, Select } from 'antd'
-import copy from 'json-deep-copy'
+import {
+  Button,
+  Switch,
+  Form,
+  message,
+  Select,
+  Input
+} from 'antd'
+import { useState } from 'react'
 import generate from '../../common/uid'
 import InputAutoFocus from '../common/input-auto-focus'
 import renderQm from './quick-commands-list-form'
+import ShortcutEdit from '../shortcuts/shortcut-editor'
+import shortcutsDefaultsGen from '../shortcuts/shortcuts-defaults'
+import deepCopy from 'json-deep-copy'
+import {
+  isMacJs as isMac
+} from '../../common/constants.js'
+
 const FormItem = Form.Item
 const { Option } = Select
 const { prefix } = window
 const e = prefix('form')
 const t = prefix('quickCommands')
 const s = prefix('setting')
+const shortcutsDefaults = shortcutsDefaultsGen()
 
 export default function QuickCommandForm (props) {
   const [form] = Form.useForm()
-  const { autofocustrigger, quickCommandTags = [] } = props.store
+  const { store, formData } = props
+  const { autofocustrigger, quickCommandTags = [] } = store
+  const [shortcut, setShortcut] = useState(formData.shortcut || '')
+  const uid = formData.id || generate()
+  const updateConfig = (name, value) => {
+    form.setFieldsValue({
+      shortcut: value
+    })
+    setShortcut(value)
+  }
+  const handleClear = () => {
+    console.log('handleClear')
+    form.setFieldsValue({
+      shortcut: ''
+    })
+    setShortcut('')
+  }
+  const getKeysTakenData = () => {
+    const { shortcuts = {} } = store.config
+    const { quickCommands = [] } = store
+
+    // Gather system shortcuts
+    const systemShortcuts = shortcutsDefaults.reduce((p, k) => {
+      const propName = isMac ? 'shortcutMac' : 'shortcut'
+      const name = k.name + '_' + propName
+      const vv = k.readonly ? k[propName] : (shortcuts[name] || k[propName])
+      const v = vv
+        .split(',')
+        .map(f => f.trim())
+        .reduce((p, k) => ({
+          ...p,
+          [k]: true
+        }), {})
+      return {
+        ...p,
+        ...v
+      }
+    }, {})
+
+    // Gather quick command shortcuts
+    const quickCommandShortcuts = quickCommands.reduce((acc, command) => {
+      if (command.shortcut) {
+        acc[command.shortcut] = true
+      }
+      return acc
+    }, {})
+
+    // Combine system shortcuts and quick command shortcuts
+    return {
+      ...systemShortcuts,
+      ...quickCommandShortcuts
+    }
+  }
+
   async function handleSubmit (res) {
     const { formData } = props
     const {
       name,
       commands,
       inputOnly,
-      labels
+      labels,
+      shortcut
     } = res
-    const update = copy({
+    const update = deepCopy({
       name,
       commands,
       inputOnly,
-      labels
+      labels,
+      shortcut
     })
     const update1 = {
       ...update,
-      id: generate()
+      id: uid
     }
     if (formData.id) {
-      props.store.editQuickCommand(formData.id, update)
+      store.editQuickCommand(formData.id, update)
     } else {
-      props.store.addQuickCommand(update1)
-      props.store.setSettingItem({
+      store.addQuickCommand(update1)
+      store.setSettingItem({
         id: '',
         name: t('newQuickCommand')
       })
     }
     message.success(s('saved'))
   }
-  const initialValues = props.formData
+  const initialValues = formData
   if (!initialValues.labels) {
     initialValues.labels = []
   }
@@ -53,6 +123,18 @@ export default function QuickCommandForm (props) {
       delay: 100
     }]
   }
+  console.log('initialValues', initialValues, formData)
+  const editorProps = {
+    data: {
+      name: uid,
+      shortcut
+    },
+    keysTaken: getKeysTakenData(),
+    store,
+    updateConfig,
+    handleClear,
+    renderClear: true
+  }
   return (
     <Form
       form={form}
@@ -95,6 +177,17 @@ export default function QuickCommandForm (props) {
           }
         </Select>
       </FormItem>
+      <FormItem
+        label={s('settingShortcuts')}
+        name='shortcut'
+      >
+        <div>
+          <Input className='hide' />
+          <ShortcutEdit
+            {...editorProps}
+          />
+        </div>
+      </FormItem>
       <FormItem
         label={t('inputOnly')}
         name='inputOnly'

package/client/components/setting-panel/keywords-form.jsx

@@ -26,6 +26,10 @@ export default function KeywordForm (props) {
     formChild.submit()
   }
 
+  function handleChange (e) {
+    formChild.submit()
+  }
+
   function handleFinish (data) {
     props.submit(data)
   }
@@ -34,7 +38,7 @@ export default function KeywordForm (props) {
     try {
       return Promise.resolve(!!new RegExp(`(${value})`, 'gi'))
     } catch (e) {
-      console.log(e)
+      console.log(e, 'check keyword error')
       return Promise.reject(e)
     }
   }
@@ -57,6 +61,7 @@ export default function KeywordForm (props) {
           >
             <Input
               addonBefore={renderBefore(field.name)}
+              onChange={handleChange}
             />
           </FormItem>
         </FormItem>
@@ -121,7 +126,9 @@ export default function KeywordForm (props) {
                     <FormItem>
                       <Button
                         type='dashed'
-                        onClick={() => add()}
+                        onClick={() => add({
+                          color: 'red'
+                        })}
                         icon={<PlusOutlined />}
                       >
                         {f('keyword')}

package/client/components/shortcuts/shortcut-editor.jsx

@@ -143,16 +143,30 @@ export default class ShortcutEdit extends PureComponent {
     return (
       <Button
         className='edit-shortcut-button'
-        onClick={this.handleEditClick}
       >
         <span>{shortcut}</span>
         <EditFilled
           className='shortcut-edit-icon pointer mg1l'
+          onClick={this.handleEditClick}
         />
+        {
+          this.renderClear()
+        }
       </Button>
     )
   }
 
+  renderClear () {
+    if (this.props.renderClear && this.props.data.shortcut) {
+      return (
+        <CloseOutlined
+          className='pointer mg1l'
+          onClick={this.props.handleClear}
+        />
+      )
+    }
+  }
+
   renderAfter () {
     const {
       shortcut

package/client/components/shortcuts/shortcut-handler.js

@@ -102,6 +102,14 @@ export function shortcutExtend (Cls) {
     const shortcutsConfig = buildConfig(this.props.config, d => !d.hidden)
     const keys = Object.keys(shortcutsConfig)
     const len = keys.length
+    if (this.term) {
+      const qmMatch = window.store.quickCommands.find(d => d.shortcut === r)
+      if (qmMatch) {
+        window.store.runQuickCommandItem(
+          qmMatch.id
+        )
+      }
+    }
     for (let i = 0; i < len; i++) {
       const k = keys[i]
       const conf = shortcutsConfig[k]

package/client/components/shortcuts/shortcuts.jsx

@@ -51,26 +51,41 @@ export default class Shortcuts extends Component {
   }
 
   getKeysTakenData = () => {
-    const { shortcuts = {} } = this.props.store.config
-    return shortcutsDefaults
-      .reduce((p, k) => {
-        const propName = isMac ? 'shortcutMac' : 'shortcut'
-        const name = k.name + '_' + propName
-        const vv = k.readonly ? k[propName] : (shortcuts[name] || k[propName])
-        const v = vv
-          .split(',')
-          .map(f => f.trim())
-          .reduce((p, k, i) => {
-            return {
-              ...p,
-              [k]: true
-            }
-          }, {})
-        return {
+    const { store } = this.props
+    const { shortcuts = {} } = store.config
+    const { quickCommands = [] } = store
+
+    // Gather system shortcuts
+    const systemShortcuts = shortcutsDefaults.reduce((p, k) => {
+      const propName = isMac ? 'shortcutMac' : 'shortcut'
+      const name = k.name + '_' + propName
+      const vv = k.readonly ? k[propName] : (shortcuts[name] || k[propName])
+      const v = vv
+        .split(',')
+        .map(f => f.trim())
+        .reduce((p, k) => ({
           ...p,
-          ...v
-        }
-      }, {})
+          [k]: true
+        }), {})
+      return {
+        ...p,
+        ...v
+      }
+    }, {})
+
+    // Gather quick command shortcuts
+    const quickCommandShortcuts = quickCommands.reduce((acc, command) => {
+      if (command.shortcut) {
+        acc[command.shortcut] = true
+      }
+      return acc
+    }, {})
+
+    // Combine system shortcuts and quick command shortcuts
+    return {
+      ...systemShortcuts,
+      ...quickCommandShortcuts
+    }
   }
 
   render () {
@@ -113,7 +128,7 @@ export default class Shortcuts extends Component {
         }
       },
       {
-        title: s('shortcut'),
+        title: s('settingShortcuts'),
         dataIndex: 'shortcut',
         key: 'shortcut',
         render: (shortcut, inst) => {

package/client/components/terminal-info/content.jsx

@@ -19,6 +19,7 @@ import {
   PushpinOutlined
 } from '@ant-design/icons'
 import classNames from 'classnames'
+import './terminal-info.styl'
 
 export default class TerminalInfoContent extends PureComponent {
   state = {

package/client/components/tree-list/tree-list.jsx

@@ -997,7 +997,8 @@ export default class ItemListTree extends Component {
       bookmarkGroupIds = [],
       id
     } = group
-    if (!this.state.expandedKeys.includes(id)) {
+    const shouldRender = this.state.keyword || this.state.expandedKeys.includes(id)
+    if (!shouldRender) {
       return null
     }
     return [

package/client/store/quick-command.js

@@ -5,8 +5,11 @@
 import {
   settingMap,
   qmSortByFrequencyKey,
-  terminalActions
+  terminalActions,
+  isWin
 } from '../common/constants'
+import delay from '../common/wait'
+import generate from '../common/uid'
 import postMessage from '../common/post-msg'
 import * as ls from '../common/safe-local-storage'
 
@@ -39,6 +42,39 @@ export default Store => {
     })
   }
 
+  Store.prototype.runQuickCommandItem = async (id) => {
+    const {
+      store
+    } = window
+
+    const qm = store.currentQuickCommands.find(
+      a => a.id === id
+    )
+    const { runQuickCommand } = store
+    const qms = qm && qm.commands
+      ? qm.commands
+      : (qm && qm.command
+          ? [
+              {
+                command: qm.command,
+                id: generate(),
+                delay: 100
+              }
+            ]
+          : []
+        )
+    for (const q of qms) {
+      const realCmd = isWin
+        ? q.command.replace(/\n/g, '\n\r')
+        : q.command
+      await delay(q.delay || 100)
+      runQuickCommand(realCmd, qm.inputOnly)
+      store.editQuickCommand(qm.id, {
+        clickCount: ((qm.clickCount || 0) + 1)
+      })
+    }
+  }
+
   Store.prototype.setQmSortByFrequency = function (v) {
     window.store.qmSortByFrequency = v
     ls.setItem(qmSortByFrequencyKey, v ? 'yes' : 'no')

package/package.json

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