@electerm/electerm-react 5.1.23 → 5.2.0

package/client/common/build-map.js

@@ -0,0 +1,12 @@
+/**
+ * build id -> item Map from array
+ * O(n), unlike reduce + object spread which is O(n²)
+ */
+
+export default (arr = [], key = 'id') => {
+  const map = new Map()
+  for (const item of arr) {
+    map.set(item[key], item)
+  }
+  return map
+}

package/client/common/db.js

@@ -161,11 +161,13 @@ export async function fetchInitData (dbName) {
   const res = await find(dbName)
   const order = await getData(`${dbName}:order`)
   if (order && order.length) {
-    res.sort((a, b) => {
-      const ai = order.findIndex(r => r === a.id)
-      const bi = order.findIndex(r => r === b.id)
-      return ai - bi
-    })
+    // index map instead of findIndex inside the comparator:
+    // comparator sort is O(n²) with findIndex, O(n log n) with a map
+    const orderMap = new Map(order.map((id, i) => [id, i]))
+    res.sort((a, b) =>
+      (orderMap.get(a.id) ?? -1) -
+      (orderMap.get(b.id) ?? -1)
+    )
   }
   return JSON.stringify(res)
 }

package/client/common/import-task.js

@@ -0,0 +1,174 @@
+/**
+ * Shared chunked import task runner (no UI).
+ *
+ * Runs large data imports (bookmarks, quick commands, all-data) in small
+ * batches, yielding to the UI between batches and pausing db watchers while
+ * running, so a big import can not freeze or crash the app. Progress is
+ * reported through the ImportProgress modal mounted in main.jsx (driven via
+ * refsStatic) and through the onProgress callback.
+ */
+
+import { action } from 'manate'
+import { refsStatic } from '../components/common/ref'
+
+export const importProgressRefKey = 'import-progress'
+
+function yieldToUI (idleMs = 0) {
+  // rAF fires *before* paint; pairing it with setTimeout(0) - a macrotask
+  // that runs *after* paint - guarantees the browser actually paints
+  // between batches instead of coalescing them into one long frame.
+  // idleMs adds a real idle gap after paint so input events, hover and
+  // the mouse cursor get a chance to be handled between batches
+  return new Promise(resolve => {
+    const finish = () => {
+      if (idleMs > 0) {
+        setTimeout(resolve, idleMs)
+      } else {
+        resolve()
+      }
+    }
+    if (typeof requestAnimationFrame === 'function') {
+      requestAnimationFrame(() => setTimeout(finish, 0))
+      return
+    }
+    setTimeout(finish, 0)
+  })
+}
+
+let controller = null
+
+export function cancelImportTask () {
+  if (controller) {
+    controller.cancelled = true
+  }
+}
+
+/**
+ * Run an import task in UI-friendly batches with a progress modal.
+ * @param {Object} options
+ * @param {string} options.title modal title (already translated label)
+ * @param {Array} options.steps list of steps, each either
+ *   `{ label, items, process(chunk, step) }` - chunked store mutations, or
+ *   `{ label, weight, run(step) }` - a single (async) unit of work
+ * @param {number} options.batch items per store-mutation batch
+ * @param {number} options.batchIdle ms of idle time after each batch's
+ *   paint (default 16); keeps the UI responsive to input while importing
+ * @param {boolean} options.cancelable show a cancel button (default true)
+ * @param {boolean} options.useModal show the progress modal (default true)
+ * @param {number} options.modalMinTotal skip the modal below this total (default 200)
+ * @param {string[]} options.stopWatchers db watcher names (window.watchXxx)
+ *   to pause during the task, so chunked writes do not trigger a db diff
+ *   per batch; watchers restart one per frame after the steps finish
+ * @param {Function} options.onProgress called as (current, total) per batch
+ * @returns {Promise<{cancelled: boolean, error: Error|null}>}
+ */
+export async function runImportTask (options) {
+  const {
+    title = '',
+    steps = [],
+    batch = 100,
+    batchIdle = 16,
+    cancelable = true,
+    useModal = true,
+    modalMinTotal = 200,
+    stopWatchers = [],
+    onProgress
+  } = options
+  if (controller) {
+    console.warn('Another import task is already running')
+    return { cancelled: false, error: new Error('Another import task is already running') }
+  }
+  const total = steps.reduce((p, s) => {
+    return p + (Array.isArray(s.items) ? s.items.length : (s.weight || 1))
+  }, 0) + stopWatchers.length
+  const showModal = useModal && total >= modalMinTotal
+  const modal = refsStatic.get(importProgressRefKey)
+  controller = { cancelled: false }
+  let done = 0
+  const update = (ext) => {
+    if (onProgress) {
+      onProgress(done, total)
+    }
+    if (!showModal || !modal) {
+      return
+    }
+    modal.show({
+      title,
+      status: 'running',
+      current: done,
+      total,
+      label: '',
+      cancelable,
+      ...ext
+    })
+  }
+  update({})
+  for (const name of stopWatchers) {
+    window[`watch${name}`]?.stop()
+  }
+  let error = null
+  const restarted = new Set()
+  try {
+    for (const step of steps) {
+      if (controller.cancelled) {
+        break
+      }
+      const { label, items, process, run } = step
+      if (Array.isArray(items) && typeof process === 'function') {
+        for (let i = 0; i < items.length; i += batch) {
+          if (controller.cancelled) {
+            break
+          }
+          // paint the last batch, then leave a real idle gap so the UI
+          // can handle input/cursor events before the next batch
+          await yieldToUI(batchIdle)
+          const chunk = items.slice(i, i + batch)
+          action(() => process(chunk, step))()
+          done += chunk.length
+          update({ label })
+        }
+      } else if (typeof run === 'function') {
+        await yieldToUI()
+        await run(step)
+        done += step.weight || 1
+        update({ label })
+      }
+    }
+    // restart watchers one per frame - each start() synchronously diffs
+    // + deep-copies its collection and writes to db, so restarting all at
+    // once would freeze the UI right when the import "finishes"
+    for (const name of stopWatchers) {
+      await yieldToUI(batchIdle)
+      window[`watch${name}`]?.start()
+      restarted.add(name)
+      done += 1
+      update({ label: name })
+    }
+  } catch (err) {
+    error = err
+  } finally {
+    // on error/cancel still make sure everything is restarted
+    for (const name of stopWatchers) {
+      if (!restarted.has(name)) {
+        window[`watch${name}`]?.start()
+      }
+    }
+  }
+  const { cancelled } = controller
+  controller = null
+  if (error) {
+    if (showModal && modal) {
+      modal.show({ title, status: 'error', error, current: done, total, cancelable: false })
+    }
+  } else if (!cancelled) {
+    if (showModal && modal) {
+      modal.show({ title, status: 'done', current: total, total, cancelable: false })
+      setTimeout(() => {
+        modal.hide()
+      }, 600)
+    }
+  } else if (showModal && modal) {
+    modal.hide()
+  }
+  return { cancelled, error }
+}

package/client/components/bookmark-form/ai-bookmark-form.jsx

@@ -27,6 +27,7 @@ import { fixBookmarkData } from './fix-bookmark-default.js'
 import generate from '../../common/id-with-stamp'
 import AiHistory, { addHistoryItem } from '../ai/ai-history.jsx'
 import { getItem, setItem } from '../../common/safe-local-storage'
+import { runImportTask } from '../../common/import-task'
 
 const STORAGE_KEY_DESC = 'ai_bookmark_description'
 const STORAGE_KEY_HISTORY = 'ai_bookmark_history'
@@ -34,16 +35,6 @@ const EVENT_NAME_HISTORY = 'ai-bookmark-history-update'
 const { TextArea } = Input
 const e = window.translate
 
-function yieldToUI () {
-  return new Promise(resolve => {
-    if (typeof requestAnimationFrame === 'function') {
-      requestAnimationFrame(() => resolve())
-      return
-    }
-    setTimeout(resolve, 0)
-  })
-}
-
 export default function AIBookmarkForm (props) {
   const { onCancel } = props
   const [description, setDescription] = useState(() => getItem(STORAGE_KEY_DESC) || '')
@@ -183,11 +174,23 @@ export default function AIBookmarkForm (props) {
     setConfirmProgress({ current: 0, total: parsed.length })
 
     try {
-      for (let i = 0; i < parsed.length; i++) {
-        // Yield between synchronous store mutations so large imports stay responsive.
-        await yieldToUI()
-        createBookmark(parsed[i])
-        setConfirmProgress({ current: i + 1, total: parsed.length })
+      const { error } = await runImportTask({
+        useModal: false,
+        batch: 50,
+        steps: [
+          {
+            items: parsed,
+            process: (chunk) => {
+              chunk.forEach(createBookmark)
+            }
+          }
+        ],
+        onProgress: (current, total) => {
+          setConfirmProgress({ current, total })
+        }
+      })
+      if (error) {
+        throw error
       }
 
       setShowConfirm(false)

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

@@ -1,5 +1,6 @@
 // bookmark select tree (copied from legacy)
 import createTitle from '../../../common/create-title'
+import buildMap from '../../../common/build-map'
 import { TreeSelect } from 'antd'
 
 const e = window.translate
@@ -16,9 +17,9 @@ const hoppingProps = [
 
 function buildTreeData (bookmarkGroups, tree) {
   const cats = bookmarkGroups
-  const btree = cats.reduce((p, k) => ({ ...p, [k.id]: k }), {})
+  const btree = buildMap(cats)
   function buildSubCats (id) {
-    const x = btree[id]
+    const x = btree.get(id)
     if (!x) return ''
     const y = {
       key: x.id,
@@ -34,7 +35,7 @@ function buildTreeData (bookmarkGroups, tree) {
     return y
   }
   function buildLeaf (id) {
-    const x = tree[id]
+    const x = tree.get(id)
     if (!x) return ''
     return { value: x.id, key: x.id, title: createTitle(x) }
   }
@@ -58,10 +59,10 @@ function buildTreeData (bookmarkGroups, tree) {
 
 export default function BookmarkSelect (props) {
   const { bookmarks, bookmarkGroups } = props
-  const tree = bookmarks.reduce((p, k) => ({ ...p, [k.id]: k }), {})
+  const tree = buildMap(bookmarks)
 
   function onSelect (id) {
-    const item = tree[id]
+    const item = tree.get(id)
     if (item) {
       const selected = hoppingProps.reduce((p, k) => {
         if (item[k] !== undefined) {

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

@@ -170,7 +170,7 @@ export function renderFormItem (item, formItemLayout, form, ctxProps, index) {
     case 'execSettings':
       return <ExecSettingsField key={name} />
     case 'profileItem':
-      return <ProfileItem key={name} store={ctxProps.store} profileFilter={item.profileFilter} />
+      return <ProfileItem key={name} store={ctxProps.store} form={form} profileFilter={item.profileFilter} />
     case 'quickCommands':
       return <Fragment key={name}>{useQuickCmds(form, ctxProps.formData || {})}</Fragment>
     case 'runScripts':

package/client/components/bookmark-form/common/profile-item.jsx

@@ -5,11 +5,20 @@
 import React from 'react'
 import { Form, Select } from 'antd'
 import { formItemLayout } from '../../../common/form-layout'
+import { authTypeMap } from '../../../common/constants'
 
 const FormItem = Form.Item
 const e = window.translate
 
-export default function ProfileItem ({ store, profileFilter = (d) => d }) {
+export default function ProfileItem ({ store, form, profileFilter = (d) => d }) {
+  const handleChange = (value) => {
+    // applyProfile only resolves credentials when authType is 'profiles',
+    // selecting a profile here means bookmark auth should come from it
+    form?.setFieldsValue({
+      authType: value ? authTypeMap.profiles : authTypeMap.password
+    })
+  }
+
   const opts = {
     options: store.profiles
       .filter(profileFilter)
@@ -18,7 +27,8 @@ export default function ProfileItem ({ store, profileFilter = (d) => d }) {
         value: d.id
       })),
     placeholder: e('profiles'),
-    allowClear: true
+    allowClear: true,
+    onChange: handleChange
   }
 
   return (

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

@@ -32,7 +32,7 @@ const rdpConfig = {
         { type: 'input', name: 'host', label: () => e('host'), rules: [{ required: true, message: e('host') + ' required' }] },
         commonFields.port,
         { type: 'profileItem', name: '__profile__', label: '', profileFilter: d => !isEmpty(d.rdp) },
-        { ...commonFields.username, rules: [{ required: true, message: e('username') + ' required' }] },
+        commonFields.username,
         commonFields.password,
         commonFields.description,
         { type: 'input', name: 'domain', label: () => e('domain') },

package/client/components/bookmark-form/tree-select.jsx

@@ -8,26 +8,15 @@ import { useState, useMemo } from 'react'
 import { defaultBookmarkGroupId, settingMap } from '../../common/constants'
 import deepCopy from 'json-deep-copy'
 import createTitle, { createTitleWithTag } from '../../common/create-title'
+import buildMap from '../../common/build-map'
 
 const e = window.translate
 
 function buildData (bookmarks, bookmarkGroups, searchText = '') {
   const searchLower = searchText.toLowerCase()
   const cats = bookmarkGroups
-  const tree = bookmarks
-    .reduce((p, k) => {
-      return {
-        ...p,
-        [k.id]: k
-      }
-    }, {})
-  const btree = cats
-    .reduce((p, k) => {
-      return {
-        ...p,
-        [k.id]: k
-      }
-    }, {})
+  const tree = buildMap(bookmarks)
+  const btree = buildMap(cats)
 
   // Helper to check if a node matches the search
   function matchesSearch (text) {
@@ -37,7 +26,7 @@ function buildData (bookmarks, bookmarkGroups, searchText = '') {
   }
 
   function buildSubCats (id) {
-    const x = btree[id]
+    const x = btree.get(id)
     if (!x) {
       return ''
     }
@@ -64,7 +53,7 @@ function buildData (bookmarks, bookmarkGroups, searchText = '') {
     return y
   }
   function buildLeaf (id) {
-    const x = tree[id]
+    const x = tree.get(id)
     if (!x) {
       return ''
     }

package/client/components/common/import-progress.jsx

@@ -0,0 +1,90 @@
+/**
+ * Shared import progress modal.
+ *
+ * Mounted once in main.jsx (inside ConfigProvider, so antd theme applies)
+ * and driven imperatively through refsStatic by runImportTask
+ * (common/import-task.js) - same pattern as BatchOpRunner.
+ * Uses only existing utility classes (pd1y/mg1t/elli/common-err).
+ */
+
+import { useCallback, useEffect, useState } from 'react'
+import { Progress } from 'antd'
+import Modal from './modal.jsx'
+import { refsStatic } from './ref'
+import { importProgressRefKey, cancelImportTask } from '../../common/import-task'
+
+const e = window.translate
+
+export default function ImportProgress () {
+  const [state, setState] = useState(null)
+
+  const show = useCallback((next) => {
+    setState(next)
+  }, [])
+
+  const hide = useCallback(() => {
+    setState(null)
+  }, [])
+
+  useEffect(() => {
+    refsStatic.add(importProgressRefKey, { show, hide })
+    return () => {
+      refsStatic.remove(importProgressRefKey)
+    }
+  }, [show, hide])
+
+  if (!state) {
+    return null
+  }
+  const {
+    title,
+    status,
+    current,
+    total,
+    label,
+    error,
+    cancelable
+  } = state
+  const running = status === 'running'
+  const percent = Math.floor(current * 100 / (total || 1))
+  const modalProps = {
+    title: title || e('import'),
+    open: true,
+    width: 420,
+    zIndex: 5000,
+    maskClosable: false,
+    onCancel: running
+      ? (cancelable ? cancelImportTask : undefined)
+      : hide,
+    footer: running && !cancelable
+      ? null
+      : (
+        <div className='custom-modal-footer-buttons'>
+          <button
+            type='button'
+            className='custom-modal-cancel-btn'
+            onClick={running ? cancelImportTask : hide}
+          >
+            {e('cancel')}
+          </button>
+        </div>
+        )
+  }
+  return (
+    <Modal {...modalProps}>
+      <div className='pd1y'>
+        <Progress
+          percent={percent}
+          status={status === 'error' ? 'exception' : 'active'}
+          format={() => `${current}/${total}`}
+        />
+        <div className='elli mg1t'>{label}</div>
+        {
+          error
+            ? <div className='common-err mg1t'>{error.message || String(error)}</div>
+            : null
+        }
+      </div>
+    </Modal>
+  )
+}

package/client/components/layout/layout.jsx

@@ -43,9 +43,10 @@ export default auto(function Layout (props) {
       rightPanelWidth,
       resizeTrigger,
       inActiveTerminal,
-      shortcutBarVisible
+      shortcutBarVisible,
+      shortcutBarKbOffset
     } = props.store
-    const h = height - footerHeight - (inActiveTerminal && pinnedQuickCommandBar ? quickCommandBoxHeight : 0) - (shortcutBarVisible ? shortcutBarHeight : 0) + resizeTrigger
+    const h = height - footerHeight - (inActiveTerminal && pinnedQuickCommandBar ? quickCommandBoxHeight : 0) - (shortcutBarVisible ? shortcutBarHeight + shortcutBarKbOffset : 0) + resizeTrigger
     const l = pinned ? leftSideBarWidth + leftSidePanelWidth : leftSideBarWidth
     const r = rightPanelVisible && rightPanelPinned ? rightPanelWidth : 0
     return {
@@ -68,14 +69,15 @@ export default auto(function Layout (props) {
       rightPanelPinned,
       rightPanelWidth,
       pinned,
-      shortcutBarVisible
+      shortcutBarVisible,
+      shortcutBarKbOffset
     } = props.store
     const l = pinned ? leftSidePanelWidth : 0
     const r = rightPanelPinned && rightPanelVisible ? rightPanelWidth : 0
     // account for the far-left icon bar (sidebarWidth - 1px border on desktop;
     // 0 when the bar is hidden on mobile)
     const w = width - l - r - (leftSideBarWidth > 0 ? leftSideBarWidth - 1 : 0)
-    const h = height - footerHeight - (pinnedQuickCommandBar ? quickCommandBoxHeight : 0) - (shortcutBarVisible ? shortcutBarHeight : 0)
+    const h = height - footerHeight - (pinnedQuickCommandBar ? quickCommandBoxHeight : 0) - (shortcutBarVisible ? shortcutBarHeight + shortcutBarKbOffset : 0)
     return layoutAlg(layout, w, h)
   }
   const layoutSize = calcLayoutStyle()

package/client/components/main/main.jsx

@@ -38,6 +38,7 @@ import BookmarkFromHistoryModal from '../bookmark-form/bookmark-from-history-mod
 import AutoSync from '../setting-sync/auto-sync'
 import BatchOpRunner from '../batch-op/batch-op-runner'
 import UnixTimestampTooltip from '../terminal/unix-timestamp-tooltip'
+import ImportProgress from '../common/import-progress.jsx'
 import { pick } from 'lodash-es'
 import deepCopy from 'json-deep-copy'
 import './wrapper.styl'
@@ -318,6 +319,7 @@ export default auto(function Index (props) {
         <BookmarkFromHistoryModal />
         <NotificationContainer />
         <BatchOpRunner />
+        <ImportProgress />
         <ShortcutBarEntry store={store} />
         {!isAIDisabled() && <AIConfigModal store={store} />}
         <UnixTimestampTooltip />

package/client/components/profile/profile-form-rdp.jsx

@@ -15,7 +15,7 @@ export default function ProfileFormRdp (props) {
         {...formItemLayout}
         label={e('username')}
         hasFeedback
-        name={['rdp', 'userName']}
+        name={['rdp', 'username']}
       >
         <Input />
       </FormItem>

package/client/components/quick-commands/quick-command-transport-mod.jsx

@@ -1,10 +1,13 @@
 import BookmarkTransport from '../tree-list/bookmark-transport'
 import download from '../../common/download'
 import time from '../../common/time'
-import copy from 'json-deep-copy'
+import { runImportTask } from '../../common/import-task'
+
+const e = window.translate
 
 export default class QmTransport extends BookmarkTransport {
   name = 'quickCommands'
+
   beforeUpload = async (file) => {
     const { store } = this.props
     const txt = file.fileContent !== undefined
@@ -13,28 +16,31 @@ export default class QmTransport extends BookmarkTransport {
     try {
       const arr = JSON.parse(txt)
       const state = store[this.name]
-      const arrOld = copy(state)
-      const bmTreeOld = arrOld.reduce((p, v) => {
-        return {
-          ...p,
-          [v.id]: v
-        }
-      }, {})
-      arr.forEach(bg => {
-        if (!bmTreeOld[bg.id]) {
-          state.push(bg)
-        }
+      const existing = new Set(state.map(v => v.id))
+      const fresh = arr.filter(bg => !existing.has(bg.id))
+      if (!fresh.length) {
+        return false
+      }
+      await runImportTask({
+        title: e('import'),
+        batch: 200,
+        stopWatchers: [this.name],
+        steps: [
+          {
+            label: e('quickCommands'),
+            items: fresh,
+            process: (chunk) => {
+              state.push(...chunk)
+            }
+          }
+        ]
       })
-    } catch (e) {
-      store.onError(e)
+    } catch (err) {
+      store.onError(err)
     }
     return false
   }
 
-  renderEdit () {
-    return null
-  }
-
   handleDownload = () => {
     const { store } = this.props
     const arr = store[this.name]

package/client/components/rdp/rdp-cred-form.jsx

@@ -0,0 +1,55 @@
+/**
+ * RDP credentials prompt form, shown at connect time
+ * when username/password are missing from the bookmark
+ */
+
+import {
+  Input,
+  Form,
+  Button
+} from 'antd'
+import { formItemLayout, tailFormItemLayout } from '../../common/form-layout'
+import Password from '../common/password'
+
+const FormItem = Form.Item
+const e = window.translate
+
+export default function RdpCredForm (props) {
+  const [form] = Form.useForm()
+
+  return (
+    <Form
+      form={form}
+      onFinish={props.handleFinish}
+      initialValues={props.initialValues || {}}
+      name='rdp-cred-form'
+    >
+      <div className='pd3t pd1b'>
+        <FormItem
+          {...formItemLayout}
+          label={e('username')}
+          name='username'
+        >
+          <Input autoFocus />
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={e('password')}
+          name='password'
+        >
+          <Password />
+        </FormItem>
+        <FormItem
+          {...tailFormItemLayout}
+        >
+          <Button
+            type='primary'
+            htmlType='submit'
+          >
+            {e('connect')}
+          </Button>
+        </FormItem>
+      </div>
+    </Form>
+  )
+}