@electerm/electerm-react 3.15.175 → 3.15.186

package/client/components/session/session-control.jsx

@@ -0,0 +1,331 @@
+/**
+ * Session control bar — pane tabs and action icons.
+ * On mobile a menu icon is shown; clicking it toggles the control icons.
+ */
+import {
+  SearchOutlined,
+  FullscreenOutlined,
+  PaperClipOutlined,
+  CloseOutlined,
+  ApartmentOutlined,
+  MoreOutlined,
+  ColumnWidthOutlined,
+  LogoutOutlined
+} from '@ant-design/icons'
+import { Tooltip, Popover } from 'antd'
+import classnames from 'classnames'
+import {
+  paneMap,
+  connectionMap,
+  terminalSerialType
+} from '../../common/constants'
+import { SplitViewIcon } from '../icons/split-view'
+import { HeartbeatIcon } from '../icons/heartbeat'
+import './session-control.styl'
+
+const e = window.translate
+
+export default function SessionControl (props) {
+  const {
+    tab,
+    isMobile,
+    isDisabled,
+    isSshDisabled,
+    isNotTerminalType,
+    canSplitView,
+    sftpPathFollowSsh,
+    keepaliveEnabled,
+    broadcastInput,
+    wrapDisabled,
+    delKeyPressed,
+    hideDelKeyTip,
+    onChangePane,
+    toggleCheckSftpPathFollowSsh,
+    onSshSftpSplitView,
+    toggleKeepalive,
+    toggleBroadcastInput,
+    toggleWrap,
+    onFullscreen,
+    onOpenSearch,
+    onDismissDelKeyTip,
+    onExitGracefully
+  } = props
+
+  if (isNotTerminalType) {
+    return null
+  }
+
+  const isSsh = !!tab.authType
+  const isLocal = !isSsh && (tab.type === connectionMap.local || !tab.type)
+  const showSshFeatures = isSsh || isLocal
+
+  // ---- sub-renderers ----
+
+  function renderPaneControl () {
+    if (isDisabled) {
+      return null
+    }
+    const { sshSftpSplitView, pane } = tab
+    if (sshSftpSplitView && canSplitView) {
+      return null
+    }
+    const types = [
+      paneMap.terminal,
+      paneMap.fileManager
+    ]
+    const controls = [
+      isSsh ? paneMap.ssh : paneMap.terminal
+    ]
+    if (isSsh || isLocal) {
+      controls.push(isSsh ? paneMap.sftp : paneMap.fileManager)
+    }
+    return (
+      <div className='term-sftp-tabs fleft'>
+        {
+          controls.map((type, i) => {
+            const cls = classnames(
+              'type-tab',
+              type,
+              {
+                active: types[i] === pane
+              }
+            )
+            return (
+              <span
+                className={cls}
+                key={type + '_' + i}
+                onClick={() => onChangePane(types[i])}
+              >
+                <span className='type-tab-txt'>
+                  {e(type)}
+                  <span className='type-tab-line' />
+                </span>
+              </span>
+            )
+          })
+        }
+      </div>
+    )
+  }
+
+  function renderDelTip (isS) {
+    if (!isS || hideDelKeyTip || !delKeyPressed) {
+      return null
+    }
+    return (
+      <div className='type-tab'>
+        <span className='mg1r'>Try <b>Shift + Backspace</b>?</span>
+        <CloseOutlined
+          onClick={onDismissDelKeyTip}
+          className='pointer'
+        />
+      </div>
+    )
+  }
+
+  function renderSftpPathFollowControl () {
+    if (isDisabled) {
+      return null
+    }
+    const { pane, enableSsh, sshSftpSplitView } = tab
+    const checkTxt = e('sftpPathFollowSsh')
+    const checkProps = {
+      onClick: toggleCheckSftpPathFollowSsh,
+      className: classnames(
+        'sftp-follow-ssh-icon sess-icon pointer',
+        {
+          active: sftpPathFollowSsh
+        }
+      )
+    }
+    const isS = pane === paneMap.terminal ||
+      sshSftpSplitView
+    return (
+      <>
+        {
+          (isSsh && enableSsh) || isLocal
+            ? (
+              <Tooltip title={checkTxt}>
+                <span {...checkProps}>
+                  <PaperClipOutlined />
+                </span>
+              </Tooltip>
+              )
+            : null
+        }
+        {renderDelTip(isS)}
+      </>
+    )
+  }
+
+  function renderSplitToggle () {
+    if (isMobile) {
+      return null
+    }
+    if (!canSplitView || isNotTerminalType || !showSshFeatures) {
+      return null
+    }
+    const title = e('sshSftpSplitView')
+    const { sshSftpSplitView } = tab
+    const cls = classnames(
+      'pointer sess-icon split-view-toggle',
+      {
+        active: sshSftpSplitView
+      }
+    )
+    return (
+      <Tooltip title={title} placement='bottomLeft'>
+        <span
+          className={cls}
+          onClick={onSshSftpSplitView}
+        >
+          <SplitViewIcon />
+        </span>
+      </Tooltip>
+    )
+  }
+
+  function renderKeepaliveIcon () {
+    if (isSshDisabled || !showSshFeatures) {
+      return null
+    }
+    const title = e('keepalive')
+    const iconProps = {
+      className: classnames('sess-icon pointer keepalive-icon', {
+        active: keepaliveEnabled
+      }),
+      onClick: toggleKeepalive
+    }
+    return (
+      <Tooltip title={title}>
+        <HeartbeatIcon {...iconProps} />
+      </Tooltip>
+    )
+  }
+
+  function renderBroadcastIcon () {
+    if (isSshDisabled || !showSshFeatures) {
+      return null
+    }
+    const title = e('broadcastInput')
+    const iconProps = {
+      className: classnames('sess-icon pointer broadcast-icon', {
+        active: broadcastInput
+      }),
+      onClick: toggleBroadcastInput
+    }
+    return (
+      <Tooltip title={title}>
+        <ApartmentOutlined {...iconProps} />
+      </Tooltip>
+    )
+  }
+
+  function renderWrapIcon () {
+    const title = e(wrapDisabled ? 'enableWrap' : 'disableWrap')
+    const iconProps = {
+      className: classnames('sess-icon pointer wrap-toggle-icon', {
+        active: wrapDisabled
+      }),
+      onClick: toggleWrap
+    }
+    return (
+      <Tooltip title={title}>
+        <ColumnWidthOutlined {...iconProps} />
+      </Tooltip>
+    )
+  }
+
+  function renderExitGracefullyIcon () {
+    if (tab.type !== terminalSerialType) {
+      return null
+    }
+    const title = e('exitGracefully')
+    return (
+      <Tooltip title={title}>
+        <LogoutOutlined
+          className='sess-icon pointer exit-gracefully-icon'
+          onClick={onExitGracefully}
+        />
+      </Tooltip>
+    )
+  }
+
+  function renderSearchIcon () {
+    const title = e('search')
+    return (
+      <Tooltip title={title} placement='bottomLeft'>
+        <SearchOutlined
+          className='mg1r icon-info iblock pointer spliter'
+          onClick={onOpenSearch}
+        />
+      </Tooltip>
+    )
+  }
+
+  function renderFullscreenIcon () {
+    const title = e('fullscreen')
+    return (
+      <Tooltip title={title} placement='bottomLeft'>
+        <FullscreenOutlined
+          className='mg1r icon-info iblock pointer spliter fullscreen-control-icon'
+          onClick={onFullscreen}
+        />
+      </Tooltip>
+    )
+  }
+
+  function renderTermControls () {
+    const { pane } = tab
+    if (pane !== paneMap.terminal) {
+      return null
+    }
+    return (
+      <div className='fright term-controls'>
+        {renderFullscreenIcon()}
+        {renderSearchIcon()}
+      </div>
+    )
+  }
+
+  // ---- mobile ----
+
+  if (isMobile) {
+    const extraIcons = (
+      <div className='mobile-control-icons'>
+        {renderSftpPathFollowControl()}
+        {renderKeepaliveIcon()}
+        {renderBroadcastIcon()}
+        {renderWrapIcon()}
+        {renderExitGracefullyIcon()}
+        {renderTermControls()}
+      </div>
+    )
+    return (
+      <div className='terminal-control mobile-session-control'>
+        {renderPaneControl()}
+        <Popover
+          content={extraIcons}
+          trigger='click'
+          placement='bottomRight'
+        >
+          <MoreOutlined className='mobile-control-toggle pointer' />
+        </Popover>
+      </div>
+    )
+  }
+
+  // ---- desktop ----
+  return (
+    <div className='terminal-control fix'>
+      {renderPaneControl()}
+      {renderSftpPathFollowControl()}
+      {renderSplitToggle()}
+      {renderKeepaliveIcon()}
+      {renderBroadcastIcon()}
+      {renderWrapIcon()}
+      {renderExitGracefullyIcon()}
+      {renderTermControls()}
+    </div>
+  )
+}

package/client/components/session/session-control.styl

@@ -0,0 +1,38 @@
+// Mobile session control: pane tabs always visible,
+// other icons shown in a floating Popover overlay
+.mobile-session-control
+  background var(--main)
+  line-height 32px
+  padding 0 10px
+  display flex
+  align-items center
+  // pane tabs take available space, menu icon sits at the end
+  .term-sftp-tabs
+    float none
+    display flex
+    align-items center
+    flex 1
+    min-width 0
+.mobile-control-toggle
+  font-size 16px
+  line-height 32px
+  color var(--text)
+  flex-shrink 0
+  &:hover
+    color var(--text-light)
+
+// Popover content — icons laid out in a row, wrapping as needed
+.mobile-control-icons
+  display flex
+  flex-wrap wrap
+  align-items center
+  gap 4px 8px
+  max-width 280px
+  line-height 30px
+  .term-controls
+    float none
+    display flex
+    align-items center
+    margin-left 0
+  .sess-icon
+    margin-right 0

package/client/components/session/session.jsx

@@ -10,11 +10,7 @@ import VncSession from '../vnc/vnc-session'
 import WebSession from '../web/web-session.jsx'
 import SpiceSession from '../spice/spice-session'
 import {
-  SearchOutlined,
-  FullscreenOutlined,
-  PaperClipOutlined,
-  CloseOutlined,
-  ApartmentOutlined
+  FullscreenOutlined
 } from '@ant-design/icons'
 import {
   Tooltip,
@@ -25,7 +21,6 @@ import copy from 'json-deep-copy'
 import classnames from 'classnames'
 import {
   paneMap,
-  connectionMap,
   terminalRdpType,
   terminalVncType,
   terminalWebType,
@@ -33,10 +28,9 @@ import {
   terminalFtpType,
   terminalSpiceType
 } from '../../common/constants'
-import { SplitViewIcon } from '../icons/split-view'
 import { refs } from '../common/ref'
 import sanitizeFilename from '../../common/sanitize-filename.js'
-import { HeartbeatIcon } from '../icons/heartbeat'
+import SessionControl from './session-control'
 import './session.styl'
 
 const e = window.translate
@@ -54,7 +48,8 @@ export default class SessionWrapper extends Component {
       sessionOptions: null,
       delKeyPressed: false,
       broadcastInput: false,
-      keepaliveEnabled: false
+      keepaliveEnabled: false,
+      wrapDisabled: false
     }
     if (props.tab.sshSftpSplitView === undefined) {
       props.tab.sshSftpSplitView = !!props.config.sshSftpSplitView
@@ -495,20 +490,23 @@ export default class SessionWrapper extends Component {
     this.setState({ keepaliveEnabled: enabled })
   }
 
+  handleExitGracefully = () => {
+    refs.get('term-' + this.props.tab.id)?.exitGracefully()
+  }
+
   handleOpenSearch = () => {
     refs.get('term-' + this.props.tab.id)?.toggleSearch()
   }
 
-  renderSearchIcon = () => {
-    const title = e('search')
-    return (
-      <Tooltip title={title} placement='bottomLeft'>
-        <SearchOutlined
-          className='mg1r icon-info iblock pointer spliter'
-          onClick={this.handleOpenSearch}
-        />
-      </Tooltip>
-    )
+  toggleWrap = () => {
+    const termRef = refs.get('term-' + this.props.tab.id)
+    if (!termRef?.term) {
+      return
+    }
+    const next = !this.state.wrapDisabled
+    // DECAWM escape sequence: ?7l = disable wrap, ?7h = enable wrap
+    termRef.term.write(next ? '\x1b[?7l' : '\x1b[?7h')
+    this.setState({ wrapDisabled: next })
   }
 
   fullscreenIcon = () => {
@@ -523,237 +521,11 @@ export default class SessionWrapper extends Component {
     )
   }
 
-  renderDelTip = (isSsh) => {
-    if (!isSsh || this.props.hideDelKeyTip || !this.state.delKeyPressed) {
-      return null
-    }
-    return (
-      <div className='type-tab'>
-        <span className='mg1r'>Try <b>Shift + Backspace</b>?</span>
-        <CloseOutlined
-          onClick={this.handleDismissDelKeyTip}
-          className='pointer'
-        />
-      </div>
-    )
-  }
-
-  renderKeepaliveIcon = () => {
-    if (this.isSshDisabled()) {
-      return null
-    }
-    const { keepaliveEnabled } = this.state
-    const title = e('keepalive')
-    const iconProps = {
-      className: classnames('sess-icon pointer keepalive-icon', {
-        active: keepaliveEnabled
-      }),
-      onClick: this.toggleKeepalive
-    }
-    return (
-      <Tooltip title={title}>
-        <HeartbeatIcon {...iconProps} />
-      </Tooltip>
-    )
-  }
-
-  renderBroadcastIcon = () => {
-    if (
-      this.isSshDisabled()
-    ) {
-      return null
-    }
-    const { broadcastInput } = this.state
-    const title = e('broadcastInput')
-    const iconProps = {
-      className: classnames('sess-icon pointer broadcast-icon', {
-        active: broadcastInput
-      }),
-      onClick: this.toggleBroadcastInput
-    }
-
-    return (
-      <Tooltip title={title}>
-        <ApartmentOutlined {...iconProps} />
-      </Tooltip>
-    )
-  }
-
-  renderTermControls = () => {
-    const { props } = this
-    const { pane } = props.tab
-    if (pane !== paneMap.terminal) {
-      return null
-    }
-    return (
-      <div className='fright term-controls'>
-        {this.fullscreenIcon()}
-        {this.renderSearchIcon()}
-      </div>
-    )
-  }
-
-  renderSplitToggle = () => {
-    if (window.store.isMobile) {
-      return null
-    }
-    if (!this.canSplitView() || this.isNotTerminalType()) {
-      return null
-    }
-    const title = e('sshSftpSplitView')
-    const {
-      sshSftpSplitView
-    } = this.props.tab
-    const cls = classnames(
-      'pointer sess-icon split-view-toggle',
-      {
-        active: sshSftpSplitView
-      }
-    )
-    return (
-      <Tooltip title={title} placement='bottomLeft'>
-        <span
-          className={cls}
-          onClick={this.handleSshSftpSplitView}
-        >
-          <SplitViewIcon />
-        </span>
-      </Tooltip>
-    )
-  }
-
   isSsh = () => {
     const { tab } = this.props
     return tab.authType
   }
 
-  renderPaneControl = () => {
-    const {
-      sshSftpSplitView
-    } = this.props.tab
-    if (this.isDisabled()) {
-      return null
-    }
-    if (sshSftpSplitView && this.canSplitView()) {
-      return null
-    }
-    const { props } = this
-    const { tab } = props
-    const { pane } = tab
-    const termType = tab?.type
-    const isSsh = tab.authType
-    const isLocal = !isSsh && (termType === connectionMap.local || !termType)
-    const types = [
-      paneMap.terminal,
-      paneMap.fileManager
-    ]
-    const controls = [
-      isSsh ? paneMap.ssh : paneMap.terminal
-    ]
-    if (isSsh || isLocal) {
-      controls.push(isSsh ? paneMap.sftp : paneMap.fileManager)
-    }
-    const simpleMapper = {
-      [paneMap.terminal]: 'T',
-      [paneMap.fileManager]: 'F',
-      [paneMap.ssh]: 'T',
-      [paneMap.sftp]: 'S'
-    }
-    return (
-      <div className='term-sftp-tabs fleft'>
-        {
-          controls.map((type, i) => {
-            const cls = classnames(
-              'type-tab',
-              type,
-              {
-                active: types[i] === pane
-              }
-            )
-            return (
-              <span
-                className={cls}
-                key={type + '_' + i}
-                onClick={() => this.onChangePane(types[i])}
-              >
-                <span className='type-tab-txt'>
-                  <span className='type-tab-full'>{e(type)}</span>
-                  <span className='type-tab-short'>{simpleMapper[type]}</span>
-                  <span className='type-tab-line' />
-                </span>
-              </span>
-            )
-          })
-        }
-      </div>
-    )
-  }
-
-  renderSftpPathFollowControl = () => {
-    if (this.isDisabled()) {
-      return null
-    }
-    const {
-      sftpPathFollowSsh
-    } = this.state
-    const { props } = this
-    const { tab } = props
-    const { pane, enableSsh, sshSftpSplitView } = tab
-    const termType = tab?.type
-    const isSsh = tab.authType
-    const isLocal = !isSsh && (termType === connectionMap.local || !termType)
-    const checkTxt = e('sftpPathFollowSsh')
-    const checkProps = {
-      onClick: this.toggleCheckSftpPathFollowSsh,
-      className: classnames(
-        'sftp-follow-ssh-icon sess-icon pointer',
-        {
-          active: sftpPathFollowSsh
-        }
-      )
-    }
-    const isS = pane === paneMap.terminal ||
-      sshSftpSplitView
-    return (
-      <>
-        {
-          (isSsh && enableSsh) || isLocal
-            ? (
-              <Tooltip title={checkTxt}>
-                <span {...checkProps}>
-                  <PaperClipOutlined />
-                </span>
-              </Tooltip>
-              )
-            : null
-        }
-        {
-          this.renderDelTip(isS)
-        }
-      </>
-    )
-  }
-
-  renderControl = () => {
-    if (
-      this.isNotTerminalType()
-    ) {
-      return null
-    }
-    return (
-      <div
-        className='terminal-control fix'
-      >
-        {this.renderPaneControl()}
-        {this.renderSftpPathFollowControl()}
-        {this.renderSplitToggle()}
-        {this.renderKeepaliveIcon()}
-        {this.renderBroadcastIcon()}
-        {this.renderTermControls()}
-      </div>
-    )
-  }
-
   onSplitResize = (sizes) => {
     const direction = this.getSplitDirection()
     const {
@@ -850,7 +622,30 @@ export default class SessionWrapper extends Component {
         ref={this.domRef}
         {...divProps}
       >
-        {this.renderControl()}
+        <SessionControl
+          tab={this.props.tab}
+          isMobile={window.store.isMobile}
+          isDisabled={this.isDisabled()}
+          isSshDisabled={this.isSshDisabled()}
+          isNotTerminalType={this.isNotTerminalType()}
+          canSplitView={this.canSplitView()}
+          sftpPathFollowSsh={this.state.sftpPathFollowSsh}
+          keepaliveEnabled={this.state.keepaliveEnabled}
+          broadcastInput={this.state.broadcastInput}
+          wrapDisabled={this.state.wrapDisabled}
+          delKeyPressed={this.state.delKeyPressed}
+          hideDelKeyTip={this.props.hideDelKeyTip}
+          onChangePane={(pane) => this.onChangePane(pane)}
+          toggleCheckSftpPathFollowSsh={this.toggleCheckSftpPathFollowSsh}
+          onSshSftpSplitView={this.handleSshSftpSplitView}
+          toggleKeepalive={this.toggleKeepalive}
+          toggleBroadcastInput={this.toggleBroadcastInput}
+          toggleWrap={this.toggleWrap}
+          onFullscreen={this.handleFullscreen}
+          onOpenSearch={this.handleOpenSearch}
+          onDismissDelKeyTip={this.handleDismissDelKeyTip}
+          onExitGracefully={this.handleExitGracefully}
+        />
         {this.renderViews()}
       </div>
     )

package/client/components/session/session.styl

@@ -96,6 +96,7 @@
   &.active
     color var(--warn)
 
+.wrap-toggle-icon
 .split-view-toggle
   &.active
     color var(--success)