feat(#989): show collection location inside collection settings

This commit is contained in:
Anoop M D 2023-11-19 15:06:13 +05:30
parent bd71adebe0
commit 9f535aeba7
5 changed files with 38 additions and 19 deletions

View File

@ -0,0 +1,13 @@
import styled from 'styled-components';
const StyledWrapper = styled.div`
table {
td {
&:first-child {
width: 120px;
}
}
}
`;
export default StyledWrapper;

View File

@ -1,5 +1,5 @@
import React from 'react';
import Modal from 'components/Modal';
import StyledWrapper from './StyledWrapper';
function countRequests(items) {
let count = 0;
@ -20,9 +20,9 @@ function countRequests(items) {
return count;
}
const CollectionProperties = ({ collection, onClose }) => {
const Info = ({ collection }) => {
return (
<Modal size="sm" title="Collection Properties" hideFooter={true} handleCancel={onClose}>
<StyledWrapper className="w-full flex flex-col h-full">
<table className="w-full border-collapse">
<tbody>
<tr className="">
@ -43,8 +43,8 @@ const CollectionProperties = ({ collection, onClose }) => {
</tr>
</tbody>
</table>
</Modal>
</StyledWrapper>
);
};
export default CollectionProperties;
export default Info;

View File

@ -14,6 +14,7 @@ import Script from './Script';
import Test from './Tests';
import Docs from './Docs';
import Presets from './Presets';
import Info from './Info';
import StyledWrapper from './StyledWrapper';
const CollectionSettings = ({ collection }) => {
@ -103,6 +104,9 @@ const CollectionSettings = ({ collection }) => {
case 'docs': {
return <Docs collection={collection} />;
}
case 'info': {
return <Info collection={collection} />;
}
}
};
@ -139,6 +143,9 @@ const CollectionSettings = ({ collection }) => {
<div className={getTabClassname('docs')} role="tab" onClick={() => setTab('docs')}>
Docs
</div>
<div className={getTabClassname('info')} role="tab" onClick={() => setTab('info')}>
Info
</div>
</div>
<section className={`flex ${['auth', 'script', 'docs', 'clientCert'].includes(tab) ? '' : 'mt-4'}`}>
{getTabPanel(tab)}

View File

@ -42,7 +42,7 @@ const CollectionToolBar = ({ collection }) => {
return (
<StyledWrapper>
<div className="flex items-center p-2">
<div className="flex flex-1 items-center">
<div className="flex flex-1 items-center cursor-pointer hover:underline" onClick={viewCollectionSettings}>
<IconFiles size={18} strokeWidth={1.5} />
<span className="ml-2 mr-4 font-semibold">{collection.name}</span>
</div>

View File

@ -2,7 +2,6 @@ import React, { useState, forwardRef, useRef, useEffect } from 'react';
import classnames from 'classnames';
import { uuid } from 'utils/common';
import filter from 'lodash/filter';
import cloneDeep from 'lodash/cloneDeep';
import { useDrop } from 'react-dnd';
import { IconChevronRight, IconDots } from '@tabler/icons';
import Dropdown from 'components/Dropdown';
@ -15,7 +14,6 @@ import NewFolder from 'components/Sidebar/NewFolder';
import CollectionItem from './CollectionItem';
import RemoveCollection from './RemoveCollection';
import ExportCollection from './ExportCollection';
import CollectionProperties from './CollectionProperties';
import { doesCollectionHaveItemsMatchingSearchText } from 'utils/collections/search';
import { isItemAFolder, isItemARequest, transformCollectionToSaveToExportAsFile } from 'utils/collections';
import exportCollection from 'utils/collections/export';
@ -29,7 +27,6 @@ const Collection = ({ collection, searchText }) => {
const [showRenameCollectionModal, setShowRenameCollectionModal] = useState(false);
const [showExportCollectionModal, setShowExportCollectionModal] = useState(false);
const [showRemoveCollectionModal, setShowRemoveCollectionModal] = useState(false);
const [collectionPropertiesModal, setCollectionPropertiesModal] = useState(false);
const [collectionIsCollapsed, setCollectionIsCollapsed] = useState(collection.collapsed);
const dispatch = useDispatch();
@ -80,9 +77,14 @@ const Collection = ({ collection, searchText }) => {
}
};
const handleExportClick = () => {
const collectionCopy = cloneDeep(collection);
exportCollection(transformCollectionToSaveToExportAsFile(collectionCopy));
const viewCollectionSettings = () => {
dispatch(
addTab({
uid: uuid(),
collectionUid: collection.uid,
type: 'collection-settings'
})
);
};
const [{ isOver }, drop] = useDrop({
@ -131,9 +133,6 @@ const Collection = ({ collection, searchText }) => {
{showExportCollectionModal && (
<ExportCollection collection={collection} onClose={() => setShowExportCollectionModal(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"
@ -201,19 +200,19 @@ const Collection = ({ collection, searchText }) => {
className="dropdown-item"
onClick={(e) => {
menuDropdownTippyRef.current.hide();
setCollectionPropertiesModal(true);
setShowRemoveCollectionModal(true);
}}
>
Properties
Remove
</div>
<div
className="dropdown-item"
onClick={(e) => {
menuDropdownTippyRef.current.hide();
setShowRemoveCollectionModal(true);
viewCollectionSettings();
}}
>
Remove
Settings
</div>
</Dropdown>
</div>