From 6c19d6ae4ebfe8de2dc1904065b173b51df45e4c Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Wed, 23 Jan 2019 14:13:51 -0500
Subject: [PATCH] Removes unnecessary fragment elements.  Fixes vertical
 alignment on notif row item.  Bind notification list functions to constructor

---
 .../NotificationListItem.jsx                  |   2 +-
 .../NotificationsList/Notifications.list.jsx  | 115 ++++++++++--------
 .../Organization/OrganizationDetail.jsx       |  22 ++--
 3 files changed, 74 insertions(+), 65 deletions(-)

diff --git a/src/components/NotificationsList/NotificationListItem.jsx b/src/components/NotificationsList/NotificationListItem.jsx
index 48229acd8b..caf95b9998 100644
--- a/src/components/NotificationsList/NotificationListItem.jsx
+++ b/src/components/NotificationsList/NotificationListItem.jsx
@@ -44,7 +44,7 @@ class NotificationListItem extends React.Component {
     return (
       <I18n>
         {({ i18n }) => (
-          <li key={itemId} className="pf-c-data-list__item">
+          <li key={itemId} className="pf-c-data-list__item pf-u-flex-row pf-u-align-items-center">
             <div className="pf-c-data-list__cell pf-u-flex-row">
               <div className="pf-u-display-inline-flex">
                 <Link
diff --git a/src/components/NotificationsList/Notifications.list.jsx b/src/components/NotificationsList/Notifications.list.jsx
index 83be6f2c5d..695b672c02 100644
--- a/src/components/NotificationsList/Notifications.list.jsx
+++ b/src/components/NotificationsList/Notifications.list.jsx
@@ -49,6 +49,19 @@ class Notifications extends Component {
       successTemplateIds: [],
       errorTemplateIds: []
     };
+
+    this.onSearch = this.onSearch.bind(this);
+    this.getQueryParams = this.getQueryParams.bind(this);
+    this.onSort = this.onSort.bind(this);
+    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.toggleSuccess = this.toggleSuccess.bind(this);
+    this.updateUrl = this.updateUrl.bind(this);
+    this.postToError = this.postToError.bind(this);
+    this.postToSuccess = this.postToSuccess.bind(this);
+    this.fetchNotifications = this.fetchNotifications.bind(this);
   }
 
   componentDidMount () {
@@ -296,58 +309,56 @@ class Notifications extends Component {
             </EmptyStateBody>
           </EmptyState>
         )}
-        <Fragment>
-          {(
-            typeof noInitialResults !== 'undefined'
-            && !noInitialResults
-            && !loading
-            && !error
-          ) && (
-            <Fragment>
-              <DataListToolbar
-                isAllSelected={selected.length === results.length}
-                sortedColumnKey={sortedColumnKey}
-                sortOrder={sortOrder}
-                columns={this.columns}
-                onSearch={this.onSearch}
-                onSort={this.onSort}
-                onSelectAll={this.onSelectAll}
-              />
-              <I18n>
-                {({ i18n }) => (
-                  <ul className="pf-c-data-list" aria-label={i18n._(t`Organizations List`)}>
-                    {results.map(o => (
-                      <NotificationListItem
-                        key={o.id}
-                        itemId={o.id}
-                        name={o.name}
-                        notificationType={o.notification_type}
-                        detailUrl={`notifications/${o.id}`}
-                        parentBreadcrumb={parentBreadcrumb}
-                        isSelected={selected.includes(o.id)}
-                        onSelect={() => this.onSelect(o.id)}
-                        errorTurnedOn={errorTemplateIds.includes(o.id)}
-                        toggleError={this.toggleError}
-                        successTurnedOn={successTemplateIds.includes(o.id)}
-                        toggleSuccess={this.toggleSuccess}
-                      />
-                    ))}
-                  </ul>
-                )}
-              </I18n>
-              <Pagination
-                count={count}
-                page={page}
-                pageCount={pageCount}
-                page_size={page_size}
-                pageSizeOptions={this.pageSizeOptions}
-                onSetPage={this.onSetPage}
-              />
-            </Fragment>
-          )}
-          {loading ? <div>loading...</div> : ''}
-          {error ? <div>error</div> : ''}
-        </Fragment>
+        {(
+          typeof noInitialResults !== 'undefined'
+          && !noInitialResults
+          && !loading
+          && !error
+        ) && (
+          <Fragment>
+            <DataListToolbar
+              isAllSelected={selected.length === results.length}
+              sortedColumnKey={sortedColumnKey}
+              sortOrder={sortOrder}
+              columns={this.columns}
+              onSearch={this.onSearch}
+              onSort={this.onSort}
+              onSelectAll={this.onSelectAll}
+            />
+            <I18n>
+              {({ i18n }) => (
+                <ul className="pf-c-data-list" aria-label={i18n._(t`Organizations List`)}>
+                  {results.map(o => (
+                    <NotificationListItem
+                      key={o.id}
+                      itemId={o.id}
+                      name={o.name}
+                      notificationType={o.notification_type}
+                      detailUrl={`notifications/${o.id}`}
+                      parentBreadcrumb={parentBreadcrumb}
+                      isSelected={selected.includes(o.id)}
+                      onSelect={() => this.onSelect(o.id)}
+                      errorTurnedOn={errorTemplateIds.includes(o.id)}
+                      toggleError={this.toggleError}
+                      successTurnedOn={successTemplateIds.includes(o.id)}
+                      toggleSuccess={this.toggleSuccess}
+                    />
+                  ))}
+                </ul>
+              )}
+            </I18n>
+            <Pagination
+              count={count}
+              page={page}
+              pageCount={pageCount}
+              page_size={page_size}
+              pageSizeOptions={this.pageSizeOptions}
+              onSetPage={this.onSetPage}
+            />
+          </Fragment>
+        )}
+        {loading ? <div>loading...</div> : ''}
+        {error ? <div>error</div> : ''}
       </Fragment>
     );
   }
diff --git a/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx b/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx
index 5d79c27e3f..54c8bc79a6 100644
--- a/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx
+++ b/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx
@@ -54,18 +54,16 @@ const OrganizationDetail = ({
     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.createOrganizationNotificationSuccess(id, data)}
-              postError={(id, data) => api.createOrganizationNotificationError(id, data)}
-              match={match}
-              location={location}
-              history={history}
-            />
-          </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.createOrganizationNotificationSuccess(id, data)}
+            postError={(id, data) => api.createOrganizationNotificationError(id, data)}
+            match={match}
+            location={location}
+            history={history}
+          />
         );
         break;
       default: