feat(#970): Add PDF Preview

Any PDF response can be now be previewed. There is no UI fancy UI interface for it for simplicity. This makes it look very similar to Postman.

packages/bruno-app/package.json

@@ -45,6 +45,7 @@
     "nanoid": "3.3.4",
     "next": "12.3.3",
     "path": "^0.12.7",
+    "pdfjs-dist": "^3.11.174",
     "platform": "^1.3.6",
     "posthog-node": "^2.1.0",
     "qs": "^6.11.0",
@@ -56,6 +57,7 @@
     "react-github-btn": "^1.4.0",
     "react-hot-toast": "^2.4.0",
     "react-inspector": "^6.0.2",
+    "react-pdf": "^7.5.1",
     "react-redux": "^7.2.6",
     "react-tooltip": "^5.5.2",
     "sass": "^1.46.0",

packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/index.js

@@ -2,6 +2,11 @@ import CodeEditor from 'components/CodeEditor/index';
 import { get } from 'lodash';
 import { useDispatch, useSelector } from 'react-redux';
 import { sendRequest } from 'providers/ReduxStore/slices/collections/actions';
+import { Document, Page } from "react-pdf";
+import { useState } from "react";
+import 'pdfjs-dist/build/pdf.worker';
+import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
+import 'react-pdf/dist/esm/Page/TextLayer.css';
 
 const QueryResultPreview = ({
   previewTab,
@@ -19,6 +24,10 @@ const QueryResultPreview = ({
   const preferences = useSelector((state) => state.app.preferences);
   const dispatch = useDispatch();
 
+  const [numPages, setNumPages] = useState(null);
+  function onDocumentLoadSuccess({ numPages }) {
+    setNumPages(numPages);
+  }
   // Fail safe, so we don't render anything with an invalid tab
   if (!allowedPreviewModes.includes(previewTab)) {
     return null;
@@ -45,6 +54,20 @@ const QueryResultPreview = ({
     case 'preview-image': {
       return <img src={`data:${contentType.replace(/\;(.*)/, '')};base64,${dataBuffer}`} className="mx-auto" />;
     }
+    case 'preview-pdf': {
+      return(
+        <div className="preview-pdf" style={{height: "100%", overflow: "auto", maxHeight:"calc(100vh - 220px)"}}>
+          <Document
+            file ={`data:application/pdf;base64,${dataBuffer}`}
+            onLoadSuccess={onDocumentLoadSuccess}
+          >
+          {Array.from(new Array(numPages), (el, index) => (
+        <Page key={`page_${index + 1}`} pageNumber={index + 1} renderAnnotationLayer={false}/>
+          ))}
+        </Document>
+        </div>
+      );
+    }
     default:
     case 'raw': {
       return (

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

@@ -18,6 +18,19 @@ const StyledWrapper = styled.div`
     width: 100%;
   }
 
+  .react-pdf__Page {
+    margin-top: 10px;
+    background-color:transparent !important;
+  }
+  .react-pdf__Page__textContent {
+    border: 1px solid darkgrey;
+    box-shadow: 5px 5px 5px 1px #ccc;
+    border-radius: 0px;
+    margin: 0 auto;
+  }
+  .react-pdf__Page__canvas {
+    margin: 0 auto;
+  }
   div[role='tablist'] {
     .active {
       color: ${(props) => props.theme.colors.text.yellow};

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

@@ -49,6 +49,8 @@ const QueryResult = ({ item, collection, data, dataBuffer, width, disableRunEven
       allowedPreviewModes.unshift('preview-web');
     } else if (mode.includes('image')) {
       allowedPreviewModes.unshift('preview-image');
+    } else if (contentType.includes("pdf")) {
+      allowedPreviewModes.unshift('preview-pdf');
     }
 
     return allowedPreviewModes;