Feat/support for multiple preview modes of same response type (usebru…

…no#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
pietrygamat · Sep 16, 2024 · 4f7cefe · 4f7cefe
1 parent 238c790
commit 4f7cefe
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git 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('<head>', `<head><base href="${item.requestSent?.url || ''}">`);
       return (

diff --git 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) => (
       <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"
         onClick={() => setPreviewTab(previewMode)}
-        key={previewMode}
+        key={previewMode?.uid}
       >
-        {previewMode.replace(/-(.*)/, ' ')}
+        {previewMode?.name}
       </div>
     ));
   }, [allowedPreviewModes, previewTab]);