Merge pull request #5014 from sanish-bruno/fix/folder-collapse-behaviour

Enhancement: Improve CollectionItem collapse behaviour and UX

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

@@ -8,7 +8,7 @@ import { IconChevronRight, IconDots } from '@tabler/icons';
 import { useSelector, useDispatch } from 'react-redux';
 import { addTab, focusTab, makeTabPermanent } from 'providers/ReduxStore/slices/tabs';
 import { handleCollectionItemDrop, sendRequest, showInFolder } from 'providers/ReduxStore/slices/collections/actions';
-import { collectionFolderClicked } from 'providers/ReduxStore/slices/collections';
+import { toggleCollectionItem } from 'providers/ReduxStore/slices/collections';
 import Dropdown from 'components/Dropdown';
 import NewRequest from 'components/Sidebar/NewRequest';
 import NewFolder from 'components/Sidebar/NewFolder';
@@ -194,12 +194,14 @@ const CollectionItem = ({ item, collectionUid, collectionPathname, searchText })
           type: 'folder-settings',
         })
       );
-      dispatch(
-        collectionFolderClicked({
-          itemUid: item.uid,
-          collectionUid: collectionUid
-        })
-      );
+      if(item.collapsed) {
+        dispatch(
+          toggleCollectionItem({
+            itemUid: item.uid,
+            collectionUid: collectionUid
+          })
+        );
+      }
     }
   };
 
@@ -207,7 +209,7 @@ const CollectionItem = ({ item, collectionUid, collectionPathname, searchText })
     e.stopPropagation();
     e.preventDefault();
     dispatch(
-      collectionFolderClicked({
+      toggleCollectionItem({
         itemUid: item.uid,
         collectionUid: collectionUid
       })

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

@@ -41,6 +41,7 @@ const Wrapper = styled.div`
     }
 
     &:hover {
+      background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
       .collection-actions {
         .dropdown {
           div[aria-expanded='false'] {
@@ -84,6 +85,14 @@ const Wrapper = styled.div`
       background: transparent;
       transition: ${(props) => props.theme.dragAndDrop.transition};
     }
+
+    &.collection-focused-in-tab {
+      background: ${(props) => props.theme.sidebar.collection.item.bg};
+
+      &:hover {
+        background: ${(props) => props.theme.sidebar.collection.item.bg} !important;
+      }
+    }
   }
 
   .collection-name.drop-target {

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

@@ -6,9 +6,9 @@ import filter from 'lodash/filter';
 import { useDrop, useDrag } from 'react-dnd';
 import { IconChevronRight, IconDots, IconLoader2 } from '@tabler/icons';
 import Dropdown from 'components/Dropdown';
-import { collapseCollection } from 'providers/ReduxStore/slices/collections';
+import { toggleCollection } from 'providers/ReduxStore/slices/collections';
 import { mountCollection, moveCollectionAndPersist, handleCollectionItemDrop } from 'providers/ReduxStore/slices/collections/actions';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { addTab, makeTabPermanent } from 'providers/ReduxStore/slices/tabs';
 import NewRequest from 'components/Sidebar/NewRequest';
 import NewFolder from 'components/Sidebar/NewFolder';
@@ -16,6 +16,7 @@ import CollectionItem from './CollectionItem';
 import RemoveCollection from './RemoveCollection';
 import { doesCollectionHaveItemsMatchingSearchText } from 'utils/collections/search';
 import { isItemAFolder, isItemARequest } from 'utils/collections';
+import { isTabForItemActive } from 'src/selectors/tab';
 
 import RenameCollection from './RenameCollection';
 import StyledWrapper from './StyledWrapper';
@@ -36,6 +37,8 @@ const Collection = ({ collection, searchText }) => {
   const isLoading = areItemsLoading(collection);
   const collectionRef = useRef(null);
   
+  const isCollectionFocused = useSelector(isTabForItemActive({ itemUid: collection.uid }));
+  
   const menuDropdownTippyRef = useRef();
   const onMenuDropdownCreate = (ref) => (menuDropdownTippyRef.current = ref);
   const MenuIcon = forwardRef((props, ref) => {
@@ -81,7 +84,9 @@ const Collection = ({ collection, searchText }) => {
     
     ensureCollectionIsMounted();
 
-    dispatch(collapseCollection(collection.uid));
+    if(collection.collapsed) {
+      dispatch(toggleCollection(collection.uid));
+    }
   
     if(!isChevronClick) {
       dispatch(
@@ -102,7 +107,7 @@ const Collection = ({ collection, searchText }) => {
     e.stopPropagation();
     e.preventDefault();
     ensureCollectionIsMounted();
-    dispatch(collapseCollection(collection.uid));
+    dispatch(toggleCollection(collection.uid));
   }
 
   const handleRightClick = (event) => {
@@ -170,7 +175,8 @@ const Collection = ({ collection, searchText }) => {
   }
 
   const collectionRowClassName = classnames('flex py-1 collection-name items-center', {
-      'item-hovered': isOver
+      'item-hovered': isOver,
+      'collection-focused-in-tab': isCollectionFocused
     });
 
   // we need to sort request items by seq property

packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js

@@ -422,14 +422,14 @@ export const collectionsSlice = createSlice({
         collection.items.push(item);
       }
     },
-    collapseCollection: (state, action) => {
+    toggleCollection: (state, action) => {
       const collection = findCollectionByUid(state.collections, action.payload);
 
       if (collection) {
         collection.collapsed = !collection.collapsed;
       }
     },
-    collectionFolderClicked: (state, action) => {
+    toggleCollectionItem: (state, action) => {
       const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
 
       if (collection) {
@@ -2355,8 +2355,8 @@ export const {
   saveRequest,
   deleteRequestDraft,
   newEphemeralHttpRequest,
-  collapseCollection,
-  collectionFolderClicked,
+  toggleCollection,
+  toggleCollectionItem,
   requestUrlChanged,
   updateAuth,
   addQueryParam,