@electerm/electerm-react 2.3.136 → 2.3.166

package/client/components/setting-panel/setting-wrap.styl

@@ -1,18 +1,20 @@
 
-body .ant-drawer .ant-drawer-content-wrapper
-  left 43px
-.close-setting-wrap-icon
+
+.close-setting-wrap
   position absolute
   top 70px
   font-size 16px
   cursor pointer
   z-index 889
+  right 20px
   &:hover
     color var(--success)
 .alt-close-setting-wrap
-  right 20px
-.close-setting-wrap
-  top 70px
+  left 20px
+  right auto
+.batch-op-wrap .close-setting-wrap
+  top 40px
+  right 30px
 .setting-row
   position absolute
   top 127px

package/client/components/setting-panel/start-session-select.jsx

@@ -1,15 +1,27 @@
-import { TreeSelect } from 'antd'
-import { PureComponent } from 'react'
+import { TreeSelect, Tabs, Select, Empty } from 'antd'
+import { useState } from 'react'
 import copy from 'json-deep-copy'
 import { createTitleWithTag } from '../../common/create-title'
+import {
+  AppstoreOutlined,
+  BookOutlined
+} from '@ant-design/icons'
+import HelpIcon from '../common/help-icon'
 
 const e = window.translate
 const { SHOW_CHILD } = TreeSelect
 
-export default class StartSessionSelect extends PureComponent {
-  buildData = () => {
-    const cats = this.props.bookmarkGroups
-    const tree = this.props.bookmarks
+function BookmarkSelect (props) {
+  const {
+    bookmarks,
+    bookmarkGroups,
+    onStartSessions,
+    onChangeStartSessions
+  } = props
+
+  const buildData = () => {
+    const cats = bookmarkGroups
+    const tree = bookmarks
       .reduce((p, k) => {
         return {
           ...p,
@@ -64,28 +76,141 @@ export default class StartSessionSelect extends PureComponent {
             ...(d.bookmarkIds || []).map(buildLeaf)
           ].filter(d => d)
         }
-        // if (!r.children.length) {
-        //   return ''
-        // }
         return r
       }).filter(d => d)
     return level1
   }
 
-  render () {
-    const rProps = {
-      treeData: this.buildData(),
-      value: copy(this.props.onStartSessions || []),
-      onChange: this.props.onChangeStartSessions,
-      treeCheckable: true,
-      showCheckedStrategy: SHOW_CHILD,
-      placeholder: e('pleaseSelect'),
-      style: {
-        width: '100%'
-      }
+  // onStartSessions is array for bookmarks
+  const value = Array.isArray(onStartSessions) ? onStartSessions : []
+
+  const rProps = {
+    treeData: buildData(),
+    value: copy(value),
+    onChange: onChangeStartSessions,
+    treeCheckable: true,
+    showCheckedStrategy: SHOW_CHILD,
+    placeholder: e('pleaseSelect'),
+    style: {
+      width: '100%'
     }
+  }
+  return (
+    <TreeSelect {...rProps} />
+  )
+}
+
+function WorkspaceSelect (props) {
+  const {
+    workspaces,
+    onStartSessions,
+    onChangeStartSessions
+  } = props
+
+  if (!workspaces.length) {
     return (
-      <TreeSelect {...rProps} />
+      <Empty
+        image={Empty.PRESENTED_IMAGE_SIMPLE}
+        description={e('noWorkspaces')}
+      />
     )
   }
+
+  // onStartSessions is string for workspace
+  const value = typeof onStartSessions === 'string' ? onStartSessions : undefined
+
+  return (
+    <Select
+      value={value}
+      onChange={onChangeStartSessions}
+      placeholder={e('workspaces')}
+      style={{ width: '100%' }}
+      allowClear
+    >
+      {workspaces.map(w => (
+        <Select.Option key={w.id} value={w.id}>
+          {w.name}
+        </Select.Option>
+      ))}
+    </Select>
+  )
+}
+
+export default function StartSessionSelect (props) {
+  const {
+    onStartSessions,
+    bookmarks,
+    bookmarkGroups,
+    workspaces,
+    onChangeStartSessions
+  } = props
+
+  // Determine initial tab based on what's configured
+  // string = workspace, array = bookmarks
+  const getInitialTab = () => {
+    if (typeof onStartSessions === 'string' && onStartSessions) {
+      return 'workspaces'
+    }
+    return 'bookmarks'
+  }
+
+  const [activeTab, setActiveTab] = useState(getInitialTab)
+
+  // When switching tabs, clear the value if needed
+  const handleTabChange = (key) => {
+    setActiveTab(key)
+    // Reset to appropriate default when switching
+    if (key === 'bookmarks' && typeof onStartSessions === 'string') {
+      onChangeStartSessions([])
+    } else if (key === 'workspaces' && Array.isArray(onStartSessions)) {
+      onChangeStartSessions(undefined)
+    }
+  }
+
+  const tabItems = [
+    {
+      key: 'bookmarks',
+      label: (
+        <span>
+          <BookOutlined /> {e('bookmarks')}
+        </span>
+      )
+    },
+    {
+      key: 'workspaces',
+      label: (
+        <span>
+          <AppstoreOutlined /> {e('workspaces')}
+          <HelpIcon link='https://github.com/electerm/electerm/wiki/Workspace-Feature' />
+        </span>
+      )
+    }
+  ]
+
+  return (
+    <div>
+      <Tabs
+        items={tabItems}
+        size='small'
+        activeKey={activeTab}
+        onChange={handleTabChange}
+      />
+      {activeTab === 'bookmarks'
+        ? (
+          <BookmarkSelect
+            bookmarks={bookmarks}
+            bookmarkGroups={bookmarkGroups}
+            onStartSessions={onStartSessions}
+            onChangeStartSessions={onChangeStartSessions}
+          />
+          )
+        : (
+          <WorkspaceSelect
+            workspaces={workspaces}
+            onStartSessions={onStartSessions}
+            onChangeStartSessions={onChangeStartSessions}
+          />
+          )}
+    </div>
+  )
 }

package/client/components/setting-panel/text-bg-modal.jsx

@@ -1,12 +1,13 @@
 import React, { useState } from 'react'
 import {
-  Modal,
   Input,
   InputNumber,
   Space,
   Typography,
-  Select
+  Select,
+  Button
 } from 'antd'
+import Modal from '../common/modal'
 import { ColorPicker } from '../bookmark-form/common/color-picker.jsx'
 
 const { TextArea } = Input
@@ -47,14 +48,24 @@ export default function TextBgModal ({
     setFontFamily(initialFontFamily)
   }
 
+  const footer = (
+    <>
+      <Button onClick={handleCancel}>
+        {e('cancel')}
+      </Button>
+      <Button type='primary' onClick={handleOk} className='mg1l'>
+        {e('ok')}
+      </Button>
+    </>
+  )
+
   return (
     <Modal
       title={e('terminalBackgroundText')}
       open={visible}
-      onOk={handleOk}
       onCancel={handleCancel}
       width={500}
-      destroyOnHidden
+      footer={footer}
     >
       <div className='pd1'>
         <Space direction='vertical' size='large' style={{ width: '100%' }}>

package/client/components/sftp/file-info-modal.jsx

@@ -3,7 +3,8 @@
  */
 
 import React from 'react'
-import { Modal, Button } from 'antd'
+import { Button } from 'antd'
+import Modal from '../common/modal'
 import resolve from '../../common/resolve'
 import time from '../../common/time'
 import { update } from 'lodash-es'

package/client/components/sftp/file-item.jsx

@@ -183,6 +183,7 @@ export default class FileSection extends React.Component {
         toPath,
         id: generate(),
         host: this.props.tab?.host,
+        tabType: this.props.tab?.type,
         ...createTransferProps(this.props),
         operation
       })
@@ -736,6 +737,7 @@ export default class FileSection extends React.Component {
     toPath = resolve(toPath, name)
     const obj = {
       host: this.props.tab?.host,
+      tabType: this.props.tab?.type,
       typeFrom: type,
       typeTo,
       fromPath: resolve(path, name),

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

@@ -37,8 +37,9 @@ export default class ScrollFiles extends Component {
       current: this.state.page,
       pageSize: this.state.pageSize,
       total: this.props.list.length,
+      showLessItems: true,
       showSizeChanger: false,
-      simple: true,
+      simple: false,
       onChange: this.onChange
     }
     return (

package/client/components/sftp/sftp-entry.jsx

@@ -63,7 +63,7 @@ export default class Sftp extends Component {
       this.setState({
         ready: true
       })
-    }, 100)
+    }, 0)
   }
 
   componentDidUpdate (prevProps, prevState) {

package/client/components/sftp/sftp.styl

@@ -164,6 +164,19 @@
 .pager-wrap
   z-index 4
   position relative
+
+.sftp-has-pager
+  .sftp-table-content
+    position static
+    padding-bottom 42px
+  .pager-wrap
+    position absolute
+    bottom 0
+    left 0
+    width 100%
+    background var(--main)
+    border-top 1px solid var(--main-darker)
+
 .file-header-context-menu
   position fixed
   z-index 999

package/client/components/sidebar/info-modal.jsx

@@ -8,10 +8,10 @@ import {
   InfoCircleOutlined,
   AlignLeftOutlined,
   BugOutlined,
-  HeartOutlined,
-  JavaScriptOutlined
+  HeartOutlined
 } from '@ant-design/icons'
-import { Modal, Tabs, Button } from 'antd'
+import { Tabs, Button } from 'antd'
+import Modal from '../common/modal'
 import Link from '../common/external-link'
 import LogoElem from '../common/logo-elem'
 import RunningTime from './app-running-time'
@@ -55,8 +55,48 @@ export default auto(function InfoModal (props) {
     )
   }
 
-  const formatJSON = (jsonStr) => {
-    return JSON.stringify(JSON.parse(jsonStr), null, 2)
+  const renderParsed = (obj, depth = 0) => {
+    if (Array.isArray(obj)) {
+      return (
+        <ul className='pd2l'>
+          {obj.map((item, i) => (
+            <li key={i}>{renderParsed(item, depth + 1)}</li>
+          ))}
+        </ul>
+      )
+    } else if (typeof obj === 'object' && obj !== null) {
+      return (
+        <div className={depth > 0 ? 'pd2l' : ''}>
+          {Object.entries(obj).map(([k, v]) => (
+            <div key={k} className='pd1b'>
+              <b>{k}:</b> {renderParsed(v, depth + 1)}
+            </div>
+          ))}
+        </div>
+      )
+    } else {
+      return <span>{String(obj)}</span>
+    }
+  }
+
+  const renderValue = (v) => {
+    try {
+      const parsed = JSON.parse(v)
+      return renderParsed(parsed)
+    } catch {
+      return <span>{v}</span>
+    }
+  }
+
+  const renderOSInfo = () => {
+    return window.pre.osInfo().map(({ k, v }, i) => (
+      <div className='pd1b' key={i + '_os_' + k}>
+        <b className='bold'>{k}:</b>
+        <span className='mg1l'>
+          {renderValue(v)}
+        </span>
+      </div>
+    ))
   }
 
   const { infoModalTab, commandLineHelp } = props
@@ -100,7 +140,7 @@ export default auto(function InfoModal (props) {
     ...env
   }
   const title = (
-    <div className='ant-modal-confirm-title font16'>
+    <div className='custom-modal-close-confirm-title font16'>
       <InfoCircleOutlined className='font20 mg1r' /> {e('about')} {name}
     </div>
   )
@@ -108,9 +148,7 @@ export default auto(function InfoModal (props) {
     title,
     width: window.innerWidth - 100,
     maskClosable: true,
-    okText: e('ok'),
     onCancel: onCloseAbout,
-    footer: null,
     open: true,
     wrapClassName: 'info-modal'
   }
@@ -123,18 +161,18 @@ export default auto(function InfoModal (props) {
           <LogoElem />
           <p className='mg2b'>{e('desc')}</p>
           <RunningTime />
-          <p className='mg1b'>
-            <UserOutlined /> <b className='mg1r'>{e('author')} ➾</b>
-            <Link to={authorUrl} className='mg1l'>
-              {authorName} ({email})
-            </Link>
-          </p>
           <p className='mg1b'>
             <HomeOutlined /> <b>{e('homepage')}/{e('download')} ➾</b>
             <Link to={homepage} className='mg1l'>
               {homepage}
             </Link>
           </p>
+          <p className='mg1b'>
+            <UserOutlined /> <b className='mg1r'>{e('author')} ➾</b>
+            <Link to={authorUrl} className='mg1l'>
+              {authorName} ({email})
+            </Link>
+          </p>
           <p className='mg1b'>
             <GithubOutlined /> <b className='mg1r'>github ➾</b>
             <Link to={link} className='mg1l'>
@@ -180,12 +218,6 @@ export default auto(function InfoModal (props) {
           <p className='mg1b'>
             <InfoCircleOutlined /> <b className='mg1r'>{window.store.installSrc}</b>
           </p>
-          <p className='mg1b'>
-            <JavaScriptOutlined /> <b className='mg1r'>Powered by</b>
-            <Link to='https://github.com/tylerlong/manate'>
-              manate
-            </Link>
-          </p>
           {renderCheckUpdate()}
         </>
       )
@@ -223,20 +255,7 @@ export default auto(function InfoModal (props) {
     {
       key: infoTabs.os,
       label: e('os'),
-      children: window.pre.osInfo().map(({ k, v }, i) => {
-        return (
-          <div className='pd1b' key={i + '_os_' + k}>
-            <b className='bold'>{k}</b>:
-            <span className='mg1l'>
-              {
-                v.length > 30
-                  ? <pre>{formatJSON(v)}</pre>
-                  : v
-              }
-            </span>
-          </div>
-        )
-      })
+      children: <div>{renderOSInfo()}</div>
     }
   ]
 

package/client/components/sidebar/info.styl

@@ -5,10 +5,3 @@
   border-radius 60% 40% 30% 70% / 60% 30% 70% 40%
   transition all 1s ease-in-out
   z-index 5
-
-.info-modal
-  .ant-modal-header
-    border none
-  .ant-modal-body
-    padding 52px
-    padding-top 0

package/client/components/tabs/index.jsx

@@ -12,26 +12,16 @@ import {
   LeftOutlined,
   RightOutlined
 } from '@ant-design/icons'
-import {
-  SingleIcon,
-  TwoColumnsIcon,
-  ThreeColumnsIcon,
-  TwoRowsIcon,
-  ThreeRowsIcon,
-  Grid2x2Icon,
-  TwoRowsRightIcon,
-  TwoColumnsBottomIcon
-} from '../icons/split-icons'
 import { Dropdown } from 'antd'
 import Tab from './tab'
+import LayoutMenu from './layout-menu'
 import './tabs.styl'
 import {
   tabWidth,
   tabMargin,
   extraTabWidth,
   windowControlWidth,
-  isMacJs,
-  splitMapDesc
+  isMacJs
 } from '../../common/constants'
 import WindowControl from './window-control'
 import AddBtn from './add-btn'
@@ -39,8 +29,6 @@ import AppDrag from './app-drag'
 import NoSession from './no-session'
 import classNames from 'classnames'
 
-const e = window.translate
-
 export default class Tabs extends Component {
   constructor (props) {
     super(props)
@@ -183,10 +171,6 @@ export default class Tabs extends Component {
     window.store['activeTabId' + this.props.batch] = id
   }
 
-  handleChangeLayout = ({ key }) => {
-    window.store.setLayout(key)
-  }
-
   renderAddBtn = () => {
     const cls = classNames(
       'pointer tabs-add-btn font16',
@@ -324,48 +308,12 @@ export default class Tabs extends Component {
     )
   }
 
-  getLayoutIcon = (layout) => {
-    const iconMaps = {
-      single: SingleIcon,
-      twoColumns: TwoColumnsIcon,
-      threeColumns: ThreeColumnsIcon,
-      twoRows: TwoRowsIcon,
-      threeRows: ThreeRowsIcon,
-      grid2x2: Grid2x2Icon,
-      twoRowsRight: TwoRowsRightIcon,
-      twoColumnsBottom: TwoColumnsBottomIcon
-    }
-    return iconMaps[layout]
-  }
-
   renderLayoutMenu = () => {
-    if (!this.shouldRenderWindowControl()) {
-      return null
-    }
-    const items = Object.keys(splitMapDesc).map((t) => {
-      const v = splitMapDesc[t]
-      const Icon = this.getLayoutIcon(v)
-      return {
-        key: t,
-        label: (
-          <span>
-            <Icon /> {e(v)}
-          </span>
-        ),
-        onClick: () => this.handleChangeLayout({ key: t })
-      }
-    })
-    const v = splitMapDesc[this.props.layout]
-    const Icon = this.getLayoutIcon(v)
     return (
-      <Dropdown
-        menu={{ items }}
-        placement='bottomRight'
-      >
-        <span className='tabs-dd-icon layout-dd-icon mg1l'>
-          <Icon /> <DownOutlined />
-        </span>
-      </Dropdown>
+      <LayoutMenu
+        layout={this.props.layout}
+        visible={this.shouldRenderWindowControl()}
+      />
     )
   }
 

package/client/components/tabs/layout-menu.jsx

@@ -0,0 +1,75 @@
+/**
+ * Layout and Workspace menu dropdown component
+ */
+
+import React, { useState } from 'react'
+import { Dropdown, Tabs } from 'antd'
+import {
+  DownOutlined,
+  AppstoreOutlined,
+  LayoutOutlined
+} from '@ant-design/icons'
+import { splitMapDesc } from '../../common/constants'
+import LayoutSelect, { getLayoutIcon } from './layout-select'
+import WorkspaceSelect from './workspace-select'
+import HelpIcon from '../common/help-icon'
+
+const e = window.translate
+
+export default function LayoutMenu (props) {
+  const { layout, visible } = props
+  const [activeTab, setActiveTab] = useState('layout')
+
+  if (!visible) {
+    return null
+  }
+
+  const tabItems = [
+    {
+      key: 'layout',
+      label: (
+        <span>
+          <LayoutOutlined /> {e('layout')}
+        </span>
+      )
+    },
+    {
+      key: 'workspaces',
+      label: (
+        <span>
+          <AppstoreOutlined /> {e('workspaces')}
+          <HelpIcon link='https://github.com/electerm/electerm/wiki/Workspace-Feature' />
+        </span>
+      )
+    }
+  ]
+
+  const v = splitMapDesc[layout]
+  const Icon = getLayoutIcon(v)
+
+  const dropdownContent = (
+    <div className='layout-workspace-dropdown'>
+      <Tabs
+        items={tabItems}
+        size='small'
+        activeKey={activeTab}
+        onChange={setActiveTab}
+      />
+      {activeTab === 'layout'
+        ? <LayoutSelect layout={layout} />
+        : <WorkspaceSelect store={window.store} />}
+    </div>
+  )
+
+  return (
+    <Dropdown
+      popupRender={() => dropdownContent}
+      placement='bottomRight'
+      trigger={['click']}
+    >
+      <span className='tabs-dd-icon layout-dd-icon mg1l'>
+        <Icon /> <DownOutlined />
+      </span>
+    </Dropdown>
+  )
+}