Merge pull request #1184 from smebberson/feature/clear-response

You can now clear a response.

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;

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;

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>

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} />