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,30 +88,44 @@ const CollectionItem = ({ item, collection, searchText }) => {
   });
 
   const handleClick = (event) => {
-    if (isItemARequest(item)) {
+    switch (event.button) {
-      if (itemIsOpenedInTabs(item, tabs)) {
+      case 0: // left click
+        if (isItemARequest(item)) {
+          dispatch(hideHomePage());
+          if (itemIsOpenedInTabs(item, tabs)) {
+            dispatch(
+              focusTab({
+                uid: item.uid
+              })
+            );
+            return;
+          }
+          dispatch(
+            addTab({
+              uid: item.uid,
+              collectionUid: collection.uid,
+              requestPaneTab: getDefaultRequestPaneTab(item)
+            })
+          );
+          return;
+        }
         dispatch(
-          focusTab({
+          collectionFolderClicked({
-            uid: item.uid
+            itemUid: item.uid,
+            collectionUid: collection.uid
           })
         );
-      } else {
+        return;
-        dispatch(
+      case 2: // right click
-          addTab({
+        const _menuDropdown = dropdownTippyRef.current;
-            uid: item.uid,
+        if (_menuDropdown) {
-            collectionUid: collection.uid,
+          let menuDropdownBehavior = 'show';
-            requestPaneTab: getDefaultRequestPaneTab(item)
+          if (_menuDropdown.state.isShown) {
-          })
+            menuDropdownBehavior = 'hide';
-        );
+          }
-      }
+          _menuDropdown[menuDropdownBehavior]();
-      dispatch(hideHomePage());
+        }
-    } else {
+        return;
-      dispatch(
-        collectionFolderClicked({
-          itemUid: item.uid,
-          collectionUid: collection.uid
-        })
-      );
     }
   };
 
@@ -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) => {
-    dispatch(collectionClicked(collection.uid));
+    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}