@electerm/electerm-react 2.3.198 → 2.4.18

package/client/components/common/modal.jsx

@@ -5,6 +5,8 @@
 
 import { CloseOutlined } from '@ant-design/icons'
 import classnames from 'classnames'
+import React, { useEffect } from 'react'
+import { createRoot } from 'react-dom/client'
 import './modal.styl'
 
 export default function Modal (props) {
@@ -51,6 +53,36 @@ export default function Modal (props) {
     className
   )
 
+  useEffect(() => {
+    if (!open) return
+
+    const handleKeyDown = (e) => {
+      const isConfirm = !!document.querySelector('.custom-modal-cancel-btn')
+      if (e.key === 'Escape') {
+        if (onCancel) {
+          onCancel()
+          e.preventDefault()
+        }
+      } else if ((e.key === 'Enter' || e.key === ' ') && !isConfirm) {
+        // For info, Enter/Space closes
+        if (onCancel) {
+          onCancel()
+          e.preventDefault()
+        }
+      } else if ((e.key === 'Enter' || e.key === ' ') && isConfirm) {
+        // For confirm, Enter/Space confirms
+        const okBtn = document.querySelector('.custom-modal-ok-btn')
+        if (okBtn) {
+          okBtn.click()
+          e.preventDefault()
+        }
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [open, onCancel])
+
   return (
     <div className={cls} style={modalStyle}>
       <div
@@ -87,3 +119,147 @@ export default function Modal (props) {
     </div>
   )
 }
+
+function createModalInstance (type, options) {
+  const {
+    title,
+    content,
+    okText = 'OK',
+    cancelText = 'Cancel',
+    onOk,
+    onCancel,
+    ...rest
+  } = options
+
+  const container = document.createElement('div')
+  document.body.appendChild(container)
+
+  const root = createRoot(container)
+
+  const destroy = () => {
+    if (root && container && container.parentNode) {
+      root.unmount()
+      document.body.removeChild(container)
+    }
+  }
+
+  const handleOk = () => {
+    if (onOk) {
+      onOk()
+    }
+    destroy()
+  }
+
+  const handleCancel = () => {
+    if (onCancel) {
+      onCancel()
+    }
+    destroy()
+  }
+
+  const hasCancel = type === 'confirm'
+
+  const footer = (
+    <div className='custom-modal-footer-buttons'>
+      {hasCancel && (
+        <button
+          type='button'
+          className='custom-modal-cancel-btn'
+          onClick={handleCancel}
+        >
+          {cancelText}
+        </button>
+      )}
+      <button
+        type='button'
+        className='custom-modal-ok-btn'
+        onClick={handleOk}
+      >
+        {okText}
+      </button>
+    </div>
+  )
+
+  const modalProps = {
+    ...rest,
+    title,
+    open: true,
+    onCancel: hasCancel ? handleCancel : destroy,
+    footer,
+    children: content
+  }
+
+  root.render(<Modal {...modalProps} />)
+
+  const update = (newOptions) => {
+    const updatedOptions = { ...options, ...newOptions }
+    const {
+      title: newTitle,
+      content: newContent,
+      okText: newOkText = 'OK',
+      cancelText: newCancelText = 'Cancel',
+      onOk: newOnOk,
+      onCancel: newOnCancel,
+      ...newRest
+    } = updatedOptions
+
+    const newHandleOk = () => {
+      if (newOnOk) {
+        newOnOk()
+      }
+      destroy()
+    }
+
+    const newHandleCancel = () => {
+      if (newOnCancel) {
+        newOnCancel()
+      }
+      destroy()
+    }
+
+    const newFooter = (
+      <div className='custom-modal-footer-buttons'>
+        {hasCancel && (
+          <button
+            type='button'
+            className='custom-modal-cancel-btn'
+            onClick={newHandleCancel}
+          >
+            {newCancelText}
+          </button>
+        )}
+        <button
+          type='button'
+          className='custom-modal-ok-btn'
+          onClick={newHandleOk}
+        >
+          {newOkText}
+        </button>
+      </div>
+    )
+
+    const newModalProps = {
+      ...newRest,
+      title: newTitle,
+      open: true,
+      onCancel: hasCancel ? newHandleCancel : destroy,
+      footer: newFooter,
+      children: newContent
+    }
+
+    root.render(<Modal {...newModalProps} />)
+  }
+
+  return {
+    destroy,
+    update
+  }
+}
+
+Modal.info = (options) => {
+  return createModalInstance('info', options)
+}
+
+Modal.confirm = (options) => {
+  return createModalInstance('confirm', options)
+}

package/client/components/common/modal.styl

@@ -75,3 +75,25 @@
   padding 12px 24px
   border-top 1px solid var(--main-darker)
   text-align right
+
+.custom-modal-footer-buttons
+  display flex
+  justify-content flex-end
+  gap 8px
+
+.custom-modal-ok-btn,
+.custom-modal-cancel-btn
+  padding 6px 16px
+  border none
+  border-radius 4px
+  cursor pointer
+  font-size 14px
+  transition background-color 0.2s
+
+.custom-modal-ok-btn
+  background var(--primary)
+  color var(--primary-contrast)
+
+.custom-modal-cancel-btn
+  background var(--main)
+  color var(--text)

package/client/components/common/notification-with-details.jsx

@@ -1,4 +1,4 @@
-import { notification } from 'antd'
+import { notification } from './notification'
 import { CopyOutlined } from '@ant-design/icons'
 import { copy } from '../../common/clipboard'
 

package/client/components/common/notification.jsx

@@ -0,0 +1,118 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { CloseOutlined } from '@ant-design/icons'
+import classnames from 'classnames'
+import generateId from '../../common/uid'
+import { messageIcons } from '../../common/icon-helpers.jsx'
+import './notification.styl'
+
+const notifications = []
+const NOTIFICATION_EVENT = 'notification-update'
+
+function addNotification (notif) {
+  notifications.push(notif)
+  window.dispatchEvent(new CustomEvent(NOTIFICATION_EVENT))
+}
+
+function removeNotification (key) {
+  const index = notifications.findIndex(n => n.key === key)
+  if (index > -1) {
+    notifications.splice(index, 1)
+    window.dispatchEvent(new CustomEvent(NOTIFICATION_EVENT))
+  }
+}
+
+export const notification = {
+  success: (options) => {
+    addNotification({ ...options, type: 'success', key: options.key || generateId() })
+  },
+  error: (options) => {
+    addNotification({ ...options, type: 'error', key: options.key || generateId() })
+  },
+  warning: (options) => {
+    addNotification({ ...options, type: 'warning', key: options.key || generateId() })
+  },
+  info: (options) => {
+    addNotification({ ...options, type: 'info', key: options.key || generateId() })
+  },
+  destroy: (key) => {
+    if (key) {
+      removeNotification(key)
+    } else {
+      notifications.length = 0
+      window.dispatchEvent(new CustomEvent(NOTIFICATION_EVENT))
+    }
+  }
+}
+
+export function NotificationContainer () {
+  const [nots, setNots] = useState([...notifications])
+
+  useEffect(() => {
+    const handler = () => setNots([...notifications])
+    window.addEventListener(NOTIFICATION_EVENT, handler)
+    return () => window.removeEventListener(NOTIFICATION_EVENT, handler)
+  }, [])
+
+  return (
+    <div className='notification-container'>
+      {nots.map(notif => (
+        <NotificationItem
+          key={notif.key}
+          message={notif.message}
+          description={notif.description}
+          type={notif.type}
+          duration={notif.duration}
+          onClose={() => removeNotification(notif.key)}
+        />
+      ))}
+    </div>
+  )
+}
+
+function NotificationItem ({ message, description, type, onClose, duration = 18.5 }) {
+  const timeoutRef = useRef(null)
+
+  useEffect(() => {
+    if (duration > 0) {
+      timeoutRef.current = setTimeout(onClose, duration * 1000)
+    }
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+        timeoutRef.current = null
+      }
+    }
+  }, [])
+
+  const handleMouseEnter = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+      timeoutRef.current = null
+    }
+  }
+
+  const handleMouseLeave = () => {
+    if (duration > 0 && !timeoutRef.current) {
+      timeoutRef.current = setTimeout(onClose, duration * 1000)
+    }
+  }
+
+  const className = classnames('notification', type)
+
+  return (
+    <div
+      className={className}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <div className='notification-content'>
+        <div className='notification-message'>
+          <div className='notification-icon'>{messageIcons[type]}</div>
+          <div className='notification-title' title={message}>{message}</div>
+        </div>
+        {description && <div className='notification-description'>{description}</div>}
+      </div>
+      <CloseOutlined className='notification-close' onClick={onClose} />
+    </div>
+  )
+}

package/client/components/common/notification.styl

@@ -0,0 +1,51 @@
+.notification-container
+  position fixed
+  bottom 20px
+  right 20px
+  z-index 1000
+
+.notification
+  background var(--main-lighter)
+  color var(--text)
+  border-radius 4px
+  margin-bottom 10px
+  padding 12px 16px
+  box-shadow 0 4px 12px rgba(0, 0, 0, 0.15)
+  width 400px
+  position relative
+
+.notification-content
+  width 100%
+
+.notification-message
+  font-weight bold
+  margin-bottom 10px
+.notification-title
+  overflow hidden
+  text-overflow ellipsis
+  white-space nowrap
+  padding 0 30px 0 20px
+
+.notification-icon
+  font-size 16px
+  position absolute
+  left 12px
+  top 10px
+
+.notification-description
+  word-wrap break-all
+  max-height 200px
+  overflow auto
+
+.notification-close
+  position absolute
+  top 12px
+  right 12px
+  background none
+  border none
+  color var(--text-dark)
+  font-size 18px
+  cursor pointer
+  padding 0
+  &:hover
+    color var(--text)

package/client/components/main/connection-hopping-warnning.jsx

@@ -1,8 +1,6 @@
 import { useEffect } from 'react'
 import ConnectionHoppingWarningText from '../common/connection-hopping-warning-text'
-import {
-  notification
-} from 'antd'
+import { notification } from '../common/notification'
 import * as ls from '../../common/safe-local-storage'
 import {
   connectionHoppingWarnKey

package/client/components/main/error-wrapper.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { FrownOutlined, ReloadOutlined } from '@ant-design/icons'
-import { Button, message } from 'antd'
+import { Button } from 'antd'
+import message from '../common/message'
 import {
   logoPath1,
   packInfo,
@@ -41,7 +42,7 @@ export default class ErrorBoundary extends React.PureComponent {
   }
 
   componentDidCatch (error) {
-    log.error(error)
+    console.error(error)
     this.setState({
       hasError: true,
       error

package/client/components/main/main.jsx

@@ -6,7 +6,7 @@ import UpdateCheck from './upgrade'
 import SettingModal from '../setting-panel/setting-modal'
 import TextEditor from '../text-editor/text-editor'
 import Sidebar from '../sidebar'
-import BatchOp from '../batch-op/batch-op-entry'
+import BatchOp from '../batch-op/batch-op'
 import CssOverwrite from '../bg/css-overwrite'
 import UiTheme from './ui-theme'
 import CustomCss from '../bg/custom-css.jsx'
@@ -21,7 +21,8 @@ import ShortcutControl from '../shortcuts/shortcut-control.jsx'
 import { isMac, isWin, textTerminalBgValue } from '../../common/constants'
 import TermFullscreenControl from './term-fullscreen-control'
 import TerminalInfo from '../terminal-info/terminal-info'
-import { ConfigProvider, notification, message } from 'antd'
+import { ConfigProvider } from 'antd'
+import { NotificationContainer } from '../common/notification'
 import InfoModal from '../sidebar/info-modal.jsx'
 import RightSidePanel from '../side-panel-r/side-panel-r'
 import ConnectionHoppingWarning from './connection-hopping-warnning'
@@ -37,19 +38,10 @@ import deepCopy from 'json-deep-copy'
 import './wrapper.styl'
 
 function setupGlobalMessageDismiss () {
-  document.addEventListener('click', (event) => {
-    const messageElement = event.target.closest('.ant-message-notice')
-    if (messageElement) {
-      message.destroy()
-    }
-  })
 }
 
 export default auto(function Index (props) {
   useEffect(() => {
-    notification.config({
-      placement: 'bottomRight'
-    })
     setupGlobalMessageDismiss()
     const { store } = props
     window.addEventListener('resize', store.onResize)
@@ -307,6 +299,7 @@ export default auto(function Index (props) {
         <TerminalCmdSuggestions {...cmdSuggestionsProps} />
         <TransferQueue />
         <WorkspaceSaveModal store={store} />
+        <NotificationContainer />
       </div>
     </ConfigProvider>
   )

package/client/components/main/upgrade.jsx

@@ -37,9 +37,6 @@ export default class Upgrade extends PureComponent {
     if (window.et.isWebApp) {
       return
     }
-    setTimeout(() => {
-      getLatestReleaseVersion(1)
-    }, 5000)
     this.id = 'upgrade'
     refsStatic.add(this.id, this)
   }
@@ -119,7 +116,12 @@ export default class Upgrade extends PureComponent {
       return window.store.addTab(
         {
           ...newTerm(undefined, true),
-          loginScript: 'npm i -g electerm'
+          runScripts: [
+            {
+              script: 'npm install -g electerm',
+              delay: 500
+            }
+          ]
         }
       )
     }

package/client/components/profile/profile-form-elem.jsx

@@ -1,10 +1,10 @@
 import { useState } from 'react'
 import {
   Form,
-  message,
   Switch,
   Button
 } from 'antd'
+import message from '../common/message'
 import InputAutoFocus from '../common/input-auto-focus'
 import { formItemLayout } from '../../common/form-layout'
 import HelpIcon from '../common/help-icon'

package/client/components/quick-commands/quick-commands-box.jsx

@@ -3,7 +3,7 @@
  */
 
 import { useState, useRef } from 'react'
-import { quickCommandLabelsLsKey } from '../../common/constants'
+import { quickCommandLabelsLsKey, pinnedQuickCommandBarKey } from '../../common/constants'
 import { sortBy } from 'lodash-es'
 import { Button, Input, Select, Space, Flex } from 'antd'
 import * as ls from '../../common/safe-local-storage'
@@ -41,7 +41,9 @@ export default function QuickCommandsFooterBox (props) {
   }
 
   function handleTogglePinned () {
-    window.store.pinnedQuickCommandBar = !window.store.pinnedQuickCommandBar
+    const current = !window.store.pinnedQuickCommandBar
+    ls.setItem(pinnedQuickCommandBarKey, current ? 'y' : 'n')
+    window.store.pinnedQuickCommandBar = current
   }
 
   async function handleSelect (id) {
@@ -56,6 +58,7 @@ export default function QuickCommandsFooterBox (props) {
   }
 
   function handleClose () {
+    ls.setItem(pinnedQuickCommandBarKey, 'n')
     window.store.pinnedQuickCommandBar = false
     window.store.openQuickCommandBar = false
   }

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

@@ -2,10 +2,10 @@ import {
   Button,
   Switch,
   Form,
-  message,
   Select,
   Input
 } from 'antd'
+import message from '../common/message'
 import { useState } from 'react'
 import generate from '../../common/uid'
 import InputAutoFocus from '../common/input-auto-focus'

package/client/components/rdp/rdp-session.jsx

@@ -7,11 +7,11 @@ import {
   statusMap
 } from '../../common/constants'
 import {
-  notification,
   Spin,
   // Button,
   Select
 } from 'antd'
+import { notification } from '../common/notification'
 import {
   ReloadOutlined,
   EditOutlined
@@ -246,7 +246,7 @@ export default class RdpSession extends PureComponent {
 
   onerrorSocket = err => {
     this.setStatus(statusMap.error)
-    log.error('socket error', err)
+    console.error('socket error', err)
   }
 
   closeMsg = () => {

package/client/components/session/session.jsx

@@ -17,7 +17,6 @@ import {
 } from '@ant-design/icons'
 import {
   Tooltip,
-  message,
   Splitter
 } from 'antd'
 import { pick } from 'lodash-es'
@@ -206,13 +205,9 @@ export default class SessionWrapper extends Component {
   }
 
   toggleCheckSftpPathFollowSsh = () => {
-    const nv = !this.state.sftpPathFollowSsh
-    if (nv) {
-      message.warning(e('sftpPathFollowSshTip'), 8)
-    }
-    this.setState({
-      sftpPathFollowSsh: nv
-    })
+    this.setState(prevState => ({
+      sftpPathFollowSsh: !prevState.sftpPathFollowSsh
+    }))
   }
 
   editTab = (up) => {
@@ -660,7 +655,7 @@ export default class SessionWrapper extends Component {
     const termType = tab?.type
     const isSsh = tab.authType
     const isLocal = !isSsh && (termType === connectionMap.local || !termType)
-    const checkTxt = e('sftpPathFollowSsh') + ' [Beta]'
+    const checkTxt = e('sftpPathFollowSsh')
     const checkProps = {
       onClick: this.toggleCheckSftpPathFollowSsh,
       className: classnames(

package/client/components/setting-panel/deep-link-control.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react'
-import { Button, message, Tooltip, Tag, Space } from 'antd'
+import { Button, Tooltip, Tag, Space } from 'antd'
+import message from '../common/message'
 import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons'
 
 const e = window.translate

package/client/components/setting-panel/keyword-input.jsx

@@ -0,0 +1,60 @@
+import { Input } from 'antd'
+import { CheckOutlined, CloseOutlined } from '@ant-design/icons'
+import { useState, useEffect } from 'react'
+
+export default function KeywordInput (props) {
+  const { value, onChange, addonBefore, ...rest } = props
+  const [localValue, setLocalValue] = useState(value || '')
+  const [isEditing, setIsEditing] = useState(false)
+
+  useEffect(() => {
+    setLocalValue(value || '')
+  }, [value])
+
+  function handleChange (e) {
+    const newValue = e.target.value
+    setLocalValue(newValue)
+    setIsEditing(true)
+  }
+
+  function handleConfirm () {
+    onChange(localValue)
+    setIsEditing(false)
+  }
+
+  function handleCancel () {
+    setLocalValue(value || '')
+    setIsEditing(false)
+  }
+
+  function handleBlur () {
+    // Optionally hide icons on blur, but since user might click icons, maybe not
+    // setIsEditing(false)
+  }
+
+  const addonAfter = isEditing
+    ? (
+      <div>
+        <CheckOutlined
+          onClick={handleConfirm}
+          className='mg1r pointer'
+        />
+        <CloseOutlined
+          onClick={handleCancel}
+          className='pointer'
+        />
+      </div>
+      )
+    : null
+
+  return (
+    <Input
+      value={localValue}
+      onChange={handleChange}
+      onBlur={handleBlur}
+      addonBefore={addonBefore}
+      addonAfter={addonAfter}
+      {...rest}
+    />
+  )
+}