From d3337c8e9e07282ee79796a7af948d784bda02d3 Mon Sep 17 00:00:00 2001
From: Chirag Chandrashekhar <chirag@usebruno.com>
Date: Wed, 11 Feb 2026 21:15:25 +0530
Subject: [PATCH] Fix/save transient request new folder theme match (#7116)

* fix: match filesystem name input style to NewFolder modal in SaveTransientRequest

- Update label to match NewFolder format with '(on filesystem)' suffix
- Add folder icon before the input field
- Apply PathDisplay-like styling with yellow text color and monospace font
- Use matching background, border, and padding from PathDisplay component

* fix: add edit toggle and help tooltip to SaveTransientRequest filesystem name

- Add edit/display mode toggle matching NewFolder modal behavior
- Show PathDisplay when not editing, input field when editing
- Add Help tooltip with placement support for filesystem name field
- Add placement prop to Help component (top, bottom, left, right)
- Remove unused filesystem input styles from StyledWrapper

* fix: update Help component usage in SaveTransientRequest filesystem name field

- Change Help component width prop from a string to a number for consistency.
---
 .../bruno-app/src/components/Help/index.js    | 36 +++++++-
 .../components/SaveTransientRequest/index.js  | 86 +++++++++++++------
 2 files changed, 91 insertions(+), 31 deletions(-)

diff --git a/packages/bruno-app/src/components/Help/index.js b/packages/bruno-app/src/components/Help/index.js
index ce259712a..f8ff625a5 100644
--- a/packages/bruno-app/src/components/Help/index.js
+++ b/packages/bruno-app/src/components/Help/index.js
@@ -8,7 +8,37 @@ import React, { useState } from 'react';
 import HelpIcon from 'components/Icons/Help';
 import StyledWrapper from './StyledWrapper';
 
-const Help = ({ children, width = 200 }) => {
+const getPlacementStyles = (placement) => {
+  switch (placement) {
+    case 'top':
+      return {
+        bottom: 'calc(100% + 8px)',
+        left: '50%',
+        transform: 'translateX(-50%)'
+      };
+    case 'bottom':
+      return {
+        top: 'calc(100% + 8px)',
+        left: '50%',
+        transform: 'translateX(-50%)'
+      };
+    case 'left':
+      return {
+        top: '50%',
+        right: 'calc(100% + 8px)',
+        transform: 'translateY(-50%)'
+      };
+    case 'right':
+    default:
+      return {
+        top: '50%',
+        left: 'calc(100% + 8px)',
+        transform: 'translateY(-50%)'
+      };
+  }
+};
+
+const Help = ({ children, width = 200, placement = 'right' }) => {
   const [showTooltip, setShowTooltip] = useState(false);
 
   return (
@@ -24,9 +54,7 @@ const Help = ({ children, width = 200 }) => {
         <StyledWrapper
           className="absolute z-50 rounded-md p-3"
           style={{
-            top: '50%',
-            left: 'calc(100% + 8px)',
-            transform: 'translateY(-50%)',
+            ...getPlacementStyles(placement),
             width: `${width}px`
           }}
         >
diff --git a/packages/bruno-app/src/components/SaveTransientRequest/index.js b/packages/bruno-app/src/components/SaveTransientRequest/index.js
index 16ff359d7..1660a3318 100644
--- a/packages/bruno-app/src/components/SaveTransientRequest/index.js
+++ b/packages/bruno-app/src/components/SaveTransientRequest/index.js
@@ -3,7 +3,9 @@ import { useSelector, useDispatch } from 'react-redux';
 import Modal from 'components/Modal';
 import SearchInput from 'components/SearchInput';
 import Button from 'ui/Button';
-import { IconFolder, IconChevronRight, IconCheck, IconX, IconEye, IconEyeOff } from '@tabler/icons';
+import { IconFolder, IconChevronRight, IconCheck, IconX, IconEye, IconEyeOff, IconEdit, IconArrowBackUp } from '@tabler/icons';
+import PathDisplay from 'components/PathDisplay/index';
+import Help from 'components/Help';
 import filter from 'lodash/filter';
 import toast from 'react-hot-toast';
 import StyledWrapper from './StyledWrapper';
@@ -203,11 +205,6 @@ const SaveTransientRequest = ({ item: itemProp, collection: collectionProp, isOp
     }
   };
 
-  const handleDirectoryNameChange = (value) => {
-    setNewFolderDirectoryName(value);
-    setIsEditingFolderFilename(true);
-  };
-
   const handleCreateNewFolder = async () => {
     const trimmedFolderName = newFolderName.trim();
 
@@ -382,28 +379,63 @@ const SaveTransientRequest = ({ item: itemProp, collection: collectionProp, isOp
 
                       {showFilesystemName && (
                         <div className="new-folder-filesystem-wrapper">
-                          <label className="new-folder-filesystem-label flex items-center font-medium">
-                            Folder Name <small className="font-normal text-muted ml-1">(on filesystem)</small>
-                          </label>
-                          <div className="filesystem-input-container">
-                            <IconFolder size={16} className="filesystem-input-icon" />
-                            <input
-                              type="text"
-                              className="filesystem-input font-mono"
-                              value={newFolderDirectoryName}
-                              onChange={(e) => handleDirectoryNameChange(e.target.value)}
-                              onKeyDown={(e) => {
-                                if (e.key === 'Enter') {
-                                  e.preventDefault();
-                                  e.stopPropagation();
-                                  handleCreateNewFolder();
-                                } else if (e.key === 'Escape') {
-                                  e.stopPropagation();
-                                  handleCancelNewFolder();
-                                }
-                              }}
-                            />
+                          <div className="flex items-center justify-between">
+                            <label className="new-folder-filesystem-label flex items-center font-medium">
+                              Folder Name <small className="font-normal text-muted ml-1">(on filesystem)</small>
+                              <Help width={300} placement="top">
+                                <p>
+                                  You can choose to save the folder as a different name on your file system versus what is displayed in the app.
+                                </p>
+                              </Help>
+                            </label>
+                            {isEditingFolderFilename ? (
+                              <IconArrowBackUp
+                                className="cursor-pointer opacity-50 hover:opacity-80"
+                                size={16}
+                                strokeWidth={1.5}
+                                onClick={() => setIsEditingFolderFilename(false)}
+                              />
+                            ) : (
+                              <IconEdit
+                                className="cursor-pointer opacity-50 hover:opacity-80"
+                                size={16}
+                                strokeWidth={1.5}
+                                onClick={() => setIsEditingFolderFilename(true)}
+                              />
+                            )}
                           </div>
+                          {isEditingFolderFilename ? (
+                            <div className="relative flex flex-row gap-1 items-center justify-between">
+                              <input
+                                type="text"
+                                className="block textbox mt-2 w-full"
+                                placeholder="Folder Name"
+                                value={newFolderDirectoryName}
+                                autoComplete="off"
+                                autoCorrect="off"
+                                autoCapitalize="off"
+                                spellCheck="false"
+                                onChange={(e) => setNewFolderDirectoryName(e.target.value)}
+                                onKeyDown={(e) => {
+                                  if (e.key === 'Enter') {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    handleCreateNewFolder();
+                                  } else if (e.key === 'Escape') {
+                                    e.stopPropagation();
+                                    handleCancelNewFolder();
+                                  }
+                                }}
+                              />
+                            </div>
+                          ) : (
+                            <div className="relative flex flex-row gap-1 items-center justify-between">
+                              <PathDisplay
+                                iconType="folder"
+                                baseName={newFolderDirectoryName}
+                              />
+                            </div>
+                          )}
                         </div>
                       )}