Add tooltips for connection status icons (airbytehq#2844)

Jimao · Apr 14, 2021 · cf45cc6 · cf45cc6
1 parent 6236ff0
commit cf45cc6
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 9 deletions.
diff --git a/airbyte-webapp/src/components/EntityTable/components/AllConnectionsStatusCell.tsx b/airbyte-webapp/src/components/EntityTable/components/AllConnectionsStatusCell.tsx
@@ -1,4 +1,5 @@
 import React, { useMemo } from "react";
+import { useIntl } from "react-intl";
 
 import { Status } from "../types";
 import StatusIcon from "components/StatusIcon";
@@ -15,6 +16,8 @@ type AllConnectionsStatusCellProps = {
 const AllConnectionsStatusCell: React.FC<AllConnectionsStatusCellProps> = ({
   connectEntities,
 }) => {
+  const formatMessage = useIntl().formatMessage;
+
   const active = useMemo(
     () =>
       connectEntities.filter(
@@ -47,18 +50,47 @@ const AllConnectionsStatusCell: React.FC<AllConnectionsStatusCellProps> = ({
     [connectEntities]
   );
 
-  // TODO: add error status
-
   if (!connectEntities.length) {
     return null;
   }
 
   return (
     <>
-      {active.length ? <StatusIcon success value={active.length} /> : null}
-      {inactive.length ? <StatusIcon inactive value={inactive.length} /> : null}
-      {failed.length ? <StatusIcon value={failed.length} /> : null}
-      {empty.length ? <StatusIcon empty value={empty.length} /> : null}
+      {active.length ? (
+        <StatusIcon
+          success
+          value={active.length}
+          title={formatMessage({
+            id: "connection.successSync",
+          })}
+        />
+      ) : null}
+      {inactive.length ? (
+        <StatusIcon
+          inactive
+          value={inactive.length}
+          title={formatMessage({
+            id: "connection.disabledConnection",
+          })}
+        />
+      ) : null}
+      {failed.length ? (
+        <StatusIcon
+          value={failed.length}
+          title={formatMessage({
+            id: "connection.failedSync",
+          })}
+        />
+      ) : null}
+      {empty.length ? (
+        <StatusIcon
+          empty
+          value={empty.length}
+          title={formatMessage({
+            id: "connection.noSyncData",
+          })}
+        />
+      ) : null}
     </>
   );
 };

diff --git a/airbyte-webapp/src/components/EntityTable/components/NameCell.tsx b/airbyte-webapp/src/components/EntityTable/components/NameCell.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import styled from "styled-components";
+import { useIntl } from "react-intl";
 
 import StatusIcon from "components/StatusIcon";
 import ImageBlock from "components/ImageBlock";
@@ -37,10 +38,29 @@ const Image = styled(ImageBlock)`
 `;
 
 const NameCell: React.FC<IProps> = ({ value, enabled, status, icon }) => {
+  const formatMessage = useIntl().formatMessage;
+  const title =
+    status === Status.EMPTY
+      ? formatMessage({
+          id: "connection.noSyncData",
+        })
+      : status === Status.INACTIVE
+      ? formatMessage({
+          id: "connection.disabledConnection",
+        })
+      : status === Status.ACTIVE
+      ? formatMessage({
+          id: "connection.successSync",
+        })
+      : formatMessage({
+          id: "connection.failedSync",
+        });
+
   return (
     <Content>
       {status ? (
         <StatusIcon
+          title={title}
           empty={status === Status.EMPTY}
           success={status === Status.ACTIVE}
           inactive={status === Status.INACTIVE}

diff --git a/airbyte-webapp/src/components/StatusIcon/StatusIcon.tsx b/airbyte-webapp/src/components/StatusIcon/StatusIcon.tsx
@@ -7,6 +7,7 @@ import PauseIcon from "./components/Pause";
 
 type IProps = {
   success?: boolean;
+  title?: string;
   inactive?: boolean;
   empty?: boolean;
   className?: string;
@@ -55,13 +56,13 @@ const Value = styled.span`
 const StatusIcon: React.FC<IProps> = (props) => (
   <Badge {...props}>
     {props.success ? (
-      <FontAwesomeIcon icon={faCheck} />
+      <FontAwesomeIcon icon={faCheck} title={props.title} />
     ) : props.inactive ? (
       <PauseIcon />
     ) : props.empty ? (
-      <FontAwesomeIcon icon={faBan} />
+      <FontAwesomeIcon icon={faBan} title={props.title} />
     ) : (
-      <FontAwesomeIcon icon={faTimes} />
+      <FontAwesomeIcon icon={faTimes} title={props.title} />
     )}
     {props.value && <Value>{props.value}</Value>}
   </Badge>

diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json
@@ -193,6 +193,10 @@
   "connection.newConnection": "+ new connection",
   "connection.newConnectionTitle": "New connection",
   "connection.noConnections": "Connection list is empty",
+  "connection.disabledConnection": "Disabled connection",
+  "connection.failedSync": "Failed sync",
+  "connection.successSync": "Succeeded sync",
+  "connection.noSyncData": "Sync was not started",
 
   "tables.sourceIsValidating": "Validating the source",
   "tables.sourceIsValidatingBefore": "before you add a new destination",