Show cancelled icon in connections job list and list table

Author: edmundito

airbyte-webapp/src/components/EntityTable/components/NameCell.tsx

@@ -46,6 +46,8 @@ const NameCell: React.FC<Props> = ({ value, enabled, status, icon, img }) => {
         ? "inactive"
         : status === Status.PENDING
         ? "loading"
+        : status === Status.CANCELLED
+        ? "cancelled"
         : undefined,
     [status]
   );

airbyte-webapp/src/components/EntityTable/types.ts

@@ -32,10 +32,11 @@ interface ITableDataItem {
   entityIcon?: string;
 }
 
-enum Status {
+const enum Status {
   ACTIVE = "active",
   INACTIVE = "inactive",
   FAILED = "failed",
+  CANCELLED = "cancelled",
   EMPTY = "empty",
   PENDING = "pending",
 }

airbyte-webapp/src/components/EntityTable/utils.tsx

@@ -119,9 +119,11 @@ export const getConnectionSyncStatus = (
       return ConnectionSyncStatus.ACTIVE;
 
     case JobStatus.failed:
-    case JobStatus.cancelled:
       return ConnectionSyncStatus.FAILED;
 
+    case JobStatus.cancelled:
+      return ConnectionSyncStatus.CANCELLED;
+
     case JobStatus.pending:
     case JobStatus.running:
       return ConnectionSyncStatus.PENDING;

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

@@ -44,8 +44,10 @@ const MainInfo: React.FC<MainInfoProps> = ({ job, attempts = [], isOpen, onExpan
   const isPartialSuccess = partialSuccessCheck(attempts);
 
   const statusIcon = useMemo(() => {
-    if (jobStatus === JobStatus.cancelled || (!isPartialSuccess && isFailed)) {
+    if (!isPartialSuccess && isFailed) {
       return <StatusIcon status="error" />;
+    } else if (jobStatus === JobStatus.cancelled) {
+      return <StatusIcon status="cancelled" />;
     } else if (jobStatus === JobStatus.running) {
       return <StatusIcon status="loading" />;
     } else if (jobStatus === JobStatus.succeeded) {