feat(#205): collection properties dropdown

This commit is contained in:
Anoop M D 2023-09-24 23:53:31 +05:30
parent 18f185d37c
commit 511854369f
2 changed files with 64 additions and 0 deletions

View File

@ -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;

View File

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