@electerm/electerm-react 2.3.126 → 2.3.136

package/client/components/tree-list/move-item-modal.jsx

@@ -1,28 +1,73 @@
 // render bookmark select, use antd tree select
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
+import {
+  MergeOutlined
+} from '@ant-design/icons'
 import buildGroupData from '../bookmark-form/common/bookmark-group-tree-format'
 import { TreeSelect, Modal, Button } from 'antd'
+import { auto } from 'manate/react'
 const e = window.translate
 
-export default function MoveItemModal (props) {
+const rootId = '__root__'
+
+export default auto(function MoveItemModal (props) {
   const [groupId, setGroupId] = useState(undefined)
   const {
     openMoveModal,
     moveItem,
     moveItemIsGroup,
     bookmarkGroups
-  } = props
+  } = props.store
+
+  function onCancelMoveItem () {
+    window.store.storeAssign({
+      openMoveModal: false,
+      moveItem: null,
+      moveItemIsGroup: false
+    })
+  }
+
+  // Reset groupId when modal opens
+  useEffect(() => {
+    if (openMoveModal) {
+      setGroupId(undefined)
+    }
+  }, [openMoveModal])
+
   if (!openMoveModal) {
     return null
   }
-  const data = buildGroupData(bookmarkGroups, moveItem.id)
+
+  // Find current parent folder
+  const currentParent = bookmarkGroups.find(bg => {
+    if (moveItemIsGroup) {
+      return (bg.bookmarkGroupIds || []).includes(moveItem.id)
+    }
+    return (bg.bookmarkIds || []).includes(moveItem.id)
+  })
+  const currentParentId = currentParent?.id
+
+  // Build tree data with disabled folder for self and current parent
+  const data = buildGroupData(bookmarkGroups, moveItemIsGroup ? moveItem.id : null, false, currentParentId)
+
+  // if it is a group and can move to root, add root option
+  if (moveItemIsGroup && currentParentId) {
+    const title = <span><MergeOutlined /> {e('ROOT')}</span>
+    data.unshift({
+      title,
+      value: rootId,
+      key: rootId,
+      disabled: false
+    })
+  }
   function onSelect () {
     const {
       bookmarkGroups
     } = window.store
+
     const groupMap = new Map(bookmarkGroups.map(d => [d.id, d]))
     const group = groupMap.get(groupId)
-    if (!group) {
+    if (!group && groupId !== rootId) {
       return
     }
     // Find and update the original parent group
@@ -45,7 +90,13 @@ export default function MoveItemModal (props) {
         )
       }
     }
+    if (groupId === rootId) {
+      delete moveItem.level
+      return onCancelMoveItem()
+    }
+
     if (moveItemIsGroup) {
+      moveItem.level = (group.level || 1) + 1
       group.bookmarkGroupIds = [
         moveItem.id,
         ...(group.bookmarkGroupIds || [])
@@ -56,13 +107,13 @@ export default function MoveItemModal (props) {
         ...(group.bookmarkIds || [])
       ]
     }
-    props.onCancelMoveItem()
+    onCancelMoveItem()
   }
   const modalProps = {
     open: openMoveModal,
     title: e('moveTo'),
     footer: null,
-    onCancel: props.onCancelMoveItem
+    onCancel: onCancelMoveItem
   }
   const treeProps = {
     treeData: data,
@@ -90,7 +141,7 @@ export default function MoveItemModal (props) {
           {e('ok')}
         </Button>
         <Button
-          onClick={props.onCancelMoveItem}
+          onClick={onCancelMoveItem}
           className='mg1l'
         >
           {e('cancel')}
@@ -98,4 +149,4 @@ export default function MoveItemModal (props) {
       </div>
     </Modal>
   )
-}
+})

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

@@ -27,7 +27,6 @@ import './tree-list.styl'
 import TreeExpander from './tree-expander'
 import TreeListItem from './tree-list-item'
 import TreeSearch from './tree-search'
-import MoveItemModal from './move-item-modal'
 import { CategoryColorPicker } from './category-color-picker.jsx'
 import { getRandomDefaultColor } from '../../common/rand-hex-color.js'
 
@@ -39,9 +38,6 @@ export default class ItemListTree extends Component {
       keyword: '',
       parentId: '',
       showNewBookmarkGroupForm: false,
-      openMoveModal: false,
-      moveItem: null,
-      moveItemIsGroup: false,
       bookmarkGroupTitle: '',
       bookmarkGroupColor: '',
       categoryTitle: '',
@@ -174,7 +170,7 @@ export default class ItemListTree extends Component {
 
   openMoveModal = (e, item, isGroup) => {
     e.stopPropagation()
-    this.setState({
+    window.store.storeAssign({
       openMoveModal: true,
       moveItem: item,
       moveItemIsGroup: isGroup
@@ -832,7 +828,7 @@ export default class ItemListTree extends Component {
   }
 
   render () {
-    const { ready, openMoveModal, moveItem, moveItemIsGroup } = this.state
+    const { ready } = this.state
     if (!ready) {
       return (
         <div className='pd3 aligncenter'>
@@ -846,13 +842,6 @@ export default class ItemListTree extends Component {
       staticList,
       listStyle = {}
     } = this.props
-    const moveProps = {
-      openMoveModal,
-      moveItem,
-      moveItemIsGroup,
-      bookmarkGroups,
-      onCancelMoveItem: this.onCancelMoveItem
-    }
     const level1Bookgroups = ready
       ? bookmarkGroups.filter(
         d => !d.level || d.level < 2
@@ -860,7 +849,6 @@ export default class ItemListTree extends Component {
       : []
     return (
       <div className={`tree-list item-type-${type}`}>
-        <MoveItemModal {...moveProps} />
         {
           staticList
             ? null

package/client/components/vnc/vnc-session.jsx

@@ -235,7 +235,7 @@ export default class VncSession extends RdpSession {
 
   renderHelp = () => {
     return (
-      <Tag color='red' className='mg1l'>Beta</Tag>
+      <Tag color='red' className='mg1l' variant='solid'>Beta</Tag>
     )
   }
 

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

@@ -0,0 +1,64 @@
+/**
+ * Widget control component - shows form for a selected widget
+ */
+import React, { useState } from 'react'
+import WidgetForm from './widget-form'
+import {
+  message
+} from 'antd'
+
+export default function WidgetControl ({ formData }) {
+  const [loading, setLoading] = useState(false)
+  const widget = formData
+  if (!widget.id) {
+    return (
+      <div className='widget-control-empty aligncenter pd3'>
+        <p>Select a widget to configure</p>
+      </div>
+    )
+  }
+
+  const handleFormSubmit = async (config) => {
+    setLoading(true)
+    try {
+      const result = await window.store.runWidget(widget.id, config)
+      const {
+        instanceId,
+        success,
+        error,
+        msg
+      } = result
+      if (!instanceId) {
+        if (success === false) {
+          message.error('Failed to run widget', error || '')
+        } else {
+          message.success(msg || 'Widget run successfully')
+        }
+        return
+      }
+      // Add instance to the store
+      const instance = {
+        id: result.instanceId,
+        title: `${widget.info.name} (${result.instanceId})`,
+        widgetId: result.widgetId,
+        serverInfo: result.serverInfo,
+        config
+      }
+      window.store.widgetInstances.push(instance)
+    } catch (err) {
+      console.error('Failed to run widget:', err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className='widget-control'>
+      <WidgetForm
+        widget={widget}
+        onSubmit={handleFormSubmit}
+        loading={loading}
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,115 @@
+/**
+ * Widget form component
+ */
+import React from 'react'
+import { Form, Input, InputNumber, Switch, Select, Button, message } from 'antd'
+import { formItemLayout, tailFormItemLayout } from '../../common/form-layout'
+
+export default function WidgetForm ({ widget, onSubmit, loading }) {
+  const [form] = Form.useForm()
+
+  if (!widget) {
+    return null
+  }
+
+  const { info } = widget
+  const { configs, type } = info
+  const isInstanceWidget = type === 'instance'
+  const txt = isInstanceWidget ? 'Start widget' : 'Run widget'
+
+  const handleSubmit = async (values) => {
+    try {
+      await onSubmit(values)
+      message.success('Widget started successfully')
+    } catch (error) {
+      message.error('Failed to start widget: ' + error.message)
+    }
+  }
+
+  const renderFormItem = (config) => {
+    const { name, type, description, choices } = config
+    let control = null
+
+    switch (type) {
+      case 'string':
+        control = <Input placeholder={description} />
+        break
+      case 'number':
+        control = <InputNumber style={{ width: '100%' }} placeholder={description} />
+        break
+      case 'boolean':
+        return (
+          <Form.Item
+            key={name}
+            {...formItemLayout}
+            label={name}
+            name={name}
+            valuePropName='checked'
+            tooltip={description}
+          >
+            <Switch />
+          </Form.Item>
+        )
+      default:
+        control = <Input placeholder={description} />
+    }
+
+    if (choices && choices.length > 0) {
+      control = (
+        <Select placeholder={description}>
+          {choices.map(choice => (
+            <Select.Option key={choice} value={choice}>
+              {choice}
+            </Select.Option>
+          ))}
+        </Select>
+      )
+    }
+
+    return (
+      <Form.Item
+        key={name}
+        {...formItemLayout}
+        label={name}
+        name={name}
+        tooltip={description}
+      >
+        {control}
+      </Form.Item>
+    )
+  }
+
+  const initialValues = configs.reduce((acc, config) => {
+    acc[config.name] = config.default
+    return acc
+  }, {})
+
+  return (
+    <div className='widget-form'>
+      <div className='pd1b'>
+        <h4>{info.name}</h4>
+        <p>{info.description}</p>
+      </div>
+      <Form
+        form={form}
+        onFinish={handleSubmit}
+        initialValues={initialValues}
+        layout='horizontal'
+      >
+        {configs.map(renderFormItem)}
+        <Form.Item
+          {...tailFormItemLayout}
+        >
+          <Button
+            type='primary'
+            htmlType='submit'
+            loading={loading}
+            disabled={loading}
+          >
+            {txt}
+          </Button>
+        </Form.Item>
+      </Form>
+    </div>
+  )
+}

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

@@ -0,0 +1,46 @@
+import { Popconfirm } from 'antd'
+import { CloseOutlined } from '@ant-design/icons'
+
+const e = window.translate
+
+export default function WidgetInstance ({ item }) {
+  const { id, title } = item
+  const cls = 'item-list-unit'
+  const delProps = {
+    title: e('del'),
+    className: 'pointer list-item-remove'
+  }
+  const icon = (
+    <CloseOutlined
+      {...delProps}
+    />
+  )
+  function onConfirm () {
+    window.store.stopWidget(id)
+  }
+  const popProps = {
+    title: e('del') + '?',
+    onConfirm,
+    okText: e('del'),
+    cancelText: e('cancel'),
+    placement: 'top'
+  }
+  return (
+    <div
+      key={id}
+      className={cls}
+    >
+      <div
+        title={title}
+        className='elli pd1y pd2x list-item-title'
+      >
+        {title}
+      </div>
+      <Popconfirm
+        {...popProps}
+      >
+        {icon}
+      </Popconfirm>
+    </div>
+  )
+}

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

@@ -0,0 +1,10 @@
+import WidgetInstance from './widget-instance'
+
+export default function WidgetInstances ({ widgetInstances }) {
+  return widgetInstances.map(item => (
+    <WidgetInstance
+      key={item.id}
+      item={item}
+    />
+  ))
+}

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

@@ -0,0 +1,155 @@
+/**
+ * widgets list
+ */
+import React, { useState, useEffect } from 'react'
+import {
+  Input,
+  Tabs
+} from 'antd'
+import WidgetInstances from './widget-instances'
+import classnames from 'classnames'
+import highlight from '../common/highlight'
+import {
+  auto
+} from 'manate/react'
+
+const e = window.translate
+
+export default auto(function WidgetsList ({ activeItemId, store }) {
+  const { widgetInstances } = store
+  const [tab, setTab] = useState('widgets') // or instances
+  const [widgets, setWidgets] = useState([])
+  const [keyword, setKeyword] = useState('')
+  const [ready, setReady] = useState(false)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setReady(true)
+    }, 200)
+    loadWidgets()
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [])
+
+  const loadWidgets = async () => {
+    try {
+      const widgets = await window.store.listWidgets()
+      setWidgets(widgets)
+    } catch (error) {
+      console.error('Failed to load widgets:', error)
+    }
+  }
+
+  const handleSearch = (e) => {
+    setKeyword(e.target.value)
+  }
+
+  const handleTabChange = (key) => {
+    setTab(key)
+  }
+
+  const onClickWidget = (widget) => {
+    window.store.setSettingItem(widget)
+  }
+
+  const renderWidgetItem = (widget, i) => {
+    const title = widget.info.name
+    const tag = ''
+    const cls = classnames(
+      'item-list-unit',
+      {
+        active: activeItemId === widget.id
+      }
+    )
+    const titleHighlight = highlight(
+      title,
+      keyword
+    )
+    return (
+      <div
+        key={widget.id}
+        className={cls}
+        onClick={() => onClickWidget(widget)}
+      >
+        <div
+          title={title}
+          className='elli pd1y pd2x list-item-title'
+        >
+          {tag}{titleHighlight || e('new')}
+        </div>
+      </div>
+    )
+  }
+
+  const renderWidgetsList = () => {
+    const filteredWidgets = keyword
+      ? widgets.filter(widget => widget.info.name.toLowerCase().includes(keyword.toLowerCase()))
+      : widgets
+
+    return (
+      <div className='item-list item-type-widgets'>
+        <div className='pd1y'>
+          <Input.Search
+            type='text'
+            placeholder='Search widgets...'
+            value={keyword}
+            onChange={handleSearch}
+            className='form-control'
+          />
+        </div>
+        <div className='item-list-wrap pd1y'>
+          {filteredWidgets.map(renderWidgetItem)}
+        </div>
+      </div>
+    )
+  }
+
+  const renderTabs = () => {
+    const instancesTag = e('runningInstances') + ` (${widgetInstances.length})`
+    const items = [
+      {
+        key: 'widgets',
+        label: e('widgets'),
+        children: null
+      },
+      {
+        key: 'instances',
+        label: instancesTag,
+        children: null
+      }
+    ]
+    return (
+      <Tabs
+        activeKey={tab}
+        onChange={handleTabChange}
+        items={items}
+      />
+    )
+  }
+
+  const renderInstancesSection = () => {
+    return (
+      <WidgetInstances
+        widgetInstances={widgetInstances}
+      />
+    )
+  }
+
+  if (!ready) {
+    return null
+  }
+
+  return (
+    <div>
+      {renderTabs()}
+      <div className='pd2x pd1y'>
+        {
+          tab === 'widgets'
+            ? renderWidgetsList()
+            : renderInstancesSection()
+        }
+      </div>
+    </div>
+  )
+})

package/client/store/init-state.js

@@ -190,6 +190,14 @@ export default () => {
     hasNodePty: window.pre.runSync('nodePtyCheck'),
     terminalFullScreen: false,
     hideDelKeyTip: ls.getItem(dismissDelKeyTipLsKey) === 'y',
-    tabsHeight: 36
+    tabsHeight: 36,
+
+    // widgets
+    widgets: [],
+    widgetInstances: [],
+    // move item
+    openMoveModal: false,
+    moveItem: null,
+    moveItemIsGroup: false
   }
 }

package/client/store/setting.js

@@ -91,9 +91,7 @@ export default Store => {
     ) {
       return store.hideSettingModal()
     }
-    store.storeAssign({
-      settingTab: settingMap.setting
-    })
+    store.settingTab = settingMap.setting
     store.setSettingItem(getInitItem([], settingMap.setting))
     store.openSettingModal()
   }

package/client/store/store.js

@@ -24,6 +24,7 @@ import transferHistoryExtend from './transfer-history'
 import batchInputHistory from './batch-input-history'
 import transferExtend from './transfer-list'
 import addressBookmarkExtend from './address-bookmark'
+import widgetsExtend from './widgets'
 import isColorDark from '../common/is-color-dark'
 import { getReverseColor } from '../common/reverse-color'
 import { uniq } from 'lodash-es'
@@ -295,5 +296,6 @@ transferHistoryExtend(Store)
 batchInputHistory(Store)
 transferExtend(Store)
 addressBookmarkExtend(Store)
+widgetsExtend(Store)
 
 export const StateStore = Store

package/client/store/widgets.js

@@ -0,0 +1,59 @@
+/**
+ * widgets related functions
+ */
+
+import {
+  message
+} from 'antd'
+import {
+  settingMap
+} from '../common/constants'
+import getInitItem from '../common/init-setting-item'
+
+export default Store => {
+  Store.prototype.listWidgets = async () => {
+    return window.pre.runGlobalAsync('listWidgets')
+  }
+
+  Store.prototype.runWidget = async (widgetId, config) => {
+    return window.pre.runGlobalAsync('runWidget', widgetId, config)
+  }
+
+  Store.prototype.deleteWidgetInstance = (instanceId) => {
+    const {
+      widgetInstances
+    } = window.store
+    const index = widgetInstances.findIndex(w => w.id === instanceId)
+    if (index > -1) {
+      widgetInstances.splice(index, 1)
+    }
+  }
+
+  Store.prototype.stopWidget = async (instanceId) => {
+    const {
+      store
+    } = window
+    const r = await window.pre.runGlobalAsync('stopWidget', instanceId)
+      .catch(err => {
+        console.error('stopWidget error', err)
+        message.error(window.translate('stopWidgetFailed') + ': ' + err.message)
+        return false
+      })
+    if (r) {
+      store.deleteWidgetInstance(instanceId)
+    }
+  }
+
+  Store.prototype.runWidgetFunc = async (instanceId, funcName, ...args) => {
+    return window.pre.runGlobalAsync('runWidgetFunc', instanceId, funcName, ...args)
+  }
+
+  Store.prototype.openWidgetsModal = () => {
+    const {
+      store
+    } = window
+    store.setSettingItem(getInitItem([], settingMap.widgets))
+    store.settingTab = settingMap.widgets
+    store.openSettingModal()
+  }
+}

package/package.json

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