Update "empty" status in StatusIcon to "sleep" with new icon (#12436)

* Update status icon empty state with new Moon icon Add StatusIcon storybook * Move PauseIcon to components/icons * Fix support for big status icon for inactive and empty * Rename status icon empty state to sleep
airbytehq · Apr 28, 2022 · 5a0666d · 5a0666d
1 parent e0902e6
commit 5a0666d
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 15 deletions.
diff --git a/airbyte-webapp/src/components/EntityTable/components/AllConnectionsStatusCell.tsx b/airbyte-webapp/src/components/EntityTable/components/AllConnectionsStatusCell.tsx
@@ -10,7 +10,7 @@ const _statusConfig: { status: Status; statusIconStatus?: StatusIconStatus; titl
   { status: Status.ACTIVE, statusIconStatus: "success", titleId: "connection.successSync" },
   { status: Status.INACTIVE, statusIconStatus: "inactive", titleId: "connection.disabledConnection" },
   { status: Status.FAILED, titleId: "connection.failedSync" },
-  { status: Status.EMPTY, statusIconStatus: "empty", titleId: "connection.noSyncData" },
+  { status: Status.EMPTY, statusIconStatus: "sleep", titleId: "connection.noSyncData" },
 ];
 
 interface AllConnectionStatusConnectEntity {

diff --git a/airbyte-webapp/src/components/EntityTable/components/NameCell.tsx b/airbyte-webapp/src/components/EntityTable/components/NameCell.tsx
@@ -45,7 +45,7 @@ const NameCell: React.FC<Props> = ({ value, enabled, status, icon, img }) => {
   const statusIconStatus = useMemo<StatusIconStatus | undefined>(
     () =>
       status === Status.EMPTY
-        ? "empty"
+        ? "sleep"
         : status === Status.ACTIVE
         ? "success"
         : status === Status.INACTIVE

diff --git a/airbyte-webapp/src/components/StatusIcon/StatusIcon.test.tsx b/airbyte-webapp/src/components/StatusIcon/StatusIcon.test.tsx
@@ -17,7 +17,7 @@ describe("<StatusIcon />", () => {
   const statusCases: { status: StatusIconStatus; icon: string }[] = [
     { status: "success", icon: "check" },
     { status: "inactive", icon: "pause" },
-    { status: "empty", icon: "ban" },
+    { status: "sleep", icon: "moon" },
     { status: "warning", icon: "triangle-exclamation" },
     { status: "loading", icon: "circle-loader" },
   ];

diff --git a/airbyte-webapp/src/components/StatusIcon/StatusIcon.tsx b/airbyte-webapp/src/components/StatusIcon/StatusIcon.tsx
@@ -3,50 +3,57 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React from "react";
 import styled from "styled-components";
 
+import { MoonIcon } from "components/icons/MoonIcon";
+
+import PauseIcon from "../icons/PauseIcon";
 import CircleLoader from "./CircleLoader";
-import PauseIcon from "./PauseIcon";
 
-export type StatusIconStatus = "empty" | "inactive" | "success" | "warning" | "loading";
+export type StatusIconStatus = "sleep" | "inactive" | "success" | "warning" | "loading";
 
-interface Props {
+interface StatusIconProps {
   className?: string;
   status?: StatusIconStatus;
   title?: string;
   big?: boolean;
   value?: string | number;
 }
 
-const getBadgeWidth = (props: Props) => (props.big ? (props.value ? 57 : 40) : props.value ? 37 : 20);
+const getBadgeWidth = (props: StatusIconProps) => (props.big ? (props.value ? 57 : 40) : props.value ? 37 : 20);
 
 const _iconByStatus: Partial<Record<StatusIconStatus, IconDefinition | undefined>> = {
-  empty: faBan,
+  sleep: faBan,
   success: faCheck,
   warning: faExclamationTriangle,
 };
 
 const _themeByStatus: Partial<Record<StatusIconStatus, string>> = {
-  empty: "attentionColor",
+  sleep: "lightTextColor",
   inactive: "lightTextColor",
   success: "successColor",
   warning: "warningColor",
 };
 
-const Container = styled.div<Props>`
+const Container = styled.div<StatusIconProps>`
   width: ${(props) => getBadgeWidth(props)}px;
   height: ${({ big }) => (big ? 40 : 20)}px;
   margin-right: 10px;
   font-size: ${({ big }) => (big ? 24 : 12)}px;
   line-height: ${({ big }) => (big ? 33 : 12)}px;
   text-align: center;
   display: inline-block;
-  vertical-align: top;
+  vertical-align: middle;
 `;
 
-const Badge = styled(Container)<Props>`
+const Badge = styled(Container)<StatusIconProps>`
   background: ${(props) => props.theme[(props.status && _themeByStatus[props.status]) || "dangerColor"]};
   border-radius: ${({ value }) => (value ? "15px" : "50%")};
   color: ${({ theme }) => theme.whiteColor};
-  padding-top: 4px;
+  padding-top: ${({ status }) => (status === "warning" || status === "inactive" ? 3 : 4)}px;
+
+  > svg {
+    height: 1em;
+    vertical-align: -0.125em;
+  }
 `;
 
 const Value = styled.span`
@@ -56,7 +63,7 @@ const Value = styled.span`
   vertical-align: top;
 `;
 
-const StatusIcon: React.FC<Props> = ({ title, status, ...props }) => {
+const StatusIcon: React.FC<StatusIconProps> = ({ title, status, ...props }) => {
   const valueElement = props.value ? <Value>{props.value}</Value> : null;
 
   if (status === "loading") {
@@ -72,6 +79,8 @@ const StatusIcon: React.FC<Props> = ({ title, status, ...props }) => {
     <Badge {...props} status={status}>
       {status === "inactive" ? (
         <PauseIcon title={title} />
+      ) : status === "sleep" ? (
+        <MoonIcon title={title} />
       ) : (
         <FontAwesomeIcon icon={(status && _iconByStatus[status]) || faTimes} title={title} />
       )}

diff --git a/airbyte-webapp/src/components/StatusIcon/index.stories.tsx b/airbyte-webapp/src/components/StatusIcon/index.stories.tsx
@@ -0,0 +1,16 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import StatusIconComponent from "./StatusIcon";
+
+export default {
+  title: "Ui/StatusIcon",
+  component: StatusIconComponent,
+  argTypes: {},
+} as ComponentMeta<typeof StatusIconComponent>;
+
+const Template: ComponentStory<typeof StatusIconComponent> = (args) => <StatusIconComponent {...args} />;
+
+export const StatusIcon = Template.bind({});
+StatusIcon.args = {
+  status: "success",
+};
diff --git a/airbyte-webapp/src/components/icons/MoonIcon.tsx b/airbyte-webapp/src/components/icons/MoonIcon.tsx
@@ -0,0 +1,15 @@
+interface MoonProps {
+  title?: string;
+}
+
+export const MoonIcon = ({ title }: MoonProps): JSX.Element => (
+  <svg viewBox="0 0 10 10" fill="none" role="img" data-icon="moon">
+    {title && <title>{title}</title>}
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M6.38 3.74396V4.31818H9.49719V3.48295H7.69996L9.50465 1.07422V0.5H6.38746V1.33523H8.18469L6.38 3.74396ZM2.75 3.49998C2.75 5.98526 4.76472 7.99998 7.25 7.99998C7.68548 7.99998 8.10652 7.93812 8.5048 7.82271C7.67992 8.84561 6.41638 9.49998 5 9.49998C2.51472 9.49998 0.5 7.48526 0.5 4.99998C0.5 2.95018 1.87052 1.22048 3.7452 0.677246C3.12269 1.44921 2.75 2.43107 2.75 3.49998Z"
+      fill="white"
+    />
+  </svg>
+);
diff --git a/...p/src/components/StatusIcon/PauseIcon.tsx → ...webapp/src/components/icons/PauseIcon.tsx b/...p/src/components/StatusIcon/PauseIcon.tsx → ...webapp/src/components/icons/PauseIcon.tsx
@@ -4,7 +4,7 @@ interface Props {
 }
 
 const PauseIcon = ({ color = "currentColor", title }: Props): JSX.Element => (
-  <svg width="6" height="11" viewBox="0 0 6 11" fill="none" role="img" data-icon="pause">
+  <svg viewBox="0 0 6 11" fill="none" role="img" data-icon="pause">
     {title && <title>{title}</title>}
     <line x1="1" y1="1.5" x2="1" y2="10.5" stroke={color} strokeWidth="2" />
     <line x1="5" y1="1.5" x2="5" y2="10.5" stroke={color} strokeWidth="2" />