Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Frontend: update recipient group data modal #357

Merged
merged 2 commits into from
Oct 22, 2021
Merged

Frontend: update recipient group data modal #357

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6943821
Update recipient modal to sync with backend
joshuali925 Oct 22, 2021
32334e6
Update tests
joshuali925 Oct 22, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions dashboards-notifications/.cypress/integration/channels.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ describe('Test create channels', () => {

// custom data-test-subj does not work on combo box
cy.get('[data-test-subj="comboBoxInput"]').eq(0).click({ force: true });
cy.contains('Test tls sender').click();
cy.contains('test-tls-sender').click();

cy.get('.euiButton__text')
.contains('Create recipient group')
Expand Down Expand Up @@ -121,7 +121,7 @@ describe('Test create channels', () => {
.contains('Create SES sender')
.click({ force: true });
cy.get('[data-test-subj="create-ses-sender-form-name-input"]').type(
'Test ses sender'
'test-ses-sender'
);
cy.get('[data-test-subj="create-ses-sender-form-email-input"]').type(
'[email protected]'
Expand Down Expand Up @@ -166,7 +166,7 @@ describe('Test create channels', () => {
});

it('creates a sns channel', () => {
cy.get('[placeholder="Enter channel name"]').type('Test sns channel');
cy.get('[placeholder="Enter channel name"]').type('test-sns-channel');
cy.get('.euiCheckbox__input[id="reports"]').click({ force: true });

cy.get('.euiSuperSelectControl').contains('Slack').click({ force: true });
Expand Down
12 changes: 6 additions & 6 deletions dashboards-notifications/.cypress/integration/email_groups.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ describe('Test create email senders', () => {
.contains('Create SMTP sender')
.click({ force: true });
cy.get('[data-test-subj="create-sender-form-name-input"]').type(
'Test ssl sender'
'test-ssl-sender'
);
cy.get('.euiButton__text').contains('Create').click({ force: true });
cy.contains('Some fields are invalid.').should('exist');
Expand All @@ -42,15 +42,15 @@ describe('Test create email senders', () => {
cy.get('[data-test-subj="create-sender-form-port-input"]').type('123');
cy.get('.euiButton__text').contains('Create').click({ force: true });
cy.contains('successfully created.').should('exist');
cy.contains('Test ssl sender').should('exist');
cy.contains('test-ssl-sender').should('exist');
});

it('creates tls sender', () => {
cy.get('.euiButton__text')
.contains('Create SMTP sender')
.click({ force: true });
cy.get('[data-test-subj="create-sender-form-name-input"]').type(
'Test tls sender'
'test-tls-sender'
);
cy.get('[data-test-subj="create-sender-form-email-input"]').type(
'[email protected]'
Expand All @@ -68,15 +68,15 @@ describe('Test create email senders', () => {

cy.get('.euiButton__text').contains('Create').click({ force: true });
cy.contains('successfully created.').should('exist');
cy.contains('Test ssl sender').should('exist');
cy.contains('test-ssl-sender').should('exist');
});

it('creates SES sender', () => {
cy.get('.euiButton__text')
.contains('Create SES sender')
.click({ force: true });
cy.get('[data-test-subj="create-ses-sender-form-name-input"]').type(
'Test ses sender'
'test-ses-sender'
);
cy.get('[data-test-subj="create-ses-sender-form-email-input"]').type(
'[email protected]'
Expand All @@ -90,7 +90,7 @@ describe('Test create email senders', () => {

cy.get('.euiButton__text').contains('Create').click({ force: true });
cy.contains('successfully created.').should('exist');
cy.contains('Test ses sender').should('exist');
cy.contains('test-ses-sender').should('exist');
});
});

Expand Down
2 changes: 1 addition & 1 deletion dashboards-notifications/models/interfaces.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ export interface SESSenderItemType extends ConfigType {

export interface RecipientGroupItemType extends ConfigType {
email_group: {
recipient_list: string[];
recipient_list: { [recipient: string]: string }[];
};
}

Expand Down
24 changes: 15 additions & 9 deletions dashboards-notifications/public/pages/Emails/CreateRecipientGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,12 +105,15 @@ export function CreateRecipientGroup(props: CreateRecipientGroupProps) {
if (typeof id !== 'string') return;

try {
const response =
await servicesContext.notificationService.getRecipientGroup(id);
const response = await servicesContext.notificationService.getRecipientGroup(
id
);
setName(response.name);
setDescription(response.description || '');
setSelectedEmailOptions(
response.email_group.recipient_list.map((email) => ({ label: email }))
response.email_group.recipient_list.map((recipient) => ({
label: recipient.recipient,
}))
);
} catch (error) {
coreContext.notifications.toasts.addDanger(
Expand Down Expand Up @@ -183,17 +186,20 @@ export function CreateRecipientGroup(props: CreateRecipientGroupProps) {
}.`
);
setTimeout(
() => location.hash = `#${ROUTES.EMAIL_GROUPS}`,
() => (location.hash = `#${ROUTES.EMAIL_GROUPS}`),
SERVER_DELAY
);
})
.catch((error) => {
setLoading(false);
coreContext.notifications.toasts.addError(error?.body || error, {
title: `Failed to ${
props.edit ? 'update' : 'create'
} sender.`,
});
coreContext.notifications.toasts.addError(
error?.body || error,
{
title: `Failed to ${
props.edit ? 'update' : 'create'
} recipient group.`,
}
);
});
}}
>
Expand Down
28 changes: 20 additions & 8 deletions dashboards-notifications/public/pages/Emails/__tests__/helper.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,9 +62,9 @@ describe('creates sender and recipient groups as config object', () => {
is_enabled: true,
email_group: {
recipient_list: [
'[email protected]',
'[email protected]',
'[email protected]',
{ recipient: '[email protected]' },
{ recipient: '[email protected]' },
{ recipient: '[email protected]' },
],
},
});
Expand All @@ -73,7 +73,10 @@ describe('creates sender and recipient groups as config object', () => {

describe('handles combo box create option', () => {
it('adds new option to combo box options', () => {
const options = [{label: 'selected-option'}, { label: 'existing-option' }];
const options = [
{ label: 'selected-option' },
{ label: 'existing-option' },
];
const selectedOptions = [options[0]];
const setOptions = jest.fn();
const setSelectedOptions = jest.fn();
Expand All @@ -88,11 +91,17 @@ describe('handles combo box create option', () => {
setInputError
);
expect(setOptions).toBeCalledWith([...options, { label: 'new-option' }]);
expect(setSelectedOptions).toBeCalledWith([...selectedOptions, { label: 'new-option' }]);
expect(setSelectedOptions).toBeCalledWith([
...selectedOptions,
{ label: 'new-option' },
]);
});

it('selects existing option', () => {
const options = [{label: 'selected-option'}, { label: 'existing-option' }];
const options = [
{ label: 'selected-option' },
{ label: 'existing-option' },
];
const selectedOptions = [options[0]];
const setOptions = jest.fn();
const setSelectedOptions = jest.fn();
Expand All @@ -107,6 +116,9 @@ describe('handles combo box create option', () => {
setInputError
);
expect(setOptions).not.toBeCalled();
expect(setSelectedOptions).toBeCalledWith([...selectedOptions, { label: 'existing-option' }]);
expect(setSelectedOptions).toBeCalledWith([
...selectedOptions,
{ label: 'existing-option' },
]);
});
});
5 changes: 4 additions & 1 deletion dashboards-notifications/public/pages/Emails/components/tables/RecipientGroupsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,10 @@ export class RecipientGroupsTable extends Component<
sortable: true,
truncateText: true,
width: '450px',
render: (emails: string[]) => {
render: (
recipient_list: RecipientGroupItemType['email_group']['recipient_list']
) => {
const emails = recipient_list.map((recipient) => recipient.recipient);
return (
<div>
{emails.slice(0, 5).join(', ')}
Expand Down
4 changes: 3 additions & 1 deletion dashboards-notifications/public/pages/Emails/utils/helper.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,9 @@ export const createRecipientGroupConfigObject = (
feature_list: Object.keys(NOTIFICATION_SOURCE),
is_enabled: true,
email_group: {
recipient_list: selectedEmailOptions.map((email) => email.label),
recipient_list: selectedEmailOptions.map((email) => ({
recipient: email.label,
})),
},
};
};
Expand Down
12 changes: 6 additions & 6 deletions dashboards-notifications/test/mocks/mockData.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,12 +186,12 @@ const mockRecipientGroup: RecipientGroupItemType = {
last_updated_time_ms: 1622158742784,
email_group: {
recipient_list: [
'[email protected]',
'[email protected]',
'[email protected]',
'[email protected]',
'[email protected]',
'[email protected]',
{ recipient: '[email protected]' },
{ recipient: '[email protected]' },
{ recipient: '[email protected]' },
{ recipient: '[email protected]' },
{ recipient: '[email protected]' },
{ recipient: '[email protected]' },
],
},
};
Expand Down