From 877c51d5dc85e05cbe082e27ca3473fa7ceb9e1d Mon Sep 17 00:00:00 2001
From: Oyelola Victoria <oyelolaabimbola23@gmail.com>
Date: Tue, 17 Sep 2024 08:10:38 +0000
Subject: [PATCH] Refactor email input handling to format comma-separated
 addresses

- Introduced `getFormattedEmailOptions` to split and trim comma-separated email values
- Updated EuiComboBox to handle email entry for `to`, `cc`, and `bcc` fields

Signed-off-by: Oyelola Victoria <oyelolaabimbola23@gmail.com>
---
 .../connector_types/email/email_params.tsx       | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/stack_connectors/public/connector_types/email/email_params.tsx b/x-pack/plugins/stack_connectors/public/connector_types/email/email_params.tsx
index d9a4750cb4564..47bf8b18bab8d 100644
--- a/x-pack/plugins/stack_connectors/public/connector_types/email/email_params.tsx
+++ b/x-pack/plugins/stack_connectors/public/connector_types/email/email_params.tsx
@@ -64,6 +64,16 @@ export const EmailParamsFields = ({
   const isBCCInvalid: boolean =
     errors.bcc !== undefined && Number(errors.bcc.length) > 0 && bcc !== undefined;
 
+  const getFormattedEmailOptions = (
+    searchValue: string,
+    previousOptions: Array<{ label: string }>
+  ): Array<{ label: string }> => {
+    const formattedOptions: Array<{ label: string }> = searchValue
+      .split(',')
+      .map((value) => ({ label: value.trim() }));
+    return [...previousOptions, ...formattedOptions];
+  };
+
   return (
     <>
       <EuiFormRow
@@ -105,7 +115,7 @@ export const EmailParamsFields = ({
           data-test-subj="toEmailAddressInput"
           selectedOptions={toOptions}
           onCreateOption={(searchValue: string) => {
-            const newOptions = [...toOptions, { label: searchValue }];
+            const newOptions = getFormattedEmailOptions(searchValue, toOptions);
             editAction(
               'to',
               newOptions.map((newOption) => newOption.label),
@@ -148,7 +158,7 @@ export const EmailParamsFields = ({
             data-test-subj="ccEmailAddressInput"
             selectedOptions={ccOptions}
             onCreateOption={(searchValue: string) => {
-              const newOptions = [...ccOptions, { label: searchValue }];
+              const newOptions = getFormattedEmailOptions(searchValue, ccOptions);
               editAction(
                 'cc',
                 newOptions.map((newOption) => newOption.label),
@@ -192,7 +202,7 @@ export const EmailParamsFields = ({
             data-test-subj="bccEmailAddressInput"
             selectedOptions={bccOptions}
             onCreateOption={(searchValue: string) => {
-              const newOptions = [...bccOptions, { label: searchValue }];
+              const newOptions = getFormattedEmailOptions(searchValue, bccOptions);
               editAction(
                 'bcc',
                 newOptions.map((newOption) => newOption.label),