@electerm/electerm-react 3.8.8 → 3.9.5

package/client/common/parse-quick-connect.js

@@ -21,6 +21,12 @@
 
 const SUPPORTED_PROTOCOLS = ['ssh', 'telnet', 'vnc', 'rdp', 'spice', 'serial', 'ftp', 'http', 'https', 'electerm']
 
+/**
+ * Deny list for opts keys - these are parsed from the URL itself
+ * and should not be overridable via the opts JSON parameter for safety
+ */
+const OPTS_DENY_LIST = ['type', 'host']
+
 /**
  * Default ports for each protocol
  */
@@ -393,6 +399,7 @@ function parseQuickConnect (str) {
     if (optsStr) {
       try {
         const extraOpts = JSON.parse(optsStr)
+        OPTS_DENY_LIST.forEach(key => delete extraOpts[key])
         Object.assign(opts, extraOpts)
       } catch (err) {
         console.error('Failed to parse opts:', err)
@@ -439,5 +446,6 @@ export {
   getDefaultPort,
   getSupportedProtocols,
   SUPPORTED_PROTOCOLS,
-  DEFAULT_PORTS
+  DEFAULT_PORTS,
+  OPTS_DENY_LIST
 }

package/client/common/pre.js

@@ -9,7 +9,6 @@ const {
 
 const props = runSync('getConstants')
 
-props.env = JSON.parse(props.env)
 props.versions = JSON.parse(props.versions)
 
 window.pre = {

package/client/components/ai/ai-config-modal.jsx

@@ -0,0 +1,52 @@
+import Modal from '../common/modal'
+import { auto } from 'manate/react'
+import AIConfigForm from './ai-config'
+import message from '../common/message'
+import { aiConfigsArr } from './ai-config-props'
+import { pick } from 'lodash-es'
+
+const e = window.translate
+
+export default auto(function AIConfigModal ({ store }) {
+  const { showAIConfigModal } = store
+
+  if (!showAIConfigModal) {
+    return null
+  }
+
+  function getInitialValues () {
+    const res = pick(store.config, aiConfigsArr)
+    if (!res.languageAI) {
+      res.languageAI = window.store.getLangName()
+    }
+    return res
+  }
+
+  function handleSubmit (values) {
+    window.store.updateConfig(values)
+    message.success(e('saved') || 'Saved')
+    window.store.showAIConfigModal = false
+  }
+
+  function handleClose () {
+    window.store.showAIConfigModal = false
+  }
+
+  return (
+    <Modal
+      open={showAIConfigModal}
+      onCancel={handleClose}
+      footer={null}
+      title='AI Config'
+      width='80%'
+      destroyOnClose
+      className='ai-config-modal'
+    >
+      <AIConfigForm
+        initialValues={getInitialValues()}
+        onSubmit={handleSubmit}
+        showAIConfig
+      />
+    </Modal>
+  )
+})

package/client/components/ai/ai-config.jsx

@@ -6,7 +6,7 @@ import {
   Alert,
   Space
 } from 'antd'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import Link from '../common/external-link'
 import AiCache from './ai-cache'
 import {
@@ -15,9 +15,6 @@ import {
 import Password from '../common/password'
 import AiHistory, { addHistoryItem } from './ai-history'
 
-// Comprehensive API provider configurations
-import providers from './providers'
-
 const STORAGE_KEY_CONFIG = 'ai_config_history'
 const EVENT_NAME_CONFIG = 'ai-config-history-update'
 
@@ -39,7 +36,6 @@ const proxyOptions = [
 
 export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig }) {
   const [form] = Form.useForm()
-  const [modelOptions, setModelOptions] = useState([])
 
   useEffect(() => {
     if (initialValues) {
@@ -51,23 +47,6 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
     return true
   }
 
-  const getBaseURLOptions = () => {
-    return providers.map(provider => ({
-      value: provider.baseURL,
-      label: provider.label
-    }))
-  }
-
-  const getModelOptions = (baseURL) => {
-    const provider = providers.find(p => p.baseURL === baseURL)
-    if (!provider) return []
-
-    return provider.models.map(model => ({
-      value: model,
-      label: model
-    }))
-  }
-
   const handleSubmit = async (values) => {
     onSubmit(values)
     addHistoryItem(STORAGE_KEY_CONFIG, values, EVENT_NAME_CONFIG)
@@ -88,11 +67,6 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
     return { label, title }
   }
 
-  function handleChange (v) {
-    const options = getModelOptions(v)
-    setModelOptions(options)
-  }
-
   if (!showAIConfig) {
     return null
   }
@@ -127,12 +101,8 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
                 { type: 'url', message: 'Please enter a valid URL!' }
               ]}
             >
-              <AutoComplete
-                options={getBaseURLOptions()}
-                placeholder='Enter or select API provider URL'
-                filterOption={filter}
-                onChange={handleChange}
-                allowClear
+              <Input
+                placeholder='Enter API provider URL'
                 style={{ width: '75%' }}
               />
             </Form.Item>
@@ -156,10 +126,8 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
           name='modelAI'
           rules={[{ required: true, message: 'Please input or select a model!' }]}
         >
-          <AutoComplete
-            options={modelOptions}
+          <Input
             placeholder='Enter or select AI model'
-            filterOption={filter}
           />
         </Form.Item>
 
@@ -202,11 +170,10 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
         >
           <AutoComplete
             options={proxyOptions}
-            placeholder='Enter proxy URL (optional)'
             filterOption={filter}
             allowClear
           >
-            <Input />
+            <Input placeholder='Enter proxy URL (optional)' />
           </AutoComplete>
         </Form.Item>
 

package/client/components/ai/get-brand.js

@@ -1,15 +1,4 @@
-import providers from './providers'
-
 export default function getBrand (baseURLAI) {
-  // First, try to match with providers
-  const provider = providers.find(p => p.baseURL === baseURLAI)
-  if (provider) {
-    return {
-      brand: provider.label,
-      brandUrl: provider.homepage
-    }
-  }
-
   // If no match, extract brand from URL
   try {
     const url = new URL(baseURLAI)

package/client/components/bg/custom-css.jsx

@@ -13,7 +13,8 @@ export default function CustomCss (props) {
     if (configLoaded) {
       const style = document.getElementById(themeDomId)
       if (style) {
-        style.innerHTML = customCss || ''
+        const safeCss = (customCss || '').replace(/@import/gi, '#')
+        style.innerHTML = safeCss
       }
     }
   }, [customCss, configLoaded])

package/client/components/bookmark-form/bookmark-from-history-modal.jsx

@@ -49,7 +49,6 @@ export default class BookmarkFromHistoryModal extends React.PureComponent {
       ...tab,
       id: generate()
     }
-    console.log(r)
     delete r.parentId
     delete r.category
     return r

package/client/components/bookmark-form/config/rdp.js

@@ -2,7 +2,7 @@ import { formItemLayout } from '../../../common/form-layout.js'
 import { terminalRdpType } from '../../../common/constants.js'
 import { createBaseInitValues, getAuthTypeDefault } from '../common/init-values.js'
 import { isEmpty } from 'lodash-es'
-import { commonFields } from './common-fields.js'
+import { commonFields, connectionHoppingTab } from './common-fields.js'
 
 const e = window.translate
 
@@ -12,6 +12,7 @@ const rdpConfig = {
   initValues: (props) => {
     return createBaseInitValues(props, terminalRdpType, {
       port: 3389,
+      connectionHoppings: [],
       ...getAuthTypeDefault(props)
     })
   },
@@ -38,7 +39,8 @@ const rdpConfig = {
         commonFields.proxy,
         commonFields.type
       ]
-    }
+    },
+    connectionHoppingTab()
   ]
 }
 

package/client/components/icons/heartbeat.jsx

@@ -0,0 +1,23 @@
+import Icon from '@ant-design/icons'
+
+const HeartbeatSvg = () => (
+  <svg
+    viewBox='0 0 1024 1024'
+    fill='currentColor'
+    width='1em'
+    height='1em'
+    aria-hidden='true'
+  >
+    <path d='M923 283.6a260.1 260.1 0 00-56.9-82.8 264.4 264.4 0 00-84-55.5A265.3 265.3 0 00679.7 128c-38.1 0-75.4 7.5-109.8 22.3a274.5 274.5 0 00-87.7 60.8l-12.1 12.5-12.1-12.5a260.5 260.5 0 00-87.7-60.8c-34.4-14.8-71.7-22.3-109.8-22.3-38.2 0-75.5 7.5-109.9 22.3-33.4 14.3-63.3 34.9-88.9 61-25.6 26.1-45.7 56.4-59.9 90.5A278.3 278.3 0 000 416.5c0 39.6 7.7 77.2 22.9 111.6 12.8 29.6 31.5 57 55.5 81.5l356.2 358.5c12.2 12.3 29.7 19.4 47.8 19.4 18.1 0 35.6-7.1 47.7-19.4L886 609.6c24-24.5 42.7-51.9 55.5-81.5C956.3 493.7 964 456.1 964 416.5c0-37.9-7.4-74.7-22-109zM880 497.9c-10.4 24.1-26 46-46.5 65.2L480 920.7 193.5 563.1C173 543.9 157.4 522 147 497.9c-12.1-27.9-18.2-57.8-18.2-88.6 0-30 5.8-59 17.3-86.3 11.1-26.5 27.2-50.3 47.8-70.8 20.6-20.4 44.6-36.5 71.4-47.8 27.7-11.7 57.2-17.7 87.8-17.7 32.3 0 63.7 6.5 93.2 19.3 29 12.5 55 30.9 77.2 54.4l73.9 76.5 73.9-76.5c22.2-23.5 48.2-41.9 77.2-54.4 29.5-12.8 60.9-19.3 93.2-19.3 30.6 0 60.1 6 87.8 17.7 26.8 11.3 50.8 27.4 71.4 47.8 20.6 20.5 36.7 44.3 47.8 70.8 11.5 27.3 17.3 56.3 17.3 86.3 0 30.8-6.1 60.7-18.2 88.6z' />
+    <polyline
+      points='160,512 310,512 370,310 450,714 530,512 594,512 654,360 714,664 774,512 864,512'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='60'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+  </svg>
+)
+
+export const HeartbeatIcon = props => (<Icon component={HeartbeatSvg} {...props} />)

package/client/components/main/main.jsx

@@ -28,6 +28,7 @@ import ConnectionHoppingWarning from './connection-hopping-warnning'
 import SshConfigLoadNotify from '../ssh-config/ssh-config-load-notify'
 import LoadSshConfigs from '../ssh-config/load-ssh-configs'
 import AIChat from '../ai/ai-chat'
+import AIConfigModal from '../ai/ai-config-modal'
 import Opacity from '../common/opacity'
 import MoveItemModal from '../tree-list/move-item-modal'
 import InputContextMenu from '../common/input-context-menu'
@@ -35,6 +36,7 @@ import WorkspaceSaveModal from '../tabs/workspace-save-modal'
 import BookmarkFromHistoryModal from '../bookmark-form/bookmark-from-history-modal'
 import AutoSync from '../setting-sync/auto-sync'
 import BatchOpRunner from '../batch-op/batch-op-runner'
+import UnixTimestampTooltip from '../terminal/unix-timestamp-tooltip'
 import { pick } from 'lodash-es'
 import deepCopy from 'json-deep-copy'
 import './wrapper.styl'
@@ -50,7 +52,7 @@ export default auto(function Index (props) {
     ipcOnEvent('open-about', store.openAbout)
     ipcOnEvent('new-ssh', store.onNewSsh)
     ipcOnEvent('add-tab-from-command-line', store.addTabFromCommandLine)
-    ipcOnEvent('open-tab', (e, parsed) => store.addTab(parsed))
+    ipcOnEvent('open-tab', (e, parsed) => store.ipcOpenTab(parsed))
     ipcOnEvent('openSettings', store.openSetting)
     ipcOnEvent('selectall', store.selectall)
     ipcOnEvent('focused', store.focus)
@@ -295,6 +297,8 @@ export default auto(function Index (props) {
         <BookmarkFromHistoryModal />
         <NotificationContainer />
         <BatchOpRunner />
+        <AIConfigModal store={store} />
+        <UnixTimestampTooltip />
       </div>
     </ConfigProvider>
   )

package/client/components/session/session.jsx

@@ -14,8 +14,7 @@ import {
   FullscreenOutlined,
   PaperClipOutlined,
   CloseOutlined,
-  ApartmentOutlined,
-  HeartOutlined
+  ApartmentOutlined
 } from '@ant-design/icons'
 import {
   Tooltip,
@@ -37,6 +36,7 @@ import {
 import { SplitViewIcon } from '../icons/split-view'
 import { refs } from '../common/ref'
 import safeName from '../../common/safe-name'
+import { HeartbeatIcon } from '../icons/heartbeat'
 import './session.styl'
 
 const e = window.translate
@@ -550,7 +550,7 @@ export default class SessionWrapper extends Component {
     }
     return (
       <Tooltip title={title}>
-        <HeartOutlined {...iconProps} />
+        <HeartbeatIcon {...iconProps} />
       </Tooltip>
     )
   }

package/client/components/setting-sync/setting-sync-form.jsx

@@ -7,7 +7,7 @@
  */
 import { useEffect, useRef } from 'react'
 import { ArrowDownOutlined, ArrowUpOutlined, SaveOutlined, ClearOutlined } from '@ant-design/icons'
-import { Button, Input, Form, Alert } from 'antd'
+import { Button, Input, Form, Alert, Switch } from 'antd'
 import { notification } from '../common/notification'
 import Link from '../common/external-link'
 import dayjs from 'dayjs'
@@ -80,6 +80,7 @@ export default function SyncForm (props) {
       up[syncType + 'ServerUrl'] = res.serverUrl || ''
       up[syncType + 'Username'] = res.username || ''
       up[syncType + 'Password'] = res.password || ''
+      up[syncType + 'SkipVerify'] = res.skipVerify || false
     }
 
     window.store.updateSyncSetting(up)
@@ -247,6 +248,13 @@ export default function SyncForm (props) {
             id='sync-input-webdav-username'
           />
         </FormItem>
+        <FormItem
+          label={createLabel('Skip SSL verify')}
+          name='skipVerify'
+          valuePropName='checked'
+        >
+          <Switch />
+        </FormItem>
         <FormItem
           label={createLabel(e('password'))}
           name='password'

package/client/components/setting-sync/setting-sync.jsx

@@ -48,7 +48,8 @@ export default auto(function SyncSettingEntry (props) {
       // WebDAV specific fields
       serverUrl: syncSetting[type + 'ServerUrl'],
       username: syncSetting[type + 'Username'],
-      password: syncSetting[type + 'Password']
+      password: syncSetting[type + 'Password'],
+      skipVerify: syncSetting[type + 'SkipVerify'] || false
     }
     return (
       <SyncForm

package/client/components/sftp/list-table-ui.jsx

@@ -2,8 +2,8 @@
  * file list table
  */
 
-import { Component } from 'react'
-import { Dropdown, Pagination } from 'antd'
+import { Component, createRef } from 'react'
+import { Dropdown } from 'antd'
 import classnames from 'classnames'
 import FileSection from './file-item'
 import PagedList from './paged-list'
@@ -19,7 +19,25 @@ const e = window.translate
 export default class FileListTable extends Component {
   constructor (props) {
     super(props)
-    this.state = this.initFromProps()
+    this.state = {
+      ...this.initFromProps(),
+      scrollTop: 0
+    }
+  }
+
+  containerRef = createRef()
+
+  componentDidUpdate (prevProps) {
+    if (prevProps.fileList !== this.props.fileList) {
+      if (this.containerRef.current) {
+        this.containerRef.current.scrollTop = 0
+      }
+      this.setState({ scrollTop: 0 })
+    }
+  }
+
+  onScroll = (e) => {
+    this.setState({ scrollTop: e.target.scrollTop })
   }
 
   initFromProps = (pps = this.getPropsDefault()) => {
@@ -36,9 +54,7 @@ export default class FileListTable extends Component {
       }
     })
     return {
-      pageSize: 100,
-      properties,
-      page: 1
+      properties
     }
   }
 
@@ -171,40 +187,6 @@ export default class FileListTable extends Component {
     'left'
   ]
 
-  hasPager = () => {
-    const {
-      pageSize
-    } = this.state
-    const {
-      fileList
-    } = this.props
-    const len = fileList.length
-    return len > pageSize
-  }
-
-  onPageChange = (page) => {
-    this.setState({ page })
-  }
-
-  renderPager () {
-    const { page, pageSize } = this.state
-    const { fileList } = this.props
-    const props = {
-      current: page,
-      pageSize,
-      total: fileList.length,
-      showLessItems: true,
-      showSizeChanger: false,
-      simple: false,
-      onChange: this.onPageChange
-    }
-    return (
-      <div className='pd1b pager-wrap'>
-        <Pagination {...props} />
-      </div>
-    )
-  }
-
   // reset
   resetWidth = () => {
     this.setState(this.initFromProps())
@@ -293,24 +275,19 @@ export default class FileListTable extends Component {
 
   render () {
     const { fileList, height, type } = this.props
-    // const tableHeaderHeight = 30
-    // const sh = sshSftpSplitView ? 0 : 32
+    const containerHeight = height - 42 - 30 - 32 - 90
     const props = {
+      ref: this.containerRef,
       className: 'sftp-table-content overscroll-y relative',
       style: {
-        height: height - 42 - 30 - 32 - 90
+        height: containerHeight
       },
       draggable: false,
+      onScroll: this.onScroll,
       onClick: this.handleClick,
       onDoubleClick: this.handleDoubleClick
     }
-    const hasPager = this.hasPager()
-    const cls = classnames(
-      'sftp-table relative',
-      {
-        'sftp-has-pager': hasPager
-      }
-    )
+    const cls = classnames('sftp-table relative')
     const ddProps = {
       menu: {
         items: this.renderContextMenuFile(),
@@ -338,13 +315,11 @@ export default class FileListTable extends Component {
             <PagedList
               list={fileList}
               renderItem={this.renderItem}
-              hasPager={hasPager}
-              page={this.state.page}
-              pageSize={this.state.pageSize}
+              scrollTop={this.state.scrollTop}
+              containerHeight={containerHeight}
             />
           </div>
         </Dropdown>
-        {hasPager && this.renderPager()}
       </div>
     )
   }

package/client/components/sftp/paged-list.jsx

@@ -1,56 +1,56 @@
 /**
- * file list module to limit files rendered to increase performance
+ * Virtual list for SFTP file list.
+ *
+ * Scroll state is owned by the parent (list-table-ui) via React's onScroll prop
+ * on the scrollable container, and passed down as `scrollTop`. This avoids the
+ * React lifecycle ordering bug where a child's componentDidMount fires before the
+ * parent div's ref is assigned, making addEventListener attach to null.
+ *
+ * Uses spacers (top/bottom divs) so the container's scrollbar reflects the full
+ * list height while only the visible window (± OVERSCAN) is in the DOM.
+ *
+ * offsetTop is read from rootRef.offsetTop at render time — the distance from the
+ * scroll container's top edge to this list's top edge (accounts for the ".." parent
+ * row above the list).
  */
 
-import { Component } from 'react'
-import { Pagination } from 'antd'
+import { Component, createRef } from 'react'
 
-export default class ScrollFiles extends Component {
-  state = {
-    page: 1,
-    pageSize: 100
-  }
+const ITEM_SIZE = 36 // 32px item height + 4px margin-bottom
+const OVERSCAN = 5
 
-  onChange = page => {
-    this.setState({
-      page
-    })
-  }
+export default class VirtualList extends Component {
+  rootRef = createRef()
 
-  renderList () {
-    const page = this.props.page ?? this.state.page
-    const pageSize = this.props.pageSize ?? this.state.pageSize
-    const start = (page - 1) * pageSize
-    const end = start + pageSize
-    const {
-      list, hasPager
-    } = this.props
-    const arr = hasPager
-      ? list.slice(start, end)
-      : list
-    return arr.map((item, index) => this.props.renderItem(item, index))
-  }
+  render () {
+    const { list, renderItem, containerHeight = 400, scrollTop = 0 } = this.props
+
+    // offsetTop: distance from scroll container top to this list's top.
+    // rootRef.offsetTop is relative to the nearest positioned ancestor, which is
+    // .sftp-table-content (position: relative) — exactly the scroll container.
+    // Returns 0 on first render (rootRef not yet set); harmless (renders a few extra items).
+    const offsetTop = this.rootRef.current?.offsetTop ?? 0
+
+    const startIndex = Math.max(
+      0,
+      Math.floor((scrollTop - offsetTop) / ITEM_SIZE) - OVERSCAN
+    )
+    const endIndex = Math.min(
+      list.length - 1,
+      Math.ceil((scrollTop + containerHeight - offsetTop) / ITEM_SIZE) + OVERSCAN
+    )
+
+    const topSpacerHeight = startIndex * ITEM_SIZE
+    const bottomSpacerHeight = Math.max(0, (list.length - endIndex - 1) * ITEM_SIZE)
 
-  renderPager () {
-    const props = {
-      current: this.state.page,
-      pageSize: this.state.pageSize,
-      total: this.props.list.length,
-      showLessItems: true,
-      showSizeChanger: false,
-      simple: false,
-      onChange: this.onChange
-    }
     return (
-      <div className='pd1b pager-wrap'>
-        <Pagination
-          {...props}
-        />
+      <div ref={this.rootRef}>
+        <div style={{ height: topSpacerHeight }} />
+        {list.slice(startIndex, endIndex + 1).map((item, i) =>
+          renderItem(item, startIndex + i)
+        )}
+        <div style={{ height: bottomSpacerHeight }} />
       </div>
     )
   }
-
-  render () {
-    return this.renderList()
-  }
 }

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

@@ -970,7 +970,7 @@ export default class Sftp extends Component {
     })
   }
 
-  parsePath = (type, pth) => {
+  parsePath = async (type, pth) => {
     const reg = /^%([^%]+)%/
     if (!reg.test(pth)) {
       return pth
@@ -980,13 +980,14 @@ export default class Sftp extends Component {
       return pth
     }
     const envName = m[1]
-    const envPath = window.pre.env[envName]
+    const envPath = await window.pre.runGlobalAsync('getEnv', envName)
     if (envPath) {
       return pth.replace(reg, envPath)
     }
+    return pth
   }
 
-  onGoto = (type, e) => {
+  onGoto = async (type, e) => {
     e && e.preventDefault()
     if (type === typeMap.remote && !this.sftp) {
       return this.initData(true)
@@ -994,7 +995,7 @@ export default class Sftp extends Component {
     const n = `${type}Path`
     const nt = n + 'Temp'
     const oldPath = this.state[type + 'Path']
-    const np = this.parsePath(type, this.state[nt])
+    const np = await this.parsePath(type, this.state[nt])
     if (!isValidPath(np)) {
       return notification.warning({
         message: 'path not valid'