From 08935c64bba17265140d11a248eba4c457ad806c Mon Sep 17 00:00:00 2001
From: Scott Mebberson <74628+smebberson@users.noreply.github.com>
Date: Fri, 8 Dec 2023 08:35:35 +1030
Subject: [PATCH] You can now clear a response.

---
 .../ResponseClear/StyledWrapper.js            |  8 ++++++
 .../ResponsePane/ResponseClear/index.js       | 28 +++++++++++++++++++
 .../ResponsePane/ResponseSave/index.js        |  2 +-
 .../src/components/ResponsePane/index.js      |  2 ++
 4 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 packages/bruno-app/src/components/ResponsePane/ResponseClear/StyledWrapper.js
 create mode 100644 packages/bruno-app/src/components/ResponsePane/ResponseClear/index.js

diff --git a/packages/bruno-app/src/components/ResponsePane/ResponseClear/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/ResponseClear/StyledWrapper.js
new file mode 100644
index 000000000..8c32a8bab
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponsePane/ResponseClear/StyledWrapper.js
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  font-size: 0.8125rem;
+  color: ${(props) => props.theme.requestTabPanel.responseStatus};
+`;
+
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/ResponsePane/ResponseClear/index.js b/packages/bruno-app/src/components/ResponsePane/ResponseClear/index.js
new file mode 100644
index 000000000..7c2d6bbcf
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponsePane/ResponseClear/index.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { IconEraser } from '@tabler/icons';
+import { useDispatch } from 'react-redux';
+import StyledWrapper from './StyledWrapper';
+import { responseReceived } from 'providers/ReduxStore/slices/collections/index';
+
+const ResponseClear = ({ collection, item }) => {
+  const dispatch = useDispatch();
+  const response = item.response || {};
+
+  const clearResponse = () =>
+    dispatch(
+      responseReceived({
+        itemUid: item.uid,
+        collectionUid: collection.uid,
+        response: null
+      })
+    );
+
+  return (
+    <StyledWrapper className="ml-2 flex items-center">
+      <button onClick={clearResponse} disabled={!response.dataBuffer} title="Clear response">
+        <IconEraser size={16} strokeWidth={1.5} />
+      </button>
+    </StyledWrapper>
+  );
+};
+export default ResponseClear;
diff --git a/packages/bruno-app/src/components/ResponsePane/ResponseSave/index.js b/packages/bruno-app/src/components/ResponsePane/ResponseSave/index.js
index e924afa4e..7c183b0a6 100644
--- a/packages/bruno-app/src/components/ResponsePane/ResponseSave/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/ResponseSave/index.js
@@ -21,7 +21,7 @@ const ResponseSave = ({ item }) => {
   };
 
   return (
-    <StyledWrapper className="ml-4 flex items-center">
+    <StyledWrapper className="ml-2 flex items-center">
       <button onClick={saveResponseToFile} disabled={!response.dataBuffer} title="Save response to file">
         <IconDownload size={16} strokeWidth={1.5} />
       </button>
diff --git a/packages/bruno-app/src/components/ResponsePane/index.js b/packages/bruno-app/src/components/ResponsePane/index.js
index 37419e048..02edc106e 100644
--- a/packages/bruno-app/src/components/ResponsePane/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/index.js
@@ -15,6 +15,7 @@ import TestResults from './TestResults';
 import TestResultsLabel from './TestResultsLabel';
 import StyledWrapper from './StyledWrapper';
 import ResponseSave from 'src/components/ResponsePane/ResponseSave';
+import ResponseClear from 'src/components/ResponsePane/ResponseClear';
 
 const ResponsePane = ({ rightPaneWidth, item, collection }) => {
   const dispatch = useDispatch();
@@ -114,6 +115,7 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
         </div>
         {!isLoading ? (
           <div className="flex flex-grow justify-end items-center">
+            <ResponseClear item={item} collection={collection} />
             <ResponseSave item={item} />
             <StatusCode status={response.status} />
             <ResponseTime duration={response.duration} />