extract out PaginatedDataListItem

src/components/PaginatedDataList/PaginatedDataList.jsx

@@ -2,11 +2,6 @@ import React, { Fragment } from 'react';
 import PropTypes, { arrayOf, shape, string, bool } from 'prop-types';
 import {
   DataList,
-  DataListItem,
-  DataListItemRow,
-  DataListItemCells,
-  DataListCell,
-  TextContent,
   Title,
   EmptyState,
   EmptyStateIcon,
@@ -15,11 +10,12 @@ import {
 import { CubesIcon } from '@patternfly/react-icons';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import { withRouter, Link } from 'react-router-dom';
+import { withRouter } from 'react-router-dom';
 import styled from 'styled-components';
 
 import Pagination from '../Pagination';
 import DataListToolbar from '../DataListToolbar';
+import PaginatedDataListItem from './PaginatedDataListItem';
 import {
   parseNamespacedQueryString,
   updateNamespacedQueryString,
@@ -38,13 +34,6 @@ const EmptyStateControlsWrapper = styled.div`
     margin-left: 20px;
   }
 `;
-
-const ListItemGrid = styled(TextContent)`
-  display: grid;
-  grid-template-columns: minmax(70px,max-content) repeat(auto-fit, minmax(60px,max-content));
-  grid-gap: 10px;
-`;
-
 class PaginatedDataList extends React.Component {
   constructor (props) {
     super(props);
@@ -58,12 +47,6 @@ class PaginatedDataList extends React.Component {
     this.handleSort = this.handleSort.bind(this);
   }
 
-  getPageCount () {
-    const { itemCount, qsConfig, location } = this.props;
-    const queryParams = parseNamespacedQueryString(qsConfig, location.search);
-    return Math.ceil(itemCount / queryParams.page_size);
-  }
-
   getSortOrder () {
     const { qsConfig, location } = this.props;
     const queryParams = parseNamespacedQueryString(qsConfig, location.search);
@@ -95,11 +78,6 @@ class PaginatedDataList extends React.Component {
     history.push(`${pathname}?${qs}`);
   }
 
-  getPluralItemName () {
-    const { itemName, itemNamePlural } = this.props;
-    return itemNamePlural || `${itemName}s`;
-  }
-
   render () {
     const {
       emptyStateControls,
@@ -156,25 +134,7 @@ class PaginatedDataList extends React.Component {
             })}
             <DataList aria-label={i18n._(t`${ucFirst(pluralize(itemName))} List`)}>
               {items.map(item => (renderItem ? renderItem(item) : (
-                <DataListItem
-                  aria-labelledby={`items-list-item-${item.id}`}
-                  key={item.id}
-                >
-                  <DataListItemRow>
-                    <DataListItemCells dataListCells={[
-                      <DataListCell key="team-name">
-                        <ListItemGrid>
-                          <Link to={{ pathname: item.url }}>
-                            <b id={`items-list-item-${item.id}`}>
-                              {item.name}
-                            </b>
-                          </Link>
-                        </ListItemGrid>
-                      </DataListCell>
-                    ]}
-                    />
-                  </DataListItemRow>
-                </DataListItem>
+                <PaginatedDataListItem key={item.id} item={item} />
               )))}
             </DataList>
             <Pagination
@@ -226,7 +186,7 @@ PaginatedDataList.defaultProps = {
   itemName: 'item',
   itemNamePlural: '',
   showPageSizeOptions: true,
-  renderToolbar: ({ ...props }) => (<DataListToolbar {...props} />),
+  renderToolbar: (props) => (<DataListToolbar {...props} />),
 };
 
 export { PaginatedDataList as _PaginatedDataList };

src/components/PaginatedDataList/PaginatedDataListItem.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import {
+  DataListItem,
+  DataListItemRow,
+  DataListItemCells,
+  DataListCell,
+  TextContent,
+} from '@patternfly/react-core';
+import styled from 'styled-components';
+
+const DetailWrapper = styled(TextContent)`
+  display: grid;
+  grid-template-columns:
+    minmax(70px, max-content)
+    repeat(auto-fit, minmax(60px, max-content));
+  grid-gap: 10px;
+`;
+
+export default function PaginatedDataListItem ({ item }) {
+  return (
+    <DataListItem
+      aria-labelledby={`items-list-item-${item.id}`}
+      key={item.id}
+    >
+      <DataListItemRow>
+        <DataListItemCells dataListCells={[
+          <DataListCell key="team-name">
+            <DetailWrapper>
+              <Link to={{ pathname: item.url }}>
+                <b id={`items-list-item-${item.id}`}>
+                  {item.name}
+                </b>
+              </Link>
+            </DetailWrapper>
+          </DataListCell>
+        ]}
+        />
+      </DataListItemRow>
+    </DataListItem>
+  );
+}

src/components/PaginatedDataList/index.js

@@ -1,5 +1,6 @@
 import PaginatedDataList from './PaginatedDataList';
 
 export default PaginatedDataList;
+export { default as PaginatedDataListItem } from './PaginatedDataListItem';
 export { default as ToolbarDeleteButton } from './ToolbarDeleteButton';
 export { default as ToolbarAddButton } from './ToolbarAddButton';