Frontend: update recipient group data modal (#357)

opensearch-project · Oct 22, 2021 · 45c0836 · 45c0836
1 parent 82707ff
commit 45c0836
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 35 deletions.
diff --git 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(
       '[email protected]'
@@ -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
@@ -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,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]'
@@ -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]'
@@ -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
@@ -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
@@ -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
@@ -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]' },
         ],
       },
     });
@@ -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
@@ -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(', ')}

diff --git 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
@@ -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]' },
     ],
   },
 };