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

packages/bruno-app/src/components/CollectionSettings/Info/StyledWrapper.js

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

packages/bruno-app/src/components/CollectionSettings/Info/index.js

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

packages/bruno-app/src/components/CollectionSettings/index.js

@@ -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)}

packages/bruno-app/src/components/RequestTabs/CollectionToolBar/index.js

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

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

@@ -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 viewCollectionSettings = () => {
-    const collectionCopy = cloneDeep(collection);
+    dispatch(
-    exportCollection(transformCollectionToSaveToExportAsFile(collectionCopy));
+      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>