@electerm/electerm-react 1.70.2 → 1.72.6

package/client/components/session/session.jsx

@@ -2,7 +2,7 @@
  * terminal/sftp wrapper
  */
 import { createRef } from 'react'
-import { Component } from '../common/component'
+import { Component } from 'manate/react/class-components'
 import Term from '../terminal/terminal.jsx'
 import Sftp from '../sftp/sftp-entry'
 import RdpSession from '../rdp/rdp-session'
@@ -12,7 +12,8 @@ import {
   SearchOutlined,
   FullscreenOutlined,
   PaperClipOutlined,
-  CloseOutlined
+  CloseOutlined,
+  ApartmentOutlined
 } from '@ant-design/icons'
 import {
   Tooltip,
@@ -50,7 +51,8 @@ export default class SessionWrapper extends Component {
       splitSize: [50, 50],
       sessionOptions: null,
       sessionId: generate(),
-      delKeyPressed: false
+      delKeyPressed: false,
+      broadcastInput: false
     }
     props.tab.sshSftpSplitView = !!props.config.sshSftpSplitView
   }
@@ -76,6 +78,7 @@ export default class SessionWrapper extends Component {
     this.editTab({
       sshSftpSplitView: nv
     })
+    window.store.triggerResize()
   }
 
   canSplitView = () => {
@@ -221,7 +224,7 @@ export default class SessionWrapper extends Component {
     const update = {
       pane
     }
-    if (pane === paneMap.fileManager || pane === paneMap.sftp) {
+    if (pane === paneMap.fileManager) {
       this.setState({
         enableSftp: true
       })
@@ -252,7 +255,8 @@ export default class SessionWrapper extends Component {
     const {
       sessionOptions,
       sessionId,
-      sftpPathFollowSsh
+      sftpPathFollowSsh,
+      broadcastInput
     } = this.state
     const {
       tab
@@ -311,7 +315,6 @@ export default class SessionWrapper extends Component {
     }
 
     const cls = pane === paneMap.terminal ||
-      pane === paneMap.ssh ||
       (sshSftpSplitView && this.canSplitView())
       ? 'terms-box'
       : 'terms-box hide'
@@ -325,6 +328,7 @@ export default class SessionWrapper extends Component {
       ...this.props,
       sftpPathFollowSsh,
       themeConfig,
+      broadcastInput,
       pane,
       ...pick(
         this,
@@ -422,7 +426,7 @@ export default class SessionWrapper extends Component {
     const height = this.props.computeHeight(
       this.props.height
     )
-    const cls = pane === paneMap.fileManager || paneMap.sftp === pane ||
+    const cls = pane === paneMap.fileManager ||
     (sshSftpSplitView && this.canSplitView())
       ? ''
       : 'hide'
@@ -452,6 +456,12 @@ export default class SessionWrapper extends Component {
     window.store.toggleTermFullscreen(true)
   }
 
+  toggleBroadcastInput = () => {
+    this.setState({
+      broadcastInput: !this.state.broadcastInput
+    })
+  }
+
   handleOpenSearch = () => {
     refs.get('term-' + this.props.tab.id)?.toggleSearch()
   }
@@ -461,7 +471,7 @@ export default class SessionWrapper extends Component {
     return (
       <Tooltip title={title} placement='bottomLeft'>
         <SearchOutlined
-          className='mg1r icon-info font16 iblock pointer spliter'
+          className='mg1r icon-info iblock pointer spliter'
           onClick={this.handleOpenSearch}
         />
       </Tooltip>
@@ -473,7 +483,7 @@ export default class SessionWrapper extends Component {
     return (
       <Tooltip title={title} placement='bottomLeft'>
         <FullscreenOutlined
-          className='mg1r icon-info font16 iblock pointer spliter term-fullscreen-control1'
+          className='mg1r icon-info iblock pointer spliter term-fullscreen-control1'
           onClick={this.handleFullscreen}
         />
       </Tooltip>
@@ -495,6 +505,23 @@ export default class SessionWrapper extends Component {
     )
   }
 
+  renderBroadcastIcon = () => {
+    const { broadcastInput } = this.state
+    const title = e('broadcastInput')
+    const iconProps = {
+      className: classnames('sess-icon pointer broadcast-icon', {
+        active: broadcastInput
+      }),
+      onClick: this.toggleBroadcastInput
+    }
+
+    return (
+      <Tooltip title={title}>
+        <ApartmentOutlined {...iconProps} />
+      </Tooltip>
+    )
+  }
+
   renderTermControls = () => {
     const { props } = this
     const { pane } = props.tab
@@ -514,10 +541,19 @@ export default class SessionWrapper extends Component {
       return null
     }
     const title = e('sshSftpSplitView')
+    const {
+      sshSftpSplitView
+    } = this.props.tab
+    const cls = classnames(
+      'pointer sess-icon split-view-toggle',
+      {
+        active: sshSftpSplitView
+      }
+    )
     return (
       <Tooltip title={title} placement='bottomLeft'>
         <span
-          className='pointer mg1r split-view-toggle'
+          className={cls}
           onClick={this.handleSshSftpSplitView}
         >
           <SplitViewIcon />
@@ -603,14 +639,13 @@ export default class SessionWrapper extends Component {
     const checkProps = {
       onClick: this.toggleCheckSftpPathFollowSsh,
       className: classnames(
-        'sftp-follow-ssh-icon',
+        'sftp-follow-ssh-icon sess-icon pointer',
         {
           active: sftpPathFollowSsh
         }
       )
     }
     const isS = pane === paneMap.terminal ||
-      pane === paneMap.ssh ||
       sshSftpSplitView
     return (
       <>
@@ -645,6 +680,7 @@ export default class SessionWrapper extends Component {
         {this.renderPaneControl()}
         {this.renderSftpPathFollowControl()}
         {this.renderSplitToggle()}
+        {this.renderBroadcastIcon()}
         {this.renderTermControls()}
       </div>
     )
@@ -669,8 +705,8 @@ export default class SessionWrapper extends Component {
     }
     const notSplitVew = !this.canSplitView() || !this.props.tab.sshSftpSplitView
     const { pane } = this.props.tab
-    const show1 = notSplitVew && (pane === paneMap.terminal || pane === paneMap.ssh)
-    const show2 = notSplitVew && (pane === paneMap.fileManager || pane === paneMap.sftp)
+    const show1 = notSplitVew && pane === paneMap.terminal
+    const show2 = notSplitVew && pane === paneMap.fileManager
     const direction = this.getSplitDirection()
     const layout = direction === 'leftRight' ? 'horizontal' : 'vertical'
     const [size1, size2] = this.state.splitSize

package/client/components/session/session.styl

@@ -16,7 +16,6 @@
   position relative
   display inline-block
 
-.sftp-follow-ssh-icon
 .type-tab
   display inline-block
   vertical-align middle
@@ -44,7 +43,6 @@
     display none
 .spliter
   color text
-  font-size 16px
   &:hover
     color text-light
 
@@ -73,4 +71,13 @@
   width auto !important
   height auto !important
 .not-split-view .ant-splitter-bar-dragger
-  display none
+  display none
+
+.sess-icon
+  margin-right 10px
+  &.active
+    color warn
+
+.split-view-toggle
+  &.active
+    color success

package/client/components/session/sessions.jsx

@@ -1,4 +1,4 @@
-import { Component } from '../common/component'
+import { Component } from 'manate/react/class-components'
 import Session from './session.jsx'
 
 import { pick } from 'lodash-es'

package/client/components/setting-panel/keywords-form.jsx

@@ -107,44 +107,42 @@ export default function KeywordForm (props) {
   }, [props.keywordFormReset])
 
   return (
-    <div>
-      <Form
-        form={formChild}
-        onValuesChange={handleTrigger}
-        initialValues={formData}
-        onFinish={handleFinish}
-      >
-        <FormItem {...formItemLayout}>
-          <FormList
-            name='keywords'
-          >
-            {
-              (fields, { add, remove }, { errors }) => {
-                return (
-                  <div>
-                    {
-                      fields.map((field, i) => {
-                        return renderItem(field, i, add, remove)
-                      })
-                    }
-                    <FormItem>
-                      <Button
-                        type='dashed'
-                        onClick={() => add({
-                          color: 'red'
-                        })}
-                        icon={<PlusOutlined />}
-                      >
-                        {e('keyword')}
-                      </Button>
-                    </FormItem>
-                  </div>
-                )
-              }
+    <Form
+      form={formChild}
+      onValuesChange={handleTrigger}
+      initialValues={formData}
+      onFinish={handleFinish}
+    >
+      <FormItem {...formItemLayout}>
+        <FormList
+          name='keywords'
+        >
+          {
+            (fields, { add, remove }, { errors }) => {
+              return (
+                <>
+                  {
+                    fields.map((field, i) => {
+                      return renderItem(field, i, add, remove)
+                    })
+                  }
+                  <FormItem>
+                    <Button
+                      type='dashed'
+                      onClick={() => add({
+                        color: 'red'
+                      })}
+                      icon={<PlusOutlined />}
+                    >
+                      {e('keyword')}
+                    </Button>
+                  </FormItem>
+                </>
+              )
             }
-          </FormList>
-        </FormItem>
-      </Form>
-    </div>
+          }
+        </FormList>
+      </FormItem>
+    </Form>
   )
 }

package/client/components/setting-panel/setting-modal.jsx

@@ -104,7 +104,7 @@ export default auto(function SettingModalWrap (props) {
       type: 'card'
     }
     return (
-      <div>
+      <>
         <Tabs
           {...tabsProps}
         />
@@ -141,7 +141,7 @@ export default auto(function SettingModalWrap (props) {
           store={store}
           settingTab={settingTab}
         />
-      </div>
+      </>
     )
   }
 

package/client/components/setting-panel/tab-settings.jsx

@@ -1,7 +1,9 @@
 import { auto } from 'manate/react'
+import { message } from 'antd'
 import SettingCommon from './setting-common'
 import SettingTerminal from './setting-terminal'
 import SettingCol from './col'
+import SettingAi from '../ai/ai-config'
 import SyncSetting from '../setting-sync/setting-sync'
 import Shortcuts from '../shortcuts/shortcuts'
 import List from './list'
@@ -9,8 +11,10 @@ import {
   settingMap,
   settingSyncId,
   settingTerminalId,
+  settingAiId,
   settingShortcutsId
 } from '../../common/constants'
+import { aiConfigsArr } from '../ai/ai-config-props'
 import { pick } from 'lodash-es'
 
 export default auto(function TabSettings (props) {
@@ -26,6 +30,26 @@ export default auto(function TabSettings (props) {
     store
   } = props
   let elem = null
+
+  function getInitialValues () {
+    const res = pick(props.store.config, aiConfigsArr)
+    if (!res.languageAI) {
+      res.languageAI = window.store.getLangName()
+    }
+    return res
+  }
+
+  function handleConfigSubmit (values) {
+    window.store.updateConfig(values)
+    message.success('Saved')
+  }
+
+  const aiConfProps = {
+    initialValues: getInitialValues(),
+    onSubmit: handleConfigSubmit,
+    showAIConfig: true
+  }
+
   const sid = settingItem.id
   if (sid === settingSyncId) {
     const syncProps = pick(store, [
@@ -37,6 +61,8 @@ export default auto(function TabSettings (props) {
       'syncServerStatus'
     ])
     elem = <SyncSetting {...syncProps} />
+  } else if (sid === settingAiId) {
+    elem = <SettingAi {...aiConfProps} />
   } else if (sid === settingTerminalId) {
     elem = <SettingTerminal {...listProps} config={store.config} />
   } else if (sid === settingShortcutsId) {

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

@@ -19,6 +19,10 @@ import ServerDataStatus from './server-data-status'
 const FormItem = Form.Item
 const e = window.translate
 
+function trim (str) {
+  return str ? str.trim() : ''
+}
+
 export default function SyncForm (props) {
   const [form] = Form.useForm()
   const delta = useDelta(props.formData)
@@ -149,6 +153,7 @@ export default function SyncForm (props) {
       <FormItem
         label={createLabel('API Url')}
         name='apiUrl'
+        normalize={trim}
         rules={[{
           max: 200, message: '200 chars max'
         }]}
@@ -178,6 +183,7 @@ export default function SyncForm (props) {
       <FormItem
         label={gistLabel}
         name='gistId'
+        normalize={trim}
         rules={[{
           max: 100, message: '100 chars max'
         }]}
@@ -198,6 +204,7 @@ export default function SyncForm (props) {
         label={syncPasswordLabel}
         hasFeedback
         name='syncPassword'
+        normalize={trim}
         rules={[{
           max: 100, message: '100 chars max'
         }]}
@@ -226,6 +233,7 @@ export default function SyncForm (props) {
         label={tokenLabel}
         hasFeedback
         name='token'
+        normalize={trim}
         rules={[{
           max: 1100, message: '1100 chars max'
         }, {

package/client/components/sftp/address-bar.jsx

@@ -15,6 +15,7 @@ import {
 } from '../../common/constants'
 import classnames from 'classnames'
 import AddrBookmark from './address-bookmark'
+import KeywordFilter from './keyword-filter'
 
 const e = window.translate
 
@@ -26,8 +27,13 @@ function renderAddonBefore (props, realPath) {
   const isShow = props[`${type}ShowHiddenFile`]
   const title = `${isShow ? e('hide') : e('show')} ${e('hfd')}`
   const Icon = isShow ? EyeFilled : EyeInvisibleFilled
+  const keywordProps = {
+    keyword: props[`${type}Keyword`],
+    type,
+    updateKeyword: props.updateKeyword
+  }
   return (
-    <div>
+    <>
       <Tooltip
         title={title}
         placement='topLeft'
@@ -49,6 +55,7 @@ function renderAddonBefore (props, realPath) {
           className='mg1r'
         />
       </Tooltip>
+      <KeywordFilter {...keywordProps} />
       <AddrBookmark
         store={window.store}
         realPath={realPath}
@@ -56,7 +63,7 @@ function renderAddonBefore (props, realPath) {
         type={type}
         onClickHistory={props.onClickHistory}
       />
-    </div>
+    </>
   )
 }
 

package/client/components/sftp/address-bookmark.jsx

@@ -62,12 +62,10 @@ export default auto(function AddrBookmark (props) {
     </div>
   )
   const title = (
-    <div>
-      <PlusSquareOutlined
-        className='add-addr-bookmark'
-        onClick={handleAddAddr}
-      />
-    </div>
+    <PlusSquareOutlined
+      className='add-addr-bookmark'
+      onClick={handleAddAddr}
+    />
   )
   return (
     <Popover

package/client/components/sftp/keyword-filter.jsx

@@ -0,0 +1,63 @@
+import React, { useState, useRef, useEffect } from 'react'
+import { Tooltip, Input } from 'antd'
+import {
+  FilterOutlined,
+  CheckOutlined
+} from '@ant-design/icons'
+import classnames from 'classnames'
+
+const e = window.translate
+
+export default function KeywordFilter ({ keyword, type, updateKeyword }) {
+  const [text, setText] = useState(keyword)
+  const inputRef = useRef(null)
+
+  useEffect(() => {
+    setText(keyword)
+  }, [keyword])
+
+  const handleInputChange = (e) => {
+    setText(e.target.value)
+  }
+
+  const applyFilter = () => {
+    updateKeyword(text, type)
+  }
+
+  const handleKeyPress = (e) => {
+    if (e.key === 'Enter') {
+      applyFilter()
+    }
+  }
+
+  const iconClass = classnames('keyword-filter-icon mg1r', {
+    active: !!keyword
+  })
+
+  const inputProps = {
+    value: text,
+    onChange: handleInputChange,
+    addonBefore: <FilterOutlined />,
+    onKeyPress: handleKeyPress,
+    placeholder: e('keyword'),
+    className: 'keyword-filter-input',
+    addonAfter: <CheckOutlined onClick={applyFilter} />
+  }
+
+  const tooltipContent = (
+    <Input
+      {...inputProps}
+      ref={inputRef}
+    />
+  )
+
+  if (!updateKeyword) {
+    return null
+  }
+
+  return (
+    <Tooltip title={tooltipContent} trigger='click'>
+      <FilterOutlined className={iconClass} />
+    </Tooltip>
+  )
+}

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

@@ -298,15 +298,13 @@ export default class FileListTable extends Component {
         <div
           {...props}
         >
-          <div>
-            {this.props.renderEmptyFile(type)}
-            {this.renderParent(type)}
-            <PagedList
-              list={fileList}
-              renderItem={this.renderItem}
-              hasPager={hasPager}
-            />
-          </div>
+          {this.props.renderEmptyFile(type)}
+          {this.renderParent(type)}
+          <PagedList
+            list={fileList}
+            renderItem={this.renderItem}
+            hasPager={hasPager}
+          />
         </div>
       </div>
     )

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

@@ -58,7 +58,7 @@ export default class Sftp extends Component {
     if (
       this.props.config.autoRefreshWhenSwitchToSftp &&
       prevProps.pane !== this.props.pane &&
-      (this.props.pane === paneMap.fileManager || this.props.pane.sftp) &&
+      this.props.pane === paneMap.fileManager &&
       this.state.inited
     ) {
       this.onGoto(typeMap.local)
@@ -120,7 +120,8 @@ export default class Sftp extends Component {
         [`${k}PathTemp`]: '',
         [`${k}PathHistory`]: [],
         [`${k}GidTree`]: {},
-        [`${k}UidTree`]: {}
+        [`${k}UidTree`]: {},
+        [`${k}Keyword`]: ''
       })
       return prev
     }, {})
@@ -171,7 +172,13 @@ export default class Sftp extends Component {
   isActive () {
     return this.props.currentBatchTabId === this.props.tab.id &&
       (this.props.pane === paneMap.fileManager ||
-      this.props.pane === paneMap.sftp || this.props.sshSftpSplitView)
+      this.props.sshSftpSplitView)
+  }
+
+  updateKeyword = (keyword, type) => {
+    this.setState({
+      [`${type}Keyword`]: keyword
+    })
   }
 
   getCwdLocal = () => {
@@ -417,6 +424,20 @@ export default class Sftp extends Component {
   }
 
   modifier = (...args) => {
+    // Check if first argument is an object and contains path changes
+    if (args[0] && typeof args[0] === 'object') {
+      const updates = args[0]
+
+      // Clear respective keyword if path changes
+      if (updates.localPath !== undefined) {
+        updates.localKeyword = ''
+      }
+      if (updates.remotePath !== undefined) {
+        updates.remoteKeyword = ''
+      }
+    }
+
+    // Call setState with the modified arguments
     runIdle(() => this.setState(...args))
   }
 
@@ -433,11 +454,24 @@ export default class Sftp extends Component {
 
   getFileList = type => {
     const showHide = this.state[`${type}ShowHiddenFile`]
+    const keyword = this.state[`${type}Keyword`]
     let list = this.state[type]
     list = isArray(list) ? list : []
-    if (!showHide) {
-      list = list.filter(f => !/^\./.test(f.name))
+
+    // Combine filtering for showHide and keyword in one loop
+    if (!showHide || keyword) {
+      const lowerKeyword = keyword.toLowerCase()
+      list = list.filter(f => {
+        if (!showHide && f.name.startsWith('.')) {
+          return false
+        }
+        if (keyword && !f.name.toLowerCase().includes(lowerKeyword)) {
+          return false
+        }
+        return true
+      })
     }
+
     return this.sort(
       list,
       type,
@@ -795,7 +829,8 @@ export default class Sftp extends Component {
       })
     }
     this.setState({
-      [n]: np
+      [n]: np,
+      [`${type}Keyword`]: ''
     }, () => this[`${type}List`](undefined, undefined, oldPath))
   }
 
@@ -984,7 +1019,8 @@ export default class Sftp extends Component {
           'onInputBlur',
           'toggleShowHiddenFile',
           'goParent',
-          'onClickHistory'
+          'onClickHistory',
+          'updateKeyword'
         ]
       ),
       ...pick(
@@ -996,7 +1032,8 @@ export default class Sftp extends Component {
           `${type}Path`,
           `${type}PathHistory`,
           `${type}InputFocus`,
-          'loadingSftp'
+          'loadingSftp',
+          `${type}Keyword`
         ]
       )
     }

package/client/components/sftp/sftp.styl

@@ -175,4 +175,9 @@
   position relative
 .file-header-context-menu
   position fixed
-  z-index 999
+  z-index 999
+
+.keyword-filter-icon
+  &:hover
+  &.active
+    color success