From db1f7d34cf32017bc9a55cfefe23d178091b0dfd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=2E=20Mert=20Y=C4=B1ld=C4=B1ran?= <mehmet@up9.com>
Date: Fri, 24 Sep 2021 13:49:20 +0300
Subject: [PATCH] Omit the `RESPONSE` tab and `elapsedTime` if the `response`
 is empty (#298)

* Omit the `RESPONSE` tab and `elapsedTime` if the `response` is empty

* Use the `hidden` attribute instead
---
 ui/src/components/EntryDetailed.tsx             | 2 +-
 ui/src/components/EntryDetailed/EntryViewer.tsx | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/EntryDetailed.tsx b/ui/src/components/EntryDetailed.tsx
index 5c7045d6f..538550c7b 100644
--- a/ui/src/components/EntryDetailed.tsx
+++ b/ui/src/components/EntryDetailed.tsx
@@ -41,7 +41,7 @@ const EntryTitle: React.FC<any> = ({protocol, data, bodySize, elapsedTime}) => {
         <Protocol protocol={protocol} horizontal={true}/>
         <div style={{right: "30px", position: "absolute", display: "flex"}}>
             {response.payload && <div style={{margin: "0 18px", opacity: 0.5}}>{formatSize(bodySize)}</div>}
-            <div style={{marginRight: 18, opacity: 0.5}}>{Math.round(elapsedTime)}ms</div>
+            {response.payload && <div style={{marginRight: 18, opacity: 0.5}}>{Math.round(elapsedTime)}ms</div>}
         </div>
     </div>;
 };
diff --git a/ui/src/components/EntryDetailed/EntryViewer.tsx b/ui/src/components/EntryDetailed/EntryViewer.tsx
index 9271a0f47..becae4d56 100644
--- a/ui/src/components/EntryDetailed/EntryViewer.tsx
+++ b/ui/src/components/EntryDetailed/EntryViewer.tsx
@@ -54,6 +54,10 @@ const AutoRepresentation: React.FC<any> = ({representation, rulesMatched, elapse
 
     const {request, response} = JSON.parse(representation);
 
+    if (!response) {
+        TABS[1]['hidden'] = true;
+    }
+
     return <div className={styles.Entry}>
         {<div className={styles.body}>
             <div className={styles.bodyHeader}>
@@ -63,7 +67,7 @@ const AutoRepresentation: React.FC<any> = ({representation, rulesMatched, elapse
             {currentTab === TABS[0].tab && <React.Fragment>
                 <SectionsRepresentation data={request} color={color}/>
             </React.Fragment>}
-            {currentTab === TABS[1].tab && <React.Fragment>
+            {response && currentTab === TABS[1].tab && <React.Fragment>
                 <SectionsRepresentation data={response} color={color}/>
             </React.Fragment>}
             {currentTab === TABS[2].tab && <React.Fragment>