refactor PaginatedDataList to renderToolbar prop

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

@@ -3,6 +3,7 @@ import { withRouter } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import PaginatedDataList, { ToolbarAddButton } from '../../../../components/PaginatedDataList';
+import DataListToolbar from '../../../../components/DataListToolbar';
 import OrganizationAccessItem from '../../components/OrganizationAccessItem';
 import DeleteRoleConfirmationModal from '../../components/DeleteRoleConfirmationModal';
 import AddResourceRole from '../../../../components/AddRole/AddResourceRole';
@@ -172,9 +173,14 @@ class OrganizationAccess extends React.Component {
               { name: i18n._(t`Username`), key: 'username', isSortable: true },
               { name: i18n._(t`Last Name`), key: 'last_name', isSortable: true },
             ]}
-            additionalControls={canEdit ? [
-              <ToolbarAddButton key="add" onClick={this.toggleAddModal} />
-            ] : null}
+            renderToolbar={(props) => (
+              <DataListToolbar
+                {...props}
+                additionalControls={canEdit ? [
+                  <ToolbarAddButton key="add" onClick={this.toggleAddModal} />
+                ] : null}
+              />
+            )}
             renderItem={accessRecord => (
               <OrganizationAccessItem
                 key={accessRecord.id}

src/pages/Organizations/screens/OrganizationsList.jsx

@@ -13,6 +13,7 @@ import PaginatedDataList, {
   ToolbarDeleteButton,
   ToolbarAddButton
 } from '../../../components/PaginatedDataList';
+import DataListToolbar from '../../../components/DataListToolbar';
 import OrganizationListItem from '../components/OrganizationListItem';
 import { getQSConfig, parseNamespacedQueryString } from '../../../util/qs';
 
@@ -163,20 +164,25 @@ class OrganizationsList extends Component {
                 { name: i18n._(t`Modified`), key: 'modified', isSortable: true, isNumeric: true },
                 { name: i18n._(t`Created`), key: 'created', isSortable: true, isNumeric: true },
               ]}
-              showSelectAll
-              isAllSelected={isAllSelected}
-              onSelectAll={this.handleSelectAll}
-              additionalControls={[
-                <ToolbarDeleteButton
-                  key="delete"
-                  onDelete={this.handleOrgDelete}
-                  itemsToDelete={selected}
-                  itemName="Organization"
-                />,
-                canAdd
-                  ? <ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
-                  : null,
-              ]}
+              renderToolbar={(props) => (
+                <DataListToolbar
+                  {...props}
+                  showSelectAll
+                  isAllSelected={isAllSelected}
+                  onSelectAll={this.handleSelectAll}
+                  additionalControls={[
+                    <ToolbarDeleteButton
+                      key="delete"
+                      onDelete={this.handleOrgDelete}
+                      itemsToDelete={selected}
+                      itemName="Organization"
+                    />,
+                    canAdd
+                      ? <ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
+                      : null,
+                  ]}
+                />
+              )}
               renderItem={(o) => (
                 <OrganizationListItem
                   key={o.id}