katello 4.2.1 → 4.3.0.rc1

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

@@ -25,13 +25,13 @@ const buildRow = (contentView) => {
   const { last_sync_words: lastSyncWords } = lastTask || {};
   const row = [
     { title: <ContentViewIcon composite={composite ? true : undefined} /> },
-    { title: <Link to={urlBuilder('labs/content_views', '', id)}>{name}</Link> },
+    { title: <Link to={`${urlBuilder('content_views', '')}${id}`}>{name}</Link> },
     { title: lastPublished ? <LongDateTime date={lastPublished} showRelativeTimeTooltip /> : <InactiveText text={__('Not yet published')} /> },
     { title: <LastSync lastSync={lastTask} lastSyncWords={lastSyncWords} emptyMessage="N/A" /> },
     {
       title: latestVersion ? <ContentViewVersionCell {...{
- id, latestVersion, latestVersionId, latestVersionEnvironments,
-}}
+        id, latestVersion, latestVersionId, latestVersionEnvironments,
+      }}
       /> : <InactiveText style={{ marginTop: '0.5em', marginBottom: '0.5em' }} text={__('Not yet published')} />,
     },
   ];
@@ -52,6 +52,14 @@ const buildExpandableRows = (contentViews) => {
       description,
       activation_keys: activationKeys,
       hosts,
+      latest_version_environments: latestVersionEnvironments,
+      latest_version_id: latestVersionId,
+      latest_version: latestVersionName,
+      environments,
+      versions,
+      permissions,
+      related_cv_count: relatedCVCount,
+      related_composite_cvs: relatedCompositeCVs,
     } = contentView;
     const cells = buildRow(contentView);
     const cellParent = {
@@ -60,6 +68,12 @@ const buildExpandableRows = (contentViews) => {
       cvVersionCount: versionCount,
       cvComposite: composite,
       cvNextVersion: nextVersion,
+      latestVersionEnvironments,
+      latestVersionId,
+      latestVersionName,
+      environments,
+      versions,
+      permissions,
       isOpen: false,
       cells,
     };
@@ -68,7 +82,14 @@ const buildExpandableRows = (contentViews) => {
       parent: cvCount,
       cells: [
         {
-          title: <DetailsExpansion cvId={id} {...{ activationKeys, hosts }} />,
+          title: <DetailsExpansion
+            cvId={id}
+            cvName={name}
+            cvComposite={composite}
+            {...{
+ activationKeys, hosts, relatedCVCount, relatedCompositeCVs,
+}}
+          />,
           props: {
             colSpan: 2,
           },

data/webpack/scenes/ContentViews/__tests__/basicContentViews.fixtures.js

@@ -1,6 +1,6 @@
 const buildContentView = id => ({
   id,
-  composite: 'false',
+  composite: false,
   name: `contentView${id}`,
   environments: [],
   repositories: [],

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

@@ -9,6 +9,7 @@
     "by": "name",
     "order": "asc"
   },
+  "can_create": true,
   "results": [
     {
       "composite": false,
@@ -250,5 +251,7 @@
         }
       ]
     }
-  ]
+  ],
+  "composite": 1,
+  "component": 7
 }

data/webpack/scenes/ContentViews/__tests__/contentViewPage.test.js

@@ -9,8 +9,7 @@ import nock, {
   nockInstance, assertNockRequest, mockAutocomplete, mockSetting,
 } from '../../../test-utils/nockWrapper';
 import createBasicCVs from './basicContentViews.fixtures';
-
-const cvIndexData = require('./contentViewList.fixtures.json');
+import cvIndexData from './contentViewList.fixtures.json';
 
 const cvIndexPath = api.getApiUrl('/content_views');
 const autocompleteUrl = '/content_views/auto_complete_search';
@@ -19,9 +18,14 @@ const renderOptions = { apiNamespace: CONTENT_VIEWS_KEY };
 let firstCV;
 let searchDelayScope;
 let autoSearchScope;
+let scopeBookmark;
 beforeEach(() => {
   const { results } = cvIndexData;
   [firstCV] = results;
+  scopeBookmark = nockInstance
+    .get('/api/v2/bookmarks')
+    .query(true)
+    .reply(200, {});
   searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 500);
   autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing', true);
 });
@@ -34,26 +38,26 @@ afterEach(() => {
 
 test('Can call API for CVs and show on screen on page load', async (done) => {
   const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
-
-  // Mocking API call with nock so it returns the fixture data
   const scope = nockInstance
     .get(cvIndexPath)
     .query(true)
     .reply(200, cvIndexData);
 
-  // Using a custom rendering function that sets up both redux and react-router.
-  // This allows us to use the component as it is normally used
   const { queryByText } = renderWithRedux(<ContentViewsPage />, renderOptions);
 
-  // query* functions will return the element or null if it cannot be found
-  // get* functions will return the element or throw an error if it cannot be found
-  // Assert that the CV is not showing yet by searching by name and the query returning null
   expect(queryByText(firstCV.name)).toBeNull();
+
   // Assert that the CV name is now showing on the screen, but wait for it to appear.
-  await patientlyWaitFor(() => expect(queryByText(firstCV.name)).toBeInTheDocument());
-  // Assert request was made and completed, see helper function
+  await patientlyWaitFor(() => {
+    expect(queryByText(firstCV.name)).toBeInTheDocument();
+    expect(queryByText('Component content views')).toBeInTheDocument();
+    expect(queryByText('Composite content views')).toBeInTheDocument();
+  });
+
+
+  assertNockRequest(scopeBookmark);
   assertNockRequest(autocompleteScope);
-  assertNockRequest(scope, done); // Pass jest callback to confirm test is done
+  assertNockRequest(scope, done);
 });
 
 test('Can show last task and link to it', async (done) => {
@@ -75,7 +79,8 @@ test('Can show last task and link to it', async (done) => {
     // If no task is found display empty text N/A
     expect(queryByText('N/A')).toBeTruthy();
   });
-  // Assert request was made and completed, see helper function
+
+  assertNockRequest(scopeBookmark);
   assertNockRequest(autocompleteScope);
   assertNockRequest(scope, done); // Pass jest callback to confirm test is done
 });
@@ -108,7 +113,7 @@ test('Can show latest version and link to it', async (done) => {
     expect(getByText('dev').closest('a'))
       .toHaveAttribute('href', '/lifecycle_environments/2');
   });
-  // Assert request was made and completed, see helper function
+  assertNockRequest(scopeBookmark);
   assertNockRequest(autocompleteScope);
   assertNockRequest(scope, done); // Pass jest callback to confirm test is done
 });
@@ -146,7 +151,7 @@ test('Can expand cv and show activation keys and hosts', async (done) => {
     expect(queryByLabelText('host_link_2')).toHaveAttribute('href', '/hosts?search=content_view_id+%3D+2');
     expect(queryByLabelText('host_link_2').textContent).toEqual('1');
   });
-  // Assert request was made and completed, see helper function
+
   assertNockRequest(autocompleteScope);
   assertNockRequest(scope, done); // Pass jest callback to confirm test is done
 });
@@ -183,22 +188,7 @@ test('Can handle errored response', async (done) => {
   const { queryByText } = renderWithRedux(<ContentViewsPage />, renderOptions);
 
   expect(queryByText(firstCV.name)).toBeNull();
-  await patientlyWaitFor(() => expect(queryByText(/unable to connect/i)).toBeInTheDocument());
-  assertNockRequest(autocompleteScope);
-  assertNockRequest(scope, done);
-});
-
-test('Can handle loading state while request is being made', async (done) => {
-  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
-  const scope = nockInstance
-    .get(cvIndexPath)
-    .delay(2000) // Delay the response so we can check loading state properly
-    .query(true)
-    .reply(200);
-
-  const { queryByText } = renderWithRedux(<ContentViewsPage />, renderOptions);
-
-  expect(queryByText('Loading')).toBeTruthy();
+  await patientlyWaitFor(() => expect(queryByText(/Something went wrong! Please check server logs!/i)).toBeInTheDocument());
   assertNockRequest(autocompleteScope);
   assertNockRequest(scope, done);
 });
@@ -240,7 +230,7 @@ test('Can handle pagination', async (done) => {
     // Using a custom query params matcher because parameters can be strings
     .query(actualQueryObject => (parseInt(actualQueryObject.page, 10) === 2))
     .reply(200, cvIndexSecondPage);
-  const { queryByText, getByLabelText } = renderWithRedux(<ContentViewsPage />, renderOptions);
+  const { queryByText, getAllByLabelText } = renderWithRedux(<ContentViewsPage />, renderOptions);
   // Wait for first paginated page to load and assert only the first page of results are present
   await patientlyWaitFor(() => {
     expect(queryByText(results[0].name)).toBeInTheDocument();
@@ -249,8 +239,10 @@ test('Can handle pagination', async (done) => {
   });
 
   // Label comes from patternfly, if this test fails, check if patternfly updated the label.
-  expect(getByLabelText('Go to next page')).toBeTruthy();
-  getByLabelText('Go to next page').click();
+  const [top, bottom] = getAllByLabelText('Go to next page');
+  expect(top).toBeInTheDocument();
+  expect(bottom).toBeInTheDocument();
+  bottom.click();
   // Wait for second paginated page to load and assert only the second page of results are present
   await patientlyWaitFor(() => {
     expect(queryByText(results[20].name)).toBeInTheDocument();
@@ -310,7 +302,7 @@ test('No results message is shown for empty search', async (done) => {
   const query = `name = \"${cvname}\"`;
   const matchQuery = actualParams => actualParams?.search?.includes(cvname);
   const emptyResults = {
-    total: 1, subtotal: 1, page: 1, per_page: 20, search: query, results: [],
+    total: 0, subtotal: 0, page: 1, per_page: 20, search: query, results: [],
   };
 
   const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
@@ -330,7 +322,7 @@ test('No results message is shown for empty search', async (done) => {
 
   fireEvent.change(getByLabelText(/text input for search/i), { target: { value: query } });
 
-  await patientlyWaitFor(() => expect(getByText(/No matching Content Views found/i)).toBeInTheDocument());
+  await patientlyWaitFor(() => expect(getByText(/No matching content views found/i)).toBeInTheDocument());
 
   assertNockRequest(autocompleteScope);
   assertNockRequest(initialScope);
@@ -346,6 +338,7 @@ test('Displays Create Content View and opens modal with Form', async () => {
     subtotal: 0,
     page: 1,
     per_page: 20,
+    can_create: true,
     results: [],
   };
   nockInstance

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

@@ -0,0 +1,10 @@
+{
+  "label": "mock_details",
+  "permissions": {
+  "view_content_views": true,
+    "edit_content_views": true,
+    "destroy_content_views": true,
+    "publish_content_views": true,
+    "promote_or_remove_content_views": true
+}
+}

data/webpack/scenes/ContentViews/components/CVBreadCrumb.js

@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+import { useSelector, shallowEqual } from 'react-redux';
+import { Link, useParams, useLocation } from 'react-router-dom';
+import { capitalize, startCase } from 'lodash';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { STATUS } from 'foremanReact/constants';
+import {
+  selectCVDetails, selectCVDetailStatus, selectCVFilterDetails, selectCVFilterDetailStatus,
+  selectCVVersionDetails, selectCVVersionDetailsStatus,
+} from '../Details/ContentViewDetailSelectors';
+
+const CVBreadcrumb = () => {
+  const { id } = useParams();
+  const { hash } = useLocation();
+  const splitHash = hash.split('/');
+  const [recordId, setRecordId] = useState(null);
+  const [recordModel, setRecordModel] = useState(null);
+  const cvId = Number(id);
+  const cvDetails = useSelector(state =>
+    selectCVDetails(state, cvId), shallowEqual);
+  const cvDetailsStatus = useSelector(state =>
+    selectCVDetailStatus(state, cvId));
+  const filterDetails = useSelector(state =>
+    selectCVFilterDetails(state, cvId, recordId), shallowEqual);
+  const filterDetailsStatus = useSelector(state =>
+    selectCVFilterDetailStatus(state, cvId, recordId));
+  const versionDetails = useSelector(state =>
+    selectCVVersionDetails(state, recordId, cvId), shallowEqual);
+  const versionDetailsStatus = useSelector(state =>
+    selectCVVersionDetailsStatus(state, recordId, cvId));
+  const [breadcrumbItems, setBreadcrumbItems] = useState({});
+
+  useDeepCompareEffect(() => {
+    setBreadcrumbItems({
+      a_cv_index: { render: () => (<Link to="/content_views">{__('Content views')}</Link>) },
+    });
+    setRecordId(splitHash.length >= 3 ? splitHash[2] : null);
+    setRecordModel(splitHash.length >= 3 ? splitHash[1] : null);
+  }, [splitHash, setBreadcrumbItems, setRecordModel, setRecordId]);
+
+  // Adds the 2nd level of breadcrumbs after content view details is available.
+  // Adds a breadcrumb for CV name and the tab (version/repositories/details)
+  useDeepCompareEffect(() => {
+    if (cvDetails && cvDetailsStatus === STATUS.RESOLVED &&
+      Object.keys(breadcrumbItems).length === 1) {
+      const cvRecordCrumb = {
+        [`b_${cvDetails?.name}`]: {
+          render: () => (<Link to={`/content_views/${cvId}`}>{cvDetails?.name}</Link>),
+        },
+      };
+      const tabName = splitHash[1];
+      const tabRecordCrumb = {
+        [`c_${tabName}`]: {
+          render: () => (<Link to={`/content_views/${cvId}#/${tabName}`}>{capitalize(tabName)}</Link>),
+        },
+      };
+      setBreadcrumbItems({ ...breadcrumbItems, ...cvRecordCrumb, ...tabRecordCrumb });
+    }
+  }, [splitHash, cvId, cvDetails, cvDetailsStatus, breadcrumbItems, setBreadcrumbItems]);
+
+  // Adds the 3rd level of breadcrumbs when on Versions Details or Filter Details tabs.
+  // Needs filter/version details to be available for forming this.
+  useDeepCompareEffect(() => {
+    if (Object.keys(breadcrumbItems).length === 3 && splitHash.length >= 3) {
+      const tabName = splitHash[1];
+      if (recordModel === 'filters') {
+        if (filterDetails && filterDetailsStatus === STATUS.RESOLVED) {
+          const { name } = filterDetails;
+          const filterDetailCrumb = {
+            [`d_${name}`]: {
+              render: () => (<Link to={`/content_views/${cvId}#/${tabName}/${recordId}`}>{name}</Link>),
+            },
+          };
+          setBreadcrumbItems({ ...breadcrumbItems, ...filterDetailCrumb });
+        }
+      } else if (recordModel === 'versions') {
+        if (versionDetails && versionDetailsStatus === STATUS.RESOLVED) {
+          const versionTabName = startCase(splitHash[3]);
+          const { version } = versionDetails;
+          const versionDetailCrumb = {
+            [`e_${version}`]: {
+              render: () => (<Link to={`/content_views/${cvId}#/${tabName}/${recordId}`}>{version}</Link>),
+            },
+          };
+          const versionSecondaryTab = {
+            [`f_${versionTabName}`]: {
+              render: () => (
+                <Link to={`/content_views/${cvId}#/${tabName}/${recordId}/${versionTabName}`}>
+                  {capitalize(versionTabName)}
+                </Link>
+              ),
+            },
+          };
+          setBreadcrumbItems({ ...breadcrumbItems, ...versionDetailCrumb, ...versionSecondaryTab });
+        }
+      }
+    }
+  }, [cvId, recordId, recordModel, splitHash, versionDetails, versionDetailsStatus,
+    filterDetails, filterDetailsStatus, breadcrumbItems, setBreadcrumbItems]);
+
+  return (
+    <Breadcrumb style={{ marginTop: '15px' }}>
+      {
+        Object.keys(breadcrumbItems)?.sort()?.map(key => (
+          <BreadcrumbItem
+            key={key}
+            aria-label={key}
+            render={breadcrumbItems[key].render}
+          />))
+      }
+    </Breadcrumb>
+  );
+};
+
+export default CVBreadcrumb;

data/webpack/scenes/ContentViews/components/ContentViewsCounter.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { Grid, GridItem, Flex, FlexItem, Tooltip } from '@patternfly/react-core';
+import { InProgressIcon, OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
+import ContentViewIcon from './ContentViewIcon';
+import { selectOrganizationState } from '../../Organizations/OrganizationSelectors';
+
+const ContentViewsCounter = () => {
+  const organization = useSelector(selectOrganizationState);
+  const {
+    composite_content_views_count: composite,
+    content_view_components_count: component,
+  } = organization;
+  return (
+    <Grid className="grid-with-margin">
+      <GridItem span={12}>
+        <b>
+          <Flex>
+            <FlexItem spacer={{ default: 'spacerXs' }}>
+              <ContentViewIcon composite={false} description={__('Component content views')} count={component || <InProgressIcon />} />
+            </FlexItem>
+            <FlexItem>
+              <Tooltip
+                position="top"
+                content={
+                  __('Consists of repositories')
+                }
+              >
+                <OutlinedQuestionCircleIcon />
+              </Tooltip>
+            </FlexItem>
+          </Flex>
+        </b>
+      </GridItem>
+      <GridItem span={12}>
+        <b>
+          <Flex>
+            <FlexItem spacer={{ default: 'spacerXs' }}>
+              <ContentViewIcon composite description={__('Composite content views')} count={composite || <InProgressIcon />} />
+            </FlexItem>
+            <FlexItem>
+              <Tooltip
+                position="top"
+                content={
+                  __('Consists of content views')
+                }
+              >
+                <OutlinedQuestionCircleIcon />
+              </Tooltip>
+            </FlexItem>
+          </Flex>
+        </b>
+      </GridItem>
+    </Grid>
+  );
+};
+
+export default ContentViewsCounter;

data/webpack/scenes/ContentViews/components/EnvironmentLabels.js

@@ -10,15 +10,16 @@ const EnvironmentLabels = (environments) => {
         <React.Fragment key={env.id} style={{ marginBottom: '5px' }}>
           <Label
             color="purple"
-          >{`${env.name}`}
+            isTruncated
+          >{env.name}
           </Label>
         </React.Fragment>
       ));
     default:
       return (
         <React.Fragment>
-          <Label color="purple">
-            {`${name}`}
+          <Label color="purple" isTruncated>
+            {name}
           </Label>
         </React.Fragment>
       );

data/webpack/scenes/ContentViews/components/EnvironmentPaths/EnvironmentPaths.js

@@ -9,14 +9,20 @@ import EnvironmentLabels from '../EnvironmentLabels';
 import './EnvironmentPaths.scss';
 import Loading from '../../../../components/Loading';
 
-const EnvironmentPaths = ({ userCheckedItems, setUserCheckedItems }) => {
+const EnvironmentPaths = ({
+  userCheckedItems, setUserCheckedItems, promotedEnvironments, publishing, headerText, multiSelect,
+}) => {
   const environmentPathResponse = useSelector(selectEnvironmentPaths);
   const environmentPathStatus = useSelector(selectEnvironmentPathsStatus);
   const environmentPathLoading = environmentPathStatus === STATUS.PENDING;
 
   const oncheckedChange = (checked, env) => {
     if (checked) {
-      setUserCheckedItems([...userCheckedItems, env]);
+      if (multiSelect) {
+        setUserCheckedItems([...userCheckedItems, env]);
+      } else {
+        setUserCheckedItems([env]);
+      }
     } else {
       setUserCheckedItems(userCheckedItems.filter(item => item.id !== env.id));
     }
@@ -25,14 +31,16 @@ const EnvironmentPaths = ({ userCheckedItems, setUserCheckedItems }) => {
     return <Loading />;
   }
   const { results } = environmentPathResponse || {};
+
+  const envCheckedInList = (env, envList) => envList.filter(item => item.id === env.id).length;
   /* eslint-disable react/no-array-index-key */
   return (
     <>
-      <p
-        style={{ marginBottom: '2px' }}
-      >{__('Select a lifecycle environment from the available promotion paths to promote new version.')}
-      </p>
-      <Form>{results.map((path, count) => {
+      <b
+        style={{ marginBottom: '1em' }}
+      >{headerText}
+      </b>
+      <Form style={{ marginTop: '1em' }}>{results.map((path, count) => {
         const {
           environments,
         } = path || {};
@@ -41,9 +49,11 @@ const EnvironmentPaths = ({ userCheckedItems, setUserCheckedItems }) => {
             <FormGroup key={`fg-${count}`} isInline fieldId="environment-checkbox-group">
               {environments.map(env =>
                 (<Checkbox
-                  isChecked={env.library ||
-                  userCheckedItems.filter(item => item.id === env.id).length}
-                  isDisabled={env.library}
+                  isChecked={(publishing && env.library) ||
+                  envCheckedInList(env, userCheckedItems) ||
+                  envCheckedInList(env, promotedEnvironments)}
+                  isDisabled={(publishing && env.library)
+                  || envCheckedInList(env, promotedEnvironments)}
                   style={{ marginRight: '3px', marginBottom: '1px' }}
                   className="env-labels-with-pointer"
                   key={`${env.id}${count}`}
@@ -66,7 +76,16 @@ const EnvironmentPaths = ({ userCheckedItems, setUserCheckedItems }) => {
 EnvironmentPaths.propTypes = {
   userCheckedItems: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
   setUserCheckedItems: PropTypes.func.isRequired,
+  promotedEnvironments: PropTypes.arrayOf(PropTypes.shape({})),
+  publishing: PropTypes.bool,
+  headerText: PropTypes.string,
+  multiSelect: PropTypes.bool,
 };
 
-
+EnvironmentPaths.defaultProps = {
+  promotedEnvironments: [],
+  publishing: true,
+  headerText: __('Select a lifecycle environment from the available promotion paths to promote new version.'),
+  multiSelect: true,
+};
 export default EnvironmentPaths;

data/webpack/scenes/ContentViews/components/TaskPresenter/TaskPresenter.js

@@ -33,7 +33,7 @@ const TaskPresenter = ({ activeHistory, setPollingFinished }) => {
       const { id } = task;
       dispatch(stopPollingTask(id));
       dispatch(toastTaskFinished(pollResponse));
-      setPollingFinished(true); // Use this boolean as activeListener in refering page table
+      setPollingFinished(true); // Use this boolean as activeListener in referring page table
     }
   }, [polling, dispatch, setPollingFinished, pollResponse, task]);
 

data/webpack/scenes/ContentViews/expansions/DetailsExpansion.js

@@ -1,16 +1,44 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
+import RelatedCompositeContentViewsModal from './RelatedCompositeContentViewsModal';
+import RelatedContentViewComponentsModal from './RelatedContentViewComponentsModal';
 
-const DetailsExpansion = ({ cvId, activationKeys, hosts }) => {
+const DetailsExpansion = ({
+  cvId, cvName, cvComposite, activationKeys, hosts, relatedCVCount, relatedCompositeCVs,
+}) => {
   const activationKeyCount = activationKeys.length;
   const hostCount = hosts.length;
 
+  const relatedContentViewModal = () => {
+    if (cvComposite) {
+      return (
+        <>
+          {__('Related component cvs: ')}
+          <RelatedContentViewComponentsModal key="cvId" {...{ cvName, cvId, relatedCVCount }} />
+        </>
+      );
+    }
+    return (
+      <>
+        {__('Related composite cvs: ')}
+        <RelatedCompositeContentViewsModal
+          key={cvId}
+          {...{
+         cvName, cvId, relatedCVCount, relatedCompositeCVs,
+        }}
+        />
+      </>
+    );
+  };
+
   return (
     <div id={`cv-details-expansion-${cvId}`}>
       {__('Activation keys: ')}<a aria-label={`activation_keys_link_${cvId}`} href={`/activation_keys?search=content_view_id+%3D+${cvId}`}>{activationKeyCount}</a>
       <br />
       {__('Hosts: ')}<a aria-label={`host_link_${cvId}`} href={`/hosts?search=content_view_id+%3D+${cvId}`}>{hostCount}</a>
+      <br />
+      {relatedContentViewModal()}
     </div>
   );
 };
@@ -19,11 +47,20 @@ DetailsExpansion.propTypes = {
   cvId: PropTypes.number.isRequired,
   activationKeys: PropTypes.arrayOf(PropTypes.shape({})),
   hosts: PropTypes.arrayOf(PropTypes.shape({})),
+  cvName: PropTypes.string,
+  cvComposite: PropTypes.bool,
+  relatedCompositeCVs: PropTypes.arrayOf(PropTypes.shape({})),
+  relatedCVCount: PropTypes.number,
 };
 
 DetailsExpansion.defaultProps = {
   activationKeys: [],
   hosts: [],
+  cvName: '',
+  cvComposite: false,
+  relatedCompositeCVs: [],
+  relatedCVCount: 0,
+
 };
 
 export default DetailsExpansion;