Add cancelled status icon (#20774)

* Add cancelled state and update error to use crossicon instead of fontawesome * Update cancelled icon to use fontawesome minus * Show cancelled icon in connections job list and list table * Update snapshots
airbytehq · Jan 3, 2023 · 526fe63 · 526fe63
1 parent 31f96ce
commit 526fe63
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 26 deletions.
diff --git a/...e-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap b/...e-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap
@@ -985,17 +985,15 @@ exports[`CreateConnectionForm should render with an error 1`] = `
           class="<removed-for-snapshot-test>"
         >
           <svg
-            aria-hidden="true"
-            class="<removed-for-snapshot-test>"
-            data-icon="xmark"
-            data-prefix="fas"
-            focusable="false"
+            data-icon="cross"
+            fill="none"
+            height="10"
             role="img"
-            viewBox="0 0 320 512"
-            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 10 10"
+            width="10"
           >
             <path
-              d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"
+              d="M9.20495 0.71967C8.91206 0.426777 8.43718 0.426777 8.14429 0.71967L4.96234 3.90162L1.7804 0.719679C1.48751 0.426786 1.01263 0.426786 0.71974 0.719679C0.426847 1.01257 0.426847 1.48745 0.71974 1.78034L3.90168 4.96228L0.71967 8.14429C0.426777 8.43718 0.426777 8.91206 0.71967 9.20495C1.01256 9.49784 1.48744 9.49784 1.78033 9.20495L4.96234 6.02294L8.14436 9.20496C8.43725 9.49785 8.91213 9.49785 9.20502 9.20496C9.49791 8.91207 9.49791 8.43719 9.20502 8.1443L6.023 4.96228L9.20495 1.78033C9.49784 1.48744 9.49784 1.01256 9.20495 0.71967Z"
               fill="currentColor"
             />
           </svg>

diff --git a/airbyte-webapp/src/components/EntityTable/components/NameCell.tsx b/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]
   );

diff --git a/airbyte-webapp/src/components/EntityTable/types.ts b/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",
 }

diff --git a/airbyte-webapp/src/components/EntityTable/utils.tsx b/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;

diff --git a/airbyte-webapp/src/components/JobItem/components/MainInfo.tsx b/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) {

diff --git a/airbyte-webapp/src/components/icons/CrossIcon.tsx b/airbyte-webapp/src/components/icons/CrossIcon.tsx
@@ -1,9 +1,11 @@
 interface CrossIconProps {
   color?: string;
+  title?: string;
 }
 
-export const CrossIcon = ({ color = "currentColor" }: CrossIconProps) => (
-  <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+export const CrossIcon = ({ color = "currentColor", title }: CrossIconProps) => (
+  <svg width="10" height="10" viewBox="0 0 10 10" fill="none" role="img" data-icon="cross">
+    {title && <title>{title}</title>}
     <path
       d="M9.20495 0.71967C8.91206 0.426777 8.43718 0.426777 8.14429 0.71967L4.96234 3.90162L1.7804 0.719679C1.48751 0.426786 1.01263 0.426786 0.71974 0.719679C0.426847 1.01257 0.426847 1.48745 0.71974 1.78034L3.90168 4.96228L0.71967 8.14429C0.426777 8.43718 0.426777 8.91206 0.71967 9.20495C1.01256 9.49784 1.48744 9.49784 1.78033 9.20495L4.96234 6.02294L8.14436 9.20496C8.43725 9.49785 8.91213 9.49785 9.20502 9.20496C9.49791 8.91207 9.49791 8.43719 9.20502 8.1443L6.023 4.96228L9.20495 1.78033C9.49784 1.48744 9.49784 1.01256 9.20495 0.71967Z"
       fill={color}

diff --git a/airbyte-webapp/src/components/ui/StatusIcon/StatusIcon.test.tsx b/airbyte-webapp/src/components/ui/StatusIcon/StatusIcon.test.tsx
@@ -10,7 +10,7 @@ describe("<StatusIcon />", () => {
     const component = render(<StatusIcon title={title} value={value} />);
 
     expect(component.getByTitle(title)).toBeDefined();
-    expect(component.getByRole("img")).toHaveAttribute("data-icon", "xmark");
+    expect(component.getByRole("img")).toHaveAttribute("data-icon", "cross");
     expect(component.getByText(`${value}`)).toBeDefined();
   });
 
@@ -20,7 +20,8 @@ describe("<StatusIcon />", () => {
     { status: "sleep", icon: "moon" },
     { status: "warning", icon: "triangle-exclamation" },
     { status: "loading", icon: "circle-loader" },
-    { status: "error", icon: "xmark" },
+    { status: "error", icon: "cross" },
+    { status: "cancelled", icon: "minus" },
   ];
 
   it.each(statusCases)("renders $status status", ({ status, icon }) => {

diff --git a/airbyte-webapp/src/components/ui/StatusIcon/StatusIcon.tsx b/airbyte-webapp/src/components/ui/StatusIcon/StatusIcon.tsx
@@ -1,14 +1,15 @@
-import { faBan, faCheck, faExclamationTriangle, faTimes } from "@fortawesome/free-solid-svg-icons";
+import { faBan, faCheck, faExclamationTriangle, faMinus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React from "react";
 import styled from "styled-components";
 
+import { CrossIcon } from "components/icons/CrossIcon";
 import { MoonIcon } from "components/icons/MoonIcon";
 import { PauseIcon } from "components/icons/PauseIcon";
 
 import { CircleLoader } from "./CircleLoader";
 
-export type StatusIconStatus = "sleep" | "inactive" | "success" | "warning" | "loading" | "error";
+export type StatusIconStatus = "sleep" | "inactive" | "success" | "warning" | "loading" | "error" | "cancelled";
 
 interface StatusIconProps {
   className?: string;
@@ -24,7 +25,7 @@ const _iconByStatus = {
   sleep: faBan,
   success: faCheck,
   warning: faExclamationTriangle,
-  error: faTimes,
+  cancelled: faMinus,
 } as const;
 
 const _themeByStatus = {
@@ -33,6 +34,7 @@ const _themeByStatus = {
   success: "successColor",
   warning: "warningColor",
   error: "dangerColor",
+  cancelled: "lightTextColor",
 } as const;
 
 const Container = styled.div<Pick<StatusIconProps, "big" | "value">>`
@@ -86,6 +88,8 @@ export const StatusIcon: React.FC<StatusIconProps> = ({ title, status = "error",
         <PauseIcon title={title} />
       ) : status === "sleep" ? (
         <MoonIcon title={title} />
+      ) : status === "error" ? (
+        <CrossIcon title={title} />
       ) : (
         <FontAwesomeIcon icon={_iconByStatus[status]} title={title} />
       )}

diff --git a/...nectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap b/...nectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap
@@ -812,17 +812,15 @@ exports[`ConnectionReplicationTab should show an error if there is a schemaError
             class="<removed-for-snapshot-test>"
           >
             <svg
-              aria-hidden="true"
-              class="<removed-for-snapshot-test>"
-              data-icon="xmark"
-              data-prefix="fas"
-              focusable="false"
+              data-icon="cross"
+              fill="none"
+              height="10"
               role="img"
-              viewBox="0 0 320 512"
-              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 10 10"
+              width="10"
             >
               <path
-                d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"
+                d="M9.20495 0.71967C8.91206 0.426777 8.43718 0.426777 8.14429 0.71967L4.96234 3.90162L1.7804 0.719679C1.48751 0.426786 1.01263 0.426786 0.71974 0.719679C0.426847 1.01257 0.426847 1.48745 0.71974 1.78034L3.90168 4.96228L0.71967 8.14429C0.426777 8.43718 0.426777 8.91206 0.71967 9.20495C1.01256 9.49784 1.48744 9.49784 1.78033 9.20495L4.96234 6.02294L8.14436 9.20496C8.43725 9.49785 8.91213 9.49785 9.20502 9.20496C9.49791 8.91207 9.49791 8.43719 9.20502 8.1443L6.023 4.96228L9.20495 1.78033C9.49784 1.48744 9.49784 1.01256 9.20495 0.71967Z"
                 fill="currentColor"
               />
             </svg>