@electerm/electerm-react 1.80.6 → 1.90.6

package/client/components/main/upgrade.jsx

@@ -34,6 +34,9 @@ export default class Upgrade extends PureComponent {
   downloadTimer = null
 
   componentDidMount () {
+    if (window.et.isWebApp) {
+      return
+    }
     setTimeout(() => {
       getLatestReleaseVersion(1)
     }, 5000)

package/client/components/rdp/rdp-session.jsx

@@ -67,7 +67,7 @@ export default class RdpSession extends PureComponent {
       tokenElecterm,
       server = ''
     } = config
-    const { sessionId, id } = this.props
+    const { id } = this.props
     const tab = window.store.applyProfile(deepCopy(this.props.tab || {}))
     const {
       type,
@@ -75,7 +75,6 @@ export default class RdpSession extends PureComponent {
     } = tab
     const opts = clone({
       term: terminalType || config.terminalType,
-      sessionId,
       tabId: id,
       srcTabId: tab.id,
       termType: type,
@@ -101,7 +100,7 @@ export default class RdpSession extends PureComponent {
       : `${host}:${port}`
     const pre = server.startsWith('https') ? 'wss' : 'ws'
     const { width, height } = this.state
-    const wsUrl = `${pre}://${hs}/rdp/${pid}?sessionId=${sessionId}&token=${tokenElecterm}&width=${width}&height=${height}`
+    const wsUrl = `${pre}://${hs}/rdp/${pid}?&token=${tokenElecterm}&width=${width}&height=${height}`
     const socket = new WebSocket(wsUrl)
     socket.onclose = this.oncloseSocket
     socket.onerror = this.onerrorSocket

package/client/components/session/session.jsx

@@ -21,7 +21,6 @@ import {
   Splitter
 } from 'antd'
 import { pick } from 'lodash-es'
-import generate from '../../common/uid'
 import copy from 'json-deep-copy'
 import classnames from 'classnames'
 import {
@@ -30,7 +29,8 @@ import {
   terminalRdpType,
   terminalVncType,
   terminalWebType,
-  terminalTelnetType
+  terminalTelnetType,
+  terminalFtpType
 } from '../../common/constants'
 import { SplitViewIcon } from '../icons/split-view'
 import { refs } from '../common/ref'
@@ -50,7 +50,6 @@ export default class SessionWrapper extends Component {
       key: Math.random(),
       splitSize: [50, 50],
       sessionOptions: null,
-      sessionId: generate(),
       delKeyPressed: false,
       broadcastInput: false
     }
@@ -60,11 +59,6 @@ export default class SessionWrapper extends Component {
   minWithForSplit = 640
   minHeightForSplit = 400
 
-  componentDidMount () {
-    this.updateTab()
-    // this.initEvent()
-  }
-
   componentWillUnmount () {
     clearTimeout(this.backspaceKeyPressedTimer)
   }
@@ -244,14 +238,6 @@ export default class SessionWrapper extends Component {
     this.editTab(update)
   }
 
-  updateTab = () => {
-    this.editTab(
-      {
-        sessionId: this.state.sessionId
-      }
-    )
-  }
-
   computePosition = (index) => {
     return {
       left: 0,
@@ -266,7 +252,6 @@ export default class SessionWrapper extends Component {
   renderTerminals = () => {
     const {
       sessionOptions,
-      sessionId,
       sftpPathFollowSsh,
       broadcastInput
     } = this.state
@@ -292,7 +277,6 @@ export default class SessionWrapper extends Component {
     if (type === terminalRdpType || type === terminalVncType) {
       const rdpProps = {
         tab: this.props.tab,
-        sessionId,
         ...pick(this.props, [
           'resolutions',
           'height',
@@ -319,6 +303,7 @@ export default class SessionWrapper extends Component {
           />
         )
       }
+
       return (
         <RdpSession
           {...rdpProps}
@@ -326,6 +311,22 @@ export default class SessionWrapper extends Component {
       )
     }
 
+    if (type === terminalFtpType) {
+      const ftpProps = {
+        ...this.props,
+        ...pick(this, [
+          'onChangePane',
+          'setCwd'
+        ]),
+        isFtp: true
+      }
+      return (
+        <Sftp
+          {...ftpProps}
+        />
+      )
+    }
+
     const cls = pane === paneMap.terminal ||
       (sshSftpSplitView && this.canSplitView())
       ? 'terms-box'
@@ -363,7 +364,6 @@ export default class SessionWrapper extends Component {
       >
         <Term
           logName={logName}
-          sessionId={sessionId}
           sessionOptions={sessionOptions}
           {...pops}
         />
@@ -376,7 +376,8 @@ export default class SessionWrapper extends Component {
     return type === terminalRdpType ||
       type === terminalVncType ||
       type === terminalWebType ||
-      type === terminalTelnetType
+      type === terminalTelnetType ||
+      type === terminalFtpType
   }
 
   calcSftpWidthHeight = () => {
@@ -424,7 +425,6 @@ export default class SessionWrapper extends Component {
   renderSftp = () => {
     const {
       sessionOptions,
-      sessionId,
       enableSftp,
       sftpPathFollowSsh,
       cwd
@@ -452,7 +452,6 @@ export default class SessionWrapper extends Component {
       enableSftp,
       sessionOptions,
       height,
-      sessionId,
       pane,
       ...this.calcSftpWidthHeight()
     }

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

@@ -494,6 +494,7 @@ export default class SettingTerminal extends Component {
         <Link to={regexHelpLink}>wiki</Link>
       </div>
     )
+    const startDirectoryLocalTxt = `${e('startDirectory')}:${e('local')}`
     return (
       <div className='form-wrap pd1y pd2x'>
         <div className='pd1y font16 bold'>
@@ -559,6 +560,10 @@ export default class SettingTerminal extends Component {
         </div>
         <div className='pd1b'>{e('terminalBackgroundImage')}</div>
         <TerminalBackgroundConfig {...bgProps} />
+        <div className='pd1b'>{startDirectoryLocalTxt}</div>
+        {
+          this.renderText('startDirectoryLocal', startDirectoryLocalTxt)
+        }
         <div className='pd1b'>{e('terminalWordSeparator')}</div>
         {
           this.renderText('terminalWordSeparator', e('terminalWordSeparator'))

package/client/components/sftp/address-bar.jsx

@@ -4,7 +4,8 @@ import {
   EyeFilled,
   ReloadOutlined,
   ArrowRightOutlined,
-  LoadingOutlined
+  LoadingOutlined,
+  HomeOutlined
 } from '@ant-design/icons'
 import {
   Input,
@@ -55,6 +56,10 @@ function renderAddonBefore (props, realPath) {
           className='mg1r'
         />
       </Tooltip>
+      <HomeOutlined
+        onClick={() => props.gotoHome(type)}
+        className='mg1r'
+      />
       <KeywordFilter {...keywordProps} />
       <AddrBookmark
         store={window.store}

package/client/components/sftp/file-icon.jsx

@@ -14,7 +14,7 @@ export default function FileIcon ({ file, ...extra }) {
   return (
     <img
       src={extIconPath + name}
-      height={12}
+      height={16}
       alt=''
       {...extra}
     />

package/client/components/sftp/file-info-modal.jsx

@@ -28,7 +28,6 @@ export default class FileMode extends React.PureComponent {
     loading: false,
     tab: null,
     pid: '',
-    sessionId: '',
     size: 0,
     file: {},
     editPermission: false
@@ -128,7 +127,6 @@ export default class FileMode extends React.PureComponent {
     const cmd = `du -sh '${folder}'`
     const r = await runCmd(
       this.state.pid,
-      this.state.sessionId,
       cmd
     ).catch(window.store.onError)
     return r ? r.split(/\s+/)[0] : 0

package/client/components/sftp/file-item.jsx

@@ -6,7 +6,8 @@ import React from 'react'
 import ExtIcon from './file-icon'
 import {
   FolderOutlined,
-  FileOutlined
+  FileOutlined,
+  ArrowRightOutlined
 } from '@ant-design/icons'
 import classnames from 'classnames'
 import copy from 'json-deep-copy'
@@ -397,7 +398,6 @@ export default class FileSection extends React.Component {
       tab: this.props.tab,
       visible: true,
       pid: this.props.pid,
-      sessionId: this.props.sessionId,
       uidTree: this.props[`${type}UidTree`],
       gidTree: this.props[`${type}GidTree`]
     })
@@ -671,7 +671,7 @@ export default class FileSection extends React.Component {
     const {
       path, name
     } = this.state.file
-    const rp = resolve(path, name)
+    const rp = path ? resolve(path, name) : this.props[`${this.props.type}Path`]
     this.props.tab.pane = paneMap.terminal
     refs.get('term-' + this.props.tab.id)?.cd(rp)
   }
@@ -883,27 +883,55 @@ export default class FileSection extends React.Component {
     return !isWin
   }
 
+  handleContextMenuCapture = (e) => {
+    this.contextMenuPosition = {
+      clientY: e.clientY
+    }
+  }
+
+  itemToMenuFormat = (r) => {
+    const { func, text, disabled, icon, subText, requireConfirm } = r
+    const IconCom = iconsMap[icon]
+    return {
+      key: func,
+      label: text,
+      disabled,
+      icon: <IconCom />,
+      extra: subText,
+      danger: requireConfirm
+    }
+  }
+
   renderContextMenu = () => {
-    return this.renderContextItems()
-      .map(r => {
-        const {
-          func,
-          text,
-          disabled,
-          icon,
-          subText,
-          requireConfirm
-        } = r
-        const IconCom = iconsMap[icon]
-        return {
-          key: func,
-          label: text,
-          disabled,
-          icon: <IconCom />,
-          extra: subText,
-          danger: requireConfirm
+    const items = this.renderContextItems()
+
+    // Check if we need to split the menu
+    if (this.contextMenuPosition) {
+      const windowHeight = window.innerHeight
+      const { clientY } = this.contextMenuPosition
+      const estimatedMenuHeight = items.length * 32 // Approximate height per menu item
+      const availableHeight = windowHeight - clientY
+
+      // If menu would extend beyond window, split into two parts
+      if (estimatedMenuHeight > availableHeight && items.length > 6) {
+        const firstHalf = items.slice(0, Math.ceil(items.length / 2))
+        const secondHalf = items.slice(Math.ceil(items.length / 2))
+
+        // Create "More..." submenu with second half of items
+        const moreSubmenu = {
+          key: 'more-submenu',
+          label: '…',
+          icon: <ArrowRightOutlined />,
+          children: secondHalf.map(this.itemToMenuFormat)
         }
-      })
+
+        // Return first half + "More..." submenu
+        return [...firstHalf.map(this.itemToMenuFormat), moreSubmenu]
+      }
+    }
+
+    // Otherwise return normal menu
+    return items.map(this.itemToMenuFormat)
   }
 
   renderContextItems () {
@@ -953,11 +981,12 @@ export default class FileSection extends React.Component {
       })
     }
     if (
-      isDirectory && isRealFile &&
+      isDirectory &&
       (
         (hasHost && enableSsh !== false && isRemote) ||
         (isLocal && !hasHost)
-      )
+      ) &&
+      !this.props.isFtp
     ) {
       res.push({
         func: 'gotoFolderInTerminal',
@@ -1055,7 +1084,10 @@ export default class FileSection extends React.Component {
       icon: 'ReloadOutlined',
       text: e('refresh')
     })
-    if (this.showModeEdit(type, isRealFile)) {
+    if (
+      this.showModeEdit(type, isRealFile) &&
+      !this.props.isFtp
+    ) {
       res.push({
         func: 'editPermission',
         icon: 'LockOutlined',
@@ -1073,7 +1105,10 @@ export default class FileSection extends React.Component {
   }
 
   onContextMenu = ({ key }) => {
-    this[key]()
+    // If it's not the submenu itself
+    if (key !== 'more-submenu') {
+      this[key]()
+    }
   }
 
   renderEditing (file) {
@@ -1207,6 +1242,7 @@ export default class FileSection extends React.Component {
         <div
           ref={this.domRef}
           {...props}
+          onContextMenu={this.handleContextMenuCapture}
         >
           <div className='file-bg' />
           <div className='file-props-div'>

package/client/components/sftp/file-table-header.jsx

@@ -49,7 +49,7 @@ export default class FileListTableHeader extends Component {
     }
     const text = e(id || '')
     const directionIcon = isSorting
-      ? (sortDirection === 'asc' ? <DownOutlined /> : <UpOutlined />)
+      ? (sortDirection === 'asc' ? <UpOutlined /> : <DownOutlined />)
       : null
     const itemProps = {
       onClick: this.props.onClickName,

package/client/components/sftp/owner-list.js

@@ -27,8 +27,8 @@ function parseNames (str) {
 const linuxListUser = 'cat /etc/passwd'
 const linuxListGroup = 'cat /etc/group'
 
-export async function remoteListUsers (pid, sessionId) {
-  const users = await runCmd(pid, sessionId, linuxListUser)
+export async function remoteListUsers (pid) {
+  const users = await runCmd(pid, linuxListUser)
     .catch(log.error)
   if (users) {
     return parseNames(users)
@@ -36,8 +36,8 @@ export async function remoteListUsers (pid, sessionId) {
   return {}
 }
 
-export async function remoteListGroups (pid, sessionId) {
-  const groups = await runCmd(pid, sessionId, linuxListGroup)
+export async function remoteListGroups (pid) {
+  const groups = await runCmd(pid, linuxListGroup)
     .catch(log.error)
   if (groups) {
     return parseNames(groups)

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

@@ -15,6 +15,7 @@ import {
   typeMap, maxSftpHistory, paneMap,
   fileTypeMap,
   terminalSerialType,
+  terminalFtpType,
   unexpectedPacketErrorDesc,
   sftpRetryInterval
 } from '../../common/constants'
@@ -48,10 +49,12 @@ export default class Sftp extends Component {
   }
 
   componentDidMount () {
-    this.id = 'sftp-' + this.props.sessionId
-    this.tid = 'sftp-' + this.props.tab.id
+    this.id = 'sftp-' + this.props.tab.id
     refs.add(this.id, this)
-    refs.add(this.tid, this)
+    if (this.props.isFtp) {
+      this.type = 'ftp'
+      this.initData()
+    }
   }
 
   componentDidUpdate (prevProps, prevState) {
@@ -89,11 +92,12 @@ export default class Sftp extends Component {
 
   componentWillUnmount () {
     refs.remove(this.id)
-    refs.remove(this.tid)
     this.sftp && this.sftp.destroy()
     this.sftp = null
     clearTimeout(this.timer4)
     this.timer4 = null
+    clearTimeout(this.timer5)
+    this.timer5 = null
   }
 
   directions = [
@@ -112,15 +116,15 @@ export default class Sftp extends Component {
         [`sortProp.${k}`]: window.store.sftpSortSetting[k].prop,
         [`sortDirection.${k}`]: window.store.sftpSortSetting[k].direction,
         [k]: [],
-        [`${k}FileTree`]: {},
+        [`${k}FileTree`]: new Map(),
         [`${k}Loading`]: false,
         [`${k}InputFocus`]: false,
         [`${k}ShowHiddenFile`]: def,
         [`${k}Path`]: '',
         [`${k}PathTemp`]: '',
         [`${k}PathHistory`]: [],
-        [`${k}GidTree`]: {},
-        [`${k}UidTree`]: {},
+        [`${k}GidTree`]: new Map(),
+        [`${k}UidTree`]: new Map(),
         [`${k}Keyword`]: ''
       })
       return prev
@@ -170,9 +174,11 @@ export default class Sftp extends Component {
   }, isEqual)
 
   isActive () {
-    return this.props.currentBatchTabId === this.props.tab.id &&
-      (this.props.pane === paneMap.fileManager ||
-      this.props.sshSftpSplitView)
+    const { currentBatchTabId, pane, sshSftpSplitView } = this.props
+    const { tab } = this.props
+    const isFtp = tab.type === terminalFtpType
+
+    return (currentBatchTabId === tab.id && (pane === paneMap.fileManager || sshSftpSplitView)) || isFtp
   }
 
   updateKeyword = (keyword, type) => {
@@ -191,6 +197,26 @@ export default class Sftp extends Component {
     }
   }
 
+  gotoHome = async (type) => {
+    const n = `${type}Path`
+    const nt = n + 'Temp'
+    let path
+
+    if (type === typeMap.remote) {
+      path = this.props.tab.startDirectoryRemote
+      if (!path && this.sftp) {
+        path = await this.getPwd(this.props.tab.username)
+      }
+    } else {
+      path = this.getLocalHome()
+    }
+
+    this.setState({
+      [n]: path,
+      [nt]: path
+    }, () => this[`${type}List`]())
+  }
+
   updateCwd = (cwd) => {
     if (!this.state.inited) {
       return
@@ -401,7 +427,8 @@ export default class Sftp extends Component {
     this[type + 'Dom'].onPaste()
   }
 
-  initData = () => {
+  initData = (terminalId) => {
+    this.terminalId = terminalId
     if (this.shouldRenderRemote()) {
       this.initRemoteAll()
     }
@@ -502,12 +529,10 @@ export default class Sftp extends Component {
 
   remoteListOwner = async () => {
     const remoteUidTree = await owner.remoteListUsers(
-      this.props.pid,
-      this.props.sessionId
+      this.props.pid
     )
     const remoteGidTree = await owner.remoteListGroups(
-      this.props.pid,
-      this.props.sessionId
+      this.props.pid
     )
     this.setState({
       remoteGidTree,
@@ -549,7 +574,7 @@ export default class Sftp extends Component {
     remotePathReal,
     oldPath
   ) => {
-    const { tab, sessionOptions, sessionId } = this.props
+    const { tab, sessionOptions } = this.props
     const { username, startDirectory } = tab
     let remotePath
     const noPathInit = remotePathReal || this.state.remotePath
@@ -567,7 +592,7 @@ export default class Sftp extends Component {
     let sftp = this.sftp
     try {
       if (!this.sftp) {
-        sftp = await Client(sessionId)
+        sftp = await Client(this.terminalId, this.type)
         if (!sftp) {
           return
         }
@@ -580,7 +605,7 @@ export default class Sftp extends Component {
         const opts = deepCopy({
           ...tab,
           readyTimeout: config.sshReadyTimeout,
-          sessionId,
+          terminalId: this.terminalId,
           keepaliveInterval: config.keepaliveInterval,
           proxy: getProxy(tab, config),
           ...sessionOptions
@@ -649,11 +674,21 @@ export default class Sftp extends Component {
         ]).slice(0, maxSftpHistory)
       }
       this.setState(update, () => {
-        this.updateRemoteList(remote, remotePath, sftp)
+        if (this.type !== 'ftp') {
+          this.updateRemoteList(remote, remotePath, sftp)
+        }
         this.props.editTab(tab.id, {
           sftpCreated: true
         })
       })
+      this.timer5 = setTimeout(() => {
+        if (this.type !== 'ftp') {
+          this.updateRemoteList(remote, remotePath, sftp)
+        }
+        this.props.editTab(tab.id, {
+          sftpCreated: true
+        })
+      }, 1000)
     } catch (e) {
       const update = {
         remoteLoading: false,
@@ -716,6 +751,12 @@ export default class Sftp extends Component {
     this.setState(update)
   }
 
+  getLocalHome = () => {
+    return this.props.tab.startDirectoryLocal ||
+    this.props.config.startDirectoryLocal ||
+    window.pre.homeOrTmp
+  }
+
   localList = async (returnList = false, localPathReal, oldPath) => {
     if (!fs) return
     if (!returnList) {
@@ -730,8 +771,7 @@ export default class Sftp extends Component {
       const noPathInit = localPathReal || this.state.localPath
       const localPath = noPathInit ||
         this.getCwdLocal() ||
-        this.props.tab.startDirectoryLocal ||
-        window.pre.homeOrTmp
+        this.getLocalHome()
       const locals = await fs.readdirAsync(localPath)
       const local = []
       for (const name of locals) {
@@ -1015,6 +1055,7 @@ export default class Sftp extends Component {
         [
           'onChange',
           'onGoto',
+          'gotoHome',
           'onInputFocus',
           'onInputBlur',
           'toggleShowHiddenFile',

package/client/components/sftp/transfer-common.js

@@ -3,7 +3,6 @@ import createTitle from '../../common/create-title'
 export function createTransferProps (props) {
   return {
     title: createTitle(props.tab, false),
-    tabId: props.tab.id,
-    sessionId: props.sessionId
+    tabId: props.tab.id
   }
 }

package/client/components/sidebar/bookmark.jsx

@@ -1,15 +1,35 @@
-/**
- * bookmark select
- */
-
+import { refsStatic } from '../common/ref'
+import { useEffect, useRef } from 'react'
 import BookmarkSelect from './bookmark-select'
+import { debounce } from 'lodash-es'
 
 export default function BookmarkPanel (props) {
   const { store } = window
+  const bookmarksPanelRef = useRef(null)
+  const SCROLL_REF_ID = 'bookmarks-scroll-position'
+
+  // On component mount, restore scroll position
+  useEffect(() => {
+    if (store.openedSideBar) {
+      const savedPosition = refsStatic.get(SCROLL_REF_ID)
+      if (savedPosition) {
+        setTimeout(() => {
+          bookmarksPanelRef.current.scrollTop = savedPosition
+        }, 100)
+      }
+    }
+  }, [store.openedSideBar])
+
+  // Save scroll position when scrolling
+  const handleScroll = debounce((e) => {
+    const top = e.target.scrollTop
+    if (top > 0) {
+      refsStatic.add(SCROLL_REF_ID, e.target.scrollTop)
+    }
+  }, 100)
+
   return (
-    <div
-      className='sidebar-panel-bookmarks'
-    >
+    <div className='sidebar-panel-bookmarks' ref={bookmarksPanelRef} onScroll={handleScroll}>
       <div className='pd2l sidebar-inner'>
         <BookmarkSelect store={store} from='sidebar' />
       </div>

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

@@ -32,7 +32,7 @@ export default auto(function InfoModal (props) {
   }
 
   const renderCheckUpdate = () => {
-    if (srcsSkipUpgradeCheck.includes(props.installSrc)) {
+    if (window.et.isWebApp || srcsSkipUpgradeCheck.includes(props.installSrc)) {
       return null
     }
     const {

package/client/components/sidebar/sidebar.styl

@@ -40,6 +40,8 @@
   top 112px
   bottom 0
   overflow-y scroll
+  .item-list-wrap
+    overflow-y hidden
 .not-system-ui.is-mac
   .sidebar-bar
     margin-top 20px