Adds notification list to orgs

src/pages/Organizations/Organizations.jsx

@@ -2,10 +2,10 @@ import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 
 import OrganizationsList from './screens/OrganizationsList';
-import OrganizationAdd from './screens/OrganizationAdd'
+import OrganizationAdd from './screens/OrganizationAdd';
 import Organization from './screens/Organization/Organization';
 
-export default ({ api, match }) => (
+export default ({ api, match, history }) => (
   <Switch>
     <Route
       path={`${match.path}/add`}
@@ -20,6 +20,7 @@ export default ({ api, match }) => (
       render={() => (
         <Organization
           api={api}
+          history={history}
         />
       )}
     />

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

@@ -75,7 +75,7 @@ class Organization extends Component {
   }
 
   render () {
-    const { location, match } = this.props;
+    const { location, match, api, history } = this.props;
     const { parentBreadcrumbObj, organization, error, loading } = this.state;
     const params = new URLSearchParams(location.search);
     const currentTab = params.get('tab') || 'details';
@@ -92,7 +92,7 @@ class Organization extends Component {
           <Switch>
             <Route
               path={`${match.path}/edit`}
-              component={() => (
+              render={() => (
                 <OrganizationEdit
                   location={location}
                   match={match}
@@ -105,7 +105,7 @@ class Organization extends Component {
             />
             <Route
               path={`${match.path}`}
-              component={() => (
+              render={() => (
                 <OrganizationDetail
                   location={location}
                   match={match}
@@ -113,6 +113,8 @@ class Organization extends Component {
                   organization={organization}
                   params={params}
                   currentTab={currentTab}
+                  history={history}
+                  api={api}
                 />
               )}
             />

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

@@ -12,21 +12,24 @@ import {
   Route
 } from 'react-router-dom';
 
+import NotificationsList from '../../../../components/NotificationsList/Notifications.list';
+
 import Tab from '../../../../components/Tabs/Tab';
 import Tabs from '../../../../components/Tabs/Tabs';
 import getTabName from '../../utils';
 
-
 const OrganizationDetail = ({
   location,
   match,
   parentBreadcrumbObj,
   organization,
   params,
-  currentTab
+  currentTab,
+  api,
+  history
 }) => {
   // TODO: set objectName by param or through grabbing org detail get from api
-  const tabList=['details', 'access', 'teams', 'notifications'];
+  const tabList = ['details', 'access', 'teams', 'notifications'];
 
   const deleteResourceView = () => (
     <Fragment>
@@ -46,19 +49,41 @@ const OrganizationDetail = ({
     </Fragment>
   );
 
-  const resourceView = () => (
-    <Fragment>
-      <Trans>{`${currentTab} detail view  `}</Trans>
-      <Link to={{ pathname: `${match.url}/add-resource`, search: `?${params.toString()}`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
-        <Trans>{`add ${currentTab}`}</Trans>
-      </Link>
-      {'  '}
-      <Link to={{ pathname: `${match.url}/delete-resources`, search: `?${params.toString()}`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
-        <Trans>{`delete ${currentTab}`}</Trans>
-      </Link>
-    </Fragment>
-  );
-
+  const resourceView = () => {
+    let relatedTemplate;
+    switch (currentTab) {
+      case 'notifications':
+        relatedTemplate = (
+          <Fragment>
+            <NotificationsList
+              getNotifications={(id, reqParams) => api.getOrganizationNotifications(id, reqParams)}
+              getSuccess={(id, reqParams) => api.getOrganizationNotificationSuccess(id, reqParams)}
+              getError={(id, reqParams) => api.getOrganizationNotificationError(id, reqParams)}
+              postSuccess={(id, data) => api.postOrganizationNotificationSuccess(id, data)}
+              postError={(id, data) => api.postOrganizationNotificationError(id, data)}
+              match={match}
+              location={location}
+              history={history}
+            />
+          </Fragment>
+        );
+        break;
+      default:
+        relatedTemplate = (
+          <Fragment>
+            <Trans>{`${currentTab} detail view  `}</Trans>
+            <Link to={{ pathname: `${match.url}/add-resource`, search: `?${params.toString()}`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
+              <Trans>{`add ${currentTab}`}</Trans>
+            </Link>
+            {'  '}
+            <Link to={{ pathname: `${match.url}/delete-resources`, search: `?${params.toString()}`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
+              <Trans>{`delete ${currentTab}`}</Trans>
+            </Link>
+          </Fragment>
+        );
+    }
+    return relatedTemplate;
+  };
 
   return (
     <Card className="at-c-orgPane">
@@ -83,20 +108,11 @@ const OrganizationDetail = ({
         </I18n>
       </CardHeader>
       <CardBody>
-        {(currentTab && currentTab !== 'details') ? (
-          <Switch>
-            <Route path={`${match.path}/delete-resources`} component={() => deleteResourceView()} />
-            <Route path={`${match.path}/add-resource`} component={() => addResourceView()} />
-            <Route path={`${match.path}`} component={() => resourceView()} />
-          </Switch>
-        ) : (
-          <Fragment>
-            {'detail view  '}
-            <Link to={{ pathname: `${match.url}/edit`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
-              {'edit'}
-            </Link>
-          </Fragment>
-        )}
+        <Switch>
+          <Route path={`${match.path}/delete-resources`} component={() => deleteResourceView()} />
+          <Route path={`${match.path}/add-resource`} component={() => addResourceView()} />
+          <Route path={`${match.path}`} render={(props) => resourceView(props)} />
+        </Switch>
       </CardBody>
     </Card>
   );

src/pages/Organizations/screens/OrganizationsList.jsx

@@ -75,16 +75,7 @@ class OrganizationsList extends Component {
     this.onSort(sortedColumnKey, sortOrder);
   }
 
-  getQueryParams (overrides = {}) {
-    const { location } = this.props;
-    const { search } = location;
-
-    const searchParams = parseQueryString(search.substring(1));
-
-    return Object.assign({}, this.defaultParams, searchParams, overrides);
-  }
-
-  onSort(sortedColumnKey, sortOrder) {
+  onSort (sortedColumnKey, sortOrder) {
     const { page_size } = this.state;
 
     let order_by = sortedColumnKey;
@@ -127,6 +118,15 @@ class OrganizationsList extends Component {
     }
   }
 
+  getQueryParams (overrides = {}) {
+    const { location } = this.props;
+    const { search } = location;
+
+    const searchParams = parseQueryString(search.substring(1));
+
+    return Object.assign({}, this.defaultParams, searchParams, overrides);
+  }
+
   updateUrl (queryParams) {
     const { history, location } = this.props;
     const pathname = '/organizations';
@@ -212,6 +212,8 @@ class OrganizationsList extends Component {
             onSearch={this.onSearch}
             onSort={this.onSort}
             onSelectAll={this.onSelectAll}
+            showDelete
+            showSelectAll
           />
           <I18n>
             {({ i18n }) => (