fix(ui): Sidebar > drag-reorder > item pops out of folder when dropped in nested list's padding - fallback resolved to top-level list instead of the enclosing folder + socket drops on bottom half now insert after instead of before + block dropping a folder into its own or a descendant's nested list (it became its own parent and vanished from the tree)

Author: flawiddsouza

packages/ui/package-lock.json

@@ -72,6 +72,7 @@
         "@vitejs/plugin-vue": "^5.1.4",
         "eslint": "^8.28.0",
         "eslint-plugin-vue": "^9.7.0",
+        "happy-dom": "^20.9.0",
         "rollup-plugin-copy": "^3.4.0",
         "start-server-and-test": "2.0.4",
         "vite": "^5.4.9",

packages/ui/package.json

@@ -64,6 +64,7 @@ import CollectionRunnerModal from './modals/CollectionRunnerModal.vue'
 import CollectionRunnerProgressModal from './modals/CollectionRunnerProgressModal.vue'
 import { mapState } from 'vuex'
 import { flattenTree, exportRestfoxCollection, generateNewIdsForTree, deepClone } from '@/helpers'
+import { resolveSidebarDropTarget } from '@/utils/sidebar-drop'
 import { generateCode } from '@/utils/generate-code'
 import AddGraphQLRequestModal from '@/components/modals/AddGraphQLRequestModal.vue'
 
@@ -470,29 +471,6 @@ export default {
             this.enableOptionsForEmptyContextMenu = true
             this.showContextMenu = true
         },
-        getDropTargetElementContainer(event) {
-            let container
-            const sidebarItem = event.target.closest('.sidebar-item')
-            const sidebarListContainer = event.target.closest('.sidebar-list-container')
-            if (sidebarItem) {
-                container = {
-                    type: 'sidebar-item',
-                    element: sidebarItem
-                }
-            } else if (sidebarListContainer) {
-                const innerList = sidebarListContainer.querySelector('.sidebar-list')
-                if (!innerList) {
-                    return
-                }
-                container = {
-                    type: 'sidebar-list',
-                    element: innerList
-                }
-            } else {
-                return null
-            }
-            return container
-        },
         dragStart(event) {
             if(this.collectionFilter) { // disable drag functionality if collection is being filtered
                 return
@@ -517,12 +495,12 @@ export default {
             if(!this.draggedSidebarElement) {
                 return
             }
-            const container = this.getDropTargetElementContainer(event)
-            if(!container) {
+            const target = resolveSidebarDropTarget(event.target)
+            if(!target) {
                 return
             }
 
-            const elementToDropOn = container.element
+            const { element: elementToDropOn } = target
             const rect = elementToDropOn.getBoundingClientRect()
             const offset = rect.top + document.body.scrollTop
             const elementHeight = parseFloat(getComputedStyle(elementToDropOn, null).height.replace('px', ''))
@@ -535,7 +513,7 @@ export default {
                 elementToDropOn.style.backgroundColor = ''
             } else {
                 this.sidebarItemCursorPosition = 'bottom'
-                if(elementToDropOn.dataset.type === 'request_group') {
+                if(target.type === 'request_group') {
                     elementToDropOn.style.borderTop = ''
                     elementToDropOn.style.borderBottom = ''
                     elementToDropOn.style.backgroundColor = 'var(--drop-target-background-color)'
@@ -547,54 +525,49 @@ export default {
             }
             event.preventDefault()
         },
+        clearDropTargetStyling(element) {
+            element.style.borderTop = ''
+            element.style.borderBottom = ''
+            element.style.backgroundColor = ''
+        },
         dragLeave(event) {
             if(!this.draggedSidebarElement) {
                 return
             }
-            const container = this.getDropTargetElementContainer(event)
-            if(!container) {
+            const target = resolveSidebarDropTarget(event.target)
+            if(!target) {
                 return
             }
-            const elementToDropOn = container.element
-            if(elementToDropOn) {
-                elementToDropOn.style.borderBottom = ''
-                elementToDropOn.style.borderTop = ''
-                elementToDropOn.style.backgroundColor = ''
-            }
+            this.clearDropTargetStyling(target.element)
         },
         drop(event) {
             if(!this.draggedSidebarElement) {
                 return
             }
             event.preventDefault()
-            const container = this.getDropTargetElementContainer(event)
-            if(!container) {
+            const target = resolveSidebarDropTarget(event.target)
+            if(!target) {
                 return
             }
 
-            const elementToDropOn = container.element
-            if(elementToDropOn) {
-                elementToDropOn.style.borderTop = ''
-                elementToDropOn.style.borderBottom = ''
-                elementToDropOn.style.backgroundColor = ''
+            this.clearDropTargetStyling(target.element)
 
-                this.$store.dispatch('reorderCollectionItem', {
-                    from: {
-                        parentId: this.draggedSidebarElement.dataset.parentId,
-                        id: this.draggedSidebarElement.dataset.id
-                    },
-                    to: {
-                        parentId: elementToDropOn.dataset.parentId,
-                        id: elementToDropOn.dataset.id,
-                        type: elementToDropOn.dataset.type ?? container.type,
-                        cursorPosition: this.sidebarItemCursorPosition
-                    }
-                })
+            this.$store.dispatch('reorderCollectionItem', {
+                from: {
+                    parentId: this.draggedSidebarElement.dataset.parentId,
+                    id: this.draggedSidebarElement.dataset.id
+                },
+                to: {
+                    parentId: target.parentId,
+                    id: target.id,
+                    type: target.type,
+                    cursorPosition: this.sidebarItemCursorPosition
+                }
+            })
 
-                this.draggedSidebarElement.style.backgroundColor = ''
-                this.draggedSidebarElement.style.opacity = ''
-                this.draggedSidebarElement = null
-            }
+            this.draggedSidebarElement.style.backgroundColor = ''
+            this.draggedSidebarElement.style.opacity = ''
+            this.draggedSidebarElement = null
         },
         async updateCollectionItem(collectionItem) {
             const result = await this.$store.dispatch('updateCollectionItem', {

packages/ui/src/components/Sidebar.vue

@@ -65,7 +65,7 @@
         :selected-option="currentEnvironment.name"
         @click="selectFolderEnv"
     />
-    <div class="sidebar-list" v-if="'children' in sidebarItem && sidebarItem.children.length && getSidebarItemExpandedState(sidebarItem)">
+    <div class="sidebar-list" :data-parent-id="sidebarItem._id" v-if="'children' in sidebarItem && sidebarItem.children.length && getSidebarItemExpandedState(sidebarItem)">
         <template v-for="sidebarItem1 in sidebarItem.children" :key="sidebarItem1._id">
             <SidebarItem :sidebar-item="sidebarItem1" />
         </template>

packages/ui/src/components/SidebarItem.vue

@@ -66,6 +66,7 @@ import {
     PluginTestResult,
 } from './global'
 import * as queryParamsSync from '@/utils/query-params-sync'
+import { computeTargetIndex, isDropIntoOwnSubtree } from '@/utils/sidebar-drop'
 
 async function loadResponses(state: State, tabId: string) {
     if(tabId in state.responses) {
@@ -1086,6 +1087,11 @@ export const store = createStore<State>({
                 return
             }
 
+            // don't allow an item to be dropped into its own nested list or a descendant's nested list
+            if(isDropIntoOwnSubtree(context.state.collectionTree, payload.from.id, payload.to.parentId)) {
+                return
+            }
+
             let targetKey = 'parentId'
             if(payload.to.type === 'request_group' && payload.to.cursorPosition === 'bottom') { // dropping an item into a folder, bottom = pink highlight
                 targetKey = 'id'
@@ -1117,16 +1123,11 @@ export const store = createStore<State>({
             sourceParentCollection.splice(sourceIndex, 1)
             sourceItem.parentId = payload.to[targetKey] ?? null
 
-            let targetIndex = targetParentCollection.findIndex(item => item._id === payload.to.id)
-            if(payload.to.type === 'request_group' && payload.to.cursorPosition === 'bottom') { // dropping an item into a folder, bottom = pink highlight
-                targetIndex = 0
-            }
-            if(payload.to.type === 'request' && payload.to.cursorPosition === 'bottom') {
-                targetIndex++
-            }
-            if(payload.to.type === 'sidebar-list' && payload.to.cursorPosition === 'bottom') {
-                targetIndex = targetParentCollection.length
-            }
+            const targetIndex = computeTargetIndex(targetParentCollection, {
+                id: payload.to.id,
+                type: payload.to.type,
+                cursorPosition: payload.to.cursorPosition,
+            })
             targetParentCollection.splice(targetIndex, 0, sourceItem)
 
             const collectionItemIndex = context.state.collection.findIndex(item => item._id === sourceItem._id)