From d74121986a3a9476e310f3f62f5c5d396df34c60 Mon Sep 17 00:00:00 2001
From: Anoop M D <anoop.md1421@gmail.com>
Date: Tue, 18 Mar 2025 19:46:31 +0530
Subject: [PATCH] feat: improved item info ux

---
 .../CloneCollectionItem/index.js              |  2 +-
 .../CollectionItemInfo/index.js               | 64 ++++++++++++-------
 .../RenameCollectionItem/index.js             |  2 +-
 .../src/components/Sidebar/NewFolder/index.js |  2 +-
 .../components/Sidebar/NewRequest/index.js    |  2 +-
 5 files changed, 45 insertions(+), 27 deletions(-)

diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CloneCollectionItem/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CloneCollectionItem/index.js
index 6edaf33b9..9194e8a64 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CloneCollectionItem/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CloneCollectionItem/index.js
@@ -73,7 +73,7 @@ const CloneCollectionItem = ({ collection, item, onClose }) => {
           className="btn-advanced"
           type="button"
         >
-          Advanced
+          Options
         </button>
         <IconCaretDown className="caret ml-1" size={14} strokeWidth={2}/>
       </div>
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CollectionItemInfo/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CollectionItemInfo/index.js
index d2aef1e21..ca46d0d79 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CollectionItemInfo/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CollectionItemInfo/index.js
@@ -1,11 +1,10 @@
 import React from 'react';
 import Modal from 'components/Modal';
-import path from 'utils/common/path';
+import Help from 'components/Help';
+
+const CollectionItemInfo = ({ item, onClose }) => {
+  const { name, filename, type } = item;
 
-const CollectionItemInfo = ({ collection, item, onClose }) => {
-  const { pathname: collectionPathname } = collection;
-  const { name, filename, pathname, type } = item;
-  const relativePathname = path.relative(collectionPathname, pathname);
   return (
     <Modal
       size="md"
@@ -14,24 +13,43 @@ const CollectionItemInfo = ({ collection, item, onClose }) => {
       hideCancel={true}
       hideFooter={true}
     >
-        <div className="w-fit flex flex-col h-full">
-            <table className="w-full border-collapse">
-                <tbody>
-                <tr className="">
-                    <td className="py-2 px-2 text-right opacity-50">Name&nbsp;:</td>
-                    <td className="py-2 px-2 text-nowrap truncate max-w-[500px]" title={name}>{name}</td>
-                </tr>
-                <tr className="">
-                    <td className="py-2 px-2 text-right opacity-50">{type=='folder' ? 'Folder Name' : 'File Name'}&nbsp;:</td>
-                    <td className="py-2 px-2 break-all text-nowrap truncate max-w-[500px]" title={filename}>{filename}</td>
-                </tr>
-                <tr className="">
-                    <td className="py-2 px-2 text-right opacity-50">Pathname&nbsp;:</td>
-                    <td className="py-2 px-2 break-all text-nowrap truncate max-w-[500px]" title={relativePathname}>{relativePathname}</td>
-                </tr>
-                </tbody>
-            </table>
-        </div>
+      <div className="w-fit flex flex-col h-full">
+        <table className="w-full border-collapse">
+          <tbody>
+          <tr className="">
+            <td className="py-2 px-2 text-left text-muted ">
+              {type=='folder' ? 'Folder Name' : 'Request Name'}
+            </td>
+            <td className="py-2 px-2 text-nowrap truncate max-w-[500px]" title={name}>
+              <span className="mr-2">:</span>{name}
+            </td>
+          </tr>
+          <tr className="">
+            <td className="py-2 px-2 text-left text-muted flex items-center">
+              {type == 'folder' ? 'Folder Name' : 'File Name'}
+              <small className='font-normal text-muted ml-1'>(on filesystem)</small>
+              {type == 'folder' ? (
+                <Help width="300">
+                  <p>
+                    The name of the folder on your filesystem.
+                  </p>
+                </Help>
+              ) : (
+                <Help width="300">
+                  <p>
+                    Bruno saves each request as a file in your collection's folder.
+                  </p>
+                </Help>
+              )}
+            </td>
+            <td className="py-2 px-2 break-all text-nowrap truncate max-w-[500px]" title={filename}>
+              <span className="mr-2">:</span>
+              {filename}
+            </td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
     </Modal>
   );
 };
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RenameCollectionItem/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RenameCollectionItem/index.js
index 0b0350017..705c45c79 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RenameCollectionItem/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RenameCollectionItem/index.js
@@ -93,7 +93,7 @@ const RenameCollectionItem = ({ collection, item, onClose }) => {
           className="btn-advanced"
           type="button"
         >
-          Advanced
+          Options
         </button>
         <IconCaretDown className="caret ml-1" size={14} strokeWidth={2}/>
       </div>
diff --git a/packages/bruno-app/src/components/Sidebar/NewFolder/index.js b/packages/bruno-app/src/components/Sidebar/NewFolder/index.js
index 4ff681a86..c0b39b727 100644
--- a/packages/bruno-app/src/components/Sidebar/NewFolder/index.js
+++ b/packages/bruno-app/src/components/Sidebar/NewFolder/index.js
@@ -74,7 +74,7 @@ const NewFolder = ({ collection, item, onClose }) => {
           className="btn-advanced"
           type="button"
         >
-          Advanced
+          Options
         </button>
         <IconCaretDown className="caret ml-1" size={14} strokeWidth={2}/>
       </div>
diff --git a/packages/bruno-app/src/components/Sidebar/NewRequest/index.js b/packages/bruno-app/src/components/Sidebar/NewRequest/index.js
index f3ef32cba..61fdcd22a 100644
--- a/packages/bruno-app/src/components/Sidebar/NewRequest/index.js
+++ b/packages/bruno-app/src/components/Sidebar/NewRequest/index.js
@@ -243,7 +243,7 @@ const NewRequest = ({ collection, item, isEphemeral, onClose }) => {
           className="btn-advanced"
           type="button"
         >
-          Advanced
+          Options
         </button>
         <IconCaretDown className="caret ml-1" size={14} strokeWidth={2}/>
       </div>