@electerm/electerm-react 2.3.151 → 2.3.166

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

@@ -5,7 +5,8 @@ import {
   SearchOutlined
 } from '@ant-design/icons'
 import buildGroupData from '../bookmark-form/common/bookmark-group-tree-format'
-import { Tree, Modal, Button, Input } from 'antd'
+import { Tree, Button, Input } from 'antd'
+import Modal from '../common/modal'
 import { auto } from 'manate/react'
 const e = window.translate
 

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

@@ -10,9 +10,9 @@ import {
 import {
   Spin,
   message,
-  Modal,
   Tag
 } from 'antd'
+import Modal from '../common/modal'
 import * as ls from '../../common/safe-local-storage'
 import { copy } from '../../common/clipboard'
 import resolutions from '../rdp/resolutions'
@@ -250,7 +250,7 @@ export default class VncSession extends RdpSession {
       title: e('credentialsRequired'),
       content: this.renderForm(['password']),
       footer: null,
-      visible: true
+      open: true
     }
     return (
       <Modal

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

@@ -3,9 +3,7 @@
  */
 import React, { useState } from 'react'
 import WidgetForm from './widget-form'
-import {
-  message
-} from 'antd'
+import { showMsg } from './widget-notification-with-details'
 
 export default function WidgetControl ({ formData }) {
   const [loading, setLoading] = useState(false)
@@ -30,9 +28,9 @@ export default function WidgetControl ({ formData }) {
       } = result
       if (!instanceId) {
         if (success === false) {
-          message.error('Failed to run widget', error || '')
+          showMsg('Failed to run widget', 'error', null, 10, error || '')
         } else {
-          message.success(msg || 'Widget run successfully')
+          showMsg(msg, 'success', null, 10)
         }
         return
       }
@@ -45,6 +43,7 @@ export default function WidgetControl ({ formData }) {
         config
       }
       window.store.widgetInstances.push(instance)
+      showMsg(msg, 'success', result.serverInfo, 10)
     } catch (err) {
       console.error('Failed to run widget:', err)
     } finally {

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

@@ -2,7 +2,7 @@
  * Widget form component
  */
 import React from 'react'
-import { Form, Input, InputNumber, Switch, Select, Button, message } from 'antd'
+import { Form, Input, InputNumber, Switch, Select, Button } from 'antd'
 import { formItemLayout, tailFormItemLayout } from '../../common/form-layout'
 
 export default function WidgetForm ({ widget, onSubmit, loading }) {
@@ -18,12 +18,7 @@ export default function WidgetForm ({ widget, onSubmit, loading }) {
   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)
-    }
+    onSubmit(values)
   }
 
   const renderFormItem = (config) => {
@@ -86,7 +81,7 @@ export default function WidgetForm ({ widget, onSubmit, loading }) {
 
   return (
     <div className='widget-form'>
-      <div className='pd1b'>
+      <div className='pd1b alignright'>
         <h4>{info.name}</h4>
         <p>{info.description}</p>
       </div>

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

@@ -1,10 +1,11 @@
-import { Popconfirm } from 'antd'
-import { CloseOutlined } from '@ant-design/icons'
+import { Popconfirm, Popover } from 'antd'
+import { CloseOutlined, CopyOutlined } from '@ant-design/icons'
+import { copy } from '../../common/clipboard'
 
 const e = window.translate
 
 export default function WidgetInstance ({ item }) {
-  const { id, title } = item
+  const { id, title, serverInfo } = item
   const cls = 'item-list-unit'
   const delProps = {
     title: e('del'),
@@ -25,17 +26,51 @@ export default function WidgetInstance ({ item }) {
     cancelText: e('cancel'),
     placement: 'top'
   }
+  const handleCopy = () => {
+    if (serverInfo && serverInfo.url) {
+      copy(serverInfo.url)
+    }
+  }
+  const popoverContent = serverInfo
+    ? (
+      <div>
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <span>URL: {serverInfo.url}</span>
+          <CopyOutlined
+            className='pointer mg1l'
+            onClick={handleCopy}
+          />
+        </div>
+        <div>Path: {serverInfo.path}</div>
+      </div>
+      )
+    : null
+  const titleDiv = (
+    <div
+      title={title}
+      className='elli pd1y pd2x list-item-title'
+    >
+      {title}
+    </div>
+  )
   return (
     <div
       key={id}
       className={cls}
     >
-      <div
-        title={title}
-        className='elli pd1y pd2x list-item-title'
-      >
-        {title}
-      </div>
+      {
+        serverInfo
+          ? (
+            <Popover
+              content={popoverContent}
+              trigger='hover'
+              placement='top'
+            >
+              {titleDiv}
+            </Popover>
+            )
+          : titleDiv
+      }
       <Popconfirm
         {...popProps}
       >

package/client/components/widgets/widget-notification-with-details.jsx

@@ -0,0 +1,34 @@
+import { notification } from 'antd'
+import { CopyOutlined } from '@ant-design/icons'
+import { copy } from '../../common/clipboard'
+
+export function showMsg (message, type = 'success', serverInfo = null, duration = 10, description = '') {
+  const handleCopy = () => {
+    if (serverInfo && serverInfo.url) {
+      copy(serverInfo.url)
+    }
+  }
+
+  let desc = description
+  if (serverInfo) {
+    desc = (
+      <div>
+        {description && <div>{description}</div>}
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <span>URL: {serverInfo.url}</span>
+          <CopyOutlined
+            className='pointer mg1l'
+            onClick={handleCopy}
+          />
+        </div>
+        <div>Path: {serverInfo.path}</div>
+      </div>
+    )
+  }
+
+  notification[type]({
+    message,
+    description: desc,
+    duration
+  })
+}

package/client/css/basic.styl

@@ -32,7 +32,9 @@ body
   word-break break-all
 
 a
-  color var(--primary)
+  color var(--text)
+  &:hover
+    color var(--text-dark)
 
 .cap
   text-transform capitalize

package/client/store/init-state.js

@@ -75,6 +75,10 @@ export default () => {
     resolutions: ls.getItemJSON(resolutionsLsKey, []),
     terminalCommandHistory: new Set(ls.getItemJSON(cmdHistoryKey, [])),
 
+    // workspaces
+    workspaces: [],
+    workspaceSaveModalVisible: false,
+
     // init session control
     selectedSessions: [],
     sessionModalVisible: false,

package/client/store/load-data.js

@@ -115,13 +115,22 @@ export async function addTabFromCommandLine (store, opts) {
 export default (Store) => {
   Store.prototype.openInitSessions = function () {
     const { store } = window
-    const arr = store.config.onStartSessions || []
-    for (const s of arr) {
-      store.onSelectBookmark(s)
-    }
-    if (!arr.length && store.config.initDefaultTabOnStart) {
-      store.initFirstTab()
+    const onStartSessions = store.config.onStartSessions
+
+    // If onStartSessions is a string, it's a workspace ID
+    if (typeof onStartSessions === 'string' && onStartSessions) {
+      store.loadWorkspace(onStartSessions)
+    } else {
+      // Otherwise, it's an array of bookmark IDs
+      const arr = Array.isArray(onStartSessions) ? onStartSessions : []
+      for (const s of arr) {
+        store.onSelectBookmark(s)
+      }
+      if (!arr.length && store.config.initDefaultTabOnStart) {
+        store.initFirstTab()
+      }
     }
+
     store.confirmLoad()
     const { initTime, loadTime } = window.pre.runSync('getLoadTime')
     if (loadTime) {

package/client/store/store.js

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

package/client/store/workspace.js

@@ -0,0 +1,108 @@
+/**
+ * workspace related functions
+ */
+
+import {
+  settingMap
+} from '../common/constants'
+import getInitItem from '../common/init-setting-item'
+import generate from '../common/uid'
+
+export default Store => {
+  /**
+   * Get current workspace state (layout + tabs for each batch)
+   */
+  Store.prototype.getCurrentWorkspaceState = function () {
+    const { store } = window
+    const { layout, tabs } = store
+    // Group tabs by batch and get bookmark srcIds
+    const tabsByBatch = {}
+    for (const tab of tabs) {
+      const batch = tab.batch || 0
+      if (!tabsByBatch[batch]) {
+        tabsByBatch[batch] = []
+      }
+      // Store srcId (bookmark id) if available, otherwise store basic connection info
+      if (tab.srcId) {
+        tabsByBatch[batch].push({
+          srcId: tab.srcId
+        })
+      }
+    }
+    return {
+      layout,
+      tabsByBatch
+    }
+  }
+
+  /**
+   * Save current workspace
+   */
+  Store.prototype.saveWorkspace = function (name, id = null) {
+    const { store } = window
+    const state = store.getCurrentWorkspaceState()
+    const workspace = {
+      id: id || generate(),
+      name,
+      ...state,
+      createdAt: Date.now(),
+      updatedAt: Date.now()
+    }
+    if (id) {
+      // Update existing
+      store.editItem(id, workspace, settingMap.workspaces)
+    } else {
+      // Add new
+      store.addItem(workspace, settingMap.workspaces)
+    }
+    return workspace
+  }
+
+  /**
+   * Load a workspace - set layout and open tabs
+   */
+  Store.prototype.loadWorkspace = function (workspaceId) {
+    const { store } = window
+    const workspace = store.workspaces.find(w => w.id === workspaceId)
+    if (!workspace) {
+      return
+    }
+    const { layout, tabsByBatch } = workspace
+
+    // Close all existing tabs first
+    store.removeTabs(() => true)
+
+    // Set layout
+    store.setLayout(layout)
+    // Open tabs for each batch
+    for (const [batchStr, tabInfos] of Object.entries(tabsByBatch)) {
+      const batch = parseInt(batchStr, 10)
+      for (const tabInfo of tabInfos) {
+        if (tabInfo.srcId) {
+          // Open from bookmark
+          window.openTabBatch = batch
+          store.onSelectBookmark(tabInfo.srcId)
+        }
+      }
+    }
+  }
+
+  /**
+   * Delete a workspace
+   */
+  Store.prototype.deleteWorkspace = function (id) {
+    window.store.delItem({ id }, settingMap.workspaces)
+  }
+
+  /**
+   * Open workspace settings
+   */
+  Store.prototype.openWorkspaceSettings = function () {
+    const { store } = window
+    store.storeAssign({
+      settingTab: settingMap.workspaces
+    })
+    store.setSettingItem(getInitItem([], settingMap.workspaces))
+    store.openSettingModal()
+  }
+}

package/package.json

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