extern/bruno
1
0
Fork 1
mirror of https://github.com/usebruno/bruno.git synced 2025-06-25 06:21:57 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(#596): Show real response in image preview

Browse Source
This commit is contained in:
Its-treason 2023-10-17 00:07:51 +02:00
parent d767a144f2
commit 187e482feb
7 changed files with 158 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/index.js Normal file
View File

@ -0,0 +1,66 @@
import CodeEditor from 'components/CodeEditor/index';
import { get } from 'lodash';
import { useDispatch, useSelector } from 'react-redux';
import { useTheme } from 'providers/theme';
const QueryResultPreview = ({
previewTab,
allowedPreviewModes,
data,
dataBuffer,
formattedData,
item,
contentType,
collection,
mode,
disableRunEventListener,
storedTheme
}) => {
const preferences = useSelector((state) => state.app.preferences);
const dispatch = useDispatch();
// Fail safe, so we don't render anything with an invalid tab
if (!allowedPreviewModes.includes(previewTab)) {
return null;
}
const onRun = () => {
if (disableRunEventListener) {
return;
}
dispatch(sendRequest(item, collection.uid));
};
switch (previewTab) {
case 'preview-web': {
const webViewSrc = data.replace('<head>', `<head><base href="${item.requestSent?.url || ''}">`);
return (
<webview
src={`data:text/html; charset=utf-8,${encodeURIComponent(webViewSrc)}`}
webpreferences="disableDialogs=true, javascript=yes"
className="h-full bg-white"
/>
);
}
case 'preview-image': {
return <img src={`data:${contentType.replace(/\;(.*)/, '')};base64,${dataBuffer}`} />;
}
default:
case 'raw': {
console.log(mode, storedTheme);
return (
<CodeEditor
collection={collection}
font={get(preferences, 'font.codeFont', 'default')}
theme={storedTheme}
onRun={onRun}
value={formattedData}
mode={mode}
readOnly
/>
);
}
}
};
export default QueryResultPreview;

150
packages/bruno-app/src/components/ResponsePane/QueryResult/index.js
View File

@ -1,26 +1,16 @@
import React from 'react'; import React from 'react';
import get from 'lodash/get';
import CodeEditor from 'components/CodeEditor';
import { useTheme } from 'providers/Theme';
import { useDispatch, useSelector } from 'react-redux';
import { sendRequest } from 'providers/ReduxStore/slices/collections/actions';
import classnames from 'classnames'; import classnames from 'classnames';
import { getContentType, safeStringifyJSON, safeParseXML } from 'utils/common'; import { getContentType, safeStringifyJSON, safeParseXML } from 'utils/common';
import { getCodeMirrorModeBasedOnContentType } from 'utils/common/codemirror'; import { getCodeMirrorModeBasedOnContentType } from 'utils/common/codemirror';
import QueryResultPreview from './QueryResultPreview';
import StyledWrapper from './StyledWrapper'; import StyledWrapper from './StyledWrapper';
import { useState } from 'react'; import { useState } from 'react';
import { useMemo } from 'react'; import { useMemo } from 'react';
import { useEffect } from 'react';
import { useTheme } from 'providers/Theme/index';
const QueryResult = ({ item, collection, data, width, disableRunEventListener, headers, error }) => { const formatResponse = (data, mode) => {
const { storedTheme } = useTheme();
const preferences = useSelector((state) => state.app.preferences);
const [tab, setTab] = useState('preview');
const dispatch = useDispatch();
const contentType = getContentType(headers);
const mode = getCodeMirrorModeBasedOnContentType(contentType);
const formatResponse = (data, mode) => {
if (!data) { if (!data) {
return ''; return '';
} }
@ -31,7 +21,6 @@ const QueryResult = ({ item, collection, data, width, disableRunEventListener, h
if (mode.includes('xml')) { if (mode.includes('xml')) {
let parsed = safeParseXML(data, { collapseContent: true }); let parsed = safeParseXML(data, { collapseContent: true });
if (typeof parsed === 'string') { if (typeof parsed === 'string') {
return parsed; return parsed;
} }
@ -39,99 +28,78 @@ const QueryResult = ({ item, collection, data, width, disableRunEventListener, h
return safeStringifyJSON(parsed, true); return safeStringifyJSON(parsed, true);
} }
if (['text', 'html'].includes(mode)) { if (['text', 'html'].includes(mode) || typeof data === 'string') {
if (typeof data === 'string') {
return data; return data;
} }
return safeStringifyJSON(data); return safeStringifyJSON(data);
};
const QueryResult = ({ item, collection, data, width, disableRunEventListener, headers, error }) => {
const contentType = getContentType(headers);
const mode = getCodeMirrorModeBasedOnContentType(contentType);
const formattedData = formatResponse(data, mode);
const { storedTheme } = useTheme();
const allowedPreviewModes = useMemo(() => {
// Always show raw
const allowedPreviewModes = ['raw'];
if (mode.includes('html') && typeof data === 'string') {
allowedPreviewModes.unshift('preview-web');
} else if (mode.includes('image')) {
allowedPreviewModes.unshift('preview-image');
} }
if (mode.includes('image')) { return allowedPreviewModes;
return item.requestSent.url; }, [mode, data, formattedData]);
const [previewTab, setPreviewTab] = useState(allowedPreviewModes[0]);
// Ensure the active Tab is always allowed
useEffect(() => {
if (!allowedPreviewModes.includes(previewTab)) {
setPreviewTab(allowedPreviewModes[0]);
} }
}, [previewTab, allowedPreviewModes]);
// final fallback const tabs = useMemo(() => {
if (typeof data === 'string') { if (allowedPreviewModes.length === 1) {
return data;
}
return safeStringifyJSON(data);
};
const value = formatResponse(data, mode);
const onRun = () => {
if (disableRunEventListener) {
return;
}
dispatch(sendRequest(item, collection.uid));
};
const getTabClassname = (tabName) => {
return classnames(`select-none ${tabName}`, {
active: tabName === tab,
'cursor-pointer': tabName !== tab
});
};
const getTabs = () => {
if (!mode.includes('html')) {
return null; return null;
} }
return ( return allowedPreviewModes.map((previewMode) => (
<> <div
<div className={getTabClassname('raw')} role="tab" onClick={() => setTab('raw')}> className={classnames('select-none capitalize', previewMode === previewTab ? 'active' : 'cursor-pointer')}
Raw role="tab"
onClick={() => setPreviewTab(previewMode)}
>
{previewMode.replace(/-(.*)/, ' ')}
</div> </div>
<div className={getTabClassname('preview')} role="tab" onClick={() => setTab('preview')}> ));
Preview }, [allowedPreviewModes, previewTab]);
</div>
</>
);
};
const activeResult = useMemo(() => {
if (
tab === 'preview' &&
mode.includes('html') &&
item.requestSent &&
item.requestSent.url &&
typeof data === 'string'
) {
// Add the Base tag to the head so content loads properly. This also needs the correct CSP settings
const webViewSrc = data.replace('<head>', `<head><base href="${item.requestSent.url}">`);
return (
<webview
src={`data:text/html; charset=utf-8,${encodeURIComponent(webViewSrc)}`}
webpreferences="disableDialogs=true, javascript=yes"
className="h-full bg-white"
/>
);
} else if (mode.includes('image')) {
return <img src={item.requestSent.url} alt="image" />;
}
return (
<CodeEditor
collection={collection}
font={get(preferences, 'font.codeFont', 'default')}
theme={storedTheme}
onRun={onRun}
value={value}
mode={mode}
readOnly
/>
);
}, [tab, collection, storedTheme, onRun, value, mode]);
return ( return (
<StyledWrapper className="w-full h-full" style={{ maxWidth: width }}> <StyledWrapper className="w-full h-full" style={{ maxWidth: width }}>
<div className="flex justify-end gap-2 text-xs" role="tablist"> <div className="flex justify-end gap-2 text-xs" role="tablist">
{getTabs()} {tabs}
</div> </div>
{error ? <span className="text-red-500">{error}</span> : activeResult} {error ? (
<span className="text-red-500">{error}</span>
) : (
<QueryResultPreview
previewTab={previewTab}
data={data}
dataBuffer={item.response.dataBuffer}
formattedData={formattedData}
item={item}
contentType={contentType}
mode={mode}
collection={collection}
allowedPreviewModes={allowedPreviewModes}
disableRunEventListener={disableRunEventListener}
storedTheme={storedTheme}
/>
)}
</StyledWrapper> </StyledWrapper>
); );
}; };

1
packages/bruno-app/src/components/ResponsePane/index.js
View File

@ -43,6 +43,7 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
data={response.data} data={response.data}
headers={response.headers} headers={response.headers}
error={response.error} error={response.error}
key={item.filename}
/> />
); );
} }

1
packages/bruno-app/src/components/RunnerResults/ResponsePane/index.js
View File

@ -35,6 +35,7 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
disableRunEventListener={true} disableRunEventListener={true}
data={responseReceived.data} data={responseReceived.data}
headers={responseReceived.headers} headers={responseReceived.headers}
key={item.filename}
/> />
); );
} }

2
packages/bruno-app/src/utils/network/index.js
View File

@ -8,6 +8,8 @@ export const sendNetworkRequest = async (item, collection, environment, collecti
resolve({ resolve({
state: 'success', state: 'success',
data: response.data, data: response.data,
// Note that the Buffer is encoded as a base64 string, because Buffers / TypedArrays are not allowed in the redux store
dataBuffer: response.dataBuffer,
headers: Object.entries(response.headers), headers: Object.entries(response.headers),
size: getResponseSize(response), size: getResponseSize(response),
status: response.status, status: response.status,

9
packages/bruno-electron/src/ipc/network/index.js
View File

@ -307,6 +307,14 @@ const registerNetworkIpc = (mainWindow) => {
/** @type {import('axios').AxiosResponse} */ /** @type {import('axios').AxiosResponse} */
const response = await axiosInstance(request); const response = await axiosInstance(request);
const dataBuffer = Buffer.from(response.data);
// Overwrite the original data for backwards compatability
response.data = dataBuffer.toString('utf-8');
// Try to parse response to JSON, this can quitly fail
try {
response.data = JSON.parse(response.data);
} catch {}
// run post-response vars // run post-response vars
const postResponseVars = get(request, 'vars.res', []); const postResponseVars = get(request, 'vars.res', []);
if (postResponseVars?.length) { if (postResponseVars?.length) {
@ -424,6 +432,7 @@ const registerNetworkIpc = (mainWindow) => {
statusText: response.statusText, statusText: response.statusText,
headers: response.headers, headers: response.headers,
data: response.data, data: response.data,
dataBuffer: dataBuffer.toString('base64'),
duration: requestDuration duration: requestDuration
}; };
} catch (error) { } catch (error) {

3
packages/bruno-electron/src/ipc/network/prepare-request.js
View File

@ -84,7 +84,8 @@ const prepareRequest = (request, collectionRoot) => {
let axiosRequest = { let axiosRequest = {
method: request.method, method: request.method,
url: request.url, url: request.url,
headers: headers headers: headers,
responseType: 'arraybuffer'
}; };
axiosRequest = setAuthHeaders(axiosRequest, request, collectionRoot); axiosRequest = setAuthHeaders(axiosRequest, request, collectionRoot);