@electerm/electerm-react 1.70.6 → 1.72.16

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,
@@ -702,7 +736,7 @@ export default class Sftp extends Component {
       const local = []
       for (const name of locals) {
         const p = resolve(localPath, name)
-        const fileObj = await getLocalFileInfo(p)
+        const fileObj = await getLocalFileInfo(p).catch(console.log)
         if (fileObj) {
           local.push(fileObj)
         }
@@ -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

package/client/components/sftp/transfer-conflict-store.jsx

@@ -39,7 +39,7 @@ export default class TransferConflictStore extends PureComponent {
   }
 
   localCheckExist = (path) => {
-    return getLocalFileInfo(path)
+    return getLocalFileInfo(path).catch(console.log)
   }
 
   remoteCheckExist = (path, sessionId) => {

package/client/components/shortcuts/shortcut-control.jsx

@@ -35,6 +35,7 @@ class ShortcutControl extends React.PureComponent {
     this.handleSftpKeyboardEvent(e)
     // Then handle extended shortcuts
     this.handleKeyboardEvent(e)
+    this.handleAiChat(e)
   }
 
   getActiveSftp = () => {
@@ -45,6 +46,25 @@ class ShortcutControl extends React.PureComponent {
     return ref
   }
 
+  handleAiChat = (e) => {
+    const { rightPanelTab } = window.store
+    if (rightPanelTab !== 'ai') {
+      return
+    }
+    const elem = document.activeElement
+    if (
+      e.ctrlKey &&
+      e.key === 'Enter' &&
+      !e.shiftKey &&
+      !e.altKey &&
+      !e.metaKey &&
+      elem?.tagName === 'TEXTAREA' &&
+      elem?.classList.contains('ai-chat-textarea')
+    ) {
+      refsStatic.get('AIChat')?.handleSubmit()
+    }
+  }
+
   // SFTP shortcuts handler
   handleSftpKeyboardEvent = (e) => {
     const activeSftp = this.getActiveSftp()

package/client/components/shortcuts/shortcut-editor.jsx

@@ -175,7 +175,7 @@ export default class ShortcutEdit extends PureComponent {
       return null
     }
     return (
-      <div>
+      <>
         <CheckOutlined
           onClick={this.handleConfirm}
           className='pointer'
@@ -184,7 +184,7 @@ export default class ShortcutEdit extends PureComponent {
           onClick={this.handleCancel}
           className='pointer mg1l'
         />
-      </div>
+      </>
     )
   }
 

package/client/components/shortcuts/shortcuts.jsx

@@ -140,7 +140,7 @@ export default class Shortcuts extends PureComponent {
       rowKey: 'id'
     }
     return (
-      <div>
+      <>
         <Table
           {...props}
         />
@@ -151,7 +151,7 @@ export default class Shortcuts extends PureComponent {
             {e('resetAllToDefault')}
           </Button>
         </div>
-      </div>
+      </>
     )
   }
 }

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

@@ -119,7 +119,7 @@ export default auto(function InfoModal (props) {
       key: infoTabs.info,
       label: e('about'),
       children: (
-        <div>
+        <>
           <LogoElem />
           <p className='mg2b'>{e('desc')}</p>
           <RunningTime />
@@ -187,7 +187,7 @@ export default auto(function InfoModal (props) {
             </Link>
           </p>
           {renderCheckUpdate()}
-        </div>
+        </>
       )
     },
     {

package/client/components/sidebar/transfer-list-control.jsx

@@ -137,26 +137,24 @@ export default class TransferModalUI extends Component {
       ...groups
     ]
     return (
-      <div>
-        <Select
-          value={this.state.filter}
-          onChange={this.handleFilter}
-          popupMatchSelectWidth={false}
-        >
-          {
-            all.map(item => {
-              return (
-                <Option
-                  key={item.id}
-                  value={item.id}
-                >
-                  {item.title}
-                </Option>
-              )
-            })
-          }
-        </Select>
-      </div>
+      <Select
+        value={this.state.filter}
+        onChange={this.handleFilter}
+        popupMatchSelectWidth={false}
+      >
+        {
+          all.map(item => {
+            return (
+              <Option
+                key={item.id}
+                value={item.id}
+              >
+                {item.title}
+              </Option>
+            )
+          })
+        }
+      </Select>
     )
   }
 

package/client/components/ssh-config/ssh-config-item.jsx

@@ -16,10 +16,8 @@ export default function SshConfigItem (props) {
 
   return (
     <Tooltip title={generateTooltipContent(item)}>
-      <div>
-        <div className='elli pd1y pd2x'>
-          ssh {item.title}
-        </div>
+      <div className='elli pd1y pd2x'>
+        ssh {item.title}
       </div>
     </Tooltip>
   )

package/client/components/ssh-config/ssh-config-load-notify.jsx

@@ -25,7 +25,7 @@ function showNotification () {
     placement: 'bottom',
     key: 'sshConfigNotify',
     description: (
-      <div>
+      <>
         <p>{e('sshConfigNotice')}</p>
         <Button type='primary' onClick={handleLoad} className='mg1r mg1b'>
           {e('import')}
@@ -33,7 +33,7 @@ function showNotification () {
         <Button onClick={handleIgnore} className='mg1r mg1b'>
           {e('ignore')}
         </Button>
-      </div>
+      </>
     )
   })
 }

package/client/components/sys-menu/zoom.jsx

@@ -20,7 +20,7 @@ export default function ZoomMenu (props) {
       max={500}
       addonAfter='%'
       addonBefore={
-        <div>
+        <>
           <PlusCircleOutlined
             onClick={() => store.zoom(0.25, true)}
             className='mg1r pointer font16'
@@ -29,7 +29,7 @@ export default function ZoomMenu (props) {
             onClick={() => store.zoom(-0.25, true)}
             className='pointer font16'
           />
-        </div>
+        </>
       }
     />
   )

package/client/components/tabs/index.jsx

@@ -2,7 +2,7 @@
  * session tabs component
  */
 
-import { Component } from '../common/component'
+import { Component } from 'manate/react/class-components'
 import React from 'react'
 import runIdle from '../../common/run-idle'
 import { throttle } from 'lodash-es'

package/client/components/tabs/tab.jsx

@@ -3,7 +3,7 @@
  */
 
 import { createRef } from 'react'
-import { Component } from '../common/component'
+import { Component } from 'manate/react/class-components'
 import { refs } from '../common/ref'
 import {
   CloseOutlined,
@@ -373,10 +373,10 @@ class Tab extends Component {
       return <div key={tunnel}>{tunnel}</div>
     })
     return (
-      <div>
+      <>
         <div>{title}</div>
         {list}
-      </div>
+      </>
     )
   }
 

package/client/components/terminal/cmd-item.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { CloseCircleOutlined } from '@ant-design/icons'
+
+const SuggestionItem = ({ item, onSelect, onDelete }) => {
+  const handleClick = () => {
+    onSelect(item)
+  }
+
+  const handleDelete = (e) => {
+    e.stopPropagation()
+    onDelete(item)
+  }
+
+  return (
+    <div className='suggestion-item'>
+      <span className='suggestion-command' onClick={handleClick}>
+        {item.command}
+      </span>
+      <span className='suggestion-type'>
+        {item.type}
+      </span>
+      {item.type === 'H' && (
+        <CloseCircleOutlined
+          className='suggestion-delete'
+          onClick={handleDelete}
+        />
+      )}
+    </div>
+  )
+}
+
+export default SuggestionItem

package/client/components/terminal/command-tracker-addon.js

@@ -45,7 +45,9 @@ export class CommandTrackerAddon {
   // This is now our internal handler
   _handleKey = (e) => {
     const { key } = e
-    if (key === 'Enter') {
+    if (e.ctrlKey && key.toLowerCase() === 'c') {
+      this.clearCommand()
+    } else if (key === 'Enter') {
       // Command executed, reset
       this.currentCommand = this.activeCommand
       this.activeCommand = ''

package/client/components/terminal/term-search.jsx

@@ -127,14 +127,14 @@ export default class TermSearch extends PureComponent {
 
   renderAfter = () => {
     return (
-      <div>
+      <>
         {
           this.renderMatchData()
         }
         {
           this.searchActions.map(this.renderSearchAction)
         }
-      </div>
+      </>
     )
   }
 
@@ -174,11 +174,11 @@ export default class TermSearch extends PureComponent {
 
   renderSuffix = () => {
     return (
-      <div>
+      <>
         {
           this.searchControls.map(this.renderSearchControl)
         }
-      </div>
+      </>
     )
   }
 
@@ -191,8 +191,7 @@ export default class TermSearch extends PureComponent {
     if (
       !termSearchOpen ||
       !currentTab ||
-      currentTab.pane === paneMap.fileManager ||
-      currentTab.pane === paneMap.sftp
+      currentTab.pane === paneMap.fileManager
     ) {
       return null
     }