feat: Add warning for large response

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

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const QueryResultSizeWarning = ({ size, width, dismissWarning }) => {
+  const sizeFormatted = (size / 1000 / 1000).toFixed(2);
+
+  return (
+    <div className={'mt-4 flex-col content-center'} style={{ maxWidth: width }}>
+      <div className="text-red-500">Response is larger than 5 MB ({sizeFormatted} MB)</div>
+      <div className="my-4">Showing too large responses will make Bruno unresponsive or could crash the app</div>
+
+      <button className="submit btn btn-md btn-secondary" onClick={dismissWarning}>
+        Show anyway
+      </button>
+    </div>
+  );
+};
+
+export default QueryResultSizeWarning;

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

@@ -1,12 +1,23 @@
-import React from 'react';
+import React, { useState } from 'react';
 import QueryResultError from './QueryResultError';
 import QueryResultMode from './QueryResultMode';
+import QueryResultSizeWarning from 'components/ResponsePane/QueryResult/QueryResultSizeWarning';
 
 const QueryResult = ({ item, collection, data, dataBuffer, width, disableRunEventListener, headers, error }) => {
+  const [dismissedSizeWarning, setDismissedSizeWarning] = useState(false);
+
   if (error) {
     return <QueryResultError error={error} width={width} />;
   }
 
+  console.log(item.response);
+  if (item.response?.size > 5_000_000 && !dismissedSizeWarning) {
+    const dismissWarning = () => {
+      setDismissedSizeWarning(true);
+    };
+    return <QueryResultSizeWarning size={item.response.size} width={width} dismissWarning={dismissWarning} />;
+  }
+
   return (
     <QueryResultMode
       item={item}