@electerm/electerm-react 3.11.12 → 3.15.0

package/client/components/footer/cmd-history.jsx

@@ -105,17 +105,11 @@ export default auto(function CmdHistory (props) {
     ))
   }
 
-  const content = (
-    <div className='cmd-history-popover-content pd2'>
-      <div className='cmd-history-search pd2b'>
-        <InputAutoFocus
-          value={keyword}
-          onChange={handleChange}
-          placeholder={e('search')}
-          className='cmd-history-search-input'
-          allowClear
-        />
-      </div>
+  function renderHeader () {
+    if (!historyArray.length) {
+      return null
+    }
+    return (
       <div className='cmd-history-header pd2b'>
         <Switch
           checkedChildren={e('sortByFrequency')}
@@ -130,6 +124,21 @@ export default auto(function CmdHistory (props) {
           onClick={handleClearAll}
         />
       </div>
+    )
+  }
+
+  const content = (
+    <div className='cmd-history-popover-content pd2'>
+      <div className='cmd-history-search pd2b'>
+        <InputAutoFocus
+          value={keyword}
+          onChange={handleChange}
+          placeholder={e('search')}
+          className='cmd-history-search-input'
+          allowClear
+        />
+      </div>
+      {renderHeader()}
       <div className='cmd-history-list'>
         {renderList()}
       </div>

package/client/components/main/main.jsx

@@ -282,7 +282,7 @@ export default auto(function Index (props) {
         <InfoModal {...infoModalProps} />
         <RightSidePanel {...rightPanelProps}>
           <AIChat {...aiChatProps} />
-          <TerminalInfo {...terminalInfoProps} />
+          <TerminalInfo key={store.activeTabId} {...terminalInfoProps} />
         </RightSidePanel>
         <SshConfigLoadNotify {...sshConfigProps} />
         <LoadSshConfigs

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

@@ -6,7 +6,8 @@ import {
   ReloadOutlined,
   ArrowRightOutlined,
   LoadingOutlined,
-  HomeOutlined
+  HomeOutlined,
+  PlusOutlined
 } from '@ant-design/icons'
 import {
   Input,
@@ -74,7 +75,7 @@ function renderAddonBefore (props, realPath) {
   )
 }
 
-function renderAddonAfter (isLoadingRemote, onGoto, GoIcon, type) {
+function renderAddonAfter (isLoadingRemote, onGoto, GoIcon, type, handleUploadFromBrowser) {
   const handleClick = (e) => {
     e.stopPropagation()
     if (!isLoadingRemote) {
@@ -82,9 +83,24 @@ function renderAddonAfter (isLoadingRemote, onGoto, GoIcon, type) {
     }
   }
   return (
-    <GoIcon
-      onClick={handleClick}
-    />
+    <>
+      {
+        type === typeMap.local && window.et.isWebApp
+          ? (
+            <PlusOutlined
+              className='mg1r'
+              onClick={(e) => {
+                e.stopPropagation()
+                handleUploadFromBrowser()
+              }}
+            />
+            )
+          : null
+      }
+      <GoIcon
+        onClick={handleClick}
+      />
+    </>
   )
 }
 
@@ -160,7 +176,7 @@ export default function AddressBar (props) {
           onBlur={() => props.onInputBlur(type)}
           disabled={loadingSftp}
           suffix={
-            renderAddonAfter(isLoadingRemote, onGoto, GoIcon, type)
+            renderAddonAfter(isLoadingRemote, onGoto, GoIcon, type, props.handleUploadFromBrowser)
           }
         />
         {renderHistory(props, type)}

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

@@ -14,6 +14,7 @@ import copy from 'json-deep-copy'
 import { pick, some } from 'lodash-es'
 import Input from '../common/input-auto-focus'
 import resolve from '../../common/resolve'
+import normalizeRemotePath from '../../common/normalize-remote-path'
 import { addClass, removeClass } from '../../common/class'
 import {
   mode2permission,
@@ -604,7 +605,10 @@ export default class FileSection extends React.Component {
     const { type, name, isParent } = file
     const n = `${type}Path`
     const path = isParent ? file.path : this.props[n]
-    const np = resolve(path, name)
+    let np = resolve(path, name)
+    if (type === typeMap.remote) {
+      np = normalizeRemotePath(np)
+    }
     const op = this.props[type + 'Path']
     this.props.modifier({
       [n]: np,
@@ -882,6 +886,25 @@ export default class FileSection extends React.Component {
     window.pre.showItemInFolder(p)
   }
 
+  downloadFromBrowser = async () => {
+    const { path, name, isDirectory } = this.state.file
+    const p = resolve(path, name)
+    const url = '/api/download?path=' + encodeURIComponent(p)
+    const res = await window.fetch(url, {
+      headers: {
+        token: window.store?.config.tokenElecterm
+      }
+    })
+    const blob = await res.blob()
+    const a = document.createElement('a')
+    a.href = URL.createObjectURL(blob)
+    a.download = isDirectory ? name + '.tar.gz' : name
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    URL.revokeObjectURL(a.href)
+  }
+
   newItem = (isDirectory) => {
     const { type } = this.state.file
     const list = copy(this.props[type])
@@ -1060,6 +1083,13 @@ export default class FileSection extends React.Component {
         text: e('showInDefaultFileMananger')
       })
     }
+    if (isLocal && isRealFile && window.et.isWebApp) {
+      res.push({
+        func: 'downloadFromBrowser',
+        icon: 'DownloadOutlined',
+        text: 'Download from browser'
+      })
+    }
     if (showEdit) {
       res.push({
         func: 'editFile',

package/client/components/sftp/file-read.js

@@ -7,6 +7,12 @@ import fs from '../../common/fs'
 import { isWin } from '../../common/constants'
 
 export const getFileExt = fileName => {
+  if (/^\\\\(?:wsl\$|wsl\.localhost)\\/.test(fileName)) {
+    return {
+      base: fileName,
+      ext: ''
+    }
+  }
   const sep = '.'
   const arr = fileName.split(sep)
   const len = arr.length
@@ -82,12 +88,15 @@ export const getFolderFromFilePath = (filePath, isRemote) => {
   const arr = filePath.split(sep)
   const len = arr.length
   const isWinDisk = isWin && filePath.endsWith(sep)
-  const path = isWinDisk
+  const isWslRoot = isWin && /^\\\\(?:wsl\$|wsl\.localhost)\\[^\\]+$/.test(filePath.replace(/\\$/, ''))
+  const path = (isWinDisk || isWslRoot)
     ? '/'
     : arr.slice(0, len - 1).join(sep)
   const name = isWinDisk
     ? filePath.replace(sep, '')
-    : arr[len - 1]
+    : isWslRoot
+      ? filePath
+      : arr[len - 1]
 
   return {
     path,

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

@@ -29,6 +29,7 @@ import fs from '../../common/fs'
 import ListTable from './list-table-ui'
 import deepCopy from 'json-deep-copy'
 import isValidPath from '../../common/is-valid-path'
+import normalizeRemotePath from '../../common/normalize-remote-path'
 import { LoadingOutlined, ReloadOutlined } from '@ant-design/icons'
 import * as owner from './owner-list'
 import AddressBar from './address-bar'
@@ -292,6 +293,7 @@ export default class Sftp extends Component {
       if (!path && this.sftp) {
         path = await this.getPwd(this.props.tab.username)
       }
+      path = normalizeRemotePath(path)
     } else {
       path = this.getLocalHome()
     }
@@ -762,7 +764,7 @@ export default class Sftp extends Component {
 
       if (!remotePath) {
         if (startDirectory) {
-          remotePath = startDirectory
+          remotePath = normalizeRemotePath(startDirectory)
         } else {
           remotePath = await this.getPwd(username)
         }
@@ -970,6 +972,31 @@ export default class Sftp extends Component {
     })
   }
 
+  handleUploadFromBrowser = () => {
+    const input = document.createElement('input')
+    input.type = 'file'
+    input.multiple = true
+    input.onchange = async () => {
+      const files = input.files
+      if (!files || !files.length) return
+      const { localPath } = this.state
+      for (const file of files) {
+        const formData = new FormData()
+        formData.append('file', file)
+        formData.append('path', localPath)
+        await window.fetch('/api/upload', {
+          method: 'POST',
+          body: formData,
+          headers: {
+            token: window.store?.config.tokenElecterm
+          }
+        })
+      }
+      this.localList()
+    }
+    input.click()
+  }
+
   parsePath = async (type, pth) => {
     const reg = /^%([^%]+)%/
     if (!reg.test(pth)) {
@@ -995,7 +1022,10 @@ export default class Sftp extends Component {
     const n = `${type}Path`
     const nt = n + 'Temp'
     const oldPath = this.state[type + 'Path']
-    const np = await this.parsePath(type, this.state[nt])
+    let np = await this.parsePath(type, this.state[nt])
+    if (type === typeMap.remote) {
+      np = normalizeRemotePath(np)
+    }
     if (!isValidPath(np)) {
       return notification.warning({
         message: 'path not valid'
@@ -1003,6 +1033,7 @@ export default class Sftp extends Component {
     }
     this.setState({
       [n]: np,
+      [nt]: np,
       [`${type}Keyword`]: ''
     }, () => this[`${type}List`](undefined, undefined, oldPath))
   }
@@ -1010,7 +1041,10 @@ export default class Sftp extends Component {
   goParent = (type) => {
     const n = `${type}Path`
     const p = this.state[n]
-    const np = resolve(p, '..')
+    let np = resolve(p, '..')
+    if (type === typeMap.remote) {
+      np = normalizeRemotePath(np)
+    }
     const op = this.state[n]
     if (np !== p) {
       this.setState({
@@ -1218,6 +1252,7 @@ export default class Sftp extends Component {
     const addrProps = {
       host,
       type,
+      handleUploadFromBrowser: this.handleUploadFromBrowser,
       ...pick(
         this,
         [

package/client/components/shortcuts/shortcut-handler.js

@@ -82,6 +82,7 @@ export function handleTerminalSelectionReplace (event, ctx) {
   }
 
   ctx.term.clearSelection()
+  ctx.term.scrollToBottom()
   return true
 }
 
@@ -167,6 +168,7 @@ export function shortcutExtend (Cls) {
       const altDelDelKey = delKey === 8 ? 127 : 8
       const char = String.fromCharCode(shiftKey ? delKey : altDelDelKey)
       this.socket.send(char)
+      this.term.scrollToBottom()
       return false
     } else if (
       this.term &&
@@ -193,6 +195,11 @@ export function shortcutExtend (Cls) {
         this.trzszClient.cancel()
         return false
       }
+      // Cancel xmodem transfer if active
+      if (this.xmodemClient && this.xmodemClient.isActive) {
+        this.xmodemClient.cancel()
+        return false
+      }
     }
 
     let codeName

package/client/components/sidebar/history.jsx

@@ -38,6 +38,21 @@ export default auto(function HistoryPanel (props) {
     store.clearHistory()
   }
   const e = window.translate
+  function renderHeader () {
+    if (!arr.length) {
+      return null
+    }
+    return (
+      <div className='history-header pd2x pd2b'>
+        <Switch
+          {...switchProps}
+        />
+        <UnorderedListOutlined
+          {...clearIconProps}
+        />
+      </div>
+    )
+  }
   const switchProps = {
     checkedChildren: e('sortByFrequency'),
     unCheckedChildren: e('sortByFrequency'),
@@ -54,14 +69,7 @@ export default auto(function HistoryPanel (props) {
     <div
       className='sidebar-panel-history'
     >
-      <div className='history-header pd2x pd2b'>
-        <Switch
-          {...switchProps}
-        />
-        <UnorderedListOutlined
-          {...clearIconProps}
-        />
-      </div>
+      {renderHeader()}
       <div className='history-body'>
         {
           arr.map((item, i) => {

package/client/components/sys-menu/icons-map.jsx

@@ -24,7 +24,11 @@ import {
   LockOutlined,
   ReloadOutlined,
   FileZipOutlined,
-  AppstoreOutlined
+  AppstoreOutlined,
+  SaveOutlined,
+  PlayCircleFilled,
+  StopOutlined,
+  DownloadOutlined
 } from '@ant-design/icons'
 import IconHolder from './icon-holder'
 
@@ -52,5 +56,9 @@ export default {
   LockOutlined,
   ReloadOutlined,
   FileZipOutlined,
-  AppstoreOutlined
+  AppstoreOutlined,
+  SaveOutlined,
+  PlayCircleFilled,
+  StopOutlined,
+  DownloadOutlined
 }

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

@@ -96,7 +96,7 @@ export default class AttachAddonCustom {
     if (typeof ev.data === 'string') {
       try {
         const msg = JSON.parse(ev.data)
-        if (msg.action === 'zmodem-event' || msg.action === 'trzsz-event') {
+        if (msg.action === 'zmodem-event' || msg.action === 'trzsz-event' || msg.action === 'xmodem-event') {
           return
         }
       } catch (e) {}

package/client/components/terminal/drop-file-modal.jsx

@@ -4,11 +4,62 @@ import Modal from '../common/modal'
 const e = window.translate
 
 export class DropFileModal extends Component {
+  renderSerialFooter () {
+    const { onSelect } = this.props
+    return (
+      <>
+        <button
+          type='button'
+          className='custom-modal-ok-btn'
+          onClick={() => onSelect('xmodem')}
+        >
+          XMODEM
+        </button>
+        <button
+          type='button'
+          className='custom-modal-cancel-btn'
+          onClick={() => onSelect('inputOnly')}
+        >
+          {e('inputOnly')}
+        </button>
+      </>
+    )
+  }
+
+  renderSshFooter () {
+    const { onSelect } = this.props
+    return (
+      <>
+        <button
+          type='button'
+          className='custom-modal-ok-btn'
+          onClick={() => onSelect('trz')}
+        >
+          trz
+        </button>
+        <button
+          type='button'
+          className='custom-modal-cancel-btn'
+          onClick={() => onSelect('rz')}
+        >
+          rz
+        </button>
+        <button
+          type='button'
+          className='custom-modal-cancel-btn'
+          onClick={() => onSelect('inputOnly')}
+        >
+          {e('inputOnly')}
+        </button>
+      </>
+    )
+  }
+
   render () {
     const {
       visible,
       files,
-      onSelect,
+      isSerial,
       onCancel
     } = this.props
 
@@ -23,27 +74,7 @@ export class DropFileModal extends Component {
         onCancel={onCancel}
         footer={
           <div className='custom-modal-footer-buttons'>
-            <button
-              type='button'
-              className='custom-modal-ok-btn'
-              onClick={() => onSelect('trz')}
-            >
-              trz
-            </button>
-            <button
-              type='button'
-              className='custom-modal-cancel-btn'
-              onClick={() => onSelect('rz')}
-            >
-              rz
-            </button>
-            <button
-              type='button'
-              className='custom-modal-cancel-btn'
-              onClick={() => onSelect('inputOnly')}
-            >
-              {e('inputOnly')}
-            </button>
+            {isSerial ? this.renderSerialFooter() : this.renderSshFooter()}
           </div>
         }
         width={400}

package/client/components/terminal/terminal-apis.js

@@ -49,3 +49,12 @@ export function setTerminalLogPath (pid, logPath) {
     action: 'set-terminal-log-path'
   })
 }
+
+export function startTerminalLogFile (pid, logFilePath, addTimeStampToTermLog) {
+  return fetch({
+    pid,
+    logFilePath,
+    addTimeStampToTermLog,
+    action: 'start-terminal-log-file'
+  })
+}