@electerm/electerm-react 2.3.126 → 2.3.151

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

@@ -29,7 +29,7 @@ export default class ItemList extends React.PureComponent {
       this.setState({
         ready: true
       })
-    }, 200)
+    }, 0)
   }
 
   componentWillUnmount () {

package/client/components/setting-panel/list.styl

@@ -36,4 +36,4 @@
 .item-list
   .list-item-edit
   .list-item-apply
-    right 20px
+    right 20px

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

@@ -66,7 +66,7 @@ export default class SettingCommon extends Component {
       this.setState({
         ready: true
       })
-    }, 200)
+    }, 0)
   }
 
   componentWillUnmount () {
@@ -600,6 +600,7 @@ export default class SettingCommon extends Component {
                     <Tag
                       color={main}
                       className='mg1l'
+                      variant='solid'
                       style={
                         {
                           color: text

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

@@ -15,6 +15,7 @@ import TabQuickCommands from './tab-quick-commands'
 import TabSettings from './tab-settings'
 import TabThemes from './tab-themes'
 import TabProfiles from './tab-profiles'
+import TabWidgets from './tab-widgets'
 
 const e = window.translate
 
@@ -92,6 +93,11 @@ export default auto(function SettingModalWrap (props) {
         key: settingMap.profiles,
         label: e(settingMap.profiles),
         children: null
+      },
+      {
+        key: settingMap.widgets,
+        label: <>{e(settingMap.widgets)} <sup>Beta</sup></>,
+        children: null
       }
     ]
     const tabsProps = {
@@ -141,6 +147,13 @@ export default auto(function SettingModalWrap (props) {
           store={store}
           settingTab={settingTab}
         />
+        <TabWidgets
+          listProps={props0}
+          settingItem={settingItem}
+          formProps={formProps}
+          store={store}
+          settingTab={settingTab}
+        />
       </>
     )
   }

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

@@ -52,7 +52,7 @@ export default class SettingTerminal extends Component {
       this.setState({
         ready: true
       })
-    }, 200)
+    }, 0)
   }
 
   componentWillUnmount () {

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

@@ -3,7 +3,7 @@
  */
 
 import { Component } from 'react'
-import { Drawer } from 'antd'
+import Drawer from '../common/drawer'
 import { CloseCircleOutlined } from '@ant-design/icons'
 import { sidebarWidth } from '../../common/constants'
 import AppDrag from '../tabs/app-drag'
@@ -21,15 +21,9 @@ export default class SettingWrap extends Component {
       open: this.props.visible,
       onClose: this.props.onCancel,
       className: 'setting-wrap',
-      width: this.props.innerWidth - sidebarWidth,
+      size: this.props.innerWidth - sidebarWidth,
       zIndex: 888,
-      placement: 'left',
-      destroyOnHidden: true,
-      styles: {
-        header: {
-          display: 'none'
-        }
-      }
+      placement: 'left'
     }
     return (
       <Drawer
@@ -40,13 +34,13 @@ export default class SettingWrap extends Component {
           onClick={this.props.onCancel}
         />
         <CloseCircleOutlined
-          className='close-setting-wrap-icon alt-close-setting-wrap'
+          className='close-setting-wrap alt-close-setting-wrap'
           onClick={this.props.onCancel}
         />
         {
           this.props.useSystemTitleBar ? null : <AppDrag />
         }
-        {this.props.visible ? this.props.children : null}
+        {this.props.children}
       </Drawer>
     )
   }

package/client/components/setting-panel/setting-wrap.styl

@@ -1,18 +1,20 @@
 
-body .ant-drawer .ant-drawer-content-wrapper
-  left 43px
-.close-setting-wrap-icon
+
+.close-setting-wrap
   position absolute
   top 70px
   font-size 16px
   cursor pointer
   z-index 889
+  right 20px
   &:hover
     color var(--success)
 .alt-close-setting-wrap
-  right 20px
-.close-setting-wrap
-  top 70px
+  left 20px
+  right auto
+.batch-op-wrap .close-setting-wrap
+  top 40px
+  right 30px
 .setting-row
   position absolute
   top 127px

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

@@ -64,9 +64,9 @@ export default class StartSessionSelect extends PureComponent {
             ...(d.bookmarkIds || []).map(buildLeaf)
           ].filter(d => d)
         }
-        if (!r.children.length) {
-          return ''
-        }
+        // if (!r.children.length) {
+        //   return ''
+        // }
         return r
       }).filter(d => d)
     return level1

package/client/components/setting-panel/tab-widgets.jsx

@@ -0,0 +1,35 @@
+import SettingCol from './col'
+import WidgetControl from '../widgets/widget-control'
+import WidgetList from '../widgets/widgets-list'
+import {
+  settingMap
+} from '../../common/constants'
+
+export default function TabWidgets (props) {
+  const {
+    settingTab
+  } = props
+  if (settingTab !== settingMap.widgets) {
+    return null
+  }
+  const {
+    settingItem,
+    listProps,
+    formProps
+  } = props
+  return (
+    <div
+      className='setting-tabs-profile'
+    >
+      <SettingCol>
+        <WidgetList
+          {...listProps}
+        />
+        <WidgetControl
+          {...formProps}
+          key={settingItem.id}
+        />
+      </SettingCol>
+    </div>
+  )
+}

package/client/components/sftp/address-bookmark-item.jsx

@@ -54,7 +54,7 @@ export default class AddrBookmarkItem extends Component {
     } = this.props
     const id = `${item.host}#${item.id}`
     const globTag = item.isGlobal
-      ? <Tag color='green'>G</Tag>
+      ? <Tag color='green' variant='solid'>G</Tag>
       : null
     return (
       <div

package/client/components/sftp/paged-list.jsx

@@ -37,8 +37,9 @@ export default class ScrollFiles extends Component {
       current: this.state.page,
       pageSize: this.state.pageSize,
       total: this.props.list.length,
+      showLessItems: true,
       showSizeChanger: false,
-      simple: true,
+      simple: false,
       onChange: this.onChange
     }
     return (

package/client/components/sftp/permission-render.jsx

@@ -23,7 +23,7 @@ export default (perm, _onClick) => {
           Object.keys(permission).map(n => {
             const type = permission[n]
               ? 'primary'
-              : 'ghost'
+              : 'dashed'
             return (
               <Button
                 key={n + 'permi'}

package/client/components/sftp/sftp-entry.jsx

@@ -63,7 +63,7 @@ export default class Sftp extends Component {
       this.setState({
         ready: true
       })
-    }, 100)
+    }, 0)
   }
 
   componentDidUpdate (prevProps, prevState) {

package/client/components/sftp/sftp.styl

@@ -164,6 +164,19 @@
 .pager-wrap
   z-index 4
   position relative
+
+.sftp-has-pager
+  .sftp-table-content
+    position static
+    padding-bottom 42px
+  .pager-wrap
+    position absolute
+    bottom 0
+    left 0
+    width 100%
+    background var(--main)
+    border-top 1px solid var(--main-darker)
+
 .file-header-context-menu
   position fixed
   z-index 999

package/client/components/sidebar/index.jsx

@@ -6,7 +6,8 @@ import {
   PlusCircleOutlined,
   SettingOutlined,
   UpCircleOutlined,
-  BarsOutlined
+  BarsOutlined,
+  AppstoreOutlined
 } from '@ant-design/icons'
 import { Tooltip } from 'antd'
 import SideBarPanel from './sidebar-panel'
@@ -39,7 +40,8 @@ export default function Sidebar (props) {
     transferTab,
     showModal,
     showInfoModal,
-    sidebarPanelTab
+    sidebarPanelTab,
+    openWidgetsModal
   } = props
 
   const { store } = window
@@ -100,6 +102,7 @@ export default function Sidebar (props) {
   const syncActive = showSetting && settingTab === settingMap.setting && settingItem.id === 'setting-sync'
   const themeActive = showSetting && settingTab === settingMap.terminalThemes
   const bookmarksActive = showSetting && settingTab === settingMap.bookmarks
+  const widgetsActive = showSetting && settingTab === settingMap.widgets
   const sideProps = openedSideBar
     ? {
         className: 'sidebar-list',
@@ -177,6 +180,13 @@ export default function Sidebar (props) {
         >
           <BarsOutlined className='iblock font20 control-icon' onClick={toggleBatchOp} />
         </SideIcon>
+        <SideIcon
+          title={e('widgets')}
+          active={widgetsActive}
+        >
+          <AppstoreOutlined className='iblock font20 control-icon' onClick={openWidgetsModal} />
+        </SideIcon>
+
         <SideIcon
           title={e('about')}
           active={showInfoModal}

package/client/components/sidebar/transfer-history-modal.jsx

@@ -48,7 +48,7 @@ export default memo(function TransferHistoryModal (props) {
     sorter: sorterFactory('typeFrom'),
     render: (type, inst) => {
       return (
-        <Tag transfer={inst} />
+        <Tag transfer={inst} variant='solid' />
       )
     }
   }, {

package/client/components/theme/theme-list-item.jsx

@@ -62,7 +62,7 @@ export default function ThemeListItem (props) {
 
   function renderTooltipContent () {
     return (
-      <Space>
+      <Space.Compact>
         <Button
           size='small'
           icon={<EyeOutlined />}
@@ -79,7 +79,7 @@ export default function ThemeListItem (props) {
         >
           {e('apply')}
         </Button>
-      </Space>
+      </Space.Compact>
     )
   }
 
@@ -116,7 +116,8 @@ export default function ThemeListItem (props) {
     return (
       <Tag
         color={main}
-        className='mg1l'
+        className='mg1r'
+        variant='solid'
         style={
           {
             color: text

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

@@ -1,28 +1,144 @@
-// render bookmark select, use antd tree select
-import { useState } from 'react'
+// render bookmark select, use antd tree
+import { useState, useEffect } from 'react'
+import {
+  MergeOutlined,
+  SearchOutlined
+} from '@ant-design/icons'
 import buildGroupData from '../bookmark-form/common/bookmark-group-tree-format'
-import { TreeSelect, Modal, Button } from 'antd'
+import { Tree, Modal, Button, Input } from 'antd'
+import { auto } from 'manate/react'
 const e = window.translate
 
-export default function MoveItemModal (props) {
+const rootId = '__root__'
+
+// Helper function to filter tree data based on search text
+function filterTreeData (data, searchText) {
+  if (!searchText) {
+    return data
+  }
+  const lowerSearch = searchText.toLowerCase()
+
+  function filterNodes (nodes) {
+    return nodes.reduce((acc, node) => {
+      const titleText = typeof node.title === 'string'
+        ? node.title
+        : (node.title?.props?.children?.[1] || node.title?.props?.children || '')
+      const titleStr = String(titleText).toLowerCase()
+      const children = node.children ? filterNodes(node.children) : []
+
+      if (titleStr.includes(lowerSearch) || children.length > 0) {
+        acc.push({
+          ...node,
+          children: children.length > 0 ? children : node.children
+        })
+      }
+      return acc
+    }, [])
+  }
+
+  return filterNodes(data)
+}
+
+// Helper function to get all keys from tree data
+function getAllKeys (data) {
+  const keys = []
+  function traverse (nodes) {
+    for (const node of nodes) {
+      keys.push(node.key)
+      if (node.children) {
+        traverse(node.children)
+      }
+    }
+  }
+  traverse(data)
+  return keys
+}
+
+export default auto(function MoveItemModal (props) {
   const [groupId, setGroupId] = useState(undefined)
+  const [searchText, setSearchText] = useState('')
   const {
     openMoveModal,
     moveItem,
     moveItemIsGroup,
     bookmarkGroups
-  } = props
+  } = props.store
+
+  function onCancelMoveItem () {
+    window.store.storeAssign({
+      openMoveModal: false,
+      moveItem: null,
+      moveItemIsGroup: false
+    })
+  }
+
+  // Reset groupId and search when modal opens
+  useEffect(() => {
+    if (openMoveModal) {
+      setGroupId(undefined)
+      setSearchText('')
+    }
+  }, [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
+    })
+  }
+
+  // Filter tree data based on search
+  const filteredData = filterTreeData(data, searchText)
+  const expandedKeys = getAllKeys(filteredData)
+
+  function onTreeSelect (selectedKeys) {
+    if (selectedKeys.length > 0) {
+      // Find the node to check if it's disabled
+      const findNode = (nodes, key) => {
+        for (const node of nodes) {
+          if (node.key === key) return node
+          if (node.children) {
+            const found = findNode(node.children, key)
+            if (found) return found
+          }
+        }
+        return null
+      }
+      const node = findNode(data, selectedKeys[0])
+      if (node && !node.disabled) {
+        setGroupId(selectedKeys[0])
+      }
+    }
+  }
+
   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 +161,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,46 +178,59 @@ export default function MoveItemModal (props) {
         ...(group.bookmarkIds || [])
       ]
     }
-    props.onCancelMoveItem()
+    onCancelMoveItem()
   }
+
+  const footer = (
+    <>
+      <Button
+        type='primary'
+        onClick={onSelect}
+        disabled={!groupId}
+      >
+        {e('ok')}
+      </Button>
+      <Button
+        onClick={onCancelMoveItem}
+        className='mg1l'
+      >
+        {e('cancel')}
+      </Button>
+    </>
+  )
+
   const modalProps = {
     open: openMoveModal,
     title: e('moveTo'),
-    footer: null,
-    onCancel: props.onCancelMoveItem
+    footer,
+    onCancel: onCancelMoveItem
   }
+
   const treeProps = {
-    treeData: data,
-    onChange: setGroupId,
-    placeholder: e('moveTo'),
-    showSearch: true,
-    value: groupId,
-    popupMatchSelectWidth: false,
-    treeDefaultExpandAll: true,
-    className: 'width-100'
+    treeData: filteredData,
+    onSelect: onTreeSelect,
+    selectedKeys: groupId ? [groupId] : [],
+    expandedKeys,
+    autoExpandParent: true,
+    className: 'width-100 move-item-tree'
   }
+
   return (
     <Modal {...modalProps}>
-      <div className='pd1'>
-        <TreeSelect
-          {...treeProps}
+      <div className='pd1b'>
+        <Input
+          placeholder={e('search')}
+          prefix={<SearchOutlined />}
+          value={searchText}
+          onChange={e => setSearchText(e.target.value)}
+          allowClear
         />
       </div>
-      <div className='pd1'>
-        <Button
-          type='primary'
-          onClick={onSelect}
-          disabled={!groupId}
-        >
-          {e('ok')}
-        </Button>
-        <Button
-          onClick={props.onCancelMoveItem}
-          className='mg1l'
-        >
-          {e('cancel')}
-        </Button>
+      <div className='move-item-tree-wrap'>
+        <Tree
+          {...treeProps}
+        />
       </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: '',
@@ -59,7 +55,7 @@ export default class ItemListTree extends Component {
       this.setState({
         ready: true
       })
-    }, 100)
+    }, 0)
   }
 
   componentWillUnmount () {
@@ -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/tree-list/tree-list.styl

@@ -78,4 +78,9 @@
   margin-right 6px
   border-radius 2px
   border 1px solid #1a1a1a
-  vertical-align middle
+  vertical-align middle
+
+.move-item-tree-wrap
+  max-height 300px
+  overflow-y auto
+  padding 8px

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>
     )
   }