@electerm/electerm-react 5.3.15 → 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-mobile-breadcrumb.jsx

@@ -0,0 +1,29 @@
+/**
+ * breadcrumb shown at the top of the settings content view on mobile.
+ * - parent crumb = the active setting tab, clickable, returns to the menu list
+ * - current crumb = the selected item name, plain text
+ * `onBack` + labels are props so it stays reusable for other panels
+ */
+
+import { ArrowLeftOutlined } from '@ant-design/icons'
+
+export default function SettingMobileBreadcrumb (props) {
+  const {
+    onBack,
+    parentLabel,
+    currentLabel
+  } = props
+  return (
+    <div className='setting-mobile-back'>
+      <button
+        className='setting-mobile-back-btn'
+        onClick={onBack}
+      >
+        <ArrowLeftOutlined />
+        <span className='setting-mobile-back-parent'>{parentLabel}</span>
+      </button>
+      <span className='setting-mobile-back-sep'>&gt;</span>
+      <span className='setting-mobile-back-current elli'>{currentLabel}</span>
+    </div>
+  )
+}

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

@@ -7,9 +7,11 @@ 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
+  modals,
+  settingPanelMobileBreakpoint
 } from '../../common/constants'
 const TabBookmarks = lazy(() => import('./tab-bookmarks'))
 const TabQuickCommands = lazy(() => import('./tab-quick-commands'))
@@ -17,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>
 
@@ -25,6 +28,11 @@ const e = window.translate
 export default auto(function SettingModalWrap (props) {
   const selectItem = (item) => {
     window.store.setSettingItem(item)
+    // narrow panels drill into the right col content after picking a menu
+    // item — same 800px breakpoint as the setting panel media query
+    if (window.store.innerWidth <= settingPanelMobileBreakpoint) {
+      window.store.settingMobileView = 'content'
+    }
   }
 
   function renderTabs () {
@@ -101,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),
@@ -126,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>
       </>
     )
   }
@@ -188,7 +209,6 @@ export default auto(function SettingModalWrap (props) {
       visible={show}
       useSystemTitleBar={useSystemTitleBar}
       innerWidth={innerWidth}
-      isMobile={props.store.isMobile}
     >
       {renderTabs()}
     </SettingModal>

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

@@ -16,9 +16,6 @@ export default class SettingWrap extends Component {
   }
 
   renderRightClose () {
-    if (this.props.isMobile) {
-      return null
-    }
     return (
       <CloseCircleOutlined
         className='close-setting-wrap-icon close-setting-wrap'

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

@@ -67,34 +67,103 @@
 .setting-col
   ::-webkit-scrollbar
     width 0
-@media (max-width: 1100px)
+@media (max-width: 800px)
   .setting-col
     position fixed
     top 128px
     bottom 0
     left var(--left-side-bar-width, 43px)
     right 0
-    overflow-y scroll
+    display flex
+    flex-direction column
+    overflow hidden
   .setting-row
     position static
     top auto
+  // right close button is redundant with the left one on mobile
+  .close-setting-wrap:not(.alt-close-setting-wrap)
+    display none
+  // menu view by default: the left col list fills the panel
   .setting-row-left
+    flex 1
+    min-height 0
+    overflow-y auto
+    position static
+    top auto
+    bottom auto
     left auto
     width auto
-    bottom auto
-    padding 138px 10px 10px 10px
+    padding 10px
   .setting-row-right
-    left auto
+    display none
+    position static
+    top auto
     right auto
     bottom auto
-    top auto
+    left auto
+    width auto
     padding 10px
-    position static
-    overflow visible
-  .setting-col-content
-    overflow visible
+  // content view: fixed breadcrumb on top, right col content scrolls below
+  .setting-view-content
+    .setting-mobile-back
+      display flex
+    .setting-row-left
+      display none
+    .setting-row-right
+      display flex
+      flex-direction column
+      flex 1
+      min-height 0
+      overflow hidden
+      position static
+      top auto
+      right auto
+      bottom auto
+      left auto
+      width auto
+      padding 10px
+    .setting-col-content
+      flex 1
+      overflow-y auto
+      min-height 0
   .setting-tabs-bookmarks
     .setting-row-left
       width auto
     .setting-row-right
-      left auto
+      left auto
+
+// breadcrumb used on the narrow (mobile) content view; hidden by default and
+// re-shown by `.setting-view-content` inside the 800px media query above
+.setting-mobile-back
+  display none
+  flex-shrink 0
+  align-items center
+  gap 4px
+  padding 8px 10px
+  background var(--main)
+  border-bottom 1px solid var(--main-light)
+  z-index 10
+.setting-mobile-back-btn
+  display flex
+  align-items center
+  gap 4px
+  height 24px
+  padding 0 6px
+  font-size 13px
+  color var(--primary)
+  background transparent
+  border 0
+  border-radius 4px
+  cursor pointer
+  &:hover
+    background var(--primary)
+    color var(--primary-contrast)
+.setting-mobile-back-sep
+  color var(--text-dark)
+  font-size 13px
+  line-height 24px
+  padding 0 2px
+.setting-mobile-back-current
+  font-size 13px
+  min-width 0
+  max-width 60%

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)