Enhance drag-and-drop functionality in Collections component

usebruno · Jan 8, 2025 · df61804 · df61804
1 parent 52672e6
commit df61804
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 17 deletions.
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js
@@ -12,6 +12,17 @@ const Wrapper = styled.div`
       transform: rotateZ(90deg);
     }
 
+    &.item-hovered {
+      background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
+      .menu-icon {
+        .dropdown {
+          div[aria-expanded='false'] {
+            visibility: visible;
+          }
+        }
+      }
+    }
+
     .collection-actions {
       .dropdown {
         div[aria-expanded='true'] {

diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js
@@ -2,7 +2,7 @@ import React, { useState, forwardRef, useRef, useEffect } from 'react';
 import classnames from 'classnames';
 import { uuid } from 'utils/common';
 import filter from 'lodash/filter';
-import { useDrop } from 'react-dnd';
+import { useDrop, useDrag } from 'react-dnd';
 import { IconChevronRight, IconDots } from '@tabler/icons';
 import Dropdown from 'components/Dropdown';
 import { collectionClicked } from 'providers/ReduxStore/slices/collections';
@@ -100,26 +100,43 @@ const Collection = ({ collection, searchText }) => {
     );
   };
 
-  const [{ isOver }, drop] = useDrop({
-    accept: `COLLECTION_ITEM_${collection.uid}`,
+  const [{ isOver, getItemType }, drop] = useDrop({
+    accept: [`COLLECTION_ITEM_${collection.uid}`, `COLLECTION`],
     drop: (draggedItem) => {
       dispatch(moveItemToRootOfCollection(collection.uid, draggedItem.uid));
     },
     canDrop: (draggedItem) => {
-      // todo need to make sure that draggedItem belongs to the collection
-      return true;
+      if (["COLLECTION", `COLLECTION_ITEM_${collection.uid}`].includes(getItemType)){
+        return true;
+      }
     },
     collect: (monitor) => ({
-      isOver: monitor.isOver()
+      isOver: monitor.isOver(),
+      getItemType: monitor.getItemType()
     })
   });
 
+  const [{ isDragging }, drag] = useDrag({
+    type: `COLLECTION`,
+    item: {
+      uid: collection.uid,
+      name: collection.name,
+    },
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging()
+    }),
+  });
+
   if (searchText && searchText.length) {
     if (!doesCollectionHaveItemsMatchingSearchText(collection, searchText)) {
       return null;
     }
   }
 
+  const collectionRowClassName = classnames('flex py-1 collection-name items-center', {
+      'item-hovered': isOver
+    });
+
   // we need to sort request items by seq property
   const sortRequestItems = (items = []) => {
     return items.sort((a, b) => a.seq - b.seq);
@@ -149,7 +166,9 @@ const Collection = ({ collection, searchText }) => {
       {showCloneCollectionModalOpen && (
         <CloneCollection collection={collection} onClose={() => setShowCloneCollectionModalOpen(false)} />
       )}
-      <div className="flex py-1 collection-name items-center" ref={drop}>
+      <div className={collectionRowClassName}
+      ref={(node) => drag(drop(node))}
+      >
         <div
           className="flex flex-grow items-center overflow-hidden"
         >
@@ -264,4 +283,4 @@ const Collection = ({ collection, searchText }) => {
   );
 };
 
-export default Collection;
+export default Collection;
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/index.js b/packages/bruno-app/src/components/Sidebar/Collections/index.js
@@ -8,16 +8,12 @@ import {
   IconSortDescendingLetters,
   IconX
 } from '@tabler/icons';
-import Collection from '../Collections/Collection';
+import Collection from './Collection';
 import CreateCollection from '../CreateCollection';
 import StyledWrapper from './StyledWrapper';
 import CreateOrOpenCollection from './CreateOrOpenCollection';
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
 import { sortCollections } from 'providers/ReduxStore/slices/collections/actions';
 
-// todo: move this to a separate folder
-// the coding convention is to keep all the components in a folder named after the component
 const CollectionsBadge = () => {
   const dispatch = useDispatch();
   const { collections } = useSelector((state) => state.collections);
@@ -119,9 +115,7 @@ const Collections = () => {
         {collections && collections.length
           ? collections.map((c) => {
               return (
-                <DndProvider backend={HTML5Backend} key={c.uid}>
-                  <Collection searchText={searchText} collection={c} key={c.uid} />
-                </DndProvider>
+                <Collection searchText={searchText} collection={c} key={c.uid} />
               );
             })
           : null}

diff --git a/packages/bruno-app/src/index.js b/packages/bruno-app/src/index.js
@@ -1,14 +1,18 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './pages/index';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 
 const rootElement = document.getElementById('root');
 
 if (rootElement) {
   const root = ReactDOM.createRoot(rootElement);
   root.render(
     <React.StrictMode>
-      <App />
+      <DndProvider backend={HTML5Backend}>
+        <App />
+      </DndProvider>
     </React.StrictMode>
   );
 }