From 36e777fdad98dc058358e9c5ace87d047009344b Mon Sep 17 00:00:00 2001
From: Samir Jha <sjha4@ncsu.edu>
Date: Thu, 19 Oct 2023 17:30:08 +0000
Subject: [PATCH] Fixes #36807 - More fixes

---
 .../v2/capsule_content/sync_status.json.rabl  |  4 ++-
 .../scenes/SmartProxy/ExpandableCvDetails.js  | 21 +++++++++-----
 .../ExpandedSmartProxyRepositories.js         | 29 +++++++++++++------
 .../SmartProxy/SmartProxyExpandableTable.js   |  4 ++-
 4 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/app/views/katello/api/v2/capsule_content/sync_status.json.rabl b/app/views/katello/api/v2/capsule_content/sync_status.json.rabl
index 0baf011cf24..30eb72eef57 100644
--- a/app/views/katello/api/v2/capsule_content/sync_status.json.rabl
+++ b/app/views/katello/api/v2/capsule_content/sync_status.json.rabl
@@ -41,9 +41,11 @@ child @lifecycle_environments => :lifecycle_environments do
 
     node :content_views do |env|
       env.content_views.ignore_generated.map do |content_view|
+      cvv = ::Katello::ContentViewVersion.in_environment(env).find_by(:content_view => content_view)
         attributes = {
           :id => content_view.id,
-          :cvv_id => ::Katello::ContentViewVersion.in_environment(env).find_by(:content_view => content_view)&.id,
+          :cvv_id => cvv&.id,
+          :cvv_version => cvv&.version,
           :label => content_view.label,
           :name => content_view.name,
           :composite => content_view.composite,
diff --git a/webpack/scenes/SmartProxy/ExpandableCvDetails.js b/webpack/scenes/SmartProxy/ExpandableCvDetails.js
index bbac1f31715..8f8336553f2 100644
--- a/webpack/scenes/SmartProxy/ExpandableCvDetails.js
+++ b/webpack/scenes/SmartProxy/ExpandableCvDetails.js
@@ -12,6 +12,7 @@ import ExpandedSmartProxyRepositories from './ExpandedSmartProxyRepositories';
 const ExpandableCvDetails = ({ contentViews, counts }) => {
   const columnHeaders = [
     __('Content view'),
+    __('Version'),
     __('Last published'),
     __('Synced'),
   ];
@@ -38,19 +39,21 @@ const ExpandableCvDetails = ({ contentViews, counts }) => {
       </Thead>
       {contentViews.map((cv, rowIndex) => {
         const {
-          id, name: cvName, composite, up_to_date: upToDate, cvv_id: version, repositories,
+          id, name: cvName, composite, up_to_date: upToDate,
+          cvv_id: versionId, cvv_version: version, repositories,
         } = cv;
-        const upToDateVal = upToDate ? <CheckCircleIcon /> : <TimesCircleIcon />;
-        const isExpanded = tableRowIsExpanded(version);
+        const upToDateVal = upToDate ? <CheckCircleIcon style={{ color: 'green' }} /> : <TimesCircleIcon style={{ color: 'red' }} />;
+        const isExpanded = tableRowIsExpanded(versionId);
         return (
-          <Tbody key={`${id} + ${version}`}isExpanded={isExpanded}>
-            <Tr key={version} ouiaId={cv.name}>
+          <Tbody key={`${id} + ${versionId}`}isExpanded={isExpanded}>
+            <Tr key={versionId} ouiaId={cv.name}>
               <Td
                 style={{ paddingTop: 0 }}
                 expand={{
                   rowIndex,
                   isExpanded,
-                  onToggle: (_event, _rInx, isOpen) => expandedTableRows.onToggle(isOpen, version),
+                  onToggle: (_event, _rInx, isOpen) =>
+                    expandedTableRows.onToggle(isOpen, versionId),
                 }}
               />
               <Td>
@@ -59,14 +62,18 @@ const ExpandableCvDetails = ({ contentViews, counts }) => {
                   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[version]?.repositories}
+                  contentCounts={contentCounts?.content_view_versions[versionId]?.repositories}
                   repositories={repositories}
+                  syncedToCapsule={upToDate}
                 />
               </Td>
             </Tr>
diff --git a/webpack/scenes/SmartProxy/ExpandedSmartProxyRepositories.js b/webpack/scenes/SmartProxy/ExpandedSmartProxyRepositories.js
index 95fbc3ed3ee..614970cfc71 100644
--- a/webpack/scenes/SmartProxy/ExpandedSmartProxyRepositories.js
+++ b/webpack/scenes/SmartProxy/ExpandedSmartProxyRepositories.js
@@ -6,16 +6,19 @@ import { DataList, DataListItem, DataListItemRow, DataListItemCells, DataListCel
 import AdditionalCapsuleContent from './AdditionalCapsuleContent';
 import InactiveText from '../ContentViews/components/InactiveText';
 
-const ExpandedSmartProxyRepositories = ({ contentCounts, repositories }) => {
+const ExpandedSmartProxyRepositories = ({ contentCounts, repositories, syncedToCapsule }) => {
   const getRepositoryNameById = id => (repositories.find(repo =>
     Number(repo.id) === Number(id)) || {}).name;
-
   const dataListCellLists = (repo) => {
     const cellList = [];
     /* eslint-disable max-len */
-    cellList.push(<DataListCell key={`${repo.id}-name`}><span>{getRepositoryNameById(repo)}</span></DataListCell>);
-    cellList.push(<DataListCell key={`${repo.id}-rpm`}><span>{contentCounts[repo].rpm ? `${contentCounts[repo].rpm} Packages` : 'N/A'}</span></DataListCell>);
-    cellList.push(<DataListCell key={`${repo.id}-count`}><AdditionalCapsuleContent counts={contentCounts[repo]} /></DataListCell>);
+    if (syncedToCapsule) {
+      cellList.push(<DataListCell key={`${repo.id}-name`}><span>{getRepositoryNameById(repo)}</span></DataListCell>);
+      cellList.push(<DataListCell key={`${repo.id}-rpm`}><span>{contentCounts[repo].rpm ? `${contentCounts[repo].rpm} Packages` : 'N/A'}</span></DataListCell>);
+      cellList.push(<DataListCell key={`${repo.id}-count`}><AdditionalCapsuleContent counts={contentCounts[repo]} /></DataListCell>);
+    } else {
+      cellList.push(<DataListCell key={`${repo.id}-not-synced`}><InactiveText text={__('Content view is not synced to capsule')} /></DataListCell>);
+    }
     /* eslint-enable max-len */
     return cellList;
   };
@@ -33,13 +36,19 @@ const ExpandedSmartProxyRepositories = ({ contentCounts, repositories }) => {
           />
         </DataListItemRow>
       </DataListItem>
-      {Object.keys(contentCounts).length ? Object.keys(contentCounts).map((repo, index) => (
-        <DataListItem key={`${repo.id}-${index}`}>
+      {Object.keys(contentCounts).length ?
+        Object.keys(contentCounts).map((repo, index) => (
+          <DataListItem key={`${repo.id}-${index}`}>
+            <DataListItemRow>
+              <DataListItemCells dataListCells={dataListCellLists(repo)} />
+            </DataListItemRow>
+          </DataListItem>
+        )) :
+        <DataListItem key="empty">
           <DataListItemRow>
-            <DataListItemCells dataListCells={dataListCellLists(repo)} />
+            <DataListItemCells dataListCells={[<DataListCell key="cv-empty"><InactiveText text={__('Content view version is empty')} /></DataListCell>]} />
           </DataListItemRow>
         </DataListItem>
-      )) : <InactiveText text={__('No content available')} />
       }
     </DataList>
   );
@@ -48,11 +57,13 @@ const ExpandedSmartProxyRepositories = ({ contentCounts, repositories }) => {
 ExpandedSmartProxyRepositories.propTypes = {
   contentCounts: PropTypes.shape({}),
   repositories: PropTypes.arrayOf(PropTypes.shape({})),
+  syncedToCapsule: PropTypes.bool,
 };
 
 ExpandedSmartProxyRepositories.defaultProps = {
   contentCounts: {},
   repositories: [{}],
+  syncedToCapsule: false,
 };
 
 export default ExpandedSmartProxyRepositories;
diff --git a/webpack/scenes/SmartProxy/SmartProxyExpandableTable.js b/webpack/scenes/SmartProxy/SmartProxyExpandableTable.js
index 1f9d463a1f3..91034b79c08 100644
--- a/webpack/scenes/SmartProxy/SmartProxyExpandableTable.js
+++ b/webpack/scenes/SmartProxy/SmartProxyExpandableTable.js
@@ -114,7 +114,9 @@ const SmartProxyExpandableTable = ({ smartProxyId, organizationId }) => {
                 </Tr>
                 <Tr key="child_row" ouiaId={`ContentViewTableRowChild-${id}`} isExpanded={isExpanded}>
                   <Td colSpan={4}>
-                    <ExpandableCvDetails contentViews={contentViews} counts={counts} />
+                    {isExpanded ?
+                      <ExpandableCvDetails contentViews={contentViews} counts={counts} /> :
+                      <></>}
                   </Td>
                 </Tr>
               </Tbody>