@electerm/electerm-react 3.15.178 → 3.15.187

package/client/components/terminal-info/format-disks.js

@@ -0,0 +1,45 @@
+/**
+ * parse `df` output into disk list
+ */
+
+export default function formatDisks (str) {
+  if (!str) {
+    return {
+      disks: []
+    }
+  }
+  const r = str.split('\n')
+    .slice(1)
+    .reduce((acc, s) => {
+      if (!s.trim()) {
+        return acc
+      }
+      const arr = s.trim().split(/ +/)
+      // df wraps long filesystem names (e.g. nfs "host:/very/long/export/path")
+      // onto a second line that starts with spaces and only holds the numeric
+      // columns. Merge such continuation lines back into the previous entry, so
+      // those disks (commonly nfs) are listed instead of dropped.
+      if (/^\s/.test(s) && acc.length) {
+        const prev = acc[acc.length - 1]
+        prev.size = arr[0]
+        prev.used = arr[1]
+        prev.avail = arr[2]
+        prev.usedPercent = arr[3]
+        prev.mount = arr[4]
+        return acc
+      }
+      acc.push({
+        filesystem: arr[0],
+        size: arr[1],
+        used: arr[2],
+        avail: arr[3],
+        usedPercent: arr[4],
+        mount: arr[5]
+      })
+      return acc
+    }, [])
+    .filter(d => d.filesystem && d.mount)
+  return {
+    disks: r
+  }
+}

package/client/components/terminal-info/run-cmd.jsx

@@ -6,6 +6,7 @@ import { runCmd } from '../terminal/terminal-apis'
 import { useEffect } from 'react'
 import wait from '../../common/wait'
 import parseInt10 from '../../common/parse-int10'
+import formatDisks from './format-disks'
 
 function formatActivities (str) {
   if (!str) {
@@ -31,31 +32,6 @@ function formatActivities (str) {
   }
 }
 
-function formatDisks (str) {
-  if (!str) {
-    return {
-      disks: []
-    }
-  }
-  const r = str.split('\n')
-    .slice(1)
-    .map(s => {
-      const arr = s.split(/ +/)
-      return {
-        filesystem: arr[0],
-        size: arr[1],
-        used: arr[2],
-        avail: arr[3],
-        usedPercent: arr[4],
-        mount: arr[5]
-      }
-    })
-    .filter(d => d.filesystem)
-  return {
-    disks: r
-  }
-}
-
 function formatCpu (str) {
   if (!str) {
     return {
@@ -206,7 +182,7 @@ export default (props) => {
     },
     {
       name: 'disks',
-      cmd: 'df -h',
+      cmd: 'df -hP',
       interval: 10000,
       delay: 1600,
       formatter: formatDisks

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

@@ -14,6 +14,7 @@ import {
 } from '../../common/constants'
 import { getItemJSON, setItemJSON } from '../../common/safe-local-storage'
 import findParentBySel from '../../common/find-parent'
+import { isDropAfterHalf, setDropIndicator, clearDropIndicator } from '../../common/drop-position'
 import copy from 'json-deep-copy'
 import NewButtonsGroup from './bookmark-toolbar'
 import findBookmarkGroupId from '../../common/find-bookmark-group-id'
@@ -479,8 +480,10 @@ export default class ItemListTree extends Component {
       )
   }
 
-  onDragEnter = e => {
-    e.preventDefault()
+  // resolve the .tree-item under the pointer and show a directional
+  // drop indicator (top edge = before, bottom edge = after).
+  // NOTE: preventDefault on dragover is required for onDrop to fire.
+  updateDropIndicator = e => {
     let {
       target
     } = e
@@ -488,7 +491,12 @@ export default class ItemListTree extends Component {
     if (tar) {
       target = tar
     }
-    target.classList.add('item-dragover-top')
+    setDropIndicator(target, isDropAfterHalf(e, target))
+  }
+
+  onDragEnter = e => {
+    e.preventDefault()
+    this.updateDropIndicator(e)
   }
 
   onDragLeave = e => {
@@ -500,25 +508,21 @@ export default class ItemListTree extends Component {
     if (tar) {
       target = tar
     }
-    target.classList.remove('item-dragover-top')
+    clearDropIndicator(target)
   }
 
   onDragOver = e => {
-    let {
-      target
-    } = e
-    const tar = findParentBySel(target, '.tree-item')
-    if (tar) {
-      target = tar
-    }
-    target.classList.add('item-dragover-top')
+    e.preventDefault()
+    this.updateDropIndicator(e)
   }
 
   onDrop = action(e => {
     e.preventDefault()
-    const elems = document.querySelectorAll('.tree-item.item-dragover-top')
+    const elems = document.querySelectorAll(
+      '.tree-item.dnd-before, .tree-item.dnd-after'
+    )
     elems.forEach(elem => {
-      elem.classList.remove('item-dragover-top')
+      clearDropIndicator(elem)
     })
     let {
       target
@@ -537,6 +541,9 @@ export default class ItemListTree extends Component {
     const pidDrops = target.getAttribute('data-parent-id') || ''
     const pidDropsArr = pidDrops.split('#')
     const pidDrop = pidDropsArr[pidDropsArr.length - 1]
+    // bottom half of the target row => insert after it, so the last
+    // item/group in a list can receive a drop (append to the end).
+    const insertAfter = isDropAfterHalf(e, target)
     // can not drag item to its own children
     if (
       (idDragged === 'default' &&
@@ -566,8 +573,9 @@ export default class ItemListTree extends Component {
       if (indexDrop < 0) {
         return
       }
+      const insertIndex = insertAfter ? indexDrop + 1 : indexDrop
       bookmarkGroups.splice(
-        indexDrop,
+        insertIndex,
         0,
         dragItem
       )
@@ -580,9 +588,13 @@ export default class ItemListTree extends Component {
         )
         : false
       if (parentDrag) {
-        parentDrag.bookmarkGroupIds = (parentDrag.bookmarkGroupIds || []).filter(
-          id => id !== idDragged
-        )
+        // remove from old parent IN PLACE: manate only reacts to in-place
+        // array mutations (the delete inside splice), not reassignment.
+        const fromArr = parentDrag.bookmarkGroupIds || []
+        const fromIdx = fromArr.indexOf(idDragged)
+        if (fromIdx >= 0) {
+          fromArr.splice(fromIdx, 1)
+        }
       }
       const parentDrop = pidDrop
         ? bookmarkGroups.find(
@@ -594,20 +606,18 @@ export default class ItemListTree extends Component {
       if (!parentDrop) {
         return
       }
+      const dropArr = parentDrop.bookmarkGroupIds || []
       if (!pidDrop) {
-        parentDrop.bookmarkGroupIds = uniq(
-          [
-            ...(parentDrop.bookmarkGroupIds || []),
-            idDragged
-          ]
-        )
+        if (!dropArr.includes(idDragged)) {
+          dropArr.push(idDragged)
+        }
       } else {
-        const arr = parentDrop.bookmarkGroupIds || []
-        let index = arr.findIndex(item => item === idDrop)
+        let index = dropArr.findIndex(item => item === idDrop)
         if (index < 0) {
           index = 0
         }
-        arr.splice(index, 0, idDragged)
+        const insertIndex = insertAfter ? index + 1 : index
+        dropArr.splice(insertIndex, 0, idDragged)
       }
     } else {
       const parentDrag = bookmarkGroups.find(
@@ -616,9 +626,13 @@ export default class ItemListTree extends Component {
       if (!parentDrag) {
         return
       }
-      parentDrag.bookmarkIds = (parentDrag.bookmarkIds || []).filter(
-        id => id !== idDragged
-      )
+      // remove from old parent IN PLACE: manate only reacts to in-place
+      // array mutations (the delete inside splice), not reassignment.
+      const fromArr = parentDrag.bookmarkIds || []
+      const fromIdx = fromArr.indexOf(idDragged)
+      if (fromIdx >= 0) {
+        fromArr.splice(fromIdx, 1)
+      }
       const parentDrop = isGroupDrop
         ? bookmarkGroups.find(
           item => item.id === idDrop
@@ -629,21 +643,25 @@ export default class ItemListTree extends Component {
       if (!parentDrop) {
         return
       }
+      const dropArr = parentDrop.bookmarkIds || []
       if (isGroupDrop) {
-        parentDrop.bookmarkIds = uniq(
-          [
-            ...(parentDrop.bookmarkIds || []),
-            idDragged
-          ]
-        )
+        if (!dropArr.includes(idDragged)) {
+          dropArr.push(idDragged)
+        }
       } else {
-        const arr = parentDrop.bookmarkIds || []
-        let index = arr.findIndex(item => item === idDrop)
+        let index = dropArr.findIndex(item => item === idDrop)
         if (index < 0) {
           index = 0
         }
-        arr.splice(index, 0, idDragged)
+        const insertIndex = insertAfter ? index + 1 : index
+        dropArr.splice(insertIndex, 0, idDragged)
       }
+      // a manual bookmark reorder overrides any active sort, otherwise
+      // buildVisibleTreeRows would re-sort bookmarks and hide this order.
+      setItemJSON(treeSortLsKey, null)
+      this.setState({
+        sort: null
+      })
     }
     if (
       isGroupDrag &&

package/client/css/basic.styl

@@ -42,6 +42,20 @@ a
 .cap
   text-transform capitalize
 
+// shared drag-and-drop reorder indicators (vertical lists)
+// first half of the target  => insert before => top edge
+// second half of the target => insert after  => bottom edge
+// (tabs use their own horizontal left/right line indicators)
+.dnd-before
+  box-shadow inset 0 2px 0 0 var(--primary)
+.dnd-after
+  box-shadow inset 0 -2px 0 0 var(--primary)
+// antd table rows: box-shadow on <tr> is not rendered, apply on cells
+tr.dnd-before > td
+  box-shadow inset 0 2px 0 0 var(--primary)
+tr.dnd-after > td
+  box-shadow inset 0 -2px 0 0 var(--primary)
+
 .sync-data-compare
   .sync-suggest-action
     color var(--success)

package/client/css/mobile.styl

@@ -29,6 +29,24 @@
       // close icon always visible on mobile
       .tab-close
         display block
+  // keep a left drag grip for the custom title bar (not webapp, not system-ui),
+  // so the empty area left of the tab is draggable. mac needs extra room for
+  // the traffic-light window controls in the top-left.
+  &.not-system-ui.not-webapp
+    .mobile-tabs-inner
+      margin-left 20px !important
+    &.is-mac
+      .mobile-tabs-inner
+        margin-left 72px !important
+  // AppDrag wraps .mobile-tabs-inner under a custom title bar; make it the flex
+  // item so the tab layout is unchanged and the inner's left drag grip stays
+  // inside the draggable .app-drag box.
+  .tabs.mobile-tabs > .app-drag
+    flex 1
+    min-width 0
+    display flex
+    align-items center
+    overflow hidden
   .mobile-tabs-extra
     flex-shrink 0
     display flex

package/client/store/item.js

@@ -82,18 +82,22 @@ export default Store => {
     window.store[type] = arr
   }
 
-  Store.prototype.adjustOrder = function (type, fromId, toId) {
+  Store.prototype.adjustOrder = function (type, fromId, toId, insertAfter = false) {
     const { store } = window
     const items = store.getItems(type)
     const fromIndex = items.findIndex(t => t.id === fromId)
-    let toIndex = items.findIndex(t => t.id === toId)
+    const toIndex = items.findIndex(t => t.id === toId)
     if (fromIndex < 0 || toIndex < 0 || fromIndex === toIndex) {
       return
     }
-    if (fromIndex < toIndex) {
-      toIndex = toIndex - 1
-    }
+    // insertAfter lets the item land after the target, so the last
+    // item can receive a drop (insertIndex can reach items.length).
+    let insertIndex = insertAfter ? toIndex + 1 : toIndex
     const [removed] = items.splice(fromIndex, 1)
-    items.splice(toIndex, 0, removed)
+    // account for the index shift caused by the removal above
+    if (fromIndex < insertIndex) {
+      insertIndex = insertIndex - 1
+    }
+    items.splice(insertIndex, 0, removed)
   }
 }

package/package.json

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