@electerm/electerm-react 2.3.151 → 2.3.166

package/client/common/constants.js

@@ -102,7 +102,8 @@ export const settingMap = buildConst([
   'quickCommands',
   'addressBookmarks',
   'profiles',
-  'widgets'
+  'widgets',
+  'workspaces'
 ])
 
 export const staticNewItemTabs = new Set([
@@ -331,7 +332,8 @@ export const syncDataMaps = {
   terminalThemes: ['terminalThemes'],
   quickCommands: ['quickCommands'],
   profiles: ['profiles'],
-  addressBookmarks: ['addressBookmarks']
+  addressBookmarks: ['addressBookmarks'],
+  workspaces: ['workspaces']
 }
 export const terminalTypes = [
   'xterm-256color',

package/client/common/db.js

@@ -31,7 +31,8 @@ export const dbNames = without(
 
 export const dbNamesForWatch = without(
   Object.keys(settingMap),
-  settingMap.setting
+  settingMap.setting,
+  settingMap.widgets
 )
 
 /**

package/client/common/init-setting-item.js

@@ -36,5 +36,12 @@ export default (arr, tab) => {
       id: '',
       name: e(settingMap.widgets)
     }
+  } else if (tab === settingMap.workspaces) {
+    return {
+      id: '',
+      name: e(settingMap.workspaces),
+      layout: 'default',
+      tabsByBatch: {}
+    }
   }
 }

package/client/components/common/modal.jsx

@@ -0,0 +1,89 @@
+/**
+ * Simple modal component without animation
+ * Replaces antd Modal for better performance
+ */
+
+import { CloseOutlined } from '@ant-design/icons'
+import classnames from 'classnames'
+import './modal.styl'
+
+export default function Modal (props) {
+  const {
+    open,
+    title,
+    width = 520,
+    zIndex = 1000,
+    className,
+    wrapClassName,
+    children,
+    footer,
+    maskClosable = true,
+    onCancel
+  } = props
+
+  function handleMaskClick (e) {
+    if (e.target === e.currentTarget && maskClosable && onCancel) {
+      onCancel()
+    }
+  }
+
+  function handleClose () {
+    if (onCancel) {
+      onCancel()
+    }
+  }
+
+  if (!open) {
+    return null
+  }
+
+  const modalStyle = {
+    zIndex
+  }
+
+  const contentStyle = {
+    width: typeof width === 'number' ? `${width}px` : width
+  }
+
+  const cls = classnames(
+    'custom-modal-wrap',
+    wrapClassName,
+    className
+  )
+
+  return (
+    <div className={cls} style={modalStyle}>
+      <div
+        className='custom-modal-mask'
+        onClick={handleMaskClick}
+      />
+      <div className='custom-modal-container' onClick={handleMaskClick}>
+        <div
+          className='custom-modal-content'
+          style={contentStyle}
+        >
+          {title && (
+            <div className='custom-modal-header'>
+              <div className='custom-modal-title'>{title}</div>
+              <button
+                type='button'
+                className='custom-modal-close'
+                onClick={handleClose}
+              >
+                <CloseOutlined />
+              </button>
+            </div>
+          )}
+          <div className='custom-modal-body'>
+            {children}
+          </div>
+          {footer !== null && footer !== undefined && (
+            <div className='custom-modal-footer'>
+              {footer}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/client/components/common/modal.styl

@@ -0,0 +1,77 @@
+.custom-modal-wrap
+  position fixed
+  top 0
+  left 0
+  right 0
+  bottom 0
+  overflow auto
+  outline 0
+
+.custom-modal-mask
+  position fixed
+  top 0
+  left 0
+  right 0
+  bottom 0
+  background rgba(0, 0, 0, 0.45)
+
+.custom-modal-container
+  position relative
+  display flex
+  align-items flex-start
+  justify-content center
+  min-height 100%
+  padding 24px
+
+.custom-modal-content
+  position relative
+  background var(--main)
+  border-radius 8px
+  box-shadow 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)
+  margin-top 50px
+  max-width calc(100vw - 48px)
+
+.custom-modal-header
+  display flex
+  align-items center
+  justify-content space-between
+  padding 16px 24px
+  border-bottom 1px solid var(--main-darker)
+
+.custom-modal-title
+  font-size 16px
+  font-weight 600
+  color var(--text)
+  line-height 1.5
+  flex 1
+  overflow hidden
+  text-overflow ellipsis
+  white-space nowrap
+
+.custom-modal-close
+  display flex
+  align-items center
+  justify-content center
+  width 32px
+  height 32px
+  padding 0
+  margin-left 8px
+  background transparent
+  border none
+  border-radius 4px
+  color var(--text)
+  cursor pointer
+  transition background-color 0.2s
+  &:hover
+    background var(--main-darker)
+  &:focus
+    outline none
+
+.custom-modal-body
+  padding 0 24px 24px 24px
+  color var(--text)
+
+.custom-modal-footer
+  padding 12px 24px
+  border-top 1px solid var(--main-darker)
+  text-align right

package/client/components/common/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: <b>{serverInfo.url}</b></span>
+          <CopyOutlined
+            className='pointer mg1l'
+            onClick={handleCopy}
+          />
+        </div>
+        <div>Path: <b>{serverInfo.path}</b></div>
+      </div>
+    )
+  }
+
+  notification[type]({
+    message,
+    description: desc,
+    duration
+  })
+}

package/client/components/file-transfer/conflict-resolve.jsx

@@ -4,7 +4,8 @@
  */
 
 import { Component } from 'react'
-import { Modal, Button } from 'antd'
+import { Button } from 'antd'
+import Modal from '../common/modal'
 import { isString } from 'lodash-es'
 import AnimateText from '../common/animate-text'
 import formatTime from '../../common/time'

package/client/components/file-transfer/transfer-speed-format.js

@@ -47,6 +47,12 @@ export const computePassedTime = (startTime) => {
 }
 
 export const computeLeftTime = (bytes, total, startTime) => {
+  if (total === 0) {
+    return {
+      leftTime: '0s',
+      leftTimeInt: 0
+    }
+  }
   let now = Date.now()
   if (now <= startTime) {
     now = startTime + 1

package/client/components/file-transfer/transfer.jsx

@@ -71,6 +71,9 @@ export default class TransportAction extends Component {
     this.transport = null
     this.fromFile = null
     refsTransfers.remove(this.id)
+    if (this.isFtp) {
+      window.initingFtpTabIds?.delete(this.tabId)
+    }
   }
 
   localCheckExist = (path) => {
@@ -185,9 +188,9 @@ export default class TransportAction extends Component {
     const up = {}
     const total = transfer.fromFile.size
     let percent = total === 0
-      ? 0
+      ? 100
       : Math.floor(100 * transferred / total)
-    percent = percent >= 100 ? 99 : percent
+    percent = percent >= 100 ? 100 : percent
     up.percent = percent
     up.status = 'active'
     up.transferred = transferred

package/client/components/file-transfer/transports-action-store.jsx

@@ -9,6 +9,8 @@ import { maxTransport } from '../../common/constants'
 import { refsStatic } from '../common/ref'
 // import { action } from 'manate'
 
+window.initingFtpTabIds = new Set()
+
 export default class TransportsActionStore extends Component {
   componentDidMount () {
     this.control()
@@ -71,7 +73,9 @@ export default class TransportsActionStore extends Component {
         typeTo,
         typeFrom,
         inited,
-        id
+        id,
+        tabType,
+        tabId
       } = tr
 
       const isTransfer = typeTo !== typeFrom
@@ -80,6 +84,15 @@ export default class TransportsActionStore extends Component {
         continue
       }
 
+      // For ftp transfers, ensure only one per tabId is inited
+      if (tabType === 'ftp') {
+        const hasInited = fileTransfers.some(t => t.tabId === tabId && t.inited && t.id !== id)
+        if (hasInited || window.initingFtpTabIds.has(tabId)) {
+          continue
+        }
+        window.initingFtpTabIds.add(tabId)
+      }
+
       if (count < maxTransport) {
         count++
         refsStatic.get('transfer-queue')?.addToQueue(

package/client/components/main/main.jsx

@@ -31,6 +31,7 @@ import AIChat from '../ai/ai-chat'
 import Opacity from '../common/opacity'
 import MoveItemModal from '../tree-list/move-item-modal'
 import InputContextMenu from '../common/input-context-menu'
+import WorkspaceSaveModal from '../tabs/workspace-save-modal'
 import { pick } from 'lodash-es'
 import deepCopy from 'json-deep-copy'
 import './wrapper.styl'
@@ -305,6 +306,7 @@ export default auto(function Index (props) {
         <ConnectionHoppingWarning {...warningProps} />
         <TerminalCmdSuggestions {...cmdSuggestionsProps} />
         <TransferQueue />
+        <WorkspaceSaveModal store={store} />
       </div>
     </ConfigProvider>
   )

package/client/components/setting-panel/setting-common.jsx

@@ -518,6 +518,7 @@ export default class SettingCommon extends Component {
       onStartSessions: props.config.onStartSessions,
       bookmarks: props.bookmarks,
       bookmarkGroups: props.bookmarkGroups,
+      workspaces: props.store.workspaces,
       onChangeStartSessions: this.onChangeStartSessions
     }
     return (
@@ -528,7 +529,7 @@ export default class SettingCommon extends Component {
           <Select
             value={modifier}
             onChange={this.handleChangeModifier}
-            className='iblock width100'
+            className='width100'
             popupMatchSelectWidth={false}
             showSearch
           >
@@ -536,10 +537,10 @@ export default class SettingCommon extends Component {
               modifiers.map(this.renderOption)
             }
           </Select>
-          <span className='iblock mg1x'>+</span>
+          <span className='mg1x'>+</span>
           <Select
             value={key}
-            className='iblock width100'
+            className='width100'
             onChange={this.handleChangeKey}
             popupMatchSelectWidth={false}
             showSearch

package/client/components/setting-panel/start-session-select.jsx

@@ -1,15 +1,27 @@
-import { TreeSelect } from 'antd'
-import { PureComponent } from 'react'
+import { TreeSelect, Tabs, Select, Empty } from 'antd'
+import { useState } from 'react'
 import copy from 'json-deep-copy'
 import { createTitleWithTag } from '../../common/create-title'
+import {
+  AppstoreOutlined,
+  BookOutlined
+} from '@ant-design/icons'
+import HelpIcon from '../common/help-icon'
 
 const e = window.translate
 const { SHOW_CHILD } = TreeSelect
 
-export default class StartSessionSelect extends PureComponent {
-  buildData = () => {
-    const cats = this.props.bookmarkGroups
-    const tree = this.props.bookmarks
+function BookmarkSelect (props) {
+  const {
+    bookmarks,
+    bookmarkGroups,
+    onStartSessions,
+    onChangeStartSessions
+  } = props
+
+  const buildData = () => {
+    const cats = bookmarkGroups
+    const tree = bookmarks
       .reduce((p, k) => {
         return {
           ...p,
@@ -64,28 +76,141 @@ export default class StartSessionSelect extends PureComponent {
             ...(d.bookmarkIds || []).map(buildLeaf)
           ].filter(d => d)
         }
-        // if (!r.children.length) {
-        //   return ''
-        // }
         return r
       }).filter(d => d)
     return level1
   }
 
-  render () {
-    const rProps = {
-      treeData: this.buildData(),
-      value: copy(this.props.onStartSessions || []),
-      onChange: this.props.onChangeStartSessions,
-      treeCheckable: true,
-      showCheckedStrategy: SHOW_CHILD,
-      placeholder: e('pleaseSelect'),
-      style: {
-        width: '100%'
-      }
+  // onStartSessions is array for bookmarks
+  const value = Array.isArray(onStartSessions) ? onStartSessions : []
+
+  const rProps = {
+    treeData: buildData(),
+    value: copy(value),
+    onChange: onChangeStartSessions,
+    treeCheckable: true,
+    showCheckedStrategy: SHOW_CHILD,
+    placeholder: e('pleaseSelect'),
+    style: {
+      width: '100%'
     }
+  }
+  return (
+    <TreeSelect {...rProps} />
+  )
+}
+
+function WorkspaceSelect (props) {
+  const {
+    workspaces,
+    onStartSessions,
+    onChangeStartSessions
+  } = props
+
+  if (!workspaces.length) {
     return (
-      <TreeSelect {...rProps} />
+      <Empty
+        image={Empty.PRESENTED_IMAGE_SIMPLE}
+        description={e('noWorkspaces')}
+      />
     )
   }
+
+  // onStartSessions is string for workspace
+  const value = typeof onStartSessions === 'string' ? onStartSessions : undefined
+
+  return (
+    <Select
+      value={value}
+      onChange={onChangeStartSessions}
+      placeholder={e('workspaces')}
+      style={{ width: '100%' }}
+      allowClear
+    >
+      {workspaces.map(w => (
+        <Select.Option key={w.id} value={w.id}>
+          {w.name}
+        </Select.Option>
+      ))}
+    </Select>
+  )
+}
+
+export default function StartSessionSelect (props) {
+  const {
+    onStartSessions,
+    bookmarks,
+    bookmarkGroups,
+    workspaces,
+    onChangeStartSessions
+  } = props
+
+  // Determine initial tab based on what's configured
+  // string = workspace, array = bookmarks
+  const getInitialTab = () => {
+    if (typeof onStartSessions === 'string' && onStartSessions) {
+      return 'workspaces'
+    }
+    return 'bookmarks'
+  }
+
+  const [activeTab, setActiveTab] = useState(getInitialTab)
+
+  // When switching tabs, clear the value if needed
+  const handleTabChange = (key) => {
+    setActiveTab(key)
+    // Reset to appropriate default when switching
+    if (key === 'bookmarks' && typeof onStartSessions === 'string') {
+      onChangeStartSessions([])
+    } else if (key === 'workspaces' && Array.isArray(onStartSessions)) {
+      onChangeStartSessions(undefined)
+    }
+  }
+
+  const tabItems = [
+    {
+      key: 'bookmarks',
+      label: (
+        <span>
+          <BookOutlined /> {e('bookmarks')}
+        </span>
+      )
+    },
+    {
+      key: 'workspaces',
+      label: (
+        <span>
+          <AppstoreOutlined /> {e('workspaces')}
+          <HelpIcon link='https://github.com/electerm/electerm/wiki/Workspace-Feature' />
+        </span>
+      )
+    }
+  ]
+
+  return (
+    <div>
+      <Tabs
+        items={tabItems}
+        size='small'
+        activeKey={activeTab}
+        onChange={handleTabChange}
+      />
+      {activeTab === 'bookmarks'
+        ? (
+          <BookmarkSelect
+            bookmarks={bookmarks}
+            bookmarkGroups={bookmarkGroups}
+            onStartSessions={onStartSessions}
+            onChangeStartSessions={onChangeStartSessions}
+          />
+          )
+        : (
+          <WorkspaceSelect
+            workspaces={workspaces}
+            onStartSessions={onStartSessions}
+            onChangeStartSessions={onChangeStartSessions}
+          />
+          )}
+    </div>
+  )
 }

package/client/components/setting-panel/text-bg-modal.jsx

@@ -1,12 +1,13 @@
 import React, { useState } from 'react'
 import {
-  Modal,
   Input,
   InputNumber,
   Space,
   Typography,
-  Select
+  Select,
+  Button
 } from 'antd'
+import Modal from '../common/modal'
 import { ColorPicker } from '../bookmark-form/common/color-picker.jsx'
 
 const { TextArea } = Input
@@ -47,14 +48,24 @@ export default function TextBgModal ({
     setFontFamily(initialFontFamily)
   }
 
+  const footer = (
+    <>
+      <Button onClick={handleCancel}>
+        {e('cancel')}
+      </Button>
+      <Button type='primary' onClick={handleOk} className='mg1l'>
+        {e('ok')}
+      </Button>
+    </>
+  )
+
   return (
     <Modal
       title={e('terminalBackgroundText')}
       open={visible}
-      onOk={handleOk}
       onCancel={handleCancel}
       width={500}
-      destroyOnHidden
+      footer={footer}
     >
       <div className='pd1'>
         <Space direction='vertical' size='large' style={{ width: '100%' }}>

package/client/components/sftp/file-info-modal.jsx

@@ -3,7 +3,8 @@
  */
 
 import React from 'react'
-import { Modal, Button } from 'antd'
+import { Button } from 'antd'
+import Modal from '../common/modal'
 import resolve from '../../common/resolve'
 import time from '../../common/time'
 import { update } from 'lodash-es'

package/client/components/sftp/file-item.jsx

@@ -183,6 +183,7 @@ export default class FileSection extends React.Component {
         toPath,
         id: generate(),
         host: this.props.tab?.host,
+        tabType: this.props.tab?.type,
         ...createTransferProps(this.props),
         operation
       })
@@ -736,6 +737,7 @@ export default class FileSection extends React.Component {
     toPath = resolve(toPath, name)
     const obj = {
       host: this.props.tab?.host,
+      tabType: this.props.tab?.type,
       typeFrom: type,
       typeTo,
       fromPath: resolve(path, name),