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 <[email protected]>
elastic · Sep 29, 2024 · 877c51d · 877c51d
1 parent fb79799
commit 877c51d
Showing 1 changed file with 13 additions and 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
@@ -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),