@electerm/electerm-react 3.10.0 → 3.11.11

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

@@ -1,30 +1,45 @@
 /**
- * handle terminal interactive operation
+ * handle terminal interactive operation - queue based
  */
 
-import { useEffect, useState } from 'react'
-import { Form, Button } from 'antd'
-import Modal from '../common/modal'
-import InputAutoFocus from '../common/input-auto-focus'
+import { useEffect, useState, useRef, useCallback } from 'react'
 import wait from '../../common/wait'
-
-const e = window.translate
-const FormItem = Form.Item
+import TermInteractiveUI from './terminal-interactive-ui'
 
 export default function TermInteractive () {
-  const [opts, setter] = useState(null)
-  const [form] = Form.useForm()
+  const [current, setCurrent] = useState(null)
+  const queueRef = useRef([])
+  const hasCurrentRef = useRef(false)
+
   function updateTab (data) {
     window.store.updateTab(data.tabId, data.update)
   }
-  function onMsg (e) {
+
+  function processNext () {
+    const next = queueRef.current.shift()
+    if (next) {
+      setCurrent(next)
+    } else {
+      hasCurrentRef.current = false
+      setCurrent(null)
+    }
+  }
+
+  const onMsgRef = useRef(null)
+  onMsgRef.current = function onMsg (e) {
     if (
       e &&
       e.data &&
       typeof e.data === 'string' &&
       e.data.includes('session-interactive')
     ) {
-      setter(JSON.parse(e.data))
+      const parsed = JSON.parse(e.data)
+      if (hasCurrentRef.current) {
+        queueRef.current.push(parsed)
+      } else {
+        hasCurrentRef.current = true
+        setCurrent(parsed)
+      }
     } else if (
       e &&
       e.data &&
@@ -34,166 +49,52 @@ export default function TermInteractive () {
       updateTab(JSON.parse(e.data))
     }
   }
-  function clear () {
-    setter(null)
-    form.resetFields()
-  }
-  function onCancel () {
-    window.et.commonWs.s({
-      id: opts.id,
-      results: []
-    })
-    clear()
-  }
-  function onOk () {
-    form.submit()
-  }
-  function onConfirm () {
-    window.et.commonWs.s({
-      id: opts.id,
-      results: [opts.options.confirmResult || 'yes']
-    })
-    clear()
-  }
-  function onIgnore () {
-    window.et.commonWs.s({
-      id: opts.id,
-      results: Object.keys(opts.options.prompts).map(() => '')
-    })
-    clear()
-  }
-  function onFinish (res) {
-    window.et.commonWs.s({
-      id: opts.id,
-      results: Object.values(res)
-    })
-    clear()
-  }
-  function renderFormItem (pro, i) {
-    const {
-      prompt,
-      echo
-    } = pro
-    const note = (opts.options.instructions || [])[i]
-    const type = echo
-      ? 'input'
-      : 'password'
-    return (
-      <FormItem
-        key={prompt + i}
-        label={prompt}
-        rules={[{
-          required: true, message: 'required'
-        }]}
-      >
-        <div>
-          <pre>{note}</pre>
-        </div>
-        <FormItem noStyle name={'item' + i}>
-          <InputAutoFocus
-            type={type}
-            placeholder={note}
-          />
-        </FormItem>
-      </FormItem>
-    )
+
+  function onSend (data) {
+    window.et.commonWs.s(data)
   }
-  function renderConfirmBody () {
-    const instructions = opts.options.instructions || []
-    return (
-      <div>
-        {
-          instructions.map((note, index) => {
-            return <pre key={note + index}>{note}</pre>
-          })
+
+  const onClose = useCallback(() => {
+    processNext()
+  }, [])
+
+  useEffect(() => {
+    let cancelled = false
+    function handler (e) {
+      if (!cancelled) {
+        onMsgRef.current(e)
+      }
+    }
+    async function initWatch () {
+      for (;;) {
+        if (cancelled) {
+          return
+        }
+        if (window.et.commonWs) {
+          window.et.commonWs.addEventListener('message', handler)
+          return
         }
-        <FormItem>
-          <Button
-            type='primary'
-            onClick={onConfirm}
-          >
-            {opts.options.submitText || e('submit')}
-          </Button>
-          <Button
-            className='mg1l'
-            onClick={onCancel}
-          >
-            {opts.options.cancelText || e('cancel')}
-          </Button>
-        </FormItem>
-      </div>
-    )
-  }
-  async function initWatch () {
-    let done = false
-    while (!done) {
-      if (window.et.commonWs) {
-        window.et.commonWs.addEventListener('message', onMsg)
-        done = true
-      } else {
         await wait(400)
       }
     }
-  }
-  function init () {
     initWatch()
-  }
-  useEffect(() => {
-    init()
+    return () => {
+      cancelled = true
+      if (window.et.commonWs) {
+        window.et.commonWs.removeEventListener('message', handler)
+      }
+    }
   }, [])
-  if (!opts) {
+
+  if (!current) {
     return null
   }
-  const props = {
-    maskClosable: false,
-    okText: e('submit'),
-    onCancel,
-    onOk,
-    closable: false,
-    open: true,
-    title: opts.options?.name || '?',
-    footer: null
-  }
+
   return (
-    <Modal
-      {...props}
-    >
-      {
-        opts.options?.mode === 'confirm'
-          ? renderConfirmBody()
-          : (
-            <Form
-              form={form}
-              layout='vertical'
-              onFinish={onFinish}
-            >
-              {
-                opts.options.prompts.map(renderFormItem)
-              }
-              <FormItem>
-                <Button
-                  type='primary'
-                  htmlType='submit'
-                >
-                  {e('submit')}
-                </Button>
-                <Button
-                  type='dashed'
-                  className='mg1l'
-                  onClick={onIgnore}
-                >
-                  {e('ignore')}
-                </Button>
-                <Button
-                  className='mg1l'
-                  onClick={onCancel}
-                >
-                  {e('cancel')}
-                </Button>
-              </FormItem>
-            </Form>
-            )
-      }
-    </Modal>
+    <TermInteractiveUI
+      opts={current}
+      onSend={onSend}
+      onClose={onClose}
+    />
   )
 }

package/client/components/terminal/terminal.jsx

@@ -1263,6 +1263,17 @@ class Term extends Component {
           this.handleError({ message: text, from, srcId })
         }
       })
+    // Guard: component was unmounted while createTerm was pending.
+    // The child process is already running; connect briefly to trigger its cleanup.
+    if (this.onClose) {
+      if (r && r.port) {
+        try {
+          const tmpSock = new WebSocket(this.buildWsUrl(r.port))
+          tmpSock.onopen = () => tmpSock.close()
+        } catch (_e) {}
+      }
+      return
+    }
     if (typeof r === 'string' && r.includes('fail')) {
       return this.promote()
     }

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

@@ -0,0 +1,11 @@
+import { lazy, Suspense } from 'react'
+
+const TerminalInfo = lazy(() => import('./terminal-info'))
+
+export default function TerminalInfoEntry (props) {
+  return (
+    <Suspense fallback={null}>
+      <TerminalInfo {...props} />
+    </Suspense>
+  )
+}

package/client/components/text-editor/text-editor-entry.jsx

@@ -0,0 +1,11 @@
+import { lazy, Suspense } from 'react'
+
+const TextEditor = lazy(() => import('./text-editor'))
+
+export default function TextEditorEntry (props) {
+  return (
+    <Suspense fallback={null}>
+      <TextEditor {...props} />
+    </Suspense>
+  )
+}

package/client/components/widgets/widget-form.jsx

@@ -2,9 +2,10 @@
  * Widget form component
  */
 import React, { useState, useEffect } from 'react'
-import { Form, Input, InputNumber, Switch, Select, Button, Tooltip, Alert } from 'antd'
+import { Form, Input, InputNumber, Switch, Select, Button, Tooltip, Alert, Space } from 'antd'
 import { formItemLayout, tailFormItemLayout } from '../../common/form-layout'
 import HelpIcon from '../common/help-icon'
+import { nanoid } from 'nanoid'
 import BatchOpEditor from '../batch-op/batch-op-editor'
 
 export default function WidgetForm ({ widget, onSubmit, loading, hasRunningInstance }) {
@@ -43,12 +44,36 @@ export default function WidgetForm ({ widget, onSubmit, loading, hasRunningInsta
   }
 
   const renderFormItem = (config) => {
-    const { name, type, description, choices } = config
+    const { name, type, description, choices, showGenerator } = config
     let control = null
 
     switch (type) {
       case 'string':
         control = <Input placeholder={description} />
+        if (showGenerator) {
+          return (
+            <Form.Item
+              key={name}
+              {...formItemLayout}
+              label={name}
+              tooltip={description}
+            >
+              <Space.Compact style={{ width: '100%' }}>
+                <Form.Item
+                  noStyle
+                  name={name}
+                >
+                  <Input placeholder={description} />
+                </Form.Item>
+                <Button
+                  onClick={() => form.setFieldValue(name, 'ett_' + nanoid())}
+                >
+                  Generate
+                </Button>
+              </Space.Compact>
+            </Form.Item>
+          )
+        }
         break
       case 'textarea':
         control = <Input.TextArea autoSize={{ minRows: 3 }} placeholder={description} />

package/client/entry/worker.js

@@ -114,7 +114,10 @@ async function onMsg (e) {
   } else if (action === 'addEventListener') {
     const ws = self.insts[wsId]
     if (ws) {
-      ws.cb = (e) => {
+      if (!ws.cbs) {
+        ws.cbs = {}
+      }
+      const cb = (e) => {
         send({
           wsId,
           id,
@@ -123,13 +126,14 @@ async function onMsg (e) {
           }
         })
       }
-      ws.addEventListener(type, ws.cb)
+      ws.cbs[id] = cb
+      ws.addEventListener(type, cb)
     }
   } else if (action === 'removeEventListener') {
     const ws = self.insts[wsId]
-    if (ws) {
-      ws.removeEventListener(type, ws.cb)
-      delete ws.cb
+    if (ws && ws.cbs && ws.cbs[id]) {
+      ws.removeEventListener(type, ws.cbs[id])
+      delete ws.cbs[id]
     }
   }
 }

package/client/store/mcp-handler.js

@@ -172,8 +172,28 @@ export default Store => {
 
   // ==================== Bookmark APIs ====================
 
+  const bookmarkSensitiveFields = [
+    'password', 'privateKey', 'passphrase', 'certificate', 'proxy',
+    'connectionHoppings', 'sshTunnels'
+  ]
+  const bookmarkFeatureFields = [
+    'connectionHoppings', 'sshTunnels', 'quickCommands', 'runScripts'
+  ]
+
+  function sanitizeBookmark (b) {
+    const safe = Object.fromEntries(
+      Object.entries(b).filter(([k]) => !bookmarkSensitiveFields.includes(k))
+    )
+    for (const key of bookmarkFeatureFields) {
+      if (Array.isArray(b[key]) && b[key].length) {
+        safe[`has${key.charAt(0).toUpperCase() + key.slice(1)}`] = true
+      }
+    }
+    return safe
+  }
+
   Store.prototype.mcpListBookmarks = function () {
-    return deepCopy(window.store.bookmarks)
+    return deepCopy(window.store.bookmarks).map(sanitizeBookmark)
   }
 
   Store.prototype.mcpGetBookmark = function (args) {
@@ -182,7 +202,7 @@ export default Store => {
     if (!bookmark) {
       throw new Error(`Bookmark not found: ${args.id}`)
     }
-    return deepCopy(bookmark)
+    return deepCopy(sanitizeBookmark(bookmark))
   }
 
   Store.prototype.mcpAddBookmark = async function (args) {

package/client/store/watch.js

@@ -21,49 +21,51 @@ import dataCompare from '../common/data-compare'
 
 export default store => {
   for (const name of dbNamesForWatch) {
+    window[`watch${name}Running`] = false
     window[`watch${name}`] = autoRun(async () => {
-      if (window.migrating) {
+      if (window.migrating || window[`watch${name}Running`]) {
         return
       }
-      const old = refsStatic.get('oldState-' + name)
-      const n = store.getItems(name)
-      const { updated, added, removed } = dataCompare(
-        old,
-        n
-      )
-      for (const item of removed) {
-        await remove(name, item.id)
-      }
-      for (const item of updated) {
-        await update(item.id, item, name, false)
-      }
-      for (const item of added) {
-        await insert(name, item)
-      }
-      const newOrder = (n || []).map(d => d.id)
-      await update(
-        `${name}:order`,
-        newOrder
-      )
-      refsStatic.add('oldState-' + name, deepCopy(n) || [])
-      if (name === 'bookmarks') {
-        store.bookmarksMap = new Map(
-          n.map(d => [d.id, d])
+      window[`watch${name}Running`] = true
+      try {
+        const old = refsStatic.get('oldState-' + name)
+        const n = store.getItems(name)
+        const { updated, added, removed } = dataCompare(
+          old,
+          n
         )
-      }
-      await store.updateLastDataUpdateTime()
-      if (dbNamesForSync.includes(name)) {
-        const syncSetting = store.config.syncSetting || {}
-        const { autoSync, autoSyncInterval, autoSyncDirection } = syncSetting
-        if (autoSync && autoSyncInterval === 0) {
-          if (autoSyncDirection === 'download') {
-            await store.downloadSettingAll()
-          } else {
-            await store.uploadSettingAll()
+        await Promise.all([
+          ...removed.map(item => remove(name, item.id)),
+          ...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
+        )
+        refsStatic.add('oldState-' + name, deepCopy(n) || [])
+        if (name === 'bookmarks') {
+          store.bookmarksMap = new Map(
+            n.map(d => [d.id, d])
+          )
+        }
+        await store.updateLastDataUpdateTime()
+        if (dbNamesForSync.includes(name)) {
+          const syncSetting = store.config.syncSetting || {}
+          const { autoSync, autoSyncInterval, autoSyncDirection } = syncSetting
+          if (autoSync && autoSyncInterval === 0) {
+            if (autoSyncDirection === 'download') {
+              await store.downloadSettingAll()
+            } else {
+              await store.uploadSettingAll()
+            }
           }
         }
+        return store[name]
+      } finally {
+        window[`watch${name}Running`] = false
       }
-      return store[name]
     })
     window[`watch${name}`].start()
   }

package/package.json

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

package/client/common/safe-name.js

@@ -1,19 +0,0 @@
-/**
- * convert string to safe name
- * from https://github.com/Jaliborc/safe-filename/blob/master/index.js
- */
-
-export default (name) => {
-  return name
-    .replace(/\.$/, '')
-    .replace('?', '❓')
-    .replace('\\', ' ⃥')
-    .replace('/', '⟋')
-    .replace('|', '│')
-    .replace(':', '꞉')
-    .replace('<', 'ᐸ')
-    .replace('>', 'ᐳ')
-    .replace('>', 'ᐳ')
-    .replace('"', 'ᐦ')
-    .replace('*', '꘎')
-}