extern/bruno
1
0
Fork 1
mirror of https://github.com/usebruno/bruno.git synced 2024-11-26 09:53:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(#245): Add HTML preview to response

Browse Source
This commit is contained in:
Its-treason 2023-10-02 14:26:24 +02:00
parent 78e5cd3c03
commit e720fed63b
4 changed files with 79 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/bruno-app/src/components/ResponsePane/QueryResult/StyledWrapper.js
View File

@ -1,9 +1,28 @@
import styled from 'styled-components';
const StyledWrapper = styled.div`
display: grid;
grid-template-columns: 100%;
grid-template-rows: 50px calc(100% - 50px);
/* If there is only one element (the preview, not tabs) make it span over both grid rows */
> *:last-child:first-child {
grid-row: 1 / 3;
margin-top: 1.25rem;
height: calc(100% - 1.25rem);
}
/* This is a hack to force Codemirror to use all available space */
> div {
position: relative;
}
div.CodeMirror {
/* todo: find a better way */
height: calc(100vh - 220px);
position: absolute;
top: 0;
bottom: 0;
height: 100%;
width: 100%;
}
`;

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

@ -3,11 +3,15 @@ import CodeEditor from 'components/CodeEditor';
import { useTheme } from 'providers/Theme';
import { useDispatch } from 'react-redux';
import { sendRequest } from 'providers/ReduxStore/slices/collections/actions';
import classnames from 'classnames';
import StyledWrapper from './StyledWrapper';
import { useState } from 'react';
import { useMemo } from 'react';
const QueryResult = ({ item, collection, value, width, disableRunEventListener, mode }) => {
const { storedTheme } = useTheme();
const [tab, setTab] = useState('raw');
const dispatch = useDispatch();
const onRun = () => {
@ -17,18 +21,58 @@ const QueryResult = ({ item, collection, value, width, disableRunEventListener,
dispatch(sendRequest(item, collection.uid));
};
return (
<StyledWrapper className="px-3 w-full" style={{ maxWidth: width }}>
<div className="h-full">
<CodeEditor
collection={collection}
theme={storedTheme}
onRun={onRun}
value={value || ''}
mode={mode}
readOnly
/>
const getTabClassname = (tabName) => {
return classnames(`tab select-none ${tabName}`, {
active: tabName === tab
});
};
const tabs = [(
<div className={getTabClassname('raw')} role="tab" onClick={() => setTab('raw')}>
Raw
</div>
)];
if (mode.includes('text/html')) {
tabs.push(
<div className={getTabClassname('preview')} role="tab" onClick={() => setTab('preview')}>
Preview
</div>
);
}
const activeResult = useMemo(() => {
if (tab === 'preview') {
// Add the Base tag to the head so content loads proparly. This also needs the correct CSP settings
const webViewSrc = value.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"
/>
);
}
return (
<CodeEditor
collection={collection}
theme={storedTheme}
onRun={onRun}
value={value || ''}
mode={mode}
readOnly
/>
);
}, [tab, collection, storedTheme, onRun, value, mode]);
return (
<StyledWrapper className="px-3 w-full h-full" style={{ maxWidth: width }}>
{tabs.length > 1 ? (
<div className="flex flex-wrap items-center px-3 tabs mb-3" role="tablist">
{tabs}
</div>
) : null}
{activeResult}
</StyledWrapper>
);
};

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

@ -116,7 +116,7 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
</div>
) : null}
</div>
<section className="flex flex-grow mt-5">{getTabPanel(focusedTab.responsePaneTab)}</section>
<section className="flex flex-grow">{getTabPanel(focusedTab.responsePaneTab)}</section>
</StyledWrapper>
);
};

3
packages/bruno-electron/src/index.js
View File

@ -35,7 +35,8 @@ app.on('ready', async () => {
webPreferences: {
nodeIntegration: true,
contextIsolation: true,
preload: path.join(__dirname, 'preload.js')
preload: path.join(__dirname, 'preload.js'),
webviewTag: true,
}
});