@electerm/electerm-react 5.5.25 → 5.5.56

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

@@ -2,11 +2,13 @@
  * bookmark select
  */
 
+import { useState } from 'react'
 import { auto } from 'manate/react'
 import TreeList from '../tree-list/tree-list'
 
 export default auto(function BookmarkSelect (props) {
   const { store, from, autoFocus } = props
+  const [activeItemId, setActiveItemId] = useState('')
   const {
     listStyle,
     openedSideBar,
@@ -19,7 +21,7 @@ export default auto(function BookmarkSelect (props) {
   if (from === 'sidebar' && openedSideBar !== 'bookmarks') {
     return null
   }
-  const onClickItem = (item) => {
+  const openBookmark = (item) => {
     // A pinned (docked) panel stays open; anything else — including mobile,
     // where pinning is not a reachable mode — dismisses on selection.
     if (!(store.pinned && !store.isMobile)) {
@@ -27,10 +29,20 @@ export default auto(function BookmarkSelect (props) {
     }
     store.onSelectBookmark(item.id)
   }
+  // doubleClickToOpenBookmark: a single click only marks the row, the session
+  // opens on a double click. Touch devices have no double click, so the setting
+  // is ignored there. This is the sidebar list only — the settings bookmarks tab
+  // keeps selecting for editing on a single click.
+  const openOnDoubleClick = !!store.config.doubleClickToOpenBookmark &&
+    !store.isTouchDevice
   const base = {
     bookmarks: bookmarks || [],
     type: 'bookmarks',
-    onClickItem,
+    activeItemId: openOnDoubleClick ? activeItemId : undefined,
+    onClickItem: openOnDoubleClick
+      ? item => setActiveItemId(item.id)
+      : openBookmark,
+    onDoubleClickItem: openOnDoubleClick ? openBookmark : undefined,
     listStyle,
     staticList: true
   }

package/client/components/sidebar/history-item.jsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useEffect, useRef } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import classnames from 'classnames'
 import createTitle, { createTitleWithTag } from '../../common/create-title'
 import { DeleteOutlined, BookFilled } from '@ant-design/icons'
 import { refsStatic } from '../common/ref'
@@ -6,18 +7,32 @@ import { refsStatic } from '../common/ref'
 export default function HistoryItem (props) {
   const { store } = window
   const {
-    item
+    item,
+    openOnDoubleClick
   } = props
+  const [active, setActive] = useState(false)
   const timeoutRef = useRef(null)
 
   const handleClick = useCallback(() => {
+    // with doubleClickToOpenBookmark on, a click only marks the row — the
+    // session opens on the double click below
+    if (openOnDoubleClick) {
+      setActive(true)
+      return
+    }
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current)
     }
     timeoutRef.current = setTimeout(() => {
       store.onSelectHistory(item.tab)
     }, 10)
-  }, [item.tab])
+  }, [item.tab, openOnDoubleClick])
+
+  const handleDoubleClick = useCallback(() => {
+    if (openOnDoubleClick) {
+      store.onSelectHistory(item.tab)
+    }
+  }, [item.tab, openOnDoubleClick])
 
   useEffect(() => {
     return () => {
@@ -47,9 +62,10 @@ export default function HistoryItem (props) {
   const tt = createTitle(item.tab)
   return (
     <div
-      className='item-list-unit'
+      className={classnames('item-list-unit', { active })}
       title={tt}
       onClick={handleClick}
+      onDoubleClick={handleDoubleClick}
     >
       <div className='elli pd1y pd2x'>
         {title}

package/client/components/sidebar/history.jsx

@@ -25,6 +25,12 @@ export default auto(function HistoryPanel (props) {
   const {
     history
   } = store
+  // doubleClickToOpenBookmark: a single click only marks the row, the session
+  // opens on a double click. Touch devices have no double click, so the setting
+  // is ignored there. Read here rather than in HistoryItem because this
+  // component is `auto` — it re-renders when the input modality flips.
+  const openOnDoubleClick = !!store.config.doubleClickToOpenBookmark &&
+    !store.isTouchDevice
   let arr = store.config.disableConnectionHistory ? [] : history
   if (sortByFrequency) {
     arr = [...arr].sort((a, b) => { return b.count - a.count })
@@ -75,6 +81,7 @@ export default auto(function HistoryPanel (props) {
               <HistoryItem
                 key={item.id}
                 item={item}
+                openOnDoubleClick={openOnDoubleClick}
               />
             )
           })

package/client/components/terminal/mixins/term-touch.js

@@ -41,6 +41,10 @@
  *    `stopPropagation()` is enough to veto xterm's scroll for the duration of
  *    the drag. `preventDefault()` is not an option: React listens to
  *    `touchmove` passively, so it is ignored (with a console warning).
+ *
+ * A long press is not the only way in: the toolbar shows a touch-only menu
+ * icon next to the three-dot toggle (see session-control.jsx), which opens the
+ * same menu through openContextMenuAtPoint() below.
  */
 
 const DEFAULT_WORD_SEPARATOR = './\\()"\'-:,.;<>~!@#$%^&*|+=[]{}`~ ?'
@@ -505,6 +509,20 @@ export const touchMixin = {
     target.dispatchEvent(event)
   },
 
+  /**
+   * Opens the menu from the toolbar icon, which lives outside the antd
+   * dropdown's trigger element — so the event is dispatched on the terminal's
+   * own node and bubbles up to it. The icon's corner is passed in as the point
+   * to drop the menu from, rather than the finger that tapped it.
+   */
+  openContextMenuAtPoint (clientX, clientY) {
+    this.openContextMenuAt(
+      clientX,
+      clientY,
+      this.domRef?.current || this.term?.element
+    )
+  },
+
   cancelLongPress () {
     clearTimeout(this.longPressTimer)
     this.longPressTimer = null

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

@@ -158,7 +158,11 @@ export default class ItemListTree extends Component {
         : matchedRowKeys[0]
       const row = rows.find(item => item.key === rowKey)
       if (row?.item?.id) {
-        this.selectBookmarkById(row.item.id)
+        // Enter is a deliberate activation, so it opens the bookmark even when
+        // doubleClickToOpenBookmark makes a single click only mark the row. The
+        // settings bookmarks tab passes no onDoubleClickItem, so there Enter
+        // still selects for editing, exactly like a click.
+        this.selectBookmarkById(row.item.id, this.props.onDoubleClickItem)
       }
     }
   }
@@ -404,7 +408,9 @@ export default class ItemListTree extends Component {
     }
   }
 
-  selectBookmarkById = (id) => {
+  // `act` overrides what a selection does; only the Enter path passes it, so a
+  // click keeps whatever meaning the consumer gave onClickItem.
+  selectBookmarkById = (id, act) => {
     const { store } = window
     store.storeAssign({
       currentBookmarkGroupId: findBookmarkGroupId(store.bookmarkGroups, id)
@@ -414,7 +420,28 @@ export default class ItemListTree extends Component {
       d => d.id === id
     )
     if (bookmark) {
-      this.props.onClickItem(bookmark)
+      (act || this.props.onClickItem)(bookmark)
+    }
+  }
+
+  handleDoubleClick = (e) => {
+    // only the static list (the sidebar) passes this, so the bookmark edit page
+    // keeps its single click to select behaviour
+    const { onDoubleClickItem, bookmarks } = this.props
+    if (!onDoubleClickItem) {
+      return
+    }
+    const item = findParentBySel(e.target, '.tree-item')
+    // a group toggles on a single click, so a double click would just toggle it
+    // twice and land back where it started
+    if (!item || item.getAttribute('data-is-group') === 'true') {
+      return
+    }
+    const bookmark = bookmarks.find(
+      d => d.id === item.getAttribute('data-item-id')
+    )
+    if (bookmark) {
+      onDoubleClickItem(bookmark)
     }
   }
 
@@ -917,6 +944,7 @@ export default class ItemListTree extends Component {
           className='item-list-wrap'
           style={listStyle}
           ref={this.listRef}
+          onDoubleClick={this.handleDoubleClick}
         >
           {this.renderVirtualTreeContent(rows, editor)}
           {this.renderEditorOverlay(editor)}

package/client/components/widgets/widget-control.jsx

@@ -46,9 +46,11 @@ export default function WidgetControl ({ formData, widgetInstancesLength }) {
         title: `${widget.info.name} (${result.instanceId})`,
         widgetId: result.widgetId,
         serverInfo: result.serverInfo,
-        config
+        config,
+        startedAt: Date.now()
       }
-      window.store.widgetInstances.push(instance)
+      // assigned, not pushed: see deleteWidgetInstance in store/widgets.js
+      window.store.widgetInstances = [...window.store.widgetInstances, instance]
       if (config.autoRun) {
         window.store.toggleAutoRunWidget(instance)
       }

package/client/components/widgets/widget-instance-detail.jsx

@@ -0,0 +1,370 @@
+/**
+ * Detail view for a widget instance: what it is, and what it has been doing.
+ *
+ * Shown in the right column of the widgets panel (Settings -> Widgets) when an
+ * instance is picked from the "Running instances" list, in place of the run
+ * form. The instance keeps this panel after it stops — being able to read the
+ * log of an instance that died is the whole point of it.
+ *
+ * Both panes come out of the instance's log file (see
+ * app/widgets/instance-log.js): on open, and again whenever Reload is pressed.
+ * Deliberately not on a timer — a log that scrolls under you is harder to read
+ * than one you refresh when you are ready.
+ *
+ * The strings here are English: the keys this panel needs do not exist yet, and
+ * a new key only reaches the app through an electerm-locales release plus a dep
+ * bump (see the locales notes). `e()` is used only for keys that do exist.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react'
+import {
+  Alert,
+  Button,
+  Descriptions,
+  Popconfirm,
+  Segmented,
+  Space,
+  Tag,
+  Tooltip,
+  Typography
+} from 'antd'
+import {
+  CopyOutlined,
+  DeleteOutlined,
+  ReloadOutlined,
+  StopOutlined
+} from '@ant-design/icons'
+import { auto } from 'manate/react'
+import { copy } from '../../common/clipboard'
+import parseWidgetLog from '../../common/parse-widget-log'
+import './widgets.styl'
+
+const e = window.translate
+
+const SECRET_KEY = /password|passwd|secret|token|apikey|api_key/i
+const CONN_MARK = { ok: '✓', fail: '✗', info: '•' }
+
+function pad (n, len = 2) {
+  return String(n).padStart(len, '0')
+}
+
+function formatTime (ts) {
+  const d = new Date(ts)
+  return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}.${pad(d.getMilliseconds(), 3)}`
+}
+
+// the URL of a widget that needs credentials carries them; the panel gets
+// screenshotted, so hide the password here (copy still copies the real one)
+function maskUrl (url) {
+  return String(url || '').replace(/\/\/([^:/@]+):([^@/]+)@/, '//$1:••••••@')
+}
+
+function displayValue (key, value) {
+  if (SECRET_KEY.test(key)) {
+    return value ? '••••••' : ''
+  }
+  if (typeof value === 'boolean') {
+    return value ? 'true' : 'false'
+  }
+  return value === undefined || value === null ? '' : String(value)
+}
+
+export default auto(function WidgetInstanceDetail ({ instance, store }) {
+  const [pane, setPane] = useState('log')
+  const [data, setData] = useState({ logs: [], events: [] })
+  // which confirm popup is open ('' | 'clear' | 'stop'), so its tooltip can
+  // step aside — both are anchored to the same button, and the tooltip would
+  // otherwise sit on top of the confirm button and swallow the click
+  const [confirming, setConfirming] = useState('')
+  const [status, setStatus] = useState({
+    loaded: false,
+    loading: false,
+    exists: true,
+    error: ''
+  })
+  const paneRef = useRef(null)
+
+  const running = store.widgetInstances.some(w => w.id === instance.id)
+  const logPath = store.widgetLogPath && window.reqs?.path?.join
+    ? window.reqs.path.join(store.widgetLogPath, `${instance.id}.log`)
+    : ''
+
+  const readLog = useCallback(async () => {
+    if (!logPath) {
+      setStatus({ loaded: true, loading: false, exists: false, error: '' })
+      return
+    }
+    setStatus(s => ({ ...s, loading: true }))
+    try {
+      // read straight through: fs/promises has no `exists`, and the bridge
+      // rejects unknown helpers — so a missing file is detected from ENOENT
+      // rather than probed for, which also saves a round trip
+      const text = await window.fs.readFile(logPath)
+      setData(parseWidgetLog(text))
+      setStatus({ loaded: true, loading: false, exists: true, error: '' })
+    } catch (err) {
+      const msg = (err && err.message) || String(err)
+      if (/ENOENT|no such file/i.test(msg)) {
+        // the normal first state of a fresh instance, not a failure
+        setData({ logs: [], events: [] })
+        setStatus({ loaded: true, loading: false, exists: false, error: '' })
+        return
+      }
+      setStatus({ loaded: true, loading: false, exists: true, error: msg })
+    }
+  }, [logPath])
+
+  useEffect(() => {
+    readLog()
+  }, [readLog])
+
+  // newest entry is at the bottom, so land there after every load
+  useEffect(() => {
+    const el = paneRef.current
+    if (el) {
+      el.scrollTop = el.scrollHeight
+    }
+  }, [data, pane])
+
+  const clearLog = async () => {
+    if (!logPath) {
+      return
+    }
+    try {
+      // the bridge resolves false instead of rejecting when the write fails
+      const ok = await window.fs.writeFile(logPath, '')
+      if (ok === false) {
+        throw new Error('could not write ' + logPath)
+      }
+      setData({ logs: [], events: [] })
+      setStatus(s => ({ ...s, exists: true, error: '' }))
+    } catch (err) {
+      setStatus(s => ({ ...s, error: err.message || String(err) }))
+    }
+  }
+
+  // Stopping is the one log change the user causes directly, so refresh after
+  // it — that is not the polling the panel is avoiding, it is the panel
+  // agreeing with the button that was just pressed.
+  const stopInstance = async () => {
+    await store.stopWidget(instance.id)
+    readLog()
+  }
+
+  const infoItems = [
+    {
+      key: 'widget',
+      label: 'Widget',
+      children: instance.widgetId
+    },
+    {
+      key: 'instance',
+      label: 'Instance',
+      children: <span className='wil-mono'>{instance.id}</span>
+    },
+    {
+      key: 'status',
+      label: 'Status',
+      children: running ? <Tag color='green'>running</Tag> : <Tag>stopped</Tag>
+    }
+  ]
+  if (instance.serverInfo && instance.serverInfo.url) {
+    infoItems.push({
+      key: 'url',
+      label: 'URL',
+      children: (
+        <span className='wil-mono' title={maskUrl(instance.serverInfo.url)}>
+          {maskUrl(instance.serverInfo.url)}
+        </span>
+      )
+    })
+  }
+  if (instance.serverInfo && instance.serverInfo.path) {
+    infoItems.push({
+      key: 'path',
+      label: 'Path',
+      children: <span className='wil-mono'>{instance.serverInfo.path}</span>
+    })
+  }
+  if (instance.startedAt) {
+    infoItems.push({
+      key: 'startedAt',
+      label: 'Started',
+      children: new Date(instance.startedAt).toLocaleString()
+    })
+  }
+  for (const key of Object.keys(instance.config || {})) {
+    if (key === 'autoRun') {
+      continue
+    }
+    infoItems.push({
+      key: 'config-' + key,
+      label: key,
+      children: <span className='wil-mono'>{displayValue(key, instance.config[key])}</span>
+    })
+  }
+
+  let emptyText = 'Nothing logged yet. Press reload after the widget has been used.'
+  if (!logPath) {
+    emptyText = 'The widget log directory is not available in this environment.'
+  } else if (!status.exists) {
+    emptyText = 'No log file yet — this instance has not written anything.'
+  }
+
+  const renderPane = () => {
+    const isLog = pane === 'log'
+    const entries = isLog ? data.logs : data.events
+    return (
+      <>
+        {
+          status.error
+            ? (
+              <Alert
+                className='mg1y'
+                type='error'
+                showIcon
+                message={status.error}
+              />
+              )
+            : null
+        }
+        <div className='wil-pane' ref={paneRef}>
+          {entries.map((entry, i) => {
+            const state = isLog
+              ? entry.level
+              : (entry.ok === null ? 'info' : (entry.ok ? 'ok' : 'fail'))
+            return (
+              <div
+                key={i}
+                className={'wil-line wil-' + state}
+              >
+                <span
+                  className='wil-time'
+                  title={new Date(entry.ts).toISOString()}
+                >
+                  {formatTime(entry.ts)}
+                </span>
+                {isLog
+                  ? null
+                  : <span className='wil-mark'>{CONN_MARK[state]}</span>}
+                {isLog ? null : <span className='wil-type'>{entry.type}</span>}
+                {isLog || !entry.from
+                  ? null
+                  : <span className='wil-from'>{entry.from}</span>}
+                <span className='wil-msg'>{entry.msg}</span>
+              </div>
+            )
+          })}
+          {entries.length ? null : <div className='wil-empty'>{emptyText}</div>}
+        </div>
+        {logPath
+          ? (
+            <div className='wil-path elli' title={logPath}>
+              Log file: {logPath}
+            </div>
+            )
+          : null}
+      </>
+    )
+  }
+
+  return (
+    <div className='widget-instance-detail'>
+      <div className='wil-head'>
+        <Typography.Text
+          strong
+          ellipsis
+          className='wil-head-title'
+          title={instance.title}
+        >
+          {instance.title}
+        </Typography.Text>
+        <Space size={4}>
+          <Tooltip title='Reload log'>
+            <Button
+              size='small'
+              icon={<ReloadOutlined />}
+              loading={status.loading}
+              onClick={readLog}
+            />
+          </Tooltip>
+          {instance.serverInfo && instance.serverInfo.url
+            ? (
+              <Tooltip title='Copy URL'>
+                <Button
+                  size='small'
+                  icon={<CopyOutlined />}
+                  onClick={() => copy(instance.serverInfo.url)}
+                />
+              </Tooltip>
+              )
+            : null}
+          {logPath
+            ? (
+              <Popconfirm
+                title='Clear this instance log?'
+                okText='Clear'
+                cancelText={e('cancel')}
+                onOpenChange={open => setConfirming(open ? 'clear' : '')}
+                onConfirm={clearLog}
+              >
+                <Tooltip title='Clear log' open={confirming === 'clear' ? false : undefined}>
+                  <Button size='small' icon={<DeleteOutlined />} />
+                </Tooltip>
+              </Popconfirm>
+              )
+            : null}
+          {running
+            ? (
+              <Popconfirm
+                title='Stop this widget?'
+                okText='Stop'
+                cancelText={e('cancel')}
+                onOpenChange={open => setConfirming(open ? 'stop' : '')}
+                onConfirm={stopInstance}
+              >
+                <Tooltip title='Stop' open={confirming === 'stop' ? false : undefined}>
+                  <Button
+                    size='small'
+                    danger
+                    icon={<StopOutlined />}
+                  />
+                </Tooltip>
+              </Popconfirm>
+              )
+            : (
+              <Button
+                size='small'
+                onClick={() => store.closeWidgetInstance()}
+              >
+                Back
+              </Button>
+              )}
+        </Space>
+      </div>
+      <Descriptions
+        className='wil-descriptions'
+        size='small'
+        bordered
+        column={1}
+        items={infoItems}
+      />
+      <Segmented
+        className='wil-switch'
+        size='small'
+        value={pane}
+        onChange={setPane}
+        options={[
+          {
+            label: `Running log (${data.logs.length})`,
+            value: 'log'
+          },
+          {
+            label: `Connections (${data.events.length})`,
+            value: 'conn'
+          }
+        ]}
+      />
+      {renderPane()}
+    </div>
+  )
+})

package/client/components/widgets/widget-instance.jsx

@@ -11,10 +11,11 @@ import { auto } from 'manate/react'
 
 const e = window.translate
 
-export default auto(function WidgetInstance ({ item }) {
+export default auto(function WidgetInstance ({ item, active, onClick }) {
   const { id, title, serverInfo, autoRun } = item
   const cls = classnames('item-list-unit', {
-    'autorun-active': autoRun
+    'autorun-active': autoRun,
+    active
   })
   const delProps = {
     title: e('del'),
@@ -28,6 +29,16 @@ export default auto(function WidgetInstance ({ item }) {
   function onConfirm () {
     window.store.stopWidget(id)
   }
+  // the row itself opens the instance detail, so the action icons must not
+  // also trigger it
+  function stopPropagation (evt) {
+    evt.stopPropagation()
+  }
+  function handleClick () {
+    if (onClick) {
+      onClick(item)
+    }
+  }
   const popProps = {
     title: e('del') + '?',
     onConfirm,
@@ -45,7 +56,7 @@ export default auto(function WidgetInstance ({ item }) {
   }
   const popoverContent = serverInfo
     ? (
-      <div>
+      <div className='wil-pop-info'>
         <div style={{ display: 'flex', alignItems: 'center' }}>
           <span>URL: {serverInfo.url}</span>
           <CopyOutlined
@@ -70,6 +81,7 @@ export default auto(function WidgetInstance ({ item }) {
     <div
       key={id}
       className={cls}
+      onClick={handleClick}
     >
       {
         serverInfo
@@ -84,17 +96,22 @@ export default auto(function WidgetInstance ({ item }) {
             )
           : titleDiv
       }
-      <Tooltip title='Toggle auto-run'>
-        <ThunderboltOutlined
-          className='pointer list-item-autorun'
-          onClick={handleToggleAutoRun}
-        />
-      </Tooltip>
-      <Popconfirm
-        {...popProps}
+      <div
+        className='wil-item-actions'
+        onClick={stopPropagation}
       >
-        {icon}
-      </Popconfirm>
+        <Tooltip title='Toggle auto-run'>
+          <ThunderboltOutlined
+            className='pointer list-item-autorun'
+            onClick={handleToggleAutoRun}
+          />
+        </Tooltip>
+        <Popconfirm
+          {...popProps}
+        >
+          {icon}
+        </Popconfirm>
+      </div>
     </div>
   )
 })

package/client/components/widgets/widget-instances.jsx

@@ -1,10 +1,12 @@
 import WidgetInstance from './widget-instance'
 
-export default function WidgetInstances ({ widgetInstances }) {
+export default function WidgetInstances ({ widgetInstances, activeItemId, onClickItem }) {
   return widgetInstances.map(item => (
     <WidgetInstance
       key={item.id}
       item={item}
+      active={activeItemId === item.id}
+      onClick={onClickItem}
     />
   ))
 }