check if token is expired only if expires_in prop is present, clear response and clear timeline are 2 different things, clear redux state after clearing oauth2 credentials cache

packages/bruno-app/src/components/ResponsePane/ClearTimeline/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/ClearTimeline/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import StyledWrapper from './StyledWrapper';
+import { clearRequestTimeline } from 'providers/ReduxStore/slices/collections/index';
+
+const ClearTimeline = ({ collection, item }) => {
+  const dispatch = useDispatch();
+
+  const clearResponse = () =>
+    dispatch(
+      clearRequestTimeline({
+        itemUid: item.uid,
+        collectionUid: collection.uid
+      })
+    );
+
+  return (
+    <StyledWrapper className="ml-2 flex items-center">
+      <button onClick={clearResponse} className='text-link hover:underline mt-2' title="Clear Timeline">
+        Clear Timeline
+      </button>
+    </StyledWrapper>
+  );
+};
+
+export default ClearTimeline;

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

@@ -18,6 +18,7 @@ import ScriptErrorIcon from './ScriptErrorIcon';
 import StyledWrapper from './StyledWrapper';
 import ResponseSave from 'src/components/ResponsePane/ResponseSave';
 import ResponseClear from 'src/components/ResponsePane/ResponseClear';
+import ClearTimeline from './ClearTimeline/index';
 
 const ResponsePane = ({ rightPaneWidth, item, collection }) => {
   const dispatch = useDispatch();
@@ -26,6 +27,10 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
   const isLoading = ['queued', 'sending'].includes(item.requestState);
   const [showScriptErrorCard, setShowScriptErrorCard] = useState(false);
 
+  const requestTimeline = ([...(collection.timeline || [])]).filter(obj => {
+    if (obj.itemUid === item.uid) return true;
+  });
+
   useEffect(() => {
     if (item?.preRequestScriptErrorMessage || item?.postResponseScriptErrorMessage) {
       setShowScriptErrorCard(true);
@@ -83,7 +88,7 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
     );
   }
 
-  if (!item.response) {
+  if (!item.response && !requestTimeline?.length) {
     return (
       <StyledWrapper className="flex h-full relative">
         <Placeholder />
@@ -134,11 +139,17 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
                 onClick={() => setShowScriptErrorCard(true)} 
               />
             )}
-            <ResponseClear item={item} collection={collection} />
-            <ResponseSave item={item} />
-            <StatusCode status={response.status} />
-            <ResponseTime duration={response.duration} />
-            <ResponseSize size={response.size} />
+            {focusedTab?.responsePaneTab === "timeline" ? (
+              <ClearTimeline item={item} collection={collection} />
+            ) : item?.response ? (
+              <>
+                <ResponseClear item={item} collection={collection} />
+                <ResponseSave item={item} />
+                <StatusCode status={response.status} />
+                <ResponseTime duration={response.duration} />
+                <ResponseSize size={response.size} />
+              </>
+            ) : null}
           </div>
         ) : null}
       </div>
@@ -152,7 +163,17 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
             onClose={() => setShowScriptErrorCard(false)} 
           />
         )}
-        {getTabPanel(focusedTab.responsePaneTab)}
+        {!item?.response ? (
+          focusedTab?.responsePaneTab === "timeline" && requestTimeline?.length ? (
+            <Timeline
+              collection={collection}
+              item={item}
+              width={rightPaneWidth}
+            />
+          ) : null
+        ) : (
+          <>{getTabPanel(focusedTab.responsePaneTab)}</>
+        )}
       </section>
     </StyledWrapper>
   );