diff --git a/awx/ui_next/src/components/NotificationsList/NotificationListItem.jsx b/awx/ui_next/src/components/NotificationsList/NotificationListItem.jsx index 38294bcb12..9578aec49e 100644 --- a/awx/ui_next/src/components/NotificationsList/NotificationListItem.jsx +++ b/awx/ui_next/src/components/NotificationsList/NotificationListItem.jsx @@ -47,47 +47,50 @@ function NotificationListItem(props) { key={notification.id} > - - - {notification.name} - - , - - {typeLabels[notification.notification_type]} - , - - toggleNotification( - notification.id, - successTurnedOn, - 'success' - )} - aria-label={i18n._(t`Toggle notification success`)} - /> - toggleNotification( - notification.id, - errorTurnedOn, - 'error' - )} - aria-label={i18n._(t`Toggle notification failure`)} - /> - - ]} + + + + {notification.name} + + + , + + {typeLabels[notification.notification_type]} + , + + + toggleNotification( + notification.id, + successTurnedOn, + 'success' + ) + } + aria-label={i18n._(t`Toggle notification success`)} + /> + + toggleNotification(notification.id, errorTurnedOn, 'error') + } + aria-label={i18n._(t`Toggle notification failure`)} + /> + , + ]} /> @@ -105,7 +108,7 @@ NotificationListItem.propTypes = { errorTurnedOn: bool, successTurnedOn: bool, toggleNotification: func.isRequired, - typeLabels: shape().isRequired + typeLabels: shape().isRequired, }; NotificationListItem.defaultProps = { diff --git a/awx/ui_next/src/components/NotificationsList/NotificationListItem.test.jsx b/awx/ui_next/src/components/NotificationsList/NotificationListItem.test.jsx index 66c0ad5a01..74d1f6a070 100644 --- a/awx/ui_next/src/components/NotificationsList/NotificationListItem.test.jsx +++ b/awx/ui_next/src/components/NotificationsList/NotificationListItem.test.jsx @@ -9,11 +9,11 @@ describe('', () => { const mockNotif = { id: 9000, name: 'Foo', - notification_type: 'slack' + notification_type: 'slack', }; const typeLabels = { - slack: 'Slack' + slack: 'Slack', }; beforeEach(() => { @@ -51,7 +51,10 @@ describe('', () => { typeLabels={typeLabels} /> ); - const typeCell = wrapper.find('DataListCell').at(1).find('div'); + const typeCell = wrapper + .find('DataListCell') + .at(1) + .find('div'); expect(typeCell.text()).toBe('Slack'); }); diff --git a/awx/ui_next/src/screens/Organization/OrganizationNotifications/OrganizationNotifications.jsx b/awx/ui_next/src/screens/Organization/OrganizationNotifications/OrganizationNotifications.jsx index 206cbafd81..ec0334d3a9 100644 --- a/awx/ui_next/src/screens/Organization/OrganizationNotifications/OrganizationNotifications.jsx +++ b/awx/ui_next/src/screens/Organization/OrganizationNotifications/OrganizationNotifications.jsx @@ -35,7 +35,7 @@ class OrganizationNotifications extends Component { notifications: [], successTemplateIds: [], errorTemplateIds: [], - typeLabels: null + typeLabels: null, }; this.handleNotificationToggle = this.handleNotificationToggle.bind(this); this.handleNotificationErrorClose = this.handleNotificationErrorClose.bind( @@ -60,9 +60,7 @@ class OrganizationNotifications extends Component { const { typeLabels } = this.state; const params = parseNamespacedQueryString(QS_CONFIG, location.search); - const promises = [ - OrganizationsAPI.readNotificationTemplates(id, params) - ]; + const promises = [OrganizationsAPI.readNotificationTemplates(id, params)]; if (!typeLabels) { promises.push(OrganizationsAPI.readOptionsNotificationTemplates(id)); @@ -70,12 +68,12 @@ class OrganizationNotifications extends Component { this.setState({ contentError: null, hasContentLoading: true }); try { - const [{ - data: { - count: itemCount = 0, - results: notifications = [], - } - }, optionsResponse] = await Promise.all(promises); + const [ + { + data: { count: itemCount = 0, results: notifications = [] }, + }, + optionsResponse, + ] = await Promise.all(promises); let idMatchParams; if (notifications.length > 0) { @@ -100,10 +98,20 @@ class OrganizationNotifications extends Component { }; if (!typeLabels) { - const { data: { actions: { GET: { notification_type: {choices} } } } } = optionsResponse; + const { + data: { + actions: { + GET: { + notification_type: { choices }, + }, + }, + }, + } = optionsResponse; // The structure of choices looks like [['slack', 'Slack'], ['email', 'Email'], ...] - stateToUpdate.typeLabels = - choices.reduce((map, notifType) => ({ ...map, [notifType[0]]: notifType[1]}), {}); + stateToUpdate.typeLabels = choices.reduce( + (map, notifType) => ({ ...map, [notifType[0]]: notifType[1] }), + {} + ); } this.setState(stateToUpdate); diff --git a/awx/ui_next/src/screens/Organization/OrganizationNotifications/OrganizationNotifications.test.jsx b/awx/ui_next/src/screens/Organization/OrganizationNotifications/OrganizationNotifications.test.jsx index 06e2e4f41d..6aa6ee12d4 100644 --- a/awx/ui_next/src/screens/Organization/OrganizationNotifications/OrganizationNotifications.test.jsx +++ b/awx/ui_next/src/screens/Organization/OrganizationNotifications/OrganizationNotifications.test.jsx @@ -10,17 +10,20 @@ jest.mock('@api'); describe('', () => { const data = { count: 2, - results: [{ - id: 1, - name: 'Notification one', - url: '/api/v2/notification_templates/1/', - notification_type: 'email', - }, { - id: 2, - name: 'Notification two', - url: '/api/v2/notification_templates/2/', - notification_type: 'email', - }] + results: [ + { + id: 1, + name: 'Notification one', + url: '/api/v2/notification_templates/1/', + notification_type: 'email', + }, + { + id: 2, + name: 'Notification two', + url: '/api/v2/notification_templates/2/', + notification_type: 'email', + }, + ], }; OrganizationsAPI.readOptionsNotificationTemplates.mockReturnValue({ @@ -28,13 +31,11 @@ describe('', () => { actions: { GET: { notification_type: { - choices: [ - ['email', 'Email'] - ] - } - } - } - } + choices: [['email', 'Email']], + }, + }, + }, + }, }); beforeEach(() => {