fix: reordering last request bug and its UX (#2967)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

packages/hoppscotch-common/src/components/collections/Collection.vue

@@ -16,7 +16,8 @@
       <div
         class="absolute bg-accent opacity-0 pointer-events-none inset-0 z-1 transition"
         :class="{
-          'opacity-25': dragging && notSameDestination,
+          'opacity-25':
+            dragging && notSameDestination && notSameParentDestination,
         }"
       ></div>
       <div
@@ -308,7 +309,7 @@ const currentReorderingStatus = useReadonlyStream(currentReorderingStatus$, {
 watch(
   () => dragging.value,
   (val) => {
-    if (val && notSameDestination.value) {
+    if (val && notSameDestination.value && notSameParentDestination.value) {
       emit("dragging", true)
     } else {
       emit("dragging", false)
@@ -338,6 +339,10 @@ watch(
   }
 )
 
+const notSameParentDestination = computed(() => {
+  return currentReorderingStatus.value.parentID !== props.id
+})
+
 const isRequestDragging = computed(() => {
   return currentReorderingStatus.value.type === "request"
 })
@@ -392,7 +397,8 @@ const handleDragOver = (e: DragEvent) => {
     e.offsetY > 18 &&
     notSameDestination.value &&
     !isRequestDragging.value &&
-    isSameParent.value
+    isSameParent.value &&
+    props.isLastItem
   ) {
     orderingLastItem.value = true
     dragging.value = false
@@ -409,7 +415,7 @@ const handelDrop = (e: DragEvent) => {
   } else if (orderingLastItem.value) {
     updateLastItemOrder(e)
   } else {
-    dropEvent(e)
+    notSameParentDestination.value ? dropEvent(e) : e.stopPropagation()
   }
 }
 

packages/hoppscotch-common/src/components/collections/MyCollections.vue

@@ -504,15 +504,12 @@ const emit = defineEmits<{
 
 const refFilterCollection = toRef(props, "filteredCollections")
 
-const pathToIndex = computed(() => {
+const pathToIndex = (path: string) => {
-  return (path: string) => {
   const pathArr = path.split("/")
   return pathArr[pathArr.length - 1]
 }
-})
 
-const isSelected = computed(() => {
+const isSelected = ({
-  return ({
   collectionIndex,
   folderPath,
   requestIndex,
@@ -542,7 +539,6 @@ const isSelected = computed(() => {
     )
   }
 }
-})
 
 const active = computed(() => currentActiveTab.value.document.saveContext)
 
@@ -706,7 +702,10 @@ class MyCollectionsAdapter implements SmartTreeAdapter<MyCollectionNode> {
           ...item.folders.map((folder, index) => ({
             id: `${id}/${index}`,
             data: {
-              isLastItem: index === item.folders.length - 1,
+              isLastItem:
+                item.folders && item.folders.length > 1
+                  ? index === item.folders.length - 1
+                  : false,
               type: "folders",
               data: {
                 parentIndex: id,
@@ -717,7 +716,10 @@ class MyCollectionsAdapter implements SmartTreeAdapter<MyCollectionNode> {
           ...item.requests.map((requests, index) => ({
             id: `${id}/${index}`,
             data: {
-              isLastItem: index === item.requests.length - 1,
+              isLastItem:
+                item.requests && item.requests.length > 1
+                  ? index === item.requests.length - 1
+                  : false,
               type: "requests",
               data: {
                 parentIndex: id,

packages/hoppscotch-common/src/components/collections/TeamCollections.vue

@@ -517,8 +517,7 @@ const hasNoTeamAccess = computed(
       props.collectionsType.selectedTeam.myRole === "VIEWER")
 )
 
-const isSelected = computed(() => {
+const isSelected = ({
-  return ({
   collectionID,
   folderID,
   requestID,
@@ -547,12 +546,10 @@ const isSelected = computed(() => {
     )
   }
 }
-})
 
 const active = computed(() => currentActiveTab.value.document.saveContext)
 
-const isActiveRequest = computed(() => {
+const isActiveRequest = (requestID: string) => {
-  return (requestID: string) => {
   return pipe(
     active.value,
     O.fromNullable,
@@ -564,7 +561,6 @@ const isActiveRequest = computed(() => {
     O.isSome
   )
 }
-})
 
 const selectRequest = (data: {
   request: HoppRESTRequest
@@ -580,7 +576,7 @@ const selectRequest = (data: {
     emit("select-request", {
       request: request,
       requestIndex: requestIndex,
-      isActive: isActiveRequest.value(requestIndex),
+      isActive: isActiveRequest(requestIndex),
     })
   }
 }
@@ -749,7 +745,10 @@ class TeamCollectionsAdapter implements SmartTreeAdapter<TeamCollectionNode> {
                 ? items.children.map((item, index) => ({
                     id: `${id}/${item.id}`,
                     data: {
-                      isLastItem: index === items.children.length - 1,
+                      isLastItem:
+                        items.children && items.children.length > 1
+                          ? index === items.children.length - 1
+                          : false,
                       type: "folders",
                       data: {
                         parentIndex: parsedID,
@@ -762,7 +761,10 @@ class TeamCollectionsAdapter implements SmartTreeAdapter<TeamCollectionNode> {
                 ? items.requests.map((item, index) => ({
                     id: `${id}/${item.id}`,
                     data: {
-                      isLastItem: index === items.requests.length - 1,
+                      isLastItem:
+                        items.requests && items.requests.length > 1
+                          ? index === items.requests.length - 1
+                          : false,
                       type: "requests",
                       data: {
                         parentIndex: parsedID,

packages/hoppscotch-common/src/components/collections/index.vue

@@ -1395,6 +1395,27 @@ const checkIfCollectionIsAParentOfTheChildren = (
   return false
 }
 
+const isMoveToSameLocation = (
+  draggedItemPath: string,
+  destinationPath: string
+) => {
+  const draggedItemPathArr = pathToIndex(draggedItemPath)
+  const destinationPathArr = pathToIndex(destinationPath)
+
+  if (draggedItemPathArr.length > 0) {
+    const draggedItemParentPathArr = draggedItemPathArr.slice(
+      0,
+      draggedItemPathArr.length - 1
+    )
+
+    if (isEqual(draggedItemParentPathArr, destinationPathArr)) {
+      return true
+    } else {
+      return false
+    }
+  }
+}
+
 /**
  * This function is called when the user moves the collection
  * to a different collection or folder
@@ -1419,6 +1440,13 @@ const dropCollection = (payload: {
       return
     }
 
+    //check if the collection is being moved to its own parent
+    if (
+      isMoveToSameLocation(collectionIndexDragged, destinationCollectionIndex)
+    ) {
+      return
+    }
+
     const parentFolder = collectionIndexDragged
       .split("/")
       .slice(0, -1)
@@ -1556,10 +1584,14 @@ const isSameSameParent = (
     draggedItemIndex.length === 1
   ) {
     return draggedItemIndex[0] === destinationCollectionIndex
-  } else if (destinationItemPath === null && draggedItemIndex.length !== 1) {
+  } else if (
+    destinationItemPath === null &&
+    draggedItemIndex.length !== 1 &&
+    destinationCollectionIndex !== null
+  ) {
     const dragedItemParent = draggedItemIndex.slice(0, -1)
 
-    return dragedItemParent[0] === destinationCollectionIndex
+    return dragedItemParent.join("/") === destinationCollectionIndex
   } else {
     if (destinationItemPath === null) return false
     const destinationItemIndex = pathToIndex(destinationItemPath)