@electerm/electerm-react 2.3.126 → 2.3.151

package/client/common/constants.js

@@ -101,7 +101,8 @@ export const settingMap = buildConst([
   'bookmarkGroups',
   'quickCommands',
   'addressBookmarks',
-  'profiles'
+  'profiles',
+  'widgets'
 ])
 
 export const staticNewItemTabs = new Set([

package/client/common/db.js

@@ -25,7 +25,8 @@ const dbAction = (...args) => {
  */
 export const dbNames = without(
   Object.keys(settingMap),
-  settingMap.setting
+  settingMap.setting,
+  settingMap.widgets
 )
 
 export const dbNamesForWatch = without(

package/client/common/download.jsx

@@ -5,7 +5,22 @@ import { notification } from 'antd'
 import ShowItem from '../components/common/show-item'
 import { chooseSaveDirectory } from './choose-save-folder'
 
+function downloadForBrowser (filename, text) {
+  const blob = new Blob([text], { type: 'text/plain;charset=utf-8' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = filename
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  URL.revokeObjectURL(url)
+}
+
 export default async function download (filename, text) {
+  if (window.et.isWebApp) {
+    return downloadForBrowser(filename, text)
+  }
   const savePath = await chooseSaveDirectory()
   if (!savePath) {
     return

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

@@ -31,5 +31,10 @@ export default (arr, tab) => {
       id: '',
       name: e(settingMap.profiles)
     }
+  } else if (tab === settingMap.widgets) {
+    return {
+      id: '',
+      name: e(settingMap.widgets)
+    }
   }
 }

package/client/components/ai/ai-cache.jsx

@@ -31,6 +31,6 @@ export default function AiCache () {
     </>
   )
   return (
-    <Alert message={msg} type='info' className='mg2y' />
+    <Alert title={msg} type='info' className='mg2y' />
   )
 }

package/client/components/batch-op/batch-op.jsx

@@ -11,9 +11,9 @@ import {
   Input,
   Button,
   Table,
-  Drawer,
   Tabs
 } from 'antd'
+import Drawer from '../common/drawer'
 import {
   sidebarWidth,
   statusMap,
@@ -672,15 +672,10 @@ export default class BatchOp extends PureComponent {
     const pops = {
       open: showBatchOp,
       onClose: this.handleCancel,
-      className: 'setting-wrap',
-      width: innerWidth - sidebarWidth,
+      className: 'setting-wrap batch-op-wrap',
+      size: innerWidth - sidebarWidth,
       zIndex: 888,
-      placement: 'left',
-      styles: {
-        header: {
-          display: 'none'
-        }
-      }
+      placement: 'left'
     }
     return (
       <Drawer

package/client/components/bookmark-form/common/bookmark-group-tree-format.js

@@ -2,7 +2,7 @@
  * create bookmark group tree data
  */
 
-export default (bookmarkGroups = [], disabledId = '', returnMap = false) => {
+export default (bookmarkGroups = [], disabledId = '', returnMap = false, currentParentId = '') => {
   const btree = new Map(bookmarkGroups.map(d => [d.id, d]))
   function buildSubCats (id) {
     const x = btree.get(id)
@@ -12,7 +12,8 @@ export default (bookmarkGroups = [], disabledId = '', returnMap = false) => {
     const y = {
       key: x.id,
       value: x.id,
-      title: x.title
+      title: x.title,
+      disabled: x.id === disabledId || x.id === currentParentId
     }
     y.children = (x.bookmarkGroupIds || []).map(buildSubCats).filter(d => d)
     if (!y.children.length) {
@@ -26,7 +27,7 @@ export default (bookmarkGroups = [], disabledId = '', returnMap = false) => {
         title: d.title,
         value: d.id,
         key: d.id,
-        disabled: d.id === disabledId,
+        disabled: d.id === disabledId || d.id === currentParentId,
         children: (d.bookmarkGroupIds || []).map(buildSubCats).filter(d => d)
       }
       return r

package/client/components/bookmark-form/common/color-picker.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import { Popover } from 'antd'
-import { HexColorPicker, RgbaColorPicker } from 'react-colorful'
+import { Popover, ColorPicker as AntColorPicker } from 'antd'
 import { defaultColors, getRandomHexColor } from '../../../common/rand-hex-color.js'
 import { HexInput } from './hex-input.jsx'
 import './color-picker.styl'
@@ -18,8 +17,11 @@ export const ColorPicker = React.forwardRef((props, ref) => {
     setVisible(vis)
   }
 
+  function onColorChange (color) {
+    handleChange(props.isRgba ? color.toRgbString() : color.toHexString())
+  }
+
   function renderContent () {
-    const Picker = props.isRgba ? RgbaColorPicker : HexColorPicker
     return (
       <div className='color-picker-box'>
         <div className='fix'>
@@ -40,7 +42,10 @@ export const ColorPicker = React.forwardRef((props, ref) => {
             }
           </div>
           <div className='fright'>
-            <Picker color={value} onChange={handleChange} />
+            <AntColorPicker
+              value={value}
+              onChange={onColorChange}
+            />
           </div>
         </div>
         <div className='pd1y'>
@@ -57,7 +62,13 @@ export const ColorPicker = React.forwardRef((props, ref) => {
   if (props.disabled) return inner
 
   return (
-    <Popover content={renderContent()} trigger='click' open={visible} placement='bottomLeft' onOpenChange={handleVisibleChange}>
+    <Popover
+      content={renderContent()}
+      trigger='click'
+      open={visible}
+      placement='bottomLeft'
+      onOpenChange={handleVisibleChange}
+    >
       {inner}
     </Popover>
   )

package/client/components/bookmark-form/common/color-picker.styl

@@ -10,8 +10,7 @@
   width 92px
 .color-picker-box
   width 420px
-  .react-colorful
-    height 200px
+
 .color-picker-defaults
   width 200px
 .color-picker-choose

package/client/components/bookmark-form/common/connection-hopping.jsx

@@ -180,6 +180,7 @@ export default function renderConnectionHopping (props) {
         form={formChild}
         onFinish={handleFinish}
         initialValues={initialValues}
+        component='div'
       >
         {renderList()}
         {renderWarn()}

package/client/components/bookmark-form/common/ssh-host-selector.jsx

@@ -52,7 +52,7 @@ export default function SshHostSelector ({ ips = [], useIp, form, onBlur, onPast
         <InputAutoFocus
           name='host'
           onBlur={props.onBlur}
-          onPaste={e => props.onPaste(e, form)}
+          onPaste={e => onPaste(e, form)}
           addonBefore={<ColorPickerItem />}
         />
       </FormItem>

package/client/components/bookmark-form/common/ssh-tunnels.jsx

@@ -209,6 +209,7 @@ export default function renderSshTunnels (props) {
         form={formChild}
         onFinish={handleFinish}
         initialValues={initialValues}
+        component='div'
       >
         {renderList()}
         <FormItem

package/client/components/bookmark-form/config/common-fields.js

@@ -219,6 +219,7 @@ export const commonFields = {
 export const terminalSettings = [
   commonFields.envLang,
   commonFields.terminalType,
+  commonFields.proxy,
   commonFields.displayRaw,
   commonFields.fontFamily,
   commonFields.fontSize,

package/client/components/bookmark-form/tree-delete.jsx

@@ -1,7 +1,8 @@
 import StartSessionSelect from '../setting-panel/start-session-select'
 import {
   Tree,
-  Button
+  Button,
+  Space
 } from 'antd'
 import { defaultBookmarkGroupId, settingMap } from '../../common/constants'
 import deepCopy from 'json-deep-copy'
@@ -48,21 +49,23 @@ export default class BookmarkTreeDelete extends StartSessionSelect {
     const len = checkedKeys.length
     return (
       <div>
-        <div className='pd1'>
-          <Button
-            type='primary'
-            disabled={!len}
-            onClick={this.handleDel}
-          >
-            {e('delSelected')} ({len})
-          </Button>
-          <Button
-            onClick={this.handleCancel}
-          >
-            {e('cancel')}
-          </Button>
+        <div className='pd2'>
+          <Space.Compact>
+            <Button
+              type='primary'
+              disabled={!len}
+              onClick={this.handleDel}
+            >
+              {e('delSelected')} ({len})
+            </Button>
+            <Button
+              onClick={this.handleCancel}
+            >
+              {e('cancel')}
+            </Button>
+          </Space.Compact>
+          <Tree {...rProps} />
         </div>
-        <Tree {...rProps} />
       </div>
     )
   }

package/client/components/common/drawer.jsx

@@ -0,0 +1,62 @@
+/**
+ * Simple drawer component without animation
+ * Replaces antd Drawer for better performance
+ */
+
+import classnames from 'classnames'
+import './drawer.styl'
+
+export default function Drawer (props) {
+  const {
+    open,
+    placement = 'left',
+    size,
+    zIndex = 1000,
+    className,
+    children,
+    styles = {},
+    onClose
+  } = props
+
+  function handleMaskClick (e) {
+    if (e.target === e.currentTarget && onClose) {
+      onClose()
+    }
+  }
+
+  if (!open) {
+    return null
+  }
+
+  const drawerStyle = {
+    zIndex
+  }
+
+  const contentStyle = {
+    width: typeof size === 'number' ? `${size}px` : size,
+    ...styles.content
+  }
+
+  const cls = classnames(
+    'custom-drawer',
+    `custom-drawer-${placement}`,
+    className
+  )
+
+  return (
+    <div className={cls} style={drawerStyle}>
+      <div
+        className='custom-drawer-mask'
+        onClick={handleMaskClick}
+      />
+      <div
+        className='custom-drawer-content-wrapper'
+        style={contentStyle}
+      >
+        <div className='custom-drawer-content'>
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}

package/client/components/common/drawer.styl

@@ -0,0 +1,34 @@
+.custom-drawer
+  position fixed
+  top 0
+  left 43px
+  right 0
+  bottom 0
+
+.custom-drawer-mask
+  position absolute
+  top 0
+  left 0
+  right 0
+  bottom 0
+  background rgba(0, 0, 0, 0.45)
+
+.custom-drawer-content-wrapper
+  position absolute
+  top 0
+  bottom 0
+  background var(--main)
+  box-shadow 2px 0 8px rgba(0, 0, 0, 0.15)
+  overflow auto
+  color var(--text)
+
+.custom-drawer-left .custom-drawer-content-wrapper
+  left 0
+
+.custom-drawer-right .custom-drawer-content-wrapper
+  right 0
+
+.custom-drawer-content
+  position relative
+  height 100%
+  width 100%

package/client/components/common/input-auto-focus.jsx

@@ -5,7 +5,7 @@ import {
 import Password from './password'
 
 export default function InputAutoFocus (props) {
-  const { type, selectall = false, ...rest } = props
+  const { type, selectall = false, ref, ...rest } = props
   const inputRef = useRef(null)
   const isFirstRender = useRef(true)
 
@@ -14,7 +14,11 @@ export default function InputAutoFocus (props) {
       const { value } = props
       if (value && selectall && isFirstRender.current) {
         inputRef.current.focus()
-        inputRef.current.setSelectionRange(0, value.length)
+        if (inputRef.current.setSelectionRange) {
+          inputRef.current.setSelectionRange(0, value.length)
+        } else if (inputRef.current.select) {
+          inputRef.current.select()
+        }
         isFirstRender.current = false
       } else {
         inputRef.current.focus()
@@ -31,9 +35,18 @@ export default function InputAutoFocus (props) {
       InputComponent = Input
   }
 
+  const handleRef = (node) => {
+    inputRef.current = node
+    if (typeof ref === 'function') {
+      ref(node)
+    } else if (ref) {
+      ref.current = node
+    }
+  }
+
   return (
     <InputComponent
-      ref={inputRef}
+      ref={handleRef}
       {...rest}
     />
   )

package/client/components/common/logo-elem.jsx

@@ -17,7 +17,7 @@ export default function LogoElem () {
       <sup>
         <img src={logoPath1} className='iblock mwm-100 mg1r logo-img-small' />
       </sup>
-      <Tag color='#08c'>{packInfo.version}</Tag>
+      <Tag color='#08c' variant='solid'>{packInfo.version}</Tag>
     </h1>
   )
 }

package/client/components/common/password.jsx

@@ -56,7 +56,7 @@ export default forwardRef(function Password (props, ref) {
   let capsPrefix = null
   if (isCapsLockOn) {
     capsPrefix = (
-      <Tag color='orange' style={{ marginRight: 4 }}>CAPS</Tag>
+      <Tag color='orange' className='mg1r' variant='solid'>CAPS</Tag>
     )
   }
 

package/client/components/footer/footer.styl

@@ -35,6 +35,7 @@
   .bi-full
     display none
   &.bi-show
+    line-height 20px
     .bi-full
       display inline
     .bi-compact

package/client/components/main/main.jsx

@@ -29,6 +29,7 @@ import SshConfigLoadNotify from '../ssh-config/ssh-config-load-notify'
 import LoadSshConfigs from '../ssh-config/load-ssh-configs'
 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 { pick } from 'lodash-es'
 import deepCopy from 'json-deep-copy'
@@ -169,7 +170,8 @@ export default auto(function Index (props) {
       'isSyncingSetting',
       'leftSidebarWidth',
       'transferTab',
-      'sidebarPanelTab'
+      'sidebarPanelTab',
+      'openWidgetsModal'
     ]),
     fileTransfers: copiedTransfer,
     transferHistory: copiedHistory,
@@ -273,6 +275,7 @@ export default auto(function Index (props) {
         <FileInfoModal />
         <SettingModal store={store} />
         <BatchOp {...batchOpProps} />
+        <MoveItemModal store={store} />
         <div
           id='outside-context'
         >

package/client/components/profile/profile-form.jsx

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

package/client/components/quick-commands/qm.styl

@@ -1,6 +1,7 @@
 .qm-list-wrap
   max-height calc(100vh - 100px)
   overflow-y scroll
+  padding 20px 0 10px 0
 .qm-wrap-tooltip
   background var(--main)
   position absolute
@@ -19,14 +20,33 @@
 .fil-keyword
 .fil-label
   .qm-item
-    color var(--text-light)
+    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)
   .qm-search-input
     width 100px
 
 .item-list-unit.dragover
   border: 1px dashed var(--primary)
+.qm-label-select
+  min-width 120px
+
+.qm-flex
+  gap 8px
+
+@media (max-width: 768px)
+  .qm-flex
+    flex-direction column
+    align-items flex-start
+  .qm-search-input
+    max-width none
+    width 100%
+  .qm-label-select
+    width 100%

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

@@ -5,7 +5,7 @@
 import { useState, useRef } from 'react'
 import { quickCommandLabelsLsKey } from '../../common/constants'
 import { sortBy } from 'lodash-es'
-import { Button, Input, Select, Space } from 'antd'
+import { Button, Input, Select, Space, Flex } from 'antd'
 import * as ls from '../../common/safe-local-storage'
 import CmdItem from './quick-command-item'
 import {
@@ -169,14 +169,11 @@ export default function QuickCommandsFooterBox (props) {
     mode: 'multiple',
     onChange: handleChangeLabels,
     placeholder: e('labels'),
-    className: 'iblock',
-    style: {
-      minWidth: '100px'
-    }
+    className: 'qm-label-select'
   }
   const tp = pinnedQuickCommandBar
     ? 'primary'
-    : 'ghost'
+    : 'text'
   const cls = classNames(
     'qm-list-wrap',
     { 'fil-label': !!labels.length },
@@ -197,16 +194,14 @@ export default function QuickCommandsFooterBox (props) {
       {...qmProps}
     >
       <div className='pd2'>
-        <div className='pd2b fix'>
-          <span className='fleft'>
-            <Input.Search
-              value={keyword}
-              onChange={handleChange}
-              placeholder=''
-              className='iblock qm-search-input'
-            />
-          </span>
-          <span className='fleft mg1l'>
+        <Flex justify='space-between' className='qm-flex'>
+          <Input.Search
+            value={keyword}
+            onChange={handleChange}
+            placeholder=''
+            className='qm-search-input'
+          />
+          <Flex gap='small'>
             <Select
               {...sprops}
             >
@@ -215,31 +210,28 @@ export default function QuickCommandsFooterBox (props) {
               )}
             </Select>
             <Button
-              className='mg1l iblock'
               type={type}
               onClick={window.store.handleSortByFrequency}
             >
               {e('sortByFrequency')}
             </Button>
-          </span>
-          <span className='fright'>
-            <Space.Compact>
-              <Button
-                onClick={handleTogglePinned}
-                icon={<PushpinOutlined />}
-                type={tp}
-              />
-              <Button
-                onClick={window.store.handleOpenQuickCommandsSetting}
-                icon={<EditOutlined />}
-              />
-              <Button
-                onClick={handleClose}
-                icon={<CloseCircleOutlined />}
-              />
-            </Space.Compact>
-          </span>
-        </div>
+          </Flex>
+          <Space.Compact className='mg2l'>
+            <Button
+              onClick={handleTogglePinned}
+              icon={<PushpinOutlined />}
+              type={tp}
+            />
+            <Button
+              onClick={window.store.handleOpenQuickCommandsSetting}
+              icon={<EditOutlined />}
+            />
+            <Button
+              onClick={handleClose}
+              icon={<CloseCircleOutlined />}
+            />
+          </Space.Compact>
+        </Flex>
         <div className={cls}>
           {filtered.map(renderItem)}
         </div>

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

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

package/client/components/quick-commands/quick-commands-list-form.jsx

@@ -88,6 +88,7 @@ export default function renderQm () {
     return (
       <Tag
         title={c.desc}
+        variant='solid'
         key={c.cmd}
         onClick={() => {
           copy(c.cmd)

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

@@ -35,7 +35,7 @@ export default class QuickCommandsFooter extends PureComponent {
       >
         <Button
           size='small'
-          type='ghost'
+          type='text'
         >
           <span className='w500'>{e('quickCommands')}</span>
           <span className='l500'>Q</span>

package/client/components/session/session.jsx

@@ -736,7 +736,7 @@ export default class SessionWrapper extends Component {
     const layout = direction === 'leftRight' ? 'horizontal' : 'vertical'
     const [size1, size2] = this.state.splitSize
     const splitterProps = {
-      layout,
+      orientation: layout,
       onResize: this.onSplitResize,
       onResizeEnd: this.onSplitResize,
       className: notSplitVew ? 'not-split-view' : '',

package/client/components/setting-panel/deep-link-control.jsx

@@ -84,6 +84,7 @@ export default function DeepLinkControl () {
                   return (
                     <Tag
                       key={protocol}
+                      variant='solid'
                       icon={isRegistered ? <CheckCircleOutlined /> : <CloseCircleOutlined />}
                       color={isRegistered ? 'success' : 'default'}
                     >