@electerm/electerm-react 3.8.15 → 3.9.15

package/client/common/pre.js

@@ -9,7 +9,6 @@ const {
 
 const props = runSync('getConstants')
 
-props.env = JSON.parse(props.env)
 props.versions = JSON.parse(props.versions)
 
 window.pre = {

package/client/components/bookmark-form/bookmark-from-history-modal.jsx

@@ -49,7 +49,6 @@ export default class BookmarkFromHistoryModal extends React.PureComponent {
       ...tab,
       id: generate()
     }
-    console.log(r)
     delete r.parentId
     delete r.category
     return r

package/client/components/bookmark-form/config/rdp.js

@@ -2,7 +2,7 @@ import { formItemLayout } from '../../../common/form-layout.js'
 import { terminalRdpType } from '../../../common/constants.js'
 import { createBaseInitValues, getAuthTypeDefault } from '../common/init-values.js'
 import { isEmpty } from 'lodash-es'
-import { commonFields } from './common-fields.js'
+import { commonFields, connectionHoppingTab } from './common-fields.js'
 
 const e = window.translate
 
@@ -12,6 +12,7 @@ const rdpConfig = {
   initValues: (props) => {
     return createBaseInitValues(props, terminalRdpType, {
       port: 3389,
+      connectionHoppings: [],
       ...getAuthTypeDefault(props)
     })
   },
@@ -38,7 +39,8 @@ const rdpConfig = {
         commonFields.proxy,
         commonFields.type
       ]
-    }
+    },
+    connectionHoppingTab()
   ]
 }
 

package/client/components/icons/heartbeat.jsx

@@ -0,0 +1,23 @@
+import Icon from '@ant-design/icons'
+
+const HeartbeatSvg = () => (
+  <svg
+    viewBox='0 0 1024 1024'
+    fill='currentColor'
+    width='1em'
+    height='1em'
+    aria-hidden='true'
+  >
+    <path d='M923 283.6a260.1 260.1 0 00-56.9-82.8 264.4 264.4 0 00-84-55.5A265.3 265.3 0 00679.7 128c-38.1 0-75.4 7.5-109.8 22.3a274.5 274.5 0 00-87.7 60.8l-12.1 12.5-12.1-12.5a260.5 260.5 0 00-87.7-60.8c-34.4-14.8-71.7-22.3-109.8-22.3-38.2 0-75.5 7.5-109.9 22.3-33.4 14.3-63.3 34.9-88.9 61-25.6 26.1-45.7 56.4-59.9 90.5A278.3 278.3 0 000 416.5c0 39.6 7.7 77.2 22.9 111.6 12.8 29.6 31.5 57 55.5 81.5l356.2 358.5c12.2 12.3 29.7 19.4 47.8 19.4 18.1 0 35.6-7.1 47.7-19.4L886 609.6c24-24.5 42.7-51.9 55.5-81.5C956.3 493.7 964 456.1 964 416.5c0-37.9-7.4-74.7-22-109zM880 497.9c-10.4 24.1-26 46-46.5 65.2L480 920.7 193.5 563.1C173 543.9 157.4 522 147 497.9c-12.1-27.9-18.2-57.8-18.2-88.6 0-30 5.8-59 17.3-86.3 11.1-26.5 27.2-50.3 47.8-70.8 20.6-20.4 44.6-36.5 71.4-47.8 27.7-11.7 57.2-17.7 87.8-17.7 32.3 0 63.7 6.5 93.2 19.3 29 12.5 55 30.9 77.2 54.4l73.9 76.5 73.9-76.5c22.2-23.5 48.2-41.9 77.2-54.4 29.5-12.8 60.9-19.3 93.2-19.3 30.6 0 60.1 6 87.8 17.7 26.8 11.3 50.8 27.4 71.4 47.8 20.6 20.5 36.7 44.3 47.8 70.8 11.5 27.3 17.3 56.3 17.3 86.3 0 30.8-6.1 60.7-18.2 88.6z' />
+    <polyline
+      points='160,512 310,512 370,310 450,714 530,512 594,512 654,360 714,664 774,512 864,512'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='60'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+  </svg>
+)
+
+export const HeartbeatIcon = props => (<Icon component={HeartbeatSvg} {...props} />)

package/client/components/main/main.jsx

@@ -36,6 +36,7 @@ import WorkspaceSaveModal from '../tabs/workspace-save-modal'
 import BookmarkFromHistoryModal from '../bookmark-form/bookmark-from-history-modal'
 import AutoSync from '../setting-sync/auto-sync'
 import BatchOpRunner from '../batch-op/batch-op-runner'
+import UnixTimestampTooltip from '../terminal/unix-timestamp-tooltip'
 import { pick } from 'lodash-es'
 import deepCopy from 'json-deep-copy'
 import './wrapper.styl'
@@ -51,7 +52,7 @@ export default auto(function Index (props) {
     ipcOnEvent('open-about', store.openAbout)
     ipcOnEvent('new-ssh', store.onNewSsh)
     ipcOnEvent('add-tab-from-command-line', store.addTabFromCommandLine)
-    ipcOnEvent('open-tab', (e, parsed) => store.addTab(parsed))
+    ipcOnEvent('open-tab', (e, parsed) => store.ipcOpenTab(parsed))
     ipcOnEvent('openSettings', store.openSetting)
     ipcOnEvent('selectall', store.selectall)
     ipcOnEvent('focused', store.focus)
@@ -297,6 +298,7 @@ export default auto(function Index (props) {
         <NotificationContainer />
         <BatchOpRunner />
         <AIConfigModal store={store} />
+        <UnixTimestampTooltip />
       </div>
     </ConfigProvider>
   )

package/client/components/session/session.jsx

@@ -14,8 +14,7 @@ import {
   FullscreenOutlined,
   PaperClipOutlined,
   CloseOutlined,
-  ApartmentOutlined,
-  HeartOutlined
+  ApartmentOutlined
 } from '@ant-design/icons'
 import {
   Tooltip,
@@ -37,6 +36,7 @@ import {
 import { SplitViewIcon } from '../icons/split-view'
 import { refs } from '../common/ref'
 import safeName from '../../common/safe-name'
+import { HeartbeatIcon } from '../icons/heartbeat'
 import './session.styl'
 
 const e = window.translate
@@ -550,7 +550,7 @@ export default class SessionWrapper extends Component {
     }
     return (
       <Tooltip title={title}>
-        <HeartOutlined {...iconProps} />
+        <HeartbeatIcon {...iconProps} />
       </Tooltip>
     )
   }

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

@@ -7,7 +7,7 @@
  */
 import { useEffect, useRef } from 'react'
 import { ArrowDownOutlined, ArrowUpOutlined, SaveOutlined, ClearOutlined } from '@ant-design/icons'
-import { Button, Input, Form, Alert } from 'antd'
+import { Button, Input, Form, Alert, Switch } from 'antd'
 import { notification } from '../common/notification'
 import Link from '../common/external-link'
 import dayjs from 'dayjs'
@@ -80,6 +80,7 @@ export default function SyncForm (props) {
       up[syncType + 'ServerUrl'] = res.serverUrl || ''
       up[syncType + 'Username'] = res.username || ''
       up[syncType + 'Password'] = res.password || ''
+      up[syncType + 'SkipVerify'] = res.skipVerify || false
     }
 
     window.store.updateSyncSetting(up)
@@ -247,6 +248,13 @@ export default function SyncForm (props) {
             id='sync-input-webdav-username'
           />
         </FormItem>
+        <FormItem
+          label={createLabel('Skip SSL verify')}
+          name='skipVerify'
+          valuePropName='checked'
+        >
+          <Switch />
+        </FormItem>
         <FormItem
           label={createLabel(e('password'))}
           name='password'

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

@@ -48,7 +48,8 @@ export default auto(function SyncSettingEntry (props) {
       // WebDAV specific fields
       serverUrl: syncSetting[type + 'ServerUrl'],
       username: syncSetting[type + 'Username'],
-      password: syncSetting[type + 'Password']
+      password: syncSetting[type + 'Password'],
+      skipVerify: syncSetting[type + 'SkipVerify'] || false
     }
     return (
       <SyncForm

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

@@ -2,8 +2,8 @@
  * file list table
  */
 
-import { Component } from 'react'
-import { Dropdown, Pagination } from 'antd'
+import { Component, createRef } from 'react'
+import { Dropdown } from 'antd'
 import classnames from 'classnames'
 import FileSection from './file-item'
 import PagedList from './paged-list'
@@ -19,7 +19,29 @@ const e = window.translate
 export default class FileListTable extends Component {
   constructor (props) {
     super(props)
-    this.state = this.initFromProps()
+    this.state = {
+      ...this.initFromProps(),
+      scrollTop: 0
+    }
+  }
+
+  containerRef = createRef()
+
+  componentDidUpdate (prevProps) {
+    const prevList = prevProps.fileList
+    const nextList = this.props.fileList
+    const contentChanged = prevList.length !== nextList.length ||
+      prevList.some((f, i) => f.id !== nextList[i].id)
+    if (contentChanged) {
+      if (this.containerRef.current) {
+        this.containerRef.current.scrollTop = 0
+      }
+      this.setState({ scrollTop: 0 })
+    }
+  }
+
+  onScroll = (e) => {
+    this.setState({ scrollTop: e.target.scrollTop })
   }
 
   initFromProps = (pps = this.getPropsDefault()) => {
@@ -36,9 +58,7 @@ export default class FileListTable extends Component {
       }
     })
     return {
-      pageSize: 100,
-      properties,
-      page: 1
+      properties
     }
   }
 
@@ -171,40 +191,6 @@ export default class FileListTable extends Component {
     'left'
   ]
 
-  hasPager = () => {
-    const {
-      pageSize
-    } = this.state
-    const {
-      fileList
-    } = this.props
-    const len = fileList.length
-    return len > pageSize
-  }
-
-  onPageChange = (page) => {
-    this.setState({ page })
-  }
-
-  renderPager () {
-    const { page, pageSize } = this.state
-    const { fileList } = this.props
-    const props = {
-      current: page,
-      pageSize,
-      total: fileList.length,
-      showLessItems: true,
-      showSizeChanger: false,
-      simple: false,
-      onChange: this.onPageChange
-    }
-    return (
-      <div className='pd1b pager-wrap'>
-        <Pagination {...props} />
-      </div>
-    )
-  }
-
   // reset
   resetWidth = () => {
     this.setState(this.initFromProps())
@@ -293,24 +279,19 @@ export default class FileListTable extends Component {
 
   render () {
     const { fileList, height, type } = this.props
-    // const tableHeaderHeight = 30
-    // const sh = sshSftpSplitView ? 0 : 32
+    const containerHeight = height - 42 - 30 - 32 - 90
     const props = {
+      ref: this.containerRef,
       className: 'sftp-table-content overscroll-y relative',
       style: {
-        height: height - 42 - 30 - 32 - 90
+        height: containerHeight
       },
       draggable: false,
+      onScroll: this.onScroll,
       onClick: this.handleClick,
       onDoubleClick: this.handleDoubleClick
     }
-    const hasPager = this.hasPager()
-    const cls = classnames(
-      'sftp-table relative',
-      {
-        'sftp-has-pager': hasPager
-      }
-    )
+    const cls = classnames('sftp-table relative')
     const ddProps = {
       menu: {
         items: this.renderContextMenuFile(),
@@ -338,13 +319,11 @@ export default class FileListTable extends Component {
             <PagedList
               list={fileList}
               renderItem={this.renderItem}
-              hasPager={hasPager}
-              page={this.state.page}
-              pageSize={this.state.pageSize}
+              scrollTop={this.state.scrollTop}
+              containerHeight={containerHeight}
             />
           </div>
         </Dropdown>
-        {hasPager && this.renderPager()}
       </div>
     )
   }

package/client/components/sftp/paged-list.jsx

@@ -1,56 +1,56 @@
 /**
- * file list module to limit files rendered to increase performance
+ * Virtual list for SFTP file list.
+ *
+ * Scroll state is owned by the parent (list-table-ui) via React's onScroll prop
+ * on the scrollable container, and passed down as `scrollTop`. This avoids the
+ * React lifecycle ordering bug where a child's componentDidMount fires before the
+ * parent div's ref is assigned, making addEventListener attach to null.
+ *
+ * Uses spacers (top/bottom divs) so the container's scrollbar reflects the full
+ * list height while only the visible window (± OVERSCAN) is in the DOM.
+ *
+ * offsetTop is read from rootRef.offsetTop at render time — the distance from the
+ * scroll container's top edge to this list's top edge (accounts for the ".." parent
+ * row above the list).
  */
 
-import { Component } from 'react'
-import { Pagination } from 'antd'
+import { Component, createRef } from 'react'
 
-export default class ScrollFiles extends Component {
-  state = {
-    page: 1,
-    pageSize: 100
-  }
+const ITEM_SIZE = 36 // 32px item height + 4px margin-bottom
+const OVERSCAN = 5
 
-  onChange = page => {
-    this.setState({
-      page
-    })
-  }
+export default class VirtualList extends Component {
+  rootRef = createRef()
 
-  renderList () {
-    const page = this.props.page ?? this.state.page
-    const pageSize = this.props.pageSize ?? this.state.pageSize
-    const start = (page - 1) * pageSize
-    const end = start + pageSize
-    const {
-      list, hasPager
-    } = this.props
-    const arr = hasPager
-      ? list.slice(start, end)
-      : list
-    return arr.map((item, index) => this.props.renderItem(item, index))
-  }
+  render () {
+    const { list, renderItem, containerHeight = 400, scrollTop = 0 } = this.props
+
+    // offsetTop: distance from scroll container top to this list's top.
+    // rootRef.offsetTop is relative to the nearest positioned ancestor, which is
+    // .sftp-table-content (position: relative) — exactly the scroll container.
+    // Returns 0 on first render (rootRef not yet set); harmless (renders a few extra items).
+    const offsetTop = this.rootRef.current?.offsetTop ?? 0
+
+    const startIndex = Math.max(
+      0,
+      Math.floor((scrollTop - offsetTop) / ITEM_SIZE) - OVERSCAN
+    )
+    const endIndex = Math.min(
+      list.length - 1,
+      Math.ceil((scrollTop + containerHeight - offsetTop) / ITEM_SIZE) + OVERSCAN
+    )
+
+    const topSpacerHeight = startIndex * ITEM_SIZE
+    const bottomSpacerHeight = Math.max(0, (list.length - endIndex - 1) * ITEM_SIZE)
 
-  renderPager () {
-    const props = {
-      current: this.state.page,
-      pageSize: this.state.pageSize,
-      total: this.props.list.length,
-      showLessItems: true,
-      showSizeChanger: false,
-      simple: false,
-      onChange: this.onChange
-    }
     return (
-      <div className='pd1b pager-wrap'>
-        <Pagination
-          {...props}
-        />
+      <div ref={this.rootRef}>
+        <div style={{ height: topSpacerHeight }} />
+        {list.slice(startIndex, endIndex + 1).map((item, i) =>
+          renderItem(item, startIndex + i)
+        )}
+        <div style={{ height: bottomSpacerHeight }} />
       </div>
     )
   }
-
-  render () {
-    return this.renderList()
-  }
 }

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

@@ -970,7 +970,7 @@ export default class Sftp extends Component {
     })
   }
 
-  parsePath = (type, pth) => {
+  parsePath = async (type, pth) => {
     const reg = /^%([^%]+)%/
     if (!reg.test(pth)) {
       return pth
@@ -980,13 +980,14 @@ export default class Sftp extends Component {
       return pth
     }
     const envName = m[1]
-    const envPath = window.pre.env[envName]
+    const envPath = await window.pre.runGlobalAsync('getEnv', envName)
     if (envPath) {
       return pth.replace(reg, envPath)
     }
+    return pth
   }
 
-  onGoto = (type, e) => {
+  onGoto = async (type, e) => {
     e && e.preventDefault()
     if (type === typeMap.remote && !this.sftp) {
       return this.initData(true)
@@ -994,7 +995,7 @@ export default class Sftp extends Component {
     const n = `${type}Path`
     const nt = n + 'Temp'
     const oldPath = this.state[type + 'Path']
-    const np = this.parsePath(type, this.state[nt])
+    const np = await this.parsePath(type, this.state[nt])
     if (!isValidPath(np)) {
       return notification.warning({
         message: 'path not valid'

package/client/components/sidebar/info-modal.jsx

@@ -16,6 +16,7 @@ import Link from '../common/external-link'
 import LogoElem from '../common/logo-elem'
 import RunningTime from './app-running-time'
 import { auto } from 'manate/react'
+import { useState } from 'react'
 
 import {
   packInfo,
@@ -27,8 +28,13 @@ import './info.styl'
 const e = window.translate
 
 export default auto(function InfoModal (props) {
+  const [runtimeEnv, setRuntimeEnv] = useState(null)
+
   const handleChangeTab = key => {
     window.store.infoModalTab = key
+    if (key === infoTabs.env && !runtimeEnv) {
+      window.pre.runGlobalAsync('getEnv').then(env => setRuntimeEnv(env))
+    }
   }
 
   const renderCheckUpdate = () => {
@@ -135,14 +141,14 @@ export default auto(function InfoModal (props) {
     knownIssuesLink
   } = packInfo
   const link = releaseLink.replace('/releases', '')
-  const { env, versions } = window.pre
+  const { versions } = window.pre
   const deps = {
     ...devDependencies,
     ...dependencies
   }
   const envs = {
     ...versions,
-    ...env
+    ...(runtimeEnv || {})
   }
   const title = (
     <div className='custom-modal-close-confirm-title font16'>

package/client/components/tabs/tab.jsx

@@ -8,7 +8,8 @@ import { refsTabs } from '../common/ref'
 import {
   CloseOutlined,
   Loading3QuartersOutlined,
-  BorderlessTableOutlined
+  BorderlessTableOutlined,
+  LockOutlined
 } from '@ant-design/icons'
 import {
   Tooltip,
@@ -33,7 +34,7 @@ class Tab extends Component {
   constructor (props) {
     super(props)
     this.state = {
-      terminalOnData: false
+      terminalOnData: ''
     }
     this.id = 'tab-' + this.props.tab.id
     refsTabs.add(this.id, this)
@@ -48,19 +49,38 @@ class Tab extends Component {
   }
 
   notifyOnData = () => {
+    if (this.state.terminalOnData === 'password') {
+      return
+    }
     if (this.timer) {
       clearTimeout(this.timer)
       this.timer = null
     }
     this.setState({
-      terminalOnData: true
+      terminalOnData: 'feed'
     })
     this.timer = setTimeout(this.clearTerminalOnData, 4000)
   }
 
   clearTerminalOnData = () => {
     this.setState({
-      terminalOnData: false
+      terminalOnData: ''
+    })
+  }
+
+  notifyPasswordPrompt = () => {
+    if (this.timer) {
+      clearTimeout(this.timer)
+      this.timer = null
+    }
+    this.setState({
+      terminalOnData: 'password'
+    })
+  }
+
+  clearPasswordPrompt = () => {
+    this.setState({
+      terminalOnData: ''
     })
   }
 
@@ -424,13 +444,7 @@ class Tab extends Component {
       {
         'tab-last': isLast
       },
-      status,
-      {
-        'is-terminal-active': terminalOnData
-      },
-      {
-        'is-transporting': isTransporting
-      }
+      status
     )
     const title = createName(tab)
     let tooltipTitle = title
@@ -477,15 +491,19 @@ class Tab extends Component {
         >
           <Dropdown {...dropdownProps}>
             <div
-              className='tab-title elli pd1x'
+              className='tab-title elli'
               onClick={this.handleClick}
               onDoubleClick={this.handleDup}
             >
-              <Loading3QuartersOutlined
-                className='pointer tab-reload mg1r'
-                onClick={this.handleReloadTab}
-                title={e('reload')}
-              />
+              {
+                status === 'error' && (
+                  <Loading3QuartersOutlined
+                    className='pointer tab-reload mg1r'
+                    onClick={this.handleReloadTab}
+                    title={e('reload')}
+                  />
+                )
+              }
               <span className='tab-title'>
                 <span className='iblock mg1r tab-count' style={styleTag}>{tabCount}</span>
                 <span className='mg1r'>{title}</span>
@@ -493,8 +511,9 @@ class Tab extends Component {
             </div>
           </Dropdown>
           <div className={'tab-status ' + status} />
-          <div className='tab-traffic' />
-          <BorderlessTableOutlined className='tab-terminal-feed' />
+          {isTransporting && <div className='tab-traffic' />}
+          {terminalOnData === 'feed' && <BorderlessTableOutlined className='tab-terminal-feed' />}
+          {terminalOnData === 'password' && <LockOutlined className='tab-terminal-feed password' />}
           {
             this.renderCloseIcon()
           }

package/client/components/tabs/tabs.styl

@@ -36,6 +36,7 @@
   vertical-align middle
   cursor pointer
   position relative
+  padding 0 14px
   min-width 100px
   max-width 200px
   line-height 36px
@@ -46,7 +47,6 @@
   color var(--text-dark)
   &.tab-last
     margin-right 5px
-  .tab-reload
   .tab-close
     display none
   &.active
@@ -68,10 +68,6 @@
     width 1px
     border 1px dashed var(--text-dark)
     height 36px
-  &.error
-    .tab-reload
-      display inline-block
-      color var(--text-light)
 @keyframes blink
   0%
     background-color #e0e0e0
@@ -96,30 +92,25 @@
     background-color var(--error)
   &.processing
     background-color var(--primary)
-.is-transporting .tab-traffic
-  display block
-  animation blink 2s infinite
-  /* Remove opacity animation, use background-color */
 .tab-traffic
-  display none
   left 10px
   width 5px
   border-radius 0
   background-color var(--success)
-.is-terminal-active .tab-terminal-feed
-  display block
   animation blink 2s infinite
-  background-color transparent !important
-  /* Remove opacity animation, use background-color */
 .tab-terminal-feed
-  display none
-  left 20px
+  width 12px
+  height 12px
   border-radius 0
   color var(--success)
-  font-size 8px
+  font-size 12px
   left 2px
   top 24px
   background none
+  background-color transparent !important
+  animation blink 2s infinite
+  &.password
+    color var(--warn)
 .tab-close
   position absolute
   right 5px

package/client/components/terminal/attach-addon-custom.js

@@ -223,6 +223,7 @@ export default class AttachAddonCustom {
     }
 
     if (typeof data === 'string') {
+      term?.parent?.notifyOnData()
       return term.write(data)
     }
     data = new Uint8Array(data)
@@ -242,13 +243,16 @@ export default class AttachAddonCustom {
   sendToServer = (data) => {
     this._lastInputTime = Date.now()
     // Start echo detection when password prompt is suspected
-    if (this._passwordPromptDetected && !this._pendingEchoCheck && data !== '\r' && data !== '\n') {
+    if (this._passwordPromptDetected && !this._pendingEchoCheck && data !== '\r' && data !== '\n' && data !== '\x03') {
       this._pendingEchoCheck = { char: data, time: Date.now() }
       clearTimeout(this._echoCheckTimer)
       this._echoCheckTimer = setTimeout(this._onEchoCheckTimeout, 200)
     }
-    // Reset password state on Enter
-    if (data === '\r' || data === '\n') {
+    // Reset password state on Enter or Ctrl+C
+    if (data === '\r' || data === '\n' || data === '\x03') {
+      if (this._passwordPromptDetected) {
+        this.term?.parent?.onPasswordPromptCancelled?.()
+      }
       this._passwordPromptDetected = false
       this._lastOutputLine = ''
       this._pendingEchoCheck = null