webpack/scenes/SmartProxy/ExpandableCvDetails.js
import React from 'react';
import PropTypes from 'prop-types';
import { translate as __ } from 'foremanReact/common/I18n';
import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
import { CheckCircleIcon, TimesCircleIcon } from '@patternfly/react-icons';
import LongDateTime from 'foremanReact/components/common/dates/LongDateTime';
import { urlBuilder } from 'foremanReact/common/urlHelpers';
import { useSet } from 'foremanReact/components/PF4/TableIndexPage/Table/TableHooks';
import ContentViewIcon from '../ContentViews/components/ContentViewIcon';
import ExpandedSmartProxyRepositories from './ExpandedSmartProxyRepositories';
const ExpandableCvDetails = ({ contentViews, contentCounts, envId }) => {
const columnHeaders = [
__('Content view'),
__('Version'),
__('Last published'),
__('Synced'),
];
// const { content_counts: contentCounts } = counts;
const expandedTableRows = useSet([]);
const tableRowIsExpanded = id => expandedTableRows.has(id);
return (
<TableComposable
aria-label="expandable-content-views"
ouiaId="expandable-content-views"
>
<Thead>
<Tr ouiaId="column-headers">
<Th />
{columnHeaders.map(col => (
<Th
key={col}
>
{col}
</Th>
))}
</Tr>
</Thead>
{contentViews.map((cv, rowIndex) => {
const {
id, name: cvName, composite, up_to_date: upToDate,
cvv_id: versionId, cvv_version: version, repositories,
} = cv;
const upToDateVal = upToDate ? <CheckCircleIcon style={{ color: 'green' }} /> : <TimesCircleIcon style={{ color: 'red' }} />;
const isExpanded = tableRowIsExpanded(versionId);
return (
<Tbody key={`${id} + ${versionId}`}isExpanded={isExpanded}>
<Tr key={versionId} ouiaId={cv.name}>
<Td
aria-label={`expand-cv-${id}`}
style={{ paddingTop: 0 }}
expand={{
rowIndex,
isExpanded,
onToggle: (_event, _rInx, isOpen) =>
expandedTableRows.onToggle(isOpen, versionId),
}}
/>
<Td>
<ContentViewIcon
composite={composite}
description={<a href={cv.default ? urlBuilder('products', '') : urlBuilder('content_views', '', id)}>{cvName}</a>}
/>
</Td>
<Td>
<a href={`/content_views/${id}#/versions/${versionId}/`}>{__('Version ')}{version}</a>
</Td>
<Td><LongDateTime date={cv.last_published} showRelativeTimeTooltip /></Td>
<Td>{upToDateVal}</Td>
</Tr>
<Tr key="child_row" ouiaId={`ContentViewTableRowChild-${id}`} isExpanded={isExpanded}>
<Td colSpan={12}>
<ExpandedSmartProxyRepositories
contentCounts={contentCounts?.content_view_versions[versionId]?.repositories}
repositories={repositories}
syncedToCapsule={upToDate}
envId={envId}
/>
</Td>
</Tr>
</Tbody>
);
})}
</TableComposable>
);
};
ExpandableCvDetails.propTypes = {
contentViews: PropTypes.arrayOf(PropTypes.shape({})),
contentCounts: PropTypes.shape({
content_view_versions: PropTypes.shape({}),
}),
envId: PropTypes.oneOfType([
PropTypes.number,
PropTypes.string, // The API can sometimes return strings
]).isRequired,
};
ExpandableCvDetails.defaultProps = {
contentViews: [],
contentCounts: {},
};
export default ExpandableCvDetails;