@electerm/electerm-react 1.80.18 → 1.90.8

package/client/components/terminal-info/base.jsx

@@ -50,12 +50,10 @@ export default class TerminalInfoBase extends Component {
   handleToggleTimestamp = () => {
     const { saveTerminalLogToFile, addTimeStampToTermLog } = this.state
     const {
-      pid,
-      sessionId
+      pid
     } = this.props
     toggleTerminalLogTimestamp(
-      pid,
-      sessionId
+      pid
     )
     const nv = !addTimeStampToTermLog
     this.setState({
@@ -80,12 +78,10 @@ export default class TerminalInfoBase extends Component {
   handleToggle = () => {
     const { saveTerminalLogToFile, addTimeStampToTermLog } = this.state
     const {
-      pid,
-      sessionId
+      pid
     } = this.props
     toggleTerminalLog(
-      pid,
-      sessionId
+      pid
     )
     const nv = !saveTerminalLogToFile
     this.setState({

package/client/components/terminal-info/run-cmd.jsx

@@ -148,12 +148,11 @@ function formatNetwork (traffic, ips) {
 
 export async function runCmds (props, cmds) {
   const {
-    pid,
-    sessionId
+    pid
   } = props
   const ress = []
   for (const cmd of cmds) {
-    const res = await runCmd(pid, sessionId, cmd)
+    const res = await runCmd(pid, cmd)
     ress.push(res || '')
   }
   return ress

package/client/components/terminal-info/terminal-info.jsx

@@ -30,11 +30,10 @@ export default class TerminalInfoContent extends PureComponent {
 
   killProcess = async (id) => {
     const {
-      pid,
-      sessionId
+      pid
     } = this.props
     const cmd = `kill ${id}`
-    runCmd(pid, sessionId, cmd)
+    runCmd(pid, cmd)
   }
 
   render () {

package/client/components/theme/theme-list-item.jsx

@@ -8,7 +8,7 @@ import {
   SunOutlined,
   MoonOutlined
 } from '@ant-design/icons'
-import { Tooltip, Tag } from 'antd'
+import { Tag } from 'antd'
 import classnames from 'classnames'
 import { defaultTheme } from '../../common/constants'
 import highlight from '../common/highlight'
@@ -26,41 +26,24 @@ export default function ThemeListItem (props) {
   const { store } = window
 
   function handleClickApply () {
+    delete window.originalTheme
     store.setTheme(item.id)
   }
 
-  function renderPreview () {
-    const {
-      main,
-      text
-    } = item.uiThemeConfig
-    const arr = [
-      'error',
-      'success',
-      'warn',
-      'info',
-      'primary'
-    ]
-    return (
-      <div
-        className='theme-preview pd2'
-        style={{ background: main, color: text }}
-      >
-        {
-          arr.map(k => {
-            return (
-              <Tag
-                color={item.uiThemeConfig[k]}
-                key={k}
-                className='mg1l mg1b'
-              >
-                {e(k)}
-              </Tag>
-            )
-          })
-        }
-      </div>
-    )
+  function handleMouseEnter () {
+    // Store current theme ID before changing
+    const currentTheme = window.store.config.theme
+    window.originalTheme = currentTheme
+    // Apply the hovered theme
+    store.setTheme(item.id)
+  }
+
+  function handleMouseLeave () {
+    if (!window.originalTheme) return
+    // Restore the original theme
+    store.setTheme(window.originalTheme)
+    // Clean up
+    delete window.originalTheme
   }
 
   function renderApplyBtn () {
@@ -68,15 +51,12 @@ export default function ThemeListItem (props) {
       return null
     }
     return (
-      <Tooltip
-        title={renderPreview()}
-        placement='topLeft'
-      >
-        <CheckCircleOutlined
-          className='pointer list-item-apply'
-          onClick={handleClickApply}
-        />
-      </Tooltip>
+      <CheckCircleOutlined
+        className='pointer list-item-apply'
+        onClick={handleClickApply}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      />
     )
   }
 

package/client/components/theme/theme-list.jsx

@@ -3,12 +3,15 @@
  */
 
 import List from '../setting-panel/list'
-import { LoadingOutlined } from '@ant-design/icons'
+import { LoadingOutlined, CheckCircleOutlined } from '@ant-design/icons'
 import { pick } from 'lodash-es'
 import { Pagination } from 'antd'
 import ThemeListItem from './theme-list-item'
+import { defaultTheme } from '../../common/constants'
 import './terminal-theme-list.styl'
 
+const e = window.translate
+
 export default class ThemeList extends List {
   handlePager = page => {
     this.setState({ page })
@@ -37,6 +40,24 @@ export default class ThemeList extends List {
     )
   }
 
+  renderCurrentTheme () {
+    const { theme, list } = this.props
+    const item = list.find(d => d.id === theme)
+    if (!item) {
+      return null
+    }
+    const { name, id } = item
+    const title = id === defaultTheme.id
+      ? e(id)
+      : name
+    return (
+      <div className='pd2'>
+        <CheckCircleOutlined className='mg1r' />
+        {title}
+      </div>
+    )
+  }
+
   filter = list => {
     const { keyword, ready } = this.state
     return keyword
@@ -69,6 +90,7 @@ export default class ThemeList extends List {
         {this.renderTransport ? this.renderTransport() : null}
         {this.renderLabels ? this.renderLabels() : null}
         {this.renderSearch()}
+        {this.renderCurrentTheme()}
         <div className='item-list-wrap' style={listStyle}>
           {
             list.map(this.renderItem)

package/client/components/tree-list/bookmark-toolbar.jsx

@@ -1,8 +1,8 @@
 import {
   BookOutlined,
   FolderOutlined,
-  UploadOutlined,
-  DownloadOutlined,
+  ImportOutlined,
+  ExportOutlined,
   CodeOutlined,
   MenuOutlined,
   EditOutlined
@@ -13,6 +13,7 @@ import time from '../../common/time'
 import { uniq } from 'lodash-es'
 import { fixBookmarks } from '../../common/db-fix'
 import download from '../../common/download'
+import delay from '../../common/wait'
 import { action } from 'manate'
 
 const e = window.translate
@@ -27,54 +28,65 @@ export default function BookmarkToolbar (props) {
     bookmarkGroups,
     bookmarks
   } = props
-  const beforeUpload = action(async (file) => {
+  const upload = action(async (file) => {
     const { store } = window
     const txt = await window.fs.readFile(file.path)
-    try {
-      const content = JSON.parse(txt)
-      const {
-        bookmarkGroups: bookmarkGroups1,
-        bookmarks: bookmarks1
-      } = content
-      const bookmarkGroups0 = copy(bookmarkGroups)
-      const bookmarks0 = copy(bookmarks)
 
-      // Using Map instead of reduce
-      const bmTree = new Map(
-        bookmarks0.map(bookmark => [bookmark.id, bookmark])
-      )
-      const bmgTree = new Map(
-        bookmarkGroups0.map(group => [group.id, group])
-      )
+    const content = JSON.parse(txt)
+    const {
+      bookmarkGroups: bookmarkGroups1,
+      bookmarks: bookmarks1
+    } = content
+    const bookmarkGroups0 = copy(bookmarkGroups)
+    const bookmarks0 = copy(bookmarks)
 
-      const fixed = fixBookmarks(bookmarks1)
+    // Using Map instead of reduce
+    const bmTree = new Map(
+      bookmarks0.map(bookmark => [bookmark.id, bookmark])
+    )
+    const bmgTree = new Map(
+      bookmarkGroups0.map(group => [group.id, group])
+    )
 
-      fixed.forEach(bg => {
-        if (!bmTree.has(bg.id)) {
-          store.bookmarks.push(bg)
-        }
-      })
+    const fixed = fixBookmarks(bookmarks1)
 
-      bookmarkGroups1.forEach(bg => {
-        if (!bmgTree.has(bg.id)) {
-          store.bookmarkGroups.push(bg)
-        } else {
-          const bg1 = store.bookmarkGroups.find(
-            b => b.id === bg.id
-          )
-          bg1.bookmarkIds = uniq(
-            [
-              ...bg1.bookmarkIds,
-              ...bg.bookmarkIds
-            ]
-          )
-        }
-      })
-    } catch (e) {
-      store.onError(e)
-    }
+    fixed.forEach(bg => {
+      if (!bmTree.has(bg.id)) {
+        store.bookmarks.push(bg)
+      }
+    })
+
+    bookmarkGroups1.forEach(bg => {
+      if (!bmgTree.has(bg.id)) {
+        store.bookmarkGroups.push(bg)
+      } else {
+        const bg1 = store.bookmarkGroups.find(
+          b => b.id === bg.id
+        )
+        bg1.bookmarkIds = uniq(
+          [
+            ...bg1.bookmarkIds,
+            ...bg.bookmarkIds
+          ]
+        )
+      }
+    })
     return false
   })
+  const beforeUpload = async (file) => {
+    const names = [
+      'bookmarks',
+      'bookmarkGroups'
+    ]
+    for (const name of names) {
+      window[`watch${name}`].stop()
+    }
+    upload(file)
+    await delay(1000)
+    for (const name of names) {
+      window[`watch${name}`].start()
+    }
+  }
 
   const handleDownload = () => {
     const txt = JSON.stringify({
@@ -108,12 +120,12 @@ export default function BookmarkToolbar (props) {
     {
       label: e('import'),
       onClick: onImport,
-      icon: <UploadOutlined />
+      icon: <ImportOutlined />
     },
     {
       label: e('export'),
       onClick: onExport,
-      icon: <DownloadOutlined />
+      icon: <ExportOutlined />
     },
     {
       label: e('loadSshConfigs'),
@@ -146,7 +158,7 @@ export default function BookmarkToolbar (props) {
               title={e('edit')}
             />
             <Button
-              icon={<DownloadOutlined />}
+              icon={<ExportOutlined />}
               onClick={handleDownload}
               title={e('export')}
               className='download-bookmark-icon'
@@ -157,7 +169,7 @@ export default function BookmarkToolbar (props) {
               className='upload-bookmark-icon'
             >
               <Button
-                icon={<UploadOutlined />}
+                icon={<ImportOutlined />}
                 title={e('importFromFile')}
               />
             </Upload>

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

@@ -73,7 +73,7 @@ export default class VncSession extends RdpSession {
       tokenElecterm,
       server = ''
     } = config
-    const { sessionId, id } = this.props
+    const { id } = this.props
     const tab = window.store.applyProfile(deepCopy(this.props.tab || {}))
     const {
       type,
@@ -85,7 +85,6 @@ export default class VncSession extends RdpSession {
     } = tab
     const opts = clone({
       term: terminalType || config.terminalType,
-      sessionId,
       tabId: id,
       srcTabId: tab.id,
       termType: type,
@@ -111,7 +110,7 @@ export default class VncSession extends RdpSession {
       : `${host}:${port}`
     const pre = server.startsWith('https') ? 'wss' : 'ws'
     const { width, height } = this.state
-    const wsUrl = `${pre}://${hs}/vnc/${pid}?sessionId=${sessionId}&token=${tokenElecterm}&width=${width}&height=${height}`
+    const wsUrl = `${pre}://${hs}/vnc/${pid}?token=${tokenElecterm}&width=${width}&height=${height}`
     const vncOpts = {
       scaleViewport,
       viewOnly,

package/client/entry/worker.js

@@ -7,13 +7,12 @@ self.insts = {}
 function createWs (
   type,
   id,
-  sessionId = '',
   sftpId = '',
   config
 ) {
   // init gloabl ws
   const { host, port, tokenElecterm } = config
-  const wsUrl = `ws://${host}:${port}/${type}/${id}?sessionId=${sessionId}&sftpId=${sftpId}&token=${tokenElecterm}`
+  const wsUrl = `ws://${host}:${port}/${type}/${id}?&sftpId=${sftpId}&token=${tokenElecterm}`
   const ws = new WebSocket(wsUrl)
   ws.s = msg => {
     try {

package/client/store/item.js

@@ -66,7 +66,7 @@ export default Store => {
       return deepCopy([
         ...store.getTerminalThemes(),
         ...store.itermThemes
-      ]).sort(window.store.sortTheme)
+      ])
     }
     return deepCopy(store.getItems(type))
   }

package/client/store/tab.js

@@ -511,7 +511,9 @@ export default Store => {
 
   Store.prototype.updateBatchInputSelectedTabIds = function () {
     const { store } = window
-    store._batchInputSelectedTabIds = new Set([store.activeTabId])
+    if (!store._batchInputSelectedTabIds.has(store.activeTabId)) {
+      store._batchInputSelectedTabIds = new Set([store.activeTabId])
+    }
   }
 
   Store.prototype.onSelectBatchInputSelectedTabId = action(function (id) {
@@ -565,15 +567,15 @@ export default Store => {
     }
   }
 
-  Store.prototype.remoteList = function (sessionId) {
-    const sftp = refs.get('sftp-' + sessionId)
+  Store.prototype.remoteList = function (tabId) {
+    const sftp = refs.get('sftp-' + tabId)
     if (sftp) {
       sftp.remoteListDebounce()
     }
   }
 
-  Store.prototype.localList = function (sessionId) {
-    const sftp = refs.get('sftp-' + sessionId)
+  Store.prototype.localList = function (tabId) {
+    const sftp = refs.get('sftp-' + tabId)
     if (sftp) {
       sftp.localListDebounce()
     }

package/client/store/ui-theme.js

@@ -37,12 +37,12 @@ export default Store => {
     return window.pre.runGlobalAsync('toCss', stylus)
   }
 
-  Store.prototype.sortTheme = function (a, b) {
-    const { theme } = window.store.config
-    const ax = a.id === theme ? -1 : 1
-    const bx = b.id === theme ? -1 : 1
-    return ax - bx
-  }
+  // Store.prototype.sortTheme = function (a, b) {
+  //   const theme = window.originalTheme || window.store.config.theme
+  //   const ax = a.id === theme ? -1 : 1
+  //   const bx = b.id === theme ? -1 : 1
+  //   return ax > bx ? 1 : -1
+  // }
 
   Store.prototype.getUiThemeConfig = function () {
     const { store } = window

package/client/store/watch.js

@@ -39,7 +39,7 @@ export default store => {
   // })
 
   for (const name of dbNamesForWatch) {
-    autoRun(async () => {
+    window[`watch${name}`] = autoRun(async () => {
       const old = refsStatic.get('oldState-' + name)
       const n = store.getItems(name)
       const { updated, added, removed } = dataCompare(
@@ -70,7 +70,8 @@ export default store => {
         await store.uploadSettingAll()
       }
       return store[name]
-    }).start()
+    })
+    window[`watch${name}`].start()
   }
 
   autoRun(async () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electerm/electerm-react",
-  "version": "1.80.18",
+  "version": "1.90.8",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",