katello 4.16.1 → 4.17.0.rc1

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

@@ -144,7 +144,7 @@ describe('With errata', () => {
     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;
+    const applicableToggle = getByText('Applicable').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());

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

@@ -39,7 +39,7 @@ HostDisks.defaultProps = {
   blockDevices: '',
 };
 
-const HwPropertiesCard = ({ isExpandedGlobal, hostDetails }) => {
+const HwPropertiesCard = ({ hostDetails }) => {
   if (hostIsNotRegistered({ hostDetails })) return null;
   const { facts } = hostDetails || {};
   const model = facts?.['virt::host_type'];
@@ -53,7 +53,6 @@ const HwPropertiesCard = ({ isExpandedGlobal, hostDetails }) => {
     <CardTemplate
       header={__('HW properties')}
       expandable
-      isExpandedGlobal={isExpandedGlobal}
       masonryLayout
     >
       <DescriptionList isHorizontal>
@@ -90,7 +89,6 @@ const HwPropertiesCard = ({ isExpandedGlobal, hostDetails }) => {
 };
 
 HwPropertiesCard.propTypes = {
-  isExpandedGlobal: PropTypes.bool,
   hostDetails: PropTypes.shape({
     facts: PropTypes.shape({
       model: PropTypes.string,
@@ -104,7 +102,6 @@ HwPropertiesCard.propTypes = {
 };
 
 HwPropertiesCard.defaultProps = {
-  isExpandedGlobal: false,
   hostDetails: {},
 };
 

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

@@ -23,7 +23,7 @@ const actionUrl = hostname => createJob({
   inputs: {},
 });
 
-const ImageModeCard = ({ isExpandedGlobal, hostDetails }) => {
+const ImageModeCard = ({ hostDetails }) => {
   const imageMode = hostDetails?.content_facet_attributes?.bootc_booted_image;
   if (!imageMode) return null;
   const getValueOrDash = value => (value || '—');
@@ -32,7 +32,6 @@ const ImageModeCard = ({ isExpandedGlobal, hostDetails }) => {
       header={cardHeader}
       expandable
       masonryLayout
-      isExpandedGlobal={isExpandedGlobal}
       ouiaId="image-mode"
     >
       <a href={actionUrl(hostDetails.name)}>{__('Modify via remote execution')}</a>
@@ -64,7 +63,6 @@ const ImageModeCard = ({ isExpandedGlobal, hostDetails }) => {
 };
 
 ImageModeCard.propTypes = {
-  isExpandedGlobal: PropTypes.bool,
   hostDetails: PropTypes.shape({
     name: PropTypes.string,
     content_facet_attributes: PropTypes.shape({
@@ -81,7 +79,6 @@ ImageModeCard.propTypes = {
 };
 
 ImageModeCard.defaultProps = {
-  isExpandedGlobal: false,
   hostDetails: {},
 };
 

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

@@ -4,7 +4,7 @@ import { translate as __ } from 'foremanReact/common/I18n';
 import { List, ListItem } from '@patternfly/react-core';
 import CardTemplate from 'foremanReact/components/HostDetails/Templates/CardItem/CardTemplate';
 
-const InstalledProductsCard = ({ isExpandedGlobal, hostDetails }) => {
+const InstalledProductsCard = ({ hostDetails }) => {
   const installedProducts = hostDetails?.subscription_facet_attributes?.installed_products;
   if (!installedProducts?.length) return null;
   return (
@@ -12,7 +12,6 @@ const InstalledProductsCard = ({ isExpandedGlobal, hostDetails }) => {
       header={__('Installed products')}
       expandable
       masonryLayout
-      isExpandedGlobal={isExpandedGlobal}
     >
       <List isPlain>
         {installedProducts.map(product => (
@@ -26,7 +25,6 @@ const InstalledProductsCard = ({ isExpandedGlobal, hostDetails }) => {
 };
 
 InstalledProductsCard.propTypes = {
-  isExpandedGlobal: PropTypes.bool,
   hostDetails: PropTypes.shape({
     subscription_facet_attributes: PropTypes.shape({
       installed_products: PropTypes.arrayOf(PropTypes.shape({
@@ -38,7 +36,6 @@ InstalledProductsCard.propTypes = {
 };
 
 InstalledProductsCard.defaultProps = {
-  isExpandedGlobal: false,
   hostDetails: {},
 };
 

data/webpack/components/extensions/HostDetails/DetailsTabCards/__test__/HwPropertiesCard.test.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { renderWithRedux } from 'react-testing-lib-wrapper';
+import { CardExpansionContext } from 'foremanReact/components/HostDetails/CardExpansionContext';
+import HwPropertiesCard from '../HwPropertiesCard';
+
+const hostDetails = {
+  subscription_facet_attributes: {
+    uuid: '1234567',
+    facts: {
+      'memory::memtotal': '24346164',
+      'cpu::core(s)_per_socket': '1',
+      'cpu::cpu(s)': '6',
+      'cpu::cpu_socket(s)': '6',
+      'virt::host_type': 'redhat, kvm',
+    },
+  },
+};
+const customRender = (ui, { providerProps, ...renderOptions }) => renderWithRedux(
+  <CardExpansionContext.Provider value={providerProps}>{ui}</CardExpansionContext.Provider>,
+  renderOptions,
+);
+
+describe('HwPropertiesCard', () => {
+  test('shows details when expanded', () => {
+    const providerProps = {
+      cardExpandStates: { 'HW properties': true },
+      dispatch: () => {},
+      registerCard: () => {},
+    };
+    const { getByText }
+      = customRender(<HwPropertiesCard hostDetails={hostDetails} />, { providerProps });
+
+    expect(getByText('HW properties')).toBeInTheDocument();
+    expect(getByText('Model')).toBeInTheDocument();
+  });
+
+  test('does not show card when host is not registered', () => {
+    const providerProps = {
+      cardExpandStates: { 'HW properties': true },
+      dispatch: () => {},
+      registerCard: () => {},
+    };
+    const { queryByText }
+      = customRender(<HwPropertiesCard hostDetails={{ name: 'not-registered' }} />, { providerProps });
+
+    const element = queryByText((_, e) => e.textContent === 'HW properties');
+    expect(element).not.toBeInTheDocument();
+  });
+
+  test('does not show details when not expanded', () => {
+    const providerProps = {
+      cardExpandStates: { 'HW properties': false },
+      dispatch: () => {},
+      registerCard: () => {},
+    };
+    const { queryByText, getByText }
+      = customRender(<HwPropertiesCard hostDetails={hostDetails} />, { providerProps });
+
+    expect(getByText('HW properties')).toBeInTheDocument();
+    const element = queryByText((_, e) => e.textContent === 'Model');
+    expect(element).not.toBeInTheDocument();
+  });
+});

data/webpack/components/extensions/HostDetails/DetailsTabCards/__test__/ImageModeCard.test.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { renderWithRedux } from 'react-testing-lib-wrapper';
+import { CardExpansionContext } from 'foremanReact/components/HostDetails/CardExpansionContext';
+import ImageModeCard from '../ImageModeCard';
+
+const hostDetails = {
+  name: 'test-host',
+  content_facet_attributes: {
+    bootc_booted_image: 'quay.io/centos-bootc/centos-bootc:42',
+    bootc_booted_digest: 'sha256:18ec8a272258b22bf9707b1963d72b8987110c8965c3d08b496fac0b1fb22159',
+    bootc_available_image: '',
+    bootc_available_digest: '',
+    bootc_staged_image: 'quay.io/fedora/fedora-bootc:40',
+    bootc_staged_digest: 'sha256:b2b888aa0a05f3278e4957cb658fd088e3579e214140dc88ca138f47144d6a05',
+    bootc_rollback_image: 'quay.io/centos-bootc/centos-bootc:stream9',
+    bootc_rollback_digest: 'sha256:893b636bbc5725378ce602f222f26c29f51334f93243ae8657d31391634eb024',
+  },
+};
+const customRender = (ui, { providerProps, ...renderOptions }) => renderWithRedux(
+  <CardExpansionContext.Provider value={providerProps}>{ui}</CardExpansionContext.Provider>,
+  renderOptions,
+);
+
+describe('image mode card', () => {
+  test('shows image mode details when expanded', () => {
+    const providerProps = {
+      cardExpandStates: { 'image-mode': true },
+      dispatch: () => {},
+      registerCard: () => {},
+    };
+    const { getByText }
+      = customRender(<ImageModeCard hostDetails={hostDetails} />, { providerProps });
+
+    expect(getByText('Image mode details')).toBeInTheDocument();
+
+    const rexLink = getByText('Modify via remote execution');
+    expect(rexLink).toBeInTheDocument();
+    expect(rexLink).toHaveAttribute(
+      'href',
+      '/job_invocations/new?feature=katello_bootc_action&search=name%20%5E%20(test-host)',
+    );
+
+    expect(getByText('Running image')).toBeInTheDocument();
+    expect(getByText('Running image digest')).toBeInTheDocument();
+    expect(getByText('Staged image')).toBeInTheDocument();
+    expect(getByText('Staged image digest')).toBeInTheDocument();
+    expect(getByText('Available image')).toBeInTheDocument();
+    expect(getByText('Available image digest')).toBeInTheDocument();
+    expect(getByText('Rollback image')).toBeInTheDocument();
+    expect(getByText('Rollback image digest')).toBeInTheDocument();
+
+    expect(getByText('quay.io/centos-bootc/centos-bootc:42')).toBeInTheDocument();
+    expect(getByText('sha256:18ec8a272258b22bf9707b1963d72b8987110c8965c3d08b496fac0b1fb22159')).toBeInTheDocument();
+    expect(getByText('quay.io/fedora/fedora-bootc:40')).toBeInTheDocument();
+    expect(getByText('sha256:b2b888aa0a05f3278e4957cb658fd088e3579e214140dc88ca138f47144d6a05')).toBeInTheDocument();
+    expect(getByText('quay.io/centos-bootc/centos-bootc:stream9')).toBeInTheDocument();
+    expect(getByText('sha256:893b636bbc5725378ce602f222f26c29f51334f93243ae8657d31391634eb024')).toBeInTheDocument();
+  });
+
+  test('does not show details when not expanded', () => {
+    const providerProps = {
+      cardExpandStates: { 'image-mode': false },
+      dispatch: () => {},
+      registerCard: () => {},
+    };
+    const { queryByText, getByText }
+      = customRender(<ImageModeCard hostDetails={hostDetails} />, { providerProps });
+
+    expect(getByText('Image mode details')).toBeInTheDocument();
+    const element = queryByText((_, e) => e.textContent === 'Running image');
+    expect(element).not.toBeInTheDocument();
+  });
+});

data/webpack/components/extensions/HostDetails/DetailsTabCards/__test__/InstalledProductsCard.test.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { renderWithRedux } from 'react-testing-lib-wrapper';
+import { CardExpansionContext } from 'foremanReact/components/HostDetails/CardExpansionContext';
+import InstalledProductsCard from '../InstalledProductsCard';
+
+const hostDetails = {
+  subscription_facet_attributes: {
+    installed_products: [
+      { productId: '479', productName: 'Red Hat Enterprise Linux for x86_64' },
+    ],
+  },
+};
+const customRender = (ui, { providerProps, ...renderOptions }) => renderWithRedux(
+  <CardExpansionContext.Provider value={providerProps}>{ui}</CardExpansionContext.Provider>,
+  renderOptions,
+);
+
+describe('Installed Products Card', () => {
+  test('shows details when expanded', () => {
+    const providerProps = {
+      cardExpandStates: { 'Installed products': true },
+      dispatch: () => {},
+      registerCard: () => {},
+    };
+    const { getByText }
+      = customRender(<InstalledProductsCard hostDetails={hostDetails} />, { providerProps });
+
+    expect(getByText('Installed products')).toBeInTheDocument();
+    expect(getByText('Red Hat Enterprise Linux for x86_64')).toBeInTheDocument();
+  });
+
+  test('does not show details when not expanded', () => {
+    const providerProps = {
+      cardExpandStates: { 'Installed products': false },
+      dispatch: () => {},
+      registerCard: () => {},
+    };
+    const { queryByText, getByText }
+      = customRender(<InstalledProductsCard hostDetails={hostDetails} />, { providerProps });
+
+    expect(getByText('Installed products')).toBeInTheDocument();
+    const element = queryByText((_, e) => e.textContent === 'Red Hat Enterprise Linux for x86_64');
+    expect(element).not.toBeInTheDocument();
+  });
+});

data/webpack/components/extensions/HostDetails/Tabs/DebsTab/DebInstallModal.js

@@ -1,5 +1,15 @@
 import React, { useState } from 'react';
-import { Modal, Button, Dropdown, DropdownItem, DropdownToggle, DropdownDirection, DropdownToggleAction } from '@patternfly/react-core';
+import {
+  Modal,
+  Button,
+} from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownToggle,
+  DropdownDirection,
+  DropdownToggleAction,
+} from '@patternfly/react-core/deprecated';
 import { CaretDownIcon, CaretUpIcon } from '@patternfly/react-icons';
 import { useSelector } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
@@ -213,7 +223,7 @@ const DebInstallModal = ({
               <Tr key={id} ouiaId={`row-${id}`}>
                 <Td
                   select={{
-                    disable: false,
+                    isDisabled: false,
                     isSelected: isSelected(id),
                     onSelect: (_event, selected) => selectOne(selected, id, pkg),
                     rowIndex,

data/webpack/components/extensions/HostDetails/Tabs/DebsTab/DebInstallModal.scss

@@ -1,3 +1,3 @@
-#deb-install-modal .pf-c-input-group input {
+#deb-install-modal .pf-v5-c-input-group input {
   min-width: 15em;
 }

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

@@ -3,6 +3,11 @@ import { useSelector, useDispatch } from 'react-redux';
 import {
   ActionList,
   ActionListItem,
+  Skeleton,
+  Split,
+  SplitItem,
+} from '@patternfly/react-core';
+import {
   Dropdown,
   DropdownItem,
   DropdownSeparator,
@@ -12,10 +17,7 @@ import {
   Select,
   SelectOption,
   SelectVariant,
-  Skeleton,
-  Split,
-  SplitItem,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import { TableVariant, Thead, Tbody, Tr, Th, Td, TableText } from '@patternfly/react-table';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
@@ -74,7 +76,7 @@ const UpdateVersionsSelect = ({
           variant={SelectVariant.single}
           aria-label="upgradable-version-select"
           ouiaId="upgradable-version-select"
-          onToggle={isOpen => toggleUpgradableVersionSelect(isOpen, rowIndex)}
+          onToggle={(_event, isOpen) => toggleUpgradableVersionSelect(isOpen, rowIndex)}
           onSelect={(event, selected) => {
             onUpgradableVersionSelect(event, selected, rowIndex, packageName);
           }}
@@ -502,7 +504,7 @@ export const DebsTab = () => {
         >
           <Thead>
             <Tr ouiaId="row-header">
-              <Th key="select-all" />
+              <Th key="select-all" aria-label="Select all table header" />
               <SortableColumnHeaders
                 columnHeaders={columnHeaders}
                 pfSortParams={pfSortParams}
@@ -537,12 +539,7 @@ export const DebsTab = () => {
                     isDisabled: actionInProgress,
                   },
                   {
-                    title: __('Upgrade via customized remote execution'),
-                    component: 'a',
-                    href: katelloPackageUpdateUrl({
-                      hostname,
-                      packageName,
-                    }),
+                    title: <a href={katelloPackageUpdateUrl({ hostname, packageName })}>{__('Upgrade via customized remote execution')}</a>,
                   },
                 );
               }
@@ -552,7 +549,7 @@ export const DebsTab = () => {
                   {showActions ? (
                     <Td
                       select={{
-                        disable: actionInProgress,
+                        isDisabled: actionInProgress,
                         isSelected: isSelected(id),
                         onSelect: (event, selected) => selectOne(selected, id, pkg),
                         rowIndex,

data/webpack/components/extensions/HostDetails/Tabs/DebsTab/DebsTab.scss

@@ -6,7 +6,7 @@
   margin: 16px 24px;
 }
 
-#style-select-id .pf-c-select button.pf-c-select__toggle {
+#style-select-id .pf-v5-c-select button.pf-v5-c-select__toggle {
   font-size: 1em;
   margin-left: -0.5rem;
 }

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

@@ -2,10 +2,22 @@ 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,
-  DropdownToggle, DropdownToggleAction,
+  Split,
+  SplitItem,
+  ActionList,
+  ActionListItem,
+  Skeleton,
+  Tooltip,
+  ToggleGroup,
+  ToggleGroupItem,
 } from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownItem,
+  KebabToggle,
+  DropdownToggle,
+  DropdownToggleAction,
+} from '@patternfly/react-core/deprecated';
 import { TimesIcon, CheckIcon } from '@patternfly/react-icons';
 import {
   TableVariant,
@@ -28,7 +40,7 @@ import { useSet, useBulkSelect, useUrlParams } from 'foremanReact/components/PF4
 import { useTableSort } from 'foremanReact/components/PF4/Helpers/useTableSort';
 import SelectableDropdown from '../../../../SelectableDropdown';
 import TableWrapper from '../../../../../components/Table/TableWrapper';
-import { ErrataType, ErrataSeverity, ErrataToggleGroupItem } from '../../../../../components/Errata';
+import { ErrataType, ErrataSeverity } from '../../../../../components/Errata';
 import { getInstallableErrata } from './HostErrataActions';
 import ErratumExpansionDetail from './ErratumExpansionDetail';
 import ErratumExpansionContents from './ErratumExpansionContents';
@@ -38,13 +50,17 @@ import { installErrata } from '../RemoteExecutionActions';
 import { errataInstallUrl } from '../customizedRexUrlHelpers';
 import './ErrataTab.scss';
 import hostIdNotReady, { getHostDetails } from '../../HostDetailsActions';
-import { hasRequiredPermissions as can,
+import {
+  hasRequiredPermissions as can,
   missingRequiredPermissions as cannot,
-  userPermissionsFromHostDetails } from '../../hostDetailsHelpers';
+  userPermissionsFromHostDetails,
+  hostIsImageMode,
+} from '../../hostDetailsHelpers';
 import SortableColumnHeaders from '../../../../Table/components/SortableColumnHeaders';
 import { useRexJobPolling } from '../RemoteExecutionHooks';
 import { errataStatusContemplation, friendlyErrataStatus } from '../../../../Errata/errataHelpers';
 import { runSubmanRepos } from '../../Cards/ContentViewDetailsCard/HostContentViewActions';
+import ImageModeHostAlert from '../../../Hosts/ImageModeHostAlert';
 
 const recalculateApplicability = ['edit_hosts'];
 const invokeRexJobs = ['create_job_invocations'];
@@ -250,7 +266,7 @@ export const ErrataTab = () => {
   const disabledReason = __('A remote execution job is in progress');
 
   const tdSelect = useCallback((errataId, rowIndex, rexJobInProgress) => ({
-    disable: rexJobInProgress || !isSelectable(errataId),
+    isDisabled: rexJobInProgress || !isSelectable(errataId),
     isSelected: isSelected(errataId),
     onSelect: (event, selected) => selectOne(selected, errataId),
     rowIndex,
@@ -388,7 +404,9 @@ export const ErrataTab = () => {
   ) : null;
 
   const hostIsNonLibrary = (
-    contentFacet?.contentViewDefault === false || contentFacet.lifecycleEnvironmentLibrary === false
+    (contentFacet?.contentViewDefault === false ||
+      contentFacet.lifecycleEnvironmentLibrary === false) &&
+    contentFacet.contentView.rolling === false
   );
   const toggleGroup = (
     <Split hasGutter>
@@ -417,23 +435,33 @@ export const ErrataTab = () => {
       {hostIsNonLibrary &&
         <SplitItem>
           <ToggleGroup aria-label="Installable Errata">
-            <ErrataToggleGroupItem
+            <ToggleGroupItem
               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)}
             />
-            <ErrataToggleGroupItem
+            <ToggleGroupItem
               text={__('Installable')}
-              tooltipText={__('Installable errata are applicable errata that are available in the host\'s assigned content view environments.')}
               buttonId="installableToggle"
               aria-label="Show installable errata"
               isSelected={toggleGroupState === INSTALLABLE}
               onChange={() => setToggleGroupState(INSTALLABLE)}
             />
           </ToggleGroup>
+          <Tooltip
+            content={__('Applicable errata apply to at least one package installed on the host.')}
+            position="top"
+            enableFlip
+            triggerRef={() => document.getElementById('applicableToggle')}
+          />
+          <Tooltip
+            content={__('Installable errata are applicable errata that are available in the host\'s assigned content view environments.')}
+            position="top"
+            enableFlip
+            triggerRef={() => document.getElementById('installableToggle')}
+          />
         </SplitItem>
       }
     </Split>
@@ -442,6 +470,7 @@ export const ErrataTab = () => {
   return (
     <div>
       <div id="errata-tab">
+        {hostIsImageMode({ hostDetails }) && <ImageModeHostAlert />}
         <TableWrapper
           {...{
             metadata,
@@ -485,14 +514,14 @@ export const ErrataTab = () => {
         >
           <Thead>
             <Tr ouiaId="row-header">
-              <Th key="expand-carat" />
-              <Th key="select-all" />
+              <Th key="expand-carat" aria-label="expand table header" />
+              <Th key="select-all" aria-label="Select all table header" />
               <SortableColumnHeaders
                 columnHeaders={columnHeaders}
                 pfSortParams={pfSortParams}
                 columnsToSortParams={COLUMNS_TO_SORT_PARAMS}
               />
-              <Th key="action-menu" />
+              <Th key="action-menu" aria-label="action menu table header" />
             </Tr>
           </Thead>
           <>
@@ -515,17 +544,13 @@ export const ErrataTab = () => {
                     isDisabled: actionInProgress,
                   },
                   {
-                    title: __('Apply via customized remote execution'),
-                    component: 'a',
-                    href: errataInstallUrl({ hostname, search: errataSearchQuery(errataId) }),
+                    title: <a href={errataInstallUrl({ hostname, search: errataSearchQuery(errataId) })}>{__('Apply via customized remote execution')}</a>,
                   },
                 ];
               } else {
                 rowActions = [
                   {
-                    title: __('Apply erratum'), // Incremental update
-                    component: 'a',
-                    href: urlBuilder(`errata/${id}/content-hosts`, ''),
+                    title: <a href={urlBuilder(`errata/${id}`, '')}>{__('View details')}</a>, // Incremental update
                   },
                 ];
               }

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

@@ -6,6 +6,6 @@
   margin: 16px 24px;
 }
 
-.pf-c-toggle-group__text {
+.pf-v5-c-toggle-group__text {
   color: black;
 }

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

@@ -2,21 +2,26 @@ import React, { useCallback, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
 import { translate as __ } from 'foremanReact/common/I18n';
-import { Skeleton,
+import {
+  Skeleton,
   Label,
   Button,
   Split,
   SplitItem,
   Checkbox,
-  Dropdown,
   Text,
   TextVariants,
+  Modal,
+  ModalVariant,
+  Icon,
+} from '@patternfly/react-core';
+import {
+  Dropdown,
   DropdownItem,
   KebabToggle,
   DropdownPosition,
   DropdownSeparator,
-  Modal,
-  ModalVariant } from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import PropTypes from 'prop-types';
 import { upperFirst, lowerCase } from 'lodash';
 import { TableText, TableVariant, Thead, Tbody, Tr, Td } from '@patternfly/react-table';
@@ -45,7 +50,9 @@ import {
   hasRequiredPermissions as can,
   missingRequiredPermissions as cannot,
   userPermissionsFromHostDetails,
+  hostIsImageMode,
 } from '../../hostDetailsHelpers';
+import ImageModeHostAlert from '../../../Hosts/ImageModeHostAlert';
 
 export const hideModuleStreamsTab = ({ hostDetails }) => !(hostDetails?.operatingsystem_family === 'Redhat' && Number(hostDetails?.operatingsystem_major > 7));
 
@@ -54,9 +61,9 @@ const EnabledIcon = ({ streamText, streamInstallStatus, upgradable }) => {
   case (streamInstallStatus?.length > 0 && streamText === 'disabled'):
     return <TableText wrapModifier="nowrap">{INSTALLED_STATE.INSTALLED}</TableText>;
   case (streamInstallStatus?.length > 0 && streamText === 'enabled' && upgradable !== true):
-    return <><CheckIcon color="green" /> {INSTALLED_STATE.UPTODATE}</>;
+    return <><Icon color="green" ><CheckIcon /></Icon>{INSTALLED_STATE.UPTODATE}</>;
   case (streamInstallStatus?.length > 0 && streamText === 'enabled' && upgradable):
-    return <><LongArrowAltUpIcon color="blue" /> {INSTALLED_STATE.UPGRADEABLE}</>;
+    return <><Icon color="blue"><LongArrowAltUpIcon /></Icon> {INSTALLED_STATE.UPGRADEABLE}</>;
   default:
     return <InactiveText text={INSTALLED_STATE.NOTINSTALLED} />;
   }
@@ -343,6 +350,7 @@ export const ModuleStreamsTab = () => {
   return (
     <div>
       <div id="modulestreams-tab">
+        {hostIsImageMode({ hostDetails }) && <ImageModeHostAlert />}
         <TableWrapper
           {...{
             metadata,
@@ -432,7 +440,7 @@ export const ModuleStreamsTab = () => {
                     id={`Checkbox${id}`}
                     label={__('Customize with Rex')}
                     isChecked={id === useCustomizedRex}
-                    onChange={checked => (checked ? setUseCustomizedRex(id) : setUseCustomizedRex(''))}
+                    onChange={(_event, checked) => (checked ? setUseCustomizedRex(id) : setUseCustomizedRex(''))}
                   />
                 </DropdownItem>,
                 <DropdownSeparator key={`separator-${id}`} ouiaId={`separator-${id}`} />,

data/webpack/components/extensions/HostDetails/Tabs/PackagesTab/PackageInstallModal.js

@@ -1,5 +1,15 @@
 import React, { useState } from 'react';
-import { Modal, Button, Dropdown, DropdownItem, DropdownToggle, DropdownDirection, DropdownToggleAction } from '@patternfly/react-core';
+import {
+  Modal,
+  Button,
+} from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownToggle,
+  DropdownDirection,
+  DropdownToggleAction,
+} from '@patternfly/react-core/deprecated';
 import { CaretDownIcon, CaretUpIcon } from '@patternfly/react-icons';
 import { useSelector } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
@@ -198,7 +208,7 @@ const PackageInstallModal = ({
           <Tr ouiaId="row-header">
             {columnHeaders.map(col =>
               <Th key={col}>{col}</Th>)}
-            <Th />
+            <Th aria-label="action menu header" />
           </Tr>
         </Thead>
         <Tbody>
@@ -213,7 +223,7 @@ const PackageInstallModal = ({
               <Tr key={id} ouiaId={`row-${id}`}>
                 <Td
                   select={{
-                    disable: false,
+                    isDisabled: false,
                     isSelected: isSelected(id),
                     onSelect: (_event, selected) => selectOne(selected, id, pkg),
                     rowIndex,