More cleanup based on pr feedback. Adds org notif list page and tests

__tests__/components/NotificationList.test.jsx

@@ -43,7 +43,7 @@ describe('<Notifications />', () => {
         </I18nProvider>
       </MemoryRouter>
     ).find('Notifications');
-    wrapper.instance().toggleSuccess(1, true);
+    wrapper.instance().toggleNotification(1, true, 'success');
     expect(spy).toHaveBeenCalledWith(1, true);
   });
   test('post success makes request and updates state properly', async () => {
@@ -79,7 +79,7 @@ describe('<Notifications />', () => {
         </I18nProvider>
       </MemoryRouter>
     ).find('Notifications');
-    wrapper.instance().toggleError(1, true);
+    wrapper.instance().toggleNotification(1, true, 'error');
     expect(spy).toHaveBeenCalledWith(1, true);
   });
   test('post error makes request and updates state properly', async () => {

__tests__/components/NotificationListItem.test.jsx

@@ -26,78 +26,70 @@ describe('<NotificationListItem />', () => {
   });
 
   test('handles success click when toggle is on', () => {
-    const successToggleClickSpy = jest.spyOn(NotificationListItem.prototype, 'successToggleClick');
+    const toggleNotification = jest.fn();
-    const toggleSuccessPropFn = jest.fn();
     wrapper = mount(
       <I18nProvider>
         <MemoryRouter>
           <NotificationListItem
             itemId={9000}
             successTurnedOn
-            toggleSuccess={toggleSuccessPropFn}
+            toggleNotification={toggleNotification}
           />
         </MemoryRouter>
       </I18nProvider>
     );
     wrapper.find('Switch').first().find('input').simulate('change');
-    expect(successToggleClickSpy).toHaveBeenCalledWith(true);
+    expect(toggleNotification).toHaveBeenCalledWith(9000, true, 'success');
-    expect(toggleSuccessPropFn).toHaveBeenCalledWith(9000, true);
   });
 
   test('handles success click when toggle is off', () => {
-    const successToggleClickSpy = jest.spyOn(NotificationListItem.prototype, 'successToggleClick');
+    const toggleNotification = jest.fn();
-    const toggleSuccessPropFn = jest.fn();
     wrapper = mount(
       <I18nProvider>
         <MemoryRouter>
           <NotificationListItem
             itemId={9000}
             successTurnedOn={false}
-            toggleSuccess={toggleSuccessPropFn}
+            toggleNotification={toggleNotification}
           />
         </MemoryRouter>
       </I18nProvider>
     );
     wrapper.find('Switch').first().find('input').simulate('change');
-    expect(successToggleClickSpy).toHaveBeenCalledWith(false);
+    expect(toggleNotification).toHaveBeenCalledWith(9000, false, 'success');
-    expect(toggleSuccessPropFn).toHaveBeenCalledWith(9000, false);
   });
 
   test('handles error click when toggle is on', () => {
-    const errorToggleClickSpy = jest.spyOn(NotificationListItem.prototype, 'errorToggleClick');
+    const toggleNotification = jest.fn();
-    const toggleErrorPropFn = jest.fn();
     wrapper = mount(
       <I18nProvider>
         <MemoryRouter>
           <NotificationListItem
             itemId={9000}
             errorTurnedOn
-            toggleError={toggleErrorPropFn}
+            toggleNotification={toggleNotification}
           />
         </MemoryRouter>
       </I18nProvider>
     );
     wrapper.find('Switch').at(1).find('input').simulate('change');
-    expect(errorToggleClickSpy).toHaveBeenCalledWith(true);
+    expect(toggleNotification).toHaveBeenCalledWith(9000, true, 'error');
-    expect(toggleErrorPropFn).toHaveBeenCalledWith(9000, true);
   });
 
   test('handles error click when toggle is off', () => {
-    const errorToggleClickSpy = jest.spyOn(NotificationListItem.prototype, 'errorToggleClick');
+    const toggleNotification = jest.fn();
-    const toggleErrorPropFn = jest.fn();
     wrapper = mount(
       <I18nProvider>
         <MemoryRouter>
           <NotificationListItem
             itemId={9000}
             errorTurnedOn={false}
-            toggleError={toggleErrorPropFn}
+            toggleNotification={toggleNotification}
           />
         </MemoryRouter>
       </I18nProvider>
     );
     wrapper.find('Switch').at(1).find('input').simulate('change');
-    expect(errorToggleClickSpy).toHaveBeenCalledWith(false);
+    expect(toggleNotification).toHaveBeenCalledWith(9000, false, 'error');
-    expect(toggleErrorPropFn).toHaveBeenCalledWith(9000, false);
   });
 });

__tests__/pages/Organizations/screens/Organization/OrganizationNotifications.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { MemoryRouter } from 'react-router-dom';
+import OrganizationNotifications from '../../../../../src/pages/Organizations/screens/Organization/OrganizationNotifications';
+
+describe('<OrganizationNotifications />', () => {
+  test('initially renders succesfully', () => {
+    mount(
+      <MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
+        <OrganizationNotifications
+          match={{ path: '/organizations/:id/notifications', url: '/organizations/1/notifications' }}
+          location={{ search: '', pathname: '/organizations/1/notifications' }}
+          params={{}}
+          api={{
+            getOrganizationNotifications: jest.fn(),
+            getOrganizationNotificationSuccess: jest.fn(),
+            getOrganizationNotificationError: jest.fn(),
+            createOrganizationNotificationSuccess: jest.fn(),
+            createOrganizationNotificationError: jest.fn()
+          }}
+        />
+      </MemoryRouter>
+    );
+  });
+  test('handles api requests', () => {
+    const getOrganizationNotifications = jest.fn();
+    const getOrganizationNotificationSuccess = jest.fn();
+    const getOrganizationNotificationError = jest.fn();
+    const createOrganizationNotificationSuccess = jest.fn();
+    const createOrganizationNotificationError = jest.fn();
+    const wrapper = mount(
+      <MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
+        <OrganizationNotifications
+          match={{ path: '/organizations/:id/notifications', url: '/organizations/1/notifications' }}
+          location={{ search: '', pathname: '/organizations/1/notifications' }}
+          params={{}}
+          api={{
+            getOrganizationNotifications,
+            getOrganizationNotificationSuccess,
+            getOrganizationNotificationError,
+            createOrganizationNotificationSuccess,
+            createOrganizationNotificationError
+          }}
+        />
+      </MemoryRouter>
+    ).find('OrganizationNotifications');
+    wrapper.instance().getOrgNotifications(1, { foo: 'bar' });
+    expect(getOrganizationNotifications).toHaveBeenCalledWith(1, { foo: 'bar' });
+    wrapper.instance().getOrgNotificationSuccess(1, { foo: 'bar' });
+    expect(getOrganizationNotificationSuccess).toHaveBeenCalledWith(1, { foo: 'bar' });
+    wrapper.instance().getOrgNotificationError(1, { foo: 'bar' });
+    expect(getOrganizationNotificationError).toHaveBeenCalledWith(1, { foo: 'bar' });
+    wrapper.instance().createOrgNotificationSuccess(1, { id: 2 });
+    expect(createOrganizationNotificationSuccess).toHaveBeenCalledWith(1, { id: 2 });
+    wrapper.instance().createOrgNotificationError(1, { id: 2 });
+    expect(createOrganizationNotificationError).toHaveBeenCalledWith(1, { id: 2 });
+  });
+});

src/components/NotificationsList/NotificationListItem.jsx

@@ -10,31 +10,15 @@ import {
 } from '@patternfly/react-core';
 
 class NotificationListItem extends React.Component {
-  constructor (props) {
-    super(props);
-    this.errorToggleClick = this.errorToggleClick.bind(this);
-    this.successToggleClick = this.successToggleClick.bind(this);
-  }
-
-  errorToggleClick (flag) {
-    const { itemId, toggleError } = this.props;
-    toggleError(itemId, flag);
-  }
-
-  successToggleClick (flag) {
-    const { itemId, toggleSuccess } = this.props;
-    toggleSuccess(itemId, flag);
-  }
-
   render () {
     const {
       itemId,
       name,
       notificationType,
       detailUrl,
-      parentBreadcrumb,
       successTurnedOn,
-      errorTurnedOn
+      errorTurnedOn,
+      toggleNotification
     } = this.props;
 
     const capText = {
@@ -49,8 +33,7 @@ class NotificationListItem extends React.Component {
               <div className="pf-u-display-inline-flex">
                 <Link
                   to={{
-                    pathname: detailUrl,
+                    pathname: detailUrl
-                    state: { breadcrumb: [parentBreadcrumb, { name, url: detailUrl }] }
                   }}
                 >
                   <b>{name}</b>
@@ -69,13 +52,13 @@ class NotificationListItem extends React.Component {
               <Switch
                 label={i18n._(t`Successful`)}
                 isChecked={successTurnedOn}
-                onChange={() => this.successToggleClick(successTurnedOn)}
+                onChange={() => toggleNotification(itemId, successTurnedOn, 'success')}
                 aria-label={i18n._(t`Notification success toggle`)}
               />
               <Switch
                 label={i18n._(t`Failure`)}
                 isChecked={errorTurnedOn}
-                onChange={() => this.errorToggleClick(errorTurnedOn)}
+                onChange={() => toggleNotification(itemId, errorTurnedOn, 'error')}
                 aria-label={i18n._(t`Notification failure toggle`)}
               />
             </div>

src/components/NotificationsList/Notifications.list.jsx

@@ -56,8 +56,7 @@ class Notifications extends Component {
     this.onSetPage = this.onSetPage.bind(this);
     this.onSelectAll = this.onSelectAll.bind(this);
     this.onSelect = this.onSelect.bind(this);
-    this.toggleError = this.toggleError.bind(this);
+    this.toggleNotification = this.toggleNotification.bind(this);
-    this.toggleSuccess = this.toggleSuccess.bind(this);
     this.updateUrl = this.updateUrl.bind(this);
     this.postToError = this.postToError.bind(this);
     this.postToSuccess = this.postToSuccess.bind(this);
@@ -131,12 +130,12 @@ class Notifications extends Component {
     }
   };
 
-  toggleError = (id, isCurrentlyOn) => {
+  toggleNotification = (id, isCurrentlyOn, status) => {
-    this.postToError(id, isCurrentlyOn);
+    if (status === 'success') {
-  };
+      this.postToSuccess(id, isCurrentlyOn);
-
+    } else if (status === 'error') {
-  toggleSuccess = (id, isCurrentlyOn) => {
+      this.postToError(id, isCurrentlyOn);
-    this.postToSuccess(id, isCurrentlyOn);
+    }
   };
 
   updateUrl (queryParams) {
@@ -293,8 +292,6 @@ class Notifications extends Component {
       successTemplateIds,
       errorTemplateIds
     } = this.state;
-    const { match } = this.props;
-    const parentBreadcrumb = { name: i18nMark('Organizations'), url: match.url };
 
     return (
       <Fragment>
@@ -335,13 +332,11 @@ class Notifications extends Component {
                       name={o.name}
                       notificationType={o.notification_type}
                       detailUrl={`notifications/${o.id}`}
-                      parentBreadcrumb={parentBreadcrumb}
                       isSelected={selected.includes(o.id)}
                       onSelect={() => this.onSelect(o.id)}
+                      toggleNotification={this.toggleNotification}
                       errorTurnedOn={errorTemplateIds.includes(o.id)}
-                      toggleError={this.toggleError}
                       successTurnedOn={successTemplateIds.includes(o.id)}
-                      toggleSuccess={this.toggleSuccess}
                     />
                   ))}
                 </ul>

src/pages/Organizations/screens/Organization/OrganizationDetail.jsx

@@ -12,7 +12,7 @@ import {
   Route
 } from 'react-router-dom';
 
-import NotificationsList from '../../../../components/NotificationsList/Notifications.list';
+import OrganizationNotifications from './OrganizationNotifications';
 
 import Tab from '../../../../components/Tabs/Tab';
 import Tabs from '../../../../components/Tabs/Tabs';
@@ -54,12 +54,8 @@ const OrganizationDetail = ({
     switch (currentTab) {
       case 'notifications':
         relatedTemplate = (
-          <NotificationsList
+          <OrganizationNotifications
-            getNotifications={(id, reqParams) => api.getOrganizationNotifications(id, reqParams)}
+            api={api}
-            getSuccess={(id, reqParams) => api.getOrganizationNotificationSuccess(id, reqParams)}
-            getError={(id, reqParams) => api.getOrganizationNotificationError(id, reqParams)}
-            postSuccess={(id, data) => api.createOrganizationNotificationSuccess(id, data)}
-            postError={(id, data) => api.createOrganizationNotificationError(id, data)}
             match={match}
             location={location}
             history={history}

src/pages/Organizations/screens/Organization/OrganizationNotifications.jsx

@@ -0,0 +1,63 @@
+import React, { Component } from 'react';
+
+import NotificationsList from '../../../../components/NotificationsList/Notifications.list';
+
+class OrganizationNotifications extends Component {
+  constructor (props) {
+    super(props);
+
+    this.getOrgNotifications = this.getOrgNotifications.bind(this);
+    this.getOrgNotificationSuccess = this.getOrgNotificationSuccess.bind(this);
+    this.getOrgNotificationError = this.getOrgNotificationError.bind(this);
+    this.createOrgNotificationSuccess = this.createOrgNotificationSuccess.bind(this);
+    this.createOrgNotificationError = this.createOrgNotificationError.bind(this);
+  }
+
+  getOrgNotifications (id, reqParams) {
+    const { api } = this.props;
+    return api.getOrganizationNotifications(id, reqParams);
+  }
+
+  getOrgNotificationSuccess (id, reqParams) {
+    const { api } = this.props;
+    return api.getOrganizationNotificationSuccess(id, reqParams);
+  }
+
+  getOrgNotificationError (id, reqParams) {
+    const { api } = this.props;
+    return api.getOrganizationNotificationError(id, reqParams);
+  }
+
+  createOrgNotificationSuccess (id, data) {
+    const { api } = this.props;
+    return api.createOrganizationNotificationSuccess(id, data);
+  }
+
+  createOrgNotificationError (id, data) {
+    const { api } = this.props;
+    return api.createOrganizationNotificationError(id, data);
+  }
+
+  render () {
+    const {
+      location,
+      match,
+      history
+    } = this.props;
+
+    return (
+      <NotificationsList
+        getNotifications={this.getOrgNotifications}
+        getSuccess={this.getOrgNotificationSuccess}
+        getError={this.getOrgNotificationError}
+        postSuccess={this.createOrgNotificationSuccess}
+        postError={this.createOrgNotificationError}
+        match={match}
+        location={location}
+        history={history}
+      />
+    );
+  }
+}
+
+export default OrganizationNotifications;