@electerm/electerm-react 3.10.0 → 3.11.0

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

@@ -0,0 +1,157 @@
+/**
+ * terminal interactive UI - renders a single interactive event modal
+ */
+
+import { Form, Button } from 'antd'
+import Modal from '../common/modal'
+import InputAutoFocus from '../common/input-auto-focus'
+
+const e = window.translate
+const FormItem = Form.Item
+
+export default function TermInteractiveUI ({
+  opts,
+  onSend,
+  onClose
+}) {
+  const [form] = Form.useForm()
+
+  function onCancel () {
+    onSend({
+      id: opts.id,
+      results: []
+    })
+    onClose()
+  }
+  function onOk () {
+    form.submit()
+  }
+  function onConfirm () {
+    onSend({
+      id: opts.id,
+      results: [opts.options.confirmResult || 'yes']
+    })
+    onClose()
+  }
+  function onIgnore () {
+    onSend({
+      id: opts.id,
+      results: Object.keys(opts.options.prompts).map(() => '')
+    })
+    onClose()
+  }
+  function onFinish (res) {
+    onSend({
+      id: opts.id,
+      results: Object.values(res)
+    })
+    onClose()
+  }
+  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 renderConfirmBody () {
+    const instructions = opts.options.instructions || []
+    return (
+      <div>
+        {
+          instructions.map((note, index) => {
+            return <pre key={note + index}>{note}</pre>
+          })
+        }
+        <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>
+    )
+  }
+  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>
+  )
+}

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-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/package.json

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