@electerm/electerm-react 3.0.18 → 3.1.16

package/client/common/constants.js

@@ -190,13 +190,15 @@ export const syncTypes = buildConst([
   'github',
   'gitee',
   'custom',
-  'cloud'
+  'cloud',
+  'webdav'
 ])
 export const syncTokenCreateUrls = {
   gitee: 'https://gitee.com/github-zxdong262/electerm/wikis/Create%20personal%20access%20token?sort_id=3028409',
   github: 'https://github.com/electerm/electerm/wiki/Create-personal-access-token',
   custom: 'https://github.com/electerm/electerm/wiki/Custom-sync-server',
-  cloud: 'https://electerm-cloud.html5beta.com'
+  cloud: 'https://electerm-cloud.html5beta.com',
+  webdav: 'https://github.com/electerm/electerm/wiki/WebDAV-sync'
 }
 export const settingSyncId = 'setting-sync'
 export const settingTerminalId = 'setting-terminal'
@@ -350,6 +352,4 @@ export const terminalTypes = [
 export const sshConfigLoadKey = 'ssh-config-loaded'
 export const sshConfigKey = 'ignore-ssh-config'
 export const connectionHoppingWarnKey = 'connectionHoppingWarnned'
-export const aiChatHistoryKey = 'ai-chat-history'
 export const syncServerDataKey = 'sync-server-data'
-export const cmdHistoryKey = 'cmd-history'

package/client/common/db.js

@@ -23,17 +23,27 @@ const dbAction = (...args) => {
 /**
  * standalone db names
  */
-export const dbNames = without(
-  Object.keys(settingMap),
-  settingMap.setting,
-  settingMap.widgets
-)
+export const dbNames = [
+  ...without(
+    Object.keys(settingMap),
+    settingMap.setting,
+    settingMap.widgets
+  ),
+  'history',
+  'terminalCommandHistory',
+  'aiChatHistory'
+]
 
-export const dbNamesForWatch = without(
-  Object.keys(settingMap),
-  settingMap.setting,
-  settingMap.widgets
-)
+export const dbNamesForWatch = [
+  ...without(
+    Object.keys(settingMap),
+    settingMap.setting,
+    settingMap.widgets
+  ),
+  'history',
+  'terminalCommandHistory',
+  'aiChatHistory'
+]
 
 /**
  * db insert

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

@@ -31,25 +31,50 @@ export default class ConfirmModalStore extends Component {
       transferToConfirm: null
     }
     this.queue = []
+    this.queuedTransferIds = new Set()
+    this.activeTransferId = null
     this.id = 'transfer-conflict'
     refsStatic.add(this.id, this)
   }
 
   addConflict = (transfer) => {
+    const transferId = transfer?.id
+    if (!transferId) {
+      return
+    }
+    if (this.activeTransferId === transferId || this.queuedTransferIds.has(transferId)) {
+      return
+    }
+    const globalPolicy = window._transferConflictPolicy
+    if (globalPolicy && Object.values(fileActions).includes(globalPolicy)) {
+      const { id, transferBatch } = transfer
+      const trid = `tr-${transferBatch}-${id}`
+      const currentTransfer = refsTransfers.get(trid)
+      currentTransfer?.onDecision(globalPolicy)
+      return
+    }
     this.queue.push(transfer)
-    if (!this.state.transferToConfirm) {
+    this.queuedTransferIds.add(transferId)
+    if (!this.activeTransferId) {
       this.showNext()
     }
   }
 
   showNext = () => {
     const next = this.queue.shift()
+    if (next?.id) {
+      this.queuedTransferIds.delete(next.id)
+    }
+    this.activeTransferId = next?.id || null
     this.setState({
       transferToConfirm: next
     })
   }
 
   act = (action) => {
+    if (!this.state.transferToConfirm) {
+      return
+    }
     const { id, transferBatch } = this.state.transferToConfirm
     const toAll = action.includes('All')
     const policy = toAll ? action.replace('All', '') : action
@@ -60,10 +85,17 @@ export default class ConfirmModalStore extends Component {
     if (doFilter) {
       // Update all existing transfers with same batch ID in DOM
       const prefix = `tr-${transferBatch}-`
+      const pendingConflictIds = new Set([
+        id,
+        ...this.queue
+          .filter(d => d.transferBatch === transferBatch)
+          .map(d => d.id)
+      ])
       for (const [key, r] of window.refsTransfers.entries()) {
         if (key.startsWith(prefix)) {
-          if (key !== trid) {
-            r.resolvePolicy = policy
+          r.resolvePolicy = policy
+          const transferId = r.props.transfer?.id
+          if (key !== trid && pendingConflictIds.has(transferId)) {
             r.onDecision(policy)
           }
         }
@@ -72,9 +104,11 @@ export default class ConfirmModalStore extends Component {
     }
 
     // Resolve current conflict
-    refsTransfers.get(trid)?.onDecision(policy)
+    const currentTransfer = refsTransfers.get(trid)
+    currentTransfer?.onDecision(policy)
 
     // Move to the next item
+    this.activeTransferId = null
     this.setState({
       transferToConfirm: null
     }, this.showNext)

package/client/components/file-transfer/transfer-queue.jsx

@@ -41,7 +41,12 @@ export default class Queue extends Component {
     return new Promise((resolve, reject) => {
       const { fileTransfers } = window.store
       const [id, updateObj] = args
+      let completed = false
       const end = () => {
+        if (completed) {
+          return
+        }
+        completed = true
         this.currentRun && this.currentRun.stop()
         resolve()
       }
@@ -99,10 +104,11 @@ export default class Queue extends Component {
           })()
         }
 
-        // For non-transfer operations, check immediately
-        // if (!isTransferInit) {
-        //   checkCompletion()
-        // }
+        // Progress and delete updates are synchronous store mutations.
+        // Resolve them here so the queue cannot stall waiting for another reaction.
+        if (!isTransferInit) {
+          checkCompletion()
+        }
       }
 
       function checkCompletion () {

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

@@ -77,11 +77,11 @@ export default class TransportAction extends Component {
   }
 
   localCheckExist = (path) => {
-    return getLocalFileInfo(path).catch(console.log)
+    return getLocalFileInfo(path)
+      .catch(() => null)
   }
 
   remoteCheckExist = (path, tabId) => {
-    // return true
     const sftp = refs.get('sftp-' + tabId)?.sftp
     if (!sftp) {
       console.log('remoteCheckExist error', 'sftp not exist')
@@ -373,10 +373,12 @@ export default class TransportAction extends Component {
         toFile
       })
       if (transfer.resolvePolicy) {
-        return this.onDecision(transfer.resolvePolicy)
+        this.onDecision(transfer.resolvePolicy)
+        return true
       }
       if (this.resolvePolicy) {
-        return this.onDecision(this.resolvePolicy)
+        this.onDecision(this.resolvePolicy)
+        return true
       }
       const transferWithToFile = {
         ...copy(transfer),
@@ -386,6 +388,7 @@ export default class TransportAction extends Component {
       refsStatic.get('transfer-conflict')?.addConflict(transferWithToFile)
       return true
     }
+    return false
   }
 
   onDecision = (policy) => {

package/client/components/file-transfer/transports-action-store.jsx

@@ -12,6 +12,11 @@ import { refsStatic } from '../common/ref'
 window.initingFtpTabIds = new Set()
 
 export default class TransportsActionStore extends Component {
+  constructor (props) {
+    super(props)
+    this.pendingInitIds = new Set()
+  }
+
   componentDidMount () {
     this.control()
   }
@@ -29,6 +34,12 @@ export default class TransportsActionStore extends Component {
     const {
       fileTransfers
     } = store
+    this.pendingInitIds = new Set(
+      Array.from(this.pendingInitIds).filter(id => {
+        const transfer = fileTransfers.find(t => t.id === id)
+        return transfer && transfer.inited !== true
+      })
+    )
 
     // First loop: Handle same type transfers
     for (const t of fileTransfers) {
@@ -57,7 +68,7 @@ export default class TransportsActionStore extends Component {
         inited,
         pausing
       } = t
-      return typeTo !== typeFrom && inited && pausing !== true
+      return typeTo !== typeFrom && (inited || this.pendingInitIds.has(t.id)) && pausing !== true
     }).length
 
     if (count >= maxTransport) {
@@ -80,7 +91,7 @@ export default class TransportsActionStore extends Component {
 
       const isTransfer = typeTo !== typeFrom
 
-      if (inited || !isTransfer) {
+      if (inited || this.pendingInitIds.has(id) || !isTransfer) {
         continue
       }
 
@@ -95,6 +106,7 @@ export default class TransportsActionStore extends Component {
 
       if (count < maxTransport) {
         count++
+        this.pendingInitIds.add(id)
         refsStatic.get('transfer-queue')?.addToQueue(
           'update',
           id,

package/client/components/footer/cmd-history.jsx

@@ -31,7 +31,7 @@ export default auto(function CmdHistory (props) {
 
   function handleDeleteCommand (cmd, ev) {
     ev.stopPropagation()
-    terminalCommandHistory.delete(cmd)
+    window.store.deleteCmdHistory(cmd)
   }
 
   function handleCopyCommand (cmd, ev) {
@@ -54,9 +54,7 @@ export default auto(function CmdHistory (props) {
     setKeyword(e.target.value)
   }
 
-  const historyArray = Array.from(terminalCommandHistory || [])
-    .map(([cmd, info]) => ({ cmd, ...info }))
-    .reverse()
+  const historyArray = (terminalCommandHistory || []).slice().reverse()
 
   let filtered = filterArray(historyArray, keyword)
 

package/client/components/quick-commands/qm.styl

@@ -25,6 +25,14 @@
 
 .item-list-unit.dragover
   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
+  border-top 2px solid var(--primary)
 .qm-label-select
   min-width 120px
 

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

@@ -23,6 +23,8 @@ export default class QuickCommandsItem extends PureComponent {
       draggable,
       handleDragOver,
       handleDragStart,
+      handleDragEnter,
+      handleDragLeave,
       handleDrop
     } = this.props
     const cls = classNames('qm-item mg1r mg1b')
@@ -34,6 +36,8 @@ export default class QuickCommandsItem extends PureComponent {
       draggable,
       onDragOver: handleDragOver,
       onDragStart: handleDragStart,
+      onDragEnter: handleDragEnter,
+      onDragLeave: handleDragLeave,
       onDrop: handleDrop
     }
     return (

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

@@ -87,6 +87,14 @@ export default function QuickCommandsFooterBox (props) {
     e.dataTransfer.setData('idDragged', e.target.getAttribute('data-id'))
   }
 
+  function onDragEnter (e) {
+    e.target.closest('.qm-item')?.classList.add('qm-item-dragover')
+  }
+
+  function onDragLeave (e) {
+    e.target.closest('.qm-item')?.classList.remove('qm-item-dragover')
+  }
+
   function onDrop (e) {
     onDropFunc(e, '.qm-item')
   }
@@ -116,6 +124,8 @@ export default function QuickCommandsFooterBox (props) {
         draggable={!qmSortByFrequency}
         handleDragOver={onDragOver}
         handleDragStart={onDragStart}
+        handleDragEnter={onDragEnter}
+        handleDragLeave={onDragLeave}
         handleDrop={onDrop}
       />
     )

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

@@ -127,7 +127,7 @@ export default function QuickCommandForm (props) {
         >
           <InputAutoFocus />
         </FormItem>
-        {renderQm()}
+        {renderQm(form)}
         <FormItem
           name='labels'
           label={e('label')}

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

@@ -5,7 +5,7 @@ import {
   Button,
   Input
 } from 'antd'
-import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
+import { MinusCircleOutlined, PlusOutlined, HolderOutlined } from '@ant-design/icons'
 import HelpIcon from '../common/help-icon'
 import { copy } from '../../common/clipboard'
 import { useRef } from 'react'
@@ -14,15 +14,70 @@ const FormItem = Form.Item
 const FormList = Form.List
 const e = window.translate
 
-export default function renderQm () {
+export default function renderQm (form) {
   const focused = useRef(0)
-  function renderItem (field, i, add, remove) {
+  const dragIndexRef = useRef(null)
+
+  function handleDragStart (e, index) {
+    dragIndexRef.current = index
+    e.target.closest('.ant-space-compact')?.classList.add('qm-field-dragging')
+    e.dataTransfer.effectAllowed = 'move'
+    e.dataTransfer.setData('text/plain', String(index))
+  }
+
+  function handleDragOver (e, index) {
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'move'
+    const el = e.target.closest('.ant-space-compact')
+    if (dragIndexRef.current !== index && el) {
+      el.classList.add('qm-field-dragover')
+    }
+  }
+
+  function handleDragLeave (e) {
+    e.target.closest('.ant-space-compact')?.classList.remove('qm-field-dragover')
+  }
+
+  function handleDrop (e, index, form) {
+    e.preventDefault()
+    const el = e.target.closest('.ant-space-compact')
+    el?.classList.remove('qm-field-dragover')
+    const dragIndex = dragIndexRef.current
+    if (dragIndex === null || dragIndex === index) {
+      dragIndexRef.current = null
+      return
+    }
+    const commands = form.getFieldValue('commands') || []
+    const item = commands[dragIndex]
+    const newCommands = [...commands]
+    newCommands.splice(dragIndex, 1)
+    newCommands.splice(index, 0, item)
+    form.setFieldValue('commands', newCommands)
+    dragIndexRef.current = null
+  }
+
+  function handleDragEnd (e) {
+    const el = e.target.closest('.ant-space-compact')
+    el?.classList.remove('qm-field-dragging')
+    el?.classList.remove('qm-field-dragover')
+    dragIndexRef.current = null
+  }
+
+  function renderItem (field, i, add, remove, form) {
     return (
       <Space.Compact
         align='center'
         className='width-100 mg2b'
         key={field.key}
+        draggable
+        onDragStart={(e) => handleDragStart(e, i)}
+        onDragOver={(e) => handleDragOver(e, i)}
+        onDragLeave={handleDragLeave}
+        onDrop={(e) => handleDrop(e, i, form)}
+        onDragEnd={handleDragEnd}
       >
+        <HolderOutlined className='mg1r qm-drag-handle' />
+
         <Space.Addon>{e('delay')}</Space.Addon>
         <FormItem
           label=''
@@ -119,7 +174,7 @@ export default function renderQm () {
               <>
                 {
                   fields.map((field, i) => {
-                    return renderItem(field, i, add, remove)
+                    return renderItem(field, i, add, remove, form)
                   })
                 }
                 <FormItem>

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

@@ -3,12 +3,14 @@
  */
 
 import List from '../setting-panel/list'
-import { PlusOutlined } from '@ant-design/icons'
+import { PlusOutlined, CopyOutlined } from '@ant-design/icons'
 import { Select } from 'antd'
 import classnames from 'classnames'
 import highlight from '../common/highlight'
 import QmTransport from './quick-command-transport'
 import onDrop from './on-drop'
+import copy from 'json-deep-copy'
+import uid from '../../common/uid'
 
 const { Option } = Select
 const e = window.translate
@@ -45,17 +47,44 @@ export default class QuickCommandsList extends List {
   }
 
   handleDragEnter = e => {
-    e.target.closest('.item-list-unit').classList.add('dragover')
+    e.target.closest('.item-list-unit').classList.add('qm-field-dragover')
   }
 
   handleDragLeave = e => {
-    e.target.closest('.item-list-unit').classList.remove('dragover')
+    e.target.closest('.item-list-unit').classList.remove('qm-field-dragover')
   }
 
   handleDrop = e => {
     onDrop(e, '.item-list-unit')
   }
 
+  duplicateItem = (e, item) => {
+    e.stopPropagation()
+    const { store } = window
+    const newCommand = copy(item)
+    newCommand.id = uid()
+    const baseName = item.name.replace(/\(\d+\)$/, '')
+    const sameNameCount = store.currentQuickCommands.filter(
+      cmd => cmd.name && cmd.name.replace(/\(\d+\)$/, '').includes(baseName)
+    ).length
+    const duplicateIndex = sameNameCount > 0 ? sameNameCount : 1
+    newCommand.name = baseName + '(' + duplicateIndex + ')'
+    store.addQuickCommand(newCommand)
+  }
+
+  renderDuplicateBtn = (item) => {
+    if (!item.id) {
+      return null
+    }
+    return (
+      <CopyOutlined
+        title={e('duplicate')}
+        className='pointer list-item-duplicate'
+        onClick={(e) => this.duplicateItem(e, item)}
+      />
+    )
+  }
+
   renderItem = (item, i) => {
     if (!item) {
       return null
@@ -94,6 +123,7 @@ export default class QuickCommandsList extends List {
           }
           {title}
         </div>
+        {this.renderDuplicateBtn(item)}
         {this.renderDelBtn(item)}
       </div>
     )

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

@@ -7,6 +7,7 @@
 .list-item-apply
 .list-item-remove
 .list-item-bookmark
+.list-item-duplicate
   display none
   width 24px
   line-height 35px
@@ -35,6 +36,7 @@
     .list-item-edit
     .list-item-remove
     .list-item-bookmark
+    .list-item-duplicate
       display block
 .theme-item:hover
     .list-item-remove
@@ -49,4 +51,6 @@
 //     right 20px
 .item-list-unit
   .list-item-bookmark
-    right 18px
+    right 18px
+  .list-item-duplicate
+    right 24px

package/client/components/setting-sync/server-data-status.jsx

@@ -1,3 +1,4 @@
+import { syncTypes } from '../../common/constants'
 import { useState } from 'react'
 import { LoadingOutlined, ReloadOutlined } from '@ant-design/icons'
 import dayjs from 'dayjs'
@@ -10,7 +11,7 @@ export default function ServerDataStatus (props) {
   const [loading, setLoading] = useState(false)
   const token = store.getSyncToken(type)
   const gistId = store.getSyncGistId(type)
-  const canSync = token && (gistId || type === 'custom' || type === 'cloud')
+  const canSync = token && (gistId || type === 'custom' || type === 'cloud' || type === syncTypes.webdav)
 
   async function handleReload () {
     setLoading(true)