Fix copy link to logs functionality

airbyte-webapp/src/components/JobItem/JobItem.tsx

@@ -7,7 +7,7 @@ import { Spinner } from "components";
 import { SynchronousJobReadWithStatus } from "core/request/LogsRequestError";
 import { JobsWithJobs } from "pages/ConnectionPage/pages/ConnectionItemPage/components/JobsList";
 
-import { AttemptRead, JobStatus } from "../../core/request/AirbyteClient";
+import { AttemptRead, CheckConnectionReadStatus, JobStatus } from "../../core/request/AirbyteClient";
 import { useAttemptLink } from "./attemptLinkUtils";
 import ContentWrapper from "./components/ContentWrapper";
 import ErrorDetails from "./components/ErrorDetails";
@@ -32,28 +32,28 @@ const LoadLogs = styled.div`
 `;
 
 interface JobItemProps {
-  shortInfo?: boolean;
   job: SynchronousJobReadWithStatus | JobsWithJobs;
 }
 
 const didJobSucceed = (job: SynchronousJobReadWithStatus | JobsWithJobs) => {
   return getJobStatus(job) !== "failed";
 };
 
-export const getJobStatus: (job: SynchronousJobReadWithStatus | JobsWithJobs) => JobStatus = (job) => {
-  return (job as JobsWithJobs).job?.status ?? (job as SynchronousJobReadWithStatus).status;
+export const getJobStatus: (
+  job: SynchronousJobReadWithStatus | JobsWithJobs
+) => JobStatus | CheckConnectionReadStatus = (job) => {
+  return "status" in job ? job.status : job.job.status;
 };
 
 export const getJobAttemps: (job: SynchronousJobReadWithStatus | JobsWithJobs) => AttemptRead[] | undefined = (job) => {
   return "attempts" in job ? job.attempts : undefined;
 };
 
-export const getJobId = (job: SynchronousJobReadWithStatus | JobsWithJobs) =>
-  (job as SynchronousJobReadWithStatus).id ?? (job as JobsWithJobs).job.id;
+export const getJobId = (job: SynchronousJobReadWithStatus | JobsWithJobs) => ("id" in job ? job.id : job.job.id);
 
-export const JobItem: React.FC<JobItemProps> = ({ shortInfo, job }) => {
+export const JobItem: React.FC<JobItemProps> = ({ job }) => {
   const { jobId: linkedJobId } = useAttemptLink();
-  const [isOpen, setIsOpen] = useState(linkedJobId === getJobId(job));
+  const [isOpen, setIsOpen] = useState(() => linkedJobId === String(getJobId(job)));
   const scrollAnchor = useRef<HTMLDivElement>(null);
 
   const didSucceed = didJobSucceed(job);
@@ -63,24 +63,25 @@ export const JobItem: React.FC<JobItemProps> = ({ shortInfo, job }) => {
   };
 
   useEffectOnce(() => {
-    if (linkedJobId) {
-      scrollAnchor.current?.scrollIntoView({
-        behavior: "smooth",
-        block: "start",
-      });
+    if (linkedJobId === String(getJobId(job))) {
+      // We need to wait here a bit, so the page has a chance to finish rendering, before starting to scroll
+      // since otherwise this scroll won't really do anything.
+      const timeout = window.setTimeout(() => {
+        scrollAnchor.current?.scrollIntoView({
+          behavior: "smooth",
+          block: "start",
+        });
+      }, 1000);
+      return () => {
+        window.clearTimeout(timeout);
+      };
     }
+    return undefined;
   });
 
   return (
     <Item isFailed={!didSucceed} ref={scrollAnchor}>
-      <MainInfo
-        shortInfo={shortInfo}
-        isOpen={isOpen}
-        isFailed={!didSucceed}
-        onExpand={onExpand}
-        job={job}
-        attempts={getJobAttemps(job)}
-      />
+      <MainInfo isOpen={isOpen} isFailed={!didSucceed} onExpand={onExpand} job={job} attempts={getJobAttemps(job)} />
       <ContentWrapper isOpen={isOpen}>
         <div>
           <Suspense

airbyte-webapp/src/components/JobItem/components/MainInfo.tsx

@@ -34,25 +34,24 @@ interface MainInfoProps {
   isOpen?: boolean;
   onExpand: () => void;
   isFailed?: boolean;
-  shortInfo?: boolean;
 }
 
-const MainInfo: React.FC<MainInfoProps> = ({ job, attempts = [], isOpen, onExpand, isFailed, shortInfo }) => {
+const MainInfo: React.FC<MainInfoProps> = ({ job, attempts = [], isOpen, onExpand, isFailed }) => {
   const jobStatus = getJobStatus(job);
   const isPartialSuccess = partialSuccessCheck(attempts);
 
   const statusIcon = () => {
     switch (true) {
       case jobStatus === JobStatus.cancelled:
-        return <StatusIcon />;
+        return <StatusIcon status="error" />;
       case jobStatus === JobStatus.running:
         return <StatusIcon status="loading" />;
       case jobStatus === JobStatus.succeeded:
         return <StatusIcon status="success" />;
       case isPartialSuccess:
         return <StatusIcon status="warning" />;
-      case !isPartialSuccess && isFailed && !shortInfo:
-        return <StatusIcon />;
+      case !isPartialSuccess && isFailed:
+        return <StatusIcon status="error" />;
       default:
         return null;
     }
@@ -71,8 +70,7 @@ const MainInfo: React.FC<MainInfoProps> = ({ job, attempts = [], isOpen, onExpan
           ) : (
             <FormattedMessage id={`sources.${getJobStatus(job)}`} />
           )}
-          {shortInfo && <FormattedMessage id="sources.additionLogs" />}
-          {attempts.length && !shortInfo && (
+          {attempts.length && (
             <>
               {attempts.length > 1 && (
                 <div className={styles.lastAttempt}>

airbyte-webapp/src/components/StatusIcon/StatusIcon.test.tsx

@@ -20,6 +20,7 @@ describe("<StatusIcon />", () => {
     { status: "sleep", icon: "moon" },
     { status: "warning", icon: "triangle-exclamation" },
     { status: "loading", icon: "circle-loader" },
+    { status: "error", icon: "xmark" },
   ];
 
   test.each(statusCases)("renders $status status", ({ status, icon }) => {

airbyte-webapp/src/components/StatusIcon/StatusIcon.tsx

@@ -1,4 +1,4 @@
-import { faBan, faCheck, faExclamationTriangle, faTimes, IconDefinition } from "@fortawesome/free-solid-svg-icons";
+import { faBan, faCheck, faExclamationTriangle, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React from "react";
 import styled from "styled-components";
@@ -8,7 +8,7 @@ import { MoonIcon } from "components/icons/MoonIcon";
 import PauseIcon from "../icons/PauseIcon";
 import CircleLoader from "./CircleLoader";
 
-export type StatusIconStatus = "sleep" | "inactive" | "success" | "warning" | "loading";
+export type StatusIconStatus = "sleep" | "inactive" | "success" | "warning" | "loading" | "error";
 
 interface StatusIconProps {
   className?: string;
@@ -20,20 +20,22 @@ interface StatusIconProps {
 
 const getBadgeWidth = (props: StatusIconProps) => (props.big ? (props.value ? 57 : 40) : props.value ? 37 : 20);
 
-const _iconByStatus: Partial<Record<StatusIconStatus, IconDefinition | undefined>> = {
+const _iconByStatus = {
   sleep: faBan,
   success: faCheck,
   warning: faExclamationTriangle,
-};
+  error: faTimes,
+} as const;
 
-const _themeByStatus: Partial<Record<StatusIconStatus, string>> = {
+const _themeByStatus = {
   sleep: "lightTextColor",
   inactive: "lightTextColor",
   success: "successColor",
   warning: "warningColor",
-};
+  error: "dangerColor",
+} as const;
 
-const Container = styled.div<StatusIconProps>`
+const Container = styled.div<Pick<StatusIconProps, "big" | "value">>`
   width: ${(props) => getBadgeWidth(props)}px;
   height: ${({ big }) => (big ? 40 : 20)}px;
   margin-right: 10px;
@@ -44,8 +46,8 @@ const Container = styled.div<StatusIconProps>`
   vertical-align: middle;
 `;
 
-const Badge = styled(Container)<StatusIconProps>`
-  background: ${(props) => props.theme[(props.status && _themeByStatus[props.status]) || "dangerColor"]};
+const Badge = styled(Container)<{ status: Exclude<StatusIconStatus, "loading"> }>`
+  background: ${({ theme, status }) => theme[_themeByStatus[status]]};
   border-radius: ${({ value }) => (value ? "15px" : "50%")};
   color: ${({ theme }) => theme.whiteColor};
   padding-top: ${({ status }) => (status === "warning" || status === "inactive" ? 3 : 4)}px;
@@ -66,7 +68,7 @@ const Value = styled.span`
   padding-left: 3px;
 `;
 
-const StatusIcon: React.FC<StatusIconProps> = ({ title, status, ...props }) => {
+const StatusIcon: React.FC<StatusIconProps> = ({ title, status = "error", ...props }) => {
   const valueElement = props.value ? <Value>{props.value}</Value> : null;
 
   if (status === "loading") {
@@ -85,7 +87,7 @@ const StatusIcon: React.FC<StatusIconProps> = ({ title, status, ...props }) => {
       ) : status === "sleep" ? (
         <MoonIcon title={title} />
       ) : (
-        <FontAwesomeIcon icon={(status && _iconByStatus[status]) || faTimes} title={title} />
+        <FontAwesomeIcon icon={_iconByStatus[status]} title={title} />
       )}
       {valueElement}
     </Badge>