@electerm/electerm-react 2.3.151 → 2.3.176

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/download.jsx

@@ -32,7 +32,7 @@ export default async function download (filename, text) {
     return
   }
   notification.success({
-    message: '',
+    title: '',
     description: (
       <ShowItem
         to={filePath}

package/client/common/error-handler.jsx

@@ -20,7 +20,7 @@ export default (e) => {
     </div>
   )
   notification.error({
-    message: msg,
+    title: msg,
     description,
     duration: 55
   })

package/client/common/fetch.jsx

@@ -30,7 +30,7 @@ export async function handleErr (res) {
   }
   log.debug(text, 'fetch err info')
   notification.error({
-    message: 'error',
+    title: 'error',
     description: (
       <div className='common-err'>
         {text}

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/connection-hopping-warnning.jsx

@@ -27,7 +27,7 @@ export default function ConnectionHoppingWarning (props) {
       return
     }
     notification.info({
-      message: e('connectionHopping'),
+      title: e('connectionHopping'),
       duration: 0,
       placement: 'bottom',
       key: connectionHoppingWarnKey,

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/quick-commands/qm.styl

@@ -17,16 +17,6 @@
   .qm-list-wrap
     max-height 100px
 
-.fil-keyword
-.fil-label
-  .qm-item
-    color var(--text-disabled)
-  .qm-item
-    &.name-match
-    &.label-match
-      font-weight bold
-      color var(--text)
-
 .qm-search-input
   max-width 200px
 @media (max-width: 500px)

package/client/components/quick-commands/quick-command-item.jsx

@@ -18,17 +18,14 @@ export default class QuickCommandsItem extends PureComponent {
   }
 
   render () {
-    const { name, id, nameMatch, labelMatch, shortcut } = this.props.item
+    const { name, id, shortcut } = this.props.item
     const {
       draggable,
       handleDragOver,
       handleDragStart,
       handleDrop
     } = this.props
-    const cls = classNames('qm-item mg1r mg1b', {
-      'name-match': nameMatch,
-      'label-match': labelMatch
-    })
+    const cls = classNames('qm-item mg1r mg1b')
     const btnProps = {
       className: cls,
       onClick: this.handleSelect,

package/client/components/quick-commands/quick-commands-box.jsx

@@ -129,15 +129,12 @@ export default function QuickCommandsFooterBox (props) {
     )
   }
 
-  function sortArray (array, keyword, labels, qmSortByFrequency) {
-    const sorters = [
-      (obj) => !(keyword && obj.name.toLowerCase().includes(keyword)),
-      (obj) => !labels.some((label) => (obj.labels || []).includes(label))
-    ]
-    if (qmSortByFrequency) {
-      sorters.push((obj) => -(obj.clickCount || 0))
-    }
-    return sortBy(array, sorters)
+  function filterArray (array, keyword, labels) {
+    return array.filter(obj => {
+      const nameMatches = !keyword || obj.name.toLowerCase().includes(keyword)
+      const labelMatches = !labels.length || labels.some((label) => (obj.labels || []).includes(label))
+      return nameMatches && labelMatches
+    })
   }
 
   const {
@@ -156,14 +153,10 @@ export default function QuickCommandsFooterBox (props) {
     return renderNoCmd()
   }
   const keyword0 = keyword.toLowerCase()
-  const filtered = sortArray(all, keyword0, labels, qmSortByFrequency)
-    .map(d => {
-      return {
-        ...d,
-        nameMatch: keyword && d.name.toLowerCase().includes(keyword),
-        labelMatch: labels.some((label) => (d.labels || []).includes(label))
-      }
-    })
+  const filtered = filterArray(all, keyword0, labels)
+  const sorted = qmSortByFrequency
+    ? sortBy(filtered, (obj) => -(obj.clickCount || 0))
+    : filtered
   const sprops = {
     value: labels,
     mode: 'multiple',
@@ -174,11 +167,7 @@ export default function QuickCommandsFooterBox (props) {
   const tp = pinnedQuickCommandBar
     ? 'primary'
     : 'text'
-  const cls = classNames(
-    'qm-list-wrap',
-    { 'fil-label': !!labels.length },
-    { 'fil-keyword': !!keyword }
-  )
+  const cls = classNames('qm-list-wrap')
   const type = qmSortByFrequency ? 'primary' : 'default'
   const w = openedSideBar ? 43 + leftSidebarWidth : 43
   const qmProps = {
@@ -233,7 +222,7 @@ export default function QuickCommandsFooterBox (props) {
           </Space.Compact>
         </Flex>
         <div className={cls}>
-          {filtered.map(renderItem)}
+          {sorted.map(renderItem)}
         </div>
       </div>
     </div>

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/setting-modal.jsx

@@ -39,7 +39,7 @@ export default auto(function SettingModalWrap (props) {
       shouldConfirmDel: tabsShouldConfirmDel.includes(settingTab),
       list: settingSidebarList
     }
-    const { bookmarks, bookmarkGroups } = store
+    const { bookmarks, bookmarkGroups, widgetInstances } = store
     const formProps = {
       store,
       formData: settingItem,
@@ -51,6 +51,7 @@ export default auto(function SettingModalWrap (props) {
       ]),
       bookmarkGroups,
       bookmarks,
+      widgetInstancesLength: widgetInstances.length,
       serials: store.serials,
       loaddingSerials: store.loaddingSerials
     }