webpack/scenes/Content/Details/ContentRepositories.js
import React, { useState, useCallback } from 'react';
import { useSelector } from 'react-redux';
import { TableVariant, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
import { translate as __ } from 'foremanReact/common/I18n';
import PropTypes from 'prop-types';
import {
selectRepositoryContentDetails,
selectRepositoryContentDetailsError,
selectRepositoryContentDetailsStatus,
} from '../ContentSelectors';
import contentConfig from '../ContentConfig';
import { getRepositoryContentDetails } from '../ContentActions';
import TableWrapper from '../../../components/Table/TableWrapper';
/* eslint-disable react/no-array-index-key */
const ContentRepositories = ({ contentType, id, tabKey }) => {
const status = useSelector(selectRepositoryContentDetailsStatus);
const response = useSelector(selectRepositoryContentDetails);
const error = useSelector(selectRepositoryContentDetailsError);
const [searchQuery, updateSearchQuery] = useState('');
const { results, ...metadata } = response;
const config = contentConfig.find(type => type.names.pluralLabel === contentType);
const typeSingularLabel = config.names.singularLabel;
const { columnHeaders } = config.tabs.find(header => header.tabKey === tabKey);
const emptyContentTitle = __("You currently don't have any repositories associated with this content.");
const emptyContentBody = __('Please add some repositories.');
const emptySearchTitle = __('No matching repositories found');
const emptySearchBody = __('Try changing your search settings.');
return (
<TableWrapper
{...{
metadata,
searchQuery,
updateSearchQuery,
error,
status,
emptyContentTitle,
emptySearchTitle,
emptySearchBody,
emptyContentBody,
}}
ouiaId="content-repositories-table"
variant={TableVariant.compact}
autocompleteEndpoint="/katello/api/v2/repositories"
bookmarkController="katello_repositories"
fetchItems={useCallback(
params => getRepositoryContentDetails(typeSingularLabel, id, params),
[typeSingularLabel, id],
)}
>
<Thead>
<Tr ouiaId="content-repositories-column-headers-row">
{columnHeaders.map(col =>
<Th key={col.title}>{col.title}</Th>)}
</Tr>
</Thead>
<Tbody>
{results?.map((details, idx) => (
<Tr key={details.id} ouiaId={`content-repositories-row-${idx}`}>
{columnHeaders.map((col, index) =>
<Td key={index}>{col.getProperty(details, typeSingularLabel)}</Td>)
}
</Tr>
))
}
</Tbody>
</TableWrapper>
);
};
export default ContentRepositories;
ContentRepositories.propTypes = {
contentType: PropTypes.string.isRequired,
id: PropTypes.number.isRequired,
tabKey: PropTypes.string.isRequired,
};