From 7d972d925798d8b4f64e1e84b8e299df1e2174c8 Mon Sep 17 00:00:00 2001
From: Nicolas Van Labeke <nicolas.vanlabeke@hivemq.com>
Date: Thu, 26 Oct 2023 21:36:50 +0100
Subject: [PATCH] fix(17144): refactor table and panel not to show undefined
 information

---
 .../EventLog/components/panel/EventDrawer.tsx | 39 ++++++++++++-------
 .../components/table/EventLogTable.tsx        |  4 +-
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/hivemq-edge/src/frontend/src/modules/EventLog/components/panel/EventDrawer.tsx b/hivemq-edge/src/frontend/src/modules/EventLog/components/panel/EventDrawer.tsx
index 0dea3ac1b3..37fe7c7447 100644
--- a/hivemq-edge/src/frontend/src/modules/EventLog/components/panel/EventDrawer.tsx
+++ b/hivemq-edge/src/frontend/src/modules/EventLog/components/panel/EventDrawer.tsx
@@ -88,21 +88,30 @@ const EventDrawer: FC<BridgeMainDrawerProps> = ({ event, isOpen, onClose }) => {
                 <CardBody data-testid={'event-value-message'}>{event.message}</CardBody>
               </Card>
 
-              <Card w={'100%'}>
-                <CardHeader data-testid={'event-title-payload'}>
-                  {t('eventLog.table.header.payload')}
-                  <Badge variant="outline" mx={2}>
-                    {event.payload?.contentType}
-                  </Badge>
-                </CardHeader>
-                <CardBody>
-                  <Code w={'100%'} p={2} whiteSpace={'pre-wrap'}>
-                    {JSONFormat && JSONFormat}
-                    {XMLFormat && XMLFormat}
-                    {!isJSON && !isXML && event.payload?.content}
-                  </Code>
-                </CardBody>
-              </Card>
+              {event.payload && (
+                <Card w={'100%'}>
+                  <CardHeader data-testid={'event-title-payload'}>
+                    {t('eventLog.table.header.payload')}
+                    <Badge variant="outline" mx={2}>
+                      {event.payload?.contentType}
+                    </Badge>
+                  </CardHeader>
+                  <CardBody pt={0}>
+                    <Code
+                      w={'100%'}
+                      p={2}
+                      whiteSpace={'pre-wrap'}
+                      overflow={'auto'}
+                      sx={{ textWrap: 'nowrap' }}
+                      maxH={400}
+                    >
+                      {JSONFormat && JSONFormat}
+                      {XMLFormat && XMLFormat}
+                      {!isJSON && !isXML && event.payload?.content}
+                    </Code>
+                  </CardBody>
+                </Card>
+              )}
             </VStack>
           </DrawerBody>
         </DrawerContent>
diff --git a/hivemq-edge/src/frontend/src/modules/EventLog/components/table/EventLogTable.tsx b/hivemq-edge/src/frontend/src/modules/EventLog/components/table/EventLogTable.tsx
index e3df3f4686..cd0c708e8e 100644
--- a/hivemq-edge/src/frontend/src/modules/EventLog/components/table/EventLogTable.tsx
+++ b/hivemq-edge/src/frontend/src/modules/EventLog/components/table/EventLogTable.tsx
@@ -37,7 +37,7 @@ const EventLogTable: FC<EventLogTableProps> = ({ onOpen }) => {
         cell: (info) => {
           return (
             <Skeleton isLoaded={!isLoading}>
-              <Box whiteSpace={'nowrap'}>
+              {info.row.original.payload ? (
                 <IconButton
                   size={'sm'}
                   mr={2}
@@ -45,7 +45,7 @@ const EventLogTable: FC<EventLogTableProps> = ({ onOpen }) => {
                   aria-label={t('eventLog.table.cta.open')}
                   icon={<MdOutlineEventNote />}
                 />
-              </Box>
+              ) : null}
             </Skeleton>
           )
         },