diff --git a/packages/bruno-app/src/components/ResponsePane/ResponseBookmark/index.js b/packages/bruno-app/src/components/ResponsePane/ResponseBookmark/index.js index fb16597f3..cf004f4d5 100644 --- a/packages/bruno-app/src/components/ResponsePane/ResponseBookmark/index.js +++ b/packages/bruno-app/src/components/ResponsePane/ResponseBookmark/index.js @@ -1,18 +1,23 @@ -import React, { useState } from 'react'; +import React, { useState, useMemo } from 'react'; import { useDispatch } from 'react-redux'; import { IconBookmark } from '@tabler/icons'; import { addResponseExample } from 'providers/ReduxStore/slices/collections'; import { saveRequest } from 'providers/ReduxStore/slices/collections/actions'; +import { insertTaskIntoQueue } from 'providers/ReduxStore/slices/app'; +import { uuid } from 'utils/common'; import toast from 'react-hot-toast'; import CreateExampleModal from 'components/ResponseExample/CreateExampleModal'; -import { getBodyType, processResponseContent } from 'utils/responseBodyProcessor'; +import { getBodyType } from 'utils/responseBodyProcessor'; +import classnames from 'classnames'; import StyledWrapper from './StyledWrapper'; -const ResponseBookmark = ({ item, collection }) => { +const ResponseBookmark = ({ item, collection, responseSize }) => { const dispatch = useDispatch(); const [showSaveResponseExampleModal, setShowSaveResponseExampleModal] = useState(false); const response = item.response || {}; + const isResponseTooLarge = responseSize >= 5 * 1024 * 1024; // 5 MB + // Only show for HTTP requests if (item.type !== 'http-request') { return null; @@ -50,10 +55,16 @@ const ResponseBookmark = ({ item, collection }) => { toast.error('No valid response to save as example'); return; } + + if (isResponseTooLarge) { + toast.error('Response size exceeds 5MB limit. Cannot save as example.'); + return; + } + setShowSaveResponseExampleModal(true); }; - const saveAsExample = (name, description = '') => { + const saveAsExample = async (name, description = '') => { // Convert headers object to array format expected by schema const headersArray = response.headers && typeof response.headers === 'object' ? Object.entries(response.headers).map(([name, value]) => ({ @@ -80,12 +91,33 @@ const ResponseBookmark = ({ item, collection }) => { description: description }; + // Calculate the index where the example will be saved + // This will be the length of the examples array after adding the new one + const existingExamples = item.draft?.examples || item.examples || []; + const exampleIndex = existingExamples.length; + const exampleUid = uuid(); + dispatch(addResponseExample({ itemUid: item.uid, collectionUid: collection.uid, - example: exampleData + example: { + ...exampleData, + uid: exampleUid + } })); - dispatch(saveRequest(item.uid, collection.uid)); + + // Save the request + await dispatch(saveRequest(item.uid, collection.uid)); + + // Task middleware will track this and open the example in a new tab once the file is reloaded + dispatch(insertTaskIntoQueue({ + uid: exampleUid, + type: 'OPEN_EXAMPLE', + collectionUid: collection.uid, + itemUid: item.uid, + exampleIndex: exampleIndex + })); + setShowSaveResponseExampleModal(false); toast.success(`Example "${name}" created successfully`); }; @@ -95,9 +127,15 @@ const ResponseBookmark = ({ item, collection }) => {