@electerm/electerm-react 3.8.15 → 3.9.15

package/client/components/terminal/reconnect-overlay.jsx

@@ -1,27 +1,14 @@
 import { memo } from 'react'
-import { Button } from 'antd'
-import { LoadingOutlined } from '@ant-design/icons'
 
 const e = window.translate
 
-export default memo(function ReconnectOverlay ({ countdown, onCancel }) {
+export default memo(function ReconnectOverlay ({ countdown }) {
   if (countdown === null || countdown === undefined) {
     return null
   }
   return (
     <div className='terminal-reconnect-overlay'>
-      <div className='terminal-reconnect-box'>
-        <LoadingOutlined className='terminal-reconnect-icon' />
-        <div className='terminal-reconnect-msg'>
-          {e('autoReconnectTerminal')}: {countdown}s
-        </div>
-        <Button
-          size='small'
-          onClick={onCancel}
-        >
-          {e('cancel')}
-        </Button>
-      </div>
+      {e('autoReconnectTerminal')}: {countdown}s
     </div>
   )
 })

package/client/components/terminal/terminal-command-dropdown.jsx

@@ -278,7 +278,7 @@ export default class TerminalCmdSuggestions extends Component {
           id: uid(),
           command: b.password,
           type: 'PW',
-          hint: [b.username, b.host].filter(Boolean).join('@')
+          hint: [b.username, [b.host, b.port].filter(Boolean).join(':')].filter(Boolean).join('@')
         })
       }
     }

package/client/components/terminal/terminal-error-handle.jsx

@@ -0,0 +1,43 @@
+import { memo } from 'react'
+import {
+  Button,
+  Alert
+} from 'antd'
+
+const e = window.translate
+
+export default memo(function TerminalErrorHandle ({
+  errorMessage,
+  showEditBookmarkButton,
+  onEditBookmark
+}) {
+  if (!errorMessage) {
+    return null
+  }
+
+  function renderEditBookmarkButton () {
+    if (!showEditBookmarkButton) {
+      return null
+    }
+    return (
+      <div className='terminal-error-actions pd1y'>
+        <Button
+          onClick={onEditBookmark}
+        >
+          {e('edit')} {e('bookmarks')}
+        </Button>
+      </div>
+    )
+  }
+
+  return (
+    <Alert
+      className='terminal-error-handle'
+      message={errorMessage}
+      type='error'
+      showIcon
+      banner
+      description={renderEditBookmarkButton()}
+    />
+  )
+})

package/client/components/terminal/terminal.jsx

@@ -1,5 +1,4 @@
 import { Component, createRef } from 'react'
-import { handleErr } from '../../common/fetch.jsx'
 import { isEqual, pick, debounce, throttle } from 'lodash-es'
 import clone from '../../common/to-simple-obj.js'
 import resolve from '../../common/resolve.js'
@@ -7,7 +6,6 @@ import {
   Spin,
   Dropdown
 } from 'antd'
-import { notification } from '../common/notification'
 import message from '../common/message'
 import Modal from '../common/modal'
 import classnames from 'classnames'
@@ -48,8 +46,8 @@ import ExternalLink from '../common/external-link.jsx'
 import createDefaultLogPath from '../../common/default-log-path.js'
 import SearchResultBar from './terminal-search-bar'
 import RemoteFloatControl from '../common/remote-float-control'
-import { showSocketCloseWarning } from './socket-close-warning.jsx'
 import ReconnectOverlay from './reconnect-overlay.jsx'
+import TerminalErrorHandle from './terminal-error-handle.jsx'
 import {
   loadTerminal,
   loadFitAddon,
@@ -78,6 +76,7 @@ class Term extends Component {
       matchIndex: -1,
       totalLines: 0,
       reconnectCountdown: null,
+      terminalError: null,
       dropFileModalVisible: false,
       droppedFiles: []
     }
@@ -169,11 +168,6 @@ class Term extends Component {
     this.fitAddon = null
     this.cmdAddon = null
     this.imageAddon = null
-    // Clear the notification if it exists
-    if (this.socketCloseWarning) {
-      notification.destroy(this.socketCloseWarning.key)
-      this.socketCloseWarning = null
-    }
   }
 
   terminalConfigProps = [
@@ -836,6 +830,7 @@ class Term extends Component {
   }
 
   onPasswordPromptDetected = () => {
+    window.store.notifyTabPasswordPrompt(this.props.tab.id)
     if (!this.props.config.showCmdSuggestions) {
       return
     }
@@ -848,6 +843,7 @@ class Term extends Component {
   }
 
   onPasswordPromptCancelled = () => {
+    window.store.clearTabPasswordPrompt(this.props.tab.id)
     const suggestions = refsStatic.get('terminal-suggestions')
     if (suggestions?.state?.passwordMode) {
       suggestions.closeSuggestions()
@@ -958,9 +954,10 @@ class Term extends Component {
   }
 
   onSelectionChange = () => {
-    this.setState({
-      hasSelection: this.term.hasSelection()
-    })
+    const hasSelection = this.term.hasSelection()
+    const txt = hasSelection ? this.term.getSelection().trim() : ''
+    this.setState({ hasSelection })
+    refsStatic.get('unix-timestamp-tooltip')?.onSelection(txt)
   }
 
   // setActive = () => {
@@ -1170,7 +1167,8 @@ class Term extends Component {
 
   remoteInit = async (term = this.term) => {
     this.setState({
-      loading: true
+      loading: true,
+      terminalError: null
     })
     const { cols, rows } = term
     const { config } = this.props
@@ -1248,7 +1246,7 @@ class Term extends Component {
       .catch(err => {
         if (!isAutoReconnect) {
           const text = err.message
-          handleErr({ message: text })
+          this.handleError({ message: text, from, srcId })
         }
       })
     if (typeof r === 'string' && r.includes('fail')) {
@@ -1304,6 +1302,29 @@ class Term extends Component {
     )
   }
 
+  handleError = ({ message: errorMessage, from, srcId }) => {
+    this.setState({
+      terminalError: {
+        message: errorMessage || 'Failed to create terminal session',
+        from,
+        srcId
+      }
+    })
+  }
+
+  handleEditBookmarkFromError = () => {
+    const error = this.state.terminalError
+    if (!error || error.from !== 'bookmarks' || !error.srcId) {
+      return
+    }
+    const item = window.store.bookmarksMap?.get(error.srcId) ||
+      window.store.bookmarks?.find(d => d.id === error.srcId)
+    if (!item) {
+      return
+    }
+    window.store.openBookmarkEdit(item)
+  }
+
   initSocketEvents = () => {
     const originalSend = this.socket.send
     this.socket.send = (data) => {
@@ -1369,31 +1390,8 @@ class Term extends Component {
       return this.props.delTab(this.props.tab.id)
     }
     const { autoReconnectTerminal } = this.props.config
-    const isActive = this.isActiveTerminal()
-    const isFocused = window.focused
     if (autoReconnectTerminal) {
-      if (isActive && isFocused) {
-        this.socketCloseWarning = showSocketCloseWarning({
-          tabId: this.props.tab.id,
-          tab: this.props.tab,
-          autoReconnect: true,
-          delTab: this.props.delTab,
-          reloadTab: this.props.reloadTab
-        })
-      } else {
-        this.scheduleAutoReconnect(3000)
-      }
-    } else {
-      if (!isActive || !isFocused) {
-        return false
-      }
-      this.socketCloseWarning = showSocketCloseWarning({
-        tabId: this.props.tab.id,
-        tab: this.props.tab,
-        autoReconnect: false,
-        delTab: this.props.delTab,
-        reloadTab: this.props.reloadTab
-      })
+      this.scheduleAutoReconnect(3000)
     }
   }
 
@@ -1547,9 +1545,13 @@ class Term extends Component {
           <RemoteFloatControl
             isFullScreen={fullscreen}
           />
+          <TerminalErrorHandle
+            errorMessage={this.state.terminalError?.message}
+            showEditBookmarkButton={this.state.terminalError?.from === 'bookmarks' && !!this.state.terminalError?.srcId}
+            onEditBookmark={this.handleEditBookmarkFromError}
+          />
           <ReconnectOverlay
             countdown={this.state.reconnectCountdown}
-            onCancel={this.handleCancelAutoReconnect}
           />
           <DropFileModal
             visible={this.state.dropFileModalVisible}

package/client/components/terminal/terminal.styl

@@ -153,12 +153,17 @@
 
 .terminal-reconnect-overlay
   position absolute
-  left 0
-  top 0
-  width 100%
-  height 100%
-  display flex
-  align-items center
-  justify-content center
+  bottom 6px
+  right 12px
+  font-size 11px
+  color rgba(255, 255, 255, 0.55)
+  pointer-events none
   z-index 110
 
+.terminal-error-handle
+  position absolute
+  left 0
+  top 0
+  z-index 100
+  background var(--main)
+  max-width calc(100% - 24px)

package/client/components/terminal/unix-timestamp-tooltip.jsx

@@ -0,0 +1,85 @@
+/**
+ * Global tooltip that detects Unix timestamps in terminal selections
+ * and displays their human-readable date/time near the cursor.
+ * Registered via refsStatic as 'unix-timestamp-tooltip'.
+ */
+
+import { Component } from 'react'
+import { refsStatic } from '../common/ref'
+
+export default class UnixTimestampTooltip extends Component {
+  state = {
+    visible: false,
+    x: 0,
+    y: 0,
+    text: ''
+  }
+
+  _mouseX = 0
+  _mouseY = 0
+
+  componentDidMount () {
+    refsStatic.add('unix-timestamp-tooltip', this)
+    document.addEventListener('mousemove', this.onMouseMove)
+  }
+
+  componentWillUnmount () {
+    refsStatic.remove('unix-timestamp-tooltip')
+    document.removeEventListener('mousemove', this.onMouseMove)
+  }
+
+  detectUnixTimestamp (txt) {
+    if (!/^\d+$/.test(txt)) return null
+    const num = parseInt(txt, 10)
+    // seconds: 9-10 digits, year ~2001-2286
+    if ((txt.length === 9 || txt.length === 10) && num >= 946684800 && num <= 32503680000) {
+      return new Date(num * 1000).toLocaleString()
+    }
+    // milliseconds: 13 digits
+    if (txt.length === 13 && num >= 946684800000 && num <= 32503680000000) {
+      return new Date(num).toLocaleString()
+    }
+    return null
+  }
+
+  onMouseMove = (e) => {
+    this._mouseX = e.clientX
+    this._mouseY = e.clientY
+  }
+
+  onSelection = (txt) => {
+    const ts = this.detectUnixTimestamp(txt)
+    if (ts) {
+      this.setState({ visible: true, x: this._mouseX, y: this._mouseY, text: ts })
+    } else {
+      this.setState({ visible: false })
+    }
+  }
+
+  render () {
+    const { visible, x, y, text } = this.state
+    if (!visible) {
+      return null
+    }
+    return (
+      <div
+        style={{
+          position: 'fixed',
+          left: x,
+          top: y - 36,
+          background: 'rgba(0,0,0,0.75)',
+          color: '#fff',
+          padding: '3px 8px',
+          borderRadius: 4,
+          fontSize: 12,
+          whiteSpace: 'nowrap',
+          pointerEvents: 'none',
+          transform: 'translateX(-50%)',
+          zIndex: 9999
+        }}
+      >
+        {text}
+      </div>
+    )
+  }
+}

package/client/components/text-editor/edit-with-custom-editor.jsx

@@ -6,18 +6,30 @@ import { useState } from 'react'
 import { Button, Input, Space } from 'antd'
 import { safeGetItem, safeSetItem } from '../../common/safe-local-storage.js'
 
-const LS_KEY = 'customEditorCommand'
+export const CUSTOM_EDITOR_COMMAND_LS_KEY = 'customEditorCommand'
+export const CUSTOM_EDITOR_AUTO_OPEN_LS_KEY = 'customEditorAutoOpen'
 const e = window.translate
 
 export default function EditWithCustomEditor ({ loading, editWithCustom }) {
   const [editorCommand, setEditorCommand] = useState(
-    () => safeGetItem(LS_KEY) || ''
+    () => safeGetItem(CUSTOM_EDITOR_COMMAND_LS_KEY) || ''
   )
+  const [autoOpen, setAutoOpen] = useState(
+    () => safeGetItem(CUSTOM_EDITOR_AUTO_OPEN_LS_KEY) === 'true'
+  )
+
+  const autoOpenLabel = e('autoOpen')
 
   function handleChange (ev) {
     const val = ev.target.value
     setEditorCommand(val)
-    safeSetItem(LS_KEY, val)
+    safeSetItem(CUSTOM_EDITOR_COMMAND_LS_KEY, val)
+  }
+
+  function handleToggleAutoOpen () {
+    const next = !autoOpen
+    setAutoOpen(next)
+    safeSetItem(CUSTOM_EDITOR_AUTO_OPEN_LS_KEY, String(next))
   }
 
   function handleClick () {
@@ -45,6 +57,13 @@ export default function EditWithCustomEditor ({ loading, editWithCustom }) {
         onChange={handleChange}
         disabled={loading}
       />
+      <Button
+        type={autoOpen ? 'primary' : 'default'}
+        disabled={loading}
+        onClick={handleToggleAutoOpen}
+      >
+        {autoOpenLabel}: {autoOpen ? 'On' : 'Off'}
+      </Button>
     </Space.Compact>
   )
 }

package/client/components/text-editor/text-editor.jsx

@@ -4,9 +4,14 @@
 
 import { PureComponent } from 'react'
 import TextEditorForm from './text-editor-form'
+import {
+  CUSTOM_EDITOR_AUTO_OPEN_LS_KEY,
+  CUSTOM_EDITOR_COMMAND_LS_KEY
+} from './edit-with-custom-editor'
 import { Spin } from 'antd'
 import Modal from '../common/modal'
 import resolve from '../../common/resolve'
+import { safeGetItem } from '../../common/safe-local-storage.js'
 import { refsStatic, refs } from '../common/ref'
 
 const e = window.translate
@@ -69,12 +74,28 @@ export default class TextEditor extends PureComponent {
       return
     }
     const text = await fileRef.fetchEditorText(p, type)
+    const editorCommand = this.getAutoOpenCustomEditorCommand()
     this.setStateProxy({
       text,
       loading: false
+    }, () => {
+      if (editorCommand) {
+        this.editWithCustom(editorCommand)
+      }
     })
   }
 
+  getAutoOpenCustomEditorCommand = () => {
+    if (window.et.isWebApp) {
+      return ''
+    }
+    const autoOpen = safeGetItem(CUSTOM_EDITOR_AUTO_OPEN_LS_KEY) === 'true'
+    if (!autoOpen) {
+      return ''
+    }
+    return safeGetItem(CUSTOM_EDITOR_COMMAND_LS_KEY).trim()
+  }
+
   doSubmit = () => {
     this.handleSubmit({
       text: this.state.text

package/client/components/tree-list/bookmark-toolbar.jsx

@@ -7,7 +7,7 @@ import {
   MenuOutlined,
   EditOutlined
 } from '@ant-design/icons'
-import { Button, Space, Dropdown } from 'antd'
+import { Button, Space, Dropdown, Flex } from 'antd'
 import copy from 'json-deep-copy'
 import time from '../../common/time'
 import download from '../../common/download'
@@ -87,8 +87,8 @@ export default function BookmarkToolbar (props) {
   return (
 
     <div className='pd1b pd1r'>
-      <div className='fix'>
-        <div className='fleft'>
+      <Flex justify='space-between' align='center'>
+        <div>
           <Space.Compact>
             <Button onClick={onNewBookmark}>
               <BookOutlined className='with-plus' />
@@ -122,12 +122,12 @@ export default function BookmarkToolbar (props) {
             </Button>
           </Space.Compact>
         </div>
-        <div className='fright'>
+        <div>
           <Dropdown {...ddProps}>
             <MenuOutlined />
           </Dropdown>
         </div>
-      </div>
+      </Flex>
     </div>
   )
 }

package/client/components/tree-list/tree-list-item.jsx

@@ -3,17 +3,11 @@
  */
 
 import { memo } from 'react'
-import createName, { createTitleTag } from '../../common/create-title'
+import { createTitleTag } from '../../common/create-title'
 import classnames from 'classnames'
 import highlight from '../common/highlight'
 import uid from '../../common/uid'
 
-function getItemLabel (item, isGroup) {
-  return isGroup
-    ? item?.title || ''
-    : createName(item)
-}
-
 function areEqual (prevProps, nextProps) {
   const prevSelected = prevProps.selectedItemId === prevProps.item.id
   const nextSelected = nextProps.selectedItemId === nextProps.item.id
@@ -27,10 +21,10 @@ function areEqual (prevProps, nextProps) {
     prevSelected === nextSelected &&
     prevSearchSelected === nextSearchSelected &&
     prevProps.item.id === nextProps.item.id &&
-    prevProps.item.level === nextProps.item.level &&
-    prevProps.item.color === nextProps.item.color &&
-    prevProps.item.description === nextProps.item.description &&
-    getItemLabel(prevProps.item, prevProps.isGroup) === getItemLabel(nextProps.item, nextProps.isGroup)
+    prevProps.itemLevel === nextProps.itemLevel &&
+    prevProps.itemColor === nextProps.itemColor &&
+    prevProps.itemDescription === nextProps.itemDescription &&
+    prevProps.itemLabel === nextProps.itemLabel
 }
 
 function TreeListItem (props) {
@@ -87,7 +81,7 @@ function TreeListItem (props) {
     : null
   const title = isGroup
     ? item.title
-    : createName(item)
+    : props.itemLabel
   const titleAll = title + (item.description ? ' - ' + item.description : '')
   const titleHighlight = isGroup
     ? item.title || 'no title'

package/client/components/tree-list/tree-list-row.jsx

@@ -2,6 +2,7 @@ import TreeExpander from './tree-expander'
 import TreeListItem from './tree-list-item'
 import TreeItemOp from './tree-item-op'
 import { treeLevelIndent } from './tree-list-layout'
+import createName from '../../common/create-title'
 
 export default function TreeListRow (props) {
   const {
@@ -38,6 +39,10 @@ export default function TreeListRow (props) {
     item,
     isGroup,
     parentId,
+    itemLabel: isGroup ? (item?.title || '') : createName(item),
+    itemColor: item?.color,
+    itemDescription: item?.description,
+    itemLevel: item?.level,
     leftSidebarWidth,
     staticList,
     selectedItemId: activeItemId,

package/client/components/tree-list/tree-list-rows.js

@@ -26,7 +26,9 @@ export function buildVisibleTreeRows ({
     const item = bookmarksMap.get(bookmarkId)
     const matched = Boolean(
       item &&
-      (!lowerKeyword || createName(item).toLowerCase().includes(lowerKeyword))
+      (!lowerKeyword ||
+        createName(item).toLowerCase().includes(lowerKeyword) ||
+        (item.description || '').toLowerCase().includes(lowerKeyword))
     )
     bookmarkMatchCache.set(bookmarkId, matched)
     return matched

package/client/components/widgets/widget-control.jsx

@@ -55,6 +55,7 @@ export default function WidgetControl ({ formData, widgetInstancesLength }) {
       showMsg(msg, 'success', result.serverInfo, 10)
     } catch (err) {
       console.error('Failed to run widget:', err)
+      showMsg(`Failed to run widget: ${err.message}`, 'error', null, 10)
     } finally {
       setLoading(false)
     }

package/client/store/common.js

@@ -298,7 +298,7 @@ export default Store => {
   }
 
   Store.prototype.aiConfigMissing = function () {
-    return aiConfigsArr.slice(0, -1).some(k => !window.store.config[k])
+    return aiConfigsArr.filter(k => k !== 'apiKeyAI' && k !== 'proxyAI').some(k => !window.store.config[k])
   }
 
   Store.prototype.clearHistory = function () {

package/client/store/load-data.js

@@ -100,7 +100,7 @@ export async function addTabFromCommandLine (store, opts) {
     (conf.username && conf.host) ||
     conf.fromCmdLine
   ) {
-    store.addTab(conf)
+    store.ipcOpenTab(conf)
   } else if (
     options.initFolder &&
     !(store.config.onStartSessions || []).length &&
@@ -229,7 +229,7 @@ export default (Store) => {
   Store.prototype.checkPendingDeepLink = async function () {
     const pending = await window.pre.runGlobalAsync('getPendingDeepLink')
     if (pending) {
-      window.store.addTab(pending)
+      window.store.ipcOpenTab(pending)
     }
   }
   Store.prototype.parseQuickConnect = function (url) {