@electerm/electerm-react 3.8.8 → 3.9.5

package/client/components/sidebar/info-modal.jsx

@@ -16,6 +16,7 @@ import Link from '../common/external-link'
 import LogoElem from '../common/logo-elem'
 import RunningTime from './app-running-time'
 import { auto } from 'manate/react'
+import { useState } from 'react'
 
 import {
   packInfo,
@@ -27,8 +28,13 @@ import './info.styl'
 const e = window.translate
 
 export default auto(function InfoModal (props) {
+  const [runtimeEnv, setRuntimeEnv] = useState(null)
+
   const handleChangeTab = key => {
     window.store.infoModalTab = key
+    if (key === infoTabs.env && !runtimeEnv) {
+      window.pre.runGlobalAsync('getEnv').then(env => setRuntimeEnv(env))
+    }
   }
 
   const renderCheckUpdate = () => {
@@ -135,14 +141,14 @@ export default auto(function InfoModal (props) {
     knownIssuesLink
   } = packInfo
   const link = releaseLink.replace('/releases', '')
-  const { env, versions } = window.pre
+  const { versions } = window.pre
   const deps = {
     ...devDependencies,
     ...dependencies
   }
   const envs = {
     ...versions,
-    ...env
+    ...(runtimeEnv || {})
   }
   const title = (
     <div className='custom-modal-close-confirm-title font16'>

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-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 = [
@@ -958,9 +952,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 +1165,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 +1244,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 +1300,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 +1388,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 +1543,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/tree-list/bookmark-toolbar.jsx

@@ -7,15 +7,12 @@ 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 { uniq } from 'lodash-es'
-import { fixBookmarks } from '../../common/db-fix'
 import download from '../../common/download'
-import delay from '../../common/wait'
-import { action } from 'manate'
 import Upload from '../common/upload'
+import { beforeBookmarkUpload } from './bookmark-upload'
 
 const e = window.translate
 
@@ -28,71 +25,12 @@ export default function BookmarkToolbar (props) {
     bookmarkGroups,
     bookmarks
   } = props
-  const upload = action(async (file) => {
-    const { store } = window
-    const filePath = file.filePath
-    const txt = await window.fs.readFile(filePath)
-
-    const content = JSON.parse(txt)
-    const {
-      bookmarkGroups: bookmarkGroups1,
-      bookmarks: bookmarks1
-    } = content
-    const bookmarkGroups0 = copy(bookmarkGroups)
-    const bookmarks0 = copy(bookmarks)
-
-    // Using Map instead of reduce
-    const bmTree = new Map(
-      bookmarks0.map(bookmark => [bookmark.id, bookmark])
-    )
-    const bmgTree = new Map(
-      bookmarkGroups0.map(group => [group.id, group])
-    )
-
-    const fixed = fixBookmarks(bookmarks1)
-
-    fixed.forEach(bg => {
-      if (!bmTree.has(bg.id)) {
-        store.bookmarks.push(bg)
-      }
-    })
-
-    bookmarkGroups1.forEach(bg => {
-      if (!bmgTree.has(bg.id)) {
-        store.bookmarkGroups.push(bg)
-      } else {
-        const bg1 = store.bookmarkGroups.find(
-          b => b.id === bg.id
-        )
-        bg1.bookmarkIds = uniq(
-          [
-            ...bg1.bookmarkIds,
-            ...bg.bookmarkIds
-          ]
-        )
-      }
-    })
-    return false
-  })
-  const beforeUpload = async (file) => {
-    const names = [
-      'bookmarks',
-      'bookmarkGroups'
-    ]
-    for (const name of names) {
-      window[`watch${name}`].stop()
-    }
-    upload(file)
-    await delay(1000)
-    for (const name of names) {
-      window[`watch${name}`].start()
-    }
-  }
+  const beforeUpload = beforeBookmarkUpload
 
   const handleDownload = () => {
     const txt = JSON.stringify({
-      bookmarkGroups: copy(bookmarkGroups),
-      bookmarks: copy(bookmarks)
+      bookmarkGroups: copy(bookmarkGroups || []),
+      bookmarks: copy(bookmarks || [])
     }, null, 2)
     const stamp = time(undefined, 'YYYY-MM-DD-HH-mm-ss')
     download('bookmarks-' + stamp + '.json', txt)
@@ -149,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' />
@@ -184,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/bookmark-upload.js

@@ -0,0 +1,106 @@
+/**
+ * bookmark import/upload logic
+ */
+
+import copy from 'json-deep-copy'
+import { uniq, isPlainObject } from 'lodash-es'
+import { action } from 'manate'
+import uid from '../../common/uid'
+import time from '../../common/time'
+import { fixBookmarks } from '../../common/db-fix'
+import delay from '../../common/wait'
+
+function fixBookmarksId (bookmarks) {
+  return bookmarks.map(item => {
+    if (!isPlainObject(item)) {
+      return null
+    }
+    if (!item.id) {
+      item.id = uid()
+    }
+    return item
+  }).filter(Boolean)
+}
+export const bookmarkUpload = action(async (file) => {
+  const { store } = window
+  const { bookmarks, bookmarkGroups } = store
+
+  const filePath = file.filePath
+  const txt = await window.fs.readFile(filePath)
+
+  const content = JSON.parse(txt)
+  let bookmarkGroups1 = []
+  let bookmarks1 = []
+  if (Array.isArray(content)) {
+    bookmarks1 = fixBookmarksId(content)
+    bookmarkGroups1 = [{
+      id: uid(),
+      title: 'imported_' + time(),
+      color: '#0088cc',
+      bookmarkGroupIds: [],
+      bookmarkIds: bookmarks1.map(b => b.id)
+    }]
+  } else {
+    bookmarkGroups1 = content.bookmarkGroups || []
+    bookmarks1 = fixBookmarksId(content.bookmarks || [])
+  }
+
+  const bookmarkGroups0 = copy(bookmarkGroups)
+  const bookmarks0 = copy(bookmarks)
+
+  const bmTree = new Map(
+    bookmarks0.map(bookmark => [bookmark.id, bookmark])
+  )
+  const bmgTree = new Map(
+    bookmarkGroups0.map(group => [group.id, group])
+  )
+
+  const fixed = fixBookmarks(bookmarks1)
+
+  fixed.forEach(bg => {
+    if (!bmTree.has(bg.id)) {
+      store.bookmarks.push(bg)
+    }
+  })
+
+  bookmarkGroups1.forEach(bg => {
+    if (!bmgTree.has(bg.id)) {
+      store.bookmarkGroups.push(bg)
+    } else {
+      const bg1 = store.bookmarkGroups.find(
+        b => b.id === bg.id
+      )
+      bg1.bookmarkIds = uniq(
+        [
+          ...(bg1.bookmarkIds || []),
+          ...(bg.bookmarkIds || [])
+        ]
+      )
+      bg1.bookmarkGroupIds = uniq(
+        [
+          ...(bg1.bookmarkGroupIds || []),
+          ...(bg.bookmarkGroupIds || [])
+        ]
+      )
+    }
+  })
+
+  store.fixBookmarkGroups()
+
+  return false
+})
+
+export async function beforeBookmarkUpload (file) {
+  const names = [
+    'bookmarks',
+    'bookmarkGroups'
+  ]
+  for (const name of names) {
+    window[`watch${name}`].stop()
+  }
+  bookmarkUpload(file)
+  await delay(1000)
+  for (const name of names) {
+    window[`watch${name}`].start()
+  }
+}

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

@@ -10,9 +10,7 @@ import {
   rightSidebarWidthKey,
   addPanelWidthLsKey,
   dismissDelKeyTipLsKey,
-  connectionMap,
-  settingMap,
-  settingAiId
+  connectionMap
 } from '../common/constants'
 import * as ls from '../common/safe-local-storage'
 import { refs, refsStatic } from '../components/common/ref'
@@ -20,7 +18,6 @@ import { action } from 'manate'
 import uid from '../common/uid'
 import deepCopy from 'json-deep-copy'
 import { aiConfigsArr } from '../components/ai/ai-config-props'
-import settingList from '../common/setting-list'
 
 const e = window.translate
 const { assign } = Object
@@ -54,12 +51,7 @@ export default Store => {
   }
 
   Store.prototype.toggleAIConfig = function () {
-    const { store } = window
-    store.storeAssign({
-      settingTab: settingMap.setting
-    })
-    store.setSettingItem(settingList().find(d => d.id === settingAiId))
-    store.openSettingModal()
+    window.store.showAIConfigModal = true
   }
 
   Store.prototype.onResize = debounce(async function () {
@@ -306,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/init-state.js

@@ -118,6 +118,7 @@ export default () => {
     rightPanelTab: 'info',
     rightPanelPinned: false,
     rightPanelWidth: parseInt(ls.getItem(rightSidebarWidthKey), 10) || 500,
+    showAIConfigModal: false,
 
     // for settings related
     settingItem: initSettingItem([], settingMap.bookmarks),

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) {

package/client/store/sync.js

@@ -68,11 +68,12 @@ export default (Store) => {
       ).join('####')
     }
     if (type === syncTypes.webdav) {
-      // WebDAV token format: serverUrl####username####password
+      // WebDAV token format: serverUrl####username####password####skipVerify
       const serverUrl = get(window.store.config, 'syncSetting.webdavServerUrl')
       const username = get(window.store.config, 'syncSetting.webdavUsername')
       const password = get(window.store.config, 'syncSetting.webdavPassword')
-      return [serverUrl, username, password].join('####')
+      const skipVerify = get(window.store.config, 'syncSetting.webdavSkipVerify') || false
+      return [serverUrl, username, password, skipVerify].join('####')
     }
     return get(window.store.config, 'syncSetting.' + type + 'AccessToken')
   }