katello 4.6.2.1 → 4.7.0.rc1

data/webpack/components/extensions/HostDetails/Cards/ErrataOverviewCard.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   Card,
   CardHeader,
@@ -7,24 +7,29 @@ import {
   Flex,
   FlexItem,
   GridItem,
+  ToggleGroup,
 } from '@patternfly/react-core';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { propsToCamelCase } from 'foremanReact/common/helpers';
 import PropTypes from 'prop-types';
 import { ChartPie } from '@patternfly/react-charts';
-import { ErrataMapper } from '../../../../components/Errata';
+import { ErrataMapper, ErrataToggleGroupItem } from '../../../../components/Errata';
 import { hostIsRegistered } from '../hostDetailsHelpers';
 import { TranslatedAnchor } from '../../../Table/components/TranslatedPlural';
 import EmptyStateMessage from '../../../Table/EmptyStateMessage';
 import './ErrataOverviewCard.scss';
+import { errataStatusContemplation } from '../../../Errata/errataHelpers';
 
 function HostInstallableErrata({
-  id, errataCounts, errataStatus,
+  id, errataCounts, errataStatus, errataCategory, errataStatusLabel,
 }) {
-  const errataTotal = errataCounts.total;
-  const errataSecurity = errataCounts.security;
-  const errataBug = errataCounts.bugfix;
-  const errataEnhance = errataCounts.enhancement;
+  const counts = errataCategory === 'applicable' ? errataCounts.applicable : errataCounts;
+  const errataTotal = counts.total;
+  const errataSecurity = counts.security;
+  const errataBug = counts.bugfix;
+  const errataEnhance = counts.enhancement;
+  const { neededErrata, allUpToDate, otherErrataStatus } = errataStatusContemplation(errataStatus);
   const chartData = [{
     w: 'security advisories', x: 'security', y: errataSecurity, z: errataTotal,
   }, {
@@ -33,74 +38,115 @@ function HostInstallableErrata({
     w: 'enhancements', x: 'enhancement', y: errataEnhance, z: errataTotal,
   }];
   return (
-    <GridItem rowSpan={1} md={6} lg={4} xl2={3} >
-      <Card isHoverable>
-        <CardHeader>
-          <CardTitle>{__('Installable errata')}</CardTitle>
-        </CardHeader>
-        <CardBody>
-          {errataStatus === 0 &&
-            <EmptyStateMessage
-              title={__('All errata up-to-date')}
-              body={__('No action required')}
-              happy
+    <CardBody>
+      {allUpToDate &&
+        <EmptyStateMessage
+          title={__('All errata up-to-date')}
+          body={__('No action required')}
+          happy
+        />
+      }
+      {otherErrataStatus &&
+        <EmptyStateMessage
+          title={null}
+          body={errataStatusLabel}
+          customIcon={ExclamationTriangleIcon}
+          secondaryActionTitle={__('Enable repository sets')}
+          secondaryActionLink="#/Content/Repository%20sets?show=all"
+          showSecondaryAction
+        />
+      }
+      {neededErrata &&
+        <Flex direction="column">
+          <FlexItem>
+            <TranslatedAnchor
+              id="errata-card-total-count"
+              href={`#/Content/errata?show=${errataCategory}`}
+              count={errataTotal}
+              plural="errata"
+              singular="erratum"
+              ariaLabel={`${errataTotal} total errata`}
             />
-          }
-          {errataStatus !== 0 &&
-            <Flex direction="column">
-              <FlexItem>
-                <TranslatedAnchor
-                  id="errata-card-total-count"
-                  href="#/Content/errata"
-                  count={errataTotal}
-                  plural="errata"
-                  singular="erratum"
-                  ariaLabel={`${errataTotal} total errata`}
+          </FlexItem>
+          <Flex flexWrap={{ xl: 'nowrap' }} direction="row" alignItems={{ default: 'alignItemsCenter' }}>
+            <div className="piechart-overflow" style={{ overflow: 'visible', minWidth: '140px', maxHeight: '155px' }}>
+              <div className="erratachart" style={{ minWidth: '300px', minHeight: '300px' }}>
+                <ChartPie
+                  ariaDesc="errataChart"
+                  data={chartData}
+                  constrainToVisibleArea
+                  labels={({ datum }) => `${datum.y} ${datum.w}`}
+                  padding={{
+                    bottom: 20,
+                    left: 20,
+                    right: 140,
+                    top: 20,
+                  }}
+                  width={250}
+                  height={130}
                 />
+              </div>
+            </div>
+            <div className="erratalegend" style={{ minWidth: '140px' }}>
+              <FlexItem>
+                <ErrataMapper data={chartData} id={id} errataCategory={errataCategory} />
               </FlexItem>
-              <Flex flexWrap={{ xl: 'nowrap' }} direction="row" alignItems={{ default: 'alignItemsCenter' }}>
-                <div className="piechart-overflow" style={{ overflow: 'visible', minWidth: '140px', maxHeight: '155px' }}>
-                  <div className="erratachart" style={{ minWidth: '300px', minHeight: '300px' }}>
-                    <ChartPie
-                      ariaDesc="errataChart"
-                      data={chartData}
-                      constrainToVisibleArea
-                      labels={({ datum }) => `${datum.y} ${datum.w}`}
-                      padding={{
-                        bottom: 20,
-                        left: 20,
-                        right: 140,
-                        top: 20,
-                      }}
-                      width={250}
-                      height={130}
-                    />
-                  </div>
-                </div>
-                <div className="erratalegend" style={{ minWidth: '140px' }}>
-                  <FlexItem>
-                    <ErrataMapper data={chartData} id={id} />
-                  </FlexItem>
-                </div>
-              </Flex>
-            </Flex>
-          }
-        </CardBody>
-      </Card>
-    </GridItem>
+            </div>
+          </Flex>
+        </Flex>
+      }
+    </CardBody>
   );
 }
 
 const ErrataOverviewCard = ({ hostDetails }) => {
-  if (hostIsRegistered({ hostDetails }) && hostDetails.content_facet_attributes) {
-    const { id: hostId, errata_status: errataStatus } = hostDetails;
-    return (<HostInstallableErrata
-      {...propsToCamelCase(hostDetails.content_facet_attributes)}
-      id={hostId}
-      errataStatus={errataStatus}
-    />);
-  }
-  return null;
+  const hostPopulated = (hostIsRegistered({ hostDetails }) &&
+    !!hostDetails.content_facet_attributes);
+
+  const [errataCategory, setErrataCategory] = useState('applicable');
+  if (!hostPopulated) return null;
+  const {
+    id: hostId,
+    errata_status: errataStatus,
+    errata_status_label: errataStatusLabel,
+  } = hostDetails;
+  const { neededErrata } = errataStatusContemplation(errataStatus);
+  return (
+    <GridItem rowSpan={1} md={6} lg={4} xl2={3} >
+      <Card ouiaId="errata-card">
+        <CardHeader>
+          <Flex spaceItems={{ default: 'spaceItemsXl' }}>
+            <CardTitle>{__('Errata')}</CardTitle>
+            {neededErrata &&
+              <ToggleGroup isCompact>
+                <ErrataToggleGroupItem
+                  text={__('Applicable')}
+                  aria-label="Show applicable errata chart"
+                  tooltipText={__('Applicable errata apply to at least one package installed on the host.')}
+                  isSelected={errataCategory === 'applicable'}
+                  onChange={selected => selected && setErrataCategory('applicable')}
+                />
+                <ErrataToggleGroupItem
+                  text={__('Installable')}
+                  aria-label="Show installable errata chart"
+                  tooltipText={__('Installable errata are applicable errata that are available in the host\'s content view and lifecycle environment.')}
+                  isSelected={errataCategory === 'installable'}
+                  onChange={selected => selected && setErrataCategory('installable')}
+                />
+              </ToggleGroup>
+            }
+          </Flex>
+        </CardHeader>
+        <HostInstallableErrata
+          {...propsToCamelCase(hostDetails.content_facet_attributes)}
+          id={hostId}
+          errataCategory={errataCategory}
+          errataStatus={errataStatus}
+          errataStatusLabel={errataStatusLabel}
+        />
+      </Card>
+    </GridItem>
+  );
 };
 
 HostInstallableErrata.propTypes = {
@@ -110,12 +156,21 @@ HostInstallableErrata.propTypes = {
     enhancement: PropTypes.number,
     security: PropTypes.number,
     total: PropTypes.number,
+    applicable: PropTypes.shape({
+      bugfix: PropTypes.number,
+      enhancement: PropTypes.number,
+      security: PropTypes.number,
+    }),
   }).isRequired,
   errataStatus: PropTypes.number,
+  errataStatusLabel: PropTypes.string,
+  errataCategory: PropTypes.string,
 };
 
 HostInstallableErrata.defaultProps = {
   errataStatus: undefined,
+  errataStatusLabel: __('Unknown errata status'),
+  errataCategory: 'applicable',
 };
 
 ErrataOverviewCard.propTypes = {
@@ -123,6 +178,7 @@ ErrataOverviewCard.propTypes = {
     content_facet_attributes: PropTypes.shape({}),
     id: PropTypes.number,
     errata_status: PropTypes.number,
+    errata_status_label: PropTypes.string,
   }),
 };
 

data/webpack/components/extensions/HostDetails/Cards/ErrataOverviewCard.scss

@@ -1,3 +1,8 @@
 .pf-c-empty-state {
   margin-top: 0;
+}
+.piechart-overflow {
+  margin-right: -20px;
+  position: relative;
+  left: -30px;
 }

data/webpack/components/extensions/HostDetails/Cards/HostCollectionsCard/HostCollectionsCard.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import {
   Badge,
+  Button,
   Card,
   CardHeader,
   CardTitle,
@@ -13,12 +14,15 @@ import {
   GridItem,
   DropdownItem,
 } from '@patternfly/react-core';
+import { PlusCircleIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { propsToCamelCase } from 'foremanReact/common/helpers';
 import PropTypes from 'prop-types';
 import { useSet } from '../../../../Table/TableHooks';
 import { HostCollectionsAddModal, HostCollectionsRemoveModal } from './HostCollectionsModal';
 import { hasRequiredPermissions, hostIsRegistered, userPermissionsFromHostDetails } from '../../hostDetailsHelpers';
+import EmptyStateMessage from '../../../../Table/EmptyStateMessage';
+import './HostCollectionsCard.scss';
 
 const requiredPermissions = ['edit_hosts', 'view_host_collections'];
 
@@ -49,6 +53,7 @@ const HostCollectionsDetails = ({
   const dropdownItems = [
     <DropdownItem
       aria-label="add_host_to_collections"
+      ouiaId="add_host_to_collections"
       key="add_host_to_collections"
       component="button"
       onClick={openAddHostCollectionsModal}
@@ -57,6 +62,7 @@ const HostCollectionsDetails = ({
     </DropdownItem>,
     <DropdownItem
       aria-label="remove_host_from_collections"
+      ouiaId="remove_host_from_collections"
       key="remove_host_from_collections"
       component="button"
       isDisabled={!hostCollections.length}
@@ -66,9 +72,19 @@ const HostCollectionsDetails = ({
     </DropdownItem>,
   ];
 
+  const primaryActionButton =
+    (
+      <Button
+        ouiaId="add-to-a-host-collection-button"
+        onClick={openAddHostCollectionsModal}
+        variant="secondary"
+        aria-label="add_to_a_host_collection"
+      > {__('Add to a host collection')}
+      </Button>);
+
   return (
     <GridItem rowSpan={1} md={6} lg={4} xl2={3}>
-      <Card isHoverable>
+      <Card ouiaId="host-collections-card">
         <CardHeader>
           <Flex
             alignItems={{ default: 'alignItemsCenter' }}
@@ -88,10 +104,11 @@ const HostCollectionsDetails = ({
                 </FlexItem>
               </Flex>
             </FlexItem>
-            {showKebab && (
+            {showKebab && hostCollections?.length > 0 && (
               <FlexItem>
                 <Dropdown
                   toggle={<KebabToggle aria-label="host_collections_bulk_actions" onToggle={toggleBulkAction} />}
+                  ouiaId="host-collections-bulk-actions-dropdown"
                   isOpen={isDropdownOpen}
                   isPlain
                   position="right"
@@ -101,7 +118,16 @@ const HostCollectionsDetails = ({
             }
           </Flex>
         </CardHeader>
-        <CardBody>
+        <CardBody className={`host-collection-card-body${hostCollections?.length === 0 ? ' empty' : ''}`}>
+          {hostCollections?.length === 0 &&
+            <EmptyStateMessage
+              title={__('No host collections yet')}
+              body={__('To get started, add this host to a host collection.')}
+              customIcon={PlusCircleIcon}
+              showPrimaryAction
+              primaryActionButton={primaryActionButton}
+            />
+          }
           {hostCollections?.map((hostCollection) => {
             const {
               id, name, description, maxHosts, unlimitedHosts, totalHosts,
@@ -130,7 +156,7 @@ const HostCollectionsDetails = ({
                     </div>
                   </ExpandableSection>
                 </FlexItem>
-                <FlexItem component="span">
+                <FlexItem component="span" spacer={{ default: 'spacerXl' }}>
                   {totalHosts}/{unlimitedHosts ? 'unlimited' : maxHosts}
                 </FlexItem>
               </Flex>

data/webpack/components/extensions/HostDetails/Cards/HostCollectionsCard/HostCollectionsCard.scss

@@ -0,0 +1,23 @@
+.host-collection-card-body {
+  .pf-l-bullseye {
+    position: relative;
+    top: -20px;
+  }
+  .pf-c-empty-state__icon {
+    font-size: 2em;
+  }
+  .pf-m-lg {
+    margin: -20px;
+  }
+  .pf-c-empty-state__body {
+    font-size: smaller;
+    margin-top: 1.4em;
+    margin-bottom: 1em;
+  }
+  .pf-m-secondary {
+    margin-top: 5px;
+  }
+}
+.host-collection-card-body.empty {
+  padding-bottom: 0;
+}

data/webpack/components/extensions/HostDetails/Cards/HostCollectionsCard/HostCollectionsModal.js

@@ -120,10 +120,10 @@ export const HostCollectionsModal = ({
   };
 
   const modalActions = ([
-    <Button key="add" variant="primary" onClick={handleModalAction} isDisabled={!selectedCount}>
+    <Button key="add" ouiaId="add-button" variant="primary" onClick={handleModalAction} isDisabled={!selectedCount}>
       {adding ? __('Add') : __('Remove')}
     </Button>,
-    <Button key="cancel" variant="link" onClick={handleModalCancel}>
+    <Button key="cancel" ouiaId="cancel-button" variant="link" onClick={handleModalCancel}>
       {__('Cancel')}
     </Button>,
   ]);
@@ -136,6 +136,7 @@ export const HostCollectionsModal = ({
       position="top"
       actions={modalActions}
       id={adding ? 'add-host-to-host-collections-modal' : 'remove-host-from-host-collections-modal'}
+      ouiaId="host-collections-modal"
     >
       <FormattedMessage
         className="host-collections-modal-blurb"
@@ -175,7 +176,7 @@ export const HostCollectionsModal = ({
         requestKey={adding ? AVAILABLE_HOST_COLLECTIONS_KEY : REMOVABLE_HOST_COLLECTIONS_KEY}
       >
         <Thead>
-          <Tr>
+          <Tr ouiaId="row-header">
             {columnHeaders.map(col =>
               <Th key={col}>{col}</Th>)}
             <Th />
@@ -188,7 +189,7 @@ export const HostCollectionsModal = ({
             } = propsToCamelCase(hostCollection);
             const isDisabled = (adding && hostLimitExceeded(hostCollection));
             return (
-              <Tr key={id}>
+              <Tr key={id} ouiaId={`row-${id}`}>
                 <Td
                   select={{
                     disable: isDisabled,

data/webpack/components/extensions/HostDetails/Cards/HostCollectionsCard/__tests__/hostCollectionsCard.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { render, fireEvent } from 'react-testing-lib-wrapper';
+import { render, fireEvent, renderWithRedux } from 'react-testing-lib-wrapper';
+
 import HostCollectionsCard from '../HostCollectionsCard';
 
 const hostDetails = {
@@ -41,6 +42,17 @@ const emptyHostDetails = {
   },
 };
 
+const renderOptions = {
+  initialState: {
+    // This is the API state that your tests depend on for their data
+    // You can cross reference the needed useSelectors from your tested components
+    // with the data found within the redux chrome add-on to help determine this fixture data.
+    katello: {
+      hostDetails: {},
+    },
+  },
+};
+
 jest.mock('../../../hostDetailsHelpers', () => ({
   ...jest.requireActual('../../../hostDetailsHelpers'),
   userPermissionsFromHostDetails: () => ({
@@ -59,9 +71,15 @@ test('shows host collections and host limits when present', () => {
 });
 
 test('shows empty card when no host collections present', () => {
-  const { queryByText } = render(<HostCollectionsCard hostDetails={emptyHostDetails} />);
+  const {
+    queryByText,
+    getByText,
+    queryByLabelText,
+  } = renderWithRedux(<HostCollectionsCard hostDetails={emptyHostDetails} />, renderOptions);
   expect(queryByText('Host collections')).toBeInTheDocument();
   expect(queryByText('Jturel hosts')).not.toBeInTheDocument();
+  expect(getByText('No host collections yet')).toBeInTheDocument();
+  expect(queryByLabelText('add_to_a_host_collection')).toBeInTheDocument();
 });
 
 test('expands to show description', () => {
@@ -98,15 +116,12 @@ test('shows add and remove options in kebab', () => {
   expect(remove).toHaveAttribute('aria-disabled', 'false');
 });
 
-test('remove is disabled when no host collections present', () => {
-  const { queryByLabelText } = render(<HostCollectionsCard hostDetails={emptyHostDetails} />);
+test('kebab is not displayed when no host collections present', () => {
+  const {
+    queryByLabelText,
+  } = renderWithRedux(<HostCollectionsCard hostDetails={emptyHostDetails} />, renderOptions);
   const kebab = queryByLabelText('host_collections_bulk_actions');
-  expect(kebab).toBeInTheDocument();
-  fireEvent.click(kebab);
-
-  const remove = queryByLabelText('remove_host_from_collections');
-  expect(remove).toBeInTheDocument();
-  expect(remove).toHaveAttribute('aria-disabled', 'true');
+  expect(kebab).not.toBeInTheDocument();
 });
 
 test('does not show card when host not registered', () => {

data/webpack/components/extensions/HostDetails/Cards/SystemPurposeCard/SystemPurposeCard.js

@@ -50,7 +50,7 @@ const SystemPurposeCard = ({ hostDetails }) => {
   if (!hostDetails?.id) {
     return (
       <GridItem rowSpan={1} md={6} lg={4} xl2={3}>
-        <Card isHoverable ouiaId="system-purpose-card">
+        <Card ouiaId="system-purpose-card">
           <Skeleton />
         </Card>
       </GridItem>
@@ -61,7 +61,7 @@ const SystemPurposeCard = ({ hostDetails }) => {
 
   return (
     <GridItem rowSpan={1} md={6} lg={4} xl2={3}>
-      <Card isHoverable ouiaId="system-purpose-card">
+      <Card ouiaId="system-purpose-card">
         <CardHeader>
           <Flex
             alignItems={{ default: 'alignItemsCenter' }}
@@ -78,7 +78,7 @@ const SystemPurposeCard = ({ hostDetails }) => {
                 </FlexItem>
                 <FlexItem>
                   <Tooltip
-                    content={__('System purpose allows you to set the system\'s intended use on your network and improves the reporting of usage in Subscription Watch.')}
+                    content={__('System purpose enables you to set the system\'s intended use on your network and improves reporting accuracy in the Subscriptions service of the Red Hat Hybrid Cloud Console.')}
                     position="top"
                     enableFlip
                     isContentLeftAligned

data/webpack/components/extensions/HostDetails/Cards/SystemPurposeCard/SystemPurposeEditModal.js

@@ -175,6 +175,7 @@ const SystemPurposeEditModal = ({
       position="top"
       actions={modalActions}
       id="syspurpose-edit-modal"
+      ouiaId="syspurpose-edit-modal"
     >
       <FormattedMessage
         className="syspurpose-edit-modal-blurb"
@@ -189,6 +190,7 @@ const SystemPurposeEditModal = ({
           <FormSelect
             id="role"
             name="role"
+            ouiaId="role-select"
             value={selectedRole}
             onChange={setSelectedRole}
           >
@@ -205,6 +207,7 @@ const SystemPurposeEditModal = ({
           <FormSelect
             id="serviceLevel"
             name="serviceLevel"
+            ouiaId="service-level-select"
             value={selectedServiceLevel}
             onChange={setSelectedServiceLevel}
           >
@@ -221,6 +224,7 @@ const SystemPurposeEditModal = ({
           <FormSelect
             id="usage"
             name="usage"
+            ouiaId="usage-select"
             value={selectedUsage}
             onChange={setSelectedUsage}
           >
@@ -237,6 +241,7 @@ const SystemPurposeEditModal = ({
           <FormSelect
             id="release_version"
             name="release_version"
+            ouiaId="release-version-select"
             value={selectedReleaseVersion}
             onChange={setSelectedReleaseVersion}
           >
@@ -256,6 +261,7 @@ const SystemPurposeEditModal = ({
           <Select
             variant={SelectVariant.typeaheadMulti}
             aria-label="syspurpose-addons"
+            ouiaId="syspurpose-addons-select"
             onToggle={toggleAddonSelect}
             onSelect={onAddonSelect}
             selections={selectedAddons}