@electerm/electerm-react 2.8.6 → 2.8.8

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

@@ -100,7 +100,7 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
         className='ai-config-form'
       >
         <Form.Item label='API URL' required>
-          <Space.Compact block>
+          <Space.Compact className='width-100'>
             <Form.Item
               label='API URL'
               name='baseURLAI'

package/client/components/batch-op/batch-op.jsx

@@ -7,7 +7,6 @@ import {
   CloseCircleOutlined
 } from '@ant-design/icons'
 import {
-  Upload,
   Input,
   Button,
   Table,
@@ -28,11 +27,11 @@ import { pick } from 'lodash-es'
 import { runCmd } from '../terminal/terminal-apis'
 import deepCopy from 'json-deep-copy'
 import uid from '../../common/uid'
-import { getFilePath } from '../../common/file-drop-utils'
 import wait from '../../common/wait'
 import { getFolderFromFilePath } from '../sftp/file-read'
 import resolveFilePath from '../../common/resolve'
 import { refsStatic } from '../common/ref'
+import Upload from '../common/upload'
 
 const e = window.translate
 
@@ -407,7 +406,7 @@ export default class BatchOp extends PureComponent {
   }
 
   beforeUpload = async (file) => {
-    const filePath = getFilePath(file)
+    const filePath = file.filePath
     const text = await window.fs.readFile(filePath)
     this.setState({
       text

package/client/components/bookmark-form/common/render-auth-ssh.jsx

@@ -4,7 +4,6 @@
 import {
   Button,
   Input,
-  Upload,
   AutoComplete,
   Form,
   Select
@@ -12,7 +11,7 @@ import {
 import { formItemLayout } from '../../../common/form-layout'
 import { uniqBy } from 'lodash-es'
 import Password from '../../common/password'
-import { getFilePath } from '../../../common/file-drop-utils'
+import Upload from '../../common/upload'
 
 const { TextArea } = Input
 const FormItem = Form.Item
@@ -27,12 +26,11 @@ export default function renderAuth (props) {
     profileFilter = (d) => d
   } = props
   const beforeUpload = async (file) => {
-    const filePath = getFilePath(file)
+    const filePath = file.filePath
     const privateKey = await window.fs.readFile(filePath)
     form.setFieldsValue({
       privateKey
     })
-    return false
   }
   if (authType === 'password') {
     const opts = {

package/client/components/bookmark-form/common/run-scripts.jsx

@@ -18,7 +18,7 @@ export default function renderRunScripts () {
       <>
         <Space
           align='baseline'
-          block
+          className='width-100'
           key={field.key}
         >
           <FormItem

package/client/components/bookmark-form/common/ssh-auth-selector.jsx

@@ -4,7 +4,6 @@
 import {
   Button,
   Input,
-  Upload,
   AutoComplete,
   Form,
   Select
@@ -12,7 +11,7 @@ import {
 import { formItemLayout } from '../../../common/form-layout'
 import { uniqBy } from 'lodash-es'
 import Password from '../../common/password'
-import { getFilePath } from '../../../common/file-drop-utils'
+import Upload from '../../common/upload'
 
 const { TextArea } = Input
 const FormItem = Form.Item
@@ -27,12 +26,11 @@ export default function renderAuth (props) {
     profileFilter = (d) => d
   } = props
   const commonBeforeUpload = (fieldName) => async (file) => {
-    const filePath = getFilePath(file)
+    const filePath = file.filePath
     const content = await window.fs.readFile(filePath)
     form.setFieldsValue({
       [fieldName]: content
     })
-    return false
   }
   const renderKeyField = (key, label, desc) => (
     <FormItem

package/client/components/common/upload.jsx

@@ -0,0 +1,75 @@
+/**
+ * Custom Upload component that uses Electron's native file dialog
+ * This replaces antd Upload to get absolute file paths instead of browser-based file selection
+ */
+
+import { PureComponent } from 'react'
+import { getLocalFileInfo } from '../sftp/file-read'
+
+/**
+ * Open a single file select dialog
+ * @returns {Promise<Object|null>} - File object with path info or null if cancelled
+ */
+const openFileSelect = async () => {
+  const properties = [
+    'openFile',
+    'showHiddenFiles',
+    'noResolveAliases',
+    'treatPackageAsDirectory',
+    'dontAddToRecent'
+  ]
+  const files = await window.api.openDialog({
+    title: 'Choose a file',
+    message: 'Choose a file',
+    properties
+  }).catch(() => false)
+  if (!files || !files.length) {
+    return null
+  }
+  const filePath = files[0]
+  const stat = await getLocalFileInfo(filePath)
+  return { ...stat, filePath, path: filePath }
+}
+
+/**
+ * Custom Upload component
+ * Uses Electron's native file dialog for file selection
+ * API compatible with antd Upload for the use cases in this project
+ */
+export default class Upload extends PureComponent {
+  handleClick = async () => {
+    const { beforeUpload, disabled } = this.props
+    if (disabled) {
+      return
+    }
+    const file = await openFileSelect()
+    if (!file) {
+      return
+    }
+    if (beforeUpload) {
+      beforeUpload(file)
+    }
+  }
+
+  render () {
+    const {
+      children,
+      className,
+      style,
+      disabled
+    } = this.props
+
+    return (
+      <div
+        className={className}
+        style={style}
+        onClick={this.handleClick}
+        role='button'
+        tabIndex={disabled ? -1 : 0}
+        aria-disabled={disabled}
+      >
+        {children}
+      </div>
+    )
+  }
+}

package/client/components/quick-commands/quick-command-transport-mod.jsx

@@ -2,13 +2,12 @@ import BookmarkTransport from '../tree-list/bookmark-transport'
 import download from '../../common/download'
 import time from '../../common/time'
 import copy from 'json-deep-copy'
-import { getFilePath } from '../../common/file-drop-utils'
 
 export default class QmTransport extends BookmarkTransport {
   name = 'quickCommands'
   beforeUpload = async (file) => {
     const { store } = this.props
-    const filePath = getFilePath(file)
+    const filePath = file.filePath
     const txt = await window.fs.readFile(filePath)
     try {
       const arr = JSON.parse(txt)

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

@@ -20,9 +20,8 @@ export default function renderQm () {
     return (
       <Space.Compact
         align='center'
-        block
+        className='width-100 mg2b'
         key={field.key}
-        className='mg2b'
       >
         <Space.Addon>{e('delay')}</Space.Addon>
         <FormItem

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

@@ -54,6 +54,7 @@ export default function KeywordForm (props) {
         >
           <InputConfirm
             addonBefore={renderBefore(field.name)}
+            onChange={handleTrigger}
           />
         </FormItem>
         <Button
@@ -69,7 +70,9 @@ export default function KeywordForm (props) {
     const { themeConfig } = props
     return (
       <FormItem name={[name, 'color']} noStyle>
-        <Select>
+        <Select
+          onChange={handleTrigger}
+        >
           {
             colors.map(color => {
               const ps = {

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

@@ -1,13 +1,12 @@
 import BookmarkTransport from '../tree-list/bookmark-transport'
 import download from '../../common/download'
 import time from '../../common/time'
-import { getFilePath } from '../../common/file-drop-utils'
 
 export default class KeywordsTransport extends BookmarkTransport {
   name = 'keywords-highlight'
   beforeUpload = async (file) => {
     const { store } = this.props
-    const filePath = getFilePath(file)
+    const filePath = file.filePath
     const txt = await window.fs.readFile(filePath)
     try {
       store.setConfig({
@@ -28,6 +27,7 @@ export default class KeywordsTransport extends BookmarkTransport {
     const { store } = this.props
     const arr = store.config.keywords || []
     const txt = JSON.stringify(arr, null, 2)
+    console.log(txt, 'txt')
     const stamp = time(undefined, 'YYYY-MM-DD-HH-mm-ss')
     download('electerm-' + this.name + '-' + stamp + '.json', txt)
   }

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

@@ -7,7 +7,6 @@ import message from '../common/message'
 import {
   Select,
   Switch,
-  Upload,
   Button,
   AutoComplete,
   Tooltip,
@@ -34,9 +33,9 @@ import KeywordsTransport from './keywords-transport'
 import fs from '../../common/fs'
 import uid from '../../common/uid'
 import createDefaultSessionLogPath from '../../common/default-log-path'
-import { getFilePath } from '../../common/file-drop-utils'
 import TerminalBackgroundConfig from './terminal-bg-config'
 import NumberConfig from './number-config'
+import Upload from '../common/upload'
 import './setting.styl'
 
 const { Option } = Select
@@ -264,11 +263,9 @@ export default class SettingTerminal extends Component {
     const after = (
       <Upload
         beforeUpload={(file) => {
-          const filePath = getFilePath(file)
+          const filePath = file.filePath
           this.onChangeValue(filePath, name)
-          return false
         }}
-        showUploadList={false}
       >
         <span>{e('chooseFile')}</span>
       </Upload>

package/client/components/setting-panel/terminal-bg-config.jsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 import {
   AutoComplete,
-  Upload,
   Tooltip,
   Input
 } from 'antd'
@@ -12,7 +11,7 @@ import {
 import defaultSettings from '../../common/default-setting'
 import NumberConfig from './number-config'
 import TextBgModal from './text-bg-modal.jsx'
-import { getFilePath } from '../../common/file-drop-utils'
+import Upload from '../common/upload'
 
 const e = window.translate
 
@@ -33,11 +32,9 @@ export default function TerminalBackgroundConfig ({
   const after = (
     <Upload
       beforeUpload={(file) => {
-        const filePath = getFilePath(file)
+        const filePath = file.filePath
         onChangeValue(filePath, name)
-        return false
       }}
-      showUploadList={false}
     >
       <span>{e('chooseFile')}</span>
     </Upload>

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

@@ -4,7 +4,6 @@
 
 import {
   Button,
-  Upload,
   Switch,
   Tooltip
 } from 'antd'
@@ -13,6 +12,7 @@ import {
   ExportOutlined,
   InfoCircleOutlined
 } from '@ant-design/icons'
+import Upload from '../common/upload'
 
 const e = window.translate
 
@@ -34,6 +34,7 @@ export default function DataTransport (props) {
         <Upload
           beforeUpload={store.importAll}
           fileList={[]}
+          className='inline'
         >
           <Button
             icon={<ImportOutlined />}

package/client/components/tabs/workspace-save-modal.jsx

@@ -69,7 +69,7 @@ export default auto(function WorkspaceSaveModal ({ store }) {
       width={400}
     >
       <div className='pd1y'>
-        <Space direction='vertical' block>
+        <Space direction='vertical' className='width-100'>
           <Radio.Group
             value={saveMode}
             onChange={ev => setSaveMode(ev.target.value)}

package/client/components/terminal-info/base.jsx

@@ -130,7 +130,7 @@ export default class TerminalInfoBase extends Component {
       terminalInfos
     } = this.props
     return (
-      <Space.Compact block>
+      <Space.Compact className='width-100'>
         {
           defaults.terminalInfos.map(f => {
             const type = terminalInfos.includes(f) ? 'primary' : 'default'

package/client/components/theme/theme-form.jsx

@@ -1,5 +1,5 @@
 import { useRef, useState } from 'react'
-import { Button, Input, Upload, Form, Space } from 'antd'
+import { Button, Input, Form, Space } from 'antd'
 import message from '../common/message'
 import {
   convertTheme,
@@ -13,7 +13,7 @@ import generate from '../../common/uid'
 import Link from '../common/external-link'
 import InputAutoFocus from '../common/input-auto-focus'
 import ThemePicker from './theme-editor'
-import { getFilePath } from '../../common/file-drop-utils'
+import Upload from '../common/upload'
 // import './theme-form.styl'
 
 const { TextArea } = Input
@@ -154,7 +154,7 @@ export default function ThemeForm (props) {
   }
 
   async function beforeUpload (file) {
-    const filePath = getFilePath(file)
+    const filePath = file.filePath
     const txt = await window.fs.readFile(filePath)
     const { name, themeConfig, uiThemeConfig } = convertTheme(txt)
     const tt = convertThemeToText({
@@ -165,7 +165,6 @@ export default function ThemeForm (props) {
       themeText: tt
     })
     setTxt(tt)
-    return false
   }
 
   function handleSwitchEditor (e) {

package/client/components/tree-list/bookmark-toolbar.jsx

@@ -7,15 +7,15 @@ import {
   MenuOutlined,
   EditOutlined
 } from '@ant-design/icons'
-import { Button, Space, Dropdown, Upload } from 'antd'
+import { Button, Space, Dropdown } from 'antd'
 import copy from 'json-deep-copy'
 import time from '../../common/time'
 import { uniq } from 'lodash-es'
 import { fixBookmarks } from '../../common/db-fix'
 import download from '../../common/download'
-import { getFilePath } from '../../common/file-drop-utils'
 import delay from '../../common/wait'
 import { action } from 'manate'
+import Upload from '../common/upload'
 
 const e = window.translate
 
@@ -31,7 +31,7 @@ export default function BookmarkToolbar (props) {
   } = props
   const upload = action(async (file) => {
     const { store } = window
-    const filePath = getFilePath(file)
+    const filePath = file.filePath
     const txt = await window.fs.readFile(filePath)
 
     const content = JSON.parse(txt)

package/client/components/tree-list/bookmark-transport.jsx

@@ -8,7 +8,8 @@ import {
   ImportOutlined,
   EditOutlined
 } from '@ant-design/icons'
-import { Upload, Button, Space } from 'antd'
+import { Button, Space } from 'antd'
+import Upload from '../common/upload'
 
 const e = window.translate
 

package/client/store/sync.js

@@ -13,7 +13,6 @@ import download from '../common/download'
 import { fixBookmarks } from '../common/db-fix'
 import dayjs from 'dayjs'
 import parseJsonSafe from '../common/parse-json-safe'
-import { getFilePath } from '../common/file-drop-utils'
 
 const {
   version: packVer
@@ -418,7 +417,7 @@ export default (Store) => {
   }
 
   Store.prototype.importAll = async function (file) {
-    const filePath = getFilePath(file)
+    const filePath = file.filePath
     const txt = await window.fs
       .readFile(filePath)
     const { store } = window

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electerm/electerm-react",
-  "version": "2.8.6",
+  "version": "2.8.8",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",