@electerm/electerm-react 1.38.50 → 1.38.60

package/client/common/constants.js

@@ -74,7 +74,6 @@ export const authTypeMap = buildConst([
   'privateKey'
 ])
 
-export const maxTransferHistory = 100
 export const footerHeight = 36
 export const quickCommandBoxHeight = 180
 export const isWin = typeof window.et.isWin === 'undefined' ? window.pre.isWin : window.et.isWin
@@ -140,6 +139,7 @@ export const sidebarPinnedKey = 'sidebar-pinned'
 export const leftSidebarWidthKey = 'left-sidebar-width'
 export const rightSidebarWidthKey = 'right-sidebar-width'
 export const sftpDefaultSortSettingKey = 'sftp-default-sort'
+export const qmSortByFrequencyKey = 'qm-sort-by-frequency'
 // https://github.com/tinkertrain/panda-syntax-vscode/blob/master/themes/workbench.yaml
 export const defaultTheme = {
   id: 'default',

package/client/common/fetch-from-server.js

@@ -14,6 +14,9 @@ export const initWsCommon = async () => {
     return
   }
   const ws = await initWs('common', id, undefined, undefined, true)
+  if (!ws) {
+    return
+  }
   window.et.wsOpened = true
   ws.onclose = () => {
     window.et.wsOpened = false

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

@@ -19,6 +19,12 @@ export default class QuickCommandsItem extends PureComponent {
 
   render () {
     const { name, id, nameMatch, labelMatch } = this.props.item
+    const {
+      draggable,
+      handleDragOver,
+      handleDragStart,
+      handleDrop
+    } = this.props
     const cls = classNames('qm-item mg1r mg1b', {
       'name-match': nameMatch,
       'label-match': labelMatch
@@ -28,6 +34,11 @@ export default class QuickCommandsItem extends PureComponent {
         key={id}
         className={cls}
         onClick={this.handleSelect}
+        data-id={id}
+        draggable={draggable}
+        onDragOver={handleDragOver}
+        onDragStart={handleDragStart}
+        onDrop={handleDrop}
       >
         {name}
       </Button>

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

@@ -7,7 +7,6 @@ import { isWin, quickCommandLabelsLsKey } from '../../common/constants'
 import { find, sortBy } from 'lodash-es'
 import { Button, Input, Select, Space } from 'antd'
 import * as ls from '../../common/safe-local-storage'
-import copy from 'json-deep-copy'
 import generate from '../../common/uid'
 import CmdItem from './quick-command-item'
 import delay from '../../common/wait'
@@ -110,6 +109,35 @@ export default class QuickCommandsFooterBox extends Component {
     return c.includes(vv) || m.includes(vv)
   }
 
+  onDragOver = e => {
+    e.preventDefault()
+  }
+
+  onDragStart = e => {
+    e.dataTransfer.setData('idDragged', e.target.getAttribute('data-id'))
+  }
+
+  // sort quick commands array when drop, so that the dragged item will be placed at the right position, e.target.getAttribute('data-id') would target item id, e.dataTransfer.getData('idDragged') would target dragged item id, then set window.store.quickCommands use window.store.setItems
+  onDrop = e => {
+    e.preventDefault()
+    const { store } = window
+    const { quickCommands } = store
+    const idDragged = e.dataTransfer.getData('idDragged')
+    const idDrop = e.target.getAttribute('data-id')
+    const idDraggedIndex = quickCommands.findIndex(
+      ({ id }) => id === idDragged
+    )
+    const targetIndex = quickCommands.findIndex(
+      ({ id }) => id === idDrop
+    )
+    if (idDraggedIndex < targetIndex) {
+      quickCommands.splice(targetIndex, 0, quickCommands.splice(idDraggedIndex, 1)[0])
+    } else {
+      quickCommands.splice(targetIndex + 1, 0, quickCommands.splice(idDraggedIndex, 1)[0])
+    }
+    store.setItems('quickCommands', quickCommands)
+  }
+
   renderNoCmd = () => {
     return (
       <div className='pd1'>
@@ -124,11 +152,18 @@ export default class QuickCommandsFooterBox extends Component {
   }
 
   renderItem = (item) => {
+    const {
+      qmSortByFrequency
+    } = this.props.store
     return (
       <CmdItem
         item={item}
         key={item.id}
         onSelect={this.handleSelect}
+        draggable={!qmSortByFrequency}
+        handleDragOver={this.onDragOver}
+        handleDragStart={this.onDragStart}
+        handleDrop={this.onDrop}
       />
     )
   }
@@ -144,32 +179,33 @@ export default class QuickCommandsFooterBox extends Component {
     )
   }
 
-  sortArray (array, keyword, labels) {
-    return sortBy(array, [
-      // First, sort by the keyword match
+  sortArray (array, keyword, labels, qmSortByFrequency) {
+    const sorters = [
       (obj) => !(keyword && obj.name.toLowerCase().includes(keyword)),
-      // Then, sort by the label match
-      (obj) => !labels.some((label) => obj.labels.includes(label)),
-      // Finally, sort by the clickCount
-      (obj) => -(obj.clickCount || 0)
-    ])
+      (obj) => !labels.some((label) => obj.labels.includes(label))
+    ]
+    if (qmSortByFrequency) {
+      sorters.push((obj) => -(obj.clickCount || 0))
+    }
+    return sortBy(array, sorters)
   }
 
   render () {
     const {
       openQuickCommandBar,
-      pinnedQuickCommandBar
+      pinnedQuickCommandBar,
+      qmSortByFrequency
     } = this.props.store
     if (!openQuickCommandBar && !pinnedQuickCommandBar) {
       return null
     }
-    const all = copy(this.props.store.currentQuickCommands)
+    const all = this.props.store.currentQuickCommands
     if (!all.length) {
       return this.renderNoCmd()
     }
     const keyword = this.state.keyword.toLowerCase()
     const { labels } = this.state
-    const filtered = this.sortArray(all, keyword, labels)
+    const filtered = this.sortArray(all, keyword, labels, qmSortByFrequency)
       .map(d => {
         return {
           ...d,
@@ -195,6 +231,7 @@ export default class QuickCommandsFooterBox extends Component {
       { 'fil-label': !!this.state.labels.length },
       { 'fil-keyword': !!keyword }
     )
+    const type = qmSortByFrequency ? 'primary' : 'default'
     return (
       <div
         className='qm-wrap-tooltip'
@@ -219,6 +256,13 @@ export default class QuickCommandsFooterBox extends Component {
                   this.renderTag
                 )}
               </Select>
+              <Button
+                className='mg1l iblock'
+                type={type}
+                onClick={this.props.store.handleSortByFrequency}
+              >
+                {e('sortByFrequency')}
+              </Button>
             </span>
             <span className='fright'>
               <Space.Compact>

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

@@ -33,6 +33,35 @@ export default class QuickCommandsList extends List {
     return this.props.store.quickCommandTags
   }
 
+  handleDragOver = e => {
+    e.preventDefault()
+  }
+
+  handleDragStart = e => {
+    e.dataTransfer.setData('idDragged', e.target.getAttribute('data-id'))
+  }
+
+  // adjust window.store.quickCommands array order when drop, so that the dragged item will be placed at the right position, e.target.getAttribute('data-id') would target item id, e.dataTransfer.getData('idDragged') would target dragged item id
+  handleDrop = e => {
+    e.preventDefault()
+    const { store } = window
+    const { quickCommands } = store
+    const idDragged = e.dataTransfer.getData('idDragged')
+    const idDrop = e.target.getAttribute('data-id')
+    const idDraggedIndex = quickCommands.findIndex(
+      ({ id }) => id === idDragged
+    )
+    const targetIndex = quickCommands.findIndex(
+      ({ id }) => id === idDrop
+    )
+    if (idDraggedIndex < targetIndex) {
+      quickCommands.splice(targetIndex, 0, quickCommands.splice(idDraggedIndex, 1)[0])
+    } else {
+      quickCommands.splice(targetIndex + 1, 0, quickCommands.splice(idDraggedIndex, 1)[0])
+    }
+    store.setItems('quickCommands', quickCommands)
+  }
+
   renderItem = (item, i) => {
     if (!item) {
       return null
@@ -55,6 +84,11 @@ export default class QuickCommandsList extends List {
         key={i + id}
         className={cls}
         onClick={() => this.onClickItem(item)}
+        data-id={id}
+        draggable
+        onDragOver={this.handleDragOver}
+        onDragStart={this.handleDragStart}
+        onDrop={this.handleDrop}
       >
         <div className='elli pd1y pd2x' title={name}>
           {

package/client/components/sftp/address-bookmark-item.jsx

@@ -26,15 +26,54 @@ export default class AddrBookmarkItem extends Component {
     )
   }
 
+  handleDragOver = e => {
+    e.preventDefault()
+  }
+
+  handleDragStart = e => {
+    e.dataTransfer.setData('idDragged', e.target.getAttribute('data-id'))
+  }
+
+  handleDrop = e => {
+    e.preventDefault()
+    const { store } = window
+    const [host, idDragged] = e.dataTransfer.getData('idDragged').split('#')
+    const idDrop = e.target.getAttribute('data-id').split('#')[1]
+    const addressBookmarks = host
+      ? store.addressBookmarks
+      : store.addressBookmarksLocal
+    const dataName = host
+      ? 'addressBookmarks'
+      : 'addressBookmarksLocal'
+    const idDraggedIndex = addressBookmarks.findIndex(
+      ({ id }) => id === idDragged
+    )
+    const targetIndex = addressBookmarks.findIndex(
+      ({ id }) => id === idDrop
+    )
+    if (idDraggedIndex < targetIndex) {
+      addressBookmarks.splice(targetIndex, 0, addressBookmarks.splice(idDraggedIndex, 1)[0])
+    } else {
+      addressBookmarks.splice(targetIndex + 1, 0, addressBookmarks.splice(idDraggedIndex, 1)[0])
+    }
+    store.setItems(dataName, addressBookmarks)
+  }
+
   render () {
     const {
       item
     } = this.props
+    const id = `${item.host}#${item.id}`
     return (
       <div
         key={item.id}
         className='sftp-history-item addr-bookmark-item'
         onClick={this.handleClick}
+        data-id={id}
+        draggable
+        onDragOver={this.handleDragOver}
+        onDragStart={this.handleDragStart}
+        onDrop={this.handleDrop}
       >
         {item.addr}
         <CloseCircleOutlined

package/client/components/sftp/address-bookmark.jsx

@@ -55,7 +55,9 @@ export default class AddrBookmark extends Component {
       })
       : null
     const content = (
-      <div>
+      <div
+        className='addr-bookmark-list'
+      >
         {inner}
       </div>
     )

package/client/components/sftp/transfer-conflict.jsx

@@ -21,7 +21,7 @@ import eq from 'fast-deep-equal'
 import { createTransferProps } from './transfer-common'
 
 export default (props) => {
-  const { transferList } = props
+  const { transferList, sessionId } = props
   const delta = useDelta(transferList)
   const currentId = useRef('')
   const timer = useRef(null)
@@ -105,7 +105,7 @@ export default (props) => {
       } else if (action === 'skipAll') {
         transferList.splice(index, 1)
       }
-      window.store.setTransfers(transferList)
+      window.store.setTransfers(transferList, sessionId)
       return {
         transferList
       }
@@ -126,7 +126,7 @@ export default (props) => {
       if (index >= 0) {
         transferList.splice(index, 1)
       }
-      window.store.setTransfers(transferList)
+      window.store.setTransfers(transferList, sessionId)
       return {
         transferList
       }
@@ -175,7 +175,7 @@ export default (props) => {
         }
         Object.assign(transferList[index], up)
       }
-      window.store.setTransfers(transferList)
+      window.store.setTransfers(transferList, sessionId)
       return {
         transferList
       }
@@ -211,7 +211,7 @@ export default (props) => {
       if (transferList[index]) {
         transferList[index].expanded = true
       }
-      window.store.setTransfers(transferList)
+      window.store.setTransfers(transferList, sessionId)
       return {
         transferList
       }

package/client/components/sftp/transport-action.jsx

@@ -43,7 +43,7 @@ export default function transportAction (props) {
       const transferList = copy(old.transferList)
       const index = findIndex(transferList, t => t.id === transfer.id)
       transferList.splice(index, 1, ...insts)
-      window.store.setTransfers(transferList)
+      window.store.setTransfers(transferList, transfer.sessionId)
       return {
         transferList
       }
@@ -111,7 +111,7 @@ export default function transportAction (props) {
       const transferList = oldTrans.filter(t => {
         return t.id !== id
       })
-      window.store.setTransfers(transferList)
+      window.store.setTransfers(transferList, transfer.sessionId)
       return {
         transferList
       }

package/client/components/sftp/transports-action.jsx

@@ -11,7 +11,7 @@ import eq from 'fast-deep-equal'
 import { isUndefined } from 'lodash-es'
 
 export default (props) => {
-  const { transferList, pauseAll } = props
+  const { transferList, pauseAll, sessionId } = props
   const delta = useDelta(transferList)
   const pauseControl = useDelta(pauseAll)
   async function control () {
@@ -31,7 +31,7 @@ export default (props) => {
         return t
       })
       if (old.pauseAll) {
-        window.store.setTransfers(transferList)
+        window.store.setTransfers(transferList, sessionId)
         return {
           transferList
         }
@@ -45,7 +45,7 @@ export default (props) => {
         return typeTo !== typeFrom && inited
       }).length
       if (count >= maxTransport) {
-        window.store.setTransfers(transferList)
+        window.store.setTransfers(transferList, sessionId)
         return {
           transferList
         }
@@ -93,7 +93,7 @@ export default (props) => {
           tr.inited = true
         }
       }
-      window.store.setTransfers(transferList)
+      window.store.setTransfers(transferList, sessionId)
       return {
         transferList
       }

package/client/store/init-state.js

@@ -18,7 +18,8 @@ import {
   localAddrBookmarkLsKey,
   leftSidebarWidthKey,
   rightSidebarWidthKey,
-  dismissDelKeyTipLsKey
+  dismissDelKeyTipLsKey,
+  qmSortByFrequencyKey
 } from '../common/constants'
 import { buildDefaultThemes, buildNewTheme } from '../common/terminal-theme'
 import * as ls from '../common/safe-local-storage'
@@ -141,6 +142,7 @@ export default () => {
     quickCommandId: '',
     openQuickCommandBar: false,
     pinnedQuickCommandBar: false,
+    qmSortByFrequency: ls.getItem(qmSortByFrequencyKey) === 'yes',
 
     // sidebar
     openedSideBar: ls.getItem(openedSidebarKey),

package/client/store/quick-command.js

@@ -4,9 +4,11 @@
 
 import {
   settingMap,
+  qmSortByFrequencyKey,
   terminalActions
 } from '../common/constants'
 import postMessage from '../common/post-msg'
+import * as ls from '../common/safe-local-storage'
 
 export default Store => {
   Store.prototype.setQuickCommands = function (list) {
@@ -36,4 +38,13 @@ export default Store => {
       activeSplitId: activeTerminalId
     })
   }
+
+  Store.prototype.setQmSortByFrequency = function (v) {
+    window.store.qmSortByFrequency = v
+    ls.setItem(qmSortByFrequencyKey, v ? 'yes' : 'no')
+  }
+
+  Store.prototype.handleSortByFrequency = function () {
+    window.store.setQmSortByFrequency(!window.store.qmSortByFrequency)
+  }
 }

package/client/store/transfer-history.js

@@ -2,10 +2,6 @@
  * transfer history related functions
  */
 
-import {
-  maxTransferHistory
-} from '../common/constants'
-
 export default Store => {
   Store.prototype.clearTransferHistory = function () {
     window.store.setItems('transferHistory', [])
@@ -21,7 +17,7 @@ export default Store => {
     transferHistory.unshift(item)
     store.setItems(
       'transferHistory',
-      transferHistory.slice(0, maxTransferHistory)
+      transferHistory
     )
   }
 }

package/client/store/transfer-list.js

@@ -1,9 +1,40 @@
+import { findIndex } from 'lodash-es'
 export default Store => {
   Store.prototype.handleTransferTab = function (tab) {
     window.store.transferTab = tab
   }
-  Store.prototype.setTransfers = function (list) {
-    return window.store.setItems('fileTransfers', list)
+
+  // should update any item with same id in oldList from list array, should add any new item from list array to oldList, should remove any item with same id and sessionId in oldList but not in list array
+  Store.prototype.setTransfers = function (list, _sessId) {
+    const { store } = window
+    let oldList = store.getTransfers()
+    const sessId = _sessId || list[0].sessionId
+    const arr2 = oldList.filter(t => {
+      return t.sessionId === sessId
+    })
+    const idsToRm = arr2.reduce((prev, curr) => {
+      if (!list.find(l => l.id === curr.id)) {
+        prev.push(curr.id)
+      }
+      return prev
+    }, [])
+    if (idsToRm.length) {
+      oldList = oldList.filter(t => {
+        return !idsToRm.includes(t.id)
+      })
+    }
+    for (const ntm of list) {
+      const index = findIndex(oldList, t => {
+        return t.id === ntm.id
+      })
+      if (index >= 0) {
+        oldList[index] = ntm
+        continue
+      } else {
+        oldList.unshift(ntm)
+      }
+    }
+    store.setItems('fileTransfers', oldList)
   }
   Store.prototype.getTransfers = function () {
     return window.store.getItems('fileTransfers')

package/package.json

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