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) => {