@electerm/electerm-react 5.3.0 → 5.3.15

package/client/common/constants.js

@@ -263,7 +263,6 @@ export const resolutionsLsKey = 'custom-resolution-key'
 export const checkedKeysLsKey = 'checked-keys'
 export const quickCommandLabelsLsKey = 'quick-command-label'
 export const localAddrBookmarkLsKey = 'local-addr-bookmark-keys'
-export const dismissDelKeyTipLsKey = 'dismiss-del-key-tip'
 export const treeSortLsKey = 'tree-sort'
 export const sshTunnelHelpLink = 'https://github.com/electerm/electerm/wiki/How-to-use-ssh-tunnel'
 export const proxyHelpLink = 'https://github.com/electerm/electerm/wiki/proxy-format'

package/client/components/layout/layout.jsx

@@ -119,7 +119,6 @@ export default auto(function Layout (props) {
           'isMaximized',
           'config',
           'resolutions',
-          'hideDelKeyTip',
           'fileOperation',
           'pinnedQuickCommandBar',
           'tabsHeight',
@@ -181,7 +180,6 @@ export default auto(function Layout (props) {
       'activeTabId3',
       'batch',
       'resolutions',
-      'hideDelKeyTip',
       'fileOperation',
       'file',
       'pinnedQuickCommandBar',

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

@@ -6,7 +6,6 @@ import {
   SearchOutlined,
   FullscreenOutlined,
   PaperClipOutlined,
-  CloseOutlined,
   ApartmentOutlined,
   MoreOutlined,
   ColumnWidthOutlined,
@@ -37,8 +36,6 @@ export default function SessionControl (props) {
     keepaliveEnabled,
     broadcastInput,
     wrapDisabled,
-    delKeyPressed,
-    hideDelKeyTip,
     onChangePane,
     toggleCheckSftpPathFollowSsh,
     onSshSftpSplitView,
@@ -47,7 +44,6 @@ export default function SessionControl (props) {
     toggleWrap,
     onFullscreen,
     onOpenSearch,
-    onDismissDelKeyTip,
     onExitGracefully
   } = props
 
@@ -108,26 +104,11 @@ export default function SessionControl (props) {
     )
   }
 
-  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 { enableSsh } = tab
     const checkTxt = e('sftpPathFollowSsh')
     const checkProps = {
       onClick: toggleCheckSftpPathFollowSsh,
@@ -138,8 +119,6 @@ export default function SessionControl (props) {
         }
       )
     }
-    const isS = pane === paneMap.terminal ||
-      sshSftpSplitView
     return (
       <>
         {
@@ -153,7 +132,6 @@ export default function SessionControl (props) {
               )
             : null
         }
-        {renderDelTip(isS)}
       </>
     )
   }

package/client/components/session/session.jsx

@@ -46,7 +46,6 @@ export default class SessionWrapper extends Component {
       key: Math.random(),
       splitSize: [50, 50],
       sessionOptions: null,
-      delKeyPressed: false,
       broadcastInput: false,
       keepaliveEnabled: false,
       wrapDisabled: false
@@ -59,10 +58,6 @@ export default class SessionWrapper extends Component {
   minWithForSplit = 640
   minHeightForSplit = 400
 
-  componentWillUnmount () {
-    clearTimeout(this.backspaceKeyPressedTimer)
-  }
-
   getDom = () => {
     return this.domRef.current
   }
@@ -178,27 +173,6 @@ export default class SessionWrapper extends Component {
     e && e.dataTransfer && e.dataTransfer.clearData()
   }
 
-  onDelKeyPressed = () => {
-    this.setState({
-      delKeyPressed: true
-    })
-    this.backspaceKeyPressedTimer = setTimeout(() => {
-      this.setState({
-        delKeyPressed: false
-      })
-    }, 5000)
-  }
-
-  handleChangeDelMode = (backspaceMode) => {
-    this.setState({
-      backspaceMode
-    })
-  }
-
-  handleDismissDelKeyTip = () => {
-    window.store.dismissDelKeyTip()
-  }
-
   setCwd = (cwd) => {
     this.setState({
       cwd
@@ -351,8 +325,7 @@ export default class SessionWrapper extends Component {
         this,
         [
           'onChangePane',
-          'setCwd',
-          'onDelKeyPressed'
+          'setCwd'
         ]),
       ...this.computePosition(),
       width,
@@ -633,8 +606,6 @@ export default class SessionWrapper extends Component {
           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}
@@ -643,7 +614,6 @@ export default class SessionWrapper extends Component {
           toggleWrap={this.toggleWrap}
           onFullscreen={this.handleFullscreen}
           onOpenSearch={this.handleOpenSearch}
-          onDismissDelKeyTip={this.handleDismissDelKeyTip}
           onExitGracefully={this.handleExitGracefully}
         />
         {this.renderViews()}

package/client/components/session/sessions.jsx

@@ -69,7 +69,6 @@ export default class Sessions extends Component {
         height,
         ...pick(this.props, [
           'resolutions',
-          'hideDelKeyTip',
           'fileOperation',
           'pinnedQuickCommandBar',
           'tabsHeight',

package/client/components/shortcuts/shortcut-handler.js

@@ -187,7 +187,6 @@ export function shortcutExtend (Cls) {
       !altKey &&
       !ctrlKey
     ) {
-      this.props.onDelKeyPressed()
       const delKey = this.props.config.backspaceMode === '^?' ? 8 : 127
       const altDelDelKey = delKey === 8 ? 127 : 8
       const char = String.fromCharCode(shiftKey ? delKey : altDelDelKey)

package/client/components/sys-menu/icons-map.jsx

@@ -29,7 +29,9 @@ import {
   PlayCircleFilled,
   StopOutlined,
   DownloadOutlined,
-  SwapOutlined
+  SwapOutlined,
+  PushpinOutlined,
+  PushpinFilled
 } from '@ant-design/icons'
 import IconHolder from './icon-holder'
 
@@ -62,5 +64,7 @@ export default {
   PlayCircleFilled,
   StopOutlined,
   DownloadOutlined,
-  SwapOutlined
+  SwapOutlined,
+  PushpinOutlined,
+  PushpinFilled
 }

package/client/components/tabs/index.jsx

@@ -122,11 +122,23 @@ export default class Tabs extends Component {
     )
   }
 
+  // desktop tabs bar renders pinned tabs first: stable partition that keeps
+  // the original relative order inside the pinned and unpinned groups.
+  // store.tabs order itself is untouched by pinning.
+  getSortedTabs = () => {
+    const { tabs = [] } = this.props
+    return [
+      ...tabs.filter(t => t.isPinned),
+      ...tabs.filter(t => !t.isPinned)
+    ]
+  }
+
   adjustScroll = () => {
     if (this.props.isMobile || !this.domRef.current) {
       return
     }
-    const { tabs, currentBatchTabId, batch } = this.props
+    const { currentBatchTabId, batch } = this.props
+    const tabs = this.getSortedTabs()
     const index = tabs.findIndex(t => t.id === currentBatchTabId)
     const tabsDomWith = Array.from(
       document.querySelectorAll(`.v${batch + 1} .tab`)
@@ -209,7 +221,7 @@ export default class Tabs extends Component {
   }
 
   renderExtra () {
-    const items = this.props.tabs.map((t, i) => {
+    const items = this.getSortedTabs().map((t, i) => {
       return {
         key: i + '##' + t.id,
         label: (
@@ -261,7 +273,8 @@ export default class Tabs extends Component {
   }
 
   renderContentInner () {
-    const { tabs = [], width, config } = this.props
+    const { width, config } = this.props
+    const tabs = this.getSortedTabs()
     const len = tabs.length
     const tabsWidthAll = tabMargin * len + 10 + this.tabsWidth()
     const { overflow } = this.state

package/client/components/tabs/tab.jsx

@@ -9,7 +9,8 @@ import {
   CloseOutlined,
   Loading3QuartersOutlined,
   BorderlessTableOutlined,
-  LockOutlined
+  LockOutlined,
+  PushpinFilled
 } from '@ant-design/icons'
 import {
   Tooltip,
@@ -239,8 +240,15 @@ class Tab extends Component {
     }
   }
 
-  handleReloadTab = async () => {
-    window.store.reloadTab(this.props.tab.id)
+  handleReloadTab = async (e) => {
+    // stop propagation so the parent tab-title click doesn't re-activate
+    // this tab by its now-stale (removed) id after reloadTab replaces it
+    e && e.stopPropagation()
+    const { tab, batch } = this.props
+    const newTab = window.store.reloadTab(tab.id)
+    if (newTab) {
+      window.store.clickTab(newTab.id, batch)
+    }
   }
 
   handleReloadAll = () => {
@@ -309,8 +317,13 @@ class Tab extends Component {
     window.store.closeTabsRight(this.props.tab.id)
   }
 
+  togglePin = () => {
+    const { tab } = this.props
+    window.store.pinTab(tab.id, !tab.isPinned)
+  }
+
   renderContext = () => {
-    const { tabs, tabIndex } = this.props
+    const { tabs, tabIndex, tab } = this.props
     const len = tabs.length
     const index = tabIndex
     const noRight = index >= len - 1
@@ -359,6 +372,13 @@ class Tab extends Component {
         icon: <iconsMap.EditOutlined />,
         label: e('rename')
       },
+      !window.store.isMobile && {
+        key: 'togglePin',
+        icon: tab.isPinned
+          ? <iconsMap.PushpinFilled />
+          : <iconsMap.PushpinOutlined />,
+        label: tab.isPinned ? e('unpin') : e('pin')
+      },
       {
         key: 'handleReloadTab',
         icon: <iconsMap.ReloadOutlined />,
@@ -542,6 +562,7 @@ class Tab extends Component {
               }
               <span className='tab-title'>
                 <span className='iblock mg1r tab-count' style={styleTag}>{tabCount}</span>
+                {tab.isPinned && <PushpinFilled className='tab-pin' />}
                 <span className='mg1r'>{title}</span>
               </span>
             </div>

package/client/components/tabs/tabs.styl

@@ -225,6 +225,10 @@
   height 20px
   line-height 21px
 
+.tab-pin
+  margin-right 3px
+  font-size 11px
+
 .ssh-tunnel-list-wrapper
   max-height 300px
   overflow-y auto

package/client/store/common.js

@@ -11,7 +11,6 @@ import {
   leftSideBarOpenKey,
   rightSidebarWidthKey,
   addPanelWidthLsKey,
-  dismissDelKeyTipLsKey,
   connectionMap,
   lastAiChatSessionIdKey,
   mobileBreakpoint,
@@ -148,10 +147,6 @@ export default Store => {
     ls.setItem(rightSidebarWidthKey, v)
     window.store._rightPanelWidth = v
   }
-  Store.prototype.dismissDelKeyTip = function (v) {
-    ls.setItem(dismissDelKeyTipLsKey, 'y')
-    window.store.hideDelKeyTip = true
-  }
   Store.prototype.beforeExit = function (evt) {
     const { confirmBeforeExit } = window.store.config
     if (

package/client/store/init-state.js

@@ -19,7 +19,6 @@ import {
   leftSidePanelWidthKey,
   rightSidebarWidthKey,
   addPanelWidthLsKey,
-  dismissDelKeyTipLsKey,
   qmSortByFrequencyKey,
   resolutionsLsKey,
   syncServerDataKey,
@@ -30,7 +29,6 @@ import {
 import * as ls from '../common/safe-local-storage'
 import { exclude } from 'manate'
 import initSettingItem from '../common/init-setting-item'
-import { getRandomDefaultColor } from '../common/rand-hex-color'
 
 const e = window.translate
 
@@ -40,7 +38,7 @@ function getDefaultBookmarkGroups (bookmarks) {
       title: e(defaultBookmarkGroupId),
       id: defaultBookmarkGroupId,
       bookmarkIds: bookmarks.map(d => d.id),
-      color: getRandomDefaultColor()
+      color: '#0088cc'
     })
   ]
 }
@@ -216,7 +214,6 @@ export default () => {
     hasNodePty: window.pre.runSync('nodePtyCheck'),
     isMobile: window.innerWidth <= mobileBreakpoint,
     fullscreen: false,
-    hideDelKeyTip: ls.getItem(dismissDelKeyTipLsKey) === 'y',
     tabsHeight: 36,
 
     // widgets

package/client/store/mcp-handler.js

@@ -810,7 +810,9 @@ export default Store => {
     const { command, tabId, timeoutMs } = args
     const marker = `__ET_EXEC_${uid()}__`
     const startLine = `${marker}S`
-    const wrapped = `echo "${startLine}"; ${command}; echo "${marker}E$?"`
+    // Run in a subshell so commands like `exit`/`exec` cannot kill the outer
+    // shell before the end sentinel is emitted; $? holds the subshell's code.
+    const wrapped = `echo "${startLine}"; ( ${command} ); echo "${marker}E$?"`
 
     store.runQuickCommand(wrapped, false, tabId)
 

package/client/store/tab.js

@@ -127,6 +127,8 @@ export default Store => {
     if (store[batchProp] === tabId) {
       store[batchProp] = newTab.id
     }
+
+    return newTab
   }
 
   Store.prototype.reloadAllTabs = function () {
@@ -168,6 +170,17 @@ export default Store => {
     store[`activeTabId${sourceTab.batch}`] = duplicatedTab.id
   }
 
+  // only toggles the flag: the tabs bar renders pinned tabs first,
+  // store.tabs order itself is never changed by pinning
+  Store.prototype.pinTab = function (tabId, isPinned = true) {
+    const { store } = window
+    const tab = store.tabs.find(t => t.id === tabId)
+    if (!tab || Boolean(tab.isPinned) === isPinned) {
+      return
+    }
+    tab.isPinned = isPinned
+  }
+
   Store.prototype.closeOtherTabs = function (id) {
     const { store } = window
     const { tabs } = store
@@ -534,7 +547,8 @@ export default Store => {
       'sshSftpSplitView',
       'sshTunnelResults',
       'displayRaw',
-      'autoReConnect'
+      'autoReConnect',
+      'isPinned'
     ]
     const { history } = store
     const index = history.filter(d => d.id && d.tab).findIndex(d => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electerm/electerm-react",
-  "version": "5.3.0",
+  "version": "5.3.15",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",