Prettify files

awx/ui_next/src/components/NotificationsList/NotificationListItem.jsx

@@ -47,47 +47,50 @@ function NotificationListItem(props) {
       key={notification.id}
     >
       <DataListItemRow>
-        <DataListItemCells dataListCells={[
+        <DataListItemCells
-          <DataListCell key="name">
+          dataListCells={[
-            <Link
+            <DataListCell key="name">
-              to={{
+              <Link
-                pathname: detailUrl
+                to={{
-              }}
+                  pathname: detailUrl,
-              css="margin-right: 1.5em;"
+                }}
-            >
+                css="margin-right: 1.5em;"
-              <b id={`items-list-item-${notification.id}`}>{notification.name}</b>
+              >
-            </Link>
+                <b id={`items-list-item-${notification.id}`}>
-          </DataListCell>,
+                  {notification.name}
-          <DataListCell key="type">
+                </b>
-            {typeLabels[notification.notification_type]}
+              </Link>
-          </DataListCell>,
+            </DataListCell>,
-          <DataListCell righthalf="true" key="toggles">
+            <DataListCell key="type">
-            <Switch
+              {typeLabels[notification.notification_type]}
-              id={`notification-${notification.id}-success-toggle`}
+            </DataListCell>,
-              label={i18n._(t`Successful`)}
+            <DataListCell righthalf="true" key="toggles">
-              isChecked={successTurnedOn}
+              <Switch
-              isDisabled={!canToggleNotifications}
+                id={`notification-${notification.id}-success-toggle`}
-              onChange={() => toggleNotification(
+                label={i18n._(t`Successful`)}
-                notification.id,
+                isChecked={successTurnedOn}
-                successTurnedOn,
+                isDisabled={!canToggleNotifications}
-                'success'
+                onChange={() =>
-              )}
+                  toggleNotification(
-              aria-label={i18n._(t`Toggle notification success`)}
+                    notification.id,
-            />
+                    successTurnedOn,
-            <Switch
+                    'success'
-              id={`notification-${notification.id}-error-toggle`}
+                  )
-              label={i18n._(t`Failure`)}
+                }
-              isChecked={errorTurnedOn}
+                aria-label={i18n._(t`Toggle notification success`)}
-              isDisabled={!canToggleNotifications}
+              />
-              onChange={() => toggleNotification(
+              <Switch
-                notification.id,
+                id={`notification-${notification.id}-error-toggle`}
-                errorTurnedOn,
+                label={i18n._(t`Failure`)}
-                'error'
+                isChecked={errorTurnedOn}
-              )}
+                isDisabled={!canToggleNotifications}
-              aria-label={i18n._(t`Toggle notification failure`)}
+                onChange={() =>
-            />
+                  toggleNotification(notification.id, errorTurnedOn, 'error')
-          </DataListCell>
+                }
-        ]}
+                aria-label={i18n._(t`Toggle notification failure`)}
+              />
+            </DataListCell>,
+          ]}
         />
       </DataListItemRow>
     </DataListItem>
@@ -105,7 +108,7 @@ NotificationListItem.propTypes = {
   errorTurnedOn: bool,
   successTurnedOn: bool,
   toggleNotification: func.isRequired,
-  typeLabels: shape().isRequired
+  typeLabels: shape().isRequired,
 };
 
 NotificationListItem.defaultProps = {

awx/ui_next/src/components/NotificationsList/NotificationListItem.test.jsx

@@ -9,11 +9,11 @@ describe('<NotificationListItem canToggleNotifications />', () => {
   const mockNotif = {
     id: 9000,
     name: 'Foo',
-    notification_type: 'slack'
+    notification_type: 'slack',
   };
 
   const typeLabels = {
-    slack: 'Slack'
+    slack: 'Slack',
   };
 
   beforeEach(() => {
@@ -51,7 +51,10 @@ describe('<NotificationListItem canToggleNotifications />', () => {
         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');
   });
 

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 = [
+    const promises = [OrganizationsAPI.readNotificationTemplates(id, params)];
-      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 [{
+      const [
-        data: {
+        {
-          count: itemCount = 0,
+          data: { count: itemCount = 0, results: notifications = [] },
-          results: notifications = [],
+        },
-        }
+        optionsResponse,
-      }, optionsResponse] = await Promise.all(promises);
+      ] = 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 =
+        stateToUpdate.typeLabels = choices.reduce(
-          choices.reduce((map, notifType) => ({ ...map, [notifType[0]]: notifType[1]}), {});
+          (map, notifType) => ({ ...map, [notifType[0]]: notifType[1] }),
+          {}
+        );
       }
 
       this.setState(stateToUpdate);

awx/ui_next/src/screens/Organization/OrganizationNotifications/OrganizationNotifications.test.jsx

@@ -10,17 +10,20 @@ jest.mock('@api');
 describe('<OrganizationNotifications />', () => {
   const data = {
     count: 2,
-    results: [{
+    results: [
-      id: 1,
+      {
-      name: 'Notification one',
+        id: 1,
-      url: '/api/v2/notification_templates/1/',
+        name: 'Notification one',
-      notification_type: 'email',
+        url: '/api/v2/notification_templates/1/',
-    }, {
+        notification_type: 'email',
-      id: 2,
+      },
-      name: 'Notification two',
+      {
-      url: '/api/v2/notification_templates/2/',
+        id: 2,
-      notification_type: 'email',
+        name: 'Notification two',
-    }]
+        url: '/api/v2/notification_templates/2/',
+        notification_type: 'email',
+      },
+    ],
   };
 
   OrganizationsAPI.readOptionsNotificationTemplates.mockReturnValue({
@@ -28,13 +31,11 @@ describe('<OrganizationNotifications />', () => {
       actions: {
         GET: {
           notification_type: {
-            choices: [
+            choices: [['email', 'Email']],
-              ['email', 'Email']
+          },
-            ]
+        },
-          }
+      },
-        }
+    },
-      }
-    }
   });
 
   beforeEach(() => {