@electerm/electerm-react 5.3.26 → 5.5.6

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

@@ -11,7 +11,6 @@ import SwitchLabel from '../common/switch'
 import {
   Select,
   Button,
-  Table,
   Space,
   Tag
 } from 'antd'
@@ -22,7 +21,8 @@ import InputNumberConfirm from '../common/input-number-confirm'
 import TextareaConfirm from '../common/textarea-confirm'
 import {
   settingMap,
-  proxyHelpLink
+  proxyHelpLink,
+  webAppHiddenSettings
 } from '../../common/constants'
 import defaultSettings from '../../common/default-setting'
 import Link from '../common/external-link'
@@ -320,56 +320,13 @@ export default class SettingCommon extends Component {
     const {
       enableGlobalProxy
     } = this.props.config
-    const helps = `http# http://proxy-server-over-tcp.com:3128
-      https#https://proxy-server-over-tls.com:3129
-      socks(v5)#socks://username:password@some-socks-proxy.com:9050 (username & password are optional)
-      socks5#socks5://username:password@some-socks-proxy.com:9050 (username & password are optional)
-      socks5h#socks5h://username:password@some-socks-proxy.com:9050 (username & password are optional)
-      socks4#socks4://some-socks-proxy.com:9050
-      socks4a#socks4a://some-socks-proxy.com:9050`
-      .split('\n')
-      .filter(d => d.trim())
-      .map(d => {
-        const [protocol, example] = d.split('#')
-        return {
-          protocol, example
-        }
-      })
-    const cols = Object.keys(helps[0]).map(k => {
-      return {
-        title: k,
-        dataIndex: k,
-        key: k,
-        render: (k) => k || ''
-      }
-    })
-    const table = (
-      <div>
-        <Table
-          columns={cols}
-          dataSource={helps}
-          bordered
-          pagination={false}
-          size='small'
-          rowKey='protocol'
-        />
-        <div>
-          <Link to={proxyHelpLink}>{proxyHelpLink}</Link>
-        </div>
-      </div>
-    )
-    const style = {
-      height: '414px',
-      width: '500px'
-    }
     return (
       <div className='pd1b'>
         <div className='pd1b'>
           <span className='pd1r'>
             {e('global')} {e('proxy')}
             <HelpIcon
-              title={table}
-              style={{ body: { style } }}
+              link={proxyHelpLink}
             />
           </span>
           <SwitchLabel
@@ -456,6 +413,7 @@ export default class SettingCommon extends Component {
     const {
       langs = []
     } = window.et
+    const isWebApp = !!window.et.isWebApp
     const terminalThemes = props.store.getSidebarList(settingMap.terminalThemes)
     const pops = {
       onStartSessions: props.config.onStartSessions,
@@ -475,9 +433,15 @@ export default class SettingCommon extends Component {
           config={props.config}
           store={props.store}
         />
-        <HotkeySetting
-          {...hotkeyProps}
-        />
+        {
+          isWebApp
+            ? null
+            : (
+              <HotkeySetting
+                {...hotkeyProps}
+              />
+              )
+        }
         <div className='pd1b'>{e('onStartBookmarks')}</div>
         <div className='pd2b'>
           <StartSession
@@ -502,12 +466,14 @@ export default class SettingCommon extends Component {
           }, e('keepaliveIntervalDesc'))
         }
         {
-          this.renderNumber('opacity', {
-            step: 0.05,
-            min: 0,
-            max: 1,
-            cls: 'opacity'
-          }, e('opacity'))
+          isWebApp
+            ? null
+            : this.renderNumber('opacity', {
+              step: 0.05,
+              min: 0,
+              max: 1,
+              cls: 'opacity'
+            }, e('opacity'))
         }
 
         <div className='pd2b'>
@@ -608,9 +574,12 @@ export default class SettingCommon extends Component {
             'allowMultiInstance',
             'disableDeveloperTool',
             'switchTabOnHover',
+            'disableTabIndex',
             'disableShortcutBar',
             'debug'
-          ].map(this.renderToggle)
+          ]
+            .filter(name => !isWebApp || !webAppHiddenSettings.includes(name))
+            .map(this.renderToggle)
         }
         {
           window.et.isWebApp ? null : <DeepLinkControl />

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

@@ -7,6 +7,7 @@ import { pick } from 'lodash-es'
 import { Tabs, Spin } from 'antd'
 import { lazy, Suspense } from 'react'
 import SettingModal from './setting-wrap'
+import LazyBoundary from '../common/lazy-boundary'
 import {
   settingMap,
   modals,
@@ -18,6 +19,7 @@ const TabSettings = lazy(() => import('./tab-settings'))
 const TabThemes = lazy(() => import('./tab-themes'))
 const TabProfiles = lazy(() => import('./tab-profiles'))
 const TabWidgets = lazy(() => import('./tab-widgets'))
+const TabTriggers = lazy(() => import('./tab-triggers'))
 
 const Loading = () => <div style={{ padding: 20, textAlign: 'center' }}><Spin /></div>
 
@@ -107,6 +109,11 @@ export default auto(function SettingModalWrap (props) {
         label: e(settingMap.quickCommands),
         children: null
       },
+      {
+        key: settingMap.triggers,
+        label: <span>{e('triggers')} <sup>Beta</sup></span>,
+        children: null
+      },
       {
         key: settingMap.profiles,
         label: e(settingMap.profiles),
@@ -132,48 +139,56 @@ export default auto(function SettingModalWrap (props) {
         <Tabs
           {...tabsProps}
         />
-        <Suspense fallback={<Loading />}>
-          <TabQuickCommands
-            listProps={props0}
-            settingItem={settingItem}
-            formProps={formProps}
-            store={store}
-            settingTab={settingTab}
-          />
-          <TabBookmarks
-            treeProps={treeProps}
-            settingItem={settingItem}
-            formProps={formProps}
-            settingTab={settingTab}
-          />
-          <TabSettings
-            listProps={props0}
-            settingItem={settingItem}
-            settingTab={settingTab}
-            store={store}
-          />
-          <TabThemes
-            listProps={props0}
-            settingItem={settingItem}
-            formProps={formProps}
-            store={store}
-            settingTab={settingTab}
-          />
-          <TabProfiles
-            listProps={props0}
-            settingItem={settingItem}
-            formProps={formProps}
-            store={store}
-            settingTab={settingTab}
-          />
-          <TabWidgets
-            listProps={props0}
-            settingItem={settingItem}
-            formProps={formProps}
-            store={store}
-            settingTab={settingTab}
-          />
-        </Suspense>
+        <LazyBoundary>
+          <Suspense fallback={<Loading />}>
+            <TabQuickCommands
+              listProps={props0}
+              settingItem={settingItem}
+              formProps={formProps}
+              store={store}
+              settingTab={settingTab}
+            />
+            <TabTriggers
+              listProps={props0}
+              settingItem={settingItem}
+              store={store}
+              settingTab={settingTab}
+            />
+            <TabBookmarks
+              treeProps={treeProps}
+              settingItem={settingItem}
+              formProps={formProps}
+              settingTab={settingTab}
+            />
+            <TabSettings
+              listProps={props0}
+              settingItem={settingItem}
+              settingTab={settingTab}
+              store={store}
+            />
+            <TabThemes
+              listProps={props0}
+              settingItem={settingItem}
+              formProps={formProps}
+              store={store}
+              settingTab={settingTab}
+            />
+            <TabProfiles
+              listProps={props0}
+              settingItem={settingItem}
+              formProps={formProps}
+              store={store}
+              settingTab={settingTab}
+            />
+            <TabWidgets
+              listProps={props0}
+              settingItem={settingItem}
+              formProps={formProps}
+              store={store}
+              settingTab={settingTab}
+            />
+          </Suspense>
+        </LazyBoundary>
       </>
     )
   }

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

@@ -509,7 +509,7 @@ export default class SettingTerminal extends Component {
         {
           this.renderNumber('fontSize', {
             step: 1,
-            min: 9
+            min: 5
           }, `${e('default')} ${e('fontSize')}`, 400)
         }
         <div className='pd2b'>
@@ -575,9 +575,14 @@ export default class SettingTerminal extends Component {
             'sftpPathFollowSsh',
             'sshSftpSplitView',
             'showCmdSuggestions',
-            'autoReconnectTerminal'
+            'autoReconnectTerminal',
+            'restoreTerminalSessionOnReload'
           ].map(d => this.renderToggle(d))
         }
+        {
+          // label differs from the config key
+          this.renderToggle('remoteMonitorBarEnabled', 'pd2b', e('monitorBar'))
+        }
         <div className='pd1b'>{e('dragDropBehavior')}</div>
         <Select
           onChange={this.handleChangeDragDropBehavior}

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

@@ -46,4 +46,4 @@
     line-height 1.5
   .setting-passwords-actions-cell
     flex-shrink 0
-    margin-left auto
+    margin-left auto

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

@@ -0,0 +1,71 @@
+import { Button, Form } from 'antd'
+import SettingCol from './col'
+import TriggerSettingList from '../triggers/trigger-setting-list'
+import TriggerForm, { buildTriggerFromFormValues } from '../triggers/trigger-form'
+import { validateTriggers } from '../terminal/automation/trigger-engine'
+import message from '../common/message'
+import { settingMap } from '../../common/constants'
+
+const e = window.translate
+
+export default function TabTriggers (props) {
+  const [form] = Form.useForm()
+  const {
+    settingTab,
+    store,
+    settingItem,
+    listProps
+  } = props
+  if (settingTab !== settingMap.triggers) {
+    return null
+  }
+  const handleSave = async () => {
+    try {
+      const v = await form.validateFields()
+      const next = buildTriggerFromFormValues(settingItem, v)
+      const errors = validateTriggers([next])
+      if (errors.length) {
+        message.error(errors[0])
+        return
+      }
+      if (settingItem.id) {
+        store.editTrigger(settingItem.id, next)
+      } else {
+        store.addTrigger(next)
+        store.setSettingItem({
+          id: '',
+          name: settingMap.triggers
+        })
+      }
+      message.success(e('saved'))
+    } catch (err) {
+      // validation failed, keep form as is
+    }
+  }
+
+  return (
+    <div
+      className='setting-tabs-triggers'
+    >
+      <SettingCol>
+        <TriggerSettingList
+          {...listProps}
+        />
+        <div key={settingItem.id}>
+          <TriggerForm
+            form={form}
+            initial={settingItem}
+          />
+          <div className='pd2l'>
+            <Button
+              type='primary'
+              onClick={handleSave}
+            >
+              {e('save')}
+            </Button>
+          </div>
+        </div>
+      </SettingCol>
+    </div>
+  )
+}

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

@@ -12,6 +12,7 @@ import { mode2permission, permission2mode } from '../../common/mode2permission'
 import FileIcon from './file-icon'
 import { filesize } from 'filesize'
 import { refsStatic } from '../common/ref'
+import LazyBoundary from '../common/lazy-boundary'
 import './file-compare-modal.styl'
 
 const e = window.translate
@@ -169,9 +170,11 @@ export default class FileCompareModal extends React.PureComponent {
         key: 'code',
         label: e('code'),
         children: (
-          <Suspense fallback={<Loading />}>
-            <CodeCompare file1={file1} file2={file2} tab={tab} />
-          </Suspense>
+          <LazyBoundary>
+            <Suspense fallback={<Loading />}>
+              <CodeCompare file1={file1} file2={file2} tab={tab} />
+            </Suspense>
+          </LazyBoundary>
         )
       }
     ]

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

@@ -36,6 +36,7 @@ import { filesize } from 'filesize'
 import { createTransferProps } from './transfer-common'
 import generate from '../../common/uid'
 import sanitizeFilename from '../../common/sanitize-filename'
+import { openTextEditor } from '../text-editor/open-text-editor'
 import { refsStatic, refs, filesRef } from '../common/ref'
 import iconsMap from '../sys-menu/icons-map'
 import message from '../common/message'
@@ -702,7 +703,7 @@ export default class FileSection extends React.Component {
   }
 
   onFileChange = (e, text) => {
-    this.editor.editWithSystemEditorDone({
+    this.editor?.editWithSystemEditorDone({
       id: this.id,
       text
     })
@@ -773,7 +774,8 @@ export default class FileSection extends React.Component {
 
   editFile = () => {
     refs.add(this.id, this)
-    this.editor?.openEditor({
+    // editor is lazy loaded, this will mount it on demand
+    openTextEditor({
       id: this.id,
       file: this.state.file
     })
@@ -1261,7 +1263,7 @@ export default class FileSection extends React.Component {
     if (isDirectory && id === 'size') {
       value = null
     } else if (!isDirectory && id === 'size') {
-      value = filesize(value)
+      value = filesize(Number(value) || 0)
     } else if (id === 'owner') {
       const { type } = this.props
       value = this.props[`${type}UidTree`]['' + value] || value

package/client/components/sftp/owner-list.js

@@ -26,6 +26,15 @@ function parseNames (str) {
 const linuxListUser = 'cat /etc/passwd'
 const linuxListGroup = 'cat /etc/group'
 
+// The local shell (node-bash) only exists on desktop builds; web/mobile builds
+// (electerm-web in a browser, electerm-ios/electerm-android) ship without it, so
+// `fs.run` rejects. These owner/group lists are a best-effort nicety for the
+// local file panel, and every rejection would surface as a spurious error
+// notification on those platforms — skip the probe entirely when we know there
+// is no local shell. `hasNodePty === false` is the explicit signal reported by
+// the server (see checkNodePty); an absent flag keeps desktop behaviour intact.
+const noLocalShell = isWin || window.et.hasNodePty === false
+
 export async function remoteListUsers (pid) {
   const users = await runCmd(pid, linuxListUser)
     .catch(console.error)
@@ -45,7 +54,7 @@ export async function remoteListGroups (pid) {
 }
 
 export async function localListUsers () {
-  if (isWin) {
+  if (noLocalShell) {
     return {}
   } else if (isMac) {
     const g = await window.fs.run('dscl . -list /Users UniqueID')
@@ -72,7 +81,7 @@ export async function localListUsers () {
 }
 
 export async function localListGroups () {
-  if (isWin) {
+  if (noLocalShell) {
     return {}
   } else if (isMac) {
     const g = await window.fs.run('dscl . list /Groups PrimaryGroupID')

package/client/components/side-panel-r/side-panel-r.jsx

@@ -4,7 +4,7 @@ import './right-side-panel.styl'
 import {
   CloseCircleOutlined,
   PushpinOutlined,
-  InfoCircleOutlined
+  BarChartOutlined
 } from '@ant-design/icons'
 import {
   Typography,
@@ -29,7 +29,7 @@ export default memo(function RightSidePanel (
   }
   const tag = rightPanelTab === 'ai'
     ? <Tag className='mg1r'>AI</Tag>
-    : <InfoCircleOutlined className='mg1r' />
+    : <BarChartOutlined className='mg1r' />
 
   function onDragEnd (nw) {
     window.store.setRightSidePanelWidth(nw)

package/client/components/sys-menu/menu-btn.jsx

@@ -65,6 +65,7 @@ class MenuBtn extends PureComponent {
   renderContext = () => {
     const items = [
       {
+        key: 'onNewSsh',
         func: 'onNewSsh',
         icon: 'CodeFilled',
         text: e('newBookmark'),
@@ -73,6 +74,7 @@ class MenuBtn extends PureComponent {
     ]
     if (window.store.hasNodePty) {
       items.push({
+        key: 'addTab',
         func: 'addTab',
         icon: 'RightSquareFilled',
         text: e('newTab'),
@@ -83,6 +85,7 @@ class MenuBtn extends PureComponent {
     //   type: 'hr'
     // },
     items.push({
+      key: 'bookmarks',
       noCloseMenu: true,
       icon: 'BookOutlined',
       text: e('bookmarks'),
@@ -90,18 +93,21 @@ class MenuBtn extends PureComponent {
     })
     items.push(
       {
+        key: 'history',
         noCloseMenu: true,
         icon: 'ClockCircleOutlined',
         text: e('history'),
         submenu: 'History'
       },
       {
+        key: 'sessions',
         noCloseMenu: true,
         icon: 'BarsOutlined',
         text: e('sessions'),
         submenu: 'Tabs'
       },
       {
+        key: 'layout',
         icon: 'AppstoreOutlined',
         text: e('layout'),
         submenu: 'Layout'
@@ -110,16 +116,19 @@ class MenuBtn extends PureComponent {
       //   type: 'hr'
       // },
       {
+        key: 'openAbout',
         func: 'openAbout',
         icon: 'InfoCircleOutlined',
         text: e('about')
       },
       {
+        key: 'openSetting',
         func: 'openSetting',
         icon: 'SettingOutlined',
         text: e('settings')
       },
       {
+        key: 'openDevTools',
         func: 'openDevTools',
         icon: 'LeftSquareFilled',
         text: e('toggledevtools')
@@ -128,19 +137,23 @@ class MenuBtn extends PureComponent {
       //   type: 'hr'
       // },
       {
+        key: 'zoom',
         module: 'Zoom'
       },
       {
+        key: 'minimize',
         func: 'minimize',
         icon: 'SwitcherFilled',
         text: e('minimize')
       },
       {
+        key: 'maximize',
         func: 'maximize',
         icon: 'LayoutFilled',
         text: e('maximize')
       },
       {
+        key: 'reload',
         func: 'reload',
         icon: 'ReloadOutlined',
         text: e('reload')
@@ -149,6 +162,7 @@ class MenuBtn extends PureComponent {
       //   type: 'hr'
       // },
       {
+        key: 'onCheckUpdate',
         func: 'onCheckUpdate',
         icon: 'UpCircleOutlined',
         text: e('checkForUpdate')
@@ -157,17 +171,32 @@ class MenuBtn extends PureComponent {
       //   type: 'hr'
       // },
       {
+        key: 'restart',
         func: 'restart',
         icon: 'RedoOutlined',
         text: e('restart')
       },
       {
+        key: 'close',
         func: 'close',
         icon: 'CloseOutlined',
         text: e('close')
       }
     )
-    return items
+    return this.filterMenus(items)
+  }
+
+  // Only show menus listed in window.et.sysMenus, when it is defined,
+  // eg: window.et.sysMenus = ['onNewSsh', 'bookmarks', 'openSetting', 'close']
+  // available keys: onNewSsh, addTab, bookmarks, history, sessions, layout,
+  // openAbout, openSetting, openDevTools, zoom, minimize, maximize, reload,
+  // onCheckUpdate, restart, close
+  filterMenus = (items) => {
+    const { sysMenus } = window.et || {}
+    if (!Array.isArray(sysMenus)) {
+      return items
+    }
+    return items.filter(d => d.type === 'hr' || sysMenus.includes(d.key))
   }
 
   renderMenu () {

package/client/components/tabs/index.jsx

@@ -225,7 +225,7 @@ export default class Tabs extends Component {
       return {
         key: i + '##' + t.id,
         label: (
-          <span><TabTitle tab={t} /></span>
+          <span><TabTitle tab={t} config={this.props.config} /></span>
         ),
         onClick: () => this.handleClickMenu({ key: i + '##' + t.id })
       }
@@ -423,7 +423,7 @@ export default class Tabs extends Component {
       return {
         key: i + '##' + t.id,
         label: (
-          <span><TabTitle tab={t} /></span>
+          <span><TabTitle tab={t} config={this.props.config} /></span>
         ),
         onClick: () => this.handleClickMenu({ key: i + '##' + t.id })
       }

package/client/components/tabs/tab-title.jsx

@@ -1,7 +1,7 @@
 import createName from '../../common/create-title'
 
 export default function tabTitle (props) {
-  const { tab } = props
+  const { tab, config } = props
   const title = createName(tab)
   const { tabCount, color } = props.tab
   const styleTag = color
@@ -9,7 +9,8 @@ export default function tabTitle (props) {
     : {}
   return (
     <span className='tab-title'>
-      <span style={styleTag}>●</span> {tabCount}. {title}
+      <span style={styleTag}>●</span>
+      {!(config && config.disableTabIndex) ? ` ${tabCount}.` : ''} {title}
     </span>
   )
 }

package/client/components/tabs/tab.jsx

@@ -561,7 +561,11 @@ class Tab extends Component {
                 )
               }
               <span className='tab-title'>
-                <span className='iblock mg1r tab-count' style={styleTag}>{tabCount}</span>
+                {!(config && config.disableTabIndex)
+                  ? (
+                    <span className='iblock mg1r tab-count' style={styleTag}>{tabCount}</span>
+                    )
+                  : null}
                 {tab.isPinned && <PushpinFilled className='tab-pin' />}
                 <span className='mg1r'>{title}</span>
               </span>