From 0813e2ce70a4e76438073d377202d7045adc1b21 Mon Sep 17 00:00:00 2001
From: Teal Larson <LARSON.TEAL@GMAIL.COM>
Date: Fri, 9 Aug 2024 10:34:54 -0400
Subject: [PATCH] fix: better handling for missing user in cancel events, fix
 formatting for clear cancel events (#13455)

---
 .../components/ClearEventItem.tsx                  |  6 +++++-
 .../components/RefreshEventItem.tsx                |  4 +++-
 .../components/SyncEventItem.tsx                   |  4 +++-
 .../components/TimelineEventUser.tsx               | 14 ++++++++------
 4 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/ClearEventItem.tsx b/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/ClearEventItem.tsx
index a5c7b7ccf86..4b187de7fd4 100644
--- a/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/ClearEventItem.tsx
+++ b/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/ClearEventItem.tsx
@@ -32,7 +32,11 @@ export const ClearEventItem: React.FC<ClearEventProps> = ({ clearEvent }) => {
           <FormattedMessage id={title} values={{ value: streamsToList.length }} />
         </Text>
         <Box pt="xs">
-          {jobStatus === "cancelled" && <UserCancelledDescription user={clearEvent.user} jobType="clear" />}
+          {jobStatus === "cancelled" && !!clearEvent.user && (
+            <div>
+              <UserCancelledDescription user={clearEvent.user} jobType="clear" />
+            </div>
+          )}
           {streamsToList.length > 0 && <ResetStreamsDetails names={streamsToList} />}
           {showExtendedStats && (
             <>
diff --git a/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/RefreshEventItem.tsx b/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/RefreshEventItem.tsx
index 84c78c0b00d..a8c339f10c0 100644
--- a/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/RefreshEventItem.tsx
+++ b/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/RefreshEventItem.tsx
@@ -33,7 +33,9 @@ export const RefreshEventItem: React.FC<RefreshEventItemProps> = ({ refreshEvent
             <FormattedMessage id={titleId} values={{ value: streamsToList.length }} />
           </Text>
           <FlexContainer gap="xs" alignItems="baseline">
-            {jobStatus === "cancelled" && <UserCancelledDescription user={refreshEvent.user} jobType="refresh" />}
+            {jobStatus === "cancelled" && !!refreshEvent.user && (
+              <UserCancelledDescription user={refreshEvent.user} jobType="refresh" />
+            )}
             <JobStats {...refreshEvent.summary} />
           </FlexContainer>
           {streamsToList.length > 0 && <ResetStreamsDetails names={streamsToList} />}
diff --git a/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/SyncEventItem.tsx b/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/SyncEventItem.tsx
index f8e6244d9de..83638bb89d9 100644
--- a/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/SyncEventItem.tsx
+++ b/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/SyncEventItem.tsx
@@ -32,7 +32,9 @@ export const SyncEventItem: React.FC<SyncEventProps> = ({ syncEvent }) => {
         </Text>
         <Box pt="xs">
           <FlexContainer gap="sm" alignItems="baseline">
-            {jobStatus === "cancelled" && <UserCancelledDescription user={syncEvent.user} jobType="sync" />}
+            {jobStatus === "cancelled" && !!syncEvent.user && (
+              <UserCancelledDescription user={syncEvent.user} jobType="sync" />
+            )}
             <JobStats {...syncEvent.summary} />
           </FlexContainer>
         </Box>
diff --git a/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/TimelineEventUser.tsx b/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/TimelineEventUser.tsx
index 087e60fe90a..b18ce3ab600 100644
--- a/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/TimelineEventUser.tsx
+++ b/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/TimelineEventUser.tsx
@@ -6,16 +6,16 @@ import { Text } from "components/ui/Text";
 import { userInEventSchema } from "../types";
 
 interface TimelineEventUserProps {
-  user: InferType<typeof userInEventSchema>;
+  user?: InferType<typeof userInEventSchema>;
 }
 
 interface UserCancelledDescriptionProps {
-  user: InferType<typeof userInEventSchema>;
+  user?: InferType<typeof userInEventSchema>;
   jobType: string;
 }
 
 export const TimelineEventUser: React.FC<TimelineEventUserProps> = ({ user }) => {
-  return <>{user.name ?? user.email ?? <FormattedMessage id="connection.timeline.unknownUser" />}</>;
+  return <>{user?.name ?? user?.email ?? <FormattedMessage id="connection.timeline.unknownUser" />}</>;
 };
 
 export const UserCancelledDescription: React.FC<UserCancelledDescriptionProps> = ({ user, jobType }) => {
@@ -42,9 +42,11 @@ export const UserCancelledDescription: React.FC<UserCancelledDescriptionProps> =
           }}
         />
       </Text>
-      <Text as="span" color="grey400" size="sm">
-        |
-      </Text>
+      {jobType !== "clear" && (
+        <Text as="span" color="grey400" size="sm">
+          |
+        </Text>
+      )}
     </>
   );
 };