feat(#205): collection properties dropdown

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import Modal from 'components/Modal';
+
+function countRequests(items) {
+  let count = 0;
+
+  function recurse(item) {
+    if (item && typeof item === 'object') {
+      if (item.type !== 'folder') {
+        count++;
+      }
+      if (Array.isArray(item.items)) {
+        item.items.forEach(recurse);
+      }
+    }
+  }
+
+  items.forEach(recurse);
+
+  return count;
+}
+
+const CollectionProperties = ({ collection, onClose }) => {
+  return (
+    <Modal size="sm" title="Collection Properties" hideFooter={true} handleCancel={onClose}>
+      <table className="w-full border-collapse">
+        <tbody>
+          <tr className="">
+            <td className="py-2 px-2 text-right">Name&nbsp;:</td>
+            <td className="py-2 px-2">{collection.name}</td>
+          </tr>
+          <tr className="">
+            <td className="py-2 px-2 text-right">Location&nbsp;:</td>
+            <td className="py-2 px-2">{collection.pathname}</td>
+          </tr>
+          <tr className="">
+            <td className="py-2 px-2 text-right">Environments&nbsp;:</td>
+            <td className="py-2 px-2">{collection.environments.length}</td>
+          </tr>
+          <tr className="">
+            <td className="py-2 px-2 text-right">Requests&nbsp;:</td>
+            <td className="py-2 px-2">{countRequests(collection.items)}</td>
+          </tr>
+        </tbody>
+      </table>
+    </Modal>
+  );
+};
+
+export default CollectionProperties;

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

@@ -12,6 +12,7 @@ import NewRequest from 'components/Sidebar/NewRequest';
 import NewFolder from 'components/Sidebar/NewFolder';
 import CollectionItem from './CollectionItem';
 import RemoveCollection from './RemoveCollection';
+import CollectionProperties from './CollectionProperties';
 import RunCollectionItem from './CollectionItem/RunCollectionItem';
 import { doesCollectionHaveItemsMatchingSearchText } from 'utils/collections/search';
 import { isItemAFolder, isItemARequest, transformCollectionToSaveToIdb } from 'utils/collections';
@@ -26,6 +27,7 @@ const Collection = ({ collection, searchText }) => {
   const [showRenameCollectionModal, setShowRenameCollectionModal] = useState(false);
   const [showRemoveCollectionModal, setShowRemoveCollectionModal] = useState(false);
   const [showRunCollectionModal, setShowRunCollectionModal] = useState(false);
+  const [collectionPropertiesModal, setCollectionPropertiesModal] = useState(false);
   const [collectionIsCollapsed, setCollectionIsCollapsed] = useState(collection.collapsed);
   const dispatch = useDispatch();
 
@@ -106,6 +108,9 @@ const Collection = ({ collection, searchText }) => {
       {showRunCollectionModal && (
         <RunCollectionItem collection={collection} onClose={() => setShowRunCollectionModal(false)} />
       )}
+      {collectionPropertiesModal && (
+        <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}>
           <IconChevronRight
@@ -165,6 +170,15 @@ const Collection = ({ collection, searchText }) => {
             >
               Export
             </div>
+            <div
+              className="dropdown-item"
+              onClick={(e) => {
+                menuDropdownTippyRef.current.hide();
+                setCollectionPropertiesModal(true);
+              }}
+            >
+              Properties
+            </div>
             <div
               className="dropdown-item"
               onClick={(e) => {