webpack/scenes/Content/Table/ContentTable.js
import React, { useState, useCallback } from 'react';
import { useSelector } from 'react-redux';
import { translate as __ } from 'foremanReact/common/I18n';
import { TableVariant, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
import PropTypes from 'prop-types';
import TableWrapper from '../../../components/Table/TableWrapper';
import { getContent } from '../ContentActions';
import { selectContent, selectContentStatus, selectContentError } from '../ContentSelectors';
import SelectableDropdown from '../../../components/SelectableDropdown';
import contentConfig from '../ContentConfig';
/* eslint-disable react/no-array-index-key */
const ContentTable = ({
selectedContentType, setSelectedContentType, contentTypes, showContentTypeSelector,
}) => {
const status = useSelector(selectContentStatus);
const error = useSelector(selectContentError);
const response = useSelector(selectContent);
const [searchQuery, updateSearchQuery] = useState('');
const { results, ...metadata } = response;
const { columnHeaders } = contentConfig.find(type =>
type.names.singularLabel === contentTypes[selectedContentType][0]);
return (
<TableWrapper
{...{
metadata,
searchQuery,
updateSearchQuery,
error,
status,
}}
ouiaId="content-table"
key={selectedContentType}
variant={TableVariant.compact}
autocompleteEndpoint={`/katello/api/v2/${contentTypes[selectedContentType][1]}`}
bookmarkController="katello_generic_content_units"
emptyContentTitle={__(`You currently don't have any ${selectedContentType}.`)}
emptySearchTitle={__(`No matching ${selectedContentType} found`)}
emptyContentBody={__(`${selectedContentType} will appear here when created.`)}
emptySearchBody={__('Try changing your search settings.')}
fetchItems={useCallback(
params =>
getContent(contentTypes[selectedContentType][1], params),
[contentTypes, selectedContentType],
)}
actionButtons={
showContentTypeSelector &&
<SelectableDropdown
items={Object.keys(contentTypes)}
title={__('Type')}
selected={selectedContentType}
setSelected={setSelectedContentType}
placeholderText={__('Type')}
loading={false}
error={false}
/>
}
>
<Thead>
<Tr ouiaId="content-table-tr">
{columnHeaders.map(col =>
<Th key={col.title}>{col.title}</Th>)}
</Tr>
</Thead>
<Tbody>
{results?.map(details => (
<Tr key={details.id} ouiaId={`${details.id}-tr`}>
{columnHeaders.map((col, index) =>
<Td key={index}>{col.getProperty(details)}</Td>)
}
</Tr>
))
}
</Tbody>
</TableWrapper>
);
};
ContentTable.propTypes = {
selectedContentType: PropTypes.string.isRequired,
setSelectedContentType: PropTypes.func.isRequired,
contentTypes: PropTypes.shape({}).isRequired,
showContentTypeSelector: PropTypes.bool,
};
ContentTable.defaultProps = {
showContentTypeSelector: true,
};
export default ContentTable;