@electerm/electerm-react 3.3.8 → 3.6.6

package/client/common/constants.js

@@ -229,11 +229,6 @@ export const rendererTypes = {
   canvas: 'canvas',
   webGL: 'webGL'
 }
-export const mirrors = {
-  'download-electerm': 'download-electerm',
-  github: 'github',
-  sourceforge: 'sourceforge'
-}
 export const downloadUpgradeTimeout = 20000
 export const expandedKeysLsKey = 'expanded-keys'
 export const resolutionsLsKey = 'custom-resolution-key'

package/client/common/fs.js

@@ -16,6 +16,90 @@ const fs = fsFunctions.reduce((prev, func) => {
   return prev
 }, {})
 
+// Encoding function
+fs.encodeUint8Array = (uint8Array) => {
+  let str = ''
+  const len = uint8Array.byteLength
+
+  for (let i = 0; i < len; i++) {
+    str += String.fromCharCode(uint8Array[i])
+  }
+
+  return btoa(str)
+}
+
+// Decoding function
+fs.decodeBase64String = (base64String) => {
+  const str = atob(base64String)
+  const len = str.length
+
+  const uint8Array = new Uint8Array(len)
+
+  for (let i = 0; i < len; i++) {
+    uint8Array[i] = str.charCodeAt(i)
+  }
+
+  return uint8Array
+}
+
+Object.assign(fs, {
+  stat: (path, cb) => {
+    window.fs.statCustom(path)
+      .catch(err => cb(err))
+      .then(obj => {
+        obj.isDirectory = () => obj.isD
+        obj.isFile = () => obj.isF
+        cb(undefined, obj)
+      })
+  },
+  access: (...args) => {
+    const cb = args.pop()
+    window.fs.access(...args)
+      .then((data) => cb(undefined, data))
+      .catch((err) => cb(err))
+  },
+  open: (...args) => {
+    const cb = args.pop()
+    window.fs.openCustom(...args)
+      .then((data) => cb(undefined, data))
+      .catch((err) => cb(err))
+  },
+  read: (p1, arr, ...args) => {
+    const cb = args.pop()
+    window.fs.readCustom(
+      p1,
+      arr.length,
+      ...args
+    )
+      .then((data) => {
+        const { n, newArr } = data
+        const newArr1 = window.fs.decodeBase64String(newArr)
+        cb(undefined, n, newArr1)
+      })
+      .catch(err => cb(err))
+  },
+  close: (fd, cb) => {
+    window.fs.closeCustom(fd)
+      .then((data) => cb(undefined, data))
+      .catch((err) => cb(err))
+  },
+  readdir: (p, cb) => {
+    window.fs.readdir(p)
+      .then((data) => cb(undefined, data))
+      .catch((err) => cb(err))
+  },
+  write: (p1, buf, cb) => {
+    window.fs.writeCustom(p1, window.fs.encodeUint8Array(buf))
+      .then((data) => cb(undefined, data))
+      .catch((err) => cb(err))
+  },
+  realpath: (p, cb) => {
+    window.fs.realpath(p)
+      .then((data) => cb(undefined, data))
+      .catch((err) => cb(err))
+  }
+})
+
 window.fs = fs
 
 export default fs

package/client/common/ws.js

@@ -4,7 +4,6 @@
 
 import generate from './uid'
 import wait from './wait'
-import copy from 'json-deep-copy'
 import { pick } from 'lodash-es'
 
 const onces = {}
@@ -32,7 +31,13 @@ class Ws {
   }
 
   async once (func, id) {
+    const maxWait = 300
+    let waited = 0
     while (this.closed) {
+      if (++waited >= maxWait) {
+        console.warn('ws once timeout waiting for reconnection', id)
+        return
+      }
       await wait(100)
     }
     this.onceIds.push(id)
@@ -83,7 +88,7 @@ class Ws {
     if (this.eid) {
       delete persists[this.eid]
     }
-    const ids = copy(this.onceIds)
+    const ids = [...this.onceIds]
     ids.forEach(k => {
       delete onces[k]
     })
@@ -115,10 +120,16 @@ function onEvent (e) {
     action,
     persist
   } = e.data
-  if (wss[id]) {
-    if (action === 'close') {
-      wss[id].close && wss[id].close()
+  if (wss[id] && action === 'close') {
+    const ws = wss[id]
+    ws.onclose()
+    if (ws.persist) {
+      ws.closed = true
+    } else {
+      ws.clearOnces()
+      delete wss[id]
     }
+    return
   }
   if (persists[id]) {
     persists[id].resolve(data)

package/client/components/ai/ai-history.jsx

@@ -3,12 +3,10 @@
  */
 import { useState, useEffect } from 'react'
 import { Space } from 'antd'
-import { HistoryOutlined } from '@ant-design/icons'
 import { safeGetItemJSON, safeSetItemJSON } from '../../common/safe-local-storage'
 import AiHistoryItem from './ai-history-item'
 
 const MAX_HISTORY = 20
-const e = window.translate
 
 export function getHistory (storageKey) {
   return safeGetItemJSON(storageKey, [])
@@ -81,10 +79,6 @@ export default function AiHistory (props) {
 
   return (
     <div className='ai-bookmark-history pd1b'>
-      <div className='pd1b text-muted'>
-        <HistoryOutlined className='mg1r' />
-        <span className='mg1r'>{e('history') || 'History'}:</span>
-      </div>
       <Space size={[8, 8]} wrap>
         {history.map((item, index) => {
           const keyStr = typeof item === 'string' ? item : JSON.stringify(item)

package/client/components/batch-op/batch-op-alert.jsx

@@ -1,34 +1,15 @@
-import React, { useState } from 'react'
-import { Alert, Button } from 'antd'
+import React from 'react'
+import { Alert } from 'antd'
 import ExternalLink from '../common/external-link'
 
 const batchOpWikiLink = 'https://github.com/electerm/electerm/wiki/batch-operation'
 
 export default function BatchOpAlert () {
-  const [expanded, setExpanded] = useState(false)
-
   const description = (
-    <div>
-      <div>
-        <p>Actions: <code>connect, command, sftp_upload, sftp_download</code></p>
-        <p><ExternalLink to={batchOpWikiLink}>{batchOpWikiLink}</ExternalLink></p>
-      </div>
-      {expanded && (
-        <div className='mg1t'>
-          <p><strong>connect</strong> params: <code>host, port, username, authType, password, privateKey, passphrase, certificate, profile, enableSftp, enableSsh, useSshAgent, sshAgent, term, encode, envLang, setEnv, startDirectoryRemote, startDirectoryLocal, proxy, x11, displayRaw, sshTunnels, connectionHoppings</code></p>
-          <p><strong>command</strong> params: <code>command</code></p>
-          <p><strong>sftp_upload</strong> params: <code>localPath, remotePath</code></p>
-          <p><strong>sftp_download</strong> params: <code>remotePath, localPath</code></p>
-        </div>
-      )}
-      <Button
-        size='small'
-        className='mg1y'
-        onClick={() => setExpanded(v => !v)}
-      >
-        {expanded ? 'Show less' : 'Show more'}
-      </Button>
-    </div>
+    <>
+      <p>Actions: <code>connect, command, sftp_upload, sftp_download</code></p>
+      <div><ExternalLink to={batchOpWikiLink}>{batchOpWikiLink}</ExternalLink></div>
+    </>
   )
 
   return (

package/client/components/batch-op/batch-op-editor.jsx

@@ -15,7 +15,9 @@ import message from '../common/message'
 import { refsStatic } from '../common/ref'
 import generate from '../../common/uid'
 import fs from '../../common/fs'
+import { safeGetItem, safeSetItem } from '../../common/safe-local-storage'
 
+const batchOpEditorKey = 'batch-op-editor-content'
 const workflowExample = `[
   {
     "name": "Connect SSH",
@@ -80,11 +82,9 @@ const workflowExample = `[
 ]`
 
 function getDefaultValue (widget) {
-  if (widget?.info?.configs) {
-    const config = widget.info.configs.find(c => c.name === 'workflowJson')
-    if (config?.default) return config.default
-  }
-  return ''
+  const saved = safeGetItem(batchOpEditorKey)
+  if (saved) return saved
+  return workflowExample
 }
 
 export default function BatchOpEditor ({ widget }) {
@@ -96,6 +96,10 @@ export default function BatchOpEditor ({ widget }) {
     if (v) setValue(v)
   }, [widget?.id])
 
+  useEffect(() => {
+    safeSetItem(batchOpEditorKey, value)
+  }, [value])
+
   const handleExecute = async () => {
     if (!value || executing) return
     setExecuting(true)

package/client/components/bookmark-form/common/fields.jsx

@@ -22,6 +22,7 @@ import SshHostSelector from './ssh-host-selector.jsx'
 import SshAuthTypeSelector from './ssh-auth-type-selector.jsx'
 import SshAuthSelector from './ssh-auth-selector.jsx'
 import CategorySelect from './category-select.jsx'
+import ExternalLink from '../../common/external-link.jsx'
 const Fragment = React.Fragment
 const FormItem = Form.Item
 
@@ -115,6 +116,20 @@ export function renderFormItem (item, formItemLayout, form, ctxProps, index) {
 
   // Render complex/custom components directly (no extra wrapper component)
   switch (type) {
+    case 'wiki':
+      return (
+        <Alert
+          key={name}
+          type='warning'
+          className='mg2b'
+          showIcon
+          description={
+            <>
+              <ExternalLink to={item.link}>{item.link}</ExternalLink>
+            </>
+          }
+        />
+      )
     case 'alert':
       return <Alert key={name} {...item.props} />
     case 'info':

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

@@ -21,6 +21,11 @@ const rdpConfig = {
       key: 'auth',
       label: e('auth'),
       fields: [
+        {
+          type: 'wiki',
+          name: 'rdp-limitation-warning',
+          link: 'https://github.com/electerm/electerm/wiki/RDP-limitation'
+        },
         commonFields.category,
         commonFields.colorTitle,
         { type: 'input', name: 'host', label: () => e('host'), rules: [{ required: true, message: e('host') + ' required' }] },

package/client/components/main/upgrade.jsx

@@ -1,6 +1,6 @@
 import { PureComponent } from 'react'
 import { CloseOutlined, MinusSquareOutlined, UpCircleOutlined } from '@ant-design/icons'
-import { Button } from 'antd'
+import { Button, Select, Space } from 'antd'
 import { getLatestReleaseInfo, getLatestReleaseVersion } from '../../common/update-check'
 import upgrade from '../../common/upgrade'
 import compare from '../../common/version-compare'
@@ -9,8 +9,7 @@ import {
   isMac,
   isWin,
   packInfo,
-  downloadUpgradeTimeout,
-  mirrors
+  downloadUpgradeTimeout
 } from '../../common/constants'
 import { checkSkipSrc } from '../../common/check-skip-src'
 import { debounce } from 'lodash-es'
@@ -18,6 +17,7 @@ import newTerm from '../../common/new-terminal'
 import Markdown from '../common/markdown'
 import downloadMirrors from '../../common/download-mirrors'
 import { refsStatic } from '../common/ref'
+import message from '../common/message'
 import './upgrade.styl'
 
 const e = window.translate
@@ -25,10 +25,15 @@ const {
   homepage
 } = packInfo
 
+const downloadMirrorList = [
+  'github',
+  'gh-proxy',
+  'sourceforge'
+]
+
 export default class Upgrade extends PureComponent {
   state = {
-    showCount: 0,
-    mirror: mirrors.github
+    mirror: downloadMirrorList[1]
   }
 
   downloadTimer = null
@@ -39,15 +44,23 @@ export default class Upgrade extends PureComponent {
     }
     this.id = 'upgrade'
     refsStatic.add(this.id, this)
+    this.cleanupTimer = setInterval(() => {
+      const { noUpdateMessageExpires } = window.store.upgradeInfo
+      if (noUpdateMessageExpires && Date.now() > noUpdateMessageExpires) {
+        window.store.upgradeInfo.noUpdateMessage = ''
+        window.store.upgradeInfo.noUpdateMessageExpires = 0
+      }
+    }, 1000)
   }
 
-  appUpdateCheck = (noSkip) => {
-    this.setState(old => {
-      return {
-        showCount: old.showCount + 1
-      }
-    })
-    this.getLatestRelease(noSkip)
+  componentWillUnmount () {
+    if (this.cleanupTimer) {
+      clearInterval(this.cleanupTimer)
+    }
+  }
+
+  appUpdateCheck = (isManual) => {
+    this.getLatestRelease(isManual)
   }
 
   changeProps = (update) => {
@@ -67,6 +80,12 @@ export default class Upgrade extends PureComponent {
     window.store.upgradeInfo = {}
   }
 
+  handleMirrorChange = (mirror) => {
+    this.setState({
+      mirror
+    })
+  }
+
   onData = (upgradePercent) => {
     clearTimeout(this.downloadTimer)
     if (upgradePercent >= 100) {
@@ -93,17 +112,8 @@ export default class Upgrade extends PureComponent {
   }
 
   timeout = () => {
-    const { mirror } = this.state
     this.cancel()
-    const next = mirror !== mirrors.sourceforge
-      ? this.doUpgrade
-      : undefined
-    const nextMirror = mirror === mirrors['download-electerm']
-      ? mirrors.sourceforge
-      : mirrors['download-electerm']
-    this.setState({
-      mirror: nextMirror
-    }, next)
+    message.error('Download timeout, please try again')
   }
 
   onEnd = () => {
@@ -146,7 +156,7 @@ export default class Upgrade extends PureComponent {
     this.handleClose()
   }
 
-  getLatestRelease = async (noSkipVersion = false) => {
+  getLatestRelease = async (isManual = false) => {
     const { installSrc } = this.props
     if (checkSkipSrc(installSrc)) {
       return
@@ -167,10 +177,19 @@ export default class Upgrade extends PureComponent {
     const { skipVersion = 'v0.0.0' } = this.props
     const currentVer = 'v' + window.et.version.split('-')[0]
     const latestVer = releaseVer.tag_name
-    if (!noSkipVersion && compare(skipVersion, latestVer) >= 0) {
+    if (!isManual && compare(skipVersion, latestVer) >= 0) {
       return
     }
     const shouldUpgrade = compare(currentVer, latestVer) < 0
+    if (!shouldUpgrade) {
+      if (isManual) {
+        this.changeProps({
+          noUpdateMessage: e('noNeed'),
+          noUpdateMessageExpires: Date.now() + 3000
+        })
+      }
+      return
+    }
     const canAutoUpgrade = installSrc || isWin || isMac
     let releaseInfo
     if (canAutoUpgrade) {
@@ -208,28 +227,6 @@ export default class Upgrade extends PureComponent {
     )
   }
 
-  renderCanNotUpgrade = () => {
-    const {
-      showUpgradeModal
-    } = this.props.upgradeInfo
-    const cls = `animate upgrade-panel${showUpgradeModal ? '' : ' upgrade-panel-hide'}`
-    return (
-      <div className={cls}>
-        <div className='upgrade-panel-title fix'>
-          <span className='fleft'>
-            {e('noNeed')}
-          </span>
-          <span className='fright'>
-            <CloseOutlined className='pointer font16 close-upgrade-panel' onClick={this.handleClose} />
-          </span>
-        </div>
-        <div className='upgrade-panel-body'>
-          {e('noNeedDesc')}
-        </div>
-      </div>
-    )
-  }
-
   renderChangeLog = () => {
     const {
       releaseInfo
@@ -261,38 +258,8 @@ export default class Upgrade extends PureComponent {
     )
   }
 
-  render () {
-    const {
-      showCount
-    } = this.state
-    const { installSrc } = this.props
-    const {
-      remoteVersion,
-      upgrading,
-      checkingRemoteVersion,
-      showUpgradeModal,
-      upgradePercent,
-      shouldUpgrade,
-      releaseInfo,
-      error
-    } = this.props.upgradeInfo
-    if (error) {
-      return this.renderError(error)
-    }
-    if (!shouldUpgrade && showCount < 2) {
-      return null
-    }
-    if (!shouldUpgrade && showCount > 1) {
-      return this.renderCanNotUpgrade()
-    }
-    if (checkingRemoteVersion) {
-      return null
-    }
-    const cls = `animate upgrade-panel${showUpgradeModal ? '' : ' upgrade-panel-hide'}`
-    const func = upgrading
-      ? this.cancel
-      : this.doUpgrade
-    const getLink = (
+  renderLinks = () => {
+    return (
       <div>
         <p>
           {e('manuallyDownloadFrom')}:
@@ -307,7 +274,80 @@ export default class Upgrade extends PureComponent {
         {this.renderChangeLog()}
       </div>
     )
+  }
+
+  renderMirrorSelector = () => {
+    return (
+      <Select
+        value={this.state.mirror}
+        onChange={this.handleMirrorChange}
+        getPopupContainer={() => document.body}
+        size='small'
+        style={{ height: 32 }}
+      >
+        {downloadMirrorList.map((opt) => (
+          <Select.Option key={opt} value={opt}>{opt}</Select.Option>
+        ))}
+      </Select>
+    )
+  }
+
+  renderUpgradeButton = () => {
+    const { upgrading, upgradePercent, checkingRemoteVersion } = this.props.upgradeInfo
+    if (upgrading) {
+      const percent = upgradePercent || 0
+      return (
+        <Button
+          type='primary'
+          icon={<UpCircleOutlined />}
+          loading={checkingRemoteVersion}
+          disabled={checkingRemoteVersion}
+          onClick={() => this.cancel()}
+          className='mg1b'
+        >
+          <span>{`${e('upgrading')}... ${percent}% ${e('cancel')}`}</span>
+        </Button>
+      )
+    }
+    return (
+      <Space.Compact>
+        {this.renderMirrorSelector()}
+        <Button
+          type='primary'
+          icon={<UpCircleOutlined />}
+          loading={checkingRemoteVersion}
+          disabled={checkingRemoteVersion}
+          onClick={() => this.doUpgrade()}
+          className='mg1b'
+        >
+          {e('upgrade')}
+        </Button>
+      </Space.Compact>
+    )
+  }
+
+  renderUpgradeContent = () => {
+    const { installSrc } = this.props
     const skip = checkSkipSrc(installSrc)
+    if (skip) {
+      return this.renderLinks()
+    }
+    return (
+      <div>
+        {this.renderUpgradeButton()}
+        {this.renderSkipVersion()}
+        <div className='pd1t'>
+          {this.renderLinks()}
+        </div>
+      </div>
+    )
+  }
+
+  renderUpgradePanel = () => {
+    const { remoteVersion, releaseInfo, showUpgradeModal } = this.props.upgradeInfo
+    const cls = showUpgradeModal
+      ? 'animate upgrade-panel'
+      : 'animate upgrade-panel upgrade-panel-hide'
     return (
       <div className={cls}>
         <div className='upgrade-panel-title fix'>
@@ -319,34 +359,23 @@ export default class Upgrade extends PureComponent {
           </span>
         </div>
         <div className='upgrade-panel-body'>
-          {
-            !skip
-              ? (
-                <div>
-                  <Button
-                    type='primary'
-                    icon={<UpCircleOutlined />}
-                    loading={checkingRemoteVersion}
-                    disabled={checkingRemoteVersion}
-                    onClick={func}
-                    className='mg1b'
-                  >
-                    {
-                      upgrading
-                        ? <span>{`${e('upgrading')}... ${upgradePercent || 0}% ${e('cancel')}`}</span>
-                        : e('upgrade')
-                    }
-                  </Button>
-                  {this.renderSkipVersion()}
-                  <div className='pd1t'>
-                    {getLink}
-                  </div>
-                </div>
-                )
-              : getLink
-          }
+          {this.renderUpgradeContent()}
         </div>
       </div>
     )
   }
+
+  render () {
+    const { shouldUpgrade, checkingRemoteVersion, error } = this.props.upgradeInfo
+    if (error) {
+      return this.renderError(error)
+    }
+    if (!shouldUpgrade) {
+      return null
+    }
+    if (checkingRemoteVersion) {
+      return null
+    }
+    return this.renderUpgradePanel()
+  }
 }

package/client/components/main/upgrade.styl

@@ -2,7 +2,7 @@
   position fixed
   right 10px
   bottom 10px
-  z-index 9999
+  z-index 888
   background var(--main)
   border-radius 5px
   border 1px solid var(--main-darker)
@@ -22,5 +22,5 @@
 .upgrade-panel-title
   border-bottom 1px solid var(--main-darker)
 .markdown-wrap
-  max-height 40vh
+  max-height 20vh
   overflow-y auto