@electerm/electerm-react 1.60.56 → 1.70.0

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

@@ -5,7 +5,7 @@
 import {
   defaultBookmarkGroupId
 } from '../../common/constants'
-import { isEqual, find, last, remove } from 'lodash-es'
+import { isEqual, last, remove } from 'lodash-es'
 import copy from 'json-deep-copy'
 import { action } from 'manate'
 
@@ -25,19 +25,15 @@ export default action((info, props) => {
   const isSameLevel = fromPosesLevel.length === toPosesLevel.length
   const isSameCat = isEqual(fromPosesLevel, toPosesLevel) && dropToGap
   const { bookmarks, bookmarkGroups } = window.store
-  let from = find(
-    bookmarks,
+  let from = bookmarks.find(
     d => d.id === fromId
-  ) || find(
-    bookmarkGroups,
+  ) || bookmarkGroups.find(
     d => d.id === fromId
   )
   const fromLeaf = !!from && !from.bookmarkIds
-  let to = find(
-    bookmarks,
+  let to = bookmarks.find(
     d => d.id === toId
-  ) || find(
-    bookmarkGroups,
+  ) || bookmarkGroups.find(
     d => d.id === toId
   )
   const toLeaf = !!to && !to.bookmarkIds
@@ -87,12 +83,10 @@ export default action((info, props) => {
   let fromGroup = null
   if (fromPoses.length > 2) {
     fromGroup = fromLeaf
-      ? find(
-        bookmarkGroups,
+      ? bookmarkGroups.find(
         d => (d.bookmarkIds || []).includes(fromId)
       )
-      : find(
-        bookmarkGroups,
+      : bookmarkGroups.find(
         d => (d.bookmarkGroupIds || []).includes(fromId)
       )
   }
@@ -100,8 +94,7 @@ export default action((info, props) => {
   const toFirstLevel = toPoses.length === 2 && dropToGap
   if (!toFirstLevel) {
     toGroup = dropToGap
-      ? find(
-        bookmarkGroups,
+      ? bookmarkGroups.find(
         d => {
           const arr = toLeaf
             ? d.bookmarkIds
@@ -111,12 +104,10 @@ export default action((info, props) => {
       )
       : (
           toLeaf
-            ? find(
-              bookmarkGroups,
+            ? bookmarkGroups.find(
               d => (d.bookmarkIds || []).includes(toId)
             )
-            : find(
-              bookmarkGroups,
+            : bookmarkGroups.find(
               d => d.id === toId
             )
         )

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

@@ -12,7 +12,8 @@ import {
   InputNumber,
   Button,
   AutoComplete,
-  Tooltip
+  Tooltip,
+  Flex
 } from 'antd'
 import deepCopy from 'json-deep-copy'
 import {
@@ -24,12 +25,16 @@ import {
 import defaultSettings from '../../common/default-setting'
 import ShowItem from '../common/show-item'
 import { osResolve } from '../../common/resolve'
+import { chooseSaveDirectory } from '../../common/choose-save-folder'
 import { isNumber, isNaN } from 'lodash-es'
 import mapper from '../../common/auto-complete-data-mapper'
 import KeywordForm from './keywords-form'
 import Link from '../common/external-link'
 import HelpIcon from '../common/help-icon'
 import KeywordsTransport from './keywords-transport'
+import fs from '../../common/fs'
+import uid from '../../common/uid'
+import createDefaultSessionLogPath from '../../common/default-log-path'
 import './setting.styl'
 
 const { Option } = Select
@@ -111,18 +116,87 @@ export default class SettingTerminal extends Component {
     return this.saveConfig(data)
   }
 
-  renderToggle = (name, extra = null) => {
+  renderToggle = (name, cls = 'pd2b') => {
     const checked = !!this.props.config[name]
     const txt = e(name)
     return (
-      <div className='pd2b' key={'rt' + name}>
+      <div className={cls} key={'rt' + name}>
         <Switch
           checked={checked}
           checkedChildren={txt}
           unCheckedChildren={txt}
           onChange={v => this.onChangeValue(v, name)}
         />
-        {isNumber(extra) ? null : extra}
+      </div>
+    )
+  }
+
+  testFolderPathCanSaveLog = async (path) => {
+    try {
+      const st = await fs.statCustom(path)
+      if (!st.isD) {
+        message.error('invalid log folder')
+        return false
+      }
+      const testFile = osResolve(path, uid + '.test.log')
+      await fs.touch(testFile)
+      await fs.unlink(testFile)
+      return true
+    } catch (err) {
+      message.error('invalid log folder')
+      return false
+    }
+  }
+
+  handleLogChange = (v) => {
+    if (v && !this.testFolderPathCanSaveLog(v)) {
+      return
+    }
+    this.onChangeValue(v, 'sessionLogPath')
+  }
+
+  handleChooseFolder = async () => {
+    const path = await chooseSaveDirectory()
+    if (path) {
+      this.handleLogChange(path)
+    }
+  }
+
+  renderLogPathControl = () => {
+    const { config } = this.props
+    const { sessionLogPath } = config
+    const path = sessionLogPath || createDefaultSessionLogPath()
+    const inputProps = {
+      value: sessionLogPath,
+      placeholder: path,
+      onChange: (e) => this.handleLogChange(e.target.value),
+      addonAfter: (
+        <>
+          <Button
+            onClick={this.handleChooseFolder}
+            className='mg1r'
+            size='small'
+          >
+            {e('chooseFolder')}
+          </Button>
+          <Button
+            size='small'
+            onClick={() => this.handleLogChange('')}
+          >
+            {e('reset')}
+          </Button>
+        </>
+      ),
+      addonBefore: (
+        <>
+          <span className='mg1r'>{e('terminalLogPath')}</span>
+          <ShowItem to={path} />
+        </>
+      )
+    }
+    return (
+      <div className='pd2b'>
+        <Input {...inputProps} />
       </div>
     )
   }
@@ -346,7 +420,7 @@ export default class SettingTerminal extends Component {
       }
     }
     return (
-      <div className='pd1b'>
+      <div className='pd2b'>
         <span className='inline-title mg1r'>{e('cursorStyle')}</span>
         <Select
           {...props}
@@ -371,9 +445,9 @@ export default class SettingTerminal extends Component {
     const { fontFamily } = this.props.config
     const props = {
       mode: 'multiple',
-      className: 'font-sel',
       onChange: this.handleChangeFont,
-      value: fontFamily.split(/, */g).filter(d => d.trim())
+      value: fontFamily.split(/, */g).filter(d => d.trim()),
+      style: { width: '100%' }
     }
     return (
       <Select
@@ -415,7 +489,6 @@ export default class SettingTerminal extends Component {
       keywords = [{ color: 'red' }]
     } = this.props.config
     const {
-      appPath,
       getThemeConfig
     } = this.props.store
     const ps = {
@@ -426,9 +499,6 @@ export default class SettingTerminal extends Component {
       submit: this.handleSubmitKeywords,
       themeConfig: getThemeConfig()
     }
-    const terminalLogPath = appPath
-      ? osResolve(appPath, 'electerm', 'session_logs')
-      : window.et.sessionLogPath
     const tip = (
       <div>
         <span className='mg1r'>{e('supportRegexp')}</span>
@@ -470,10 +540,10 @@ export default class SettingTerminal extends Component {
           }, `${e('default')} ${e('fontSize')}`, 400)
         }
         <div className='pd2b'>
-          <span className='inline-title mg1r'>{e('default')} {e('fontFamily')}</span>
-          {
-            this.renderFontFamily()
-          }
+          <Flex align='center' gap='middle'>
+            <Flex><div className='inline-title'>{e('default')} {e('fontFamily')}</div></Flex>
+            <Flex flex='auto'>{this.renderFontFamily()}</Flex>
+          </Flex>
         </div>
         <div className='pd2b'>
           <div className='pd1b'>
@@ -509,9 +579,12 @@ export default class SettingTerminal extends Component {
         {
           this.renderCursorStyleSelect()
         }
-        {this.renderToggle('saveTerminalLogToFile', (
-          <ShowItem to={terminalLogPath} className='mg1l'>{e('open')}</ShowItem>
-        ))}
+        {
+          this.renderLogPathControl()
+        }
+        {
+          this.renderToggle('saveTerminalLogToFile')
+        }
         {this.renderToggle('addTimeStampToTermLog')}
         {
           [
@@ -520,8 +593,9 @@ export default class SettingTerminal extends Component {
             'pasteWhenContextMenu',
             'copyWhenSelect',
             'ctrlOrMetaOpenTerminalLink',
-            'sftpPathFollowSsh'
-          ].map(this.renderToggle)
+            'sftpPathFollowSsh',
+            'sshSftpSplitView'
+          ].map(d => this.renderToggle(d))
         }
         <div className='pd1b'>{e('terminalBackSpaceMode')}</div>
         <Select

package/client/components/setting-panel/tab-settings.jsx

@@ -33,7 +33,8 @@ export default auto(function TabSettings (props) {
       'isSyncingSetting',
       'isSyncDownload',
       'isSyncUpload',
-      'syncType'
+      'syncType',
+      'syncServerStatus'
     ])
     elem = <SyncSetting {...syncProps} />
   } else if (sid === settingTerminalId) {

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

@@ -0,0 +1,81 @@
+import { useState } from 'react'
+import { LoadingOutlined, ReloadOutlined } from '@ant-design/icons'
+import dayjs from 'dayjs'
+
+const e = window.translate
+
+export default function ServerDataStatus (props) {
+  const { store } = window
+  const { type, status } = props
+  const [loading, setLoading] = useState(false)
+  const token = store.getSyncToken(type)
+  const gistId = store.getSyncGistId(type)
+  const canSync = token && (gistId || type === 'custom' || type === 'cloud')
+
+  async function handleReload () {
+    setLoading(true)
+    await store.previewServerData(type)
+      .catch(store.onError)
+    setLoading(false)
+  }
+
+  function renderReloadButton () {
+    if (loading) {
+      return (
+        <LoadingOutlined className='mg1l' />
+      )
+    }
+    return (
+      <ReloadOutlined
+        className='pointer mg1l hover-black'
+        onClick={handleReload}
+      />
+    )
+  }
+
+  function renderNoCredentials () {
+    return (
+      <p>
+        <span>{e('syncServerDataStatus')}: -</span>
+      </p>
+    )
+  }
+
+  function renderNoData () {
+    return (
+      <p>
+        <span>{e('syncServerDataStatus')}: -</span>
+        {renderReloadButton()}
+      </p>
+    )
+  }
+
+  function renderStatus () {
+    const {
+      lastSyncTime,
+      electermVersion,
+      deviceName = 'unknown'
+    } = status
+
+    return (
+      <p>
+        <span className='mg1r'>{e('syncServerDataStatus')}:</span>
+        <b className='mg1r'>{dayjs(lastSyncTime).format('YYYY-MM-DD HH:mm:ss')}</b>
+        <span className='mg1r'>{e('from')}:</span>
+        <b className='mg1r'>{deviceName}</b>
+        <b className='mg1r'>(v{electermVersion})</b>
+        {renderReloadButton()}
+      </p>
+    )
+  }
+
+  if (!canSync) {
+    return renderNoCredentials()
+  }
+
+  if (!status) {
+    return renderNoData()
+  }
+
+  return renderStatus()
+}

package/client/components/setting-sync/setting-sync-form.jsx

@@ -14,6 +14,7 @@ import eq from 'fast-deep-equal'
 import { syncTokenCreateUrls, syncTypes } from '../../common/constants'
 import './sync.styl'
 import HelpIcon from '../common/help-icon'
+import ServerDataStatus from './server-data-status'
 
 const FormItem = Form.Item
 const e = window.translate
@@ -207,6 +208,10 @@ export default function SyncForm (props) {
       </FormItem>
     )
   }
+  const sprops = {
+    type: syncType,
+    status: props.serverStatus
+  }
   return (
     <Form
       onFinish={save}
@@ -280,6 +285,7 @@ export default function SyncForm (props) {
           >{e('clear')}
           </Button>
         </p>
+        <ServerDataStatus {...sprops} />
         <p>
           {e('lastSyncTime')}: {timeFormatted}
         </p>

package/client/components/setting-sync/setting-sync.jsx

@@ -8,8 +8,10 @@ import { syncTypes, syncDataMaps } from '../../common/constants'
 import DataTransport from './data-import'
 import DataSelect from './data-select'
 import { pick } from 'lodash-es'
+import { auto } from 'manate/react'
+import deepCopy from 'json-deep-copy'
 
-export default function SyncSettingEntry (props) {
+export default auto(function SyncSettingEntry (props) {
   const handleChange = (key) => {
     window.store.syncType = key
   }
@@ -29,8 +31,10 @@ export default function SyncSettingEntry (props) {
         'isSyncingSetting',
         'isSyncDownload',
         'isSyncUpload',
-        'syncType'
-      ])
+        'syncType',
+        'serverStatus'
+      ]),
+      serverStatus: deepCopy(store.syncServerStatus[props.syncType])
     }
     const type = props.syncType
     const formData = {
@@ -44,7 +48,6 @@ export default function SyncSettingEntry (props) {
     return (
       <SyncForm
         {...syncProps}
-        syncType={type}
         encrypt={syncSetting.syncEncrypt}
         formData={formData}
       />
@@ -86,4 +89,4 @@ export default function SyncSettingEntry (props) {
       </Spin>
     </div>
   )
-}
+})

package/client/components/sftp/list-table-ui.jsx

@@ -4,10 +4,6 @@
 
 import { Component } from 'react'
 import classnames from 'classnames'
-import { find } from 'lodash-es'
-import {
-  sftpControlHeight
-} from '../../common/constants'
 import FileSection from './file-item'
 import PagedList from './paged-list'
 import FileListTableHeader from './file-table-header'
@@ -125,8 +121,7 @@ export default class FileListTable extends Component {
   onClickName = (e) => {
     const id = e.target.getAttribute('data-id')
     const { properties } = this.state
-    const propObj = find(
-      properties,
+    const propObj = properties.find(
       p => p.id === id
     )
     if (!propObj) {
@@ -280,11 +275,12 @@ export default class FileListTable extends Component {
 
   render () {
     const { fileList, height, type } = this.props
-    const tableHeaderHeight = 30
+    // const tableHeaderHeight = 30
+    // const sh = sshSftpSplitView ? 0 : 32
     const props = {
       className: 'sftp-table-content overscroll-y relative',
       style: {
-        height: height - sftpControlHeight - tableHeaderHeight
+        height: height - 42 - 30 - 32 - 90
       },
       draggable: false
     }
@@ -302,13 +298,15 @@ export default class FileListTable extends Component {
         <div
           {...props}
         >
-          {this.props.renderEmptyFile(type)}
-          {this.renderParent(type)}
-          <PagedList
-            list={fileList}
-            renderItem={this.renderItem}
-            hasPager={hasPager}
-          />
+          <div>
+            {this.props.renderEmptyFile(type)}
+            {this.renderParent(type)}
+            <PagedList
+              list={fileList}
+              renderItem={this.renderItem}
+              hasPager={hasPager}
+            />
+          </div>
         </div>
       </div>
     )

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

@@ -55,20 +55,6 @@ export default class Sftp extends Component {
   }
 
   componentDidUpdate (prevProps, prevState) {
-    if (
-      (
-        prevProps.enableSftp !== false &&
-        !prevProps.pid &&
-        this.props.pid
-      ) ||
-      (
-        prevProps.pid &&
-        prevProps.enableSftp === false &&
-        this.props.enableSftp !== false
-      )
-    ) {
-      this.initData(true)
-    }
     if (
       this.props.config.autoRefreshWhenSwitchToSftp &&
       prevProps.pane !== this.props.pane &&
@@ -183,8 +169,9 @@ export default class Sftp extends Component {
   }, isEqual)
 
   isActive () {
-    return this.props.enableSftp && this.props.currentBatchTabId === this.props.tab.id &&
-      this.props.pane === paneMap.fileManager
+    return this.props.currentBatchTabId === this.props.tab.id &&
+      (this.props.pane === paneMap.fileManager ||
+      this.props.pane === paneMap.sftp || this.props.sshSftpSplitView)
   }
 
   getCwdLocal = () => {
@@ -407,7 +394,7 @@ export default class Sftp extends Component {
     this[type + 'Dom'].onPaste()
   }
 
-  initData = async () => {
+  initData = () => {
     if (this.shouldRenderRemote()) {
       this.initRemoteAll()
     }
@@ -437,11 +424,6 @@ export default class Sftp extends Component {
     window.store.addTransferList(list)
   }
 
-  computeListHeight = () => {
-    const hasTransports = this.state.transports.length
-    return this.props.height - 15 - (hasTransports ? 300 : 0)
-  }
-
   onError = e => {
     window.store.onError(e)
     this.setState({

package/client/components/shortcuts/shortcut-control.jsx

@@ -13,6 +13,15 @@ import { refs, refsStatic } from '../common/ref'
 import keyControlPressed from '../../common/key-control-pressed'
 import keyPressed from '../../common/key-pressed'
 
+function isInputActive () {
+  const activeElement = document.activeElement
+  return activeElement && (
+    activeElement.tagName === 'INPUT' ||
+    activeElement.tagName === 'TEXTAREA' ||
+    activeElement.isContentEditable
+  )
+}
+
 class ShortcutControl extends React.PureComponent {
   componentDidMount () {
     const onEvent = this.handleKeyboardEvent.bind(this)
@@ -39,7 +48,7 @@ class ShortcutControl extends React.PureComponent {
   // SFTP shortcuts handler
   handleSftpKeyboardEvent = (e) => {
     const activeSftp = this.getActiveSftp()
-    if (!activeSftp || activeSftp.state.onDelete) {
+    if (!activeSftp || activeSftp.state.onDelete || isInputActive()) {
       return
     }
 

package/client/components/tabs/tab.jsx

@@ -30,18 +30,17 @@ const onDragCls = 'ondrag-tab'
 const onDragOverCls = 'dragover-tab'
 
 class Tab extends Component {
-  state = {
-    terminalOnData: false
-  }
-
-  tabRef = createRef()
-
-  componentDidMount () {
+  constructor (props) {
+    super(props)
+    this.state = {
+      terminalOnData: false
+    }
     this.id = 'tab-' + this.props.tab.id
     refs.add(this.id, this)
-    window.addEventListener('message', this.onEvent)
   }
 
+  tabRef = createRef()
+
   componentDidUpdate (prevProps) {
     if (this.props.openContextMenu && !prevProps.openContextMenu) {
       this.handleContextMenu()

package/client/components/tabs/tabs.styl

@@ -52,6 +52,8 @@
   &.active
     color text
     background main
+    .tab-count
+      opacity 1
   &:hover
     .tab-close
       display block
@@ -229,6 +231,7 @@
   padding 0 4px
   height 20px
   line-height 21px
+  opacity 0.8
 .no-session-history
   position absolute
   top 280px

package/client/components/terminal/term-search.jsx

@@ -191,7 +191,8 @@ export default class TermSearch extends PureComponent {
     if (
       !termSearchOpen ||
       !currentTab ||
-      currentTab.pane === paneMap.fileManager
+      currentTab.pane === paneMap.fileManager ||
+      currentTab.pane === paneMap.sftp
     ) {
       return null
     }