From 2408f9199d8acc3a68286d64b14ef7e60593baf4 Mon Sep 17 00:00:00 2001
From: bartoval <vabarjs@gmail.com>
Date: Tue, 30 Apr 2024 12:15:16 +0200
Subject: [PATCH] refactor(General): :recycle: Handle undefined trace inputs

---
 src/core/utils/formatTrace.ts           | 3 ++-
 src/pages/shared/FlowPairs/FlowPair.tsx | 8 +++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/core/utils/formatTrace.ts b/src/core/utils/formatTrace.ts
index 27d93e76..c0f3482a 100644
--- a/src/core/utils/formatTrace.ts
+++ b/src/core/utils/formatTrace.ts
@@ -1,4 +1,5 @@
-export function formatTraceBySites(trace: string) {
+// TODO: We don't expect trace = undefined. Remove when BE TCP flowpair API is stabilized
+export function formatTraceBySites(trace: string = '') {
   const traceSanitized = trace.replace(/\|+$/, '');
 
   if (!traceSanitized) {
diff --git a/src/pages/shared/FlowPairs/FlowPair.tsx b/src/pages/shared/FlowPairs/FlowPair.tsx
index 12113810..33910f6e 100644
--- a/src/pages/shared/FlowPairs/FlowPair.tsx
+++ b/src/pages/shared/FlowPairs/FlowPair.tsx
@@ -44,10 +44,12 @@ const FlowPair: FC<{ flowPair: FlowPairsResponse }> = function ({ flowPair }) {
 
   const duration = formatTimeInterval(endTimeMicroSeconds || Date.now() * 1000, startTimeMicroSenconds);
 
+  const isHtpp = protocol === AvailableProtocols.Http || protocol === AvailableProtocols.Http2;
+
   return (
     <Grid hasGutter data-testid={getTestsIds.flowPairsView(identity)}>
       <GridItem span={12}>
-        {protocol === AvailableProtocols.Tcp && (
+        {!isHtpp && (
           <>
             <TextContent>
               <Text component={TextVariants.h2}>
@@ -60,7 +62,7 @@ const FlowPair: FC<{ flowPair: FlowPairsResponse }> = function ({ flowPair }) {
                 <DescriptionList>
                   <DescriptionListGroup>
                     <DescriptionListTerm>{FlowPairLabels.Trace}</DescriptionListTerm>
-                    <DescriptionListDescription>{formatTraceBySites(flowTrace)}</DescriptionListDescription>
+                    <DescriptionListDescription>{formatTraceBySites(flowTrace) || '-'}</DescriptionListDescription>
                     {duration && (
                       <>
                         <DescriptionListTerm>{FlowPairLabels.Duration}</DescriptionListTerm>
@@ -73,7 +75,7 @@ const FlowPair: FC<{ flowPair: FlowPairsResponse }> = function ({ flowPair }) {
             </Card>
           </>
         )}
-        {protocol !== AvailableProtocols.Tcp && (
+        {isHtpp && (
           <>
             <TextContent>
               <Text component={TextVariants.h2}>