@electerm/electerm-react 1.40.20 → 1.50.31

package/client/components/session/session.jsx

@@ -7,91 +7,42 @@ import Sftp from '../sftp/sftp-entry'
 import RdpSession from '../rdp/rdp-session'
 import VncSession from '../vnc/vnc-session'
 import {
-  BorderVerticleOutlined,
-  BorderHorizontalOutlined,
-  CloseSquareFilled,
   SearchOutlined,
   FullscreenOutlined,
   PaperClipOutlined,
-  CloseOutlined,
-  QuestionCircleOutlined
+  CloseOutlined
 } from '@ant-design/icons'
 import {
   Tooltip
 } from 'antd'
-import { last, findIndex, pick } from 'lodash-es'
+import { pick } from 'lodash-es'
 import generate from '../../common/uid'
 import copy from 'json-deep-copy'
 import classnames from 'classnames'
 import {
-  quickCommandBoxHeight,
-  terminalSplitDirectionMap,
-  termControlHeight,
   paneMap,
-  footerHeight,
   terminalActions,
   connectionMap,
   terminalRdpType,
   terminalVncType
 } from '../../common/constants'
-import ResizeWrap from '../common/resize-wrap'
 import safeName from '../../common/safe-name'
-import TerminalInfoContent from '../terminal-info/content'
-import uid from '../../common/id-with-stamp'
-import Link from '../common/external-link'
 import postMessage from '../../common/post-msg'
 import './session.styl'
 
-const rebuildPosition = terminals => {
-  const indexs = terminals.map(t => t.position).sort((a, b) => a - b)
-  const indexMap = indexs.reduce((prev, pos, index) => {
-    return {
-      ...prev,
-      [pos]: index * 10
-    }
-  }, {})
-  return terminals.map(t => {
-    return {
-      ...t,
-      position: indexMap[t.position]
-    }
-  })
-}
-
-const getPrevTerminal = terminals => {
-  return last(terminals)
-}
-
 const e = window.translate
 
 export default class SessionWrapper extends Component {
   constructor (props) {
     super(props)
-    const id = uid()
-    const {
-      terminals = [
-        {
-          id,
-          position: 0
-        }
-      ]
-    } = props.tab
-    const activeSplitId = terminals[0].id
     this.state = {
-      pid: null,
       enableSftp: false,
       cwd: '',
       sftpPathFollowSsh: !!props.config.sftpPathFollowSsh,
-      splitDirection: terminalSplitDirectionMap.horizontal,
-      activeSplitId,
-      infoPanelPinned: false,
       key: Math.random(),
       sessionOptions: null,
       sessionId: generate(),
-      terminals: terminals.slice(0, 1),
-      delKeyPressed: false,
-      showInfo: false,
-      infoPanelProps: {}
+      delKeyPressed: false
     }
   }
 
@@ -125,33 +76,9 @@ export default class SessionWrapper extends Component {
     window.store.dismissDelKeyTip()
   }
 
-  setCwd = (cwd, tid) => {
-    this.setState(old => {
-      return {
-        cwd,
-        terminals: old.terminals.map(t => {
-          if (t.id === tid) {
-            return {
-              ...t,
-              cwd
-            }
-          }
-          return t
-        })
-      }
-    })
-  }
-
-  handleShowInfo = (infoPanelProps) => {
+  setCwd = (cwd) => {
     this.setState({
-      showInfo: true,
-      infoPanelProps
-    })
-  }
-
-  toggleInfoPinned = () => {
-    this.setState({
-      infoPanelPinned: !this.state.infoPanelPinned
+      cwd
     })
   }
 
@@ -161,24 +88,6 @@ export default class SessionWrapper extends Component {
     })
   }
 
-  hideInfoPanel = () => {
-    this.setState({
-      showInfo: false
-    })
-  }
-
-  computeHeight = () => {
-    const {
-      pinnedQuickCommandBar,
-      tabsHeight
-    } = this.props
-    return this.props.height -
-      tabsHeight -
-      footerHeight -
-      termControlHeight -
-      (pinnedQuickCommandBar ? quickCommandBoxHeight : 0)
-  }
-
   editTab = (up) => {
     const {
       tab,
@@ -202,124 +111,35 @@ export default class SessionWrapper extends Component {
     this.editTab(update)
   }
 
-  setSessionState = data => {
-    this.setState(data)
-    if (data.pid) {
-      this.editTab({
-        pid: data.pid
-      })
-    }
-  }
-
-  handleSplit = (e, id) => {
-    let terminals = copy(this.state.terminals)
-    let index = findIndex(terminals, t => t.id === id)
-    if (index === -1) {
-      index = terminals.length
-    } else {
-      index = index + 1
-    }
-    terminals.push({
-      id: uid(),
-      position: terminals[index - 1].position + 5
-    })
-    terminals = rebuildPosition(terminals)
-    this.setState({
-      terminals
-    }, this.updateTab)
-  }
-
   updateTab = () => {
-    const terminals = copy(this.state.terminals)
     this.editTab(
       {
-        sessionId: this.state.sessionId,
-        terminals
+        sessionId: this.state.sessionId
       }
     )
   }
 
-  delSplit = (splitId = this.state.activeSplitId) => {
-    const { terminals } = this.state
-    let newTerms = terminals.filter(t => t.id !== splitId)
-    if (!newTerms.length) {
-      return this.props.delTab(
-        this.props.tab.id
-      )
-    }
-    newTerms = rebuildPosition(newTerms)
-    const newActiveId = getPrevTerminal(newTerms).id
-    this.setState({
-      terminals: newTerms,
-      activeSplitId: newActiveId
-    }, this.updateTab)
-    window.store.focus()
-  }
-
-  handleChangeDirection = () => {
-    const { splitDirection } = this.state
-    this.setState({
-      splitDirection: splitDirection === terminalSplitDirectionMap.horizontal
-        ? terminalSplitDirectionMap.vertical
-        : terminalSplitDirectionMap.horizontal
-    })
-  }
-
-  setActive = activeSplitId => {
-    const up = {
-      activeSplitId
-    }
-    this.setState(up)
-  }
-
   computePosition = (index) => {
-    const len = this.state.terminals.length || 1
     const windowWidth = this.getWidth()
-    const { splitDirection } = this.state
-    const isHori = splitDirection === terminalSplitDirectionMap.horizontal
-    const heightAll = this.computeHeight()
-    const width = isHori
-      ? windowWidth / len
-      : windowWidth
-    const height = isHori
-      ? heightAll
-      : heightAll / len
-    const left = isHori
-      ? index * width
-      : 0
-    const top = isHori
-      ? 0
-      : index * height
+    const heightAll = this.props.computeHeight()
     return {
-      height,
-      width,
-      left,
-      top
+      height: heightAll,
+      width: windowWidth,
+      left: 0,
+      top: 0
     }
   }
 
   getWidth = () => {
-    const {
-      infoPanelPinned,
-      showInfo
-    } = this.state
-    const { rightSidebarWidth, width, leftSidebarWidth, pinned, openedSideBar } = this.props
-    const rt = infoPanelPinned && showInfo ? rightSidebarWidth : 0
-    const lt = pinned && openedSideBar ? leftSidebarWidth : 0
-    return width - rt - lt - 42
+    return this.props.width
   }
 
   getWidthSftp = () => {
-    const { width, leftSidebarWidth, pinned, openedSideBar } = this.props
-    const lt = pinned && openedSideBar ? leftSidebarWidth : 0
-    return width - lt - 42
+    return this.props.width
   }
 
   renderTerminals = () => {
     const {
-      terminals,
-      activeSplitId,
-      splitDirection,
       sessionOptions,
       sessionId,
       sftpPathFollowSsh
@@ -347,8 +167,7 @@ export default class SessionWrapper extends Component {
         ...pick(
           this,
           [
-            'fullscreenIcon',
-            'setSessionState'
+            'fullscreenIcon'
           ])
       }
       if (type === terminalVncType) {
@@ -367,10 +186,25 @@ export default class SessionWrapper extends Component {
     const cls = pane === paneMap.terminal
       ? 'terms-box'
       : 'terms-box hide'
-    const height = this.computeHeight()
+    const height = this.props.computeHeight()
     const { tab } = this.props
     const width = this.getWidth()
     const themeConfig = copy(window.store.getThemeConfig())
+    const logName = safeName(`${tab.title ? tab.title + '_' : ''}${tab.host ? tab.host + '_' : ''}${tab.id}`)
+    const pops = {
+      ...this.props,
+      sftpPathFollowSsh,
+      themeConfig,
+      pane,
+      ...pick(
+        this,
+        [
+          'onChangePane',
+          'setCwd',
+          'onDelKeyPressed'
+        ]),
+      ...this.computePosition()
+    }
     return (
       <div
         className={cls}
@@ -379,48 +213,13 @@ export default class SessionWrapper extends Component {
           height
         }}
       >
-        <ResizeWrap
-          direction={splitDirection}
-          tab={tab}
-        >
-          {
-            terminals.map((t, index) => {
-              const logName = safeName(`${tab.title ? tab.title + '_' : ''}${tab.host ? tab.host + '_' : ''}${t.id}`)
-              const pops = {
-                ...this.props,
-                ...t,
-                activeSplitId,
-                sftpPathFollowSsh,
-                themeConfig,
-                pane,
-                ...pick(
-                  this,
-                  [
-                    'setActive',
-                    'handleSplit',
-                    'delSplit',
-                    'setSessionState',
-                    'handleShowInfo',
-                    'onChangePane',
-                    'hideInfoPanel',
-                    'setCwd',
-                    'onDelKeyPressed'
-                  ]),
-                ...this.computePosition(t.position / 10)
-              }
-              return (
-                <Term
-                  key={t.id}
-                  logName={logName}
-                  sessionId={sessionId}
-                  terminalIndex={index}
-                  sessionOptions={sessionOptions}
-                  {...pops}
-                />
-              )
-            })
-          }
-        </ResizeWrap>
+        <Term
+          key={tab.id}
+          logName={logName}
+          sessionId={sessionId}
+          sessionOptions={sessionOptions}
+          {...pops}
+        />
       </div>
     )
   }
@@ -429,29 +228,28 @@ export default class SessionWrapper extends Component {
     const {
       sessionOptions,
       sessionId,
-      pid,
       enableSftp,
       sftpPathFollowSsh,
       cwd
     } = this.state
-    const { pane, type } = this.props.tab
+    const { pane, type, id } = this.props.tab
     if (type === terminalRdpType) {
       return null
     }
-    const height = this.computeHeight()
+    const height = this.props.computeHeight(pane)
     const cls = pane === paneMap.terminal
       ? 'hide'
       : ''
     const exts = {
+      ...this.props,
       sftpPathFollowSsh,
       cwd,
-      pid,
+      pid: id,
       enableSftp,
       sessionOptions,
       height,
       sessionId,
       pane,
-      ...this.props,
       width: this.getWidthSftp()
     }
     return (
@@ -470,7 +268,7 @@ export default class SessionWrapper extends Component {
   handleOpenSearch = () => {
     postMessage({
       action: terminalActions.openTerminalSearch,
-      activeSplitId: this.state.activeSplitId
+      currentTabId: this.props.tab.id
     })
   }
 
@@ -513,8 +311,22 @@ export default class SessionWrapper extends Component {
     )
   }
 
+  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>
+    )
+  }
+
   renderControl = () => {
-    const { splitDirection, terminals, sftpPathFollowSsh } = this.state
+    const { sftpPathFollowSsh } = this.state
     const { props } = this
     const { pane, enableSsh, type } = props.tab
     if (type === terminalRdpType || type === terminalVncType) {
@@ -523,16 +335,6 @@ export default class SessionWrapper extends Component {
     const termType = props.tab?.type
     const isSsh = props.tab.authType
     const isLocal = !isSsh && (termType === connectionMap.local || !termType)
-    const isHori = splitDirection === terminalSplitDirectionMap.horizontal
-    const cls1 = 'mg1r icon-split pointer iblock spliter'
-    const cls2 = 'icon-direction pointer iblock spliter'
-    const Icon1 = isHori
-      ? BorderHorizontalOutlined
-      : BorderVerticleOutlined
-    const Icon2 = !isHori
-      ? BorderHorizontalOutlined
-      : BorderVerticleOutlined
-    const hide = terminals.length < 2
     const types = [
       paneMap.terminal,
       paneMap.fileManager
@@ -543,18 +345,7 @@ export default class SessionWrapper extends Component {
     if (isSsh || isLocal) {
       controls.push(isSsh ? paneMap.sftp : paneMap.fileManager)
     }
-    const checkTxt = (
-      <div>
-        <span>{e('sftpPathFollowSsh')}</span>
-        <span className='mg1l color-red'>[Beta]</span>
-        <Link
-          to='https://github.com/electerm/electerm/wiki/Warning-about-sftp-follow-ssh-path-function'
-          className='mg1l'
-        >
-          Wiki <QuestionCircleOutlined />
-        </Link>
-      </div>
-    )
+    const checkTxt = e('sftpPathFollowSsh') + ' [Beta]'
     const checkProps = {
       onClick: this.toggleCheckSftpPathFollowSsh,
       className: classnames(
@@ -600,7 +391,7 @@ export default class SessionWrapper extends Component {
           }
         </div>
         {
-          (isSsh && enableSsh !== false) || isLocal
+          (isSsh && enableSsh) || isLocal
             ? (
               <Tooltip title={checkTxt}>
                 <span {...checkProps}>
@@ -613,69 +404,16 @@ export default class SessionWrapper extends Component {
         {
           this.renderDelTip(pane === paneMap.terminal)
         }
-        {
-          pane === paneMap.terminal
-            ? (
-              <div className='fright term-controls'>
-                {this.fullscreenIcon()}
-                {this.renderSearchIcon()}
-                {
-                  hide
-                    ? null
-                    : (
-                      <CloseSquareFilled
-                        className='mg1r icon-trash font16 iblock pointer spliter'
-                        onClick={() => this.delSplit()}
-                        title={e('del')}
-                      />
-                      )
-                }
-                <Tooltip
-                  title={`${e('split')}`}
-                  placement='bottomLeft'
-                >
-                  <Icon1
-                    className={cls1}
-                    onClick={this.handleSplit}
-                  />
-                </Tooltip>
-                <Tooltip
-                  title={e('changeDirection')}
-                  placement='bottomLeft'
-                >
-                  <Icon2
-                    className={cls2}
-                    onClick={this.handleChangeDirection}
-                  />
-                </Tooltip>
-              </div>
-              )
-            : null
-        }
+        {this.renderTermControls()}
       </div>
     )
   }
 
   render () {
     const {
-      splitDirection,
-      infoPanelProps,
-      showInfo,
-      infoPanelPinned
+      splitDirection
     } = this.state
-    const { pane } = this.props.tab
-    const infoProps = {
-      infoPanelPinned,
-      ...pick(this.props.config, ['host', 'port', 'saveTerminalLogToFile', 'terminalInfos']),
-      ...infoPanelProps,
-      appPath: this.props.appPath,
-      rightSidebarWidth: this.props.rightSidebarWidth,
-      showInfo,
-      tabsHeight: this.props.tabsHeight,
-      topMenuHeight: this.props.topMenuHeight,
-      toggleInfoPinned: this.toggleInfoPinned,
-      hideInfoPanel: this.hideInfoPanel
-    }
+    const { pane, id } = this.props.tab
     const cls = classnames(
       'term-sftp-box',
       pane,
@@ -690,14 +428,11 @@ export default class SessionWrapper extends Component {
     return (
       <div
         className={cls}
-        id={`is-${this.props.tab.id}`}
+        id={`is-${id}`}
       >
         {this.renderControl()}
         {this.renderTerminals()}
         {this.renderSftp()}
-        <TerminalInfoContent
-          {...infoProps}
-        />
       </div>
     )
   }

package/client/components/session/session.styl

@@ -32,11 +32,7 @@
   &.active
     .type-tab-line
       display inline-block
-#container
-  .sftp-follow-ssh-icon
-    &:hover
-    &.active
-      color red
+
 .is-transporting
   .type-tab.sftp
     .type-tab-line