Merge pull request #467 from game5413/enhancement/collection-dropdown

Better experience for open request or folder dropdown action

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js

@@ -88,14 +88,18 @@ const CollectionItem = ({ item, collection, searchText }) => {
   });
 
   const handleClick = (event) => {
+    switch (event.button) {
+      case 0: // left click
         if (isItemARequest(item)) {
+          dispatch(hideHomePage());
           if (itemIsOpenedInTabs(item, tabs)) {
             dispatch(
               focusTab({
                 uid: item.uid
               })
             );
-      } else {
+            return;
+          }
           dispatch(
             addTab({
               uid: item.uid,
@@ -103,15 +107,25 @@ const CollectionItem = ({ item, collection, searchText }) => {
               requestPaneTab: getDefaultRequestPaneTab(item)
             })
           );
+          return;
         }
-      dispatch(hideHomePage());
-    } else {
         dispatch(
           collectionFolderClicked({
             itemUid: item.uid,
             collectionUid: collection.uid
           })
         );
+        return;
+      case 2: // right click
+        const _menuDropdown = dropdownTippyRef.current;
+        if (_menuDropdown) {
+          let menuDropdownBehavior = 'show';
+          if (_menuDropdown.state.isShown) {
+            menuDropdownBehavior = 'hide';
+          }
+          _menuDropdown[menuDropdownBehavior]();
+        }
+        return;
     }
   };
 
@@ -189,7 +203,7 @@ const CollectionItem = ({ item, collection, searchText }) => {
             ? indents.map((i) => {
                 return (
                   <div
-                    onClick={handleClick}
+                    onMouseUp={handleClick}
                     onDoubleClick={handleDoubleClick}
                     className="indent-block"
                     key={i}
@@ -205,7 +219,7 @@ const CollectionItem = ({ item, collection, searchText }) => {
               })
             : null}
           <div
-            onClick={handleClick}
+            onMouseUp={handleClick}
             onDoubleClick={handleDoubleClick}
             className="flex flex-grow items-center h-full overflow-hidden"
             style={{

packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js

@@ -64,7 +64,21 @@ const Collection = ({ collection, searchText }) => {
   });
 
   const handleClick = (event) => {
+    const _menuDropdown = menuDropdownTippyRef.current;
+    switch (event.button) {
+      case 0: // left click
         dispatch(collectionClicked(collection.uid));
+        return;
+      case 2: // right click
+        if (_menuDropdown) {
+          let menuDropdownBehavior = 'show';
+          if (_menuDropdown.state.isShown) {
+            menuDropdownBehavior = 'hide';
+          }
+          _menuDropdown[menuDropdownBehavior]();
+        }
+        return;
+    }
   };
 
   const handleExportClick = () => {
@@ -119,7 +133,7 @@ const Collection = ({ collection, searchText }) => {
         <CollectionProperties collection={collection} onClose={() => setCollectionPropertiesModal(false)} />
       )}
       <div className="flex py-1 collection-name items-center" ref={drop}>
-        <div className="flex flex-grow items-center overflow-hidden" onClick={handleClick}>
+        <div className="flex flex-grow items-center overflow-hidden" onMouseUp={handleClick}>
           <IconChevronRight
             size={16}
             strokeWidth={2}