katello 4.4.1 → 4.5.0

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

@@ -1,13 +1,12 @@
 import React, { useState, useCallback } from 'react';
-import useDeepCompareEffect from 'use-deep-compare-effect';
 import { useSelector, useDispatch } from 'react-redux';
-import { omit, upperCase } from 'lodash';
+import { Link } from 'react-router-dom';
+import { omit } from 'lodash';
 import { translate as __ } from 'foremanReact/common/I18n';
-import { STATUS } from 'foremanReact/constants';
+import LongDateTime from 'foremanReact/components/common/dates/LongDateTime';
 import { Button } from '@patternfly/react-core';
-import { TableVariant } from '@patternfly/react-table';
+import { TableVariant, Thead, Tbody, Th, Tr, Td, ExpandableRowContent } from '@patternfly/react-table';
 import TableWrapper from '../../../components/Table/TableWrapper';
-import tableDataGenerator from './tableDataGenerator';
 import getContentViews from '../ContentViewsActions';
 import CreateContentViewModal from '../Create/CreateContentViewModal';
 import CopyContentViewModal from '../Copy/CopyContentViewModal';
@@ -15,180 +14,115 @@ import PublishContentViewWizard from '../Publish/PublishContentViewWizard';
 import { selectContentViews, selectContentViewStatus, selectContentViewError } from '../ContentViewSelectors';
 import ContentViewVersionPromote from '../Details/Promote/ContentViewVersionPromote';
 import getEnvironmentPaths from '../components/EnvironmentPaths/EnvironmentPathActions';
-import ContentViewDeleteWizard from '../Delete/ContentViewDeleteWizard';
-import getContentViewDetails, { getContentViewVersions } from '../Details/ContentViewDetailActions';
 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';
+import InactiveText from '../components/InactiveText';
+import ContentViewVersionCell from './ContentViewVersionCell';
+import DetailsExpansion from '../expansions/DetailsExpansion';
+import ContentViewDeleteWizard from '../Delete/ContentViewDeleteWizard';
 
 const ContentViewTable = () => {
   const response = useSelector(selectContentViews);
   const status = useSelector(selectContentViewStatus);
   const error = useSelector(selectContentViewError);
-  const [table, setTable] = useState({ rows: [], columns: [] });
-  const [sortBy, setSortBy] = useState({});
-  const [rowMappingIds, setRowMappingIds] = useState([]);
   const [searchQuery, updateSearchQuery] = useState('');
-  const loadingResponse = status === STATUS.PENDING;
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [copy, setCopy] = useState(false);
-  const [cvResults, setCvResults] = useState([]);
-  const [cvTableStatus, setCvTableStatus] = useState(STATUS.PENDING);
+  const expandedTableRows = useSet([]);
+  const tableRowIsExpanded = id => expandedTableRows.has(id);
   const [isPublishModalOpen, setIsPublishModalOpen] = useState(false);
   const [isPromoteModalOpen, setIsPromoteModalOpen] = useState(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [actionableCvDetails, setActionableCvDetails] = useState({});
   const [actionableCvId, setActionableCvId] = useState('');
   const [actionableCvName, setActionableCvName] = useState('');
-  const [currentStep, setCurrentStep] = useState(1);
   const dispatch = useDispatch();
   const metadata = omit(response, ['results']);
-  const { can_create: canCreate = false } = response;
+  const { can_create: canCreate = false, results } = response;
+  const columnHeaders = [
+    __('Type'),
+    __('Name'),
+    __('Last published'),
+    __('Last task'),
+    __('Latest version'),
+  ];
+  const COLUMNS_TO_SORT_PARAMS = {
+    [columnHeaders[1]]: 'name',
+  };
+  const {
+    pfSortParams, apiSortParams,
+    activeSortColumn, activeSortDirection,
+  } = useTableSort({
+    allColumns: columnHeaders,
+    columnsToSortParams: COLUMNS_TO_SORT_PARAMS,
+    initialSortColumnName: 'Name',
+  });
 
   const openForm = () => setIsModalOpen(true);
 
-  const openPublishModal = (rowInfo) => {
-    setActionableCvDetails({
-      id: rowInfo.cvId.toString(),
-      name: rowInfo.cvName,
-      composite: rowInfo.cvComposite,
-      version_count: rowInfo.cvVersionCount,
-      next_version: rowInfo.cvNextVersion,
-    });
+  const openPublishModal = (cvInfo) => {
+    setActionableCvDetails(cvInfo);
     setIsPublishModalOpen(true);
   };
 
-  const openPromoteModal = (rowInfo) => {
+  const openPromoteModal = (cvInfo) => {
     dispatch(getEnvironmentPaths());
-    setActionableCvDetails({
-      id: rowInfo.cvId.toString(),
-      latestVersionId: rowInfo.latestVersionId,
-      latestVersionEnvironments: rowInfo.latestVersionEnvironments,
-      latestVersionName: rowInfo.latestVersionName,
-    });
+    setActionableCvDetails(cvInfo);
     setIsPromoteModalOpen(true);
   };
 
-  const openDeleteModal = (rowInfo) => {
-    dispatch(getContentViewDetails(rowInfo.cvId));
-    dispatch(getContentViewVersions(rowInfo.cvId));
-    setActionableCvDetails({
-      id: rowInfo.cvId.toString(),
-      name: rowInfo.cvName,
-      environments: rowInfo.environments,
-      versions: rowInfo.versions,
-    });
+  const openDeleteModal = (cvInfo) => {
+    setActionableCvDetails(cvInfo);
     setIsDeleteModalOpen(true);
   };
 
-  useDeepCompareEffect(
-    () => {
-      // Prevents flash of "No Content" before rows are loaded
-      const tableStatus = () => {
-        if (typeof cvResults === 'undefined' || status === STATUS.ERROR) return status; // will handle errored state
-        const resultsIds = Array.from(cvResults.map(result => result.id));
-        // All results are accounted for in row mapping, the page is ready to load
-        if (resultsIds.length === rowMappingIds.length &&
-          resultsIds.every(id => rowMappingIds.includes(id))) {
-          return status;
-        }
-        return STATUS.PENDING; // Fallback to pending
-      };
-
-      const { results } = response;
-      if (status === STATUS.ERROR) {
-        setCvTableStatus(tableStatus());
-      }
-      if (!loadingResponse && results) {
-        setCvResults(results);
-        setCurrentStep(1);
-        const { newRowMappingIds, ...tableData } = tableDataGenerator(results);
-        setTable(tableData);
-        setRowMappingIds(newRowMappingIds);
-        setCvTableStatus(tableStatus());
-      }
-      return () => {
-        // This sets the loading state so that the table doesn't flicker on return
-        setCvTableStatus(STATUS.PENDING);
-      };
-    },
-    [response, status, loadingResponse, setTable, setRowMappingIds,
-      setCvResults, setCvTableStatus, setCurrentStep, cvResults, rowMappingIds],
-  );
-
-  const onCollapse = (_event, rowId, isOpen) => {
-    let rows;
-    if (rowId === -1) {
-      rows = table.rows.map(row => ({ ...row, isOpen }));
-    } else {
-      rows = [...table.rows];
-      rows[rowId].isOpen = isOpen;
-    }
+  const actionsWithPermissions = (cvInfo) => {
+    const { version_count: cvVersionCount, generated_for: generatedFor, permissions } = cvInfo;
 
-    setTable(prevTable => ({ ...prevTable, rows }));
-  };
-
-  const actionResolver = (rowData, { _rowIndex }) => {
-    // don't show actions for the expanded parts
-    if (rowData.parent !== undefined || rowData.compoundParent || rowData.noactions) return null;
     const publishAction = {
       title: __('Publish'),
-      onClick: (_event, _rowId, rowInfo) => {
-        openPublishModal(rowInfo);
-      },
+      isDisabled: generatedFor !== 'none',
+      onClick: () => openPublishModal(cvInfo),
     };
 
     const promoteAction = {
       title: __('Promote'),
-      isDisabled: !rowData.cvVersionCount,
-      onClick: (_event, _rowId, rowInfo) => openPromoteModal(rowInfo),
+      isDisabled: !cvVersionCount,
+      onClick: () => openPromoteModal(cvInfo),
     };
 
     const copyAction = {
       title: __('Copy'),
-      onClick: (_event, _rowId, rowInfo) => {
+      onClick: () => {
         setCopy(true);
-        setActionableCvId(rowInfo.cvId.toString());
-        setActionableCvName(rowInfo.cvName);
+        setActionableCvId(cvInfo.id.toString());
+        setActionableCvName(cvInfo.name);
       },
     };
 
     const deleteAction = {
       title: __('Delete'),
-      onClick: (_event, _rowId, rowInfo) => openDeleteModal(rowInfo),
+      onClick: () => openDeleteModal(cvInfo),
     };
 
     return [
-      ...(hasPermission(rowData.permissions, 'publish_content_views') ? [publishAction] : []),
-      ...(hasPermission(rowData.permissions, 'promote_or_remove_content_views') ? [promoteAction] : []),
+      ...(hasPermission(permissions, 'publish_content_views') ? [publishAction] : []),
+      ...(hasPermission(permissions, 'promote_or_remove_content_views') ? [promoteAction] : []),
       ...(canCreate ? [copyAction] : []),
-      ...(hasPermission(rowData.permissions, 'destroy_content_views') ? [deleteAction] : []),
+      ...(hasPermission(permissions, 'destroy_content_views') ? [deleteAction] : []),
     ];
   };
 
-  const indexToSortVariable = (key) => {
-    switch (key) {
-    case 2:
-      return 'name';
-    default:
-      return undefined;
-    }
-  };
-
-  const onSort = (_event, index, direction) => {
-    setCvTableStatus(STATUS.PENDING);
-    setSortBy({ index, direction });
-  };
-
-  const { index: sortByIndex, direction } = sortBy;
   const fetchItems = useCallback(
     params =>
       getContentViews({
+        ...apiSortParams,
         ...params,
-        ...sortByIndex ? {
-          sort_by: indexToSortVariable(sortByIndex),
-          sort_order: upperCase(direction),
-        } : {},
       }),
-    [sortByIndex, direction],
+    [apiSortParams],
   );
 
   const emptyContentTitle = __("You currently don't have any Content views.");
@@ -197,43 +131,36 @@ const ContentViewTable = () => {
   const emptySearchBody = __('Try changing your search settings.');
   const {
     id,
-    latestVersionId,
-    latestVersionName,
-    latestVersionEnvironments,
+    latest_version_id: latestVersionId,
+    latest_version: latestVersionName,
+    latest_version_environments: latestVersionEnvironments,
     environments,
     versions,
   } = actionableCvDetails;
 
-  const { rows, columns } = table;
   return (
     <TableWrapper
       {...{
-        rows,
         error,
         metadata,
         emptyContentTitle,
         emptyContentBody,
         emptySearchTitle,
         emptySearchBody,
-        actionResolver,
         searchQuery,
         updateSearchQuery,
         fetchItems,
       }}
-      additionalListeners={[isPublishModalOpen, sortByIndex, direction]}
-      sortBy={sortBy}
-      onSort={onSort}
+      ouiaId="content-views-table"
+      additionalListeners={[activeSortColumn, activeSortDirection]}
       bookmarkController="katello_content_views"
       variant={TableVariant.compact}
-      status={cvTableStatus}
-      onCollapse={onCollapse}
-      canSelectAll={false}
-      cells={columns}
+      status={status}
       autocompleteEndpoint="/content_views/auto_complete_search"
       actionButtons={
         <>
           {canCreate &&
-            <Button onClick={openForm} variant="primary" aria-label="create_content_view">
+            <Button ouiaId="create-content-view" onClick={openForm} variant="primary" aria-label="create_content_view">
               {__('Create content view')}
             </Button>
           }
@@ -243,9 +170,12 @@ const ContentViewTable = () => {
             <PublishContentViewWizard
               details={actionableCvDetails}
               show={isPublishModalOpen}
-              setIsOpen={setIsPublishModalOpen}
-              currentStep={currentStep}
-              setCurrentStep={setCurrentStep}
+              onClose={(makeCallback) => {
+                if (makeCallback) {
+                  dispatch(getContentViews(apiSortParams));
+                }
+                setIsPublishModalOpen(false);
+              }}
               aria-label="publish_content_view_modal"
             />
           }
@@ -258,19 +188,106 @@ const ContentViewTable = () => {
               setIsOpen={setIsPromoteModalOpen}
             />
           }
-          {isDeleteModalOpen && <ContentViewDeleteWizard
-            cvId={id && Number(id)}
-            cvEnvironments={environments}
-            cvVersions={versions}
-            show={isDeleteModalOpen}
-            setIsOpen={setIsDeleteModalOpen}
-            currentStep={currentStep}
-            setCurrentStep={setCurrentStep}
-            aria-label="delete_content_view_modal"
-          />}
+          {isDeleteModalOpen &&
+            <ContentViewDeleteWizard
+              cvId={id && Number(id)}
+              cvEnvironments={environments}
+              cvVersions={versions}
+              show={isDeleteModalOpen}
+              setIsOpen={setIsDeleteModalOpen}
+              aria-label="delete_content_view_modal"
+            />}
         </>
       }
-    />
+    >
+      <Thead>
+        <Tr>
+          <Th key="expand-carat" />
+          {columnHeaders.map(col => (
+            <Th
+              key={col}
+              sort={COLUMNS_TO_SORT_PARAMS[col] ? pfSortParams(col) : undefined}
+            >
+              {col}
+            </Th>
+          ))}
+          <Th key="action-menu" />
+        </Tr>
+      </Thead>
+      {results?.map((cvInfo, rowIndex) => {
+        const {
+          composite,
+          name,
+          id: cvId,
+          last_published: lastPublished,
+          latest_version: latestVersion,
+          latest_version_id: cvLatestVersionId,
+          latest_version_environments: cvLatestVersionEnvironments,
+          last_task: lastTask,
+          activation_keys: activationKeys,
+          hosts,
+          related_cv_count: relatedCVCount,
+          related_composite_cvs: relatedCompositeCVs,
+          description,
+          createdAt,
+        } = cvInfo;
+        const { last_sync_words: lastSyncWords, started_at: startedAt } = lastTask ?? {};
+        const isExpanded = tableRowIsExpanded(cvId);
+        return (
+          <Tbody isExpanded={isExpanded} key={`${cvId}_${createdAt}`}>
+            <Tr key={cvId}>
+              <Td
+                expand={{
+                  rowIndex,
+                  isExpanded,
+                  onToggle: (_event, _rInx, isOpen) =>
+                    expandedTableRows.onToggle(isOpen, cvId),
+                }}
+              />
+              <Td><ContentViewIcon position="right" composite={composite} /></Td>
+              <Td><Link to={`${urlBuilder('content_views', '')}${cvId}`}>{name}</Link></Td>
+              <Td>{lastPublished ? <LongDateTime date={lastPublished} showRelativeTimeTooltip /> : <InactiveText text={__('Not yet published')} />}</Td>
+              <Td><LastSync startedAt={startedAt} lastSync={lastTask} lastSyncWords={lastSyncWords} emptyMessage="N/A" /></Td>
+              <Td>{latestVersion ?
+                <ContentViewVersionCell {...{
+                  id: cvId,
+                  latestVersion,
+                  latestVersionId: cvLatestVersionId,
+                  latestVersionEnvironments: cvLatestVersionEnvironments,
+                }}
+                /> :
+                <InactiveText style={{ marginTop: '0.5em', marginBottom: '0.5em' }} text={__('Not yet published')} />}
+              </Td>
+              <Td
+                key={`rowActions-${id}`}
+                actions={{
+                  items: actionsWithPermissions(cvInfo),
+                }}
+              />
+            </Tr>
+            <Tr key="child_row" isExpanded={isExpanded}>
+              <Td colSpan={2}>
+                <ExpandableRowContent>
+                  <DetailsExpansion
+                    cvId={cvId}
+                    cvName={name}
+                    cvComposite={composite}
+                    {...{
+                      activationKeys, hosts, relatedCVCount, relatedCompositeCVs,
+                    }}
+                  />
+                </ExpandableRowContent>
+              </Td>
+              <Td colSpan={4}>
+                <ExpandableRowContent>
+                  {description || <InactiveText text={__('No description')} />}
+                </ExpandableRowContent>
+              </Td>
+            </Tr>
+          </Tbody>
+        );
+      })}
+    </TableWrapper>
   );
 };
 

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

@@ -64,6 +64,7 @@ const buildExpandableRows = (contentViews) => {
       environments,
       versions,
       permissions,
+      generated_for: generatedFor,
       related_cv_count: relatedCVCount,
       related_composite_cvs: relatedCompositeCVs,
     } = contentView;
@@ -80,6 +81,7 @@ const buildExpandableRows = (contentViews) => {
       environments,
       versions,
       permissions,
+      generatedFor,
       isOpen: false,
       cells,
     };

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

@@ -1,20 +1,31 @@
 import React from 'react';
 import { translate as __ } from 'foremanReact/common/I18n';
 import PropTypes from 'prop-types';
+import { Tooltip } from '@patternfly/react-core';
 import { EnterpriseIcon, RegistryIcon } from '@patternfly/react-icons';
 import './contentViewIcon.scss';
 
 const ContentViewIcon = ({
-  composite, count, description, style,
+  composite, count, description, style, ...toolTipProps
 }) => {
   const props = {
-    title: composite ? __('Composite') : __('Component'),
     className: composite ? 'svg-icon-composite' : 'svg-icon-component',
   };
+  const cvIcon = (
+    <Tooltip
+      position="auto"
+      enableFlip
+      entryDelay={400}
+      content={composite ? __('Composite content view') : __('Content view')}
+      {...toolTipProps}
+    >
+      {composite ? <RegistryIcon size="md" {...props} /> : <EnterpriseIcon size="sm" {...props} />}
+    </Tooltip>
+  );
   return (
     <div aria-label="content_view_icon" className="svg-centered-container" style={style}>
       {count && <span className="composite-component-count">{count}</span>}
-      {composite ? <RegistryIcon size="md" {...props} /> : <EnterpriseIcon size="sm" {...props} />}
+      {cvIcon}
       <span>{description}</span>
     </div>
   );

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

@@ -2,14 +2,15 @@ import React from 'react';
 import { Label } from '@patternfly/react-core';
 
 const EnvironmentLabels = (environments) => {
-  const { environments: singleEnvironment } = environments || {};
+  const { environments: singleEnvironment, isDisabled } = environments || {};
   const { name } = singleEnvironment || {};
+  const labelColor = isDisabled ? 'grey' : 'purple';
   switch (environments) {
   case Array:
     return environments.map(env => (
       <React.Fragment key={env.id} style={{ marginBottom: '5px' }}>
         <Label
-          color="purple"
+          color={labelColor}
           isTruncated
         >{env.name}
         </Label>
@@ -18,7 +19,7 @@ const EnvironmentLabels = (environments) => {
   default:
     return (
       <React.Fragment>
-        <Label color="purple" isTruncated>
+        <Label color={labelColor} isTruncated>
           {name}
         </Label>
       </React.Fragment>

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

@@ -3,18 +3,20 @@ import { useSelector } from 'react-redux';
 import { STATUS } from 'foremanReact/constants';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
-import { FormGroup, Checkbox, TextContent } from '@patternfly/react-core';
+import { FormGroup, Checkbox, Radio, TextContent } from '@patternfly/react-core';
 import { selectEnvironmentPaths, selectEnvironmentPathsStatus } from './EnvironmentPathSelectors';
 import EnvironmentLabels from '../EnvironmentLabels';
 import './EnvironmentPaths.scss';
 import Loading from '../../../../components/Loading';
 
 const EnvironmentPaths = ({
-  userCheckedItems, setUserCheckedItems, promotedEnvironments, publishing, headerText, multiSelect,
+  userCheckedItems, setUserCheckedItems, promotedEnvironments,
+  publishing, headerText, multiSelect, isDisabled,
 }) => {
   const environmentPathResponse = useSelector(selectEnvironmentPaths);
   const environmentPathStatus = useSelector(selectEnvironmentPathsStatus);
   const environmentPathLoading = environmentPathStatus === STATUS.PENDING;
+  const CheckboxOrRadio = multiSelect ? Checkbox : Radio;
 
   const oncheckedChange = (checked, env) => {
     if (checked) {
@@ -38,7 +40,7 @@ const EnvironmentPaths = ({
     <>
       <TextContent>{headerText}</TextContent>
       <div>
-        {results.map((path, index) => {
+        {results?.map((path, index) => {
           const {
             environments,
           } = path || {};
@@ -47,16 +49,16 @@ const EnvironmentPaths = ({
               {index === 0 && <hr />}
               <FormGroup key={`fg-${index}`} isInline fieldId="environment-checkbox-group">
                 {environments.map(env =>
-                  (<Checkbox
+                  (<CheckboxOrRadio
                     isChecked={(publishing && env.library) ||
                     envCheckedInList(env, userCheckedItems) ||
                     envCheckedInList(env, promotedEnvironments)}
-                    isDisabled={(publishing && env.library)
+                    isDisabled={isDisabled || (publishing && env.library)
                     || envCheckedInList(env, promotedEnvironments)}
                     className="env-path__labels-with-pointer"
                     key={`${env.id}${index}`}
                     id={`${env.id}${index}`}
-                    label={<EnvironmentLabels environments={env} />}
+                    label={<EnvironmentLabels environments={env} isDisabled={isDisabled} />}
                     aria-label={env.label}
                     onChange={checked => oncheckedChange(checked, env)}
                   />))}
@@ -79,6 +81,7 @@ EnvironmentPaths.propTypes = {
   publishing: PropTypes.bool,
   headerText: PropTypes.string,
   multiSelect: PropTypes.bool,
+  isDisabled: PropTypes.bool,
 };
 
 EnvironmentPaths.defaultProps = {
@@ -86,5 +89,6 @@ EnvironmentPaths.defaultProps = {
   publishing: true,
   headerText: __('Select a lifecycle environment from the available promotion paths to promote new version.'),
   multiSelect: true,
+  isDisabled: false,
 };
 export default EnvironmentPaths;

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

@@ -6,12 +6,17 @@
   .env-path__labels-with-pointer {
     &:not(:last-child):after {
       content: '>';
-      margin-top: 3px;
+      margin-top: 0px;
+      margin-right: 0.5rem;
     }
 
     display: inline-flex;
     margin: 3px 1px;
     align-items: center;
+
+    input {
+      margin-top: 0px;
+    }
   }
 
   hr {