check response type to show XML not surrounded by quotation marks and with highlighting

This commit is contained in:
Mirko Golze 2023-09-16 22:24:35 +02:00
parent c020cd94a8
commit f189cb1a2e
3 changed files with 40 additions and 17 deletions

View File

@ -35,7 +35,7 @@ const EnvironmentSelector = ({ collection }) => {
toast.success(`No Environments are active now`); toast.success(`No Environments are active now`);
} }
}) })
.catch((err) => console.log(err) && toast.error('An error occured while selecting the environment')); .catch((err) => console.log(err) && toast.error('An error occurred while selecting the environment'));
}; };
return ( return (
@ -64,7 +64,7 @@ const EnvironmentSelector = ({ collection }) => {
}} }}
> >
<IconDatabaseOff size={18} strokeWidth={1.5} /> <IconDatabaseOff size={18} strokeWidth={1.5} />
<span className='ml-2'>No Environment</span> <span className="ml-2">No Environment</span>
</div> </div>
<div className="dropdown-item border-top" onClick={() => setOpenSettingsModal(true)}> <div className="dropdown-item border-top" onClick={() => setOpenSettingsModal(true)}>
<div className="pr-2 text-gray-600"> <div className="pr-2 text-gray-600">

View File

@ -6,14 +6,12 @@ import { sendRequest } from 'providers/ReduxStore/slices/collections/actions';
import StyledWrapper from './StyledWrapper'; import StyledWrapper from './StyledWrapper';
const QueryResult = ({ item, collection, value, width, disableRunEventListener }) => { const QueryResult = ({ item, collection, value, width, disableRunEventListener, mode }) => {
const { const { storedTheme } = useTheme();
storedTheme
} = useTheme();
const dispatch = useDispatch(); const dispatch = useDispatch();
const onRun = () => { const onRun = () => {
if(disableRunEventListener) { if (disableRunEventListener) {
return; return;
} }
dispatch(sendRequest(item, collection.uid)); dispatch(sendRequest(item, collection.uid));
@ -22,7 +20,7 @@ const QueryResult = ({ item, collection, value, width, disableRunEventListener }
return ( return (
<StyledWrapper className="px-3 w-full" style={{ maxWidth: width }}> <StyledWrapper className="px-3 w-full" style={{ maxWidth: width }}>
<div className="h-full"> <div className="h-full">
<CodeEditor collection={collection} theme={storedTheme} onRun={onRun} value={value || ''} readOnly /> <CodeEditor collection={collection} theme={storedTheme} onRun={onRun} value={value || ''} mode={mode} readOnly />
</div> </div>
</StyledWrapper> </StyledWrapper>
); );

View File

@ -2,7 +2,7 @@ import React from 'react';
import find from 'lodash/find'; import find from 'lodash/find';
import classnames from 'classnames'; import classnames from 'classnames';
import { safeStringifyJSON } from 'utils/common'; import { safeStringifyJSON } from 'utils/common';
import { useSelector, useDispatch } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import { updateResponsePaneTab } from 'providers/ReduxStore/slices/tabs'; import { updateResponsePaneTab } from 'providers/ReduxStore/slices/tabs';
import QueryResult from './QueryResult'; import QueryResult from './QueryResult';
import Overlay from './Overlay'; import Overlay from './Overlay';
@ -36,18 +36,21 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
const getTabPanel = (tab) => { const getTabPanel = (tab) => {
switch (tab) { switch (tab) {
case 'response': { case 'response': {
return <QueryResult return (
item={item} <QueryResult
collection={collection} item={item}
width={rightPaneWidth} collection={collection}
value={response.data ? safeStringifyJSON(response.data, true) : ''} width={rightPaneWidth}
/>; value={response.data ? (isJson(response.headers) ? safeStringifyJSON(response.data, true) : response.data) : ''}
mode={getContentType(response.headers)}
/>
);
} }
case 'headers': { case 'headers': {
return <ResponseHeaders headers={response.headers} />; return <ResponseHeaders headers={response.headers} />;
} }
case 'timeline': { case 'timeline': {
return <Timeline request={item.requestSent} response={item.response}/>; return <Timeline request={item.requestSent} response={item.response} />;
} }
case 'tests': { case 'tests': {
return <TestResults results={item.testResults} assertionResults={item.assertionResults} />; return <TestResults results={item.testResults} assertionResults={item.assertionResults} />;
@ -81,7 +84,7 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
const focusedTab = find(tabs, (t) => t.uid === activeTabUid); const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
if (!focusedTab || !focusedTab.uid || !focusedTab.responsePaneTab) { if (!focusedTab || !focusedTab.uid || !focusedTab.responsePaneTab) {
return <div className="pb-4 px-4">An error occured!</div>; return <div className="pb-4 px-4">An error occurred!</div>;
} }
const getTabClassname = (tabName) => { const getTabClassname = (tabName) => {
@ -90,6 +93,28 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
}); });
}; };
const getContentType = (headers) => {
if (headers && headers.length) {
let contentType = headers
.filter((header) => header[0].toLowerCase() === 'content-type')
.map((header) => {
return header[1];
});
if (contentType && contentType.length) {
if (typeof contentType[0] == 'string' && /^[\w\-]+\/([\w\-]+\+)?json/.test(contentType[0])) {
return 'application/ld+json';
} else if (typeof contentType[0] == 'string' && /^[\w\-]+\/([\w\-]+\+)?xml/.test(contentType[0])) {
return 'application/xml';
}
}
}
return '';
};
const isJson = (headers) => {
return getContentType(headers) === 'application/ld+json';
};
return ( return (
<StyledWrapper className="flex flex-col h-full relative"> <StyledWrapper className="flex flex-col h-full relative">
<div className="flex items-center px-3 tabs" role="tablist"> <div className="flex items-center px-3 tabs" role="tablist">