@electerm/electerm-react 1.50.59 → 1.50.66

package/client/components/batch-op/batch-op.jsx

@@ -236,7 +236,7 @@ export default class BatchOp extends PureComponent {
       this.tm = setTimeout(() => {
         reject(new Error('timeout'))
       }, 1000 * 60 * 60)
-      this.ref1 = autoRun(store, () => {
+      this.ref1 = autoRun(() => {
         const { transferHistory } = store
         const first = transferHistory.find(t => {
           return (t.id === obj.id || t.originalId === obj.id) && t.unzip
@@ -257,7 +257,7 @@ export default class BatchOp extends PureComponent {
     return new Promise((resolve, reject) => {
       document.querySelector('.session-current .type-tab.sftp').click()
       const { store } = window
-      this.ref2 = autoRun(store, () => {
+      this.ref2 = autoRun(() => {
         const { tabs } = store
         const last = tabs.find(t => t.id === tab.id)
         if (
@@ -305,7 +305,7 @@ export default class BatchOp extends PureComponent {
       }
       const { store } = window
       store.addTab(tab)
-      this.ref = autoRun(store, () => {
+      this.ref = autoRun(() => {
         const { tabs } = store
         const len = tabs.length
         const last = tabs[len - 1]

package/client/components/bookmark-form/render-connection-hopping.jsx

@@ -112,6 +112,14 @@ export default function renderConnectionHopping (props) {
     }
   ]
 
+  function renderPaths () {
+    return [
+      '👤',
+      ...list.map(d => d.host),
+      form.getFieldValue('host')
+    ].join(' -> ')
+  }
+
   function renderList () {
     return (
       <FormItem {...tailFormItemLayout}>
@@ -127,6 +135,7 @@ export default function renderConnectionHopping (props) {
             }
           })}
         />
+        {renderPaths()}
       </FormItem>
     )
   }

package/client/components/bookmark-form/ssh-form.jsx

@@ -158,6 +158,9 @@ export default class BookmarkForm extends PureComponent {
       item.host = item.host.trim()
     }
     const obj = item
+    if (obj.connectionHoppings?.length) {
+      obj.hasHopping = true
+    }
     const { addItem, editItem } = this.props.store
     const categoryId = obj.category
     delete obj.category

package/client/components/bookmark-form/web-form-ui.jsx

@@ -6,7 +6,8 @@ import { useEffect } from 'react'
 import {
   Input,
   Form,
-  TreeSelect
+  TreeSelect,
+  Switch
 } from 'antd'
 import { formItemLayout } from '../../common/form-layout'
 import {
@@ -83,7 +84,7 @@ export default function LocalFormUi (props) {
             },
             {
               validator: (_, value) =>
-                !value || value.startsWith('http://') || value.startsWith('https://')
+                /^[a-z\d.+-]+:\/\/[^\s/$.?#].[^\s]*$/i.test(value)
                   ? Promise.resolve()
                   : Promise.reject(new Error(e('URL must start with http:// or https://')))
             }
@@ -117,6 +118,14 @@ export default function LocalFormUi (props) {
         >
           <Input />
         </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label='hideAddressBar'
+          name='hideAddressBar'
+          valuePropName='checked'
+        >
+          <Switch />
+        </FormItem>
         <FormItem
           {...formItemLayout}
           label='type'

package/client/components/footer/batch-input.jsx

@@ -5,22 +5,44 @@
 import { Component } from 'react'
 import {
   AutoComplete,
-  Input,
-  Switch,
-  Tooltip
+  Input
 } from 'antd'
-import { batchInputLsKey, commonActions } from '../../common/constants'
+import {
+  batchInputLsKey,
+  commonActions,
+  terminalWebType,
+  terminalRdpType,
+  terminalVncType
+} from '../../common/constants'
+import TabSelect from './tab-select'
 import postMsg from '../../common/post-msg'
 import classNames from 'classnames'
 
 const e = window.translate
 
 export default class BatchInput extends Component {
-  state = {
-    cmd: '',
-    toAll: false,
-    open: false,
-    enter: false
+  constructor (props) {
+    super(props)
+    this.state = {
+      cmd: '',
+      selectedTabIds: [props.currentTabId],
+      open: false,
+      enter: false
+    }
+  }
+
+  componentDidUpdate (prevProps) {
+    if (prevProps.currentTabId !== this.props.currentTabId) {
+      this.setState(prevState => {
+        const newSelectedTabIds = prevState.selectedTabIds.filter(
+          id => id !== this.props.currentTabId
+        )
+        newSelectedTabIds.unshift(this.props.currentTabId)
+        return {
+          selectedTabIds: newSelectedTabIds
+        }
+      })
+    }
   }
 
   componentWillUnmount () {
@@ -28,12 +50,12 @@ export default class BatchInput extends Component {
   }
 
   handleEnter = (e) => {
-    const { cmd, toAll } = this.state
+    const { cmd, selectedTabIds } = this.state
     if (!cmd.trim()) {
       return
     }
     window.store.addBatchInput(cmd)
-    this.props.input(cmd, toAll)
+    this.props.input(cmd, selectedTabIds)
     this.setState({
       cmd: '',
       open: false
@@ -41,6 +63,43 @@ export default class BatchInput extends Component {
     e.stopPropagation()
   }
 
+  onSelectAll = () => {
+    this.setState({
+      selectedTabIds: this.getTabs().map(tab => tab.id)
+    })
+  }
+
+  onSelectNone = () => {
+    this.setState({
+      selectedTabIds: [this.props.currentTabId]
+    })
+  }
+
+  filterValidTabIds = (tabIds) => {
+    return tabIds.filter(id => {
+      return this.props.tabs.some(tab => tab.id === id)
+    })
+  }
+
+  onSelect = (id) => {
+    this.setState(prevState => {
+      const selectedTabIds = prevState.selectedTabIds.includes(id)
+        ? prevState.selectedTabIds.filter(tabId => tabId !== id)
+        : [...prevState.selectedTabIds, id]
+
+      // Ensure at least the current tab is selected
+      if (selectedTabIds.length === 0) {
+        return {
+          selectedTabIds: [this.props.currentTabId]
+        }
+      }
+
+      return {
+        selectedTabIds
+      }
+    })
+  }
+
   handleChange = (v = '') => {
     let vv = v.replace(/^\d+:/, '').replace(/\n$/, '')
     if (vv === batchInputLsKey) {
@@ -58,7 +117,8 @@ export default class BatchInput extends Component {
 
   handleClick = () => {
     this.setState({
-      open: true
+      open: true,
+      selectedTabIds: this.filterValidTabIds(this.state.selectedTabIds)
     })
   }
 
@@ -116,8 +176,22 @@ export default class BatchInput extends Component {
     this.timer = setTimeout(this.leave, 5000)
   }
 
+  getTabs = () => {
+    const { currentTabId } = this.props
+    return this.props.tabs.filter(tab => {
+      return tab.type !== terminalWebType &&
+        tab.type !== terminalRdpType &&
+        tab.type !== terminalVncType
+    }).sort((a, b) => {
+      // Current tab goes first
+      if (a.id === currentTabId) return -1
+      if (b.id === currentTabId) return 1
+      return 0
+    })
+  }
+
   render () {
-    const { cmd, open, toAll, enter } = this.state
+    const { cmd, open, selectedTabIds, enter } = this.state
     const opts = {
       options: this.buildOptions(),
       placeholder: e('batchInput'),
@@ -139,6 +213,14 @@ export default class BatchInput extends Component {
       placeholder: e('batchInput'),
       className: 'batch-input-holder'
     }
+    const tabSelectProps = {
+      currentTabId: this.props.currentTabId,
+      tabs: this.getTabs(),
+      selectedTabIds,
+      onSelectAll: this.onSelectAll,
+      onSelectNone: this.onSelectNone,
+      onSelect: this.onSelect
+    }
     return (
       <span
         className={cls}
@@ -162,13 +244,7 @@ export default class BatchInput extends Component {
               autoSize={{ minRows: 1 }}
             />
           </AutoComplete>
-          <Tooltip title={e('runInAllTerminals')}>
-            <Switch
-              className='mg1l'
-              checked={toAll}
-              onChange={this.handleChangeAll}
-            />
-          </Tooltip>
+          <TabSelect {...tabSelectProps} />
         </span>
       </span>
     )

package/client/components/footer/batch-item.jsx

@@ -0,0 +1,33 @@
+import {
+  Button
+} from 'antd'
+import {
+  CheckCircleOutlined
+} from '@ant-design/icons'
+import createName from '../../common/create-title'
+
+export default function BatchInputTabItem (props) {
+  function handleSelect (id) {
+    props.onSelect(
+      props.id
+    )
+  }
+
+  const { tab, selected, isCurrent } = props
+  const title = createName(tab)
+  const btnProps = {
+    className: 'mg1r mg1b iblock',
+    onClick: handleSelect,
+    title,
+    type: selected ? 'primary' : 'default'
+  }
+  const icon = selected ? <CheckCircleOutlined className='mg1r' /> : null
+  const pre = isCurrent ? <b>*</b> : ''
+  return (
+    <Button
+      {...btnProps}
+    >
+      {pre} {icon} {tab.tabCount}. {title}
+    </Button>
+  )
+}

package/client/components/footer/footer-entry.jsx

@@ -26,11 +26,10 @@ export default auto(function FooterEntry (props) {
     })
   }
 
-  function batchInput (cmd, toAll) {
+  function batchInput (cmd, selectedTabIds) {
     postMessage({
       action: terminalActions.batchInput,
-      currentTabId: props.store.currentTabId,
-      toAll,
+      selectedTabIds,
       cmd
     })
   }
@@ -55,11 +54,16 @@ export default auto(function FooterEntry (props) {
   }
 
   function renderBatchInputs () {
+    const batchProps = {
+      input: batchInput,
+      batchInputs: props.store.batchInputs,
+      tabs: props.store.tabs,
+      currentTabId: props.store.currentTabId
+    }
     return (
       <div className='terminal-footer-unit terminal-footer-center'>
         <BatchInput
-          input={batchInput}
-          batchInputs={props.store.batchInputs}
+          {...batchProps}
         />
       </div>
     )
@@ -79,7 +83,7 @@ export default auto(function FooterEntry (props) {
         minWidth: 30
       },
       placeholder: e('encode'),
-      defaultValue: props.currentTab?.encode,
+      defaultValue: props.store.currentTab?.encode,
       onSelect: handleSwitchEncoding,
       size: 'small',
       popupMatchSelectWidth: false

package/client/components/footer/tab-select.jsx

@@ -0,0 +1,65 @@
+import {
+  Popover
+} from 'antd'
+import TabItem from './batch-item'
+import {
+  CodeOutlined
+} from '@ant-design/icons'
+
+export default function TabSelect (props) {
+  const { selectedTabIds, tabs, currentTabId } = props
+  function renderTabs () {
+    return tabs.map(tab => {
+      const selected = selectedTabIds.includes(tab.id)
+      const itemProps = {
+        tab,
+        selected,
+        onSelect: props.onSelect,
+        id: tab.id,
+        isCurrent: tab.id === currentTabId
+      }
+      return (
+        <TabItem
+          key={tab.id}
+          {...itemProps}
+        />
+      )
+    })
+  }
+  function renderBtns () {
+    return (
+      <div className='pd1t pd2b font12'>
+        <span
+          className='mg1r pointer'
+          onClick={props.onSelectAll}
+        >
+          All
+        </span>
+        <span
+          className='pointer'
+          onClick={props.onSelectNone}
+        >
+          None
+        </span>
+      </div>
+    )
+  }
+  function renderContent () {
+    return (
+      <div className='pd1x'>
+        {renderBtns()}
+        {renderTabs()}
+      </div>
+    )
+  }
+  return (
+    <Popover
+      content={renderContent()}
+      trigger='click'
+    >
+      <span className='pointer iblock pd1x'>
+        ({selectedTabIds.length}) <CodeOutlined />
+      </span>
+    </Popover>
+  )
+}

package/client/components/layout/layout.jsx

@@ -133,8 +133,7 @@ export default auto(function Layout (props) {
     ])
   }
   const footerProps = {
-    store,
-    currentTab
+    store
   }
   const qmProps = pick(store, [
     'quickCommandTags',

package/client/components/session/sessions.jsx

@@ -221,6 +221,7 @@ class Sessions extends Component {
     const index = findIndex(tabs, t => t.id === id)
     this.addTab(tab, index, () => {
       this.delTab(id)
+      this.onChangeTabId(tab.id)
     })
   }
 

package/client/components/terminal/highlight-addon.js

@@ -37,7 +37,9 @@ export class KeywordHighlighterAddon {
       if (keyword) {
         try {
           const regex = new RegExp(`(${keyword})`, 'gi')
-          text = text.replace(regex, this.colorize(color))
+          if (regex.test(text)) {
+            return text.replace(regex, this.colorize(color))
+          }
         } catch (e) {
           window.store.onError(e)
         }

package/client/components/terminal/index.jsx

@@ -329,15 +329,15 @@ clear\r`
       addTimeStampToTermLog,
       type,
       cmd,
+      selectedTabIds = [],
       currentTabId,
       pid,
-      toAll,
       inputOnly,
       zoomValue
     } = e?.data || {}
 
     const { id: currentTabIdProp } = this.props.tab
-    const tabIdMatch = currentTabId === currentTabIdProp
+    const tabIdMatch = selectedTabIds.includes(currentTabIdProp) || currentTabId === currentTabIdProp
     if (
       action === terminalActions.zoom &&
       tabIdMatch
@@ -349,10 +349,7 @@ clear\r`
     ) {
       this.switchEncoding(encode)
     } else if (
-      action === terminalActions.batchInput &&
-      (
-        toAll || tabIdMatch
-      )
+      action === terminalActions.batchInput && tabIdMatch
     ) {
       this.batchInput(cmd)
     } else if (
@@ -1220,22 +1217,16 @@ clear\r`
     if (pick(term, 'buffer._onBufferChange._listeners')) {
       term.buffer._onBufferChange._listeners.push(this.onBufferChange)
     }
-    const cid = this.props.currentTabId
-    const tid = this.props.tab.id
-    if (cid === tid && this.props.tab.status === statusMap.success) {
-      term.loadAddon(new WebLinksAddon(this.webLinkHandler))
-      term.focus()
-      this.zmodemAddon = new AddonZmodem()
-      this.fitAddon.fit()
-      term.loadAddon(this.zmodemAddon)
-      term.zmodemAttach(this)
-    }
+    term.loadAddon(new WebLinksAddon(this.webLinkHandler))
+    term.focus()
+    this.zmodemAddon = new AddonZmodem()
+    this.fitAddon.fit()
+    term.loadAddon(this.zmodemAddon)
+    term.zmodemAttach(this)
     term.displayRaw = displayRaw
     term.loadAddon(
       new KeywordHighlighterAddon(keywords)
     )
-    window.store.triggerResize()
-    window.store.focus()
   }
 
   onResize = throttle(() => {

package/client/components/terminal-info/resource.jsx

@@ -34,6 +34,13 @@ export default function TerminalInfoResource (props) {
   ) {
     return null
   }
+  function getColorForPercent (percent) {
+    if (percent >= 90) return '#ff4d4f'
+    if (percent >= 70) return '#faad14'
+    if (percent >= 50) return '#1890ff'
+    return '#52c41a'
+  }
+
   function renderItem (obj) {
     if (isEmpty(obj)) {
       return <div className='pd1b' key={obj.name}>NA</div>
@@ -48,6 +55,7 @@ export default function TerminalInfoResource (props) {
     const p = hasPercent
       ? percent
       : computePercent(used, total) || 0
+    const color = getColorForPercent(p)
     const fmt = hasPercent
       ? (p) => `${name}: ${p || ''}%`
       : (p) => `${name}: ${p || ''}%(${used || ''}/${total || ''})`
@@ -57,6 +65,7 @@ export default function TerminalInfoResource (props) {
           style={{ width: '50%' }}
           percent={p}
           format={fmt}
+          strokeColor={color}
         />
       </div>
     )

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

@@ -8,8 +8,9 @@ export default function WebSession (props) {
     height,
     reloadTab
   } = props
-  const urlRegex = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/i
-  const url = urlRegex.test(tab.url) ? tab.url : 'https://' + tab.url
+  const urlRegex = /^[a-z\d.+-]+:\/\/[^\s/$.?#].[^\s]*$/i
+
+  const { url = '' } = tab
   const addrProps = {
     url,
     title: tab.title,
@@ -46,12 +47,20 @@ export default function WebSession (props) {
   // }, [])
 
   function renderView () {
+    if (!urlRegex.test(tab.url)) {
+      return (
+        <div>
+          URL: <b>{url}</b> not valid
+        </div>
+      )
+    }
+    const hOffset = tab.hideAddressBar ? 30 : -12
     if (window.et.isWebApp) {
       const iframeProps = {
         src: url,
         style: {
           width: (width - 10) + 'px',
-          height: (height - 12) + 'px'
+          height: (height + hOffset) + 'px'
         }
       }
       return (
@@ -62,7 +71,7 @@ export default function WebSession (props) {
       src: url,
       style: {
         width: (width - 10) + 'px',
-        height: (height - 12) + 'px'
+        height: (height + hOffset) + 'px'
       },
       disableblinkfeatures: 'true',
       disablewebsecurity: 'true',
@@ -76,7 +85,9 @@ export default function WebSession (props) {
 
   return (
     <div className='web-session-wrap'>
-      <AddressBar {...addrProps} />
+      {!tab.hideAddressBar && (
+        <AddressBar {...addrProps} />
+      )}
       <div className='pd1'>
         {renderView()}
       </div>

package/client/store/watch.js

@@ -18,14 +18,14 @@ import * as ls from '../common/safe-local-storage'
 import { debounce, isEmpty } from 'lodash-es'
 
 export default store => {
-  // autoRun(store, () => {
+  // autoRun(() => {
   //   store.focus()
   //   // store.termSearchOpen = false
   //   store.termSearchMatchCount = 0
   //   return store.currentTabId
   // }).start()
 
-  // autoRun(store, () => {
+  // autoRun(() => {
   //   if (store.menuOpened) {
   //     store.initMenuEvent()
   //   } else {
@@ -35,7 +35,7 @@ export default store => {
   // })
 
   for (const name of dbNamesForWatch) {
-    autoRun(store, async () => {
+    autoRun(async () => {
       await update(
         `${name}:order`,
         store.getItems(name).map(d => d.id)
@@ -48,12 +48,12 @@ export default store => {
     }, func => debounce(func, 100)).start()
   }
 
-  autoRun(store, async () => {
+  autoRun(async () => {
     ls.setItem(resolutionsLsKey, store._resolutions)
     return store._resolutions
   }).start()
 
-  autoRun(store, () => {
+  autoRun(() => {
     if (!store.showModal) {
       store.focus()
     } else {
@@ -62,44 +62,44 @@ export default store => {
     return store.showModal
   }).start()
 
-  autoRun(store, () => {
+  autoRun(() => {
     if (!isEmpty(store.config)) {
       window.pre.runGlobalAsync('saveUserConfig', store.config)
     }
     return store._config
   }, func => debounce(func, 100)).start()
 
-  autoRun(store, () => {
+  autoRun(() => {
     store.updateLastDataUpdateTime()
     return store.config.theme
   }, func => debounce(func, 100)).start()
 
-  autoRun(store, () => {
+  autoRun(() => {
     store.updateTabsStatus()
     return store.fileTransfers
   }, func => debounce(func, 100)).start()
 
-  autoRun(store, () => {
+  autoRun(() => {
     ls.setItemJSON(sftpDefaultSortSettingKey, store.sftpSortSetting)
     return store._sftpSortSetting
   }).start()
 
-  autoRun(store, () => {
+  autoRun(() => {
     ls.setItemJSON(expandedKeysLsKey, store.expandedKeys)
     return store._expandedKeys
   }).start()
 
-  autoRun(store, () => {
+  autoRun(() => {
     ls.setItemJSON(localAddrBookmarkLsKey, store.addressBookmarksLocal)
     return store._addressBookmarksLocal
   }).start()
 
-  autoRun(store, () => {
+  autoRun(() => {
     ls.setItemJSON(checkedKeysLsKey, store.checkedKeys)
     return store._checkedKeys
   }).start()
 
-  autoRun(store, () => {
+  autoRun(() => {
     const tabs = store.getTabs()
     const { currentTabId } = store
     const tab = tabs.find(t => t.id === currentTabId)

package/package.json

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