@electerm/electerm-react 1.51.8 → 1.51.18

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

@@ -0,0 +1,60 @@
+import React, { useEffect } from 'react'
+import { notification, Button } from 'antd'
+import * as ls from '../../common/safe-local-storage'
+import {
+  sshConfigKey,
+  sshConfigLoadKey
+} from '../../common/constants'
+
+const e = window.translate
+
+function handleLoad () {
+  window.store.showSshConfigModal = true
+  notification.destroy('sshConfigNotify')
+}
+
+function handleIgnore () {
+  ls.setItem(sshConfigKey, 'yes')
+  notification.destroy('sshConfigNotify')
+}
+
+function showNotification () {
+  notification.info({
+    message: e('loadSshConfigs'),
+    duration: 0,
+    placement: 'bottom',
+    key: 'sshConfigNotify',
+    description: (
+      <div>
+        <p>{e('sshConfigNotice')}</p>
+        <Button type='primary' onClick={handleLoad} className='mg1r mg1b'>
+          {e('import')}
+        </Button>
+        <Button onClick={handleIgnore} className='mg1r mg1b'>
+          {e('ignore')}
+        </Button>
+      </div>
+    )
+  })
+}
+
+export default function SshConfigLoadNotify (props) {
+  const { settingTab, showModal, sshConfigs } = props
+
+  useEffect(() => {
+    const ignoreSshConfig = ls.getItem(sshConfigKey)
+    const sshConfigLoaded = ls.getItem(sshConfigLoadKey)
+    const shouldShow =
+      sshConfigs.length &&
+      ignoreSshConfig !== 'yes' &&
+      settingTab === 'bookmarks' &&
+      showModal &&
+      sshConfigLoaded !== 'yes'
+
+    if (shouldShow) {
+      showNotification()
+    }
+  }, [settingTab, showModal, sshConfigs.length])
+
+  return null
+}

package/client/components/tabs/tab.jsx

@@ -14,9 +14,7 @@ import { pick } from 'lodash-es'
 import Input from '../common/input-auto-focus'
 import createName from '../../common/create-title'
 import { addClass, removeClass } from '../../common/class'
-import {
-  terminalSshConfigType
-} from '../../common/constants'
+import isDark from '../../common/is-color-dark'
 import { action } from 'manate'
 import { shortcutDescExtend } from '../shortcuts/shortcut-handler.js'
 
@@ -227,11 +225,10 @@ class Tab extends Component {
   }
 
   renderContext = () => {
-    const { tabs, tab, tabIndex } = this.props
+    const { tabs, tabIndex } = this.props
     const len = tabs.length
     const index = tabIndex
     const noRight = index >= len - 1
-    const isSshConfig = tab.type === terminalSshConfigType
     const res = []
     const reloadShortcut = this.getShortcut('app_reloadCurrentTab')
     const closeShortcut = this.getShortcut('app_closeCurrentTab')
@@ -271,7 +268,6 @@ class Tab extends Component {
       subText: cloneToNextShortcut
     })
     res.push({
-      disabled: isSshConfig,
       func: 'doRename',
       icon: 'EditOutlined',
       text: e('rename')
@@ -389,9 +385,12 @@ class Tab extends Component {
     if (isEditting) {
       return this.renderEditting(tab, cls)
     }
-    const { tabCount, color } = tab
+    const { tabCount, color = '#0088cc' } = tab
     const styleTag = color
-      ? { borderTop: `1px solid ${color}` }
+      ? {
+          background: color,
+          color: isDark(color) ? '#fff' : '#000'
+        }
       : {}
     return (
       <Tooltip
@@ -418,7 +417,6 @@ class Tab extends Component {
             className='tab-title elli pd1x'
             onClick={this.handleClick}
             onDoubleClick={this.handleDup}
-            style={styleTag}
           >
             <Loading3QuartersOutlined
               className='pointer tab-reload mg1r'
@@ -426,7 +424,8 @@ class Tab extends Component {
               title={e('reload')}
             />
             <span className='tab-title'>
-              {tabCount}. {title}
+              <span className='iblock mg1r tab-count' style={styleTag}>{tabCount}</span>
+              <span className='mg1r'>{title}</span>
             </span>
           </div>
           <div className={'tab-status ' + status} />

package/client/components/tabs/tabs.styl

@@ -223,4 +223,9 @@
   left 0
   right 0
   bottom 0
-  z-index 11
+  z-index 11
+.tab-count
+  border-radius 10px 2px 2px 2px
+  padding 0 4px
+  height 20px
+  line-height 21px

package/client/components/terminal/index.jsx

@@ -20,7 +20,6 @@ import {
   paneMap,
   typeMap,
   isWin,
-  terminalSshConfigType,
   transferTypeMap,
   terminalActions,
   commonActions,
@@ -818,8 +817,7 @@ clear\r`
   }
 
   isRemote = () => {
-    return this.props.tab?.host &&
-    this.props.tab?.type !== terminalSshConfigType
+    return this.props.tab?.host
   }
 
   onPaste = async () => {
@@ -1055,15 +1053,9 @@ clear\r`
   runInitScript = () => {
     window.store.triggerResize()
     const {
-      type,
-      title,
       startDirectory,
       runScripts
     } = this.props.tab
-    if (type === terminalSshConfigType) {
-      const cmd = `ssh ${title.split(/\s/g)[0]}\r`
-      return this.attachAddon._sendData(cmd)
-    }
     const startFolder = startDirectory || window.initFolder
     if (startFolder) {
       const cmd = `cd "${startFolder}"\r`
@@ -1141,10 +1133,7 @@ clear\r`
       id
     } = tab
     const { savePassword } = this.state
-    const isSshConfig = type === terminalSshConfigType
-    const termType = isSshConfig
-      ? typeMap.local
-      : type
+    const termType = type
     const extra = this.props.sessionOptions
     const opts = clone({
       cols,
@@ -1174,7 +1163,7 @@ clear\r`
       termType,
       readyTimeout: config.sshReadyTimeout,
       proxy: getProxy(tab, config),
-      type: tab.host && !isSshConfig
+      type: tab.host
         ? typeMap.remote
         : typeMap.local
     })
@@ -1326,10 +1315,7 @@ clear\r`
       isRemote: this.isRemote(),
       isActive: this.isActiveTerminal()
     }
-    window.store.setState(
-      'terminalInfoProps',
-      infoProps
-    )
+    Object.assign(window.store.terminalInfoProps, infoProps)
   }
 
   // getPwd = async () => {

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

@@ -0,0 +1,203 @@
+import {
+  BookOutlined,
+  FolderOutlined,
+  UploadOutlined,
+  DownloadOutlined,
+  CodeOutlined,
+  MenuOutlined,
+  EditOutlined
+} from '@ant-design/icons'
+import { Button, Space, Dropdown, Upload } from 'antd'
+import copy from 'json-deep-copy'
+import time from '../../common/time'
+import { find, uniq, isEqual } from 'lodash-es'
+import { fixBookmarks } from '../../common/db-fix'
+import download from '../../common/download'
+
+const e = window.translate
+
+export default function BookmarkToolbar ({
+  onNewBookmark,
+  onNewBookmarkGroup,
+  onImport,
+  onExport,
+  onSshConfigs,
+  bookmarkGroups,
+  bookmarks
+}) {
+  const beforeUpload = async (file) => {
+    const { store } = window
+    const txt = await window.fs.readFile(file.path)
+    try {
+      const content = JSON.parse(txt)
+      const {
+        bookmarkGroups: bookmarkGroups1,
+        bookmarks: bookmarks1
+      } = content
+      const { props } = this
+      const bookmarkGroups = copy(props.bookmarkGroups)
+      const bookmarks = copy(props.bookmarks)
+      const bmTree = bookmarks.reduce((p, v) => {
+        return {
+          ...p,
+          [v.id]: v
+        }
+      }, {})
+      const bmgTree = bookmarkGroups.reduce((p, v) => {
+        return {
+          ...p,
+          [v.id]: v
+        }
+      }, {})
+      const add = []
+      const dbAdd = []
+      const updates = []
+      bookmarks1.forEach(bg => {
+        if (!bmTree[bg.id]) {
+          bookmarks.push(bg)
+          add.push(bg)
+          dbAdd.push({
+            db: 'bookmarks',
+            obj: bg
+          })
+        }
+      })
+      bookmarkGroups1.forEach(bg => {
+        if (!bmgTree[bg.id]) {
+          bookmarkGroups.push(bg)
+          dbAdd.push({
+            db: 'bookmarkGroups',
+            obj: bg
+          })
+        } else {
+          const bg1 = find(
+            bookmarkGroups,
+            b => b.id === bg.id
+          )
+          const old = copy(bg1.bookmarkIds)
+          bg1.bookmarkIds = uniq(
+            [
+              ...bg1.bookmarkIds,
+              ...bg.bookmarkIds
+            ]
+          )
+          if (!isEqual(bg1.bookmarkIds, old)) {
+            updates.push({
+              id: bg1.id,
+              db: 'bookmarkGroups',
+              update: {
+                bookmarkIds: bg1.bookmarkIds
+              }
+            })
+          }
+        }
+      })
+      store.setBookmarkGroups(bookmarkGroups)
+      store.setBookmarks(fixBookmarks(bookmarks))
+      store.batchDbAdd(dbAdd)
+      store.batchDbUpdate(updates)
+    } catch (e) {
+      store.onError(e)
+    }
+    return false
+  }
+  const handleDownload = () => {
+    const { bookmarkGroups, bookmarks } = this.props
+    const txt = JSON.stringify({
+      bookmarkGroups: copy(bookmarkGroups),
+      bookmarks: copy(bookmarks)
+    }, null, 2)
+    const stamp = time(undefined, 'YYYY-MM-DD-HH-mm-ss')
+    download('bookmarks-' + stamp + '.json', txt)
+  }
+  const handleToggleEdit = () => {
+    window.store.bookmarkSelectMode = true
+  }
+  const titleNew = `${e('new')} ${e('bookmarks')}`
+  const titleEdit = `${e('new')} ${e('bookmarkCategory')}`
+  const items = [
+    {
+      label: titleNew,
+      onClick: onNewBookmark,
+      icon: <BookOutlined />
+    },
+    {
+      label: titleEdit,
+      onClick: onNewBookmarkGroup,
+      icon: <FolderOutlined />
+    },
+    {
+      label: e('edit'),
+      onClick: handleToggleEdit,
+      icon: <EditOutlined />
+    },
+    {
+      label: e('import'),
+      onClick: onImport,
+      icon: <UploadOutlined />
+    },
+    {
+      label: e('export'),
+      onClick: onExport,
+      icon: <DownloadOutlined />
+    },
+    {
+      label: e('loadSshConfigs'),
+      onClick: onSshConfigs,
+      icon: <CodeOutlined />
+    }
+  ]
+
+  const ddProps = {
+    menu: {
+      items
+    }
+  }
+
+  return (
+
+    <div className='pd1b pd1r'>
+      <div className='fix'>
+        <div className='fleft'>
+          <Space.Compact>
+            <Button onClick={onNewBookmark}>
+              <BookOutlined className='with-plus' />
+            </Button>
+            <Button onClick={onNewBookmarkGroup}>
+              <FolderOutlined className='with-plus' />
+            </Button>
+            <Button
+              icon={<EditOutlined />}
+              onClick={handleToggleEdit}
+              title={e('edit')}
+            />
+            <Button
+              icon={<DownloadOutlined />}
+              onClick={handleDownload}
+              title={e('export')}
+              className='download-bookmark-icon'
+            />
+            <Upload
+              beforeUpload={beforeUpload}
+              fileList={[]}
+              className='upload-bookmark-icon'
+            >
+              <Button
+                icon={<UploadOutlined />}
+                title={e('importFromFile')}
+              />
+            </Upload>
+            <Button onClick={onSshConfigs}>
+              <CodeOutlined />
+            </Button>
+          </Space.Compact>
+        </div>
+        <div className='fright'>
+          <Dropdown {...ddProps}>
+            <MenuOutlined />
+          </Dropdown>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -127,11 +127,13 @@ export default class BookmarkTransport extends PureComponent {
         icon={<DownloadOutlined />}
         onClick={this.handleDownload}
         title={e('export')}
+        className='download-bookmark-icon'
         key='export'
       />,
       <Upload
         beforeUpload={this.beforeUpload}
         fileList={[]}
+        className='upload-bookmark-icon'
         key='Upload'
       >
         <Button

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

@@ -4,10 +4,8 @@
 
 import { Component } from 'react'
 import {
-  BookOutlined,
   CheckOutlined,
   CloseOutlined,
-  FolderOutlined,
   LoadingOutlined
 } from '@ant-design/icons'
 import {
@@ -15,10 +13,6 @@ import {
   cut,
   hasBookmarkOrGroupInClipboardText
 } from '../../common/clipboard'
-import {
-  Button,
-  Space
-} from 'antd'
 import createName from '../../common/create-title'
 import InputAutoFocus from '../common/input-auto-focus'
 import { find, uniq, isEqual, filter, pick } from 'lodash-es'
@@ -31,8 +25,8 @@ import {
   copyBookmarkGroupItemPrefix
 } from '../../common/constants'
 import findParentBySel from '../../common/find-parent'
-import copy from 'json-deep-copy'
-import BookmarkTransport from './bookmark-transport'
+import copy, { deepCopy } from 'json-deep-copy'
+import NewButtonsGroup from './bookmark-toolbar'
 import findBookmarkGroupId from '../../common/find-bookmark-group-id'
 import getInitItem from '../../common/init-setting-item'
 import uid from '../../common/uid'
@@ -73,7 +67,7 @@ export default class ItemListTree extends Component {
       !deepEqual(this.props.expandedKeys, this.state.expandedKeys)
     ) {
       this.setState({
-        expandedKeys: this.props.expandedKeys
+        expandedKeys: deepCopy(this.props.expandedKeys)
       })
     }
   }
@@ -312,9 +306,7 @@ export default class ItemListTree extends Component {
       expandedKeys
     })
     this.closeNewGroupForm()
-    window.store.setState(
-      'expandedKeys', expandedKeys
-    )
+    window.store.expandedKeys = deepCopy(expandedKeys)
   }
 
   onSelect = (
@@ -900,28 +892,29 @@ export default class ItemListTree extends Component {
     )
   }
 
+  handleImport = () => {
+    document.querySelector('.upload-bookmark-icon input')?.click()
+  }
+
+  handleExport = () => {
+    document.querySelector('.download-bookmark-icon')?.click()
+  }
+
+  handleSshConfigs = () => {
+    window.store.showSshConfigModal = true
+  }
+
   renderNewButtons = () => {
     return (
-      <div className='pd1b pd2r'>
-        <Space.Compact>
-          <Button
-            onClick={this.handleNewBookmark}
-            title={`${e('new')} ${e('bookmarks')}`}
-          >
-            <BookOutlined className='with-plus' />
-          </Button>
-          <Button
-            onClick={this.handleNewBookmarkGroup}
-            title={`${e('new')} ${e('bookmarkCategory')}`}
-          >
-            <FolderOutlined className='with-plus' />
-          </Button>
-          <BookmarkTransport
-            bookmarkGroups={this.props.bookmarkGroups}
-            bookmarks={this.props.bookmarks}
-          />
-        </Space.Compact>
-      </div>
+      <NewButtonsGroup
+        onNewBookmark={this.handleNewBookmark}
+        onNewBookmarkGroup={this.handleNewBookmarkGroup}
+        onImport={this.handleImport}
+        onExport={this.handleExport}
+        onSshConfigs={this.handleSshConfigs}
+        bookmarkGroups={this.props.bookmarkGroups}
+        bookmarks={this.props.bookmarks}
+      />
     )
   }
 

package/client/store/bookmark-group.js

@@ -5,23 +5,12 @@
 import { find } from 'lodash-es'
 import {
   defaultBookmarkGroupId,
-  settingMap,
-  terminalSshConfigType
+  settingMap
 } from '../common/constants'
 
 export default Store => {
   Store.prototype.getBookmarkGroupsTotal = function () {
-    const { store } = window
-    return store.sshConfigItems.length && !store.config.hideSshConfig
-      ? [
-          ...store.bookmarkGroups,
-          {
-            title: terminalSshConfigType,
-            id: terminalSshConfigType,
-            bookmarkIds: store.sshConfigItems.map(d => d.id)
-          }
-        ]
-      : store.bookmarkGroups
+    return window.store.bookmarkGroups
   }
 
   Store.prototype.setBookmarkGroups = function (items) {

package/client/store/bookmark.js

@@ -2,6 +2,8 @@
  * bookmark
  */
 
+import uid from '../common/uid'
+
 export default Store => {
   Store.prototype.handleGetSerials = async function () {
     const { store } = window
@@ -9,11 +11,51 @@ export default Store => {
     const res = await window.pre.runGlobalAsync('listSerialPorts')
       .catch(store.onError)
     if (res) {
-      store._serials = JSON.stringify(res)
+      store.serials = res
     }
     store.loaddingSerials = false
   }
   Store.prototype.setBookmarks = function (items) {
     return window.store.setItems('bookmarks', items)
   }
+
+  Store.prototype.addSshConfigs = function (items) {
+    const { store } = window
+
+    const bookmarksToAdd = items.map(t => {
+      return {
+        term: 'xterm-256color',
+        id: uid(),
+        type: 'local',
+        title: 'ssh config: ' + t.title,
+        color: '#0088cc',
+        runScripts: [
+          {
+            script: `ssh ${t.title}`,
+            delay: 500
+          }
+        ]
+      }
+    }).filter(d => {
+      return !store.bookmarks.find(t => t.title === d.title)
+    })
+    const ids = bookmarksToAdd.map(d => d.id)
+    let sshConfigGroup = store.bookmarkGroups.find(d => d.id === 'sshConfig')
+    if (!sshConfigGroup) {
+      sshConfigGroup = {
+        id: 'sshConfig',
+        title: 'ssh configs',
+        bookmarkIds: ids
+      }
+      store.addBookmarkGroup(sshConfigGroup)
+    } else {
+      store.editItem('sshConfig', {
+        bookmarkIds: [
+          ...ids,
+          ...(sshConfigGroup.bookmarkIds || [])
+        ]
+      })
+    }
+    return store.addItems(bookmarksToAdd, 'bookmarks')
+  }
 }

package/client/store/common.js

@@ -136,17 +136,11 @@ export default Store => {
   }
 
   Store.prototype.setSettingItem = function (v) {
-    window.store.setState('settingItem', v)
+    window.store.settingItem = v
   }
 
   Store.prototype.setTermSearchOption = function (update) {
-    const {
-      store
-    } = window
-    store.setState('termSearchOptions', {
-      ...JSON.parse(window.store._termSearchOptions),
-      ...update
-    })
+    Object.assign(window.store._termSearchOptions, update)
   }
 
   Store.prototype.setLeftSidePanelWidth = function (v) {