@electerm/electerm-react 1.70.6 → 1.72.16

package/client/components/common/input-auto-focus.jsx

@@ -4,22 +4,14 @@ import {
 } from 'antd'
 
 export default function InputAutoFocus (props) {
-  const { type, selectall = false, ...rest } = props
+  const { type, ...rest } = props
   const inputRef = useRef(null)
-  const isFirstRender = useRef(true)
 
   useEffect(() => {
     if (inputRef.current) {
-      const { value } = props
-      if (value && selectall && isFirstRender.current) {
-        inputRef.current.focus()
-        inputRef.current.setSelectionRange(0, value.length)
-        isFirstRender.current = false
-      } else {
-        inputRef.current.focus()
-      }
+      inputRef.current.focus()
     }
-  }, [props.value, props.selectall])
+  }, [props.value])
 
   let InputComponent
   switch (type) {

package/client/components/layout/layout.jsx

@@ -180,7 +180,8 @@ export default auto(function Layout (props) {
       'openedSideBar',
       'config'
     ]),
-    tabs: store.tabs
+    tabs: store.tabs,
+    layout
   }
   return [
     <Layouts {...layoutProps} key='layouts'>

package/client/components/main/main.jsx

@@ -14,6 +14,7 @@ import Resolutions from '../rdp/resolution-edit'
 import TerminalInteractive from '../terminal/terminal-interactive'
 import ConfirmModalStore from '../sftp/confirm-modal-store.jsx'
 import TransferConflictStore from '../sftp/transfer-conflict-store.jsx'
+import TerminalCmdSuggestions from '../terminal/terminal-command-dropdown'
 import TransportsActionStore from '../sftp/transports-action-store.jsx'
 import classnames from 'classnames'
 import ShortcutControl from '../shortcuts/shortcut-control.jsx'
@@ -221,6 +222,9 @@ export default auto(function Index (props) {
     showAIConfig: store.showAIConfig,
     rightPanelTab
   }
+  const cmdSuggestionsProps = {
+    suggestions: store.terminalCommandSuggestions
+  }
   return (
     <ConfigProvider
       theme={uiThemeConfig}
@@ -281,6 +285,7 @@ export default auto(function Index (props) {
           sshConfigs={store.sshConfigs}
         />
         <ConnectionHoppingWarning {...warningProps} />
+        <TerminalCmdSuggestions {...cmdSuggestionsProps} />
       </div>
     </ConfigProvider>
   )

package/client/components/profile/profile-form-elem.jsx

@@ -71,9 +71,7 @@ export default function ProfileFormElem (props) {
         hasFeedback
         name='name'
       >
-        <InputAutoFocus
-          selectall='yes'
-        />
+        <InputAutoFocus />
       </FormItem>
       <ProfileTabs {...tabsProps} />
       <FormItem>

package/client/components/quick-commands/quick-commands-form-elem.jsx

@@ -148,9 +148,7 @@ export default function QuickCommandForm (props) {
         hasFeedback
         name='name'
       >
-        <InputAutoFocus
-          selectall='yes'
-        />
+        <InputAutoFocus />
       </FormItem>
       {renderQm()}
       <FormItem

package/client/components/quick-commands/quick-commands-list-form.jsx

@@ -113,7 +113,7 @@ export default function renderQm () {
         {
           (fields, { add, remove }, { errors }) => {
             return (
-              <div>
+              <>
                 {
                   fields.map((field, i) => {
                     return renderItem(field, i, add, remove)
@@ -129,7 +129,7 @@ export default function renderQm () {
                     {e('quickCommand')}
                   </Button>
                 </FormItem>
-              </div>
+              </>
             )
           }
         }

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,
@@ -29,7 +30,8 @@ import {
   terminalRdpType,
   terminalVncType,
   terminalWebType,
-  terminalTelnetType
+  terminalTelnetType,
+  splitMap
 } from '../../common/constants'
 import { SplitViewIcon } from '../icons/split-view'
 import { refs } from '../common/ref'
@@ -50,7 +52,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
   }
@@ -71,6 +74,19 @@ export default class SessionWrapper extends Component {
     return this.domRef.current
   }
 
+  isDisabled = () => {
+    const { enableSsh, enableSftp } = this.props.tab
+    return enableSsh === false || enableSftp === false
+  }
+
+  isSshDisabled = () => {
+    return this.props.tab.enableSsh === false
+  }
+
+  isSftpDisabled = () => {
+    return this.props.tab.enableSftp === false
+  }
+
   handleSshSftpSplitView = () => {
     const nv = !this.props.tab.sshSftpSplitView
     this.editTab({
@@ -82,10 +98,9 @@ export default class SessionWrapper extends Component {
   canSplitView = () => {
     const {
       width,
-      height,
-      tab
+      height
     } = this.props
-    if (tab.enableSsh === false) {
+    if (this.isDisabled()) {
       return false
     }
     return width > this.minWithForSplit ||
@@ -222,7 +237,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
       })
@@ -253,7 +268,8 @@ export default class SessionWrapper extends Component {
     const {
       sessionOptions,
       sessionId,
-      sftpPathFollowSsh
+      sftpPathFollowSsh,
+      broadcastInput
     } = this.state
     const {
       tab
@@ -312,7 +328,6 @@ export default class SessionWrapper extends Component {
     }
 
     const cls = pane === paneMap.terminal ||
-      pane === paneMap.ssh ||
       (sshSftpSplitView && this.canSplitView())
       ? 'terms-box'
       : 'terms-box hide'
@@ -326,6 +341,7 @@ export default class SessionWrapper extends Component {
       ...this.props,
       sftpPathFollowSsh,
       themeConfig,
+      broadcastInput,
       pane,
       ...pick(
         this,
@@ -416,14 +432,15 @@ export default class SessionWrapper extends Component {
     } = this.state
     const { pane, id, sshSftpSplitView } = this.props.tab
     if (
-      this.isNotTerminalType()
+      this.isNotTerminalType() ||
+      this.isSftpDisabled()
     ) {
       return null
     }
     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'
@@ -453,6 +470,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()
   }
@@ -462,7 +485,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>
@@ -474,7 +497,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>
@@ -496,6 +519,29 @@ export default class SessionWrapper extends Component {
     )
   }
 
+  renderBroadcastIcon = () => {
+    if (
+      this.props.layout === splitMap.c1 ||
+      this.isSshDisabled()
+    ) {
+      return null
+    }
+    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
@@ -515,10 +561,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 />
@@ -536,6 +591,9 @@ export default class SessionWrapper extends Component {
     const {
       sshSftpSplitView
     } = this.props.tab
+    if (this.isDisabled()) {
+      return null
+    }
     if (sshSftpSplitView && this.canSplitView()) {
       return null
     }
@@ -591,6 +649,9 @@ export default class SessionWrapper extends Component {
   }
 
   renderSftpPathFollowControl = () => {
+    if (this.isDisabled()) {
+      return null
+    }
     const {
       sftpPathFollowSsh
     } = this.state
@@ -604,14 +665,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 (
       <>
@@ -646,6 +706,7 @@ export default class SessionWrapper extends Component {
         {this.renderPaneControl()}
         {this.renderSftpPathFollowControl()}
         {this.renderSplitToggle()}
+        {this.renderBroadcastIcon()}
         {this.renderTermControls()}
       </div>
     )
@@ -670,8 +731,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'
@@ -62,6 +62,7 @@ export default class Sessions extends Component {
       }
       const sessProps = {
         activeTabId,
+        layout: this.props.layout,
         tab,
         width,
         height,

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/setting-terminal.jsx

@@ -594,7 +594,8 @@ export default class SettingTerminal extends Component {
             'copyWhenSelect',
             'ctrlOrMetaOpenTerminalLink',
             'sftpPathFollowSsh',
-            'sshSftpSplitView'
+            'sshSftpSplitView',
+            'showCmdSuggestions'
           ].map(d => this.renderToggle(d))
         }
         <div className='pd1b'>{e('terminalBackSpaceMode')}</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/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/file-item.jsx

@@ -336,7 +336,7 @@ export default class FileSection extends React.Component {
       const { name, path } = file
       const info = await getLocalFileInfo(
         resolve(path, name)
-      )
+      ).catch(console.log)
       if (info) {
         res.push(info)
       }

package/client/components/sftp/file-read.js

@@ -43,25 +43,20 @@ export const getFolderFromFilePath = (filePath, isRemote) => {
 }
 
 export const getLocalFileInfo = async (filePath) => {
-  try {
-    const statr = await fs.statAsync(filePath)
-    const stat = await fs.lstatAsync(filePath)
-    return {
-      size: stat.size,
-      accessTime: stat.atime,
-      modifyTime: stat.mtime,
-      mode: stat.mode,
-      owner: stat.uid,
-      group: stat.gid,
-      type: 'local',
-      ...getFolderFromFilePath(filePath, false),
-      id: generate(),
-      isDirectory: statr.isDirectory,
-      isSymbolicLink: stat.isSymbolicLink
-    }
-  } catch (e) {
-    log.debug(e)
-    return null
+  const statr = await fs.statAsync(filePath)
+  const stat = await fs.lstatAsync(filePath)
+  return {
+    size: stat.size,
+    accessTime: stat.atime,
+    modifyTime: stat.mtime,
+    mode: stat.mode,
+    owner: stat.uid,
+    group: stat.gid,
+    type: 'local',
+    ...getFolderFromFilePath(filePath, false),
+    id: generate(),
+    isDirectory: statr.isDirectory,
+    isSymbolicLink: stat.isSymbolicLink
   }
 }