fix: better handling for missing user in cancel events, fix formattin…

…g for clear cancel events (#13455)
airbytehq · Aug 9, 2024 · 0813e2c · 0813e2c
1 parent 0080471
commit 0813e2c
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
+      )}
     </>
   );
 };