diff --git a/packages/bruno-app/src/components/CollectionSettings/Info/index.js b/packages/bruno-app/src/components/CollectionSettings/Info/index.js index b15ba036f9..6cacbfead6 100644 --- a/packages/bruno-app/src/components/CollectionSettings/Info/index.js +++ b/packages/bruno-app/src/components/CollectionSettings/Info/index.js @@ -1,41 +1,55 @@ import React from 'react'; import StyledWrapper from './StyledWrapper'; import { getTotalRequestCountInCollection } from 'utils/collections/'; +import { IconFolder, IconFileOff, IconWorld, IconApi } from '@tabler/icons'; const Info = ({ collection }) => { const totalRequestsInCollection = getTotalRequestCountInCollection(collection); return ( - -
General information about the collection.
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Name :{collection.name}
Location :{collection.pathname}
Ignored files :{collection.brunoConfig?.ignore?.map((x) => `'${x}'`).join(', ')}
Environments :{collection.environments?.length || 0}
Requests :{totalRequestsInCollection}
Size :{collection?.brunoConfig?.size?.toFixed?.(3)} MB
+ +
+
+ {/* Location Row */} +
+
+ +
+
+
Location
+
+ {collection.pathname} +
+
+
+ + {/* Environments Row */} +
+
+ +
+
+
Environments
+
+ {collection.environments?.length || 0} environment{collection.environments?.length !== 1 ? 's' : ''} configured +
+
+
+ + {/* Requests Row */} +
+
+ +
+
+
Requests
+
+ {totalRequestsInCollection} request{totalRequestsInCollection !== 1 ? 's' : ''} in collection +
+
+
+
+
); }; diff --git a/packages/bruno-app/src/components/CollectionSettings/Overview/index.js b/packages/bruno-app/src/components/CollectionSettings/Overview/index.js index f6a29bc713..b67d75c16b 100644 --- a/packages/bruno-app/src/components/CollectionSettings/Overview/index.js +++ b/packages/bruno-app/src/components/CollectionSettings/Overview/index.js @@ -2,14 +2,19 @@ import { flattenItems } from "utils/collections/index"; import StyledWrapper from "./StyledWrapper"; import Docs from "../Docs/index"; import Info from "../Info/index"; +import { IconBox, IconAlertTriangle } from '@tabler/icons'; const Overview = ({ collection }) => { const flattenedItems = flattenItems(collection.items); const itemsFailedLoading = flattenedItems?.filter(item => item?.partial && !item?.loading); return ( - +
-
+
+
+ + {collection?.name} +
{ itemsFailedLoading?.length ? diff --git a/packages/bruno-app/src/components/RequestTabPanel/index.js b/packages/bruno-app/src/components/RequestTabPanel/index.js index 36f6d1cd56..d7690e08ab 100644 --- a/packages/bruno-app/src/components/RequestTabPanel/index.js +++ b/packages/bruno-app/src/components/RequestTabPanel/index.js @@ -22,9 +22,9 @@ import SecuritySettings from 'components/SecuritySettings'; import FolderSettings from 'components/FolderSettings'; import { getGlobalEnvironmentVariables, getGlobalEnvironmentVariablesMasked } from 'utils/collections/index'; import { produce } from 'immer'; -import CollectionLoadStats from 'components/CollectionSettings/Overview/index'; -import RequestNotLoaded from './RequestNotLoaded/index'; -import RequestIsLoading from './RequestIsLoading/index'; +import CollectionOverview from 'components/CollectionSettings/Overview'; +import RequestNotLoaded from './RequestNotLoaded'; +import RequestIsLoading from './RequestIsLoading'; const MIN_LEFT_PANE_WIDTH = 300; const MIN_RIGHT_PANE_WIDTH = 350; @@ -158,7 +158,7 @@ const RequestTabPanel = () => { } if (focusedTab.type === 'collection-overview') { - return ; + return ; } if (focusedTab.type === 'folder-settings') { diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js index 20d7607544..3c9f271155 100644 --- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js +++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js @@ -38,7 +38,9 @@ const CollectionItem = ({ item, collection, searchText }) => { const [newRequestModalOpen, setNewRequestModalOpen] = useState(false); const [newFolderModalOpen, setNewFolderModalOpen] = useState(false); const [runCollectionModalOpen, setRunCollectionModalOpen] = useState(false); - const [itemIsCollapsed, setItemisCollapsed] = useState(item.collapsed); + + const hasSearchText = searchText && searchText?.trim()?.length; + const itemIsCollapsed = hasSearchText ? false : item.collapsed; const [{ isDragging }, drag] = useDrag({ type: `COLLECTION_ITEM_${collection.uid}`, @@ -63,14 +65,6 @@ const CollectionItem = ({ item, collection, searchText }) => { }) }); - useEffect(() => { - if (searchText && searchText.length) { - setItemisCollapsed(false); - } else { - setItemisCollapsed(item.collapsed); - } - }, [searchText, item]); - const dropdownTippyRef = useRef(); const MenuIcon = forwardRef((props, ref) => { return ( diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js index a39d7a3324..326af077ab 100644 --- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js +++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js @@ -5,8 +5,8 @@ import filter from 'lodash/filter'; import { useDrop } from 'react-dnd'; import { IconChevronRight, IconDots, IconLoader2 } from '@tabler/icons'; import Dropdown from 'components/Dropdown'; -import { collectionClicked } from 'providers/ReduxStore/slices/collections'; -import { loadCollection, moveItemToRootOfCollection } from 'providers/ReduxStore/slices/collections/actions'; +import { collapseCollection } from 'providers/ReduxStore/slices/collections'; +import { mountCollection, moveItemToRootOfCollection } from 'providers/ReduxStore/slices/collections/actions'; import { useDispatch } from 'react-redux'; import { addTab } from 'providers/ReduxStore/slices/tabs'; import NewRequest from 'components/Sidebar/NewRequest'; @@ -29,8 +29,6 @@ const Collection = ({ collection, searchText }) => { const [showCloneCollectionModalOpen, setShowCloneCollectionModalOpen] = useState(false); const [showExportCollectionModal, setShowExportCollectionModal] = useState(false); const [showRemoveCollectionModal, setShowRemoveCollectionModal] = useState(false); - const [collectionIsCollapsed, setCollectionIsCollapsed] = useState(collection.collapsed); - const [hasCollectionLoadingBeenTriggered, setHasCollectionLoadingBeenTriggered] = useState(false); const dispatch = useDispatch(); const isLoading = areItemsLoading(collection); @@ -54,34 +52,38 @@ const Collection = ({ collection, searchText }) => { ); }; - useEffect(() => { - if (searchText && searchText.length) { - setCollectionIsCollapsed(false); - } else { - setCollectionIsCollapsed(collection.collapsed); - } - }, [searchText, collection]); + const hasSearchText = searchText && searchText?.trim()?.length; + const collectionIsCollapsed = hasSearchText ? false : collection.collapsed; const iconClassName = classnames({ 'rotate-90': !collectionIsCollapsed }); const handleClick = (event) => { - dispatch(collectionClicked(collection.uid)); - }; + // Check if the click came from the chevron icon + const isChevronClick = event.target.closest('svg')?.classList.contains('chevron-icon'); - const handleCollapseCollection = () => { - dispatch(collectionClicked(collection.uid)); - setHasCollectionLoadingBeenTriggered(true); - !hasCollectionLoadingBeenTriggered && dispatch(loadCollection({ collectionUid: collection?.uid, collectionPathname: collection?.pathname, brunoConfig: collection?.brunoConfig })); - dispatch( - addTab({ - uid: uuid(), + console.log('handleClick', collection.mountStatus); + if (collection.mountStatus === 'unmounted') { + dispatch(mountCollection({ collectionUid: collection.uid, - type: 'collection-settings' - }) - ); - } + collectionPathname: collection.pathname, + brunoConfig: collection.brunoConfig + })); + } + dispatch(collapseCollection(collection.uid)); + + // Only open collection settings if not clicking the chevron + if(!isChevronClick) { + dispatch( + addTab({ + uid: uuid(), + collectionUid: collection.uid, + type: 'collection-settings' + }) + ); + } + }; const handleRightClick = (event) => { const _menuDropdown = menuDropdownTippyRef.current; @@ -156,15 +158,14 @@ const Collection = ({ collection, searchText }) => {