From 45c08369f895298908a7604f91f6752df4763851 Mon Sep 17 00:00:00 2001 From: Joshua Date: Fri, 22 Oct 2021 11:15:43 -0700 Subject: [PATCH] Frontend: update recipient group data modal (#357) --- .../.cypress/integration/channels.spec.js | 6 ++-- .../.cypress/integration/email_groups.spec.js | 12 ++++---- dashboards-notifications/models/interfaces.ts | 2 +- .../pages/Emails/CreateRecipientGroup.tsx | 24 ++++++++++------ .../pages/Emails/__tests__/helper.test.ts | 28 +++++++++++++------ .../tables/RecipientGroupsTable.tsx | 5 +++- .../public/pages/Emails/utils/helper.ts | 4 ++- .../test/mocks/mockData.ts | 12 ++++---- 8 files changed, 58 insertions(+), 35 deletions(-) diff --git a/dashboards-notifications/.cypress/integration/channels.spec.js b/dashboards-notifications/.cypress/integration/channels.spec.js index 61f4bafb..e9c8a352 100644 --- a/dashboards-notifications/.cypress/integration/channels.spec.js +++ b/dashboards-notifications/.cypress/integration/channels.spec.js @@ -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') @@ -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( 'test@email.com' @@ -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 }); diff --git a/dashboards-notifications/.cypress/integration/email_groups.spec.js b/dashboards-notifications/.cypress/integration/email_groups.spec.js index cd33710b..dd5c62d7 100644 --- a/dashboards-notifications/.cypress/integration/email_groups.spec.js +++ b/dashboards-notifications/.cypress/integration/email_groups.spec.js @@ -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'); @@ -42,7 +42,7 @@ 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', () => { @@ -50,7 +50,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 tls sender' + 'test-tls-sender' ); cy.get('[data-test-subj="create-sender-form-email-input"]').type( 'test@email.com' @@ -68,7 +68,7 @@ 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', () => { @@ -76,7 +76,7 @@ describe('Test create email senders', () => { .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( 'test@email.com' @@ -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'); }); }); diff --git a/dashboards-notifications/models/interfaces.ts b/dashboards-notifications/models/interfaces.ts index e15bbc88..25e12b16 100644 --- a/dashboards-notifications/models/interfaces.ts +++ b/dashboards-notifications/models/interfaces.ts @@ -127,7 +127,7 @@ export interface SESSenderItemType extends ConfigType { export interface RecipientGroupItemType extends ConfigType { email_group: { - recipient_list: string[]; + recipient_list: { [recipient: string]: string }[]; }; } diff --git a/dashboards-notifications/public/pages/Emails/CreateRecipientGroup.tsx b/dashboards-notifications/public/pages/Emails/CreateRecipientGroup.tsx index 30799ce1..b0d1df8e 100644 --- a/dashboards-notifications/public/pages/Emails/CreateRecipientGroup.tsx +++ b/dashboards-notifications/public/pages/Emails/CreateRecipientGroup.tsx @@ -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( @@ -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.`, + } + ); }); }} > diff --git a/dashboards-notifications/public/pages/Emails/__tests__/helper.test.ts b/dashboards-notifications/public/pages/Emails/__tests__/helper.test.ts index ded9f42b..831828ca 100644 --- a/dashboards-notifications/public/pages/Emails/__tests__/helper.test.ts +++ b/dashboards-notifications/public/pages/Emails/__tests__/helper.test.ts @@ -62,9 +62,9 @@ describe('creates sender and recipient groups as config object', () => { is_enabled: true, email_group: { recipient_list: [ - 'email1@test.com', - 'email2@test.com', - 'email3@test.com', + { recipient: 'email1@test.com' }, + { recipient: 'email2@test.com' }, + { recipient: 'email3@test.com' }, ], }, }); @@ -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(); @@ -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(); @@ -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' }, + ]); }); }); diff --git a/dashboards-notifications/public/pages/Emails/components/tables/RecipientGroupsTable.tsx b/dashboards-notifications/public/pages/Emails/components/tables/RecipientGroupsTable.tsx index f7607e03..84ac2b0d 100644 --- a/dashboards-notifications/public/pages/Emails/components/tables/RecipientGroupsTable.tsx +++ b/dashboards-notifications/public/pages/Emails/components/tables/RecipientGroupsTable.tsx @@ -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 (
{emails.slice(0, 5).join(', ')} diff --git a/dashboards-notifications/public/pages/Emails/utils/helper.ts b/dashboards-notifications/public/pages/Emails/utils/helper.ts index bc842d7a..9117271f 100644 --- a/dashboards-notifications/public/pages/Emails/utils/helper.ts +++ b/dashboards-notifications/public/pages/Emails/utils/helper.ts @@ -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, + })), }, }; }; diff --git a/dashboards-notifications/test/mocks/mockData.ts b/dashboards-notifications/test/mocks/mockData.ts index a1d57177..562bae29 100644 --- a/dashboards-notifications/test/mocks/mockData.ts +++ b/dashboards-notifications/test/mocks/mockData.ts @@ -186,12 +186,12 @@ const mockRecipientGroup: RecipientGroupItemType = { last_updated_time_ms: 1622158742784, email_group: { recipient_list: [ - 'test1@email.com', - 'test2@email.com', - 'test3@email.com', - 'test4@email.com', - 'test5@email.com', - 'test6@email.com', + { recipient: 'test1@email.com' }, + { recipient: 'test2@email.com' }, + { recipient: 'test3@email.com' }, + { recipient: 'test4@email.com' }, + { recipient: 'test5@email.com' }, + { recipient: 'test6@email.com' }, ], }, };