katello 4.6.2.1 → 4.7.0.rc1

data/webpack/components/extensions/HostDetails/Cards/__tests__/errataOverviewCard.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { render, renderWithRedux } from 'react-testing-lib-wrapper';
+import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-wrapper';
+
 import ErrataOverviewCard from '../ErrataOverviewCard';
 
 const baseHostDetails = {
@@ -8,6 +9,23 @@ const baseHostDetails = {
     uuid: '123',
   },
 };
+const baseFacetAttributes = {
+  errata_status: 0, // all up to date
+  content_facet_attributes: {
+    errata_counts: {
+      bugfix: 0,
+      enhancement: 0,
+      security: 0,
+      total: 0,
+      applicable: {
+        bugfix: 0,
+        enhancement: 0,
+        security: 0,
+        total: 0,
+      },
+    },
+  },
+};
 const renderOptions = {
   initialState: {
     // This is the API state that your tests depend on for their data
@@ -22,18 +40,11 @@ describe('Without errata', () => {
   test('shows zero counts when there are 0 installable errata', () => {
     const hostDetails = {
       ...baseHostDetails,
-      errata_status: 1,
-      content_facet_attributes: {
-        errata_counts: {
-          bugfix: 0,
-          enhancement: 0,
-          security: 0,
-          total: 0,
-        },
-      },
+      ...baseFacetAttributes,
+      errata_status: 2,
     };
     /* eslint-disable max-len */
-    const { queryByLabelText, getByLabelText } = render(<ErrataOverviewCard hostDetails={hostDetails} />);
+    const { queryByLabelText, getByLabelText } = renderWithRedux(<ErrataOverviewCard hostDetails={hostDetails} />, renderOptions);
     /* eslint-enable max-len */
     expect(queryByLabelText('errataChart')).not.toBeInTheDocument();
     expect(getByLabelText('0 total errata')).toBeInTheDocument();
@@ -42,18 +53,10 @@ describe('Without errata', () => {
     expect(getByLabelText('0 enhancements')).toBeInTheDocument();
   });
 
-  test('shows empty state when there are 0 errata', () => {
+  test('shows happy empty state when there are 0 errata', () => {
     const hostDetails = {
       ...baseHostDetails,
-      errata_status: 0,
-      content_facet_attributes: {
-        errata_counts: {
-          bugfix: 0,
-          enhancement: 0,
-          security: 0,
-          total: 0,
-        },
-      },
+      ...baseFacetAttributes,
     };
     /* eslint-disable max-len */
     const { queryByLabelText, getByText } = renderWithRedux(<ErrataOverviewCard hostDetails={hostDetails} />, renderOptions);
@@ -62,24 +65,29 @@ describe('Without errata', () => {
     expect(getByText('All errata up-to-date')).toBeInTheDocument();
   });
 
+  test('shows warning empty state when it has unknown errata status', () => {
+    const hostDetails = {
+      ...baseHostDetails,
+      ...baseFacetAttributes,
+      errata_status: 1,
+    };
+    const { queryByLabelText, getByText }
+      = renderWithRedux(<ErrataOverviewCard hostDetails={hostDetails} />, renderOptions);
+    expect(queryByLabelText('errataChart')).not.toBeInTheDocument();
+    expect(getByText('Unknown errata status')).toBeInTheDocument();
+  });
+
   test('does not show errata card when host not registered', () => {
     const hostDetails = {
       ...baseHostDetails,
-      content_facet_attributes: {
-        errata_counts: {
-          bugfix: 0,
-          enhancement: 0,
-          security: 0,
-          total: 0,
-        },
-      },
+      ...baseFacetAttributes,
       subscription_facet_attributes: undefined,
     };
     /* eslint-disable max-len */
-    const { queryByLabelText, queryByText } = render(<ErrataOverviewCard hostDetails={hostDetails} />);
+    const { queryByLabelText, queryByText } = renderWithRedux(<ErrataOverviewCard hostDetails={hostDetails} />, renderOptions);
     /* eslint-enable max-len */
     expect(queryByLabelText('errataChart')).not.toBeInTheDocument();
-    expect(queryByText('0 errata')).not.toBeInTheDocument();
+    expect(queryByText('No errata')).not.toBeInTheDocument();
   });
 });
 
@@ -87,22 +95,127 @@ describe('With errata', () => {
   test('shows links when there are errata', () => {
     const hostDetails = {
       ...baseHostDetails,
+      errata_status: 2,
+      content_facet_attributes: {
+        errata_counts: {
+          bugfix: 10,
+          enhancement: 20,
+          security: 30,
+          total: 60,
+          applicable: {
+            bugfix: 10,
+            enhancement: 20,
+            security: 30,
+            total: 60,
+          },
+        },
+      },
+    };
+    const { getByLabelText, container }
+      = renderWithRedux(<ErrataOverviewCard hostDetails={hostDetails} />, renderOptions);
+    expect(container.getElementsByClassName('erratachart')).toHaveLength(1);
+    expect(container.getElementsByClassName('erratalegend')).toHaveLength(1);
+
+    expect(getByLabelText('60 total errata')).toBeInTheDocument();
+    expect(getByLabelText('30 security advisories')).toBeInTheDocument();
+    expect(getByLabelText('20 enhancements')).toBeInTheDocument();
+    expect(getByLabelText('10 bug fixes')).toBeInTheDocument();
+  });
+
+  test('has cute little tooltips', async () => {
+    const hostDetails = {
+      ...baseHostDetails,
+      errata_status: 2,
       content_facet_attributes: {
         errata_counts: {
           bugfix: 10,
           enhancement: 20,
           security: 30,
           total: 60,
+          applicable: {
+            bugfix: 10,
+            enhancement: 20,
+            security: 30,
+            total: 60,
+          },
         },
       },
     };
-    const { getByLabelText, container } = render(<ErrataOverviewCard hostDetails={hostDetails} />);
+    const { getByText }
+      = renderWithRedux(<ErrataOverviewCard hostDetails={hostDetails} />, renderOptions);
+    // find the Applicable toggle button, then find the svg next to it
+    const applicableToggle = getByText('Applicable').parentElement.parentElement;
+    fireEvent.mouseEnter(applicableToggle);
+    // expect the tooltip to be visible
+    await patientlyWaitFor(() => expect(getByText('Applicable errata apply to at least one package installed on the host.')).toBeInTheDocument());
+  });
+
+  test('can toggle between applicable and installable with toggle group', () => {
+    const hostDetails = {
+      ...baseHostDetails,
+      errata_status: 2,
+      content_facet_attributes: {
+        errata_counts: {
+          bugfix: 10,
+          enhancement: 20,
+          security: 30,
+          total: 60,
+          applicable: {
+            bugfix: 11,
+            enhancement: 21,
+            security: 31,
+            total: 61,
+          },
+        },
+      },
+    };
+    const { getByLabelText, container, getByText }
+      = renderWithRedux(<ErrataOverviewCard hostDetails={hostDetails} />, renderOptions);
     expect(container.getElementsByClassName('erratachart')).toHaveLength(1);
     expect(container.getElementsByClassName('erratalegend')).toHaveLength(1);
 
+    expect(getByText('Applicable').parentElement).toHaveAttribute('aria-pressed', 'true');
+
+    expect(getByLabelText('61 total errata')).toBeInTheDocument();
+    expect(getByLabelText('31 security advisories')).toBeInTheDocument();
+    expect(getByLabelText('21 enhancements')).toBeInTheDocument();
+    expect(getByLabelText('11 bug fixes')).toBeInTheDocument();
+
+    fireEvent.click(getByText('Installable'));
+
     expect(getByLabelText('60 total errata')).toBeInTheDocument();
     expect(getByLabelText('30 security advisories')).toBeInTheDocument();
     expect(getByLabelText('20 enhancements')).toBeInTheDocument();
     expect(getByLabelText('10 bug fixes')).toBeInTheDocument();
   });
+  test('applicable view links to show=applicable; installable view links to show=installable', () => {
+    const hostDetails = {
+      ...baseHostDetails,
+      errata_status: 2,
+      content_facet_attributes: {
+        errata_counts: {
+          bugfix: 10,
+          enhancement: 20,
+          security: 30,
+          total: 60,
+          applicable: {
+            bugfix: 11,
+            enhancement: 21,
+            security: 31,
+            total: 61,
+          },
+        },
+      },
+    };
+    const { getByText, getByLabelText }
+      = renderWithRedux(<ErrataOverviewCard hostDetails={hostDetails} />, renderOptions);
+    expect(getByText('Applicable').parentElement).toHaveAttribute('aria-pressed', 'true');
+    expect(getByText('Installable').parentElement).toHaveAttribute('aria-pressed', 'false');
+
+    expect(getByLabelText('61 total errata').closest('a')).toHaveAttribute('href', '#/Content/errata?show=applicable');
+    fireEvent.click(getByText('Installable'));
+    expect(getByText('Applicable').parentElement).toHaveAttribute('aria-pressed', 'false');
+    expect(getByText('Installable').parentElement).toHaveAttribute('aria-pressed', 'true');
+    expect(getByLabelText('30 security advisories').closest('a')).toHaveAttribute('href', '#/Content/errata?type=security&show=installable');
+  });
 });

data/webpack/components/extensions/HostDetails/DetailsTabCards/RegistrationCard.js

@@ -25,7 +25,9 @@ export const RegisteredBy = ({ user, activationKeys }) => {
   return (
     <>
       <List isPlain>
-        <Text component={TextVariants.h4}>{activationKeys.length > 1 ? __('Activation keys') : __('Activation key')}</Text>
+        <Text component={TextVariants.h4} ouiaId="activation-key-text">
+          {activationKeys.length > 1 ? __('Activation keys') : __('Activation key')}
+        </Text>
         {activationKeys.map(key => (
           <ListItem key={key.id}>
             <a href={urlBuilder(`activation_keys/${key.id}`, '')}>{key.name}</a>

data/webpack/components/extensions/HostDetails/Tabs/ContentTab/constants.js

@@ -1,10 +1,11 @@
 import { translate as __ } from 'foremanReact/common/I18n';
 import { hideRepoSetsTab } from '../RepositorySetsTab/RepositorySetsTab';
+import { hideModuleStreamsTab } from '../ModuleStreamsTab/ModuleStreamsTab';
 
 const SECONDARY_TABS = [
   { key: 'packages', title: __('Packages') },
   { key: 'errata', title: __('Errata') },
-  { key: 'module-streams', title: __('Module streams') },
+  { key: 'module-streams', hideTab: hideModuleStreamsTab, title: __('Module streams') },
   { key: 'Repository sets', hideTab: hideRepoSetsTab, title: __('Repository sets') },
 ];
 

data/webpack/components/extensions/HostDetails/Tabs/ContentTab/index.js

@@ -16,6 +16,7 @@ const ContentTab = ({ location: { pathname } }) => {
   return (
     <>
       <Tabs
+        ouiaId="host-content-tabs"
         className="margin-0-24"
         onSelect={(evt, subTab) => hashHistory.push(subTab)}
         isSecondary

data/webpack/components/extensions/HostDetails/Tabs/ErrataTab/ErrataTab.js

@@ -1,8 +1,9 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useMemo } from 'react';
+import useDeepCompareEffect from 'use-deep-compare-effect';
 import { useSelector, useDispatch } from 'react-redux';
 import {
   Split, SplitItem, ActionList, ActionListItem, Dropdown,
-  DropdownItem, KebabToggle, Skeleton, Tooltip, ToggleGroup, ToggleGroupItem,
+  DropdownItem, KebabToggle, Skeleton, Tooltip, ToggleGroup,
   DropdownToggle, DropdownToggleAction,
 } from '@patternfly/react-core';
 import { TimesIcon, CheckIcon } from '@patternfly/react-icons';
@@ -16,6 +17,7 @@ import {
   Td,
   ExpandableRowContent,
 } from '@patternfly/react-table';
+import { isEqual } from 'lodash';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { selectAPIResponse } from 'foremanReact/redux/API/APISelectors';
 import IsoDate from 'foremanReact/components/common/dates/IsoDate';
@@ -24,7 +26,7 @@ import { propsToCamelCase } from 'foremanReact/common/helpers';
 import SelectableDropdown from '../../../../SelectableDropdown';
 import { useSet, useBulkSelect, useUrlParams, useTableSort } from '../../../../../components/Table/TableHooks';
 import TableWrapper from '../../../../../components/Table/TableWrapper';
-import { ErrataType, ErrataSeverity } from '../../../../../components/Errata';
+import { ErrataType, ErrataSeverity, ErrataToggleGroupItem } from '../../../../../components/Errata';
 import { getInstallableErrata, regenerateApplicability, applyViaKatelloAgent } from './HostErrataActions';
 import ErratumExpansionDetail from './ErratumExpansionDetail';
 import ErratumExpansionContents from './ErratumExpansionContents';
@@ -33,7 +35,7 @@ import { HOST_ERRATA_KEY, ERRATA_TYPES, ERRATA_SEVERITIES, TYPES_TO_PARAM, SEVER
 import { installErrata } from '../RemoteExecutionActions';
 import { errataInstallUrl } from '../customizedRexUrlHelpers';
 import './ErrataTab.scss';
-import hostIdNotReady from '../../HostDetailsActions';
+import hostIdNotReady, { getHostDetails } from '../../HostDetailsActions';
 import { defaultRemoteActionMethod,
   hasRequiredPermissions as can,
   missingRequiredPermissions as cannot,
@@ -41,6 +43,7 @@ import { defaultRemoteActionMethod,
   userPermissionsFromHostDetails } from '../../hostDetailsHelpers';
 import SortableColumnHeaders from '../../../../Table/components/SortableColumnHeaders';
 import { useRexJobPolling } from '../RemoteExecutionHooks';
+import { errataStatusContemplation, friendlyErrataStatus } from '../../../../Errata/errataHelpers';
 
 const recalculateApplicability = ['edit_hosts'];
 const invokeRexJobs = ['create_job_invocations'];
@@ -54,6 +57,7 @@ export const ErrataTab = () => {
     name: hostname,
     content_facet_attributes: contentFacetAttributes,
     errata_status: errataStatus,
+    errata_status_label: errataStatusLabel,
   } = hostDetails;
   const userPermissions = userPermissionsFromHostDetails({ hostDetails });
   const showRecalculate =
@@ -63,8 +67,8 @@ export const ErrataTab = () => {
     );
   const contentFacet = propsToCamelCase(contentFacetAttributes ?? {});
   const dispatch = useDispatch();
-  const toggleGroupStates = ['all', 'installable'];
-  const [ALL, INSTALLABLE] = toggleGroupStates;
+  const toggleGroupStates = ['applicable', 'installable'];
+  const [APPLICABLE, INSTALLABLE] = toggleGroupStates;
   const ERRATA_TYPE = __('Type');
   const ERRATA_SEVERITY = __('Severity');
   const [isBulkActionOpen, setIsBulkActionOpen] = useState(false);
@@ -82,19 +86,40 @@ export const ErrataTab = () => {
     = useState(PARAM_TO_FRIENDLY_NAME[initialType] ?? ERRATA_TYPE);
   const [errataSeveritySelected, setErrataSeveritySelected]
     = useState(PARAM_TO_FRIENDLY_NAME[initialSeverity] ?? ERRATA_SEVERITY);
-  const activeFilters = [errataTypeSelected, errataSeveritySelected];
-  const defaultFilters = [ERRATA_TYPE, ERRATA_SEVERITY];
+  const activeFilters = useMemo(() =>
+    [errataTypeSelected, errataSeveritySelected], [errataTypeSelected, errataSeveritySelected]);
+  const defaultFilters = useMemo(() =>
+    [ERRATA_TYPE, ERRATA_SEVERITY], [ERRATA_SEVERITY, ERRATA_TYPE]);
 
   const [isActionOpen, setIsActionOpen] = useState(false);
   const onActionToggle = () => {
     setIsActionOpen(prev => !prev);
   };
 
-  const allUpToDate = errataStatus === 0;
-  const emptyContentTitle = allUpToDate ? __('All errata up-to-date') : __('This host has errata that are applicable, but not installable.');
-  const emptyContentBody = allUpToDate ? __('No action is needed because there are no applicable errata for this host.') : __("You may want to check the host's content view and lifecycle environment.");
+  const { allUpToDate, neededErrata } = errataStatusContemplation(errataStatus);
   const emptySearchTitle = __('No matching errata found');
   const emptySearchBody = __('Try changing your search settings.');
+
+  let emptyContentTitle;
+  let emptyContentBody;
+  switch (friendlyErrataStatus(errataStatus)) {
+  case 'All up to date':
+    emptyContentTitle = __('All up to date');
+    emptyContentBody = __('No action is needed because there are no applicable errata for this host.');
+    break;
+  case 'Needed':
+    emptyContentTitle = __('This host has errata that are applicable, but not installable.');
+    emptyContentBody = __("You may want to check the host's content view and lifecycle environment.");
+    break;
+  case 'Unknown':
+    emptyContentTitle = __('Unknown errata status');
+    emptyContentBody = errataStatusLabel;
+    break;
+  default:
+    emptyContentTitle = emptySearchTitle;
+    emptyContentBody = emptySearchBody;
+  }
+
   const errorSearchTitle = __('Problem searching errata');
   const columnHeaders = [
     __('Errata'),
@@ -144,13 +169,13 @@ export const ErrataTab = () => {
       return getInstallableErrata(
         hostId,
         {
-          include_applicable: toggleGroupState === ALL,
+          include_applicable: toggleGroupState === APPLICABLE,
           ...apiSortParams,
           ...modifiedParams,
         },
       );
     },
-    [hostId, toggleGroupState, ALL, ERRATA_SEVERITY, ERRATA_TYPE,
+    [hostId, toggleGroupState, APPLICABLE, ERRATA_SEVERITY, ERRATA_TYPE,
       errataTypeSelected, errataSeveritySelected, apiSortParams],
   );
 
@@ -177,7 +202,7 @@ export const ErrataTab = () => {
   const {
     triggerJobStart: triggerBulkApply, lastCompletedJob: lastCompletedBulkApply,
     isPolling: isBulkApplyInProgress,
-  } = useRexJobPolling(installErrataAction);
+  } = useRexJobPolling(installErrataAction, getHostDetails({ hostname }));
 
   const installErratumAction = id => installErrata({
     hostname,
@@ -200,6 +225,24 @@ export const ErrataTab = () => {
     variant: 'checkbox',
   }), [isSelectable, isSelected, selectOne]);
 
+  // If the API results for total errata don't match hostDetails.contentFacet's
+  // stored errata counts, this probably means the stored errata counts have been
+  // updated and we should trigger a refresh of hostDetails.
+  useDeepCompareEffect(() => {
+    if (!metadata || !contentFacet) return;
+    const resultCount = metadata?.total;
+    // eslint-disable-next-line no-restricted-globals
+    if (isNaN(resultCount)) return;
+    const { search } = metadata;
+    const isFiltering = !isEqual(activeFilters, defaultFilters);
+    const errataTotal = contentFacet?.errataCounts?.total;
+    const shouldTrigger = (errataTotal !== resultCount && !isFiltering && !search);
+    if (shouldTrigger) {
+      dispatch(getHostDetails({ hostname })); // this will update the errata overview chart
+    }
+  }, [activeFilters, defaultFilters, metadata,
+    contentFacet.errataCounts?.total, contentFacet, dispatch, hostname]);
+
   if (!hostId) return <Skeleton />;
 
   const applyErratumViaRemoteExecution = id => triggerApply(id);
@@ -254,6 +297,7 @@ export const ErrataTab = () => {
   const dropdownKebabItems = [
     <DropdownItem
       aria-label="bulk_add"
+      ouiaId="bulk_add"
       key="bulk_add"
       component="button"
       onClick={recalculateErrata}
@@ -265,6 +309,7 @@ export const ErrataTab = () => {
   const dropdownItems = [
     <DropdownItem
       aria-label="apply_via_remote_execution"
+      ouiaId="apply_via_remote_execution"
       key="apply_via_remote_execution"
       component="button"
       onClick={applyViaRemoteExecution}
@@ -274,6 +319,7 @@ export const ErrataTab = () => {
     </DropdownItem>,
     <DropdownItem
       aria-label="apply_via_customized_remote_execution"
+      ouiaId="apply_via_customized_remote_execution"
       key="apply_via_customized_remote_execution"
       component="a"
       href={bulkCustomizedRexUrl()}
@@ -287,6 +333,7 @@ export const ErrataTab = () => {
     dropdownItems.unshift((
       <DropdownItem
         aria-label="apply_via_katello_agent"
+        ouiaId="apply_via_katello_agent"
         key="apply_via_katello_agent"
         component="button"
         onClick={applyByKatelloAgent}
@@ -318,9 +365,11 @@ export const ErrataTab = () => {
             <ActionListItem>
               <Dropdown
                 aria-label="errata_dropdown"
+                ouiaId="errata_dropdown"
                 toggle={
                   <DropdownToggle
                     aria-label="expand_errata_toggle"
+                    ouiaId="expand_errata_toggle"
                     splitButtonItems={[
                       <DropdownToggleAction key="action" aria-label="bulk_actions" onClick={apply}>
                         {__('Apply')}
@@ -339,6 +388,7 @@ export const ErrataTab = () => {
             {showRecalculate &&
             <ActionListItem>
               <Dropdown
+                ouiaId="bulk-actions-dropdown"
                 toggle={<KebabToggle aria-label="bulk_actions_kebab" onToggle={toggleBulkAction} />}
                 isOpen={isBulkActionOpen}
                 isPlain
@@ -382,17 +432,19 @@ export const ErrataTab = () => {
       {hostIsNonLibrary &&
         <SplitItem>
           <ToggleGroup aria-label="Installable Errata">
-            <ToggleGroupItem
-              text={__('All')}
-              buttonId="allToggle"
-              aria-label="Show All"
-              isSelected={toggleGroupState === ALL}
-              onChange={() => setToggleGroupState(ALL)}
+            <ErrataToggleGroupItem
+              text={__('Applicable')}
+              tooltipText={__('Applicable errata apply to at least one package installed on the host.')}
+              buttonId="applicableToggle"
+              aria-label="Show applicable errata"
+              isSelected={toggleGroupState === APPLICABLE}
+              onChange={() => setToggleGroupState(APPLICABLE)}
             />
-            <ToggleGroupItem
+            <ErrataToggleGroupItem
               text={__('Installable')}
+              tooltipText={__('Installable errata are applicable errata that are available in the host\'s content view and lifecycle environment.')}
               buttonId="installableToggle"
-              aria-label="Show Installable"
+              aria-label="Show installable errata"
               isSelected={toggleGroupState === INSTALLABLE}
               onChange={() => setToggleGroupState(INSTALLABLE)}
             />
@@ -443,10 +495,10 @@ export const ErrataTab = () => {
           displaySelectAllCheckbox={showActions}
           requestKey={HOST_ERRATA_KEY}
           alwaysShowActionButtons={false}
-          alwaysShowToggleGroup={hostIsNonLibrary}
+          alwaysShowToggleGroup={hostIsNonLibrary && neededErrata}
         >
           <Thead>
-            <Tr>
+            <Tr ouiaId="row-header">
               <Th key="expand-carat" />
               <Th key="select-all" />
               <SortableColumnHeaders
@@ -501,7 +553,7 @@ export const ErrataTab = () => {
 
               return (
                 <Tbody isExpanded={isExpanded} key={`${id}_${createdAt}`}>
-                  <Tr>
+                  <Tr ouiaId={`row-${rowIndex}`}>
                     <Td
                       expand={{
                         rowIndex,
@@ -547,7 +599,7 @@ export const ErrataTab = () => {
                       />
                     ) : null}
                   </Tr>
-                  <Tr key="child_row" isExpanded={isExpanded}>
+                  <Tr key="child_row" ouiaId="row-child" isExpanded={isExpanded}>
                     {isExpanded && (
                       <>
                         <Td colSpan={3}>