@electerm/electerm-react 5.1.25 → 5.3.0

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

@@ -9,6 +9,7 @@ import TerminalInfoNetwork from './network'
 import TerminalInfoResource from './resource'
 import TerminalInfoActivities from './activity'
 import TerminalInfoDisk from './disk'
+import TerminalInfoSys from './sys-info'
 import RunCmd from './run-cmd'
 import { runCmd } from '../terminal/terminal-apis'
 import './terminal-info.styl'
@@ -21,7 +22,8 @@ export default class TerminalInfoContent extends PureComponent {
     swap: {},
     activities: [],
     disks: [],
-    network: {}
+    network: {},
+    sysInfo: null
   }
 
   setStateRef = (...args) => {
@@ -44,6 +46,7 @@ export default class TerminalInfoContent extends PureComponent {
     return (
       <>
         <TerminalInfoBase {...props} {...state} />
+        <TerminalInfoSys {...props} {...state} />
         <TerminalInfoUp {...props} {...state} />
         <TerminalInfoResource
           {...props} {...state}

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

@@ -1,4 +1,3 @@
-
 .terminal-info-icon
   color var(--text-dark)
   &:hover
@@ -23,11 +22,27 @@
     display block
 .terminal-info-section
   padding 10px 0
-.terminal-info-act
-.terminal-info-disk
-.terminal-info-network
-  max-height 260px
-  overflow-y scroll
+.terminal-info-sys
+  border-bottom 1px solid var(--main-darker)
+  .terminal-info-sys-rows
+    display flex
+    flex-direction column
+    gap 4px
+  .terminal-info-sys-row
+    display flex
+    gap 8px
+    align-items baseline
+    font-size 12px
+  .terminal-info-sys-key
+    flex none
+    width 80px
+    color var(--text-dark)
+    text-transform capitalize
+  .terminal-info-sys-val
+    flex 1
+    overflow hidden
+    text-overflow ellipsis
+    white-space nowrap
 .activity-item
   max-height 1.6em
   line-height 1.6
@@ -36,4 +51,4 @@
     max-height none
 .info-panel-wrap-pin
   .toggle-info-panel-wrap
-    color var(--success)
+    color var(--success)

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

@@ -10,11 +10,12 @@ import {
 } from '@ant-design/icons'
 import { Button, Space } from 'antd'
 import Upload from '../common/upload'
+import { beforeBookmarkUpload } from './bookmark-upload'
 
 const e = window.translate
 
 export default class BookmarkTransport extends PureComponent {
-  beforeUpload = async (file) => {}
+  beforeUpload = beforeBookmarkUpload
 
   handleDownload = () => {}
 

package/client/components/tree-list/bookmark-upload.js

@@ -8,7 +8,9 @@ import { action } from 'manate'
 import uid from '../../common/uid'
 import time from '../../common/time'
 import { fixBookmarks } from '../../common/db-fix'
-import delay from '../../common/wait'
+import { runImportTask } from '../../common/import-task'
+
+const e = window.translate
 
 function fixBookmarksId (bookmarks) {
   return bookmarks.map(item => {
@@ -21,6 +23,7 @@ function fixBookmarksId (bookmarks) {
     return item
   }).filter(Boolean)
 }
+
 export const bookmarkUpload = action(async (file) => {
   const { store } = window
   const { bookmarks, bookmarkGroups } = store
@@ -58,50 +61,62 @@ export const bookmarkUpload = action(async (file) => {
 
   const fixed = fixBookmarks(bookmarks1)
 
-  fixed.forEach(bg => {
-    if (!bmTree.has(bg.id)) {
-      store.bookmarks.push(bg)
-    }
+  await runImportTask({
+    title: e('import'),
+    batch: 200,
+    stopWatchers: ['bookmarks', 'bookmarkGroups'],
+    steps: [
+      {
+        label: e('bookmarks'),
+        items: fixed,
+        process: (chunk) => {
+          chunk.forEach(bg => {
+            if (!bmTree.has(bg.id)) {
+              store.bookmarks.push(bg)
+            }
+          })
+        }
+      },
+      {
+        label: e('bookmarkCategory'),
+        items: bookmarkGroups1,
+        process: (chunk) => {
+          chunk.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 || [])
+                ]
+              )
+              bg1.bookmarkGroupIds = uniq(
+                [
+                  ...(bg1.bookmarkGroupIds || []),
+                  ...(bg.bookmarkGroupIds || [])
+                ]
+              )
+            }
+          })
+        }
+      },
+      {
+        label: e('bookmarks'),
+        weight: 1,
+        run: () => {
+          store.fixBookmarkGroups()
+        }
+      }
+    ]
   })
 
-  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 || [])
-        ]
-      )
-      bg1.bookmarkGroupIds = uniq(
-        [
-          ...(bg1.bookmarkGroupIds || []),
-          ...(bg.bookmarkGroupIds || [])
-        ]
-      )
-    }
-  })
-
-  store.fixBookmarkGroups()
-
   return false
 })
 
 export async function beforeBookmarkUpload (file) {
-  const names = [
-    'bookmarks',
-    'bookmarkGroups'
-  ]
-  for (const name of names) {
-    window[`watch${name}`].stop()
-  }
-  bookmarkUpload(file)
-  await delay(1000)
-  for (const name of names) {
-    window[`watch${name}`].start()
-  }
+  return bookmarkUpload(file)
 }

package/client/components/tree-list/tree-list-row.jsx

@@ -1,14 +1,20 @@
+import { memo } from 'react'
 import TreeExpander from './tree-expander'
 import TreeListItem from './tree-list-item'
 import TreeItemOp from './tree-item-op'
 import { treeLevelIndent } from './tree-list-layout'
 import createName from '../../common/create-title'
 
-export default function TreeListRow (props) {
+// memoized: VirtualTreeList re-renders every scroll frame and re-invokes
+// renderItem for the whole visible window; without memo each row (including
+// the antd Popconfirm/Tooltip in TreeItemOp) re-renders per frame.
+// `expanded` is a boolean (not the expandedKeys array) because the array is
+// mutated in place, so identity-based memo comparison would miss changes.
+function TreeListRow (props) {
   const {
     row,
     keyword,
-    expandedKeys,
+    expanded,
     activeItemId,
     searchSelectedRowKey,
     staticList,
@@ -34,7 +40,6 @@ export default function TreeListRow (props) {
     item?.bookmarkIds?.length ||
     item?.bookmarkGroupIds?.length
   )
-  const isGroupExpanded = Boolean(keyword) || expandedKeys.includes(item.id)
   const itemProps = {
     item,
     isGroup,
@@ -94,7 +99,7 @@ export default function TreeListRow (props) {
           level={parentId}
           group={item}
           hasChildren={groupHasChildren}
-          shouldOpen={isGroupExpanded}
+          shouldOpen={expanded}
           onExpand={handleExpand}
           onUnExpand={handleUnExpand}
         />
@@ -114,3 +119,5 @@ export default function TreeListRow (props) {
     </div>
   )
 }
+
+export default memo(TreeListRow)

package/client/components/tree-list/tree-list-rows.js

@@ -37,7 +37,10 @@ export function buildVisibleTreeRows ({
   sortTitle,
   sortHost
 }) {
-  const groupTree = bookmarkGroupTree || {}
+  const groupTree = bookmarkGroupTree || new Map()
+  const getGroup = id => groupTree instanceof Map
+    ? groupTree.get(id)
+    : groupTree[id]
   const rows = []
   const matchedRowKeys = []
   const expandedKeySet = new Set(expandedKeys || [])
@@ -72,7 +75,7 @@ export function buildVisibleTreeRows ({
     }
     const hasMatch = (group.bookmarkIds || []).some(bookmarkMatches) ||
       (group.bookmarkGroupIds || []).some(id => {
-        return groupHasMatchedBookmarks(groupTree[id])
+        return groupHasMatchedBookmarks(getGroup(id))
       })
     groupMatchCache.set(group.id, hasMatch)
     return hasMatch
@@ -100,7 +103,7 @@ export function buildVisibleTreeRows ({
       : `#${group.id}`
 
     for (const groupId of group.bookmarkGroupIds || []) {
-      visitGroup(groupTree[groupId], nextParentId, depth + 1)
+      visitGroup(getGroup(groupId), nextParentId, depth + 1)
     }
 
     const bookmarkIds = group.bookmarkIds || []

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

@@ -740,11 +740,13 @@ export default class ItemListTree extends Component {
   }
 
   renderVirtualRow = (row, editor) => {
+    const { keyword } = this.state
+    const { expandedKeys } = this.props
     return (
       <TreeListRow
         row={row}
-        keyword={this.state.keyword}
-        expandedKeys={this.props.expandedKeys}
+        keyword={keyword}
+        expanded={Boolean(keyword) || expandedKeys.includes(row.item.id)}
         activeItemId={this.props.activeItemId}
         searchSelectedRowKey={this.state.searchSelectedRowKey}
         staticList={this.props.staticList}

package/client/store/common.js

@@ -15,10 +15,13 @@ import {
   connectionMap,
   lastAiChatSessionIdKey,
   mobileBreakpoint,
-  splitMap
+  splitMap,
+  settingAiId,
+  settingSyncId
 } from '../common/constants'
 import * as ls from '../common/safe-local-storage'
 import { refs, refsStatic } from '../components/common/ref'
+import { requireTermOfUse } from '../common/term-of-use'
 import { action } from 'manate'
 import uid from '../common/uid'
 import deepCopy from 'json-deep-copy'
@@ -56,7 +59,9 @@ export default Store => {
   }
 
   Store.prototype.toggleAIConfig = function () {
-    window.store.showAIConfigModal = true
+    requireTermOfUse('ai', () => {
+      window.store.showAIConfigModal = true
+    })
   }
 
   Store.prototype.onResize = debounce(async function () {
@@ -99,6 +104,18 @@ export default Store => {
   }
 
   Store.prototype.setSettingItem = function (v) {
+    // entering the AI / sync setting page requires the term of use
+    // confirmation first (when the term is defined)
+    if (
+      v && (
+        v.id === settingAiId || v.id === settingSyncId
+      )
+    ) {
+      const type = v.id === settingAiId ? 'ai' : 'sync'
+      return requireTermOfUse(type, () => {
+        window.store.settingItem = v
+      })
+    }
     window.store.settingItem = v
   }
 
@@ -193,7 +210,13 @@ export default Store => {
       type,
       authType
     } = tab
-    if (!profile || authType !== 'profiles') {
+    // SSH picks auth type explicitly (password/privateKey/profiles radio),
+    // other types only have the profile dropdown, so a selected profile
+    // always means profile auth for them
+    const useProfile = type === connectionMap.ssh
+      ? authType === 'profiles'
+      : true
+    if (!profile || !useProfile) {
       return tab
     }
     let p = window.store.profiles.find(x => x.id === profile)
@@ -224,10 +247,17 @@ export default Store => {
         ...tab,
         ...filtered
       }
+    } else if (type === connectionMap.ftp) {
+      const filtered = pickBy(p.ftp, (value) => value !== undefined && value !== '')
+      return {
+        ...tab,
+        ...filtered
+      }
     }
     delete p.rdp
     delete p.vnc
     delete p.telnet
+    delete p.ftp
     const filtered = pickBy(p, (value) => value !== undefined && value !== '')
     return {
       ...tab,
@@ -455,6 +485,11 @@ export default Store => {
     let i = len - 1
     for (;i >= 0; i--) {
       const f = profiles[i]
+      // migrate old rdp profile key userName -> username
+      if (f.rdp?.userName !== undefined) {
+        f.rdp.username = f.rdp.userName
+        delete f.rdp.userName
+      }
       if (f.name) {
         continue
       }

package/client/store/load-data.js

@@ -3,6 +3,7 @@
  */
 
 import { dbNames, getData, fetchInitData } from '../common/db'
+import deepCopy from 'json-deep-copy'
 import parseInt10 from '../common/parse-int10'
 import { infoTabs, statusMap, defaultEnvLang } from '../common/constants'
 import generate from '../common/id-with-stamp'
@@ -237,7 +238,11 @@ export default (Store) => {
         .then(arr => {
           for (const { name, data } of arr) {
             const dt = JSON.parse(data || '[]')
-            refsStatic.add('oldState-' + name, dt)
+            // seed the watcher snapshot with a *copy* - manate wraps the exact
+            // array assigned into the store, so seeding with `dt` itself would
+            // alias snapshot and store to one backing array; the watcher's
+            // no-change early-return would then skip DB writes forever
+            refsStatic.add('oldState-' + name, deepCopy(dt))
             if (name === 'bookmarks') {
               ext.bookmarksMap = new Map(
                 dt.map(d => [d.id, d])

package/client/store/setting.js

@@ -14,6 +14,7 @@ import { buildNewTheme } from '../common/terminal-theme'
 import getInitItem from '../common/init-setting-item'
 import newTerm from '../common/new-terminal'
 import settingList from '../common/setting-list'
+import { requireTermOfUse } from '../common/term-of-use'
 
 const e = window.translate
 
@@ -103,11 +104,13 @@ export default Store => {
     ) {
       return store.hideSettingModal()
     }
-    store.storeAssign({
-      settingTab: settingMap.setting
+    requireTermOfUse('sync', () => {
+      store.storeAssign({
+        settingTab: settingMap.setting
+      })
+      store.setSettingItem(settingList().find(d => d.id === settingSyncId))
+      store.openSettingModal()
     })
-    store.setSettingItem(settingList().find(d => d.id === settingSyncId))
-    store.openSettingModal()
   }
 
   Store.prototype.openTerminalThemes = function () {

package/client/store/store.js

@@ -42,6 +42,7 @@ import {
 } from '../common/constants'
 import getInitItem from '../common/init-setting-item'
 import createTitle from '../common/create-title'
+import buildMap from '../common/build-map'
 import {
   theme
 } from 'antd'
@@ -278,12 +279,7 @@ class Store {
     const {
       bookmarks
     } = window.store
-    return bookmarks.reduce((p, v) => {
-      return {
-        ...p,
-        [v.id]: v
-      }
-    }, {})
+    return buildMap(bookmarks)
   }
 
   hasSshConfig () {
@@ -296,12 +292,7 @@ class Store {
     const {
       bookmarkGroups
     } = window.store
-    return bookmarkGroups.reduce((p, v) => {
-      return {
-        ...p,
-        [v.id]: v
-      }
-    }, {})
+    return buildMap(bookmarkGroups)
   }
 
   get hasOldConnectionHoppingBookmark () {

package/client/store/sync.js

@@ -4,6 +4,7 @@
 
 import { get, pick, debounce } from 'lodash-es'
 import copy from 'json-deep-copy'
+import { action } from 'manate'
 import {
   settingMap, packInfo, syncTypes, syncDataMaps
 } from '../common/constants'
@@ -13,6 +14,9 @@ import download from '../common/download'
 import { fixBookmarks } from '../common/db-fix'
 import dayjs from 'dayjs'
 import parseJsonSafe from '../common/parse-json-safe'
+import { runImportTask } from '../common/import-task'
+
+const e = window.translate
 
 const {
   version: packVer
@@ -694,15 +698,40 @@ export default (Store) => {
     const { store } = window
     const objs = JSON.parse(txt)
     const { names } = store.getDataSyncNames(true)
+    const fixed = {}
     for (const n of names) {
-      let arr = objs[n]
+      let arr = objs[n] || []
       if (n === settingMap.terminalThemes) {
         arr = store.fixThemes(arr)
       } else if (n === settingMap.bookmarks) {
         arr = fixBookmarks(arr)
       }
-      store.setItems(n, objs[n])
+      fixed[n] = arr
     }
+    // clear all targets first - importAll replaces data sets, not appends.
+    // watchers are stopped inside runImportTask, so this is silent until restart
+    action(() => {
+      for (const n of names) {
+        store.setItems(n, [])
+      }
+    })()
+    await runImportTask({
+      title: e('import'),
+      batch: 200,
+      stopWatchers: names,
+      // one chunked step per data set (bookmarks, groups, themes, ...),
+      // so the progress bar advances per batch instead of per data set
+      steps: names.map((n) => {
+        const arr = fixed[n]
+        return {
+          label: n,
+          items: arr,
+          process: (chunk) => {
+            store[n].push(...chunk)
+          }
+        }
+      })
+    })
     store.updateConfig(stripServerManagedKeys(objs.config))
     if (objs.config?.theme) {
       store.setTheme(objs.config.theme)

package/client/store/tab.js

@@ -111,17 +111,22 @@ export default Store => {
     // Remove old tab
     tabs.splice(index, 1)
 
-    setTimeout(() => {
-      if (store.activeTabId === tabId) {
-        store.activeTabId = newTab.id
-      }
-
-      // Update batch current tab ID if needed
-      const batchProp = `activeTabId${oldBatch}`
-      if (store[batchProp] === tabId) {
-        store[batchProp] = newTab.id
-      }
-    }, 0)
+    // Update active tab id synchronously (same as addTab) so the new tab's
+    // container is already visible (display:block) by the time its Terminal
+    // mounts. Deferring this via setTimeout(0) left the container hidden at
+    // mount time, causing the initial fit()/createTerm() to use xterm's
+    // default 80x24 size instead of the real fitted size - which then got
+    // baked into the remote pty and only partially corrected later, leaving
+    // full-screen apps like tmux/vim rendering at the wrong size.
+    if (store.activeTabId === tabId) {
+      store.activeTabId = newTab.id
+    }
+
+    // Update batch current tab ID if needed
+    const batchProp = `activeTabId${oldBatch}`
+    if (store[batchProp] === tabId) {
+      store[batchProp] = newTab.id
+    }
   }
 
   Store.prototype.reloadAllTabs = function () {

package/client/store/watch.js

@@ -31,6 +31,16 @@ export default store => {
         old,
         n
       )
+      const newOrder = (n || []).map(d => d.id)
+      // with large collections (thousands of bookmarks) this autoRun fires
+      // often; when neither content nor order changed, skip the deep-copy
+      // snapshot and the DB writes entirely
+      const orderChanged = !old ||
+        old.length !== (n || []).length ||
+        old.some((d, i) => d.id !== newOrder[i])
+      if (!updated.length && !added.length && !removed.length && !orderChanged) {
+        return store[name]
+      }
       // Update snapshot immediately before async DB writes to prevent
       // race conditions: a second autoRun firing before the first
       // completes would see stale oldState and re-insert the same items,
@@ -41,7 +51,6 @@ export default store => {
         ...updated.map(item => update(item.id, item, name, false)),
         added.length ? insert(name, added) : Promise.resolve()
       ])
-      const newOrder = (n || []).map(d => d.id)
       await update(
         `${name}:order`,
         newOrder

package/package.json

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