@electerm/electerm-react 2.3.126 → 2.3.136

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

@@ -673,7 +673,7 @@ export default class BatchOp extends PureComponent {
       open: showBatchOp,
       onClose: this.handleCancel,
       className: 'setting-wrap',
-      width: innerWidth - sidebarWidth,
+      size: innerWidth - sidebarWidth,
       zIndex: 888,
       placement: 'left',
       styles: {

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/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/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/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/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
@@ -24,9 +25,27 @@
     &.name-match
     &.label-match
       font-weight bold
+
+.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-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'}
                     >

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

@@ -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-wrap.jsx

@@ -21,7 +21,7 @@ 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,

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/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/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