diff --git a/packages/bruno-app/src/components/ResponsePane/ResponseCopy/index.js b/packages/bruno-app/src/components/ResponsePane/ResponseCopy/index.js index 9a279e5e5..72c0d1e21 100644 --- a/packages/bruno-app/src/components/ResponsePane/ResponseCopy/index.js +++ b/packages/bruno-app/src/components/ResponsePane/ResponseCopy/index.js @@ -1,15 +1,27 @@ -import React, { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react'; +import React, { useState, useEffect, forwardRef, useImperativeHandle, useRef, useMemo } from 'react'; import StyledWrapper from './StyledWrapper'; import toast from 'react-hot-toast'; import { IconCopy, IconCheck } from '@tabler/icons'; import classnames from 'classnames'; import ActionIcon from 'ui/ActionIcon/index'; +import { formatResponse } from 'utils/common'; // Hook to get copy response function -export const useResponseCopy = (item) => { - const response = item.response || {}; +export const useResponseCopy = (item, selectedFormat, selectedTab, data, dataBuffer) => { const [copied, setCopied] = useState(false); + const textToCopy = useMemo(() => { + // If preview is on, copy raw data (what's shown in TextPreview) + if (selectedTab === 'preview') { + return typeof data === 'string' ? data : JSON.stringify(data, null, 2); + } + // If editor is on, copy formatted data based on selected format + if (selectedFormat && data && dataBuffer) { + return formatResponse(data, dataBuffer, selectedFormat, null); + } + return typeof data === 'string' ? data : JSON.stringify(data, null, 2); + }, [data, dataBuffer, selectedFormat, selectedTab]); + useEffect(() => { if (copied) { const timer = setTimeout(() => { @@ -21,10 +33,6 @@ export const useResponseCopy = (item) => { const copyResponse = async () => { try { - const textToCopy = typeof response.data === 'string' - ? response.data - : JSON.stringify(response.data, null, 2); - await navigator.clipboard.writeText(textToCopy); toast.success('Response copied to clipboard'); setCopied(true); @@ -33,11 +41,11 @@ export const useResponseCopy = (item) => { } }; - return { copyResponse, copied, hasData: !!response.data }; + return { copyResponse, copied, hasData: !!data }; }; -const ResponseCopy = forwardRef(({ item, children }, ref) => { - const { copyResponse, copied, hasData } = useResponseCopy(item); +const ResponseCopy = forwardRef(({ item, children, selectedFormat, selectedTab, data, dataBuffer }, ref) => { + const { copyResponse, copied, hasData } = useResponseCopy(item, selectedFormat, selectedTab, data, dataBuffer); const elementRef = useRef(null); const isDisabled = !hasData ? true : false; diff --git a/packages/bruno-app/src/components/ResponsePane/ResponsePaneActions/index.js b/packages/bruno-app/src/components/ResponsePane/ResponsePaneActions/index.js index ed905ede0..7d6172d68 100644 --- a/packages/bruno-app/src/components/ResponsePane/ResponsePaneActions/index.js +++ b/packages/bruno-app/src/components/ResponsePane/ResponsePaneActions/index.js @@ -37,7 +37,7 @@ const MenuIcon = forwardRef((props, ref) => ( MenuIcon.displayName = 'MenuIcon'; -const ResponsePaneActions = ({ item, collection, responseSize }) => { +const ResponsePaneActions = ({ item, collection, responseSize, selectedFormat, selectedTab, data, dataBuffer }) => { const { orientation } = useResponseLayoutToggle(); // Refs to access child component imperative handles (click, isDisabled) @@ -111,13 +111,19 @@ const ResponsePaneActions = ({ item, collection, responseSize }) => {