From 6c308f912948ae2eb7438835e49fb3cf015bc754 Mon Sep 17 00:00:00 2001
From: Jorge Padilla <jorge.esteban.padilla@gmail.com>
Date: Mon, 15 May 2023 20:38:53 +0900
Subject: [PATCH] fix(frontend): fix empty body and headers in trigger tab

---
 web/src/components/CodeBlock/CodeBlock.tsx     |  6 +++++-
 .../RunDetailTriggerResponse/ResponseBody.tsx  |  7 +++++--
 .../ResponseHeaders.tsx                        | 18 ++++++++----------
 .../RunDetailTriggerResponse.tsx               |  4 ++--
 4 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/web/src/components/CodeBlock/CodeBlock.tsx b/web/src/components/CodeBlock/CodeBlock.tsx
index b66c0676e1..08f2261982 100644
--- a/web/src/components/CodeBlock/CodeBlock.tsx
+++ b/web/src/components/CodeBlock/CodeBlock.tsx
@@ -15,7 +15,11 @@ const getInitialLang = (mimeType: string): LanguageName | undefined =>
 const formatValue = (value: string, lang: LanguageName | undefined): string => {
   switch (lang) {
     case 'json':
-      return JSON.stringify(JSON.parse(value), null, 2);
+      try {
+        return JSON.stringify(JSON.parse(value), null, 2);
+      } catch (error) {
+        return '';
+      }
 
     default:
       return value;
diff --git a/web/src/components/RunDetailTriggerResponse/ResponseBody.tsx b/web/src/components/RunDetailTriggerResponse/ResponseBody.tsx
index 5d776599c7..76df574789 100644
--- a/web/src/components/RunDetailTriggerResponse/ResponseBody.tsx
+++ b/web/src/components/RunDetailTriggerResponse/ResponseBody.tsx
@@ -1,12 +1,15 @@
+import {isRunStateFinished} from 'models/TestRun.model';
+import {TTestRunState} from 'types/TestRun.types';
 import SkeletonResponse from './SkeletonResponse';
 import CodeBlock from '../CodeBlock';
 
 interface IProps {
   body?: string;
   bodyMimeType?: string;
+  state: TTestRunState;
 }
 
-const ResponseBody = ({body = '', bodyMimeType = ''}: IProps) =>
-  !body ? <SkeletonResponse /> : <CodeBlock value={body} mimeType={bodyMimeType} />;
+const ResponseBody = ({body = '', bodyMimeType = '', state}: IProps) =>
+  isRunStateFinished(state) || !!body ? <CodeBlock value={body} mimeType={bodyMimeType} /> : <SkeletonResponse />;
 
 export default ResponseBody;
diff --git a/web/src/components/RunDetailTriggerResponse/ResponseHeaders.tsx b/web/src/components/RunDetailTriggerResponse/ResponseHeaders.tsx
index 49a767ab06..38282ba87f 100644
--- a/web/src/components/RunDetailTriggerResponse/ResponseHeaders.tsx
+++ b/web/src/components/RunDetailTriggerResponse/ResponseHeaders.tsx
@@ -1,22 +1,20 @@
-import {THeader} from 'types/Test.types';
 import HeaderRow from 'components/HeaderRow';
+import {isRunStateFinished} from 'models/TestRun.model';
+import {THeader} from 'types/Test.types';
+import {TTestRunState} from 'types/TestRun.types';
 import SkeletonResponse from './SkeletonResponse';
 import * as S from './RunDetailTriggerResponse.styled';
 
 interface IProps {
   headers?: THeader[];
+  state: TTestRunState;
 }
 
-const ResponseHeaders = ({headers}: IProps) => {
-  return !headers ? (
-    <SkeletonResponse />
+const ResponseHeaders = ({headers, state}: IProps) =>
+  isRunStateFinished(state) || !!headers ? (
+    <S.HeadersList>{headers && headers.map(header => <HeaderRow header={header} key={header.key} />)}</S.HeadersList>
   ) : (
-    <S.HeadersList>
-      {headers.map(header => (
-        <HeaderRow header={header} key={header.key} />
-      ))}
-    </S.HeadersList>
+    <SkeletonResponse />
   );
-};
 
 export default ResponseHeaders;
diff --git a/web/src/components/RunDetailTriggerResponse/RunDetailTriggerResponse.tsx b/web/src/components/RunDetailTriggerResponse/RunDetailTriggerResponse.tsx
index 8b30519c4c..dfc9752c06 100644
--- a/web/src/components/RunDetailTriggerResponse/RunDetailTriggerResponse.tsx
+++ b/web/src/components/RunDetailTriggerResponse/RunDetailTriggerResponse.tsx
@@ -55,10 +55,10 @@ const RunDetailTriggerResponse = ({
           }}
         >
           <Tabs.TabPane key={TabsKeys.Body} tab="Body">
-            <ResponseBody body={body} bodyMimeType={bodyMimeType} />
+            <ResponseBody body={body} bodyMimeType={bodyMimeType} state={state} />
           </Tabs.TabPane>
           <Tabs.TabPane key={TabsKeys.Headers} tab="Headers">
-            <ResponseHeaders headers={headers} />
+            <ResponseHeaders headers={headers} state={state} />
           </Tabs.TabPane>
           <Tabs.TabPane key={TabsKeys.Environment} tab="Environment">
             <ResponseEnvironment />