katello 4.10.0.rc2 → 4.11.0.rc1

data/webpack/scenes/ContentViews/Details/Versions/Compare/CVVersionCompareTable.js

@@ -4,10 +4,10 @@ import {
 } from 'react-redux';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
+import { useTableSort } from 'foremanReact/components/PF4/Helpers/useTableSort';
 import { TableVariant, Tr, Th, Tbody, Td, Thead } from '@patternfly/react-table';
 import { TableType } from './CVVersionCompareConfig';
 import TableWrapper from '../../../../../components/Table/TableWrapper';
-import { useTableSort } from '../../../../../components/Table/TableHooks';
 import './CVVersionCompare.scss';
 
 const CVVersionCompareTable = ({

data/webpack/scenes/ContentViews/Details/Versions/ContentViewVersions.js

@@ -8,7 +8,7 @@ import { STATUS } from 'foremanReact/constants';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { first } from 'lodash';
-import { useSelectionSet } from '../../../../components/Table/TableHooks';
+import { useSelectionSet } from 'foremanReact/components/PF4/TableIndexPage/Table/TableHooks';
 import TableWrapper from '../../../../components/Table/TableWrapper';
 import InactiveText from '../../components/InactiveText';
 import ContentViewVersionEnvironments from './ContentViewVersionEnvironments';

data/webpack/scenes/ContentViews/Details/Versions/Delete/RemoveCVVersionWizard.js

@@ -3,6 +3,7 @@ import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import { Wizard } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
+import { useSet } from 'foremanReact/components/PF4/TableIndexPage/Table/TableHooks';
 import getEnvironmentPaths from '../../../components/EnvironmentPaths/EnvironmentPathActions';
 import CVEnvironmentSelectionForm from './RemoveSteps/CVEnvironmentSelectionForm';
 import CVReassignActivationKeysForm from './RemoveSteps/CVReassignActivationKeysForm';
@@ -12,7 +13,6 @@ import CVVersionDeleteFinish from './RemoveSteps/CVVersionDeleteFinish';
 import getContentViewDetails from '../../ContentViewDetailActions';
 import getContentViews from '../../../ContentViewsActions';
 import DeleteContext from './DeleteContext';
-import { useSet } from '../../../../../components/Table/TableHooks';
 
 const RemoveCVVersionWizard = ({
   cvId, versionIdToRemove, versionNameToRemove,

data/webpack/scenes/ContentViews/Details/Versions/VersionDetails/ContentViewVersionDetailsTable.js

@@ -21,7 +21,7 @@ import {
   Thead,
   Tr,
 } from '@patternfly/react-table';
-import { useUrlParams } from '../../../../../components/Table/TableHooks';
+import { useUrlParams } from 'foremanReact/components/PF4/TableIndexPage/Table/TableHooks';
 import TableWrapper from '../../../../../components/Table/TableWrapper';
 import { TableType } from './ContentViewVersionDetailConfig';
 

data/webpack/scenes/ContentViews/Publish/CVPublishForm.js

@@ -17,7 +17,10 @@ const CVPublishForm = ({
   description,
   setDescription,
   details: {
-    name, composite, next_version: nextVersion, needs_publish: needsPublish,
+    name, composite,
+    next_version: nextVersion,
+    needs_publish: needsPublish,
+    duplicate_repositories_to_publish: duplicateRepos,
   },
   userCheckedItems,
   setUserCheckedItems,
@@ -27,6 +30,7 @@ const CVPublishForm = ({
 }) => {
   const [alertDismissed, setAlertDismissed] = useState(false);
   const [needsPublishAlertDismissed, setNeedsPublishAlertDismissed] = useState(false);
+  const [duplicateReposAlertDismissed, setDuplicateReposAlertDismissed] = useState(false);
   const needsPublishLocal = useSelector(state => selectCVNeedsPublish(state));
 
   const checkPromote = (checked) => {
@@ -61,6 +65,24 @@ const CVPublishForm = ({
                   <TextContent>{__('Newly published version will be the same as the previous version.')}</TextContent>
                 </Alert>)
             }
+            {!duplicateReposAlertDismissed && composite &&
+                (duplicateRepos !== null || duplicateRepos.length > 0) &&
+                (
+                <Alert
+                  ouiaId="duplicate-repos-alert"
+                  variant="info"
+                  isInline
+                  title={__('Duplicate repositories in content view versions')}
+                  actionClose={
+                    <AlertActionCloseButton
+                      onClose={() => setDuplicateReposAlertDismissed(true)}
+                    />
+                        }
+                  style={{ marginBottom: '24px' }}
+                >
+                  <TextContent>{__('Repositories common to the selected content view versions will merge, resulting in a composite content view that is a union of all content from each of the content view versions.')}</TextContent>
+                </Alert>)
+            }
             {__('A new version of ')}<b>{composite ? <RegistryIcon /> : <EnterpriseIcon />} {name}</b>
             {__(' will be created and automatically promoted to the ' +
               'Library environment. You can promote to other environments as well. ')
@@ -142,6 +164,7 @@ CVPublishForm.propTypes = {
       PropTypes.string,
     ]).isRequired,
     needs_publish: PropTypes.bool,
+    duplicate_repositories_to_publish: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
   }).isRequired,
 };
 

data/webpack/scenes/ContentViews/Publish/PublishContentViewWizard.js

@@ -122,6 +122,7 @@ const PublishContentViewWizard = ({
         } else onClose();
       }}
       isOpen={show}
+      id="content-view-publish-wizard"
     />
   );
 };

data/webpack/scenes/ContentViews/Publish/__tests__/publishContentView.test.js

@@ -38,6 +38,48 @@ test('Can call API and show Wizard', async (done) => {
   assertNockRequest(filterScope, done);
 });
 
+test('Can show wizard with duplicate repository warning for composite CV', async (done) => {
+  const cvCompositeDetailsData = cvDetailData;
+  cvCompositeDetailsData.composite = true;
+  cvCompositeDetailsData.duplicate_repositories_to_publish = [
+    {
+      id: 1,
+      name: 'repo1',
+      components: [
+        {
+          content_view_name: 'test',
+          content_view_version: '2.0',
+        },
+        {
+          content_view_name: 'dev',
+          content_view_version: '3.0',
+        },
+      ],
+    },
+  ];
+  const scope = nockInstance
+    .get(environmentPathsPath)
+    .query(true)
+    .reply(200, environmentPathsData);
+  const filterScope = nockInstance
+    .get(cvFiltersPath)
+    .reply(200, contentViewFilterData);
+
+  const { getByText } = renderWithRedux(<PublishContentViewWizard
+    details={cvCompositeDetailsData}
+    show
+    onClose={() => { }}
+  />);
+
+  await patientlyWaitFor(() => {
+    expect(getByText('Publish new version - 6.0')).toBeInTheDocument();
+    expect(getByText('Repositories common to the selected content view versions will merge, resulting in a composite content view that is a union of all content from each of the content view versions.')).toBeTruthy();
+  });
+
+  assertNockRequest(scope);
+  assertNockRequest(filterScope, done);
+});
+
 test('Can show Wizard and show environment paths', async (done) => {
   const scope = nockInstance
     .get(environmentPathsPath)

data/webpack/scenes/ContentViews/Publish/cvPublishForm.scss

@@ -1,13 +1,15 @@
-.pf-c-switch {
-  --pf-c-switch__input--focus__toggle--OutlineWidth: 0;
-}
+#content-view-publish-wizard {
+  .pf-c-switch {
+    --pf-c-switch__input--focus__toggle--OutlineWidth: 0;
+  }
 
-.pf-c-wizard__main-body {
-  display: flex;
-  grid-gap: 16px;
-  flex-direction: column;
-}
+  .pf-c-wizard__main-body {
+    display: flex;
+    grid-gap: 16px;
+    flex-direction: column;
+  }
 
-.pf-c-content h4 {
-  margin-top: 0px;
-}
+  .pf-c-content h4 {
+    margin-top: 0px;
+  }
+}

data/webpack/scenes/ContentViews/Table/ContentViewsTable.js

@@ -4,6 +4,8 @@ import { Link } from 'react-router-dom';
 import { omit } from 'lodash';
 import { translate as __ } from 'foremanReact/common/I18n';
 import LongDateTime from 'foremanReact/components/common/dates/LongDateTime';
+import { useSet } from 'foremanReact/components/PF4/TableIndexPage/Table/TableHooks';
+import { useTableSort } from 'foremanReact/components/PF4/Helpers/useTableSort';
 import { Button } from '@patternfly/react-core';
 import { TableVariant, Thead, Tbody, Th, Tr, Td, ExpandableRowContent } from '@patternfly/react-table';
 import TableWrapper from '../../../components/Table/TableWrapper';
@@ -15,7 +17,6 @@ import { selectContentViews, selectContentViewStatus, selectContentViewError } f
 import ContentViewVersionPromote from '../Details/Promote/ContentViewVersionPromote';
 import getEnvironmentPaths from '../components/EnvironmentPaths/EnvironmentPathActions';
 import { hasPermission } from '../helpers';
-import { useSet, useTableSort } from '../../../components/Table/TableHooks';
 import ContentViewIcon from '../components/ContentViewIcon';
 import { urlBuilder } from '../../../__mocks__/foremanReact/common/urlHelpers';
 import LastSync from '../Details/Repositories/LastSync';

data/webpack/scenes/ContentViews/__tests__/mockDetails.fixtures.json

@@ -12,5 +12,6 @@
   "next_version": "1.0",
   "id": "5",
   "version_count": 0,
-  "filtered": true
+  "filtered": true,
+  "duplicate_repositories_to_publish": []
 }

data/webpack/scenes/Hosts/ChangeContentSource/index.js

@@ -8,6 +8,8 @@ import { foremanUrl } from 'foremanReact/common/helpers';
 import { STATUS } from 'foremanReact/constants';
 import BreadcrumbBar from 'foremanReact/components/BreadcrumbBar';
 import Head from 'foremanReact/components/Head';
+import { useForemanHostsPageUrl } from 'foremanReact/Root/Context/ForemanContext';
+import { useUrlParams } from 'foremanReact/components/PF4/TableIndexPage/Table/TableHooks';
 
 import { selectApiDataStatus,
   selectApiContentViewStatus,
@@ -20,7 +22,6 @@ import { selectApiDataStatus,
   selectTemplate } from './selectors';
 
 import { getHostIds, formIsLoading } from './helpers';
-import { useUrlParams } from '../../../components/Table/TableHooks';
 import {
   getFormData,
   getProxy,
@@ -96,14 +97,14 @@ const ChangeContentSourcePage = () => {
     setShouldShowTemplate(true);
   };
 
+  const hostIndexUrl = useForemanHostsPageUrl();
   const breadcrumbItems = () => {
-    const linkHosts = { caption: __('Hosts'), url: foremanUrl('/hosts') };
+    const linkHosts = { caption: __('Hosts'), url: hostIndexUrl };
     const linkContent = { caption: __('Change host content source') };
 
     if (urlParams.host_id) {
       const hostName = contentHosts.concat(hostsWithoutContent)
         .find(h => `${h.id}` === urlParams.host_id)?.name;
-
       return ([linkHosts, { caption: hostName, url: foremanUrl(`/new/hosts/${hostName}`) }, linkContent]);
     }
     return ([linkHosts, linkContent]);

data/webpack/scenes/ModuleStreams/Details/ModuleStreamDetails.js

@@ -50,8 +50,7 @@ class ModuleStreamDetails extends Component {
           breadcrumbItems={[
             {
               caption: __('Module Streams'),
-              onClick: () =>
-                this.props.history.push('/module_streams'),
+              url: '/module_streams/',
             },
             {
               caption: `${name} ${stream}`,

data/webpack/scenes/ModuleStreams/Details/__tests__/__snapshots__/ModuleStreamDetails.test.js.snap

@@ -109,7 +109,7 @@ exports[`Module stream details page rendering renders with module stream provide
       Array [
         Object {
           "caption": "Module Streams",
-          "onClick": [Function],
+          "url": "/module_streams/",
         },
         Object {
           "caption": "avocado latest",

data/webpack/scenes/RedHatRepositories/RedHatRepositoriesPage.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import { isEmpty } from 'lodash';
 import { Grid, Row, Col } from 'react-bootstrap';
 import { Skeleton, Alert } from '@patternfly/react-core';
-import { Button } from 'patternfly-react';
+import { Button, FieldLevelHelp } from 'patternfly-react';
 import { translate as __ } from 'foremanReact/common/I18n';
 import PermissionDenied from 'foremanReact/components/PermissionDenied';
 import { LoadingState } from '../../components/LoadingState';
@@ -96,6 +96,7 @@ class RedHatRepositoriesPage extends Component {
           <Col sm={6} className="enabled-repositories-container">
             <h2>
               {__('Enabled Repositories')}
+              <FieldLevelHelp content={__('Only repositories not published in a content view can be disabled. Published repositories must be deleted from the repository details page.')} />
               <Button
                 ouiaId="export-csv-button"
                 className="pull-right"

data/webpack/scenes/RedHatRepositories/__tests__/__snapshots__/RedHatRepositoriesPage.test.js.snap

@@ -81,6 +81,12 @@ exports[`RedHatRepositories page should render 1`] = `
     >
       <h2>
         Enabled Repositories
+        <FieldLevelHelp
+          buttonClass=""
+          content="Only repositories not published in a content view can be disabled. Published repositories must be deleted from the repository details page."
+          placement="top"
+          rootClose={true}
+        />
         <Button
           active={false}
           block={false}

data/webpack/scenes/RedHatRepositories/components/EnabledRepository/EnabledRepository.js

@@ -62,7 +62,7 @@ class EnabledRepository extends Component {
 
   render() {
     const {
-      name, id, type, orphaned, label,
+      name, id, type, orphaned, label, canDisable,
     } = this.props;
 
     return (
@@ -73,6 +73,7 @@ class EnabledRepository extends Component {
             loading={this.props.loading}
             disableTooltipId={this.disableTooltipId}
             disableRepository={this.disableRepository}
+            canDisable={canDisable}
           />
         }
         leftContent={<RepositoryTypeIcon id={id} type={type} />}
@@ -106,6 +107,7 @@ EnabledRepository.propTypes = {
   loading: PropTypes.bool,
   releasever: PropTypes.string,
   orphaned: PropTypes.bool,
+  canDisable: PropTypes.bool,
   setRepositoryDisabled: PropTypes.func.isRequired,
   loadEnabledRepos: PropTypes.func.isRequired,
   disableRepository: PropTypes.func.isRequired,
@@ -116,6 +118,7 @@ EnabledRepository.defaultProps = {
   orphaned: false,
   search: {},
   loading: false,
+  canDisable: true,
 };
 
 export default EnabledRepository;

data/webpack/scenes/RedHatRepositories/components/EnabledRepository/EnabledRepositoryContent.js

@@ -4,21 +4,29 @@ import cx from 'classnames';
 import { Spinner, OverlayTrigger, Tooltip } from 'patternfly-react';
 import { translate as __ } from 'foremanReact/common/I18n';
 
-const EnabledRepositoryContent = ({ loading, disableTooltipId, disableRepository }) => (
+const EnabledRepositoryContent = ({
+  loading, disableTooltipId, disableRepository, canDisable,
+}) => (
   <Spinner loading={loading} inline>
     <OverlayTrigger
-      overlay={<Tooltip id={disableTooltipId}>{__('Disable')}</Tooltip>}
+      overlay={<Tooltip id={disableTooltipId}>{canDisable ? __('Disable') : __('Cannot be disabled because it is part of a published content view')}</Tooltip>}
       placement="bottom"
       trigger={['hover', 'focus']}
       rootClose={false}
     >
       <button
         onClick={disableRepository}
-        style={{
+        style={canDisable ? {
           backgroundColor: 'initial',
           border: 'none',
           color: '#0388ce',
-        }}
+        } : {
+          backgroundColor: 'initial',
+          border: 'none',
+          color: '#d2d2d2',
+        }
+      }
+        disabled={!canDisable}
       >
         <i className={cx('fa-2x', 'fa fa-minus-circle')} />
       </button>
@@ -30,6 +38,7 @@ EnabledRepositoryContent.propTypes = {
   loading: PropTypes.bool.isRequired,
   disableTooltipId: PropTypes.string.isRequired,
   disableRepository: PropTypes.func.isRequired,
+  canDisable: PropTypes.bool.isRequired,
 };
 
 export default EnabledRepositoryContent;

data/webpack/scenes/RedHatRepositories/components/EnabledRepository/__tests__/EnabledRepositoryContent.test.js

@@ -12,6 +12,7 @@ describe('Enabled Repositories Content Component', () => {
       loading
       disableTooltipId="disable-1"
       disableRepository={mockCallBack}
+      canDisable={false}
     />);
   });
 

data/webpack/scenes/RedHatRepositories/components/EnabledRepository/__tests__/__snapshots__/EnabledRepository.test.js.snap

@@ -4,6 +4,7 @@ exports[`Enabled Repositories Component should render 1`] = `
 <ListViewItem
   actions={
     <EnabledRepositoryContent
+      canDisable={true}
       disableRepository={[Function]}
       disableTooltipId="disable-1"
       loading={false}

data/webpack/scenes/RedHatRepositories/components/EnabledRepository/__tests__/__snapshots__/EnabledRepositoryContent.test.js.snap

@@ -16,7 +16,7 @@ exports[`Enabled Repositories Content Component should render 1`] = `
         id="disable-1"
         placement="right"
       >
-        Disable
+        Cannot be disabled because it is part of a published content view
       </Tooltip>
     }
     placement="bottom"
@@ -29,12 +29,13 @@ exports[`Enabled Repositories Content Component should render 1`] = `
     }
   >
     <button
+      disabled={true}
       onClick={[MockFunction]}
       style={
         Object {
           "backgroundColor": "initial",
           "border": "none",
-          "color": "#0388ce",
+          "color": "#d2d2d2",
         }
       }
     >

data/webpack/scenes/SmartProxy/AdditionalCapsuleContent.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ContentConfig from '../Content/ContentConfig';
+
+const AdditionalCapsuleContent = ({ counts }) => {
+  const {
+    deb: debPackageCount = 0,
+    docker_manifest: dockerManifestCount = 0,
+    docker_tag: dockerTagCount = 0,
+    file: fileCount = 0,
+    erratum: errataCount = 0,
+    package_group: packageGroup = 0,
+    'rpm.modulemd': moduleStreamCount = 0,
+  } = counts;
+
+  const contentConfigTypes = ContentConfig.filter(({ names: { capsuleCountLabel } }) =>
+    !!counts[`${capsuleCountLabel}`])
+    .map(({
+      names: {
+        capsuleCountLabel, pluralLowercase,
+      },
+    }) => {
+      const countParam = `${capsuleCountLabel}`;
+      const count = counts[countParam];
+      return {
+        pluralLowercase,
+        count,
+      };
+    });
+
+  return (
+    <>
+      {errataCount > 0 &&
+      <>
+        {`${errataCount} Errata`}<br />
+      </>
+            }
+      {moduleStreamCount > 0 &&
+      <>
+        {`${moduleStreamCount} Module streams`}<br />
+      </>
+            }
+      {packageGroup > 0 &&
+      <>
+        {`${packageGroup} Package groups`}<br />
+      </>
+            }
+      {dockerTagCount > 0 &&
+      <>
+        {`${dockerTagCount} Container tags`}<br />
+      </>
+            }
+      {dockerManifestCount > 0 &&
+      <>
+        {`${dockerManifestCount} Container manifests`}<br />
+      </>
+            }
+      {fileCount > 0 &&
+      <>
+        {`${fileCount} Files`}<br />
+      </>
+            }
+      {debPackageCount > 0 &&
+      <>
+        {`${debPackageCount} Debian packages`}<br />
+      </>}
+      {contentConfigTypes?.length > 0 &&
+                contentConfigTypes.map(({ count, pluralLowercase }) => (
+                  <React.Fragment key={pluralLowercase}>
+                    {`${count} ${pluralLowercase}`}<br />
+                  </React.Fragment>))
+            }
+    </>
+  );
+};
+
+AdditionalCapsuleContent.propTypes = {
+  counts: PropTypes.shape({
+    deb: PropTypes.number,
+    docker_manifest: PropTypes.number,
+    docker_tag: PropTypes.number,
+    file: PropTypes.number,
+    erratum: PropTypes.number,
+    package_group: PropTypes.number,
+    'rpm.modulemd': PropTypes.number,
+  }),
+};
+
+AdditionalCapsuleContent.defaultProps = {
+  counts: {},
+};
+
+export default AdditionalCapsuleContent;

data/webpack/scenes/SmartProxy/Content.js

@@ -1,17 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import SmartProxyContentTable from './SmartProxyContentTable';
+import SmartProxyExpandableTable from './SmartProxyExpandableTable';
 
-const Content = ({ smartProxyId }) => (
-  <SmartProxyContentTable smartProxyId={smartProxyId} />
+const Content = ({ smartProxyId, organizationId }) => (
+  <SmartProxyExpandableTable smartProxyId={smartProxyId} organizationId={organizationId} />
 );
 
 Content.propTypes = {
-  smartProxyId: PropTypes.number,
+  smartProxyId: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string, // The API can sometimes return strings
+  ]),
+  organizationId: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string, // The API can sometimes return strings
+  ]),
 };
 
 Content.defaultProps = {
   smartProxyId: null,
+  organizationId: null,
 };
 
 export default Content;

data/webpack/scenes/SmartProxy/ExpandableCvDetails.js

@@ -0,0 +1,107 @@
+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;