fix: 0 attempt jobs in timeline and users with empty string names (#1…

…3523)

airbyte-webapp/src/area/connection/components/JobLogsModal/JobLogsModal.tsx

@@ -14,6 +14,7 @@ import { JobLogOrigins, KNOWN_LOG_ORIGINS, useCleanLogs } from "area/connection/
 import { VirtualLogs } from "area/connection/components/JobHistoryItem/VirtualLogs";
 import { LinkToAttemptButton } from "area/connection/components/JobLogsModal/LinkToAttemptButton";
 import { useAttemptCombinedStatsForJob, useAttemptForJob, useJobInfoWithoutLogs } from "core/api";
+import { trackError } from "core/utils/datadog";
 
 import { AttemptStatusIcon } from "./AttemptStatusIcon";
 import { DownloadLogsButton } from "./DownloadLogsButton";
@@ -34,9 +35,14 @@ export const JobLogsModal: React.FC<JobLogsModalProps> = ({ jobId, initialAttemp
   const [highlightedMatchIndex, setHighlightedMatchIndex] = useState<number | undefined>(undefined);
   const [matchingLines, setMatchingLines] = useState<number[]>([]);
   const highlightedMatchingLineNumber = highlightedMatchIndex !== undefined ? highlightedMatchIndex + 1 : undefined;
+  if (job.attempts.length === 0) {
+    trackError(new Error(`No attempts for job`), { jobId, eventId });
+  }
+
   const [selectedAttemptId, setSelectedAttemptId] = useState(
     initialAttemptId ?? job.attempts[job.attempts.length - 1].attempt.id
   );
+
   const jobAttempt = useAttemptForJob(jobId, selectedAttemptId);
   const aggregatedAttemptStats = useAttemptCombinedStatsForJob(jobId, selectedAttemptId, {
     refetchInterval() {

airbyte-webapp/src/pages/connections/ConnectionTimelinePage/ConnectionTimelineEventActions.tsx

@@ -9,19 +9,21 @@ interface ConnectionTimelineEventActionsProps {
   jobId: number;
   eventId?: string;
   createdAt: number;
+  attemptCount?: number;
 }
 
 export const ConnectionTimelineEventActions: React.FC<ConnectionTimelineEventActionsProps> = ({
   jobId,
   eventId,
   createdAt,
+  attemptCount,
 }) => {
   return (
     <div className={styles.eventActions}>
       <Text color="grey400">
         <FormattedDate value={createdAt * 1000} timeStyle="short" dateStyle="medium" />
       </Text>
-      <JobEventMenu jobId={jobId} eventId={eventId} />
+      <JobEventMenu jobId={jobId} eventId={eventId} attemptCount={attemptCount} />
     </div>
   );
 };

airbyte-webapp/src/pages/connections/ConnectionTimelinePage/JobEventMenu.tsx

@@ -65,7 +65,11 @@ export const openJobLogsModalFromTimeline = ({
   });
 };
 
-export const JobEventMenu: React.FC<{ eventId?: string; jobId: number }> = ({ eventId, jobId }) => {
+export const JobEventMenu: React.FC<{ eventId?: string; jobId: number; attemptCount?: number }> = ({
+  eventId,
+  jobId,
+  attemptCount,
+}) => {
   const { formatMessage } = useIntl();
   const { connection } = useConnectionEditService();
   const { openModal } = useModalService();
@@ -176,10 +180,12 @@ export const JobEventMenu: React.FC<{ eventId?: string; jobId: number }> = ({ ev
         {
           displayName: formatMessage({ id: "jobHistory.viewLogs" }),
           value: JobMenuOptions.OpenLogsModal,
+          disabled: attemptCount === 0,
         },
         {
           displayName: formatMessage({ id: "jobHistory.downloadLogs" }),
           value: JobMenuOptions.DownloadLogs,
+          disabled: attemptCount === 0,
         },
       ]}
       onChange={onChangeHandler}

airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/ClearEventItem.tsx

@@ -57,6 +57,7 @@ export const ClearEventItem: React.FC<ClearEventProps> = ({ clearEvent }) => {
         createdAt={clearEvent.createdAt}
         eventId={clearEvent.id}
         jobId={clearEvent.summary.jobId}
+        attemptCount={clearEvent.summary.attemptsCount}
       />
     </ConnectionTimelineEventItem>
   );

airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/JobStartEventItem.tsx

@@ -7,7 +7,6 @@ import { IconType } from "components/ui/Icon";
 import { Text } from "components/ui/Text";
 
 import { TimelineEventUser } from "./TimelineEventUser";
-import { ConnectionTimelineEventActions } from "../ConnectionTimelineEventActions";
 import { ConnectionTimelineEventIcon } from "../ConnectionTimelineEventIcon";
 import { ConnectionTimelineEventItem } from "../ConnectionTimelineEventItem";
 import { ConnectionTimelineEventSummary } from "../ConnectionTimelineEventSummary";
@@ -61,11 +60,6 @@ export const JobStartEventItem: React.FC<JobStartEventItemProps> = ({ jobStartEv
           </Text>
         </Box>
       </ConnectionTimelineEventSummary>
-      <ConnectionTimelineEventActions
-        createdAt={jobStartEvent.createdAt}
-        eventId={jobStartEvent.id}
-        jobId={jobStartEvent.summary.jobId}
-      />
     </ConnectionTimelineEventItem>
   );
 };

airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/TimelineEventUser.tsx

@@ -15,7 +15,7 @@ interface UserCancelledDescriptionProps {
 }
 
 export const TimelineEventUser: React.FC<TimelineEventUserProps> = ({ user }) => {
-  return <>{user?.name ?? user?.email ?? <FormattedMessage id="connection.timeline.unknownUser" />}</>;
+  return <>{user?.name?.trim() || user?.email?.trim() || <FormattedMessage id="connection.timeline.unknownUser" />}</>;
 };
 
 export const UserCancelledDescription: React.FC<UserCancelledDescriptionProps> = ({ user, jobType }) => {

airbyte-webapp/src/views/layout/SideBar/SideBar.tsx

@@ -47,8 +47,8 @@ export const SideBar: React.FC<PropsWithChildren<SideBarProps>> = ({
     if (authType === "simple" || authType === "none") {
       return formatMessage({ id: "sidebar.defaultUsername" });
     }
-    return user?.name;
-  }, [authType, user?.name, formatMessage]);
+    return user?.name?.trim() || user?.email?.trim();
+  }, [authType, user?.name, user?.email, formatMessage]);
 
   return (
     <nav className={classNames(styles.sidebar, { [styles.hidden]: isHidden })}>