From 8a3aeaeaa9ea5684cf05ea819dc2500d1197d21f Mon Sep 17 00:00:00 2001
From: nataly <nataly@airbyte.io>
Date: Fri, 30 Sep 2022 15:37:42 -0400
Subject: [PATCH 1/8] Splits the imageBlock component.

---
 .../components/ConnectEntitiesCell.tsx        | 15 ++++--
 .../ui/NumberBadge/NumberBadge.module.scss    | 48 +++++++++++++++++++
 .../ui/NumberBadge/NumberBadge.stories.tsx    | 18 +++++++
 .../components/ui/NumberBadge/NumberBadge.tsx | 33 +++++++++++++
 .../src/components/ui/NumberBadge/index.tsx   |  1 +
 5 files changed, 112 insertions(+), 3 deletions(-)
 create mode 100644 airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss
 create mode 100644 airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.stories.tsx
 create mode 100644 airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx
 create mode 100644 airbyte-webapp/src/components/ui/NumberBadge/index.tsx

diff --git a/airbyte-webapp/src/components/EntityTable/components/ConnectEntitiesCell.tsx b/airbyte-webapp/src/components/EntityTable/components/ConnectEntitiesCell.tsx
index cdf9048488ab..7b6994c7a6b2 100644
--- a/airbyte-webapp/src/components/EntityTable/components/ConnectEntitiesCell.tsx
+++ b/airbyte-webapp/src/components/EntityTable/components/ConnectEntitiesCell.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
-import { ImageBlock } from "components/ui/ImageBlock";
+import { NumberBadge } from "components/ui/NumberBadge";
 
 interface IProps {
   values: Array<{
@@ -19,7 +19,7 @@ const Content = styled.div<{ enabled?: boolean }>`
   color: ${({ theme, enabled }) => (!enabled ? theme.greyColor40 : "inheret")};
 `;
 
-const Image = styled(ImageBlock)`
+const Image = styled(NumberBadge)`
   margin-right: 6px;
 `;
 
@@ -31,6 +31,7 @@ const Connector = styled.div`
 `;
 
 const ConnectEntitiesCell: React.FC<IProps> = ({ values, enabled, entity }) => {
+  console.log(values.length);
   if (values.length === 1) {
     return (
       <Content enabled={enabled}>
@@ -44,7 +45,15 @@ const ConnectEntitiesCell: React.FC<IProps> = ({ values, enabled, entity }) => {
   }
 
   if (!values.length) {
-    return null;
+    console.log(`No values:`, values.length);
+    return (
+      <Content enabled={enabled}>
+        <Image num={Number(0)} />
+        <div>
+          <p>No connections.</p>
+        </div>
+      </Content>
+    );
   }
 
   return (
diff --git a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss
new file mode 100644
index 000000000000..fea2f3b92aab
--- /dev/null
+++ b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss
@@ -0,0 +1,48 @@
+@use "../../../scss/colors";
+@use "../../../scss/fonts";
+
+.circle {
+  height: 20px;
+  width: 20px;
+  min-width: 20px;
+  border-radius: 50%;
+  text-align: center;
+  margin-right: 6px;
+  overflow: hidden;
+
+  &.darkBlue {
+    background: colors.$dark-blue-100;
+  }
+
+  &.green {
+    background: colors.$green;
+    color: colors.$white;
+  }
+
+  &.red {
+    background: colors.$red;
+    color: colors.$white;
+  }
+
+  &.blue {
+    background: colors.$blue;
+    color: colors.$white;
+  }
+}
+
+.small {
+  border-radius: 0%;
+}
+
+.number {
+  font-family: fonts.$primary;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 10px;
+  color: colors.$white;
+  padding: 3px 0;
+
+  &.light {
+    font-weight: 500;
+  }
+}
diff --git a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.stories.tsx b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.stories.tsx
new file mode 100644
index 000000000000..e0ec99ad7972
--- /dev/null
+++ b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.stories.tsx
@@ -0,0 +1,18 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { NumberBadge } from "./NumberBadge";
+
+export default {
+  title: "UI/NumberBadge",
+  component: NumberBadge,
+  argTypes: {},
+} as ComponentMeta<typeof NumberBadge>;
+
+const Template: ComponentStory<typeof NumberBadge> = (args) => <NumberBadge {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  img: undefined,
+  num: undefined,
+  small: undefined,
+};
diff --git a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx
new file mode 100644
index 000000000000..af78fa4a98c4
--- /dev/null
+++ b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx
@@ -0,0 +1,33 @@
+import classnames from "classnames";
+import React from "react";
+
+import styles from "./NumberBadge.module.scss";
+
+interface NumberBadgeProps {
+  img?: string;
+  num?: number;
+  small?: boolean;
+  color?: string;
+  light?: boolean;
+  ariaLabel?: string;
+}
+
+export const NumberBadge: React.FC<NumberBadgeProps> = ({ num, small, color, light, ariaLabel }) => {
+  const imageCircleClassnames = classnames({
+    [styles.circle]: num,
+    [styles.small]: small && !num,
+    [styles.darkBlue]: !small && num && !color,
+    [styles.green]: color === "green",
+    [styles.red]: color === "red",
+    [styles.blue]: color === "blue",
+    [styles.light]: light,
+  });
+
+  const numberStyles = classnames(styles.number, { [styles.light]: light });
+
+  return (
+    <div className={imageCircleClassnames} aria-label={ariaLabel}>
+      <div className={numberStyles}>{num}</div>
+    </div>
+  );
+};
diff --git a/airbyte-webapp/src/components/ui/NumberBadge/index.tsx b/airbyte-webapp/src/components/ui/NumberBadge/index.tsx
new file mode 100644
index 000000000000..57fea8264b27
--- /dev/null
+++ b/airbyte-webapp/src/components/ui/NumberBadge/index.tsx
@@ -0,0 +1 @@
+export * from "./NumberBadge";

From d5f9e1262f958829919378b529fdeb3fd3619603 Mon Sep 17 00:00:00 2001
From: nataly <nataly@airbyte.io>
Date: Fri, 7 Oct 2022 10:41:02 -0400
Subject: [PATCH 2/8] Adds and corrects some styles.

---
 .../components/ConnectEntitiesCell.tsx        |  9 ++++-----
 .../ui/NumberBadge/NumberBadge.module.scss    | 10 +---------
 .../ui/NumberBadge/NumberBadge.stories.tsx    |  4 +---
 .../components/ui/NumberBadge/NumberBadge.tsx | 20 ++++++-------------
 4 files changed, 12 insertions(+), 31 deletions(-)

diff --git a/airbyte-webapp/src/components/EntityTable/components/ConnectEntitiesCell.tsx b/airbyte-webapp/src/components/EntityTable/components/ConnectEntitiesCell.tsx
index 7b6994c7a6b2..b2ff54e978c3 100644
--- a/airbyte-webapp/src/components/EntityTable/components/ConnectEntitiesCell.tsx
+++ b/airbyte-webapp/src/components/EntityTable/components/ConnectEntitiesCell.tsx
@@ -19,7 +19,7 @@ const Content = styled.div<{ enabled?: boolean }>`
   color: ${({ theme, enabled }) => (!enabled ? theme.greyColor40 : "inheret")};
 `;
 
-const Image = styled(NumberBadge)`
+const Count = styled(NumberBadge)`
   margin-right: 6px;
 `;
 
@@ -35,7 +35,7 @@ const ConnectEntitiesCell: React.FC<IProps> = ({ values, enabled, entity }) => {
   if (values.length === 1) {
     return (
       <Content enabled={enabled}>
-        <Image num={1} />
+        <Count value={1} />
         <div>
           {values[0].name}
           <Connector>{values[0].connector}</Connector>
@@ -45,10 +45,9 @@ const ConnectEntitiesCell: React.FC<IProps> = ({ values, enabled, entity }) => {
   }
 
   if (!values.length) {
-    console.log(`No values:`, values.length);
     return (
       <Content enabled={enabled}>
-        <Image num={Number(0)} />
+        <Count value={0} />
         <div>
           <p>No connections.</p>
         </div>
@@ -58,7 +57,7 @@ const ConnectEntitiesCell: React.FC<IProps> = ({ values, enabled, entity }) => {
 
   return (
     <Content enabled={enabled}>
-      <Image num={values.length} />
+      <Count value={values.length} />
       <div>
         <FormattedMessage id={`tables.${entity}ConnectWithNum`} values={{ num: values.length }} />
         <Connector>{`${values[0].connector}, ${values[1].connector}${values.length > 2 ? ",..." : ""}`}</Connector>
diff --git a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss
index fea2f3b92aab..f2d360d7304f 100644
--- a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss
+++ b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss
@@ -30,19 +30,11 @@
   }
 }
 
-.small {
-  border-radius: 0%;
-}
-
 .number {
   font-family: fonts.$primary;
   font-style: normal;
-  font-weight: 600;
+  font-weight: 500;
   font-size: 10px;
   color: colors.$white;
   padding: 3px 0;
-
-  &.light {
-    font-weight: 500;
-  }
 }
diff --git a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.stories.tsx b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.stories.tsx
index e0ec99ad7972..b8c3b2e59e14 100644
--- a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.stories.tsx
+++ b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.stories.tsx
@@ -12,7 +12,5 @@ const Template: ComponentStory<typeof NumberBadge> = (args) => <NumberBadge {...
 
 export const Primary = Template.bind({});
 Primary.args = {
-  img: undefined,
-  num: undefined,
-  small: undefined,
+  value: undefined,
 };
diff --git a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx
index af78fa4a98c4..c734806243ac 100644
--- a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx
+++ b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx
@@ -4,30 +4,22 @@ import React from "react";
 import styles from "./NumberBadge.module.scss";
 
 interface NumberBadgeProps {
-  img?: string;
-  num?: number;
-  small?: boolean;
+  value: number;
   color?: string;
-  light?: boolean;
-  ariaLabel?: string;
+  "aria-label"?: string;
 }
 
-export const NumberBadge: React.FC<NumberBadgeProps> = ({ num, small, color, light, ariaLabel }) => {
-  const imageCircleClassnames = classnames({
-    [styles.circle]: num,
-    [styles.small]: small && !num,
-    [styles.darkBlue]: !small && num && !color,
+export const NumberBadge: React.FC<NumberBadgeProps> = ({ value, color, "aria-label": ariaLabel }) => {
+  const imageCircleClassnames = classnames(styles.circle, {
+    [styles.darkBlue]: !color,
     [styles.green]: color === "green",
     [styles.red]: color === "red",
     [styles.blue]: color === "blue",
-    [styles.light]: light,
   });
 
-  const numberStyles = classnames(styles.number, { [styles.light]: light });
-
   return (
     <div className={imageCircleClassnames} aria-label={ariaLabel}>
-      <div className={numberStyles}>{num}</div>
+      <div className={styles.number}>{value}</div>
     </div>
   );
 };

From a3212a48c21e931cd7f946e125f64cc77b6cee88 Mon Sep 17 00:00:00 2001
From: nataly <nataly@airbyte.io>
Date: Fri, 7 Oct 2022 16:21:51 -0400
Subject: [PATCH 3/8] Finishes cleaning up styles and properties.

---
 .../components/ConnectEntitiesCell.tsx        |  3 --
 .../ui/ImageBlock/ImageBlock.module.scss      | 42 -------------------
 .../ui/ImageBlock/ImageBlock.stories.tsx      |  1 -
 .../components/ui/ImageBlock/ImageBlock.tsx   | 24 +++--------
 .../components/ui/NumberBadge/NumberBadge.tsx |  4 +-
 .../components/DiffIconBlock.tsx              | 23 +++++-----
 6 files changed, 18 insertions(+), 79 deletions(-)

diff --git a/airbyte-webapp/src/components/EntityTable/components/ConnectEntitiesCell.tsx b/airbyte-webapp/src/components/EntityTable/components/ConnectEntitiesCell.tsx
index b2ff54e978c3..e55c4184af6a 100644
--- a/airbyte-webapp/src/components/EntityTable/components/ConnectEntitiesCell.tsx
+++ b/airbyte-webapp/src/components/EntityTable/components/ConnectEntitiesCell.tsx
@@ -48,9 +48,6 @@ const ConnectEntitiesCell: React.FC<IProps> = ({ values, enabled, entity }) => {
     return (
       <Content enabled={enabled}>
         <Count value={0} />
-        <div>
-          <p>No connections.</p>
-        </div>
       </Content>
     );
   }
diff --git a/airbyte-webapp/src/components/ui/ImageBlock/ImageBlock.module.scss b/airbyte-webapp/src/components/ui/ImageBlock/ImageBlock.module.scss
index 1b7963a9cd05..5d80661bfaf9 100644
--- a/airbyte-webapp/src/components/ui/ImageBlock/ImageBlock.module.scss
+++ b/airbyte-webapp/src/components/ui/ImageBlock/ImageBlock.module.scss
@@ -9,35 +9,6 @@
   margin-right: 6px;
 }
 
-.circle {
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  border-radius: 50%;
-  text-align: center;
-  margin-right: 6px;
-  overflow: hidden;
-
-  &.darkBlue {
-    background: colors.$dark-blue-100;
-  }
-
-  &.green {
-    background: colors.$green;
-    color: colors.$white;
-  }
-
-  &.red {
-    background: colors.$red;
-    color: colors.$white;
-  }
-
-  &.blue {
-    background: colors.$blue;
-    color: colors.$white;
-  }
-}
-
 .small {
   border-radius: 0%;
 }
@@ -46,16 +17,3 @@
   max-height: 100%;
   max-width: 100%;
 }
-
-.number {
-  font-family: fonts.$primary;
-  font-style: normal;
-  font-weight: 600;
-  font-size: 10px;
-  color: colors.$white;
-  padding: 3px 0;
-
-  &.light {
-    font-weight: 500;
-  }
-}
diff --git a/airbyte-webapp/src/components/ui/ImageBlock/ImageBlock.stories.tsx b/airbyte-webapp/src/components/ui/ImageBlock/ImageBlock.stories.tsx
index 5c10509544b3..f8cf9d105ad7 100644
--- a/airbyte-webapp/src/components/ui/ImageBlock/ImageBlock.stories.tsx
+++ b/airbyte-webapp/src/components/ui/ImageBlock/ImageBlock.stories.tsx
@@ -13,6 +13,5 @@ const Template: ComponentStory<typeof ImageBlock> = (args) => <ImageBlock {...ar
 export const Primary = Template.bind({});
 Primary.args = {
   img: undefined,
-  num: undefined,
   small: undefined,
 };
diff --git a/airbyte-webapp/src/components/ui/ImageBlock/ImageBlock.tsx b/airbyte-webapp/src/components/ui/ImageBlock/ImageBlock.tsx
index a239e42d715c..bef9d9d7d0f7 100644
--- a/airbyte-webapp/src/components/ui/ImageBlock/ImageBlock.tsx
+++ b/airbyte-webapp/src/components/ui/ImageBlock/ImageBlock.tsx
@@ -6,31 +6,19 @@ import { getIcon } from "utils/imageUtils";
 import styles from "./ImageBlock.module.scss";
 
 interface ImageBlockProps {
-  img?: string;
-  num?: number;
+  img: string;
   small?: boolean;
-  color?: string;
-  light?: boolean;
-  ariaLabel?: string;
+  "aria-label"?: string;
 }
 
-export const ImageBlock: React.FC<ImageBlockProps> = ({ img, num, small, color, light, ariaLabel }) => {
-  const imageCircleClassnames = classnames({
-    [styles.circle]: num,
-    [styles.iconContainer]: !num || num === undefined,
-    [styles.small]: small && !num,
-    [styles.darkBlue]: !small && num && !color,
-    [styles.green]: color === "green",
-    [styles.red]: color === "red",
-    [styles.blue]: color === "blue",
-    [styles.light]: light,
+export const ImageBlock: React.FC<ImageBlockProps> = ({ img, small, "aria-label": ariaLabel }) => {
+  const imageCircleClassnames = classnames(styles.iconContainer, {
+    [styles.small]: small,
   });
 
-  const numberStyles = classnames(styles.number, { [styles.light]: light });
-
   return (
     <div className={imageCircleClassnames} aria-label={ariaLabel}>
-      {num ? <div className={numberStyles}>{num}</div> : <div className={styles.icon}>{getIcon(img)}</div>}
+      <div className={styles.icon}>{getIcon(img)}</div>
     </div>
   );
 };
diff --git a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx
index c734806243ac..be7df91ade29 100644
--- a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx
+++ b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx
@@ -10,7 +10,7 @@ interface NumberBadgeProps {
 }
 
 export const NumberBadge: React.FC<NumberBadgeProps> = ({ value, color, "aria-label": ariaLabel }) => {
-  const imageCircleClassnames = classnames(styles.circle, {
+  const numberBadgeClassnames = classnames(styles.circle, {
     [styles.darkBlue]: !color,
     [styles.green]: color === "green",
     [styles.red]: color === "red",
@@ -18,7 +18,7 @@ export const NumberBadge: React.FC<NumberBadgeProps> = ({ value, color, "aria-la
   });
 
   return (
-    <div className={imageCircleClassnames} aria-label={ariaLabel}>
+    <div className={numberBadgeClassnames} aria-label={ariaLabel}>
       <div className={styles.number}>{value}</div>
     </div>
   );
diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffIconBlock.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffIconBlock.tsx
index a9c3467fd2ca..b74e011a35ea 100644
--- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffIconBlock.tsx
+++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffIconBlock.tsx
@@ -1,6 +1,6 @@
 import { useIntl } from "react-intl";
 
-import { ImageBlock } from "components/ui/ImageBlock";
+import { NumberBadge } from "components/ui/NumberBadge";
 
 import styles from "./DiffIconBlock.module.scss";
 
@@ -15,11 +15,10 @@ export const DiffIconBlock: React.FC<DiffIconBlockProps> = ({ newCount, removedC
   return (
     <div className={styles.iconBlock}>
       {removedCount > 0 && (
-        <ImageBlock
-          num={removedCount}
+        <NumberBadge
+          value={removedCount}
           color="red"
-          light
-          ariaLabel={`${formatMessage(
+          aria-label={`${formatMessage(
             {
               id: "connection.updateSchema.removed",
             },
@@ -31,11 +30,10 @@ export const DiffIconBlock: React.FC<DiffIconBlockProps> = ({ newCount, removedC
         />
       )}
       {newCount > 0 && (
-        <ImageBlock
-          num={newCount}
+        <NumberBadge
+          value={newCount}
           color="green"
-          light
-          ariaLabel={`${formatMessage(
+          aria-label={`${formatMessage(
             {
               id: "connection.updateSchema.new",
             },
@@ -47,11 +45,10 @@ export const DiffIconBlock: React.FC<DiffIconBlockProps> = ({ newCount, removedC
         />
       )}
       {changedCount > 0 && (
-        <ImageBlock
-          num={changedCount}
+        <NumberBadge
+          value={changedCount}
           color="blue"
-          light
-          ariaLabel={`${formatMessage(
+          aria-label={`${formatMessage(
             {
               id: "connection.updateSchema.changed",
             },

From 4c75d4b1b5afae56142d4002f5afe7cfbaf8e786 Mon Sep 17 00:00:00 2001
From: nataly <nataly@airbyte.io>
Date: Tue, 11 Oct 2022 09:52:25 -0400
Subject: [PATCH 4/8] Cleanup.

---
 .../components/EntityTable/components/ConnectEntitiesCell.tsx    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/airbyte-webapp/src/components/EntityTable/components/ConnectEntitiesCell.tsx b/airbyte-webapp/src/components/EntityTable/components/ConnectEntitiesCell.tsx
index e55c4184af6a..b2d02c0bd3ce 100644
--- a/airbyte-webapp/src/components/EntityTable/components/ConnectEntitiesCell.tsx
+++ b/airbyte-webapp/src/components/EntityTable/components/ConnectEntitiesCell.tsx
@@ -31,7 +31,6 @@ const Connector = styled.div`
 `;
 
 const ConnectEntitiesCell: React.FC<IProps> = ({ values, enabled, entity }) => {
-  console.log(values.length);
   if (values.length === 1) {
     return (
       <Content enabled={enabled}>

From 4dfa205fd642926e1d149cb192e5200724e8c334 Mon Sep 17 00:00:00 2001
From: nataly <nataly@airbyte.io>
Date: Thu, 13 Oct 2022 09:51:18 -0400
Subject: [PATCH 5/8] Requested changes 1/2.

---
 .../components/ui/NumberBadge/NumberBadge.module.scss | 11 +++++++----
 .../components/ui/NumberBadge/NumberBadge.stories.tsx |  2 +-
 .../src/components/ui/NumberBadge/NumberBadge.tsx     |  7 ++++---
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss
index f2d360d7304f..1471ef34f6f2 100644
--- a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss
+++ b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss
@@ -3,12 +3,16 @@
 
 .circle {
   height: 20px;
-  width: 20px;
+  width: fit-content;
   min-width: 20px;
-  border-radius: 50%;
+  border-radius: 10px;
+  padding: 0 4px;
   text-align: center;
-  margin-right: 6px;
   overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  line-height: normal;
 
   &.darkBlue {
     background: colors.$dark-blue-100;
@@ -36,5 +40,4 @@
   font-weight: 500;
   font-size: 10px;
   color: colors.$white;
-  padding: 3px 0;
 }
diff --git a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.stories.tsx b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.stories.tsx
index b8c3b2e59e14..e356afd008f8 100644
--- a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.stories.tsx
+++ b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.stories.tsx
@@ -12,5 +12,5 @@ const Template: ComponentStory<typeof NumberBadge> = (args) => <NumberBadge {...
 
 export const Primary = Template.bind({});
 Primary.args = {
-  value: undefined,
+  value: 10,
 };
diff --git a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx
index be7df91ade29..e4084fae6f38 100644
--- a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx
+++ b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx
@@ -5,12 +5,13 @@ import styles from "./NumberBadge.module.scss";
 
 interface NumberBadgeProps {
   value: number;
-  color?: string;
+  color?: "green" | "red" | "blue" | "default";
+  className?: string;
   "aria-label"?: string;
 }
 
-export const NumberBadge: React.FC<NumberBadgeProps> = ({ value, color, "aria-label": ariaLabel }) => {
-  const numberBadgeClassnames = classnames(styles.circle, {
+export const NumberBadge: React.FC<NumberBadgeProps> = ({ value, color, className, "aria-label": ariaLabel }) => {
+  const numberBadgeClassnames = classnames(className, styles.circle, {
     [styles.darkBlue]: !color,
     [styles.green]: color === "green",
     [styles.red]: color === "red",

From 0287eaa89510731f04c788fffbe3037fcc326f6a Mon Sep 17 00:00:00 2001
From: nataly <nataly@airbyte.io>
Date: Thu, 13 Oct 2022 11:06:42 -0400
Subject: [PATCH 6/8] Requestion changes 2/x, margin not working in className.

---
 .../EntityTable/components/ConnectEntitiesCell.tsx    | 11 ++++-------
 .../components/ui/NumberBadge/NumberBadge.module.scss |  2 +-
 .../src/components/ui/NumberBadge/NumberBadge.tsx     |  2 +-
 3 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/airbyte-webapp/src/components/EntityTable/components/ConnectEntitiesCell.tsx b/airbyte-webapp/src/components/EntityTable/components/ConnectEntitiesCell.tsx
index b2d02c0bd3ce..211cfcca7bf3 100644
--- a/airbyte-webapp/src/components/EntityTable/components/ConnectEntitiesCell.tsx
+++ b/airbyte-webapp/src/components/EntityTable/components/ConnectEntitiesCell.tsx
@@ -19,10 +19,6 @@ const Content = styled.div<{ enabled?: boolean }>`
   color: ${({ theme, enabled }) => (!enabled ? theme.greyColor40 : "inheret")};
 `;
 
-const Count = styled(NumberBadge)`
-  margin-right: 6px;
-`;
-
 const Connector = styled.div`
   font-weight: normal;
   font-size: 12px;
@@ -30,11 +26,12 @@ const Connector = styled.div`
   color: ${({ theme }) => theme.greyColor40};
 `;
 
+const numberBadgeStyles = "margin-right: 6px;";
 const ConnectEntitiesCell: React.FC<IProps> = ({ values, enabled, entity }) => {
   if (values.length === 1) {
     return (
       <Content enabled={enabled}>
-        <Count value={1} />
+        <NumberBadge className={numberBadgeStyles} value={1} />
         <div>
           {values[0].name}
           <Connector>{values[0].connector}</Connector>
@@ -46,14 +43,14 @@ const ConnectEntitiesCell: React.FC<IProps> = ({ values, enabled, entity }) => {
   if (!values.length) {
     return (
       <Content enabled={enabled}>
-        <Count value={0} />
+        <NumberBadge className={numberBadgeStyles} value={0} />
       </Content>
     );
   }
 
   return (
     <Content enabled={enabled}>
-      <Count value={values.length} />
+      <NumberBadge className={numberBadgeStyles} value={values.length} />
       <div>
         <FormattedMessage id={`tables.${entity}ConnectWithNum`} values={{ num: values.length }} />
         <Connector>{`${values[0].connector}, ${values[1].connector}${values.length > 2 ? ",..." : ""}`}</Connector>
diff --git a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss
index 1471ef34f6f2..83ffc32e8616 100644
--- a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss
+++ b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss
@@ -14,7 +14,7 @@
   align-items: center;
   line-height: normal;
 
-  &.darkBlue {
+  &.default {
     background: colors.$dark-blue-100;
   }
 
diff --git a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx
index e4084fae6f38..e3c7109d6d8b 100644
--- a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx
+++ b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx
@@ -12,7 +12,7 @@ interface NumberBadgeProps {
 
 export const NumberBadge: React.FC<NumberBadgeProps> = ({ value, color, className, "aria-label": ariaLabel }) => {
   const numberBadgeClassnames = classnames(className, styles.circle, {
-    [styles.darkBlue]: !color,
+    [styles.default]: !color,
     [styles.green]: color === "green",
     [styles.red]: color === "red",
     [styles.blue]: color === "blue",

From 864c3f16470ca985bd18f0099005feb45022fefd Mon Sep 17 00:00:00 2001
From: nataly <nataly@airbyte.io>
Date: Mon, 17 Oct 2022 08:41:04 -0400
Subject: [PATCH 7/8] Corrects assing className as prop.

---
 .../EntityTable/components/ConnectEntitiesCell.tsx    | 11 +++++++----
 .../src/components/ui/NumberBadge/NumberBadge.tsx     |  2 +-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/airbyte-webapp/src/components/EntityTable/components/ConnectEntitiesCell.tsx b/airbyte-webapp/src/components/EntityTable/components/ConnectEntitiesCell.tsx
index 211cfcca7bf3..dbff24eeb6e2 100644
--- a/airbyte-webapp/src/components/EntityTable/components/ConnectEntitiesCell.tsx
+++ b/airbyte-webapp/src/components/EntityTable/components/ConnectEntitiesCell.tsx
@@ -13,6 +13,10 @@ interface IProps {
   entity: "source" | "destination";
 }
 
+const Number = styled(NumberBadge)`
+  margin-right: 6px;
+`;
+
 const Content = styled.div<{ enabled?: boolean }>`
   display: flex;
   align-items: center;
@@ -26,12 +30,11 @@ const Connector = styled.div`
   color: ${({ theme }) => theme.greyColor40};
 `;
 
-const numberBadgeStyles = "margin-right: 6px;";
 const ConnectEntitiesCell: React.FC<IProps> = ({ values, enabled, entity }) => {
   if (values.length === 1) {
     return (
       <Content enabled={enabled}>
-        <NumberBadge className={numberBadgeStyles} value={1} />
+        <Number value={1} />
         <div>
           {values[0].name}
           <Connector>{values[0].connector}</Connector>
@@ -43,14 +46,14 @@ const ConnectEntitiesCell: React.FC<IProps> = ({ values, enabled, entity }) => {
   if (!values.length) {
     return (
       <Content enabled={enabled}>
-        <NumberBadge className={numberBadgeStyles} value={0} />
+        <Number value={0} />
       </Content>
     );
   }
 
   return (
     <Content enabled={enabled}>
-      <NumberBadge className={numberBadgeStyles} value={values.length} />
+      <Number value={values.length} />
       <div>
         <FormattedMessage id={`tables.${entity}ConnectWithNum`} values={{ num: values.length }} />
         <Connector>{`${values[0].connector}, ${values[1].connector}${values.length > 2 ? ",..." : ""}`}</Connector>
diff --git a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx
index e3c7109d6d8b..a6d0a08484a0 100644
--- a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx
+++ b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx
@@ -11,7 +11,7 @@ interface NumberBadgeProps {
 }
 
 export const NumberBadge: React.FC<NumberBadgeProps> = ({ value, color, className, "aria-label": ariaLabel }) => {
-  const numberBadgeClassnames = classnames(className, styles.circle, {
+  const numberBadgeClassnames = classnames(styles.circle, className, {
     [styles.default]: !color,
     [styles.green]: color === "green",
     [styles.red]: color === "red",

From bdb9285783a18eb9fa0978a7186b80c00a15bf30 Mon Sep 17 00:00:00 2001
From: nataly <nataly@airbyte.io>
Date: Wed, 19 Oct 2022 10:49:38 -0400
Subject: [PATCH 8/8] Requested changes.

---
 .../ui/NumberBadge/NumberBadge.module.scss       | 16 ++++++----------
 .../components/ui/NumberBadge/NumberBadge.tsx    |  4 ++--
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss
index 83ffc32e8616..e0a6b4a5d309 100644
--- a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss
+++ b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss
@@ -13,6 +13,10 @@
   justify-content: center;
   align-items: center;
   line-height: normal;
+  font-family: fonts.$primary;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 10px;
 
   &.default {
     background: colors.$dark-blue-100;
@@ -20,12 +24,12 @@
 
   &.green {
     background: colors.$green;
-    color: colors.$white;
+    color: colors.$black;
   }
 
   &.red {
     background: colors.$red;
-    color: colors.$white;
+    color: colors.$black;
   }
 
   &.blue {
@@ -33,11 +37,3 @@
     color: colors.$white;
   }
 }
-
-.number {
-  font-family: fonts.$primary;
-  font-style: normal;
-  font-weight: 500;
-  font-size: 10px;
-  color: colors.$white;
-}
diff --git a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx
index a6d0a08484a0..d38716afd5ce 100644
--- a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx
+++ b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx
@@ -12,7 +12,7 @@ interface NumberBadgeProps {
 
 export const NumberBadge: React.FC<NumberBadgeProps> = ({ value, color, className, "aria-label": ariaLabel }) => {
   const numberBadgeClassnames = classnames(styles.circle, className, {
-    [styles.default]: !color,
+    [styles.default]: !color || color === "default",
     [styles.green]: color === "green",
     [styles.red]: color === "red",
     [styles.blue]: color === "blue",
@@ -20,7 +20,7 @@ export const NumberBadge: React.FC<NumberBadgeProps> = ({ value, color, classNam
 
   return (
     <div className={numberBadgeClassnames} aria-label={ariaLabel}>
-      <div className={styles.number}>{value}</div>
+      <div>{value}</div>
     </div>
   );
 };