diff --git a/packages/bruno-app/src/components/SaveTransientRequest/StyledWrapper.js b/packages/bruno-app/src/components/SaveTransientRequest/StyledWrapper.js index 1c0fa096b..dc7a956b8 100644 --- a/packages/bruno-app/src/components/SaveTransientRequest/StyledWrapper.js +++ b/packages/bruno-app/src/components/SaveTransientRequest/StyledWrapper.js @@ -163,30 +163,17 @@ const StyledWrapper = styled.div` padding-top: 12px; } - .new-folder-content { + .new-folder-header { display: flex; - align-items: flex-start; + align-items: center; gap: 8px; + margin-bottom: 4px; } - .new-folder-inputs { - display: flex; - flex-direction: column; - gap: 8px; - flex: 1; - } - - .new-folder-name-input-wrapper { - display: flex; - flex-direction: column; - gap: 6px; - flex: 1; - } - - .new-folder-name-label { - font-size: 12px; + .new-folder-header-label { + font-size: 13px; font-weight: 500; - color: ${(props) => props.theme.colors.text.muted}; + color: ${(props) => props.theme.text}; } .new-folder-input-row { @@ -247,13 +234,12 @@ const StyledWrapper = styled.div` display: flex; flex-direction: column; gap: 6px; - margin-top: 4px; } .new-folder-filesystem-label { - font-size: 12px; + font-size: 13px; font-weight: 500; - color: ${(props) => props.theme.colors.text.muted}; + color: ${(props) => props.theme.text}; } .new-folder-toggle-filesystem-btn { diff --git a/packages/bruno-app/src/components/SaveTransientRequest/index.js b/packages/bruno-app/src/components/SaveTransientRequest/index.js index 9bad4c86d..580e815d1 100644 --- a/packages/bruno-app/src/components/SaveTransientRequest/index.js +++ b/packages/bruno-app/src/components/SaveTransientRequest/index.js @@ -45,6 +45,8 @@ const SaveTransientRequest = ({ item: itemProp, collection: collectionProp, isOp const [newFolderName, setNewFolderName] = useState(''); const [newFolderDirectoryName, setNewFolderDirectoryName] = useState(''); const [showFilesystemName, setShowFilesystemName] = useState(false); + const [isEditingFolderFilename, setIsEditingFolderFilename] = useState(false); + const [pendingFolderNavigation, setPendingFolderNavigation] = useState(null); const newFolderInputRef = useRef(null); const { @@ -68,6 +70,8 @@ const SaveTransientRequest = ({ item: itemProp, collection: collectionProp, isOp setNewFolderName(''); setNewFolderDirectoryName(''); setShowFilesystemName(false); + setIsEditingFolderFilename(false); + setPendingFolderNavigation(null); }; useEffect(() => { @@ -80,6 +84,17 @@ const SaveTransientRequest = ({ item: itemProp, collection: collectionProp, isOp } }, [showNewFolderInput]); + // Auto-navigate into newly created folder when it appears in currentFolders + useEffect(() => { + if (pendingFolderNavigation) { + const newFolder = currentFolders.find((f) => f.filename === pendingFolderNavigation); + if (newFolder) { + navigateIntoFolder(newFolder.uid); + setPendingFolderNavigation(null); + } + } + }, [currentFolders, pendingFolderNavigation, navigateIntoFolder]); + const filteredFolders = useMemo(() => { if (!searchText.trim()) { return currentFolders; @@ -165,6 +180,7 @@ const SaveTransientRequest = ({ item: itemProp, collection: collectionProp, isOp setNewFolderName(''); setNewFolderDirectoryName(''); setShowFilesystemName(false); + setIsEditingFolderFilename(false); }; const handleCancelNewFolder = () => { @@ -172,26 +188,43 @@ const SaveTransientRequest = ({ item: itemProp, collection: collectionProp, isOp setNewFolderName(''); setNewFolderDirectoryName(''); setShowFilesystemName(false); + setIsEditingFolderFilename(false); }; const handleNewFolderNameChange = (value) => { setNewFolderName(value); - if (!showFilesystemName) { + if (!isEditingFolderFilename) { setNewFolderDirectoryName(sanitizeName(value)); } }; const handleDirectoryNameChange = (value) => { setNewFolderDirectoryName(value); + setIsEditingFolderFilename(true); }; const handleCreateNewFolder = async () => { - const directoryName = newFolderDirectoryName.trim() || sanitizeName(newFolderName.trim()); + const trimmedFolderName = newFolderName.trim(); + + if (!trimmedFolderName) { + toast.error('Folder name is required'); + return; + } + + if (!validateName(trimmedFolderName)) { + toast.error(validateNameError(trimmedFolderName)); + return; + } + + const directoryName = newFolderDirectoryName.trim() || sanitizeName(trimmedFolderName); const parentFolder = getCurrentParentFolder(); try { - await dispatch(newFolder(newFolderName.trim(), directoryName, collection?.uid, parentFolder?.uid)); + await dispatch(newFolder(trimmedFolderName, directoryName, collection?.uid, parentFolder?.uid)); toast.success('New folder created!'); + + // Set pending navigation - useEffect will navigate when folder appears in state + setPendingFolderNavigation(directoryName); handleCancelNewFolder(); } catch (err) { const errorMessage = err?.message || 'An error occurred while adding the folder'; @@ -297,76 +330,80 @@ const SaveTransientRequest = ({ item: itemProp, collection: collectionProp, isOp ))} {showNewFolderInput && (