@electerm/electerm-react 1.51.8 → 1.51.18

package/client/components/main/upgrade.jsx

@@ -63,12 +63,9 @@ export default class Upgrade extends PureComponent {
   }
 
   changeProps = (update) => {
-    window.store.storeAssign({
-      _upgradeInfo: JSON.stringify({
-        ...this.props.upgradeInfo,
-        ...update
-      })
-    })
+    Object.assign(
+      window.store.upgradeInfo, update
+    )
   }
 
   handleMinimize = () => {
@@ -79,9 +76,7 @@ export default class Upgrade extends PureComponent {
   }
 
   handleClose = () => {
-    window.store.storeAssign({
-      _upgradeInfo: '{}'
-    })
+    window.store.upgradeInfo = {}
   }
 
   onData = (upgradePercent) => {

package/client/components/main/wrapper.styl

@@ -9,10 +9,11 @@
 // .pinned .sessions
 //   margin-left 343px
 .error-wrapper
-  background main-light
+  background main
   height 100%
   position fixed
   color text
+  overflow-y scroll
 .init-wrap
 .loading-data
   position fixed

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

@@ -9,7 +9,7 @@ const FormItem = Form.Item
 const e = window.translate
 
 export default function ProfileFormSsh (props) {
-  const { form } = props.store
+  const { form } = props
   return (
     <>
       <FormItem

package/client/components/rdp/resolution-edit.jsx

@@ -7,22 +7,20 @@ import uid from '../../common/uid'
 
 export default function Resolutions (props) {
   function remove (id) {
-    const { resolutions } = props
+    const { resolutions } = window.store
     const index = resolutions.findIndex(d => d.id === id)
     if (index < 0) {
       return
     }
     resolutions.splice(index, 1)
-    window.store.setState('resolutions', resolutions)
   }
 
   function submit (data) {
-    const { resolutions } = props
+    const { resolutions } = window.store
     resolutions.push({
       ...data,
       id: uid()
     })
-    window.store.setState('resolutions', resolutions)
   }
 
   const {
@@ -37,7 +35,7 @@ export default function Resolutions (props) {
   }
   const modalProps = {
     footer: null,
-    visible: true,
+    open: true,
     onCancel: () => toggleResolutionEdit()
   }
   const resList = {

package/client/components/session/session.jsx

@@ -14,7 +14,8 @@ import {
   CloseOutlined
 } from '@ant-design/icons'
 import {
-  Tooltip
+  Tooltip,
+  message
 } from 'antd'
 import { pick } from 'lodash-es'
 import generate from '../../common/uid'
@@ -150,8 +151,12 @@ export default class SessionWrapper extends Component {
   }
 
   toggleCheckSftpPathFollowSsh = () => {
+    const nv = !this.state.sftpPathFollowSsh
+    if (nv) {
+      message.warning(e('sftpPathFollowSshTip'), 8)
+    }
     this.setState({
-      sftpPathFollowSsh: !this.state.sftpPathFollowSsh
+      sftpPathFollowSsh: nv
     })
   }
 

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

@@ -1,7 +1,9 @@
 import React, { Component } from 'react'
 import {
   ArrowRightOutlined,
-  LoadingOutlined
+  LoadingOutlined,
+  SunOutlined,
+  MoonOutlined
 } from '@ant-design/icons'
 import {
   message,
@@ -12,7 +14,8 @@ import {
   Alert,
   Button,
   Table,
-  Space
+  Space,
+  Tag
 } from 'antd'
 import deepCopy from 'json-deep-copy'
 import {
@@ -26,6 +29,7 @@ import createEditLangLink from '../../common/create-lang-edit-link'
 import StartSession from './start-session-select'
 import HelpIcon from '../common/help-icon'
 import delay from '../../common/wait.js'
+import isColorDark from '../../common/is-color-dark'
 import './setting.styl'
 
 const { Option } = Select
@@ -501,8 +505,8 @@ export default class SettingCommon extends Component {
       customCss
     } = props.config
     const {
-      langs
-    } = this.props.store
+      langs = []
+    } = window.et
     const terminalThemes = props.store.getSidebarList(settingMap.terminalThemes)
     const [modifier, key] = hotkey.split('+')
     const pops = {
@@ -581,9 +585,27 @@ export default class SettingCommon extends Component {
           >
             {
               terminalThemes.map(l => {
-                const { id, name } = l
+                const { id, name, uiThemeConfig } = l
+                const { main, text } = uiThemeConfig
+                const isDark = isColorDark(main)
+                const txt = isDark ? <MoonOutlined /> : <SunOutlined />
+                const tag = (
+                  <Tag
+                    color={main}
+                    className='mg1l'
+                    style={
+                      {
+                        color: text
+                      }
+                    }
+                  >
+                    {txt}
+                  </Tag>
+                )
                 return (
-                  <Option key={id} value={id}>{name}</Option>
+                  <Option key={id} value={id}>
+                    {tag} {name}
+                  </Option>
                 )
               })
             }
@@ -633,7 +655,6 @@ export default class SettingCommon extends Component {
         {
           [
             'autoRefreshWhenSwitchToSftp',
-            'hideSshConfig',
             'showHiddenFilesOnSftpStart',
             'screenReaderMode',
             'initDefaultTabOnStart',

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

@@ -18,7 +18,8 @@ import deepCopy from 'json-deep-copy'
 import {
   noTerminalBgValue,
   rendererTypes,
-  regexHelpLink
+  regexHelpLink,
+  terminalTypes
 } from '../../common/constants'
 import defaultSettings from '../../common/default-setting'
 import ShowItem from '../common/show-item'
@@ -66,7 +67,9 @@ export default class SettingTerminal extends Component {
 
   onChangeValue = (value, name) => {
     if (name === 'useSystemTitleBar') {
-      message.info(e('useSystemTitleBarTip'), 5)
+      message.info(e('useSystemTitleBarTip'), 8)
+    } else if (name === 'sftpPathFollowSsh' && value) {
+      message.warn(e('sftpPathFollowSshTip'), 8)
     }
     this.saveConfig({
       [name]: value
@@ -304,7 +307,7 @@ export default class SettingTerminal extends Component {
   }
 
   renderDefaultTerminalType = () => {
-    const opts = this.props.config.terminalTypes.map(mapper)
+    const opts = terminalTypes.map(mapper)
     return (
       <AutoComplete
         options={opts}
@@ -364,7 +367,7 @@ export default class SettingTerminal extends Component {
   }
 
   renderFontFamily = () => {
-    const { fonts } = this.props.store
+    const { fonts = [] } = window.et
     const { fontFamily } = this.props.config
     const props = {
       mode: 'multiple',

package/client/components/sftp/confirm-modal-store.jsx

@@ -11,6 +11,7 @@ import { FolderOutlined, FileOutlined } from '@ant-design/icons'
 import {
   fileActions
 } from '../../common/constants'
+import deepCopy from 'json-deep-copy'
 import postMessage from '../../common/post-msg'
 
 const e = window.translate
@@ -25,9 +26,7 @@ function formatTimeAuto (strOrDigit) {
 export default function ConfirmModalStore (props) {
   function act (action) {
     const { transferToConfirm } = props
-    window.store.setState(
-      'transferToConfirm', {}
-    )
+    window.store.transferToConfirm = {}
     const {
       fromFile: {
         id: fileId
@@ -39,7 +38,7 @@ export default function ConfirmModalStore (props) {
       transferGroupId,
       fileId,
       id,
-      transfer: transferToConfirm,
+      transfer: deepCopy(transferToConfirm),
       action
     })
   }

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

@@ -14,7 +14,6 @@ import {
   typeMap, maxSftpHistory, paneMap,
   eventTypes,
   fileTypeMap,
-  terminalSshConfigType,
   terminalSerialType,
   unexpectedPacketErrorDesc,
   sftpRetryInterval,
@@ -207,7 +206,7 @@ export default class Sftp extends Component {
       action === commonActions.sftpList &&
       sessionId === this.props.sessionId
     ) {
-      this[type + 'List']()
+      this[type + 'ListDebounce']()
     }
   }
 
@@ -482,9 +481,7 @@ export default class Sftp extends Component {
 
   shouldRenderRemote = () => {
     const { props } = this
-    return props.tab?.host &&
-      props.tab?.type !== terminalSshConfigType &&
-      props.tab?.type !== terminalSerialType
+    return props.tab?.host && props.tab?.type !== terminalSerialType
   }
 
   initLocalAll = () => {

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

@@ -128,9 +128,7 @@ export default class TransferConflictStore extends PureComponent {
     if (this.props.transferToConfirm.id) {
       return
     }
-    window.store.setState(
-      'transferToConfirm', tr
-    )
+    window.store.transferToConfirm = tr
   }
 
   onDecision = (event) => {

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

@@ -98,18 +98,11 @@ export default class TransportAction extends Component {
       typeTo,
       next
     } = transfer
-    const cb = this[typeTo + 'List']
     const finishTime = Date.now()
-    if (next) {
-      setTimeout(() => {
-        window.store.fileTransfers.splice(
-          this.props.index, 0, copy(next)
-        )
-      }, 0)
-    }
     if (!config.disableTransferHistory) {
+      const r = copy(transfer)
       delete transfer.next
-      Object.assign(transfer, update, {
+      Object.assign(r, update, {
         finishTime,
         startTime: this.startTime,
         size: transfer.fromFile.size,
@@ -117,9 +110,27 @@ export default class TransportAction extends Component {
         speed: format(transfer.fromFile.size, this?.startTime)
       })
       window.store.addTransferHistory(
-        transfer
+        r
       )
     }
+    const cbs = [
+      this[typeTo + 'List']
+    ]
+    if (next) {
+      cbs.push(() => {
+        setTimeout(
+          () => {
+            window.store.fileTransfers.splice(
+              this.props.index, 0, copy(next)
+            )
+          },
+          100
+        )
+      })
+    }
+    const cb = () => {
+      cbs.forEach(cb => cb())
+    }
     this.cancel(cb)
   }
 

package/client/components/side-panel-r/side-panel-r.jsx

@@ -1,4 +1,5 @@
-import React, { useRef, memo } from 'react'
+import React, { memo } from 'react'
+import DragHandle from '../common/drag-handle'
 import './right-side-panel.styl'
 import {
   CloseCircleOutlined,
@@ -17,43 +18,12 @@ export default memo(function RightSidePanel (
     return null
   }
 
-  const dragStart = useRef(false)
-  const clientX = useRef(0)
-
-  function handleMousedown (e) {
-    dragStart.current = true
-    clientX.current = e.clientX
-    document.body.addEventListener('mouseup', handleMouseup)
-    document.body.addEventListener('mousemove', handleMousemove)
-  }
-
-  function handleMouseup (e) {
-    dragStart.current = false
-    const {
-      clientX: cx
-    } = e
-    let nw = clientX.current - cx + rightPanelWidth
-    if (nw < 400) {
-      nw = 400
-    } else if (nw > 1000) {
-      nw = 1000
-    }
+  function onDragEnd (nw) {
     window.store.setRightSidePanelWidth(nw)
-    document.body.removeEventListener('mouseup', handleMouseup)
-    document.body.removeEventListener('mousemove', handleMousemove)
   }
 
-  function handleMousemove (e) {
-    const {
-      clientX: cx
-    } = e
+  function onDragMove (nw) {
     const el = document.getElementById('right-side-panel')
-    let nw = clientX.current - cx + rightPanelWidth
-    if (nw < 400) {
-      nw = 400
-    } else if (nw > 1000) {
-      nw = 1000
-    }
     el.style.width = nw + 'px'
   }
 
@@ -77,16 +47,19 @@ export default memo(function RightSidePanel (
     className: 'right-side-panel-pin right-side-panel-controls' + (rightPanelPinned ? ' pinned' : ''),
     onClick: togglePin
   }
-
+  const dragProps = {
+    min: 400,
+    max: 1000,
+    width: rightPanelWidth,
+    onDragEnd,
+    onDragMove,
+    left: false
+  }
   return (
     <div
       {...panelProps}
     >
-      <div
-        className='drag-handle'
-        onMouseDown={handleMousedown}
-        draggable={false}
-      />
+      <DragHandle {...dragProps} />
       <CloseCircleOutlined
         className='right-side-panel-close right-side-panel-controls'
         onClick={onClose}

package/client/components/sidebar/bookmark-select.jsx

@@ -29,9 +29,6 @@ export default auto(function BookmarkSelect (props) {
     listStyle,
     staticList: true
   }
-  if (!store.config.hideSshConfig) {
-    base.bookmarks.push(...store.sshConfigItems)
-  }
   const propsTree = {
     ...base,
     shouldConfirmDel: true,

package/client/components/sidebar/index.jsx

@@ -65,12 +65,7 @@ export default memo(function Sidebar (props) {
   }
 
   const handleShowUpgrade = () => {
-    store.storeAssign({
-      _upgradeInfo: JSON.stringify({
-        ...props.store.upgradeInfo,
-        showUpgradeModal: true
-      })
-    })
+    window.store.upgradeInfo.showUpgradeModal = true
   }
 
   const {

package/client/components/sidebar/side-panel.jsx

@@ -1,62 +1,38 @@
-import { PureComponent } from 'react'
-export default class SidePanel extends PureComponent {
-  handleMousedown = (e) => {
-    e.stopPropagation()
-    this.dragStart = true
-    this.clientX = e.clientX
-    window.addEventListener('mouseup', this.handleMouseup)
-    window.addEventListener('mousemove', this.handleMousemove)
-  }
+import { useCallback } from 'react'
+import DragHandle from '../common/drag-handle'
 
-  handleMouseup = (e) => {
-    this.dragStart = false
-    const {
-      clientX
-    } = e
-    let nw = clientX - this.clientX + this.props.leftSidebarWidth
-    if (nw < 150) {
-      nw = 150
-    } else if (nw > 600) {
-      nw = 600
-    }
-    this.props.setLeftSidePanelWidth(nw)
+export default function SidePanel (props) {
+  const onDragEnd = useCallback((nw) => {
+    props.setLeftSidePanelWidth(nw)
     window.store.onResize()
-    window.removeEventListener('mouseup', this.handleMouseup)
-    window.removeEventListener('mousemove', this.handleMousemove)
-  }
+  }, [props])
 
-  handleMousemove = (e) => {
-    const {
-      clientX
-    } = e
+  const onDragMove = useCallback((nw) => {
     const el = document.getElementById('side-panel')
-    let nw = clientX - this.clientX + this.props.leftSidebarWidth
-    if (nw < 343) {
-      nw = 343
-    } else if (nw > 600) {
-      nw = 600
-    }
     el.style.width = nw + 'px'
     const el1 = document.querySelector('.sessions')
     if (el1) {
       el1.style.left = (nw + 43) + 'px'
     }
+  }, [props.leftSidebarWidth])
+  const dragProps = {
+    min: 343,
+    max: 600,
+    width: props.leftSidebarWidth,
+    onDragEnd,
+    onDragMove,
+    left: true
   }
-
-  render () {
-    return (
-      <div
-        {...this.props.sideProps}
-        id='side-panel'
-        draggable={false}
-      >
-        <div
-          className='drag-handle'
-          onMouseDown={this.handleMousedown}
-          draggable={false}
-        />
-        {this.props.children}
-      </div>
-    )
-  }
+  return (
+    <div
+      {...props.sideProps}
+      id='side-panel'
+      draggable={false}
+    >
+      <DragHandle
+        {...dragProps}
+      />
+      {props.children}
+    </div>
+  )
 }

package/client/components/sidebar/sidebar.styl

@@ -93,15 +93,6 @@
     &:hover
       color text-light
 
-.drag-handle
-  position absolute
-  right 0
-  top 0
-  width 3px
-  bottom 0
-  cursor ew-resize
-  display none
-  z-index 201
 // Hover.css (http://ianlunn.github.io/Hover/)
 // Version: 2.3.2
 // Author: Ian Lunn @IanLunn

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>
+  )
+}