@electerm/electerm-react 5.1.23 → 5.2.0

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

@@ -193,7 +193,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 +230,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 +468,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/init-state.js

@@ -169,6 +169,9 @@ export default () => {
 
     // touch-only shortcut bar (see components/terminal/shortcut-bar-entry.jsx)
     shortcutBarVisible: false,
+    // px the bar is lifted above a page-overlaying system input panel
+    // (iOS / HarmonyOS) — see shortcut-bar.jsx
+    shortcutBarKbOffset: 0,
 
     // sidebar
     openedSideBar: ls.getItem(openedSidebarKey) || '',

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/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/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.23",
+  "version": "5.2.0",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",