@electerm/electerm-react 3.2.0 → 3.3.8

package/client/components/file-transfer/conflict-resolve.jsx

@@ -21,6 +21,9 @@ function formatTimeAuto (strOrDigit) {
   if (isString(strOrDigit)) {
     return formatTime(strOrDigit)
   }
+  if (strOrDigit > 9999999999) {
+    return formatTime(strOrDigit)
+  }
   return formatTime(strOrDigit * 1000)
 }
 

package/client/components/footer/batch-input.jsx

@@ -136,12 +136,10 @@ export default class BatchInput extends Component {
     } = this.props
     const opts = {
       options: this.buildOptions(),
-      placeholder: e('batchInput'),
       value: cmd,
       onChange: this.handleChange,
       defaultOpen: false,
       open,
-      allowClear: true,
       className: 'batch-input-wrap'
     }
     const cls = classNames(
@@ -155,6 +153,15 @@ export default class BatchInput extends Component {
       placeholder: e('batchInput'),
       className: 'batch-input-holder'
     }
+    const textAreaProps = {
+      onPressEnter: this.handleEnter,
+      onClick: this.handleClick,
+      onBlur: this.handleBlur,
+      size: 'small',
+      autoSize: { minRows: 1 },
+      placeholder: e('batchInput'),
+      allowClear: true
+    }
     const tabSelectProps = {
       activeTabId: this.props.activeTabId,
       tabs: this.getTabs(),
@@ -179,11 +186,7 @@ export default class BatchInput extends Component {
             {...opts}
           >
             <Input.TextArea
-              onPressEnter={this.handleEnter}
-              onClick={this.handleClick}
-              onBlur={this.handleBlur}
-              size='small'
-              autoSize={{ minRows: 1 }}
+              {...textAreaProps}
             />
           </AutoComplete>
           <TabSelect {...tabSelectProps} />

package/client/components/main/error-wrapper.jsx

@@ -77,12 +77,9 @@ export default class ErrorBoundary extends React.PureComponent {
   }
 
   renderTroubleShoot = () => {
-    const {
-      bugs: {
-        url: bugReportLink
-      }
-    } = packInfo
-    const bugUrl = `${bugReportLink}/new/choose`
+    if (window.et.isWebApp) {
+      return this.renderContacts()
+    }
     return (
       <div className='pd1y wordbreak'>
         <h2>{e('troubleShoot')}</h2>
@@ -99,6 +96,20 @@ export default class ErrorBoundary extends React.PureComponent {
             )
           })
         }
+        {this.renderContacts()}
+      </div>
+    )
+  }
+
+  renderContacts () {
+    const {
+      bugs: {
+        url: bugReportLink
+      }
+    } = packInfo
+    const bugUrl = `${bugReportLink}/new/choose`
+    return (
+      <>
         <div className='pd1b'>
           <Link to={bugUrl}>{e('bugReport')}</Link>
         </div>
@@ -112,7 +123,7 @@ export default class ErrorBoundary extends React.PureComponent {
             className='mwm-100'
           />
         </div>
-      </div>
+      </>
     )
   }
 

package/client/components/main/main.jsx

@@ -6,7 +6,6 @@ import UpdateCheck from './upgrade'
 import SettingModal from '../setting-panel/setting-modal'
 import TextEditor from '../text-editor/text-editor'
 import Sidebar from '../sidebar'
-import BatchOp from '../batch-op/batch-op'
 import CssOverwrite from '../bg/css-overwrite'
 import UiTheme from './ui-theme'
 import CustomCss from '../bg/custom-css.jsx'
@@ -34,6 +33,9 @@ import MoveItemModal from '../tree-list/move-item-modal'
 import InputContextMenu from '../common/input-context-menu'
 import WorkspaceSaveModal from '../tabs/workspace-save-modal'
 import BookmarkFromHistoryModal from '../bookmark-form/bookmark-from-history-modal'
+import AutoSync from '../setting-sync/auto-sync'
+import AutoCheckUpdate from '../common/auto-check-update'
+import BatchOpRunner from '../batch-op/batch-op-runner'
 import { pick } from 'lodash-es'
 import deepCopy from 'json-deep-copy'
 import './wrapper.styl'
@@ -184,11 +186,6 @@ export default auto(function Index (props) {
     fileTransferChanged: JSON.stringify(copiedTransfer),
     fileTransfers: copiedTransfer
   }
-  const batchOpProps = {
-    transferHistory,
-    showModal: store.showModal,
-    innerWidth: store.innerWidth
-  }
   const resProps = {
     resolutions: deepCopy(store.resolutions),
     openResolutionEdit
@@ -263,7 +260,6 @@ export default auto(function Index (props) {
         />
         <FileInfoModal />
         <SettingModal store={store} />
-        <BatchOp {...batchOpProps} />
         <MoveItemModal store={store} />
         <div
           id='outside-context'
@@ -295,9 +291,12 @@ export default auto(function Index (props) {
         <ConnectionHoppingWarning {...warningProps} />
         <TerminalCmdSuggestions {...cmdSuggestionsProps} />
         <TransferQueue />
+        <AutoSync config={config} />
+        <AutoCheckUpdate config={config} />
         <WorkspaceSaveModal store={store} />
         <BookmarkFromHistoryModal />
         <NotificationContainer />
+        <BatchOpRunner />
       </div>
     </ConfigProvider>
   )

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

@@ -0,0 +1,53 @@
+import { useEffect, useRef } from 'react'
+
+export default function AutoSync ({ config }) {
+  const lastSyncTimeRef = useRef(0)
+  const intervalIdRef = useRef(null)
+
+  useEffect(() => {
+    if (
+      !config.syncSetting?.autoSync || config.syncSetting?.autoSyncInterval <= 0
+    ) {
+      clearInterval(intervalIdRef.current)
+      return
+    }
+    const checkAndSync = async () => {
+      const syncSetting = config.syncSetting || {}
+      const { autoSync, autoSyncInterval = 0, autoSyncDirection = 'upload' } = syncSetting
+
+      if (!autoSync) {
+        return
+      }
+
+      if (autoSyncInterval <= 0) {
+        return
+      }
+
+      const now = Date.now()
+      const intervalMs = autoSyncInterval * 60 * 1000
+      if (now - lastSyncTimeRef.current >= intervalMs) {
+        const { store } = window
+        if (autoSyncDirection === 'download') {
+          await store.downloadSettingAll()
+        } else {
+          await store.uploadSettingAll()
+        }
+        lastSyncTimeRef.current = now
+      }
+    }
+
+    intervalIdRef.current = setInterval(checkAndSync, 10000)
+
+    return () => {
+      if (intervalIdRef.current) {
+        clearInterval(intervalIdRef.current)
+      }
+    }
+  }, [
+    config.syncSetting?.autoSync,
+    config.syncSetting?.autoSyncInterval,
+    config.syncSetting?.autoSyncDirection
+  ])
+
+  return null
+}

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

@@ -5,22 +5,65 @@
 import {
   Button,
   Switch,
-  Tooltip
+  Select,
+  Space
 } from 'antd'
 import {
   ImportOutlined,
-  ExportOutlined,
-  InfoCircleOutlined
+  ExportOutlined
 } from '@ant-design/icons'
 import Upload from '../common/upload'
+import HelpIcon from '../common/help-icon'
 
 const e = window.translate
 
+const intervalOptions = [
+  { value: 0, label: e('autoSyncOnChange') },
+  { value: 5, label: '5 ' + e('minutes') },
+  { value: 10, label: '10 ' + e('minutes') },
+  { value: 15, label: '15 ' + e('minutes') },
+  { value: 30, label: '30 ' + e('minutes') },
+  { value: 60, label: '1 ' + e('hours') },
+  { value: 120, label: '2 ' + e('hours') },
+  { value: 360, label: '6 ' + e('hours') },
+  { value: 720, label: '12 ' + e('hours') },
+  { value: 1440, label: '24 ' + e('hours') }
+]
+
+const directionOptions = [
+  { value: 'upload', label: e('uploadSettings') },
+  { value: 'download', label: e('downloadSettings') }
+]
+
 export default function DataTransport (props) {
   const txt = e('autoSync')
   const {
     store
   } = window
+
+  const syncSetting = props.config.syncSetting || {}
+  const autoSyncEnabled = syncSetting.autoSync || false
+  const autoSyncInterval = syncSetting.autoSyncInterval || 0
+  const autoSyncDirection = syncSetting.autoSyncDirection || 'upload'
+
+  function handleAutoSync (checked) {
+    store.updateSyncSetting({
+      autoSync: checked
+    })
+  }
+
+  function handleIntervalChange (value) {
+    store.updateSyncSetting({
+      autoSyncInterval: value
+    })
+  }
+
+  function handleDirectionChange (value) {
+    store.updateSyncSetting({
+      autoSyncDirection: value
+    })
+  }
+
   return (
     <div className='pd2 fix'>
       <div className='fleft'>
@@ -45,15 +88,33 @@ export default function DataTransport (props) {
       </div>
       <div className='fright'>
         <Switch
-          checked={props.config.autoSync || false}
+          checked={autoSyncEnabled}
           checkedChildren={txt}
-          onChange={store.handleAutoSync}
+          onChange={handleAutoSync}
           unCheckedChildren={txt}
           className='mg3l mg1r'
         />
-        <Tooltip title={e('autoSyncTip')}>
-          <InfoCircleOutlined />
-        </Tooltip>
+        {autoSyncEnabled && (
+          <Space className='mg1l' size='small'>
+            <Select
+              value={autoSyncInterval}
+              onChange={handleIntervalChange}
+              options={intervalOptions}
+              style={{ width: 120 }}
+              popupMatchSelectWidth={false}
+            />
+            <Select
+              value={autoSyncDirection}
+              onChange={handleDirectionChange}
+              options={directionOptions}
+              style={{ width: 100 }}
+              popupMatchSelectWidth={false}
+            />
+          </Space>
+        )}
+        <HelpIcon
+          link='https://github.com/electerm/electerm/wiki/Auto-data-Sync'
+        />
       </div>
     </div>
   )

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

@@ -74,9 +74,15 @@ function renderAddonBefore (props, realPath) {
 }
 
 function renderAddonAfter (isLoadingRemote, onGoto, GoIcon, type) {
+  const handleClick = (e) => {
+    e.stopPropagation()
+    if (!isLoadingRemote) {
+      onGoto(type)
+    }
+  }
   return (
     <GoIcon
-      onClick={isLoadingRemote ? () => null : () => onGoto(type)}
+      onClick={handleClick}
     />
   )
 }

package/client/components/sidebar/bookmark-select.jsx

@@ -6,7 +6,7 @@ import { auto } from 'manate/react'
 import TreeList from '../tree-list/tree-list'
 
 export default auto(function BookmarkSelect (props) {
-  const { store, from } = props
+  const { store, from, autoFocus } = props
   const {
     listStyle,
     openedSideBar,
@@ -38,7 +38,8 @@ export default auto(function BookmarkSelect (props) {
     bookmarkGroups: store.getBookmarkGroupsTotal(),
     expandedKeys,
     leftSidebarWidth,
-    bookmarkGroupTree: store.bookmarkGroupTree
+    bookmarkGroupTree: store.bookmarkGroupTree,
+    autoFocus
   }
   return (
     <TreeList

package/client/components/sidebar/history-item.jsx

@@ -40,7 +40,9 @@ export default function HistoryItem (props) {
     e.stopPropagation()
     refsStatic.get('bookmark-from-history-modal')?.show(item.tab)
   }
-
+  if (!item.tab) {
+    return null
+  }
   const title = createTitleWithTag(item.tab)
   const tt = createTitle(item.tab)
   return (

package/client/components/sidebar/index.jsx

@@ -6,7 +6,6 @@ import {
   PlusCircleOutlined,
   SettingOutlined,
   UpCircleOutlined,
-  BarsOutlined,
   AppstoreOutlined,
   ThunderboltOutlined
 } from '@ant-design/icons'
@@ -92,7 +91,6 @@ export default function Sidebar (props) {
     openAbout,
     openSettingSync,
     openTerminalThemes,
-    toggleBatchOp,
     setLeftSidePanelWidth
   } = store
   const {
@@ -102,7 +100,6 @@ export default function Sidebar (props) {
     shouldUpgrade
   } = upgradeInfo
   const showSetting = showModal === modals.setting
-  const showBatchOp = showModal === modals.batchOps
   const settingActive = showSetting && settingTab === settingMap.setting && settingItem.id === 'setting-common'
   const syncActive = showSetting && settingTab === settingMap.setting && settingItem.id === 'setting-sync'
   const themeActive = showSetting && settingTab === settingMap.terminalThemes
@@ -190,12 +187,6 @@ export default function Sidebar (props) {
             spin={isSyncingSetting}
           />
         </SideIcon>
-        <SideIcon
-          title={e('batchOp')}
-          active={showBatchOp}
-        >
-          <BarsOutlined className='iblock font20 control-icon' onClick={toggleBatchOp} />
-        </SideIcon>
         <SideIcon
           title={e('widgets')}
           active={widgetsActive}

package/client/components/tabs/add-btn-menu.jsx

@@ -75,7 +75,7 @@ export default function AddBtnMenu ({
 
   let listContent
   if (activeTab === 'bookmarks') {
-    listContent = <BookmarksList store={window.store} />
+    listContent = <BookmarksList store={window.store} autoFocus />
   } else {
     listContent = <History store={window.store} />
   }

package/client/components/tabs/add-btn.jsx

@@ -40,15 +40,18 @@ export default class AddBtn extends Component {
   componentWillUnmount () {
     if (this.state.open) {
       document.removeEventListener('click', this.handleDocumentClick)
+      document.removeEventListener('keydown', this.handleKeyDown)
     }
     // Clean up portal container
     if (this.portalContainer) {
       document.body.removeChild(this.portalContainer)
       this.portalContainer = null
     }
-    // Clear focus timeout
-    if (this.çƒ) {
-      clearTimeout(this.focusTimeout)
+  }
+
+  handleKeyDown = (e) => {
+    if (e.key === 'Escape') {
+      this.setState({ open: false })
     }
   }
 
@@ -56,8 +59,10 @@ export default class AddBtn extends Component {
     // Attach or detach document click listener only when menu open state changes
     if (this.state.open && !prevState.open) {
       document.addEventListener('click', this.handleDocumentClick)
+      document.addEventListener('keydown', this.handleKeyDown)
     } else if (!this.state.open && prevState.open) {
       document.removeEventListener('click', this.handleDocumentClick)
+      document.removeEventListener('keydown', this.handleKeyDown)
     }
   }
 
@@ -115,17 +120,6 @@ export default class AddBtn extends Component {
     )
   }
 
-  focusSearchInput = () => {
-    // Focus the search input after the menu renders
-    this.focusTimeout = setTimeout(() => {
-      const searchInput = this.menuRef.current?.querySelector('.add-menu-list .ant-input')
-      if (searchInput) {
-        searchInput.focus()
-        searchInput.select()
-      }
-    }, 500)
-  }
-
   handleAddBtnClick = () => {
     if (this.state.open) {
       this.setState({ open: false })
@@ -172,7 +166,7 @@ export default class AddBtn extends Component {
           menuPosition,
           menuTop,
           menuLeft
-        }, this.focusSearchInput)
+        })
 
         window.openTabBatch = this.props.batch
       }

package/client/components/tabs/quick-connect.jsx

@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect } from 'react'
-import { Button, Space } from 'antd'
+import { Button, Space, Input } from 'antd'
 import { ArrowRightOutlined, ThunderboltOutlined } from '@ant-design/icons'
 import message from '../common/message'
 import InputAutoFocus from '../common/input-auto-focus'
@@ -29,18 +29,14 @@ export default function QuickConnect ({ batch, inputOnly }) {
   const [inputValue, setInputValue] = useState('')
   const inputRef = useRef(null)
 
-  useEffect(() => {
-    if (showInput && inputRef.current) {
-      inputRef.current.focus()
-    }
-  }, [showInput])
-
-  // When inputOnly is true, always show the input
+  // When inputOnly is true, always show the input (without auto-focus)
   useEffect(() => {
     if (inputOnly) {
       setShowInput(true)
+    } else if (showInput && inputRef.current) {
+      inputRef.current.focus()
     }
-  }, [inputOnly])
+  }, [inputOnly, showInput])
 
   const handleToggle = () => {
     setShowInput(!showInput)
@@ -94,7 +90,7 @@ export default function QuickConnect ({ batch, inputOnly }) {
         <Button
           {...iconsProps1}
         />
-        <InputAutoFocus {...inputProps} />
+        {inputOnly ? <Input {...inputProps} /> : <InputAutoFocus {...inputProps} />}
         <Button
           {...iconProps}
         />

package/client/components/terminal/terminal.jsx

@@ -378,11 +378,10 @@ class Term extends Component {
   }
 
   runQuickCommand = (cmd, inputOnly = false) => {
-    this.term && this.attachAddon._sendData(
-      cmd +
-      (inputOnly ? '' : '\r')
-    )
-    this.term.focus()
+    if (this.term && this.attachAddon) {
+      this.attachAddon._sendData(cmd + (inputOnly ? '' : '\r'))
+      this.term.focus()
+    }
   }
 
   cd = (p) => {