Feat/support for multiple preview modes of same response type (#2606)

* pr review changes
* collection root object in export json

* import environment updates

* tests run execution order fix for collection runs

* support for multiple preview modes of same type
This commit is contained in:
lohit 2024-09-16 16:46:47 +05:30 committed by GitHub
parent 238c790f9b
commit 4f7cefe41d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 16 additions and 12 deletions

View File

@ -29,7 +29,7 @@ const QueryResultPreview = ({
setNumPages(numPages); setNumPages(numPages);
} }
// Fail safe, so we don't render anything with an invalid tab // Fail safe, so we don't render anything with an invalid tab
if (!allowedPreviewModes.includes(previewTab)) { if (!allowedPreviewModes.find((previewMode) => previewMode?.uid == previewTab?.uid)) {
return null; return null;
} }
@ -40,7 +40,7 @@ const QueryResultPreview = ({
dispatch(sendRequest(item, collection.uid)); dispatch(sendRequest(item, collection.uid));
}; };
switch (previewTab) { switch (previewTab?.mode) {
case 'preview-web': { case 'preview-web': {
const webViewSrc = data.replace('<head>', `<head><base href="${item.requestSent?.url || ''}">`); const webViewSrc = data.replace('<head>', `<head><base href="${item.requestSent?.url || ''}">`);
return ( return (

View File

@ -12,6 +12,7 @@ import { useState } from 'react';
import { useMemo } from 'react'; import { useMemo } from 'react';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { useTheme } from 'providers/Theme/index'; import { useTheme } from 'providers/Theme/index';
import { uuid } from 'utils/common/index';
const formatResponse = (data, mode, filter) => { const formatResponse = (data, mode, filter) => {
if (data === undefined) { if (data === undefined) {
@ -66,18 +67,18 @@ const QueryResult = ({ item, collection, data, dataBuffer, width, disableRunEven
const allowedPreviewModes = useMemo(() => { const allowedPreviewModes = useMemo(() => {
// Always show raw // Always show raw
const allowedPreviewModes = ['raw']; const allowedPreviewModes = [{ mode: 'raw', name: 'Raw', uid: uuid() }];
if (mode.includes('html') && typeof data === 'string') { if (mode.includes('html') && typeof data === 'string') {
allowedPreviewModes.unshift('preview-web'); allowedPreviewModes.unshift({ mode: 'preview-web', name: 'Web', uid: uuid() });
} else if (mode.includes('image')) { } else if (mode.includes('image')) {
allowedPreviewModes.unshift('preview-image'); allowedPreviewModes.unshift({ mode: 'preview-image', name: 'Image', uid: uuid() });
} else if (contentType.includes('pdf')) { } else if (contentType.includes('pdf')) {
allowedPreviewModes.unshift('preview-pdf'); allowedPreviewModes.unshift({ mode: 'preview-pdf', name: 'PDF', uid: uuid() });
} else if (contentType.includes('audio')) { } else if (contentType.includes('audio')) {
allowedPreviewModes.unshift('preview-audio'); allowedPreviewModes.unshift({ mode: 'preview-audio', name: 'Audio', uid: uuid() });
} else if (contentType.includes('video')) { } else if (contentType.includes('video')) {
allowedPreviewModes.unshift('preview-video'); allowedPreviewModes.unshift({ mode: 'preview-video', name: 'Video', uid: uuid() });
} }
return allowedPreviewModes; return allowedPreviewModes;
@ -86,7 +87,7 @@ const QueryResult = ({ item, collection, data, dataBuffer, width, disableRunEven
const [previewTab, setPreviewTab] = useState(allowedPreviewModes[0]); const [previewTab, setPreviewTab] = useState(allowedPreviewModes[0]);
// Ensure the active Tab is always allowed // Ensure the active Tab is always allowed
useEffect(() => { useEffect(() => {
if (!allowedPreviewModes.includes(previewTab)) { if (!allowedPreviewModes.find((previewMode) => previewMode?.uid == previewTab?.uid)) {
setPreviewTab(allowedPreviewModes[0]); setPreviewTab(allowedPreviewModes[0]);
} }
}, [previewTab, allowedPreviewModes]); }, [previewTab, allowedPreviewModes]);
@ -98,12 +99,15 @@ const QueryResult = ({ item, collection, data, dataBuffer, width, disableRunEven
return allowedPreviewModes.map((previewMode) => ( return allowedPreviewModes.map((previewMode) => (
<div <div
className={classnames('select-none capitalize', previewMode === previewTab ? 'active' : 'cursor-pointer')} className={classnames(
'select-none capitalize',
previewMode?.uid === previewTab?.uid ? 'active' : 'cursor-pointer'
)}
role="tab" role="tab"
onClick={() => setPreviewTab(previewMode)} onClick={() => setPreviewTab(previewMode)}
key={previewMode} key={previewMode?.uid}
> >
{previewMode.replace(/-(.*)/, ' ')} {previewMode?.name}
</div> </div>
)); ));
}, [allowedPreviewModes, previewTab]); }, [allowedPreviewModes, previewTab]);