From c3d26185a26a2c450aec0d9a049e36cfee07293a Mon Sep 17 00:00:00 2001
From: yatsukbogdan <yatsukbogdan@gmail.com>
Date: Thu, 10 Nov 2022 22:08:40 +0200
Subject: [PATCH 1/6] Adds new styles for PillButton component with divider

---
 .../CatalogTree/next/SyncModeSelect.tsx       | 11 +--
 .../ui/PillSelect/PillButton.module.scss      | 78 +++++++++++++++++--
 .../components/ui/PillSelect/PillButton.tsx   | 27 ++++---
 .../components/ui/PillSelect/PillSelect.tsx   |  7 +-
 4 files changed, 93 insertions(+), 30 deletions(-)

diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/SyncModeSelect.tsx b/airbyte-webapp/src/components/connection/CatalogTree/next/SyncModeSelect.tsx
index 9cc8e7756821f..adbb0f15639d1 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/next/SyncModeSelect.tsx
+++ b/airbyte-webapp/src/components/connection/CatalogTree/next/SyncModeSelect.tsx
@@ -28,13 +28,10 @@ export const SyncModeSelect: React.FC<SyncModeSelectProps> = ({ options, onChang
     return options.map(({ value }) => {
       const { syncMode, destinationSyncMode } = value;
       return {
-        label: (
-          <>
-            <FormattedMessage id={`syncMode.${syncMode}`} />
-            {` | `}
-            <FormattedMessage id={`destinationSyncMode.${destinationSyncMode}`} />
-          </>
-        ),
+        label: [
+          <FormattedMessage id={`syncMode.${syncMode}`} />,
+          <FormattedMessage id={`destinationSyncMode.${destinationSyncMode}`} />,
+        ],
         value,
       };
     });
diff --git a/airbyte-webapp/src/components/ui/PillSelect/PillButton.module.scss b/airbyte-webapp/src/components/ui/PillSelect/PillButton.module.scss
index 3cf05bde64ae5..b5e5352bee966 100644
--- a/airbyte-webapp/src/components/ui/PillSelect/PillButton.module.scss
+++ b/airbyte-webapp/src/components/ui/PillSelect/PillButton.module.scss
@@ -19,15 +19,48 @@
   }
 }
 
+@mixin divider-theme($name, $background, $hover) {
+  &.#{$name} {
+    .divider {
+      background-color: $background;
+    }
+
+    &:not(:disabled) {
+      &:hover,
+      &.active {
+        .divider {
+          background: $hover;
+        }
+      }
+    }
+  }
+}
+
+@mixin disabled-theme($name, $background, $text) {
+  &.#{$name} {
+    &.disabled {
+      .icon {
+        visibility: hidden;
+      }
+
+      .text {
+        color: $text;
+      }
+
+      background-color: $background;
+    }
+  }
+}
+
 .button {
+  height: 19px;
   max-width: 100%;
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 3px 10px;
-  gap: variables.$spacing-sm;
+  padding: 0;
   border: none;
-  border-radius: 20px;
+  border-radius: variables.$spacing-xl;
   cursor: pointer;
   transition: background-color variables.$transition-out, color variables.$transition-out;
 
@@ -38,11 +71,44 @@
   @include theme("red", colors.$red-50, colors.$red-600, colors.$red-100);
   @include theme("strongRed", colors.$red-300, colors.$white, colors.$red-400);
 
-  @include theme("disabled", colors.$grey-50, colors.$grey, colors.$grey-50);
+  @include disabled-theme("grey", colors.$grey-50, colors.$grey-600);
+  @include disabled-theme("blue", colors.$blue-50, colors.$blue-600);
+  @include disabled-theme("strongBlue", colors.$blue-500, colors.$blue-200);
+  @include disabled-theme("green", colors.$green-50, colors.$green-600);
+  @include disabled-theme("red", colors.$red-50, colors.$red-600);
+  @include disabled-theme("strongRed", colors.$red-300, colors.$white);
+
+  @include divider-theme("grey", colors.$grey-100, colors.$grey-200);
+  @include divider-theme("blue", colors.$blue-100, colors.$blue-200);
+  @include divider-theme("strongBlue", colors.$blue-200, colors.$blue-100);
+  @include divider-theme("green", colors.$green-100, colors.$green-500);
+  @include divider-theme("red", colors.$red-100, colors.$red-200);
+  @include divider-theme("strongRed", colors.$red-100, colors.$red-100);
 }
 
 .text {
-  white-space: nowrap;
-  overflow: hidden;
   text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.icon {
+  margin-left: auto;
+  margin-right: variables.$spacing-md;
+}
+
+.labelContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: variables.$spacing-xs variables.$spacing-md;
+  justify-content: flex-start;
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.divider {
+  height: 100%;
+  min-width: 1px;
+  transition: background-color variables.$transition-out, color variables.$transition-out;
 }
diff --git a/airbyte-webapp/src/components/ui/PillSelect/PillButton.tsx b/airbyte-webapp/src/components/ui/PillSelect/PillButton.tsx
index 9d9c52338acaf..092c8dbd84ff1 100644
--- a/airbyte-webapp/src/components/ui/PillSelect/PillButton.tsx
+++ b/airbyte-webapp/src/components/ui/PillSelect/PillButton.tsx
@@ -19,29 +19,32 @@ const STYLES_BY_VARIANT: Readonly<Record<PillButtonVariant, string>> = {
 interface PillButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   active?: boolean;
   variant?: PillButtonVariant;
+  labels?: React.ReactNode[];
 }
 
-export const PillButton: React.FC<React.PropsWithChildren<PillButtonProps>> = ({
-  children,
-  active,
-  variant = "grey",
-  ...buttonProps
-}) => {
+export const PillButton: React.FC<PillButtonProps> = ({ active, variant = "grey", labels = [], ...buttonProps }) => {
   const buttonClassName = classNames(
     styles.button,
     {
       [styles.active]: active,
+      [styles.disabled]: buttonProps.disabled,
     },
-    buttonProps.disabled ? styles.disabled : STYLES_BY_VARIANT[variant],
+    STYLES_BY_VARIANT[variant],
     buttonProps.className
   );
-
   return (
     <button type="button" {...buttonProps} className={buttonClassName}>
-      <Text as="span" size="xs" className={styles.text}>
-        {children}
-      </Text>
-      <FontAwesomeIcon icon={faCaretDown} />
+      {labels.map((label, index) => (
+        <>
+          <div className={styles.labelContainer}>
+            <Text as="span" size="xs" className={styles.text}>
+              {label}
+            </Text>
+          </div>
+          {index !== labels?.length - 1 && <div className={styles.divider} />}
+        </>
+      ))}
+      <FontAwesomeIcon className={styles.icon} icon={faCaretDown} />
     </button>
   );
 };
diff --git a/airbyte-webapp/src/components/ui/PillSelect/PillSelect.tsx b/airbyte-webapp/src/components/ui/PillSelect/PillSelect.tsx
index 5c8d2b7e60dab..1ddc43f424fd1 100644
--- a/airbyte-webapp/src/components/ui/PillSelect/PillSelect.tsx
+++ b/airbyte-webapp/src/components/ui/PillSelect/PillSelect.tsx
@@ -11,7 +11,6 @@ interface PillSelectProps extends PickedPopoutProps {
 
 export const PillSelect: React.FC<PillSelectProps> = ({ className, ...props }) => {
   const { isMulti, variant, disabled } = props;
-
   return (
     <Popout
       {...props}
@@ -22,11 +21,11 @@ export const PillSelect: React.FC<PillSelectProps> = ({ className, ...props }) =
             ? value.map(({ label }: { label: string }) => label).join(", ")
             : value.label
           : "";
-
         return (
           <Tooltip
             control={
               <PillButton
+                labels={Array.isArray(value?.label) ? value?.label : [value?.label]}
                 variant={variant}
                 disabled={disabled}
                 onClick={(event) => {
@@ -35,9 +34,7 @@ export const PillSelect: React.FC<PillSelectProps> = ({ className, ...props }) =
                 }}
                 active={isOpen}
                 className={className}
-              >
-                {label}
-              </PillButton>
+              />
             }
             placement="bottom-start"
             disabled={isOpen || !isMulti || value?.length <= 1}

From a0918b170c010de669df9dc7af5ec6c65462d1c1 Mon Sep 17 00:00:00 2001
From: yatsukbogdan <yatsukbogdan@gmail.com>
Date: Mon, 28 Nov 2022 16:06:28 +0200
Subject: [PATCH 2/6] Change labels to children property usage; Add new
 storybook component for PillSelect

---
 .../CatalogTree/next/StreamPathSelect.tsx     |  1 +
 .../CatalogTree/next/SyncModeSelect.tsx       |  9 ++++-
 .../components/ui/PillSelect/PillButton.tsx   | 13 +++----
 .../components/ui/PillSelect/PillSelect.tsx   |  5 +--
 .../ui/PillSelect/index.stories.tsx           | 36 ++++++++++++++++++-
 5 files changed, 54 insertions(+), 10 deletions(-)

diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/StreamPathSelect.tsx b/airbyte-webapp/src/components/connection/CatalogTree/next/StreamPathSelect.tsx
index 86c006c9e31f7..c6f26aff400b9 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/next/StreamPathSelect.tsx
+++ b/airbyte-webapp/src/components/connection/CatalogTree/next/StreamPathSelect.tsx
@@ -53,6 +53,7 @@ export const StreamPathSelect: React.FC<PathPopoutProps> = (props) => {
   const options = props.paths.map((path) => ({
     value: path,
     label: pathDisplayName(path),
+    pillLabel: pathDisplayName(path),
   }));
 
   return (
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/SyncModeSelect.tsx b/airbyte-webapp/src/components/connection/CatalogTree/next/SyncModeSelect.tsx
index adbb0f15639d1..a1d77e6d80f63 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/next/SyncModeSelect.tsx
+++ b/airbyte-webapp/src/components/connection/CatalogTree/next/SyncModeSelect.tsx
@@ -28,7 +28,14 @@ export const SyncModeSelect: React.FC<SyncModeSelectProps> = ({ options, onChang
     return options.map(({ value }) => {
       const { syncMode, destinationSyncMode } = value;
       return {
-        label: [
+        label: (
+          <>
+            <FormattedMessage id={`syncMode.${syncMode}`} />
+            {` | `}
+            <FormattedMessage id={`destinationSyncMode.${destinationSyncMode}`} />
+          </>
+        ),
+        pillLabel: [
           <FormattedMessage id={`syncMode.${syncMode}`} />,
           <FormattedMessage id={`destinationSyncMode.${destinationSyncMode}`} />,
         ],
diff --git a/airbyte-webapp/src/components/ui/PillSelect/PillButton.tsx b/airbyte-webapp/src/components/ui/PillSelect/PillButton.tsx
index 092c8dbd84ff1..39c52db1e1828 100644
--- a/airbyte-webapp/src/components/ui/PillSelect/PillButton.tsx
+++ b/airbyte-webapp/src/components/ui/PillSelect/PillButton.tsx
@@ -1,6 +1,7 @@
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classNames from "classnames";
+import { Children } from "react";
 
 import { Text } from "../Text";
 import styles from "./PillButton.module.scss";
@@ -19,10 +20,9 @@ const STYLES_BY_VARIANT: Readonly<Record<PillButtonVariant, string>> = {
 interface PillButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   active?: boolean;
   variant?: PillButtonVariant;
-  labels?: React.ReactNode[];
 }
 
-export const PillButton: React.FC<PillButtonProps> = ({ active, variant = "grey", labels = [], ...buttonProps }) => {
+export const PillButton: React.FC<PillButtonProps> = ({ children, active, variant = "grey", ...buttonProps }) => {
   const buttonClassName = classNames(
     styles.button,
     {
@@ -32,16 +32,17 @@ export const PillButton: React.FC<PillButtonProps> = ({ active, variant = "grey"
     STYLES_BY_VARIANT[variant],
     buttonProps.className
   );
+  const arrayChildren = Children.toArray(children);
   return (
     <button type="button" {...buttonProps} className={buttonClassName}>
-      {labels.map((label, index) => (
+      {Children.map(arrayChildren, (child, index) => (
         <>
-          <div className={styles.labelContainer}>
+          <div key={index} className={styles.labelContainer}>
             <Text as="span" size="xs" className={styles.text}>
-              {label}
+              {child}
             </Text>
           </div>
-          {index !== labels?.length - 1 && <div className={styles.divider} />}
+          {index !== arrayChildren?.length - 1 && <div className={styles.divider} />}
         </>
       ))}
       <FontAwesomeIcon className={styles.icon} icon={faCaretDown} />
diff --git a/airbyte-webapp/src/components/ui/PillSelect/PillSelect.tsx b/airbyte-webapp/src/components/ui/PillSelect/PillSelect.tsx
index 1ddc43f424fd1..569148897aa12 100644
--- a/airbyte-webapp/src/components/ui/PillSelect/PillSelect.tsx
+++ b/airbyte-webapp/src/components/ui/PillSelect/PillSelect.tsx
@@ -25,7 +25,6 @@ export const PillSelect: React.FC<PillSelectProps> = ({ className, ...props }) =
           <Tooltip
             control={
               <PillButton
-                labels={Array.isArray(value?.label) ? value?.label : [value?.label]}
                 variant={variant}
                 disabled={disabled}
                 onClick={(event) => {
@@ -34,7 +33,9 @@ export const PillSelect: React.FC<PillSelectProps> = ({ className, ...props }) =
                 }}
                 active={isOpen}
                 className={className}
-              />
+              >
+                {value?.pillLabel}
+              </PillButton>
             }
             placement="bottom-start"
             disabled={isOpen || !isMulti || value?.length <= 1}
diff --git a/airbyte-webapp/src/components/ui/PillSelect/index.stories.tsx b/airbyte-webapp/src/components/ui/PillSelect/index.stories.tsx
index bc80ac33cde42..8961119a3a016 100644
--- a/airbyte-webapp/src/components/ui/PillSelect/index.stories.tsx
+++ b/airbyte-webapp/src/components/ui/PillSelect/index.stories.tsx
@@ -8,7 +8,7 @@ export default {
 } as ComponentMeta<typeof PillSelect>;
 
 const Template: ComponentStory<typeof PillSelect> = (args) => (
-  <div style={{ width: "120px" }}>
+  <div style={{ width: "300px" }}>
     <PillSelect {...args} />
   </div>
 );
@@ -17,22 +17,27 @@ const options = [
   {
     value: "id",
     label: "id",
+    pillLabel: "id",
   },
   {
     value: "first_name",
     label: "first_name",
+    pillLabel: "id",
   },
   {
     value: "last_name",
     label: "last_name",
+    pillLabel: "id",
   },
   {
     value: "email",
     label: "email",
+    pillLabel: "id",
   },
   {
     value: "company",
     label: "company",
+    pillLabel: "id",
   },
 ];
 
@@ -48,3 +53,32 @@ Multi.args = {
   isMulti: true,
   value: ["first_name", "last_name"],
 };
+
+const optionsWithTwoValues = [
+  {
+    value: "test1",
+    label: "dog | cat",
+    pillLabel: ["dog", "cat"],
+  },
+  {
+    value: "test2",
+    label: "dog | cat | rat",
+    pillLabel: ["dog", "cat", "rat"],
+  },
+  {
+    value: "test3",
+    label: "dog",
+    pillLabel: "dog",
+  },
+  {
+    value: "test4",
+    label: "cat",
+    pillLabel: ["cat"],
+  },
+];
+
+export const PrimaryWithTwoValue = Template.bind({});
+Primary.args = {
+  options: optionsWithTwoValues,
+  value: "test1",
+};

From 869edeb619aa3bb24daffb84a0ae440b91f72a21 Mon Sep 17 00:00:00 2001
From: yatsukbogdan <yatsukbogdan@gmail.com>
Date: Wed, 30 Nov 2022 23:06:19 +0200
Subject: [PATCH 3/6] Fixes pillLabel while PillSelect isMulti equals true;
 Fixes storybook for PillSelect

---
 .../src/components/ui/PillSelect/PillSelect.tsx        |  7 ++++++-
 .../src/components/ui/PillSelect/index.stories.tsx     | 10 +++++-----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/airbyte-webapp/src/components/ui/PillSelect/PillSelect.tsx b/airbyte-webapp/src/components/ui/PillSelect/PillSelect.tsx
index 569148897aa12..a0b8405539a12 100644
--- a/airbyte-webapp/src/components/ui/PillSelect/PillSelect.tsx
+++ b/airbyte-webapp/src/components/ui/PillSelect/PillSelect.tsx
@@ -21,6 +21,11 @@ export const PillSelect: React.FC<PillSelectProps> = ({ className, ...props }) =
             ? value.map(({ label }: { label: string }) => label).join(", ")
             : value.label
           : "";
+        const pillLabel = value
+          ? isMulti
+            ? value.map(({ pillLabel }: { pillLabel: string }) => pillLabel).join(", ")
+            : value.pillLabel
+          : "";
         return (
           <Tooltip
             control={
@@ -34,7 +39,7 @@ export const PillSelect: React.FC<PillSelectProps> = ({ className, ...props }) =
                 active={isOpen}
                 className={className}
               >
-                {value?.pillLabel}
+                {pillLabel}
               </PillButton>
             }
             placement="bottom-start"
diff --git a/airbyte-webapp/src/components/ui/PillSelect/index.stories.tsx b/airbyte-webapp/src/components/ui/PillSelect/index.stories.tsx
index 8961119a3a016..72e86f93aa026 100644
--- a/airbyte-webapp/src/components/ui/PillSelect/index.stories.tsx
+++ b/airbyte-webapp/src/components/ui/PillSelect/index.stories.tsx
@@ -22,22 +22,22 @@ const options = [
   {
     value: "first_name",
     label: "first_name",
-    pillLabel: "id",
+    pillLabel: "first_name",
   },
   {
     value: "last_name",
     label: "last_name",
-    pillLabel: "id",
+    pillLabel: "last_name",
   },
   {
     value: "email",
     label: "email",
-    pillLabel: "id",
+    pillLabel: "email",
   },
   {
     value: "company",
     label: "company",
-    pillLabel: "id",
+    pillLabel: "company",
   },
 ];
 
@@ -78,7 +78,7 @@ const optionsWithTwoValues = [
 ];
 
 export const PrimaryWithTwoValue = Template.bind({});
-Primary.args = {
+PrimaryWithTwoValue.args = {
   options: optionsWithTwoValues,
   value: "test1",
 };

From 82f084f5e221923235d1ef5ca8cf533da68c51d0 Mon Sep 17 00:00:00 2001
From: yatsukbogdan <yatsukbogdan@gmail.com>
Date: Fri, 9 Dec 2022 12:31:23 +0200
Subject: [PATCH 4/6] Removes pillLabel property for PillSelect options; Fixes
 case when PillSelect isMulti: true and have labels as array; Updates DropDown
 Option component to properly render label with array value

---
 .../CatalogTree/next/StreamPathSelect.tsx     |  1 -
 .../CatalogTree/next/SyncModeSelect.tsx       |  9 +-------
 .../ui/DropDown/components/Option.tsx         |  4 +++-
 .../components/ui/PillSelect/PillSelect.tsx   |  9 ++------
 .../ui/PillSelect/index.stories.tsx           | 22 +++++++++----------
 5 files changed, 16 insertions(+), 29 deletions(-)

diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/StreamPathSelect.tsx b/airbyte-webapp/src/components/connection/CatalogTree/next/StreamPathSelect.tsx
index 7caa828dd43df..c4e7df8e77682 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/next/StreamPathSelect.tsx
+++ b/airbyte-webapp/src/components/connection/CatalogTree/next/StreamPathSelect.tsx
@@ -55,7 +55,6 @@ export const StreamPathSelect: React.FC<PathPopoutProps> = (props) => {
   const options = props.paths.map((path) => ({
     value: path,
     label: pathDisplayName(path),
-    pillLabel: pathDisplayName(path),
   }));
 
   return (
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/SyncModeSelect.tsx b/airbyte-webapp/src/components/connection/CatalogTree/next/SyncModeSelect.tsx
index a72bb5624b4fb..36488a34077cb 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/next/SyncModeSelect.tsx
+++ b/airbyte-webapp/src/components/connection/CatalogTree/next/SyncModeSelect.tsx
@@ -31,14 +31,7 @@ export const SyncModeSelect: React.FC<SyncModeSelectProps> = ({ className, optio
     return options.map(({ value }) => {
       const { syncMode, destinationSyncMode } = value;
       return {
-        label: (
-          <>
-            <FormattedMessage id={`syncMode.${syncMode}`} />
-            {` | `}
-            <FormattedMessage id={`destinationSyncMode.${destinationSyncMode}`} />
-          </>
-        ),
-        pillLabel: [
+        label: [
           <FormattedMessage id={`syncMode.${syncMode}`} />,
           <FormattedMessage id={`destinationSyncMode.${destinationSyncMode}`} />,
         ],
diff --git a/airbyte-webapp/src/components/ui/DropDown/components/Option.tsx b/airbyte-webapp/src/components/ui/DropDown/components/Option.tsx
index 281a006744869..dcca7c3323441 100644
--- a/airbyte-webapp/src/components/ui/DropDown/components/Option.tsx
+++ b/airbyte-webapp/src/components/ui/DropDown/components/Option.tsx
@@ -73,7 +73,9 @@ export const DropDownOption: React.FC<DropDownOptionProps> = (props) => {
               <CheckBox checked={props.isSelected} onChange={() => props.selectOption(props.data)} />{" "}
             </>
           )}
-          {props.label}
+          {Array.isArray(props.label)
+            ? props.label.map<React.ReactNode>((node) => <>{node}</>).reduce((prev, curr) => [prev, " | ", curr])
+            : props.label}
         </DropDownText>
         {props.data.img || null}
       </OptionView>
diff --git a/airbyte-webapp/src/components/ui/PillSelect/PillSelect.tsx b/airbyte-webapp/src/components/ui/PillSelect/PillSelect.tsx
index a0b8405539a12..ee607f0c8d030 100644
--- a/airbyte-webapp/src/components/ui/PillSelect/PillSelect.tsx
+++ b/airbyte-webapp/src/components/ui/PillSelect/PillSelect.tsx
@@ -18,14 +18,9 @@ export const PillSelect: React.FC<PillSelectProps> = ({ className, ...props }) =
       targetComponent={({ onOpen, isOpen, value }) => {
         const label = value
           ? isMulti
-            ? value.map(({ label }: { label: string }) => label).join(", ")
+            ? value.map(({ label }: { label: string }) => (Array.isArray(label) ? label.join(" | ") : label)).join(", ")
             : value.label
           : "";
-        const pillLabel = value
-          ? isMulti
-            ? value.map(({ pillLabel }: { pillLabel: string }) => pillLabel).join(", ")
-            : value.pillLabel
-          : "";
         return (
           <Tooltip
             control={
@@ -39,7 +34,7 @@ export const PillSelect: React.FC<PillSelectProps> = ({ className, ...props }) =
                 active={isOpen}
                 className={className}
               >
-                {pillLabel}
+                {label}
               </PillButton>
             }
             placement="bottom-start"
diff --git a/airbyte-webapp/src/components/ui/PillSelect/index.stories.tsx b/airbyte-webapp/src/components/ui/PillSelect/index.stories.tsx
index 72e86f93aa026..cc9b5146ee774 100644
--- a/airbyte-webapp/src/components/ui/PillSelect/index.stories.tsx
+++ b/airbyte-webapp/src/components/ui/PillSelect/index.stories.tsx
@@ -17,27 +17,22 @@ const options = [
   {
     value: "id",
     label: "id",
-    pillLabel: "id",
   },
   {
     value: "first_name",
     label: "first_name",
-    pillLabel: "first_name",
   },
   {
     value: "last_name",
     label: "last_name",
-    pillLabel: "last_name",
   },
   {
     value: "email",
     label: "email",
-    pillLabel: "email",
   },
   {
     value: "company",
     label: "company",
-    pillLabel: "company",
   },
 ];
 
@@ -57,23 +52,19 @@ Multi.args = {
 const optionsWithTwoValues = [
   {
     value: "test1",
-    label: "dog | cat",
-    pillLabel: ["dog", "cat"],
+    label: ["dog", "cat"],
   },
   {
     value: "test2",
-    label: "dog | cat | rat",
-    pillLabel: ["dog", "cat", "rat"],
+    label: ["dog", "cat", "rat"],
   },
   {
     value: "test3",
     label: "dog",
-    pillLabel: "dog",
   },
   {
     value: "test4",
-    label: "cat",
-    pillLabel: ["cat"],
+    label: ["cat"],
   },
 ];
 
@@ -82,3 +73,10 @@ PrimaryWithTwoValue.args = {
   options: optionsWithTwoValues,
   value: "test1",
 };
+
+export const PrimaryMultiWithTwoValue = Template.bind({});
+PrimaryMultiWithTwoValue.args = {
+  options: optionsWithTwoValues,
+  isMulti: true,
+  value: ["test1", "test2"],
+};

From 695d16f51bde20ffec9531289f3a51f8c88ebe0d Mon Sep 17 00:00:00 2001
From: yatsukbogdan <yatsukbogdan@gmail.com>
Date: Fri, 9 Dec 2022 13:10:48 +0200
Subject: [PATCH 5/6] Fixes snapshot for BulkEditPanel after updating
 PillSelect component

---
 .../__snapshots__/BulkEditPanel.test.tsx.snap | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/__snapshots__/BulkEditPanel.test.tsx.snap b/airbyte-webapp/src/components/connection/CatalogTree/next/__snapshots__/BulkEditPanel.test.tsx.snap
index 12f584eafe8cd..b4dc4d99b82c4 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/next/__snapshots__/BulkEditPanel.test.tsx.snap
+++ b/airbyte-webapp/src/components/connection/CatalogTree/next/__snapshots__/BulkEditPanel.test.tsx.snap
@@ -78,9 +78,13 @@ exports[`<BulkEditPanel /> should render 1`] = `
                   class="<removed-for-snapshot-test>"
                   type="button"
                 >
-                  <span
+                  <div
                     class="<removed-for-snapshot-test>"
-                  />
+                  >
+                    <span
+                      class="<removed-for-snapshot-test>"
+                    />
+                  </div>
                   <svg
                     aria-hidden="true"
                     class="<removed-for-snapshot-test>"
@@ -136,9 +140,13 @@ exports[`<BulkEditPanel /> should render 1`] = `
                   disabled=""
                   type="button"
                 >
-                  <span
+                  <div
                     class="<removed-for-snapshot-test>"
-                  />
+                  >
+                    <span
+                      class="<removed-for-snapshot-test>"
+                    />
+                  </div>
                   <svg
                     aria-hidden="true"
                     class="<removed-for-snapshot-test>"
@@ -194,9 +202,13 @@ exports[`<BulkEditPanel /> should render 1`] = `
                   disabled=""
                   type="button"
                 >
-                  <span
+                  <div
                     class="<removed-for-snapshot-test>"
-                  />
+                  >
+                    <span
+                      class="<removed-for-snapshot-test>"
+                    />
+                  </div>
                   <svg
                     aria-hidden="true"
                     class="<removed-for-snapshot-test>"

From c233c71b5da886f6b3d0364a55a238708c8385a6 Mon Sep 17 00:00:00 2001
From: yatsukbogdan <yatsukbogdan@gmail.com>
Date: Fri, 9 Dec 2022 18:00:11 +0200
Subject: [PATCH 6/6] Fixes key property for Option and SyncModeSelect
 components while rendering list items

---
 .../connection/CatalogTree/next/SyncModeSelect.tsx         | 7 +++++--
 .../src/components/ui/DropDown/components/Option.tsx       | 6 ++++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/SyncModeSelect.tsx b/airbyte-webapp/src/components/connection/CatalogTree/next/SyncModeSelect.tsx
index 36488a34077cb..a7aa3f4ce3cba 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/next/SyncModeSelect.tsx
+++ b/airbyte-webapp/src/components/connection/CatalogTree/next/SyncModeSelect.tsx
@@ -32,8 +32,11 @@ export const SyncModeSelect: React.FC<SyncModeSelectProps> = ({ className, optio
       const { syncMode, destinationSyncMode } = value;
       return {
         label: [
-          <FormattedMessage id={`syncMode.${syncMode}`} />,
-          <FormattedMessage id={`destinationSyncMode.${destinationSyncMode}`} />,
+          <FormattedMessage key={`syncMode.${syncMode}`} id={`syncMode.${syncMode}`} />,
+          <FormattedMessage
+            key={`destinationSyncMode.${destinationSyncMode}`}
+            id={`destinationSyncMode.${destinationSyncMode}`}
+          />,
         ],
         value,
       };
diff --git a/airbyte-webapp/src/components/ui/DropDown/components/Option.tsx b/airbyte-webapp/src/components/ui/DropDown/components/Option.tsx
index dcca7c3323441..49fcd9c812998 100644
--- a/airbyte-webapp/src/components/ui/DropDown/components/Option.tsx
+++ b/airbyte-webapp/src/components/ui/DropDown/components/Option.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Fragment } from "react";
 import { components, OptionProps } from "react-select";
 import styled from "styled-components";
 
@@ -74,7 +74,9 @@ export const DropDownOption: React.FC<DropDownOptionProps> = (props) => {
             </>
           )}
           {Array.isArray(props.label)
-            ? props.label.map<React.ReactNode>((node) => <>{node}</>).reduce((prev, curr) => [prev, " | ", curr])
+            ? props.label
+                .map<React.ReactNode>((node, index) => <Fragment key={index}>{node}</Fragment>)
+                .reduce((prev, curr) => [prev, " | ", curr])
             : props.label}
         </DropDownText>
         {props.data.img || null}