From 9c50e6e2d5e5b6a44de9dd4a694b14f96c1f2c18 Mon Sep 17 00:00:00 2001 From: Edmundo Ruiz Ghanem Date: Wed, 21 Dec 2022 09:55:16 -0500 Subject: [PATCH 1/4] Add cancelled state and update error to use crossicon instead of fontawesome --- airbyte-webapp/src/components/icons/CrossIcon.tsx | 6 ++++-- .../src/components/ui/StatusIcon/StatusIcon.test.tsx | 5 +++-- airbyte-webapp/src/components/ui/StatusIcon/StatusIcon.tsx | 7 ++++++- 3 files changed, 13 insertions(+), 5 deletions(-) diff --git a/airbyte-webapp/src/components/icons/CrossIcon.tsx b/airbyte-webapp/src/components/icons/CrossIcon.tsx index a3e52884b1cd..e9ad8568ffdb 100644 --- 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) => ( - +export const CrossIcon = ({ color = "currentColor", title }: CrossIconProps) => ( + + {title && {title}} ", () => { const component = render(); 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("", () => { { 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: "cross" }, ]; 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 index de33c7d20f14..117ddc3418f7 100644 --- a/airbyte-webapp/src/components/ui/StatusIcon/StatusIcon.tsx +++ b/airbyte-webapp/src/components/ui/StatusIcon/StatusIcon.tsx @@ -3,12 +3,13 @@ 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; @@ -25,6 +26,7 @@ const _iconByStatus = { success: faCheck, warning: faExclamationTriangle, error: faTimes, + cancelled: faTimes, } as const; const _themeByStatus = { @@ -33,6 +35,7 @@ const _themeByStatus = { success: "successColor", warning: "warningColor", error: "dangerColor", + cancelled: "lightTextColor", } as const; const Container = styled.div>` @@ -86,6 +89,8 @@ export const StatusIcon: React.FC = ({ title, status = "error", ) : status === "sleep" ? ( + ) : status === "error" || status === "cancelled" ? ( + ) : ( )} From 3e1718727ecc0205d287d0f319cdfef57980a405 Mon Sep 17 00:00:00 2001 From: Edmundo Ruiz Ghanem Date: Wed, 21 Dec 2022 16:36:16 -0500 Subject: [PATCH 2/4] Update cancelled icon to use fontawesome minus --- .../src/components/ui/StatusIcon/StatusIcon.test.tsx | 2 +- airbyte-webapp/src/components/ui/StatusIcon/StatusIcon.tsx | 7 +++---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/airbyte-webapp/src/components/ui/StatusIcon/StatusIcon.test.tsx b/airbyte-webapp/src/components/ui/StatusIcon/StatusIcon.test.tsx index d55691eba195..c954f57bd72b 100644 --- a/airbyte-webapp/src/components/ui/StatusIcon/StatusIcon.test.tsx +++ b/airbyte-webapp/src/components/ui/StatusIcon/StatusIcon.test.tsx @@ -21,7 +21,7 @@ describe("", () => { { status: "warning", icon: "triangle-exclamation" }, { status: "loading", icon: "circle-loader" }, { status: "error", icon: "cross" }, - { status: "cancelled", 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 index 117ddc3418f7..bb2612c40155 100644 --- a/airbyte-webapp/src/components/ui/StatusIcon/StatusIcon.tsx +++ b/airbyte-webapp/src/components/ui/StatusIcon/StatusIcon.tsx @@ -1,4 +1,4 @@ -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"; @@ -25,8 +25,7 @@ const _iconByStatus = { sleep: faBan, success: faCheck, warning: faExclamationTriangle, - error: faTimes, - cancelled: faTimes, + cancelled: faMinus, } as const; const _themeByStatus = { @@ -89,7 +88,7 @@ export const StatusIcon: React.FC = ({ title, status = "error", ) : status === "sleep" ? ( - ) : status === "error" || status === "cancelled" ? ( + ) : status === "error" ? ( ) : ( From db692b785c6aeb7af018802af86cf4ed8db36c6b Mon Sep 17 00:00:00 2001 From: Edmundo Ruiz Ghanem Date: Wed, 21 Dec 2022 16:45:33 -0500 Subject: [PATCH 3/4] Show cancelled icon in connections job list and list table --- .../src/components/EntityTable/components/NameCell.tsx | 2 ++ airbyte-webapp/src/components/EntityTable/types.ts | 3 ++- airbyte-webapp/src/components/EntityTable/utils.tsx | 4 +++- airbyte-webapp/src/components/JobItem/components/MainInfo.tsx | 4 +++- 4 files changed, 10 insertions(+), 3 deletions(-) diff --git a/airbyte-webapp/src/components/EntityTable/components/NameCell.tsx b/airbyte-webapp/src/components/EntityTable/components/NameCell.tsx index 12612928ec95..f86ce6e1437a 100644 --- 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 = ({ 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 index e6f4ea4a58eb..fee917847008 100644 --- 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 index 9b341ca5bffc..71df00f71a0a 100644 --- 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 index 1db81e96bdc3..dc447be78542 100644 --- 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 = ({ job, attempts = [], isOpen, onExpan const isPartialSuccess = partialSuccessCheck(attempts); const statusIcon = useMemo(() => { - if (jobStatus === JobStatus.cancelled || (!isPartialSuccess && isFailed)) { + if (!isPartialSuccess && isFailed) { return ; + } else if (jobStatus === JobStatus.cancelled) { + return ; } else if (jobStatus === JobStatus.running) { return ; } else if (jobStatus === JobStatus.succeeded) { From 3153a95046eab40445aacc3caeea770f9adcb271 Mon Sep 17 00:00:00 2001 From: Edmundo Ruiz Ghanem Date: Thu, 22 Dec 2022 14:54:05 -0500 Subject: [PATCH 4/4] Update snapshots --- .../CreateConnectionForm.test.tsx.snap | 14 ++++++-------- .../ConnectionReplicationTab.test.tsx.snap | 14 ++++++-------- 2 files changed, 12 insertions(+), 16 deletions(-) diff --git a/airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap b/airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap index 9401275275a6..673366fc13d6 100644 --- a/airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap +++ b/airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap @@ -985,17 +985,15 @@ exports[`CreateConnectionForm should render with an error 1`] = ` class="" > diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap index ef733dd7f281..52e9cd9b82f7 100644 --- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap +++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap @@ -812,17 +812,15 @@ exports[`ConnectionReplicationTab should show an error if there is a schemaError class="" >