@electerm/electerm-react 5.3.26 → 5.5.9

package/client/components/main/main.jsx

@@ -1,5 +1,5 @@
 import { auto } from 'manate/react'
-import { useEffect } from 'react'
+import { lazy, Suspense, useEffect } from 'react'
 import Layout from '../layout/layout'
 import FileInfoModal from '../sftp/file-info-modal'
 import FileCompareModal from '../sftp/file-compare-modal'
@@ -10,7 +10,6 @@ import Sidebar from '../sidebar'
 import CssOverwrite from '../bg/css-overwrite'
 import UiTheme from './ui-theme'
 import CustomCss from '../bg/custom-css.jsx'
-import Resolutions from '../rdp/resolution-edit'
 import TerminalInteractive from '../terminal/terminal-interactive'
 import ConfirmModalStore from '../file-transfer/conflict-resolve.jsx'
 import TransferQueue from '../file-transfer/transfer-queue'
@@ -19,18 +18,21 @@ import TerminalCmdSuggestions from '../terminal/terminal-command-dropdown'
 import TransportsActionStore from '../file-transfer/transports-action-store.jsx'
 import classnames from 'classnames'
 import ShortcutControl from '../shortcuts/shortcut-control.jsx'
-import { isMac, isWin, textTerminalBgValue } from '../../common/constants'
+import {
+  footerHeight,
+  isMac,
+  isWin,
+  remoteMonitorBarHeight,
+  textTerminalBgValue
+} from '../../common/constants'
 import { isAIDisabled } from '../../common/ai-feature'
 import { ConfigProvider } from 'antd'
 import { NotificationContainer } from '../common/notification'
-import InfoModal from '../sidebar/info-modal.jsx'
 import RightSidePanel from '../side-panel-r/side-panel-r'
 import ConnectionHoppingWarning from './connection-hopping-warnning'
 import SshConfigLoadNotify from '../ssh-config/ssh-config-load-notify'
 import LoadSshConfigs from '../ssh-config/load-ssh-configs'
 import AIChat from '../ai/ai-chat-entry'
-import AIConfigModal from '../ai/ai-config-modal'
-import Opacity from '../common/opacity'
 import MoveItemModal from '../tree-list/move-item-modal'
 import InputContextMenu from '../common/input-context-menu'
 import WorkspaceSaveModal from '../tabs/workspace-save-modal'
@@ -44,9 +46,17 @@ import deepCopy from 'json-deep-copy'
 import './wrapper.styl'
 import TerminalInfo from '../terminal-info/terminal-info-entry'
 import ShortcutBarEntry from '../terminal/shortcut-bar-entry'
+import LazyBoundary from '../common/lazy-boundary'
+import { isRemoteMonitorBarVisible } from '../remote-monitor/visibility'
 import '../../common/fs.js'
 import './term-fullscreen.styl'
 
+const Resolutions = lazy(() => import('../rdp/resolution-edit'))
+const InfoModal = lazy(() => import('../sidebar/info-modal.jsx'))
+const AIConfigModal = lazy(() => import('../ai/ai-config-modal'))
+// window opacity is electron-only: lazy so the web app never loads the chunk
+const Opacity = lazy(() => import('../common/opacity'))
+
 export default auto(function Index (props) {
   useEffect(() => {
     const { store } = props
@@ -129,6 +139,7 @@ export default auto(function Index (props) {
     widgetInstances
   } = store
   const upgradeInfo = deepCopy(store.upgradeInfo)
+  const remoteMonitorBarVisible = isRemoteMonitorBarVisible(store)
   const cls = classnames({
     loaded: configLoaded,
     'not-webapp': !window.et.isWebApp,
@@ -147,12 +158,14 @@ export default auto(function Index (props) {
     'is-main': !isSecondInstance,
     'is-mobile': store.isMobile,
     'is-desktop': !store.isMobile,
-    'is-touch-device': store.isTouchDevice
+    'is-touch-device': store.isTouchDevice,
+    'remote-monitor-bar-on': remoteMonitorBarVisible
   })
   const ext1 = {
     className: cls,
     style: {
-      '--left-side-bar-width': store.leftSideBarWidth + 'px'
+      '--left-side-bar-width': store.leftSideBarWidth + 'px',
+      '--footer-stack-height': `${footerHeight + (remoteMonitorBarVisible ? remoteMonitorBarHeight : 0)}px`
     }
   }
   // Get active tab IDs
@@ -242,20 +255,6 @@ export default auto(function Index (props) {
     title: rightPanelTitle,
     rightPanelTab
   }
-  const terminalInfoProps = {
-    rightPanelTab,
-    ...deepCopy(store.terminalInfoProps),
-    ...pick(
-      config,
-      [
-        'host',
-        'port',
-        'saveTerminalLogToFile',
-        'terminalInfos',
-        'sessionLogPath'
-      ]
-    )
-  }
   const sshConfigProps = {
     ...pick(store, [
       'settingTab',
@@ -293,13 +292,23 @@ export default auto(function Index (props) {
           {...confsCss}
           configLoaded={configLoaded}
         />
-        <Opacity opacity={config.opacity} />
+        {window.et.isWebApp
+          ? null
+          : (
+            <LazyBoundary>
+              <Suspense fallback={null}>
+                <Opacity opacity={config.opacity} />
+              </Suspense>
+            </LazyBoundary>
+            )}
         <TerminalInteractive />
         <UiTheme
           {...themeProps}
         />
         <CustomCss customCss={config.customCss} configLoaded={configLoaded} />
-        <TextEditor />
+        {store.textEditorRequested && (
+          <TextEditor />
+        )}
         <UpdateCheck
           skipVersion={config.skipVersion}
           upgradeInfo={upgradeInfo}
@@ -325,11 +334,23 @@ export default auto(function Index (props) {
           config={config}
         />
         <Remote2RemoteHandlers />
-        <Resolutions {...resProps} />
-        <InfoModal {...infoModalProps} />
+        {openResolutionEdit && (
+          <LazyBoundary>
+            <Suspense fallback={null}>
+              <Resolutions {...resProps} />
+            </Suspense>
+          </LazyBoundary>
+        )}
+        {store.showInfoModal && (
+          <LazyBoundary>
+            <Suspense fallback={null}>
+              <InfoModal {...infoModalProps} />
+            </Suspense>
+          </LazyBoundary>
+        )}
         <RightSidePanel {...rightPanelProps}>
           {!isAIDisabled() && <AIChat {...aiChatProps} />}
-          <TerminalInfo key={store.activeTabId} {...terminalInfoProps} />
+          <TerminalInfo key={store.activeTabId} store={store} {...deepCopy(store.terminalInfoProps)} />
         </RightSidePanel>
         <SshConfigLoadNotify {...sshConfigProps} />
         <LoadSshConfigs
@@ -346,7 +367,13 @@ export default auto(function Index (props) {
         <BatchOpRunner />
         <ImportProgress />
         <ShortcutBarEntry store={store} />
-        {!isAIDisabled() && <AIConfigModal store={store} />}
+        {!isAIDisabled() && store.showAIConfigModal && (
+          <LazyBoundary>
+            <Suspense fallback={null}>
+              <AIConfigModal store={store} />
+            </Suspense>
+          </LazyBoundary>
+        )}
         <UnixTimestampTooltip />
       </div>
     </ConfigProvider>

package/client/components/main/term-fullscreen.styl

@@ -5,6 +5,7 @@
   .terminal-control
   .qm-wrap-tooltip
   .main-footer
+  .remote-monitor-bar
   .session-v-info
     display none
   // Mobile tabs carry the extra .mobile-tabs class, and mobile.styl uses
@@ -40,11 +41,16 @@
 // visible; the session shrinks to sit on top of the footer. RDP/VNC/Spice
 // fullscreen stays footer-less — inActiveTerminal is false for those tabs, so
 // the fs-with-footer class is absent there.
-// 36px matches footerHeight / the .main-footer height in footer.styl.
+// --footer-stack-height includes the 36px footer and the optional monitor row.
 .fullscreen.fs-with-footer
   .main-footer
     display block
     left 0 !important
+  &.remote-monitor-bar-on
+    .remote-monitor-bar
+      display flex
+      left 0 !important
+      width 100% !important
   .qm-wrap-tooltip
     display block
     left 0 !important
@@ -53,10 +59,10 @@
     display none
   .session-wrap.session-current
     .term-wrap
-      height calc(100% - 36px - var(--shortcut-bar-h, 0px)) !important
+      height calc(100% - var(--footer-stack-height, 36px) - var(--shortcut-bar-h, 0px) - var(--shortcut-bar-kb-offset, 0px)) !important
   // pinned quick-command bar (180px, same as quickCommandBoxHeight) sits
   // between terminal and footer — reserve its space too
   &.qm-pinned
     .session-wrap.session-current
       .term-wrap
-        height calc(100% - 36px - 180px - var(--shortcut-bar-h, 0px)) !important
+        height calc(100% - var(--footer-stack-height, 36px) - 180px - var(--shortcut-bar-h, 0px) - var(--shortcut-bar-kb-offset, 0px)) !important

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

@@ -9,7 +9,8 @@
   right 0
   z-index 89
   height auto
-  bottom 36px
+
+  bottom var(--footer-stack-height, 36px)
 
 .qm-pinned
   .qm-wrap-tooltip
@@ -101,4 +102,4 @@
     > .drag
       align-self flex-start
     > button:last-child
-      align-self flex-end
+      align-self flex-end

package/client/components/quick-commands/quick-command-create-modal.jsx

@@ -0,0 +1,60 @@
+/**
+ * Create a quick command from outside the settings panel (e.g. from the
+ * command history action menu), reusing the very same form the settings panel
+ * uses — no fork of the form, so fields/validation stay in sync.
+ *
+ * The form is heavy (form, shortcuts editor, templates), and it otherwise only
+ * lives inside the lazily loaded quick commands setting tab, so lazy load it
+ * here as well.
+ */
+
+import { lazy, Suspense } from 'react'
+import {
+  Modal,
+  Spin
+} from 'antd'
+import LazyBoundary from '../common/lazy-boundary'
+import generate from '../../common/uid'
+
+const QuickCommandForm = lazy(() => import('./quick-commands-form'))
+
+const e = window.translate
+
+export default function QuickCommandCreateModal (props) {
+  const { store, command, onClose } = props
+  const formData = {
+    id: '',
+    name: e('newQuickCommand'),
+    commands: [{
+      command,
+      id: generate(),
+      delay: 100
+    }]
+  }
+  return (
+    <Modal
+      open
+      title={e('addQuickCommands')}
+      onCancel={onClose}
+      destroyOnHidden
+      footer={null}
+      width={560}
+    >
+      <LazyBoundary>
+        <Suspense
+          fallback={(
+            <div className='pd3 aligncenter'>
+              <Spin />
+            </div>
+          )}
+        >
+          <QuickCommandForm
+            store={store}
+            formData={formData}
+            onSaved={onClose}
+          />
+        </Suspense>
+      </LazyBoundary>
+    </Modal>
+  )
+}

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

@@ -73,12 +73,18 @@ export default function QuickCommandForm (props) {
       store.editQuickCommand(formData.id, update)
     } else {
       store.addQuickCommand(update1)
-      store.setSettingItem({
-        id: '',
-        name: e('newQuickCommand')
-      })
+      // resetting the settings panel form only makes sense there; when the
+      // form is hosted elsewhere (e.g. the command history modal) the caller
+      // decides what happens next
+      if (!props.onSaved) {
+        store.setSettingItem({
+          id: '',
+          name: e('newQuickCommand')
+        })
+      }
     }
     message.success(e('saved'))
+    props.onSaved?.()
   }
   const initialValues = formData
   if (!initialValues.labels) {

package/client/components/rdp/file-transfer.js

@@ -7,6 +7,7 @@ import { getLocalFileInfo } from '../sftp/file-read'
 import { osResolve } from '../../common/resolve'
 import { filesize } from 'filesize'
 import sanitizeFilename from '../../common/sanitize-filename'
+import { chooseSaveDirectory } from '../../common/choose-save-folder'
 
 const LOG_PREFIX = '[RDP-FILE-TRANSFER]'
 
@@ -231,23 +232,22 @@ export class FileTransferManager {
 
   async handleFileDownload (fileInfo) {
     try {
-      const savePath = await window.api.openDialog({
+      const savePath = await chooseSaveDirectory({
         title: `Save ${fileInfo.name}`,
         message: `Choose where to save ${fileInfo.name}`,
-        properties: ['openDirectory', 'createDirectory'],
         noBrowserTransfer: true
       }).catch((err) => {
         this.log(`Save dialog error: ${err.message}`, 'error')
         return false
       })
 
-      if (!savePath || !savePath.length) {
+      if (!savePath) {
         this.log('Download cancelled by user', 'info')
         return
       }
 
       const safeName = sanitizeFilename(fileInfo.name)
-      const fullPath = osResolve(savePath[0], safeName)
+      const fullPath = osResolve(savePath, safeName)
 
       const fd = await new Promise((resolve, reject) => {
         window.fs.open(fullPath, O_WRONLY | O_CREAT | O_TRUNC, (err, fd) => {