@electerm/electerm-react 1.34.30

package/client/components/sftp/transports-ui.jsx

@@ -0,0 +1,93 @@
+/**
+ * transporter UI component
+ */
+import { useRef, useEffect } from 'react'
+import Transport from './transport-action'
+import postMessage from '../../common/post-msg'
+import { transportTypes } from './transport-types'
+
+export default function TransportsUI (props) {
+  const {
+    transferList
+  } = props
+  const timer = useRef(null)
+  function onDestroy () {
+    clearTimeout(timer.current)
+  }
+  useEffect(() => {
+    return onDestroy
+  }, [])
+  const pauseAll = () => {
+    props.modifier({
+      pauseAll: true
+    })
+    postMessage({
+      action: transportTypes.pauseTransport,
+      ids: []
+    })
+  }
+  const resumeAll = () => {
+    props.modifier({
+      pauseAll: false
+    })
+    postMessage({
+      action: transportTypes.resumeTransport,
+      ids: []
+    })
+  }
+  const pauseOrResumeAll = () => {
+    if (props.pauseAll) {
+      return resumeAll()
+    }
+    return pauseAll()
+  }
+  const cancelAll = () => {
+    props.modifier({
+      pauseAll: false
+    })
+    postMessage({
+      action: transportTypes.cancelTransport,
+      ids: []
+    }, '*')
+  }
+
+  function onMessage (e) {
+    const action = e?.data?.action
+    const id = e?.data?.id
+    if (id === props.sessionId || id === 'all') {
+      switch (action) {
+        case transportTypes.cancelAll:
+          cancelAll()
+          break
+        case transportTypes.pauseOrResumeAll:
+          pauseOrResumeAll()
+          break
+        default:
+          break
+      }
+    }
+  }
+  function initEvent () {
+    window.addEventListener('message', onMessage)
+  }
+  function destroyEvents () {
+    window.removeEventListener('message', onMessage)
+  }
+  useEffect(() => {
+    initEvent()
+    return destroyEvents
+  }, [])
+  if (!transferList.length) {
+    return null
+  }
+  return transferList.map((t, i) => {
+    const { id } = t
+    return (
+      <Transport
+        {...props}
+        transfer={t}
+        key={id + ':tr:' + i}
+      />
+    )
+  })
+}

package/client/components/sftp/zip.js

@@ -0,0 +1,42 @@
+/**
+ * zip/unzip remote files
+ * should only support linux server
+ */
+
+import { runCmd } from '../terminal/terminal-apis'
+import { getFolderFromFilePath } from './file-read'
+import resolve from '../../common/resolve'
+import generate from '../../common/uid'
+
+const isRemote = true
+const temp = '/tmp'
+
+export async function zipCmd (pid, sessionId, filePath) {
+  // tar -czf bin.tar.gz bin
+  const id = generate()
+  const { path, name } = getFolderFromFilePath(filePath, isRemote)
+  const np = resolve(temp, `electerm-${id}.tar.gz`)
+  const cmd = `tar -C ${path} -czf ${np} ${name}`
+  await runCmd(pid, sessionId, cmd)
+  return np
+}
+
+export function unzipCmd (pid, sessionId, from, to) {
+  const cmd = `tar -xzf "${from}" -C "${to}"`
+  return runCmd(pid, sessionId, cmd)
+}
+
+export async function rmCmd (pid, sessionId, path) {
+  const cmd = `rm -rf "${path}"`
+  return runCmd(pid, sessionId, cmd)
+}
+
+export async function mvCmd (pid, sessionId, from, to) {
+  const cmd = `mv "${from}" "${to}"`
+  return runCmd(pid, sessionId, cmd)
+}
+
+export async function mkdirCmd (pid, sessionId, p) {
+  const cmd = `mkdir "${p}"`
+  return runCmd(pid, sessionId, cmd)
+}

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

@@ -0,0 +1,48 @@
+/**
+ * history select
+ */
+
+import { Component } from '../common/react-subx'
+import TreeList from '../setting-panel/tree-list'
+
+export default class BookmarkSelect extends Component {
+  render () {
+    const { store, from } = this.props
+    const {
+      listStyle,
+      openedSideBar,
+      expandedKeys
+    } = store
+    if (from === 'sidebar' && openedSideBar !== 'bookmarks') {
+      return null
+    }
+    const onClickItem = (item) => {
+      if (!store.pinned) {
+        store.setOpenedSideBar('')
+      }
+      store.onSelectBookmark(item.id)
+    }
+    const base = {
+      store,
+      bookmarks: [
+        ...(store.getBookmarks() || []),
+        ...store.sshConfigItems
+      ],
+      type: 'bookmarks',
+      onClickItem,
+      listStyle,
+      staticList: true
+    }
+    const propsTree = {
+      ...base,
+      shouldConfirmDel: true,
+      bookmarkGroups: store.getBookmarkGroupsTotal(),
+      expandedKeys
+    }
+    return (
+      <TreeList
+        {...propsTree}
+      />
+    )
+  }
+}

package/client/components/sidebar/bookmark.jsx

@@ -0,0 +1,82 @@
+/**
+ * history select
+ */
+
+import { Component } from '../common/react-subx'
+import BookmarkSelect from './bookmark-select'
+import { pick } from 'lodash-es'
+import { ArrowsAltOutlined, EditOutlined, PlusCircleOutlined, ShrinkOutlined, PushpinOutlined } from '@ant-design/icons'
+import { Tooltip } from 'antd'
+
+const { prefix } = window
+const c = prefix('common')
+const m = prefix('menu')
+const e = prefix('control')
+
+export default class BookmarkPanel extends Component {
+  render () {
+    const { props } = this
+    const { store } = props
+    const prps = {
+      className: 'font16 mg1x mg2l pointer iblock control-icon'
+    }
+    const prps1 = {
+      className: prps.className + (store.pinned ? ' pinned' : '')
+    }
+    const pop1 = {
+      ...prps,
+      onClick: store.onNewSsh
+    }
+    const pop2 = {
+      ...prps,
+      onClick: store.expandBookmarks
+    }
+    const pop3 = {
+      ...prps,
+      onClick: store.collapseBookmarks
+    }
+    return (
+      <div
+        className='sidebar-panel bookmarks-panel animate-fast'
+        {...pick(props, ['onMouseEnter', 'onMouseLeave'])}
+      >
+        <div className='pd1y pd2t pd2x'>
+          <div className='fix'>
+            <div className='fleft'>{c('bookmarks')}</div>
+            <div className='fright'>
+              <Tooltip title={e('newBookmark')}>
+                <PlusCircleOutlined
+                  {...pop1}
+                />
+              </Tooltip>
+              <Tooltip title={`${m('edit')} ${c('bookmarks')}`}>
+                <EditOutlined
+                  {...pop1}
+                />
+              </Tooltip>
+              <Tooltip title={c('expandAll')}>
+                <ArrowsAltOutlined
+                  {...pop2}
+                />
+              </Tooltip>
+              <Tooltip title={c('collapseAll')}>
+                <ShrinkOutlined
+                  {...pop3}
+                />
+              </Tooltip>
+              <Tooltip title={c('pin')}>
+                <PushpinOutlined
+                  {...prps1}
+                  onClick={store.handlePin}
+                />
+              </Tooltip>
+            </div>
+          </div>
+        </div>
+        <div className='pd2x'>
+          <BookmarkSelect store={store} from='sidebar' />
+        </div>
+      </div>
+    )
+  }
+}

package/client/components/sidebar/history.jsx

@@ -0,0 +1,66 @@
+/**
+ * history select
+ */
+
+import { Component } from '../common/react-subx'
+import ItemList from '../setting-panel/list'
+import { pick } from 'lodash-es'
+import { EditOutlined, PushpinOutlined } from '@ant-design/icons'
+import { Tooltip } from 'antd'
+
+const { prefix } = window
+const c = prefix('common')
+const m = prefix('menu')
+
+export default class HistoryPanel extends Component {
+  render () {
+    const { props } = this
+    const { store } = props
+    const {
+      openedSideBar
+    } = store
+    if (openedSideBar !== 'history') {
+      return null
+    }
+    const prps = {
+      className: 'font16 mg1x mg2l pointer iblock control-icon'
+    }
+    const prps1 = {
+      className: prps.className + (store.pinned ? ' pinned' : '')
+    }
+    return (
+      <div
+        className='sidebar-panel history-panel animate-fast'
+        {...pick(props, ['onMouseEnter', 'onMouseLeave'])}
+      >
+        <div className='pd1y pd2t pd2x'>
+          <div className='fix'>
+            <div className='fleft'>{c('history')}</div>
+            <div className='fleft'>
+              <Tooltip title={`${m('edit')} ${c('history')}`}>
+                <EditOutlined
+                  className='font16 mg1x mg2l pointer iblock control-icon icon-do-edit'
+                  onClick={store.handleEditHistory}
+                />
+              </Tooltip>
+              <Tooltip title={c('pin')}>
+                <PushpinOutlined
+                  {...prps1}
+                  onClick={store.handlePin}
+                />
+              </Tooltip>
+            </div>
+          </div>
+        </div>
+        <div className='pd2x'>
+          <ItemList
+            type='history'
+            list={store.history || []}
+            onClickItem={item => store.onSelectHistory(item.id)}
+            activeItemId={store.activeItemId}
+          />
+        </div>
+      </div>
+    )
+  }
+}

package/client/components/sidebar/index.jsx

@@ -0,0 +1,230 @@
+import {
+  BookOutlined,
+  ClockCircleOutlined,
+  CloudSyncOutlined,
+  InfoCircleOutlined,
+  PictureOutlined,
+  PlusCircleOutlined,
+  SettingOutlined,
+  UpCircleOutlined,
+  BarsOutlined
+} from '@ant-design/icons'
+
+import { Tooltip } from 'antd'
+import { Component } from '../common/react-subx'
+import BookMarksWrap from './bookmark'
+import HistoryWrap from './history'
+import TransferList from './transfer-list'
+import MenuBtn from '../context-menu/menu-btn'
+import InfoModal from './info-modal'
+import {
+  sidebarWidth,
+  settingMap,
+  modals
+} from '../../common/constants'
+import SideIcon from './side-icon'
+import './sidebar.styl'
+
+const { prefix } = window
+const e = prefix('control')
+const c = prefix('common')
+const m = prefix('menu')
+const t = prefix('terminalThemes')
+const u = prefix('updater')
+const ss = prefix('settingSync')
+const b = prefix('batchOp')
+
+export default class Sidebar extends Component {
+  handler = null
+
+  handleMouseLeave = () => {
+    if (this.props.store.pinned) {
+      return false
+    }
+    const interval = 400
+    this.handler = setTimeout(
+      () => this.props.store.setOpenedSideBar(''),
+      interval
+    )
+  }
+
+  handleMouseEnterBookmark = () => {
+    if (this.props.store.pinned) {
+      return false
+    }
+    clearTimeout(this.handler)
+    this.props.store.setOpenedSideBar('bookmarks')
+  }
+
+  handleMouseEnterHistory = () => {
+    if (this.props.store.pinned) {
+      return false
+    }
+    clearTimeout(this.handler)
+    this.props.store.setOpenedSideBar('history')
+  }
+
+  handleShowUpgrade = () => {
+    this.props.store.storeAssign({
+      _upgradeInfo: JSON.stringify({
+        ...this.props.store.upgradeInfo,
+        showUpgradeModal: true
+      })
+    })
+  }
+
+  render () {
+    const { store } = this.props
+    const {
+      openedSideBar,
+      onNewSsh,
+      openSetting,
+      openAbout,
+      openSettingSync,
+      height,
+      openTerminalThemes,
+      upgradeInfo,
+      onClickBookmark,
+      onClickHistory,
+      toggleBatchOp,
+      settingTab,
+      showModal,
+      showInfoModal,
+      settingItem,
+      isSyncingSetting
+    } = store
+    const {
+      showUpgradeModal,
+      upgradePercent,
+      checkingRemoteVersion,
+      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
+    const historyActive = showSetting && settingTab === settingMap.history
+    const bookmarksActive = showSetting && settingTab === settingMap.bookmarks
+    return (
+      <div
+        className={`sidebar type-${openedSideBar}`}
+        style={{
+          width: sidebarWidth,
+          height
+        }}
+      >
+        <div className='sidebar-bar btns'>
+          <div className='control-icon-wrap'>
+            <MenuBtn store={store} />
+          </div>
+          <SideIcon
+            title={e('newBookmark')}
+          >
+            <PlusCircleOutlined
+              className='font22 iblock control-icon'
+              onClick={onNewSsh}
+            />
+          </SideIcon>
+          <SideIcon
+            title={c(settingMap.bookmarks)}
+            active={bookmarksActive}
+          >
+            <BookOutlined
+              onMouseEnter={this.handleMouseEnterBookmark}
+              onMouseLeave={this.handleMouseLeave}
+              onClick={onClickBookmark}
+              className='font20 iblock control-icon'
+            />
+          </SideIcon>
+          <SideIcon
+            title={c(settingMap.history)}
+            active={historyActive}
+          >
+            <ClockCircleOutlined
+              onMouseEnter={this.handleMouseEnterHistory}
+              onMouseLeave={this.handleMouseLeave}
+              onClick={onClickHistory}
+              className='font20 iblock control-icon'
+            />
+          </SideIcon>
+          <TransferList store={store} />
+          <SideIcon
+            title={t(settingMap.terminalThemes)}
+            active={themeActive}
+          >
+            <PictureOutlined
+              className='font20 iblock pointer control-icon'
+              onClick={openTerminalThemes}
+            />
+          </SideIcon>
+          <SideIcon
+            title={c(settingMap.setting)}
+            active={settingActive}
+          >
+            <SettingOutlined className='iblock font20 control-icon' onClick={openSetting} />
+          </SideIcon>
+          <SideIcon
+            title={ss('settingSync')}
+            active={syncActive}
+          >
+            <CloudSyncOutlined
+              className='iblock font20 control-icon'
+              onClick={openSettingSync}
+              spin={isSyncingSetting}
+            />
+          </SideIcon>
+          <SideIcon
+            title={b('batchOp')}
+            active={showBatchOp}
+          >
+            <BarsOutlined className='iblock font20 control-icon' onClick={toggleBatchOp} />
+          </SideIcon>
+          <SideIcon
+            title={m('about')}
+            active={showInfoModal}
+          >
+            <InfoCircleOutlined
+              className='iblock font16 control-icon open-about-icon'
+              onClick={openAbout}
+            />
+          </SideIcon>
+          {
+            !checkingRemoteVersion && !showUpgradeModal && shouldUpgrade
+              ? (
+                <Tooltip
+                  title={`${u('upgrading')} ${upgradePercent || 0}%`}
+                  placement='right'
+                >
+                  <div
+                    className='control-icon-wrap'
+                  >
+                    <UpCircleOutlined
+                      className='iblock font18 control-icon hvr-bob upgrade-icon'
+                      onClick={this.handleShowUpgrade}
+                    />
+                  </div>
+                </Tooltip>
+                )
+              : null
+          }
+        </div>
+        <InfoModal store={store} />
+        <div
+          className='sidebar-list'
+        >
+          <BookMarksWrap
+            store={store}
+            onMouseEnter={this.handleMouseEnterBookmark}
+            onMouseLeave={this.handleMouseLeave}
+          />
+          <HistoryWrap
+            store={store}
+            onMouseEnter={this.handleMouseEnterHistory}
+            onMouseLeave={this.handleMouseLeave}
+          />
+        </div>
+      </div>
+    )
+  }
+}