feat: response timeline

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

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .line {
+    white-space: pre-line;
+    word-wrap: break-word;
+    word-break: break-all;
+
+    .arrow {
+      opacity: 0.5;
+    }
+
+    &.request {
+      color: ${(props) => props.theme.colors.text.green};
+    }
+
+    &.response {
+      color: ${(props) => props.theme.colors.text.purple};
+    }
+  }
+`;
+
+export default StyledWrapper;

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import forOwn from 'lodash/forOwn';
+import StyledWrapper from './StyledWrapper';
+
+const Timeline = ({ item }) => {
+  const request = item.requestSent || {};
+  const response = item.response || {};
+  const requestHeaders = [];
+  const responseHeaders = response.headers || [];
+
+  forOwn(request.headers, (value, key) => {
+    requestHeaders.push({
+      name: key,
+      value
+    });
+  });
+
+  return (
+    <StyledWrapper className="px-3 pb-4 w-full">
+      <div>
+        <pre className='line request font-bold'>
+          <span className="arrow">{'>'}</span> {request.method} {request.url}
+        </pre>
+        {requestHeaders.map((h) => {
+          return (
+            <pre className='line request' key={h.name}>
+              <span className="arrow">{'>'}</span> {h.name}: {h.value}
+            </pre>
+          );
+        })}
+
+        <pre className='line request'>
+          <span className="arrow">{'>'}</span> data {request.data ? request.data : 'null'}
+        </pre>
+      </div>
+
+      <div className='mt-4'>
+        <pre className='line response font-bold'>
+          <span className="arrow">{'<'}</span> {response.status} {response.statusText}
+        </pre>
+
+        {responseHeaders.map((h) => {
+          return (
+            <pre className='line response' key={h[0]}>
+              <span className="arrow">{'<'}</span> {h[0]}: {h[1]}
+            </pre>
+          );
+        })}
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default Timeline;

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

@@ -10,6 +10,7 @@ import ResponseHeaders from './ResponseHeaders';
 import StatusCode from './StatusCode';
 import ResponseTime from './ResponseTime';
 import ResponseSize from './ResponseSize';
+import Timeline from './Timeline';
 import StyledWrapper from './StyledWrapper';
 
 const ResponsePane = ({ rightPaneWidth, item, collection }) => {
@@ -37,6 +38,9 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
       case 'headers': {
         return <ResponseHeaders headers={response.headers} />;
       }
+      case 'timeline': {
+        return <Timeline item={item} />;
+      }
 
       default: {
         return <div>404 | Not found</div>;
@@ -84,6 +88,9 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
         <div className={getTabClassname('headers')} role="tab" onClick={() => selectTab('headers')}>
           Headers
         </div>
+        <div className={getTabClassname('timeline')} role="tab" onClick={() => selectTab('timeline')}>
+          Timeline
+        </div>
         {!isLoading ? (
           <div className="flex flex-grow justify-end items-center">
             <StatusCode status={response.status} />