@electerm/electerm-react 1.101.20 → 2.1.16

package/client/common/constants.js

@@ -107,6 +107,12 @@ export const settingMap = buildConst([
   'profiles'
 ])
 
+export const staticNewItemTabs = new Set([
+  'terminalThemes',
+  'quickCommands',
+  'profiles'
+])
+
 export const infoTabs = buildConst([
   'info',
   'deps',

package/client/common/init-setting-item.js

@@ -24,7 +24,7 @@ export default (arr, tab) => {
   } else if (tab === settingMap.quickCommands) {
     return {
       id: '',
-      name: encodeURIComponent(newQuickCommand)
+      name: e(newQuickCommand)
     }
   } else if (tab === settingMap.profiles) {
     return {

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

@@ -138,13 +138,6 @@ export default function QuickCommandForm (props) {
   const wiki = 'https://github.com/electerm/electerm/wiki/quick-command-templates'
   return (
     <>
-      <p>
-        <b className='mg1r'>{e('templates')}:</b>
-        <span className='mg1r'>{templatesStr}</span>
-        <HelpIcon
-          link={wiki}
-        />
-      </p>
       <Form
         form={form}
         onFinish={handleSubmit}
@@ -210,6 +203,13 @@ export default function QuickCommandForm (props) {
             </Button>
           </p>
         </FormItem>
+        <p>
+          <b className='mg1r'>{e('templates')}:</b>
+          <span className='mg1r'>{templatesStr}</span>
+          <HelpIcon
+            link={wiki}
+          />
+        </p>
       </Form>
     </>
   )

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

@@ -9,7 +9,8 @@ import createName, { createTitleTag } from '../../common/create-title'
 import classnames from 'classnames'
 import { noop } from 'lodash-es'
 import highlight from '../common/highlight'
-import { settingSyncId, settingCommonId } from '../../common/constants'
+import { settingSyncId, settingCommonId, staticNewItemTabs } from '../../common/constants'
+import getInitItem from '../../common/init-setting-item'
 import './list.styl'
 
 const e = window.translate
@@ -95,6 +96,17 @@ export default class ItemList extends React.PureComponent {
     return icon
   }
 
+  renderNewItem () {
+    const { type } = this.props
+
+    if (!staticNewItemTabs.has(type)) {
+      return null
+    }
+
+    const newItem = getInitItem([], type)
+    return this.renderItem(newItem, -1)
+  }
+
   renderItem = (item, i) => {
     const { onClickItem, type, activeItemId } = this.props
     const { id } = item
@@ -175,6 +187,7 @@ export default class ItemList extends React.PureComponent {
         {this.renderLabels ? this.renderLabels() : null}
         {this.renderSearch()}
         <div className='item-list-wrap' style={listStyle}>
+          {this.renderNewItem()}
           {
             list.map(this.renderItem)
           }

package/client/components/sftp/paged-list.jsx

@@ -38,7 +38,7 @@ export default class ScrollFiles extends Component {
       pageSize: this.state.pageSize,
       total: this.props.list.length,
       showSizeChanger: false,
-      size: 'small',
+      simple: true,
       onChange: this.onChange
     }
     return (

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

@@ -144,6 +144,14 @@ class ShortcutControl extends React.PureComponent {
     window.store.cloneToNextLayout()
   }, 500)
 
+  duplicateTabShortcut = throttle((e) => {
+    e.stopPropagation()
+    const { activeTabId } = window.store
+    if (activeTabId) {
+      window.store.duplicateTab(activeTabId)
+    }
+  }, 500)
+
   prevTabShortcut = throttle((e) => {
     e.stopPropagation()
     window.store.clickPrevTab()

package/client/components/shortcuts/shortcuts-defaults.js

@@ -21,6 +21,11 @@ export default () => {
       shortcut: 'ctrl+/',
       shortcutMac: 'meta+/'
     },
+    {
+      name: 'app_duplicateTab',
+      shortcut: 'alt+c',
+      shortcutMac: 'alt+c'
+    },
     {
       name: 'app_newBookmark',
       shortcut: 'ctrl+n',

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

@@ -64,27 +64,31 @@ class MenuBtn extends PureComponent {
   }
 
   renderContext = () => {
-    return [
+    const items = [
       {
         func: 'onNewSsh',
         icon: 'CodeFilled',
         text: e('newBookmark'),
         subText: this.getShortcut('app_newBookmark')
-      },
-      {
+      }
+    ]
+    if (window.store.hasNodePty) {
+      items.push({
         func: 'addTab',
         icon: 'RightSquareFilled',
         text: e('newTab')
-      },
-      // {
-      //   type: 'hr'
-      // },
-      {
-        noCloseMenu: true,
-        icon: 'BookOutlined',
-        text: e('bookmarks'),
-        submenu: 'Bookmark'
-      },
+      })
+    }
+    // {
+    //   type: 'hr'
+    // },
+    items.push({
+      noCloseMenu: true,
+      icon: 'BookOutlined',
+      text: e('bookmarks'),
+      submenu: 'Bookmark'
+    })
+    items.push(
       {
         noCloseMenu: true,
         icon: 'ClockCircleOutlined',
@@ -162,7 +166,8 @@ class MenuBtn extends PureComponent {
         icon: 'CloseOutlined',
         text: e('close')
       }
-    ]
+    )
+    return items
   }
 
   renderMenu () {

package/client/components/tabs/index.jsx

@@ -124,6 +124,10 @@ export default class Tabs extends Component {
   }
 
   handleTabAdd = () => {
+    if (!window.store.hasNodePty) {
+      window.store.onNewSsh()
+      return
+    }
     window.store.addTab(
       undefined, undefined,
       this.props.batch
@@ -195,6 +199,16 @@ export default class Tabs extends Component {
   renderMenus () {
     const { onNewSsh } = window.store
     const cls = 'pd2x pd1y context-item pointer'
+    const addTabBtn = window.store.hasNodePty
+      ? (
+        <div
+          className={cls}
+          onClick={this.handleTabAdd}
+        >
+          <RightSquareFilled /> {e('newTab')}
+        </div>
+        )
+      : null
     return (
       <div
         className='add-menu-wrap' style={{
@@ -207,12 +221,7 @@ export default class Tabs extends Component {
         >
           <CodeFilled /> {e('newBookmark')}
         </div>
-        <div
-          className={cls}
-          onClick={this.handleTabAdd}
-        >
-          <RightSquareFilled /> {e('newTab')}
-        </div>
+        {addTabBtn}
         <BookmarksList
           store={window.store}
         />

package/client/components/tabs/no-session.jsx

@@ -13,8 +13,8 @@ export default function NoSessionPanel ({ height, onNewTab, onNewSsh, batch }) {
   const handleClick = () => {
     window.openTabBatch = batch
   }
-  return (
-    <div className='no-sessions electerm-logo-bg' {...props}>
+  const newTabDom = window.store.hasNodePty
+    ? (
       <Button
         onClick={onNewTab}
         size='large'
@@ -22,6 +22,11 @@ export default function NoSessionPanel ({ height, onNewTab, onNewSsh, batch }) {
       >
         {e('newTab')}
       </Button>
+      )
+    : null
+  return (
+    <div className='no-sessions electerm-logo-bg' {...props}>
+      {newTabDom}
       <Button
         onClick={onNewSsh}
         size='large'

package/client/components/tabs/tab.jsx

@@ -220,7 +220,11 @@ class Tab extends Component {
   }
 
   newTab = () => {
-    this.props.addTab()
+    if (window.store.hasNodePty) {
+      this.props.addTab()
+    } else {
+      window.store.onNewSsh()
+    }
   }
 
   doRename = () => {
@@ -264,6 +268,7 @@ class Tab extends Component {
     const reloadShortcut = this.getShortcut('app_reloadCurrentTab')
     const closeShortcut = this.getShortcut('app_closeCurrentTab')
     const cloneToNextShortcut = this.getShortcut('app_cloneToNextLayout')
+    const duplicateShortcut = this.getShortcut('app_duplicateTab')
 
     const x = [
       {
@@ -290,7 +295,8 @@ class Tab extends Component {
       {
         key: 'handleDup',
         icon: <iconsMap.CopyOutlined />,
-        label: e('duplicate')
+        label: e('duplicate'),
+        extra: duplicateShortcut
       },
       {
         key: 'cloneToNextLayout',

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

@@ -7,7 +7,8 @@ import { LoadingOutlined, CheckCircleOutlined } from '@ant-design/icons'
 import { pick } from 'lodash-es'
 import { Pagination } from 'antd'
 import ThemeListItem from './theme-list-item'
-import { defaultTheme } from '../../common/constants'
+import { defaultTheme, settingMap } from '../../common/constants'
+import getInitItem from '../../common/init-setting-item'
 import './terminal-theme-list.styl'
 
 const e = window.translate
@@ -58,13 +59,33 @@ export default class ThemeList extends List {
     )
   }
 
+  renderNewItem () {
+    const newThemeItem = getInitItem([], settingMap.terminalThemes)
+    const itemProps = {
+      item: newThemeItem,
+      renderDelBtn: this.renderDelBtn,
+      activeItemId: this.props.activeItemId,
+      ...pick(
+        this.props,
+        [
+          'onClickItem',
+          'theme',
+          'keyword'
+        ]
+      )
+    }
+    return (
+      <ThemeListItem key='new-theme' {...itemProps} />
+    )
+  }
+
   filter = list => {
-    const { keyword, ready } = this.state
+    const { keyword } = this.state
     return keyword
-      ? list.slice(0, ready ? list.length : 2).filter(item => {
+      ? list.filter(item => {
         return item.name.toLowerCase().includes(keyword.toLowerCase())
       })
-      : list.slice(0, ready ? list.length : 2)
+      : list
   }
 
   paged = list => {
@@ -77,6 +98,13 @@ export default class ThemeList extends List {
 
   render () {
     const { ready, page, pageSize } = this.state
+    if (!ready) {
+      return (
+        <div className='pd3 aligncenter'>
+          <LoadingOutlined />
+        </div>
+      )
+    }
     let {
       list = [],
       type,
@@ -92,6 +120,7 @@ export default class ThemeList extends List {
         {this.renderSearch()}
         {this.renderCurrentTheme()}
         <div className='item-list-wrap' style={listStyle}>
+          {this.renderNewItem()}
           {
             list.map(this.renderItem)
           }
@@ -101,17 +130,10 @@ export default class ThemeList extends List {
           total={all}
           current={page}
           pageSize={pageSize}
+          showLessItems
+          simple
           onShowSizeChange={this.handlePageSizeChange}
         />
-        {
-          ready
-            ? null
-            : (
-              <div className='pd3 aligncenter'>
-                <LoadingOutlined />
-              </div>
-              )
-        }
       </div>
     )
   }

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

@@ -309,6 +309,10 @@ export default class ItemListTree extends Component {
       store.storeAssign({
         currentBookmarkGroupId: id
       })
+      const func = this.props.expandedKeys.includes(id)
+        ? this.onUnExpandKey
+        : this.onExpandKey
+      func({ id })
     } else {
       store.storeAssign({
         currentBookmarkGroupId: findBookmarkGroupId(store.bookmarkGroups, id)

package/client/store/db-upgrade.js

@@ -12,31 +12,55 @@ export default (Store) => {
       return false
     }
     const shouldUpgrade = await window.pre.runGlobalAsync('checkDbUpgrade')
-    if (!shouldUpgrade) {
+    const shouldMigrate = await window.pre.runGlobalAsync('checkMigrate')
+    if (!shouldUpgrade && !shouldMigrate) {
+      window.migrating = false
       return false
     }
-    const {
-      dbVersion,
-      packVersion
-    } = shouldUpgrade
-    const mod = Modal.info({
-      title: 'Upgrading database',
-      content: `Upgrading database... from v${dbVersion} to v${packVersion} please wait`,
+    window.migrating = true
+    let mod
+    const commonProps = {
       keyboard: false,
       okButtonProps: {
         style: {
           display: 'none'
         }
       }
-    })
-    await window.pre.runGlobalAsync('doUpgrade')
-    mod.update({
-      title: 'Done',
-      content: 'Database Upgraded',
-      okButtonProps: {}
-    })
-    await delay(2000)
-    mod.destroy()
+    }
+    if (shouldMigrate) {
+      mod = Modal.info({
+        title: 'Migrating database',
+        content: 'Migrating database... please wait',
+        ...commonProps
+      })
+      await window.pre.runGlobalAsync('migrate')
+      mod.update({
+        title: 'Done',
+        content: 'Database Migrated',
+        okButtonProps: {}
+      })
+      await delay(2000)
+      mod.destroy()
+    }
+    if (shouldUpgrade) {
+      const {
+        dbVersion,
+        packVersion
+      } = shouldUpgrade
+      mod = Modal.info({
+        title: 'Upgrading database',
+        content: `Upgrading database... from v${dbVersion} to v${packVersion} please wait`,
+        ...commonProps
+      })
+      await window.pre.runGlobalAsync('doUpgrade')
+      mod.update({
+        title: 'Done',
+        content: 'Database Upgraded',
+        okButtonProps: {}
+      })
+      await delay(2000)
+      mod.destroy()
+    }
     await store.restart()
     return true
   }

package/client/store/init-state.js

@@ -188,6 +188,7 @@ export default () => {
     innerWidth: window.innerWidth,
     height: 500,
     isMaximized: window.pre.runSync('isMaximized'),
+    hasNodePty: window.pre.runSync('nodePtyCheck'),
     terminalFullScreen: false,
     hideDelKeyTip: ls.getItem(dismissDelKeyTipLsKey) === 'y',
     tabsHeight: 36

package/client/store/store.js

@@ -32,7 +32,8 @@ import getBrand from '../components/ai/get-brand'
 import {
   settingMap,
   terminalSshConfigType,
-  paneMap
+  paneMap,
+  staticNewItemTabs
 } from '../common/constants'
 import getInitItem from '../common/init-setting-item'
 import createTitle from '../common/create-title'
@@ -149,10 +150,12 @@ class Store {
     const initItem = getInitItem(arr, settingTab)
     return settingTab === settingMap.history
       ? arr
-      : [
-          deepCopy(initItem),
-          ...arr
-        ]
+      : staticNewItemTabs.has(settingTab)
+        ? arr // Don't add initItem for these tabs, they will be handled separately
+        : [
+            deepCopy(initItem),
+            ...arr
+          ]
   }
 
   get terminalCommandSuggestions () {

package/client/store/tab.js

@@ -10,6 +10,7 @@ import {
   maxHistory
 } from '../common/constants'
 import { refs } from '../components/common/ref'
+import { message } from 'antd'
 import * as ls from '../common/safe-local-storage'
 import deepCopy from 'json-deep-copy'
 import generate from '../common/id-with-stamp'
@@ -312,6 +313,15 @@ export default Store => {
     index,
     batch
   ) {
+    if (
+      (!newTab.type || newTab.type === 'local') &&
+      !newTab.host &&
+      !window.store.hasNodePty
+    ) {
+      return message.warning(
+        'local terminal is not supported, due to node-pty not working in this build'
+      )
+    }
     const { store } = window
     const { tabs } = store
     newTab.tabCount = store.nextTabCount()

package/client/store/watch.js

@@ -40,6 +40,9 @@ export default store => {
 
   for (const name of dbNamesForWatch) {
     window[`watch${name}`] = autoRun(async () => {
+      if (window.migrating) {
+        return
+      }
       const old = refsStatic.get('oldState-' + name)
       const n = store.getItems(name)
       const { updated, added, removed } = dataCompare(
@@ -55,9 +58,10 @@ export default store => {
       for (const item of added) {
         await insert(name, item)
       }
+      const newOrder = (n || []).map(d => d.id)
       await update(
         `${name}:order`,
-        (n || []).map(d => d.id)
+        newOrder
       )
       refsStatic.add('oldState-' + name, deepCopy(n) || [])
       if (name === 'bookmarks') {

package/package.json

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