HTTP stream enhancements (#6077)

* feat: add stop request button in api url bar

* docs: add farsi translation

* fix: handle escaped forward slashes by fast-json-format library upgrade

* refactor: change ui to use one from Websockets

* chore: cleanup

* fix: lint issues

* Replace IconPlayerStop with IconSquareRoundedX

* update json request and response formatting logic

* chore: format changes

* chore: remove un-needed diffs

* chore: sanitize

* bugfix(#5939): curl import fails for custom content-types

* chore: remove un-needed diffs

* chore: enhance response handling for streaming

* fix: disable requestid check for tests and assertions to be updated after streaming result

* chore: housekeeping

* fix: streamline loading and cancel request icon logic

* chore: formatting

* fix: multiple co-pilot changes

* fix: handle in folders

* feat: add WaitGroup utility for managing concurrent tasks

* refactor: remove WaitGroup utility and clean up network IPC logic

* refactor: remove unused setTimeout import and clean up post script execution

* refactor: clean up post-response script execution logic

* undiff

* re-align

* refactor: streamline post-response script execution

- Cleaned up formatting and improved readability of the post-response script execution logic.
- Consolidated parameters in function calls for consistency.

* fix: keep original dataBuffer for saving response

---------

Co-authored-by: adarshajit <adarshajit@gmail.com>
Co-authored-by: sajadoncode <sajadoncode@gmail.com>
Co-authored-by: lohit-bruno <lohit@usebruno.com>
Co-authored-by: Bijin A B <bijin@usebruno.com>
Co-authored-by: Pragadesh-45 <temporaryg7904@gmail.com>
Co-authored-by: Anoop M D <anoop@usebruno.com>
Co-authored-by: Anoop M D <anoop.md1421@gmail.com>
Co-authored-by: Dawid Góra <dawidgora@icloud.com>

packages/bruno-app/src/components/RequestPane/QueryUrl/index.js

@@ -2,10 +2,10 @@ import React, { useState, useEffect, useRef, useMemo } from 'react';
 import get from 'lodash/get';
 import { useDispatch } from 'react-redux';
 import { requestUrlChanged, updateRequestMethod } from 'providers/ReduxStore/slices/collections';
-import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+import { cancelRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import HttpMethodSelector from './HttpMethodSelector';
 import { useTheme } from 'providers/Theme';
-import { IconDeviceFloppy, IconArrowRight, IconCode, IconX } from '@tabler/icons';
+import { IconDeviceFloppy, IconArrowRight, IconCode, IconSquareRoundedX } from '@tabler/icons';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { isMacOS } from 'utils/common/platform';
 import { hasRequestChanges } from 'utils/collections';
@@ -22,6 +22,7 @@ const QueryUrl = ({ item, collection, handleRun }) => {
   const saveShortcut = isMac ? 'Cmd + S' : 'Ctrl + S';
   const editorRef = useRef(null);
   const isGrpc = item.type === 'grpc-request';
+  const isLoading = ['queued', 'sending'].includes(item.requestState);
 
   const [methodSelectorWidth, setMethodSelectorWidth] = useState(90);
   const [generateCodeItemModalOpen, setGenerateCodeItemModalOpen] = useState(false);
@@ -80,6 +81,10 @@ const QueryUrl = ({ item, collection, handleRun }) => {
     }
   };
 
+  const handleCancelRequest = () => {
+    dispatch(cancelRequest(item.cancelTokenUid, item, collection));
+  };
+
   return (
     <StyledWrapper className="flex items-center">
       <div className="flex flex-1 items-center h-full method-selector-container">
@@ -87,7 +92,7 @@ const QueryUrl = ({ item, collection, handleRun }) => {
           <div className="flex items-center justify-center h-full w-16">
             <span className="text-xs text-indigo-500 font-bold">gRPC</span>
           </div>
-
+          
         ) : (
           <HttpMethodSelector method={method} onMethodSelect={onMethodSelect} />
         )}
@@ -149,11 +154,23 @@ const QueryUrl = ({ item, collection, handleRun }) => {
               Save <span className="shortcut">({saveShortcut})</span>
             </span>
           </div>
+
           {
-            item.response?.hasStreamRunning ? (
-              <IconX color={theme.requestTabPanel.url.icon} strokeWidth={1.5} size={22} />
+            isLoading || item.response?.stream?.running ? (
+              <IconSquareRoundedX
+                color={theme.requestTabPanel.url.icon}
+                strokeWidth={1.5}
+                size={22}
+                data-testid="cancel-request-icon"
+                onClick={handleCancelRequest}
+              />
             ) : (
-              <IconArrowRight color={theme.requestTabPanel.url.icon} strokeWidth={1.5} size={22} data-testid="send-arrow-icon" />
+              <IconArrowRight
+                color={theme.requestTabPanel.url.icon}
+                strokeWidth={1.5}
+                size={22}
+                data-testid="send-arrow-icon"
+              />
             )
           }
         </div>