Skip to content

Commit

Permalink
[8.x] Refactor email input handling to format comma-separated address…
Browse files Browse the repository at this point in the history 
…es (#193128) (#194669)

# Backport

This will backport the following commits from `main` to `8.x`:
- [Refactor email input handling to format comma-separated addresses
(#193128)](#193128)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Oyelola
Victoria","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-10-02T09:33:05Z","message":"Refactor
email input handling to format comma-separated addresses (#193128)\n\n##
Summary\r\nThis pull request fixes #189968 \r\n\r\n- Introduced
`getFormattedEmailOptions` to split and trim\r\ncomma-separated email
values\r\n- Updated `EuiComboBox` to handle email entries for `to`,
`cc`, and\r\n`bcc`
fields\r\n\r\n\r\nhttps://github.com/user-attachments/assets/45a70132-8fd7-426e-81cf-62a6bf216408\r\n\r\n---------\r\n\r\nSigned-off-by:
Oyelola Victoria <[email protected]>\r\nCo-authored-by: Julian
Gernun <[email protected]>\r\nCo-authored-by:
Elastic Machine
<[email protected]>","sha":"917458844b51b93d9a62f2e100099a70e1ea4842","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:ResponseOps","💝community","v9.0.0","backport:prev-minor"],"title":"Refactor
email input handling to format comma-separated
addresses","number":193128,"url":"https://github.com/elastic/kibana/pull/193128","mergeCommit":{"message":"Refactor
email input handling to format comma-separated addresses (#193128)\n\n##
Summary\r\nThis pull request fixes #189968 \r\n\r\n- Introduced
`getFormattedEmailOptions` to split and trim\r\ncomma-separated email
values\r\n- Updated `EuiComboBox` to handle email entries for `to`,
`cc`, and\r\n`bcc`
fields\r\n\r\n\r\nhttps://github.com/user-attachments/assets/45a70132-8fd7-426e-81cf-62a6bf216408\r\n\r\n---------\r\n\r\nSigned-off-by:
Oyelola Victoria <[email protected]>\r\nCo-authored-by: Julian
Gernun <[email protected]>\r\nCo-authored-by:
Elastic Machine
<[email protected]>","sha":"917458844b51b93d9a62f2e100099a70e1ea4842"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/193128","number":193128,"mergeCommit":{"message":"Refactor
email input handling to format comma-separated addresses (#193128)\n\n##
Summary\r\nThis pull request fixes #189968 \r\n\r\n- Introduced
`getFormattedEmailOptions` to split and trim\r\ncomma-separated email
values\r\n- Updated `EuiComboBox` to handle email entries for `to`,
`cc`, and\r\n`bcc`
fields\r\n\r\n\r\nhttps://github.com/user-attachments/assets/45a70132-8fd7-426e-81cf-62a6bf216408\r\n\r\n---------\r\n\r\nSigned-off-by:
Oyelola Victoria <[email protected]>\r\nCo-authored-by: Julian
Gernun <[email protected]>\r\nCo-authored-by:
Elastic Machine
<[email protected]>","sha":"917458844b51b93d9a62f2e100099a70e1ea4842"}}]}]
BACKPORT-->

Co-authored-by: Oyelola Victoria <[email protected]>
  • Loading branch information
@kibanamachine @VriaA
kibanamachine and VriaA authored Oct 2, 2024
1 parent 84b1122 commit d6edf80
Show file tree
Hide file tree
Showing 2 changed files with 117 additions and 4 deletions.
100 changes: 99 additions & 1 deletion x-pack/plugins/stack_connectors/public/connector_types/email/email_params.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,13 @@

import React from 'react';
import { mountWithIntl } from '@kbn/test-jest-helpers';
import { render, fireEvent, screen } from '@testing-library/react';
import { render, fireEvent, screen, within } from '@testing-library/react';
import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
import { useKibana } from '@kbn/kibana-react-plugin/public';
import { triggersActionsUiMock } from '@kbn/triggers-actions-ui-plugin/public/mocks';
import EmailParamsFields from './email_params';
import { getIsExperimentalFeatureEnabled } from '../../common/get_experimental_features';
import { getFormattedEmailOptions } from './email_params';

jest.mock('@kbn/kibana-react-plugin/public', () => ({
useKibana: jest.fn(),
Expand All @@ -28,6 +29,24 @@ const mockKibana = () => {
});
};

const emailTestCases = [
{
field: 'to',
fieldValue: '[email protected], [email protected] , [email protected], ',
expected: ['[email protected]', '[email protected]', '[email protected]'],
},
{
field: 'cc',
fieldValue: '[email protected], [email protected] , [email protected], ',
expected: ['[email protected]', '[email protected]', '[email protected]'],
},
{
field: 'bcc',
fieldValue: '[email protected], [email protected] , [email protected], ',
expected: ['[email protected]', '[email protected]', '[email protected]'],
},
];

describe('EmailParamsFields renders', () => {
beforeEach(() => {
jest.clearAllMocks();
Expand Down Expand Up @@ -62,6 +81,40 @@ describe('EmailParamsFields renders', () => {
expect(await screen.findByTestId('messageTextArea')).toBeVisible();
});

emailTestCases.forEach(({ field, fieldValue, expected }) => {
test(`"${field}" field value updates correctly when comma-separated emails are pasted`, async () => {
const actionParams = {
cc: ['[email protected]'],
bcc: ['[email protected]'],
to: ['[email protected]'],
subject: 'test',
message: 'test message',
};

const editAction = jest.fn();

render(
<IntlProvider locale="en">
<EmailParamsFields
actionParams={actionParams}
errors={{ to: [], cc: [], bcc: [], subject: [], message: [] }}
editAction={editAction}
defaultMessage={'Some default message'}
index={0}
/>
</IntlProvider>
);

const euiComboBox = screen.getByTestId(`${field}EmailAddressInput`);
const input = within(euiComboBox).getByTestId('comboBoxSearchInput');
fireEvent.change(input, { target: { value: fieldValue } });
expect(input).toHaveValue(fieldValue);

fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
expect(editAction).toHaveBeenCalledWith(field, expected, 0);
});
});

test('message param field is rendered with default value if not set', () => {
const actionParams = {
cc: [],
Expand Down Expand Up @@ -234,3 +287,48 @@ describe('EmailParamsFields renders', () => {
expect(editAction).not.toHaveBeenCalled();
});
});

describe('getFormattedEmailOptions', () => {
test('should return new options added to previous options', () => {
const searchValue = '[email protected], [email protected]';
const previousOptions = [{ label: '[email protected]' }];
const newOptions = getFormattedEmailOptions(searchValue, previousOptions);

expect(newOptions).toEqual([
{ label: '[email protected]' },
{ label: '[email protected]' },
{ label: '[email protected]' },
]);
});

test('should trim extra spaces in search value', () => {
const searchValue = ' [email protected] , [email protected] , ';
const previousOptions: Array<{ label: string }> = [];
const newOptions = getFormattedEmailOptions(searchValue, previousOptions);

expect(newOptions).toEqual([{ label: '[email protected]' }, { label: '[email protected]' }]);
});

test('should prevent duplicate email addresses', () => {
const searchValue = '[email protected], [email protected]';
const previousOptions = [{ label: '[email protected]' }, { label: '[email protected]' }];
const newOptions = getFormattedEmailOptions(searchValue, previousOptions);

expect(newOptions).toEqual([{ label: '[email protected]' }, { label: '[email protected]' }]);
});

test('should return previous options if search value is empty', () => {
const searchValue = '';
const previousOptions = [{ label: '[email protected]' }];
const newOptions = getFormattedEmailOptions(searchValue, previousOptions);
expect(newOptions).toEqual([{ label: '[email protected]' }]);
});

test('should handle single email without comma', () => {
const searchValue = '[email protected]';
const previousOptions = [{ label: '[email protected]' }];
const newOptions = getFormattedEmailOptions(searchValue, previousOptions);

expect(newOptions).toEqual([{ label: '[email protected]' }, { label: '[email protected]' }]);
});
});
21 changes: 18 additions & 3 deletions x-pack/plugins/stack_connectors/public/connector_types/email/email_params.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,21 @@ import { EmailActionParams } from '../types';

const noop = () => {};

export const getFormattedEmailOptions = (
searchValue: string,
previousOptions: Array<{ label: string }>
): Array<{ label: string }> => {
if (!searchValue.trim()) return previousOptions;
const previousEmails: string[] = previousOptions.map((option) => option.label);
const allUniqueEmails: Set<string> = new Set(previousEmails);
searchValue.split(',').forEach((email) => {
const trimmedEmail = email.trim();
if (trimmedEmail) allUniqueEmails.add(trimmedEmail);
});
const formattedOptions = Array.from(allUniqueEmails).map((email) => ({ label: email }));
return formattedOptions;
};

export const EmailParamsFields = ({
actionParams,
editAction,
Expand Down Expand Up @@ -105,7 +120,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),
Expand Down Expand Up @@ -148,7 +163,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),
Expand Down Expand Up @@ -192,7 +207,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),
Expand Down

0 comments on commit d6edf80

Please sign in to comment.