@electerm/electerm-react 1.51.3 → 1.51.18

package/client/components/sidebar/transport-ui.jsx

@@ -1,18 +1,23 @@
 /**
  * transporter UI component
  */
-import React from 'react'
+import { useRef } from 'react'
 import Tag from '../sftp/transfer-tag'
+import { Flex } from 'antd'
 import {
   CloseCircleOutlined,
   PlayCircleOutlined,
-  PauseCircleOutlined
+  PauseCircleOutlined,
+  VerticalAlignTopOutlined
 } from '@ant-design/icons'
+import { action } from 'manate'
+import { addClass, removeClass } from '../../common/class'
 import './transfer.styl'
 
 const e = window.translate
 
 export default function Transporter (props) {
+  const dom = useRef()
   const {
     fromPath,
     toPath,
@@ -29,12 +34,109 @@ export default function Transporter (props) {
     inited,
     id
   } = props.transfer
+  const { index } = props
+  const onDragCls = 'ondrag-tr'
+  const onDragOverCls = 'dragover-tr'
+  function moveToTop () {
+    action(function () {
+      const arr = window.store.fileTransfers
+      if (index > 0) {
+        const [item] = arr.splice(index, 1)
+        arr.unshift(item)
+      }
+    })()
+  }
   function cancel () {
     window.store.cancelTransfer(id)
   }
   function handlePauseOrResume () {
     window.store.toggleTransfer(id)
   }
+
+  function clearCls () {
+    document.querySelectorAll('.' + onDragOverCls).forEach((d) => {
+      removeClass(d, onDragOverCls)
+    })
+  }
+
+  function onDrag () {
+    addClass(dom.current, onDragCls)
+  }
+
+  function onDragEnter () {
+    clearCls()
+    addClass(dom.current, onDragOverCls)
+  }
+
+  function onDragExit () {
+    // debug('ondragexit')
+    // let {target} = e
+    // removeClass(target, 'sftp-dragover')
+  }
+
+  function onDragLeave (e) {
+    // debug('ondragleave')
+    const { target } = e
+    removeClass(target, onDragOverCls)
+  }
+
+  function onDragOver (e) {
+    // debug('ondragover')
+    // debug(e.target)
+    // removeClass(dom.current, 'sftp-dragover')
+    e.preventDefault()
+  }
+
+  function onDragStart (e) {
+    // debug('ondragstart')
+    // debug(e.target)
+    e.dataTransfer.setData('id', JSON.stringify(dom.current.getAttribute('data-id')))
+    // e.effectAllowed = 'copyMove'
+  }
+
+  function onDrop (e) {
+    e.preventDefault()
+    const { target } = e
+    if (!target) {
+      return
+    }
+    let onDropTab = target
+    while (onDropTab) {
+      if (onDropTab.classList && onDropTab.classList.contains('sftp-transport')) {
+        break
+      }
+      onDropTab = onDropTab.parentElement
+    }
+    const fromId = JSON.parse(e.dataTransfer.getData('id'))
+    if (!onDropTab || !fromId) {
+      return
+    }
+
+    const dropId = onDropTab.getAttribute('data-id')
+    if (!dropId || dropId === fromId) {
+      return
+    }
+
+    const arr = window.store.fileTransfers
+    const indexFrom = arr.findIndex(t => t.id === fromId)
+    let indexDrop = arr.findIndex(t => t.id === dropId)
+    if (indexFrom >= 0 && indexDrop >= 0) {
+      // Reorder tabs and update batch
+      action(function () {
+        const [tr] = arr.splice(indexFrom, 1)
+        if (indexFrom < indexDrop) {
+          indexDrop = indexDrop - 1
+        }
+        arr.splice(indexDrop, 0, tr)
+      })()
+    }
+  }
+
+  function onDragEnd (e) {
+    removeClass(dom.current, onDragCls)
+    clearCls()
+    e && e.dataTransfer && e.dataTransfer.clearData()
+  }
   const isTransfer = typeTo !== typeFrom
   const Icon = !pausing ? PauseCircleOutlined : PlayCircleOutlined
   const pauseTitle = pausing ? e('resume') : e('pause')
@@ -49,6 +151,14 @@ export default function Transporter (props) {
       title={e('cancel')}
     />
   )
+  const toTopIcon = index === 0
+    ? null
+    : (
+      <VerticalAlignTopOutlined
+        className='transfer-control-icon pointer hover-black font14'
+        onClick={moveToTop}
+      />
+      )
   const controlIcon = isTransfer
     ? (
       <Icon
@@ -58,41 +168,73 @@ export default function Transporter (props) {
       />
       )
     : null
+  const flexProps = {
+    className: cls,
+    gap: 3,
+    title,
+    ref: dom,
+    id: `transfer-unit-${id}`,
+    draggable: true,
+    'data-id': id,
+    onDrag,
+    onDragEnter,
+    onDragExit,
+    onDragLeave,
+    onDragOver,
+    onDragStart,
+    onDrop,
+    onDragEnd
+  }
   return (
-    <div className={cls} title={title} id={`transfer-unit-${id}`}>
-      <Tag
-        transfer={{
-          typeTo,
-          typeFrom,
-          error,
-          inited
-        }}
-      />
-      <span
-        className='flex-child sftp-file sftp-local-file elli'
-        title={fromPath}
-      >{fromPathReal || fromPath}
-      </span>
-      <span className='flex-child sftp-transfer-arrow'>
-        →
-      </span>
-      <span
-        className='flex-child sftp-file sftp-remote-file elli'
-      >{toPathReal || toPath}
-      </span>
-      <span
-        className='flex-child sftp-file-percent'
-      >
-        {percent || 0}%
-        {speed ? `(${speed})` : null}
-      </span>
-      <span
-        className='flex-child sftp-file-percent'
-      >
-        {passedTime || '-'}|{leftTime || '-'}
-      </span>
-      {controlIcon}
-      {cancelIcon}
-    </div>
+    <Flex
+      {...flexProps}
+    >
+      <Flex>
+        <Tag
+          transfer={{
+            typeTo,
+            typeFrom,
+            error,
+            inited
+          }}
+        />
+      </Flex>
+      <Flex>
+        <span
+          className='sftp-file sftp-local-file elli'
+          title={fromPath}
+        >{fromPathReal || fromPath}
+        </span>
+      </Flex>
+      <Flex>
+        <span className='sftp-transfer-arrow'>
+          →
+        </span>
+      </Flex>
+      <Flex>
+        <span
+          className='sftp-file sftp-remote-file elli'
+        >{toPathReal || toPath}
+        </span>
+      </Flex>
+      <Flex>
+        <span
+          className='sftp-file-percent'
+        >
+          {percent || 0}%
+          {speed ? `(${speed})` : null}
+        </span>
+      </Flex>
+      <Flex>
+        <span
+          className='sftp-file-percent'
+        >
+          {passedTime || '-'}|{leftTime || '-'}
+        </span>
+      </Flex>
+      <Flex>{controlIcon}</Flex>
+      <Flex>{cancelIcon}</Flex>
+      <Flex>{toTopIcon}</Flex>
+    </Flex>
   )
 }

package/client/components/ssh-config/load-ssh-configs.jsx

@@ -0,0 +1,106 @@
+import {
+  Modal,
+  Spin,
+  Button,
+  Empty
+} from 'antd'
+import { useState, useEffect } from 'react'
+import SshConfigItem from './ssh-config-item'
+import * as ls from '../../common/safe-local-storage'
+import {
+  sshConfigLoadKey
+} from '../../common/constants'
+import { ReloadOutlined } from '@ant-design/icons'
+
+const e = window.translate
+
+export default function LoadSshConfigs (props) {
+  const [loading, setLoading] = useState(false)
+  const { sshConfigs } = props
+
+  const {
+    store
+  } = window
+  const {
+    showSshConfigModal
+  } = props
+  const handleCancel = function () {
+    store.showSshConfigModal = false
+  }
+  const loadSshConfig = async function () {
+    setLoading(true)
+    await store.fetchSshConfigItems()
+    setLoading(false)
+  }
+
+  const handleLoadSshConfig = function () {
+    store.showSshConfigModal = false
+    store.addSshConfigs(sshConfigs)
+    ls.setItem(sshConfigLoadKey, 'yes')
+  }
+
+  const renderList = function () {
+    if (!sshConfigs.length) {
+      return (
+        <Empty />
+      )
+    }
+    return sshConfigs.map((d, i) => {
+      return (
+        <SshConfigItem item={d} key={d.title} />
+      )
+    })
+  }
+
+  useEffect(() => {
+    if (sshConfigs.length && ls.getItem(sshConfigLoadKey) !== 'yes') {
+      loadSshConfig()
+    }
+  }, [sshConfigs.length])
+  if (!showSshConfigModal) {
+    return null
+  }
+  const modProps = {
+    title: e('loadSshConfigs'),
+    footer: null,
+    open: true,
+    onCancel: handleCancel,
+    width: '80%'
+  }
+  return (
+    <Modal {...modProps}>
+      <Spin spinning={loading}>
+        <div className='pd1y'>
+          <Button
+            onClick={loadSshConfig}
+            disabled={loading}
+            className='mg1b'
+          >
+            <ReloadOutlined /> {e('reload')}
+          </Button>
+        </div>
+        <div className='ssh-config-list'>
+          {
+            renderList()
+          }
+        </div>
+        <div className='pd1y'>
+          <Button
+            type='primary'
+            className='mg1r mg1b'
+            onClick={handleLoadSshConfig}
+            disabled={!sshConfigs.length || loading}
+          >
+            {e('import')}
+          </Button>
+          <Button
+            onClick={handleCancel}
+            className='mg1r mg1b'
+          >
+            {e('cancel')}
+          </Button>
+        </div>
+      </Spin>
+    </Modal>
+  )
+}

package/client/components/ssh-config/ssh-config-item.jsx

@@ -0,0 +1,26 @@
+import { Tooltip } from 'antd'
+
+export default function SshConfigItem (props) {
+  const { item } = props
+
+  const generateTooltipContent = (item) => {
+    return Object.entries(item)
+      .filter(([key]) => key !== 'id')
+      .map(([key, value]) => (
+        <div key={key}>
+          <b className='mg1r'>{key}:</b>
+          <span>{value}</span>
+        </div>
+      ))
+  }
+
+  return (
+    <Tooltip title={generateTooltipContent(item)}>
+      <div>
+        <div className='elli pd1y pd2x'>
+          ssh {item.title}
+        </div>
+      </div>
+    </Tooltip>
+  )
+}

package/client/components/ssh-config/ssh-config-load-notify.jsx

@@ -0,0 +1,60 @@
+import React, { useEffect } from 'react'
+import { notification, Button } from 'antd'
+import * as ls from '../../common/safe-local-storage'
+import {
+  sshConfigKey,
+  sshConfigLoadKey
+} from '../../common/constants'
+
+const e = window.translate
+
+function handleLoad () {
+  window.store.showSshConfigModal = true
+  notification.destroy('sshConfigNotify')
+}
+
+function handleIgnore () {
+  ls.setItem(sshConfigKey, 'yes')
+  notification.destroy('sshConfigNotify')
+}
+
+function showNotification () {
+  notification.info({
+    message: e('loadSshConfigs'),
+    duration: 0,
+    placement: 'bottom',
+    key: 'sshConfigNotify',
+    description: (
+      <div>
+        <p>{e('sshConfigNotice')}</p>
+        <Button type='primary' onClick={handleLoad} className='mg1r mg1b'>
+          {e('import')}
+        </Button>
+        <Button onClick={handleIgnore} className='mg1r mg1b'>
+          {e('ignore')}
+        </Button>
+      </div>
+    )
+  })
+}
+
+export default function SshConfigLoadNotify (props) {
+  const { settingTab, showModal, sshConfigs } = props
+
+  useEffect(() => {
+    const ignoreSshConfig = ls.getItem(sshConfigKey)
+    const sshConfigLoaded = ls.getItem(sshConfigLoadKey)
+    const shouldShow =
+      sshConfigs.length &&
+      ignoreSshConfig !== 'yes' &&
+      settingTab === 'bookmarks' &&
+      showModal &&
+      sshConfigLoaded !== 'yes'
+
+    if (shouldShow) {
+      showNotification()
+    }
+  }, [settingTab, showModal, sshConfigs.length])
+
+  return null
+}

package/client/components/tabs/index.jsx

@@ -4,7 +4,7 @@
 
 import React from 'react'
 import runIdle from '../../common/run-idle'
-import { findIndex, debounce } from 'lodash-es'
+import { debounce } from 'lodash-es'
 import TabTitle from './tab-title'
 import {
   CodeFilled,
@@ -227,13 +227,13 @@ export default class Tabs extends React.Component {
 
   adjustScroll = () => {
     const { tabs, currentBatchTabId, batch } = this.props
-    const index = findIndex(tabs, t => t.id === currentBatchTabId)
+    const index = tabs.findIndex(t => t.id === currentBatchTabId)
     const tabsDomWith = Array.from(
       document.querySelectorAll(`.v${batch + 1} .tab`)
-    ).slice(0, index + 2).reduce((prev, c) => {
+    ).slice(0, index + 1).reduce((prev, c) => {
       return prev + c.clientWidth
     }, 0)
-    const w = (index + 1) * tabMargin + 5 + tabsDomWith
+    const w = (index + 1) * tabMargin + tabsDomWith
     const tabsInnerWidth = this.getInnerWidth()
     const scrollLeft = w > tabsInnerWidth
       ? w - tabsInnerWidth

package/client/components/tabs/tab.jsx

@@ -10,13 +10,12 @@ import {
 } from '@ant-design/icons'
 import { Tooltip, message } from 'antd'
 import classnames from 'classnames'
-import { findIndex, pick } from 'lodash-es'
+import { pick } from 'lodash-es'
 import Input from '../common/input-auto-focus'
 import createName from '../../common/create-title'
 import { addClass, removeClass } from '../../common/class'
-import {
-  terminalSshConfigType
-} from '../../common/constants'
+import isDark from '../../common/is-color-dark'
+import { action } from 'manate'
 import { shortcutDescExtend } from '../shortcuts/shortcut-handler.js'
 
 const e = window.translate
@@ -117,7 +116,13 @@ class Tab extends Component {
     }
 
     const fromTab = JSON.parse(e.dataTransfer.getData('fromFile'))
-    const onDropTab = document.querySelector('.' + onDragOverCls)
+    let onDropTab = target
+    while (onDropTab) {
+      if (onDropTab.classList && onDropTab.classList.contains('tab')) {
+        break
+      }
+      onDropTab = onDropTab.parentElement
+    }
     if (!onDropTab || !fromTab) {
       return
     }
@@ -129,8 +134,8 @@ class Tab extends Component {
 
     const { id } = fromTab
     const storeTabs = window.store.tabs
-    const indexFrom = findIndex(storeTabs, t => t.id === id)
-    let indexDrop = findIndex(storeTabs, t => t.id === dropId)
+    const indexFrom = storeTabs.findIndex(t => t.id === id)
+    let indexDrop = storeTabs.findIndex(t => t.id === dropId)
 
     if (indexFrom >= 0 && indexDrop >= 0) {
       const targetTab = storeTabs[indexDrop]
@@ -146,12 +151,14 @@ class Tab extends Component {
       }
 
       // Reorder tabs and update batch
-      const [tab] = storeTabs.splice(indexFrom, 1)
-      tab.batch = targetTab.batch // Update the batch to match target tab's batch
-      if (indexFrom < indexDrop) {
-        indexDrop = indexDrop - 1
-      }
-      storeTabs.splice(indexDrop, 0, tab)
+      action(function () {
+        const [tab] = storeTabs.splice(indexFrom, 1)
+        tab.batch = targetTab.batch // Update the batch to match target tab's batch
+        if (indexFrom < indexDrop) {
+          indexDrop = indexDrop - 1
+        }
+        storeTabs.splice(indexDrop, 0, tab)
+      })()
       window.store.focus()
     }
   }
@@ -218,11 +225,10 @@ class Tab extends Component {
   }
 
   renderContext = () => {
-    const { tabs, tab, tabIndex } = this.props
+    const { tabs, tabIndex } = this.props
     const len = tabs.length
     const index = tabIndex
     const noRight = index >= len - 1
-    const isSshConfig = tab.type === terminalSshConfigType
     const res = []
     const reloadShortcut = this.getShortcut('app_reloadCurrentTab')
     const closeShortcut = this.getShortcut('app_closeCurrentTab')
@@ -262,7 +268,6 @@ class Tab extends Component {
       subText: cloneToNextShortcut
     })
     res.push({
-      disabled: isSshConfig,
       func: 'doRename',
       icon: 'EditOutlined',
       text: e('rename')
@@ -380,9 +385,12 @@ class Tab extends Component {
     if (isEditting) {
       return this.renderEditting(tab, cls)
     }
-    const { tabCount, color } = tab
+    const { tabCount, color = '#0088cc' } = tab
     const styleTag = color
-      ? { borderTop: `1px solid ${color}` }
+      ? {
+          background: color,
+          color: isDark(color) ? '#fff' : '#000'
+        }
       : {}
     return (
       <Tooltip
@@ -409,7 +417,6 @@ class Tab extends Component {
             className='tab-title elli pd1x'
             onClick={this.handleClick}
             onDoubleClick={this.handleDup}
-            style={styleTag}
           >
             <Loading3QuartersOutlined
               className='pointer tab-reload mg1r'
@@ -417,7 +424,8 @@ class Tab extends Component {
               title={e('reload')}
             />
             <span className='tab-title'>
-              {tabCount}. {title}
+              <span className='iblock mg1r tab-count' style={styleTag}>{tabCount}</span>
+              <span className='mg1r'>{title}</span>
             </span>
           </div>
           <div className={'tab-status ' + status} />

package/client/components/tabs/tabs.styl

@@ -223,4 +223,9 @@
   left 0
   right 0
   bottom 0
-  z-index 11
+  z-index 11
+.tab-count
+  border-radius 10px 2px 2px 2px
+  padding 0 4px
+  height 20px
+  line-height 21px

package/client/components/terminal/index.jsx

@@ -20,7 +20,6 @@ import {
   paneMap,
   typeMap,
   isWin,
-  terminalSshConfigType,
   transferTypeMap,
   terminalActions,
   commonActions,
@@ -818,8 +817,7 @@ clear\r`
   }
 
   isRemote = () => {
-    return this.props.tab?.host &&
-    this.props.tab?.type !== terminalSshConfigType
+    return this.props.tab?.host
   }
 
   onPaste = async () => {
@@ -1055,15 +1053,9 @@ clear\r`
   runInitScript = () => {
     window.store.triggerResize()
     const {
-      type,
-      title,
       startDirectory,
       runScripts
     } = this.props.tab
-    if (type === terminalSshConfigType) {
-      const cmd = `ssh ${title.split(/\s/g)[0]}\r`
-      return this.attachAddon._sendData(cmd)
-    }
     const startFolder = startDirectory || window.initFolder
     if (startFolder) {
       const cmd = `cd "${startFolder}"\r`
@@ -1141,10 +1133,7 @@ clear\r`
       id
     } = tab
     const { savePassword } = this.state
-    const isSshConfig = type === terminalSshConfigType
-    const termType = isSshConfig
-      ? typeMap.local
-      : type
+    const termType = type
     const extra = this.props.sessionOptions
     const opts = clone({
       cols,
@@ -1174,7 +1163,7 @@ clear\r`
       termType,
       readyTimeout: config.sshReadyTimeout,
       proxy: getProxy(tab, config),
-      type: tab.host && !isSshConfig
+      type: tab.host
         ? typeMap.remote
         : typeMap.local
     })
@@ -1326,10 +1315,7 @@ clear\r`
       isRemote: this.isRemote(),
       isActive: this.isActiveTerminal()
     }
-    window.store.setState(
-      'terminalInfoProps',
-      infoProps
-    )
+    Object.assign(window.store.terminalInfoProps, infoProps)
   }
 
   // getPwd = async () => {