diff --git a/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/index.js b/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/index.js
index 86d79c4bc..ff9c890f6 100644
--- a/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/index.js
@@ -29,7 +29,7 @@ const QueryResultPreview = ({
setNumPages(numPages);
}
// 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;
}
@@ -40,7 +40,7 @@ const QueryResultPreview = ({
dispatch(sendRequest(item, collection.uid));
};
- switch (previewTab) {
+ switch (previewTab?.mode) {
case 'preview-web': {
const webViewSrc = data.replace('', ``);
return (
diff --git a/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js b/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js
index da713a2c9..ccf08f316 100644
--- a/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js
@@ -12,6 +12,7 @@ import { useState } from 'react';
import { useMemo } from 'react';
import { useEffect } from 'react';
import { useTheme } from 'providers/Theme/index';
+import { uuid } from 'utils/common/index';
const formatResponse = (data, mode, filter) => {
if (data === undefined) {
@@ -66,18 +67,18 @@ const QueryResult = ({ item, collection, data, dataBuffer, width, disableRunEven
const allowedPreviewModes = useMemo(() => {
// Always show raw
- const allowedPreviewModes = ['raw'];
+ const allowedPreviewModes = [{ mode: 'raw', name: 'Raw', uid: uuid() }];
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')) {
- allowedPreviewModes.unshift('preview-image');
+ allowedPreviewModes.unshift({ mode: 'preview-image', name: 'Image', uid: uuid() });
} else if (contentType.includes('pdf')) {
- allowedPreviewModes.unshift('preview-pdf');
+ allowedPreviewModes.unshift({ mode: 'preview-pdf', name: 'PDF', uid: uuid() });
} else if (contentType.includes('audio')) {
- allowedPreviewModes.unshift('preview-audio');
+ allowedPreviewModes.unshift({ mode: 'preview-audio', name: 'Audio', uid: uuid() });
} else if (contentType.includes('video')) {
- allowedPreviewModes.unshift('preview-video');
+ allowedPreviewModes.unshift({ mode: 'preview-video', name: 'Video', uid: uuid() });
}
return allowedPreviewModes;
@@ -86,7 +87,7 @@ const QueryResult = ({ item, collection, data, dataBuffer, width, disableRunEven
const [previewTab, setPreviewTab] = useState(allowedPreviewModes[0]);
// Ensure the active Tab is always allowed
useEffect(() => {
- if (!allowedPreviewModes.includes(previewTab)) {
+ if (!allowedPreviewModes.find((previewMode) => previewMode?.uid == previewTab?.uid)) {
setPreviewTab(allowedPreviewModes[0]);
}
}, [previewTab, allowedPreviewModes]);
@@ -98,12 +99,15 @@ const QueryResult = ({ item, collection, data, dataBuffer, width, disableRunEven
return allowedPreviewModes.map((previewMode) => (
setPreviewTab(previewMode)}
- key={previewMode}
+ key={previewMode?.uid}
>
- {previewMode.replace(/-(.*)/, ' ')}
+ {previewMode?.name}
));
}, [allowedPreviewModes, previewTab]);