@electerm/electerm-react 1.51.3 → 1.51.18

package/client/components/main/connection-hopping-warnning.jsx

@@ -0,0 +1,45 @@
+import { useEffect } from 'react'
+import ConnectionHoppingWarningText from '../common/connection-hopping-warning-text'
+import {
+  notification
+} from 'antd'
+import * as ls from '../../common/safe-local-storage'
+import {
+  connectionHoppingWarnKey
+} from '../../common/constants'
+
+const e = window.translate
+
+export default function ConnectionHoppingWarning (props) {
+  const {
+    hasOldConnectionHoppingBookmark,
+    configLoaded
+  } = props
+  function closeWarn () {
+    notification.destroy(connectionHoppingWarnKey)
+  }
+  function showWarning () {
+    if (
+      !hasOldConnectionHoppingBookmark ||
+      !configLoaded ||
+      ls.getItem(connectionHoppingWarnKey) === 'yes'
+    ) {
+      return
+    }
+    notification.info({
+      message: e('connectionHopping'),
+      duration: 0,
+      placement: 'bottom',
+      key: connectionHoppingWarnKey,
+      description: (
+        <ConnectionHoppingWarningText
+          closeWarn={closeWarn}
+        />
+      )
+    })
+  }
+  useEffect(() => {
+    showWarning()
+  }, [configLoaded, hasOldConnectionHoppingBookmark])
+  return null
+}

package/client/components/main/error-wrapper.jsx

@@ -1,11 +1,35 @@
 import React from 'react'
 import { FrownOutlined, ReloadOutlined } from '@ant-design/icons'
-import { Button } from 'antd'
+import { Button, message } from 'antd'
 import {
-  logoPath1
+  logoPath1,
+  packInfo,
+  isMac,
+  isWin
 } from '../../common/constants'
+import Link from '../common/external-link'
+import fs from '../../common/fs'
+import { copy } from '../../common/clipboard'
 
 const e = window.translate
+const os = isMac ? 'mac' : isWin ? 'windows' : 'linux'
+const troubleshootContent = {
+  runInCommandLine: {
+    mac: '/Applications/electerm.app/Contents/MacOS/electerm',
+    linux: 'path/to/electerm',
+    windows: 'path\\to\\electerm.exe'
+  },
+  clearConfig: {
+    mac: 'rm -rf ~/Library/Application\\ Support/electerm/users/default_user/electerm.data.nedb',
+    linux: 'rm -rf ~/.config/electerm/users/default_user/electerm.data.nedb',
+    windows: 'Delete C:\\Users\\your-user-name\\AppData\\Roaming\\electerm\\users\\default_user\\electerm.data.nedb'
+  },
+  clearData: {
+    mac: 'rm -rf ~/Library/Application\\ Support/electerm*',
+    linux: 'rm -rf ~/.config/electerm',
+    windows: 'Delete C:\\Users\\your-user-name\\AppData\\Roaming\\electerm'
+  }
+}
 
 export default class ErrorBoundary extends React.PureComponent {
   constructor (props) {
@@ -28,12 +52,101 @@ export default class ErrorBoundary extends React.PureComponent {
     window.location.reload()
   }
 
+  handleClearData = async () => {
+    await fs.rmrf(troubleshootContent.clearData[os])
+      .then(
+        () => {
+          message.success('Data cleared')
+        }
+      )
+  }
+
+  handleClearConfig = async () => {
+    await fs.rmrf(troubleshootContent.clearConfig[os])
+      .then(
+        () => {
+          message.success('Config cleared')
+        }
+      )
+  }
+
+  handleCopy = () => {
+    copy(troubleshootContent.runInCommandLine[os])
+  }
+
+  renderButton = type => {
+    if (type === 'clearData') {
+      return (
+        <Button
+          className='mg1l'
+          onClick={this.handleClearData}
+        >
+          {e('clearData')}
+        </Button>
+      )
+    }
+    if (type === 'runInCommandLine') {
+      return (
+        <Button
+          className='mg1l'
+          onClick={this.handleCopy}
+        >
+          {e('copy')}
+        </Button>
+      )
+    }
+    return (
+      <Button
+        className='mg1l'
+        onClick={this.handleClearConfig}
+      >
+        {e('clearConfig')}
+      </Button>
+    )
+  }
+
+  renderTroubleShoot = () => {
+    const {
+      bugs: {
+        url: bugReportLink
+      }
+    } = packInfo
+    const bugUrl = `${bugReportLink}/new/choose`
+    return (
+      <div className='pd1y wordbreak'>
+        <h2>{e('troubleShoot')}</h2>
+        <p>Electerm Version: {packInfo.version}, OS: {os}</p>
+        {
+          Object.keys(troubleshootContent).map((k, i) => {
+            const v = troubleshootContent[k]
+            const cmd = v[os]
+            return (
+              <div className='pd1b' key={k}>
+                <h3>{e(k)} {this.renderButton(k)}</h3>
+                <p><code>{cmd}</code></p>
+              </div>
+            )
+          })
+        }
+        <div className='pd1b'>
+          <Link to={bugUrl}>{e('bugReport')}</Link>
+        </div>
+        <div className='pd3y'>
+          <img
+            src='https://electerm.html5beta.com/electerm-wechat-group-qr.jpg'
+            className='mwm-100'
+          />
+        </div>
+      </div>
+    )
+  }
+
   render () {
     if (this.state.hasError) {
       const { stack, message } = this.state.error
       return (
-        <div className='pd3 aligncenter error-wrapper'>
-          <div className='pd2y aligncenter'>
+        <div className='pd3 error-wrapper'>
+          <div className='pd2y'>
             <img src={logoPath1} className='iblock mwm-100' />
           </div>
           <h1>
@@ -41,7 +154,6 @@ export default class ErrorBoundary extends React.PureComponent {
             <span className='iblock mg1r'>{e('error')}</span>
             <Button
               onClick={this.handleReload}
-              className='iblock'
               icon={<ReloadOutlined />}
             >
               {e('reload')}
@@ -49,6 +161,9 @@ export default class ErrorBoundary extends React.PureComponent {
           </h1>
           <div className='pd1y'>{message}</div>
           <div className='pd1y'>{stack}</div>
+          {
+            this.renderTroubleShoot()
+          }
         </div>
       )
     }

package/client/components/main/main.jsx

@@ -26,7 +26,11 @@ import { LoadingUI } from './loading'
 import { ConfigProvider, notification, message } from 'antd'
 import InfoModal from '../sidebar/info-modal.jsx'
 import RightSidePanel from '../side-panel-r/side-panel-r'
+import ConnectionHoppingWarning from './connection-hopping-warnning'
+import SshConfigLoadNotify from '../ssh-config/ssh-config-load-notify'
+import LoadSshConfigs from '../ssh-config/load-ssh-configs'
 import { pick } from 'lodash-es'
+import deepCopy from 'json-deep-copy'
 import './wrapper.styl'
 
 function setupGlobalMessageDismiss () {
@@ -89,7 +93,6 @@ export default auto(function Index (props) {
     isSecondInstance,
     pinnedQuickCommandBar,
     wsInited,
-    upgradeInfo,
     installSrc,
     fileTransfers,
     uiThemeConfig,
@@ -97,6 +100,7 @@ export default auto(function Index (props) {
     transferToConfirm,
     openResolutionEdit
   } = store
+  const upgradeInfo = deepCopy(store.upgradeInfo)
   const cls = classnames({
     loaded: configLoaded,
     'not-webapp': !window.et.isWebApp,
@@ -131,6 +135,8 @@ export default auto(function Index (props) {
       opacity: config.opacity
     }
   }
+  const copiedTransfer = deepCopy(fileTransfers)
+  const copiedHistory = deepCopy(transferHistory)
   const sidebarProps = {
     ...pick(store, [
       'activeItemId',
@@ -143,10 +149,11 @@ export default auto(function Index (props) {
       'settingItem',
       'isSyncingSetting',
       'leftSidebarWidth',
-      'transferTab'
+      'transferTab',
+      'sidebarPanelTab'
     ]),
-    fileTransfers,
-    transferHistory,
+    fileTransfers: copiedTransfer,
+    transferHistory: copiedHistory,
     upgradeInfo,
     pinned
   }
@@ -161,8 +168,8 @@ export default auto(function Index (props) {
     upgradeInfo
   }
   const conflictStoreProps = {
-    fileTransfers,
-    _fileTransfers: store._fileTransfers
+    fileTransferChanged: JSON.stringify(copiedTransfer),
+    fileTransfers: copiedTransfer
   }
   const batchOpProps = {
     transferHistory,
@@ -170,7 +177,7 @@ export default auto(function Index (props) {
     innerWidth: store.innerWidth
   }
   const resProps = {
-    resolutions: store.resolutions,
+    resolutions: deepCopy(store.resolutions),
     openResolutionEdit
   }
   const contextMenuProps = {
@@ -186,7 +193,7 @@ export default auto(function Index (props) {
     rightPanelWidth: store.rightPanelWidth
   }
   const terminalInfoProps = {
-    ...store.terminalInfoProps,
+    ...deepCopy(store.terminalInfoProps),
     ...pick(
       config,
       ['host', 'port', 'saveTerminalLogToFile', 'terminalInfos']
@@ -195,6 +202,17 @@ export default auto(function Index (props) {
       'appPath'
     ])
   }
+  const sshConfigProps = {
+    ...pick(store, [
+      'settingTab',
+      'showModal',
+      'sshConfigs'
+    ])
+  }
+  const warningProps = {
+    hasOldConnectionHoppingBookmark: store.hasOldConnectionHoppingBookmark,
+    configLoaded
+  }
   return (
     <ConfigProvider
       theme={uiThemeConfig}
@@ -253,6 +271,12 @@ export default auto(function Index (props) {
         <RightSidePanel {...rightPanelProps}>
           <TerminalInfo {...terminalInfoProps} />
         </RightSidePanel>
+        <SshConfigLoadNotify {...sshConfigProps} />
+        <LoadSshConfigs
+          showSshConfigModal={store.showSshConfigModal}
+          sshConfigs={store.sshConfigs}
+        />
+        <ConnectionHoppingWarning {...warningProps} />
       </div>
     </ConfigProvider>
   )

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'
@@ -71,7 +72,12 @@ export default class SessionWrapper extends Component {
     if (!target) {
       return
     }
-    const fromTab = JSON.parse(e.dataTransfer.getData('fromFile'))
+    let fromTab
+    try {
+      fromTab = JSON.parse(e.dataTransfer.getData('fromFile'))
+    } catch (e) {
+      return
+    }
     const onDropElem = this.getDom()
     const { batch } = this.props.tab
     if (!onDropElem || !fromTab || fromTab.batch === batch) {
@@ -83,6 +89,15 @@ export default class SessionWrapper extends Component {
     if (!t) {
       return
     }
+    // Handle currentTab change if needed
+    const fromBatch = fromTab.batch
+    if (window.store[`activeTabId${fromBatch}`] === fromTab.id && fromBatch !== batch) {
+      // Find next tab in the same batch
+      const nextTab = tabs.find((t, i) =>
+        t.id !== fromTab.id && t.batch === fromBatch
+      )
+      window.store[`activeTabId${fromBatch}`] = nextTab ? nextTab.id : ''
+    }
     t.batch = batch
     this.clearCls()
   }
@@ -136,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/session/session.styl

@@ -57,8 +57,9 @@
   overflow hidden
   z-index 3
   padding-top 36px
-.session-batch-active
-  display block
+  box-shadow 0px 0px 1px 1px alpha(main, .3)
+  &.session-batch-active
+    display block
 
 .web-session-wrap
   height 100vh

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

@@ -21,7 +21,6 @@
   margin-bottom 1px
   cursor pointer
   line-height 1.8
-  cu
   &.active
     background primary
     color contrastColor(primary)

package/client/components/setting-panel/on-tree-drop.js

@@ -5,7 +5,7 @@
 import {
   defaultBookmarkGroupId
 } from '../../common/constants'
-import { isEqual, find, findIndex, last, remove } from 'lodash-es'
+import { isEqual, find, last, remove } from 'lodash-es'
 import copy from 'json-deep-copy'
 
 export default (info, props) => {
@@ -129,7 +129,7 @@ export default (info, props) => {
       ? toGroup.bookmarkIds || []
       : toGroup.bookmarkGroupIds || []
     nodeIndex = dropToGap
-      ? findIndex(pool, d => d === toId)
+      ? pool.findIndex(d => d === toId)
       : pool.length
     if (dropToGap) {
       if (fromLeaf) {
@@ -143,7 +143,7 @@ export default (info, props) => {
       }
     }
   } else {
-    nodeIndex = findIndex(bookmarkGroups, d => {
+    nodeIndex = bookmarkGroups.findIndex(d => {
       return d.id === toId
     })
     if (fromLeaf) {
@@ -165,7 +165,7 @@ export default (info, props) => {
   }
   const updates = []
   if (toFirstLevel) {
-    fromIndex = findIndex(bookmarkGroups, d => d.id === fromId)
+    fromIndex = bookmarkGroups.findIndex(d => d.id === fromId)
     from = copy(from)
     bookmarkGroups.splice(fromIndex, 1, 'tobedel')
     bookmarkGroups.splice(nodeIndex, 0, from)
@@ -177,7 +177,7 @@ export default (info, props) => {
     const arr = fromLeaf
       ? fromGroup.bookmarkIds
       : fromGroup.bookmarkGroupIds
-    fromIndex = findIndex(arr, d => d === fromId)
+    fromIndex = arr.findIndex(d => d === fromId)
     isSameCat
       ? arr.splice(fromIndex, 1, 'tobedel')
       : remove(arr, d => d === fromId)

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-modal.jsx

@@ -11,7 +11,6 @@ import {
   modals
 } from '../../common/constants'
 import TabBookmarks from './tab-bookmarks'
-import TabHistory from './tab-history'
 import TabQuickCommands from './tab-quick-commands'
 import TabSettings from './tab-settings'
 import TabThemes from './tab-themes'
@@ -68,11 +67,6 @@ export default auto(function SettingModalWrap (props) {
       ])
     }
     const items = [
-      {
-        key: settingMap.history,
-        label: e(settingMap.history),
-        children: null
-      },
       {
         key: settingMap.bookmarks,
         label: e(settingMap.bookmarks),
@@ -113,12 +107,6 @@ export default auto(function SettingModalWrap (props) {
         <Tabs
           {...tabsProps}
         />
-        <TabHistory
-          listProps={props0}
-          settingItem={settingItem}
-          formProps={formProps}
-          settingTab={settingTab}
-        />
         <TabQuickCommands
           listProps={props0}
           settingItem={settingItem}

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',