🪟 🎉 Move the cancel button outside the run click area

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

@@ -55,12 +55,13 @@ export const JobItem: React.FC<JobItemProps> = ({ shortInfo, job }) => {
   const { jobId: linkedJobId } = useAttemptLink();
   const [isOpen, setIsOpen] = useState(linkedJobId === getJobId(job));
   const scrollAnchor = useRef<HTMLDivElement>(null);
+
+  const didSucceed = didJobSucceed(job);
+
   const onExpand = () => {
     setIsOpen(!isOpen);
   };
 
-  const didSucceed = didJobSucceed(job);
-
   useEffectOnce(() => {
     if (linkedJobId) {
       scrollAnchor.current?.scrollIntoView({

airbyte-webapp/src/components/JobItem/components/AttemptDetails.module.scss

@@ -0,0 +1,7 @@
+@use "../../../scss/colors";
+
+.details {
+  font-size: 12px;
+  line-height: 15px;
+  color: colors.$grey;
+}

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

@@ -1,27 +1,19 @@
+import classNames from "classnames";
 import dayjs from "dayjs";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
-import styled from "styled-components";
 
 import Status from "core/statuses";
 
 import { AttemptRead, JobConfigType } from "../../../core/request/AirbyteClient";
+import styles from "./AttemptDetails.module.scss";
 
 interface IProps {
   className?: string;
   attempt: AttemptRead;
   configType?: JobConfigType;
 }
 
-const Details = styled.div`
-  font-size: 12px;
-  line-height: 15px;
-  color: ${({ theme }) => theme.greyColor40};
-`;
-const FailureReasonDetails = styled.div`
-  padding-bottom: 10px;
-`;
-
 const getFailureFromAttempt = (attempt: AttemptRead) => {
   return attempt.failureSummary && attempt.failureSummary.failures[0];
 };
@@ -31,9 +23,9 @@ const AttemptDetails: React.FC<IProps> = ({ attempt, className, configType }) =>
 
   if (attempt.status !== Status.SUCCEEDED && attempt.status !== Status.FAILED) {
     return (
-      <Details className={className}>
+      <div className={classNames(styles.details, className)}>
         <FormattedMessage id={`sources.${configType}`} defaultMessage={configType} />
-      </Details>
+      </div>
     );
   }
 
@@ -77,7 +69,7 @@ const AttemptDetails: React.FC<IProps> = ({ attempt, className, configType }) =>
   const isFailed = attempt.status === Status.FAILED;
 
   return (
-    <Details className={className}>
+    <div className={classNames(styles.details, className)}>
       <div>
         <span>{formatBytes(attempt?.bytesSynced)} | </span>
         <span>
@@ -107,7 +99,7 @@ const AttemptDetails: React.FC<IProps> = ({ attempt, className, configType }) =>
         ) : null}
       </div>
       {isFailed && (
-        <FailureReasonDetails>
+        <div>
           {formatMessage(
             {
               id: "ui.keyValuePairV3",
@@ -117,9 +109,9 @@ const AttemptDetails: React.FC<IProps> = ({ attempt, className, configType }) =>
               value: getExternalFailureMessage(attempt),
             }
           )}
-        </FailureReasonDetails>
+        </div>
       )}
-    </Details>
+    </div>
   );
 };
 

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

@@ -18,8 +18,7 @@ const LogHeader = styled.div`
 `;
 
 const AttemptDetailsSection = styled.div`
-  padding-left: 10px;
-  padding-top: 10px;
+  padding: 10px 0 10px 10px;
 `;
 
 const LogPath = styled.span`

airbyte-webapp/src/components/JobItem/components/MainInfo.module.scss

@@ -0,0 +1,83 @@
+@use "../../../scss/colors";
+@use "../../../scss/variables";
+
+.mainView {
+  cursor: pointer;
+  min-height: 75px;
+
+  .titleCell {
+    display: flex;
+    color: colors.$dark-blue;
+
+    .statusIcon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 75px;
+
+      & > div {
+        margin: 0;
+      }
+    }
+
+    .lastAttempt {
+      font-size: 12px;
+      font-weight: bold;
+      color: colors.$grey;
+    }
+
+    .justification {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+  }
+
+  .timestampCell {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+
+    .attemptCount {
+      font-size: 12px;
+      line-height: 15px;
+      color: colors.$red;
+    }
+
+    .arrow {
+      transform: rotate(-90deg);
+      transition: variables.$transition;
+      opacity: 0;
+      color: colors.$dark-blue-50;
+      font-size: 22px;
+      margin: 0 30px 0 50px;
+
+      div:hover > div > &,
+      div:hover > div > div > &,
+      div:hover > & {
+        opacity: 1;
+      }
+    }
+  }
+
+  &.open {
+    .arrow {
+      transform: rotate(-0deg);
+    }
+  }
+
+  &.failed {
+    .arrow,
+    .lastAttempt {
+      color: colors.$red;
+    }
+  }
+
+  &.open:not(.failed) {
+    border-bottom: variables.$border-thin solid colors.$grey-100;
+  }
+
+  &.open.failed {
+    border-bottom: variables.$border-thin solid colors.$red-50;
+  }
+}