katello 4.16.3 → 4.17.0.rc1

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

@@ -6,14 +6,16 @@ import {
   CardHeader,
   CardTitle,
   CardBody,
-  Dropdown,
   ExpandableSection,
-  KebabToggle,
   Flex,
   FlexItem,
   GridItem,
-  DropdownItem,
 } from '@patternfly/react-core';
+import {
+  Dropdown,
+  KebabToggle,
+  DropdownItem,
+} from '@patternfly/react-core/deprecated';
 import { PlusCircleIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { propsToCamelCase } from 'foremanReact/common/helpers';

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

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

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

@@ -192,7 +192,7 @@ export const HostCollectionsModal = ({
               <Tr key={id} ouiaId={`row-${id}`}>
                 <Td
                   select={{
-                    disable: isDisabled,
+                    isDisabled,
                     isSelected: isSelected(id),
                     onSelect: (_event, selected) => selectOne(selected, id, hostCollection),
                     rowIndex,

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-wrapper';
+import { renderWithRedux, patientlyWaitFor, fireEvent, act, waitFor } from 'react-testing-lib-wrapper';
 import mockAvailableHostCollections from './availableHostCollections.fixtures.json';
 import mockRemovableHostCollections from './removableHostCollections.fixtures.json';
 import { REMOVABLE_HOST_COLLECTIONS_KEY } from '../HostCollectionsConstants';
-import { assertNockRequest, mockAutocomplete, nockInstance } from '../../../../../../test-utils/nockWrapper';
+import nock, { assertNockRequest, mockAutocomplete, nockInstance } from '../../../../../../test-utils/nockWrapper';
 import katelloApi, { foremanApi } from '../../../../../../services/api';
 import { HostCollectionsAddModal, HostCollectionsRemoveModal } from '../HostCollectionsModal';
 
@@ -44,6 +44,10 @@ describe('HostCollectionsAddModal', () => {
     const { results } = mockAvailableHostCollections;
     [firstHostCollection] = results;
   });
+  afterEach(() => {
+    nock.cleanAll(); // Removes all interceptors
+    nock.restore(); // Restores HTTP to normal behavior
+  });
 
   test('Calls API with available_for=host on page load', async (done) => {
     const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
@@ -65,7 +69,8 @@ describe('HostCollectionsAddModal', () => {
     await patientlyWaitFor(() =>
       expect(getAllByText(firstHostCollection.name)[0]).toBeInTheDocument());
     assertNockRequest(autocompleteScope);
-    assertNockRequest(scope, done); // Pass jest callback to confirm test is done
+    assertNockRequest(scope);
+    act(done);
   });
 
   test('Calls alterHostCollections with combined list of existing and new host collections', async (done) => {
@@ -107,6 +112,7 @@ describe('HostCollectionsAddModal', () => {
     assertNockRequest(autocompleteScope);
     assertNockRequest(scope);
     assertNockRequest(alterScope);
+    await waitFor(() => expect(hostDetailsScope.isDone()).toBe(true));
     assertNockRequest(hostDetailsScope, done);
   });
   test('Host collections whose host limit is exceeded are disabled', async (done) => {
@@ -136,7 +142,8 @@ describe('HostCollectionsAddModal', () => {
     expect(disabledCheckboxes).toHaveLength(maxedOutHostCollections.length);
 
     assertNockRequest(autocompleteScope);
-    assertNockRequest(scope, done); // Pass jest callback to confirm test is done
+    assertNockRequest(scope);
+    act(done); // Pass jest callback to confirm test is done
   });
 });
 
@@ -146,6 +153,10 @@ describe('HostCollectionsRemoveModal', () => {
     [firstHostCollection] = results;
   });
 
+  afterEach(() => {
+    nock.cleanAll(); // Removes all interceptors
+    nock.restore(); // Restores HTTP to normal behavior
+  });
   test('Calls API without available_for=host on page load', async (done) => {
     const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
 
@@ -168,7 +179,8 @@ describe('HostCollectionsRemoveModal', () => {
       expect(getAllByText(firstHostCollection.name)[0]).toBeInTheDocument());
     // Assert request was made and completed, see helper function
     assertNockRequest(autocompleteScope);
-    assertNockRequest(scope, done); // Pass jest callback to confirm test is done
+    assertNockRequest(scope);
+    act(done); // Pass jest callback to confirm test is done
   });
 
   test('Calls alterHostCollections with host collections being removed filtered out from the list', async (done) => {
@@ -204,16 +216,19 @@ describe('HostCollectionsRemoveModal', () => {
     await patientlyWaitFor(() =>
       expect(getAllByText(firstRemovableHostCollection.name)[0]).toBeInTheDocument());
     const checkbox = getByRole('checkbox', { name: 'Select row 0' });
-    fireEvent.click(checkbox);
+    await act(async () => {
+      fireEvent.click(checkbox);
+    });
     expect(getAllByText('1 selected')).toHaveLength(1);
     const removeButton = getByRole('button', { name: 'Remove' });
     expect(removeButton).toHaveAttribute('aria-disabled', 'false');
-    fireEvent.click(removeButton);
-
+    await act(async () => {
+      fireEvent.click(removeButton);
+    });
     assertNockRequest(autocompleteScope);
     assertNockRequest(scope);
     assertNockRequest(alterScope);
-    assertNockRequest(hostDetailsScope, done);
+    assertNockRequest(hostDetailsScope);
+    act(done);
   });
 });
-

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

@@ -20,6 +20,7 @@ import {
   Tooltip,
   Skeleton,
   CardExpandableContent,
+  Icon,
 } from '@patternfly/react-core';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
@@ -101,14 +102,16 @@ const SystemPurposeCard = ({ hostDetails, akDetails }) => {
                     enableFlip
                     isContentLeftAligned
                   >
-                    <OutlinedQuestionCircleIcon style={{ marginTop: '7px' }} color="gray" />
+                    <Icon color="gray">
+                      <OutlinedQuestionCircleIcon style={{ marginTop: '7px' }} />
+                    </Icon>
                   </Tooltip>
                 </FlexItem>
               </Flex>
             </FlexItem>
             {showEditButton && (
               <FlexItem>
-                <Button variant="link" isSmall ouiaId="syspurpose-edit-button" onClick={() => setEditing(val => !val)}>{__('Edit')}</Button>
+                <Button variant="link" size="sm" ouiaId="syspurpose-edit-button" onClick={() => setEditing(val => !val)}>{__('Edit')}</Button>
               </FlexItem>)
             }
           </Flex>

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

@@ -1,12 +1,12 @@
 .system-purpose-card-body {
   font-size: small;
-  .pf-c-label {
+  .pf-v5-c-label {
     font-size: smaller;
   }
 }
 
 #system-purpose-card {
-  .pf-c-card__header-toggle {
+  .pf-v5-c-card__header-toggle {
     margin-top: -2px;
   }
 }

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

@@ -11,6 +11,7 @@ import {
   FormSelect,
   FormSelectOption,
 } from '@patternfly/react-core';
+
 import { FormattedMessage } from 'react-intl';
 import { translate as __ } from 'foremanReact/common/I18n';
 import {
@@ -183,7 +184,7 @@ const SystemPurposeEditModal = ({
             name="role"
             ouiaId="role-select"
             value={selectedRole}
-            onChange={setSelectedRole}
+            onChange={(_event, val) => setSelectedRole(val)}
           >
             {roleOptions.map(option => (
               <FormSelectOption
@@ -200,7 +201,7 @@ const SystemPurposeEditModal = ({
             name="serviceLevel"
             ouiaId="service-level-select"
             value={selectedServiceLevel}
-            onChange={setSelectedServiceLevel}
+            onChange={(_event, val) => setSelectedServiceLevel(val)}
           >
             {serviceLevelOptions.map(option => (
               <FormSelectOption
@@ -217,7 +218,7 @@ const SystemPurposeEditModal = ({
             name="usage"
             ouiaId="usage-select"
             value={selectedUsage}
-            onChange={setSelectedUsage}
+            onChange={(_event, val) => setSelectedUsage(val)}
           >
             {usageOptions.map(option => (
               <FormSelectOption
@@ -234,7 +235,7 @@ const SystemPurposeEditModal = ({
             name="release_version"
             ouiaId="release-version-select"
             value={selectedReleaseVersion}
-            onChange={setSelectedReleaseVersion}
+            onChange={(_event, val) => setSelectedReleaseVersion(val)}
           >
             {releaseVersionOptions.map(option => (
               <FormSelectOption

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

@@ -63,7 +63,8 @@ test('shows system purpose details for a host', async (done) => {
   expect(getByText('8')).toBeInTheDocument();
 
   assertNockRequest(orgScope);
-  assertNockRequest(availableReleaseVersionsScope, done);
+  assertNockRequest(availableReleaseVersionsScope);
+  done();
 });
 
 test('shows system purpose details for an activation key', () => {
@@ -93,7 +94,8 @@ test('shows edit button for a user with edit_hosts permission', async (done) =>
   expect(queryByText('Edit')).toBeInTheDocument();
 
   assertNockRequest(orgScope);
-  assertNockRequest(availableReleaseVersionsScope, done);
+  assertNockRequest(availableReleaseVersionsScope);
+  done();
 });
 
 test('does not show edit button for a user without edit_hosts permission', (done) => {
@@ -118,6 +120,7 @@ test('does not show edit button for a user without edit_hosts permission', (done
   expect(queryByText('Edit')).not.toBeInTheDocument();
 
   assertNockRequest(orgScope);
-  assertNockRequest(availableReleaseVersionsScope, done);
+  assertNockRequest(availableReleaseVersionsScope);
+  done();
   act(done);
 });

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { propsToCamelCase } from 'foremanReact/common/helpers';
-import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-wrapper';
+import { renderWithRedux, patientlyWaitFor, fireEvent, act } from 'react-testing-lib-wrapper';
 import HOST_DETAILS from '../../../HostDetailsConstants';
 import SystemPurposeEditModal from '../SystemPurposeEditModal';
 import { assertNockRequest, nockInstance } from '../../../../../../test-utils/nockWrapper';
@@ -87,7 +87,8 @@ describe('SystemPurposeEditModal', () => {
     expect(getByText('8')).toBeInTheDocument();
 
     assertNockRequest(orgScope);
-    assertNockRequest(availableReleaseVersionsScope, done);
+    assertNockRequest(availableReleaseVersionsScope);
+    done();
   });
 
   test('Shows blank options as (unset)', () => {
@@ -159,8 +160,9 @@ describe('SystemPurposeEditModal', () => {
 
     // Save button should now be enabled
     expect(saveButton).toHaveAttribute('aria-disabled', 'false');
-    fireEvent.click(saveButton);
-
+    await act(async () => {
+      fireEvent.click(saveButton);
+    });
     await patientlyWaitFor(() => {
       expect(baseAttributes.closeModal).toHaveBeenCalled();
     });
@@ -168,7 +170,8 @@ describe('SystemPurposeEditModal', () => {
     [orgScope, availableReleaseVersionsScope, hostEditScope].forEach((scope) => {
       assertNockRequest(scope);
     });
-    assertNockRequest(hostDetailsScope, done);
+    assertNockRequest(hostDetailsScope);
+    done();
   });
   test('Calls API and changes syspurpose values for activation key', async (done) => {
     const orgScope = nockInstance
@@ -212,8 +215,9 @@ describe('SystemPurposeEditModal', () => {
 
     // Save button should now be enabled
     expect(saveButton).toHaveAttribute('aria-disabled', 'false');
-    fireEvent.click(saveButton);
-
+    await act(async () => {
+      fireEvent.click(saveButton);
+    });
     await patientlyWaitFor(() => {
       expect(baseAttributes.closeModal).toHaveBeenCalled();
     });
@@ -221,7 +225,8 @@ describe('SystemPurposeEditModal', () => {
     [orgScope, availableReleaseVersionsScope, akEditScope].forEach((scope) => {
       assertNockRequest(scope);
     });
-    assertNockRequest(akDetailsScope, done);
+    assertNockRequest(akDetailsScope);
+    done();
   });
   test('Retrieves available release versions for host', async (done) => {
     const orgScope = nockInstance
@@ -241,8 +246,9 @@ describe('SystemPurposeEditModal', () => {
       />, renderOptions());
 
     const releaseVersionDropdown = getByLabelText('Release version');
-    fireEvent.click(releaseVersionDropdown);
-
+    await act(async () => {
+      fireEvent.click(releaseVersionDropdown);
+    });
     await patientlyWaitFor(() => {
       expect(getByText('8')).toBeInTheDocument();
       expect(getByText('9')).toBeInTheDocument();
@@ -271,8 +277,9 @@ describe('SystemPurposeEditModal', () => {
       />, renderOptions(ACTIVATION_KEY));
 
     const releaseVersionDropdown = getByLabelText('Release version');
-    fireEvent.click(releaseVersionDropdown);
-
+    await act(async () => {
+      fireEvent.click(releaseVersionDropdown);
+    });
     await patientlyWaitFor(() => {
       expect(getByText('8')).toBeInTheDocument();
       expect(getByText('9')).toBeInTheDocument();

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,