Fixes #36720 - Composable Expandable Table for Smart Proxy content

(cherry picked from commit c5dc9dd)

webpack/components/Table/TableWrapper.js

@@ -45,6 +45,7 @@ const TableWrapper = ({
   emptySearchBody,
   hideSearch,
   alwaysHideToolbar,
+  hidePagination,
   nodesBelowSearch,
   bookmarkController,
   readOnlyBookmarks,
@@ -59,7 +60,7 @@ const TableWrapper = ({
   const { pageRowCount } = getPageStats({ total, page, perPage });
   const unresolvedStatus = !!allTableProps?.status && allTableProps.status !== STATUS.RESOLVED;
   const unresolvedStatusOrNoRows = unresolvedStatus || pageRowCount === 0;
-  const showPagination = !unresolvedStatusOrNoRows;
+  const showPagination = !unresolvedStatusOrNoRows && !hidePagination;
   const filtersAreActive = activeFilters?.length &&
     !isEqual(new Set(activeFilters), new Set(allTableProps.defaultFilters));
   const hideToolbar = alwaysHideToolbar || (!searchQuery && !filtersAreActive &&
@@ -308,6 +309,7 @@ TableWrapper.propTypes = {
   emptySearchBody: PropTypes.string,
   hideSearch: PropTypes.bool,
   alwaysHideToolbar: PropTypes.bool,
+  hidePagination: PropTypes.bool,
   nodesBelowSearch: PropTypes.node,
   bookmarkController: PropTypes.string,
   readOnlyBookmarks: PropTypes.bool,
@@ -338,6 +340,7 @@ TableWrapper.defaultProps = {
   emptySearchBody: __('Try changing your search settings.'),
   hideSearch: false,
   alwaysHideToolbar: false,
+  hidePagination: false,
   nodesBelowSearch: null,
   bookmarkController: undefined,
   readOnlyBookmarks: false,

webpack/scenes/SmartProxy/Content.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import SmartProxyContentTable from './SmartProxyContentTable';
+import SmartProxyExpandableTable from './SmartProxyExpandableTable';
 
 const Content = ({ smartProxyId }) => (
-  <SmartProxyContentTable smartProxyId={smartProxyId} />
+  <SmartProxyExpandableTable smartProxyId={smartProxyId} />
 );
 
 Content.propTypes = {

webpack/scenes/SmartProxy/ExpandableCvDetails.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { TableComposable, Thead, Tr, Th, Tbody, Td, TableVariant } 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 ContentViewIcon from '../ContentViews/components/ContentViewIcon';
+
+const ExpandableCvDetails = ({ data }) => {
+  const columnHeaders = [
+    __('Content View'),
+    __('Last published'),
+    __('Repositories'),
+    __('Last sync'),
+  ];
+
+  return (
+    <TableComposable
+      variant={TableVariant.compact}
+      aria-label="content-views"
+    >
+      <Thead>
+        <Tr>
+          {columnHeaders.map(col => (
+            <Th
+              key={col}
+            >
+              {col}
+            </Th>
+          ))}
+        </Tr>
+      </Thead>
+      <Tbody>
+        {data.map((cv, rowIndex) => {
+          const {
+            id, name: cvName, composite, last_published: lastPublished, up_to_date: upToDate, counts,
+          } = cv;
+          const { repositories } = counts;
+          const cvType = <ContentViewIcon composite={composite} />;
+          const upToDateVal = upToDate ? <CheckCircleIcon /> : <TimesCircleIcon />;
+          return (
+            <Tr key={cv.name}>
+              <Td><a href={cv.default ? urlBuilder('products', '') : urlBuilder('content_views', '', id)}>{cvName}</a></Td>
+              <Td><LongDateTime date={cv.last_published} showRelativeTimeTooltip /></Td>
+              <Td>{repositories}</Td>
+              <Td>{upToDateVal}</Td>
+            </Tr>
+          );
+        })}
+      </Tbody>
+    </TableComposable>
+
+  );
+};
+
+export default ExpandableCvDetails;

webpack/scenes/SmartProxy/SmartProxyExpandableTable.js

@@ -0,0 +1,102 @@
+import React, { useState, useCallback } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { omit } from 'lodash';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { TableVariant, Thead, Tbody, Th, Tr, Td, ExpandableRowContent } from '@patternfly/react-table';
+import getSmartProxyContent from './SmartProxyContentActions';
+import {
+  selectSmartProxyContent,
+  selectSmartProxyContentStatus,
+  selectSmartProxyContentError,
+} from './SmartProxyContentSelectors';
+import { useSet, useTableSort } from '../../components/Table/TableHooks';
+import TableWrapper from '../../components/Table/TableWrapper';
+import ExpandableCvDetails from './ExpandableCvDetails';
+
+const SmartProxyExpandableTable = ({ smartProxyId }) => {
+  const response = useSelector(selectSmartProxyContent);
+  const status = useSelector(selectSmartProxyContentStatus);
+  const error = useSelector(selectSmartProxyContentError);
+  const [searchQuery, updateSearchQuery] = useState('');
+  const expandedTableRows = useSet([]);
+  const tableRowIsExpanded = id => expandedTableRows.has(id);
+  let metadata = {};
+  const {
+    lifecycle_environments: results,
+  } = response;
+  if (results) {
+    metadata = { total: results.length, subtotal: results.length };
+  }
+  console.log(results);
+  const columnHeaders = [
+    __('Environment'),
+  ];
+  const fetchItems = useCallback(() => getSmartProxyContent({ smartProxyId }));
+
+  const emptyContentTitle = __('No content views yet');
+  const emptyContentBody = __('You currently have no content views to display');
+  const emptySearchTitle = __('No matching content views found');
+  const emptySearchBody = __('Try changing your search settings.');
+  const alwaysHideToolbar = true;
+  const hidePagination = true;
+  return (
+    <TableWrapper
+      {...{
+        error,
+        metadata,
+        emptyContentTitle,
+        emptyContentBody,
+        emptySearchTitle,
+        emptySearchBody,
+        searchQuery,
+        updateSearchQuery,
+        fetchItems,
+        alwaysHideToolbar,
+        hidePagination,
+      }}
+      ouiaId="capsule-content-table"
+      status={status}
+    >
+      <Thead>
+        <Tr ouiaId="cvTableHeaderRow">
+          <Th key="expand-carat" />
+          {columnHeaders.map(col => (
+            <Th
+              key={col}
+            >
+              {col}
+            </Th>
+          ))}
+        </Tr>
+      </Thead>
+      {
+        results?.map((env, rowIndex) => {
+          const { name, id, content_views: contentViews } = env;
+          const isExpanded = tableRowIsExpanded(id);
+          return (
+            <Tbody isExpanded={isExpanded} key={id}>
+              <Tr key={id} ouiaId={`EnvRow-${id}`}>
+                <Td
+                  expand={{
+                    rowIndex,
+                    isExpanded,
+                    onToggle: (_event, _rInx, isOpen) =>
+                      expandedTableRows.onToggle(isOpen, id),
+                  }}
+                />
+                <Td>{name}</Td>
+              </Tr>
+              <Tr key="child_row" ouiaId={`ContentViewTableRowChild-${id}`} isExpanded={isExpanded}>
+                <Td colSpan={2}>
+                  <ExpandableCvDetails data={contentViews} />
+                </Td>
+              </Tr>
+            </Tbody>
+          );
+        })
+      }
+    </TableWrapper >
+  );
+};
+
+export default SmartProxyExpandableTable;