@openshift-assisted/ui-lib 2.16.4-cim → 2.16.5-cim

package/lib/ocm/components/clusterWizard/wizardTransition.ts

@@ -31,8 +31,7 @@ export type ClusterWizardStepsType =
   | 'custom-manifests'
   | 'credentials-download'
   | 'disconnected-basic'
-  | 'disconnected-review'
-  | 'disconnected-optional-configurations';
+  | 'disconnected-review';
 
 const wizardStepsOrder: ClusterWizardStepsType[] = [
   'cluster-details',
@@ -50,7 +49,6 @@ const wizardStepsOrder: ClusterWizardStepsType[] = [
 
 export const disconnectedSteps: ClusterWizardStepsType[] = [
   'disconnected-basic',
-  'disconnected-optional-configurations',
   'disconnected-review',
 ];
 
@@ -262,7 +260,6 @@ const credentialsValidationMap = buildEmptyValidationsMap();
 const customManifestsValidationsMap = buildEmptyValidationsMap();
 const disconnectedReviewValidationsMap = buildEmptyValidationsMap();
 const disconnectedBasicValidationsMap = buildEmptyValidationsMap();
-const disconnectedOptionalConfigurationsValidationsMap = buildEmptyValidationsMap();
 
 export const wizardStepsValidationsMap: WizardStepsValidationMap<ClusterWizardStepsType> = {
   'cluster-details': clusterDetailsStepValidationsMap,
@@ -278,7 +275,6 @@ export const wizardStepsValidationsMap: WizardStepsValidationMap<ClusterWizardSt
   'credentials-download': credentialsValidationMap,
   'disconnected-review': disconnectedReviewValidationsMap,
   'disconnected-basic': disconnectedBasicValidationsMap,
-  'disconnected-optional-configurations': disconnectedOptionalConfigurationsValidationsMap,
 };
 
 export const allClusterWizardSoftValidationIds =

package/lib/ocm/components/clusters/AssistedInstallerHeader.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Content, Split, SplitItem } from '@patternfly/react-core';
+import { TextContent, Text, Split, SplitItem } from '@patternfly/react-core';
 import {
   ASSISTED_INSTALLER_DOCUMENTATION_LINK,
-  TechnologyPreview,
+  DeveloperPreview,
   ExternalLink,
   isInOcm,
 } from '../../../common';
@@ -11,11 +11,11 @@ import { useFeature } from '../../hooks/use-feature';
 export const AssistedInstallerHeader = () => {
   const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
   return (
-    <>
-      <Content component="h1" className="pf-v6-u-display-inline">
+    <TextContent>
+      <Text component="h1" className="pf-v5-u-display-inline">
         Install OpenShift with the Assisted Installer
-      </Content>
-      {isSingleClusterFeatureEnabled && <TechnologyPreview />}
+      </Text>
+      {isSingleClusterFeatureEnabled && <DeveloperPreview />}
       <Split hasGutter>
         <SplitItem>
           <ExternalLink href={ASSISTED_INSTALLER_DOCUMENTATION_LINK}>
@@ -24,12 +24,12 @@ export const AssistedInstallerHeader = () => {
         </SplitItem>
         {isInOcm && (
           <SplitItem>
-            <Content component="a" data-testid="whats-new-link" hidden={true}>
+            <Text component="a" data-testid="whats-new-link">
               What's new in Assisted Installer?
-            </Content>
+            </Text>
           </SplitItem>
         )}
       </Split>
-    </>
+    </TextContent>
   );
 };

package/lib/ocm/components/clusters/ClusterBreadcrumbs.tsx

@@ -1,12 +1,17 @@
 import React from 'react';
-import { Breadcrumb, BreadcrumbItem, PageSection } from '@patternfly/react-core';
+import {
+  PageSectionVariants,
+  Breadcrumb,
+  BreadcrumbItem,
+  PageSection,
+} from '@patternfly/react-core';
 import { Link } from 'react-router-dom-v5-compat';
 import { isInOcm } from '../../../common/api';
 
 const ClusterBreadcrumbs = ({ clusterName }: { clusterName?: string }) => (
-  <PageSection hasBodyWrapper={false}>
+  <PageSection variant={PageSectionVariants.light}>
     {(clusterName || isInOcm) && (
-      <Breadcrumb data-testid="cluster-breadcrumbs">
+      <Breadcrumb>
         {isInOcm && (
           <BreadcrumbItem
             data-testid="cluster-list-breadcrumb"

package/lib/ocm/components/clusters/ClusterLoading.tsx

@@ -1,9 +1,9 @@
-import { PageSection } from '@patternfly/react-core';
+import { PageSection, PageSectionVariants } from '@patternfly/react-core';
 import { LoadingState } from '../../../common';
 import React from 'react';
 
 const ClusterLoading = () => (
-  <PageSection hasBodyWrapper={false} isFilled>
+  <PageSection variant={PageSectionVariants.light} isFilled>
     <LoadingState />
   </PageSection>
 );

package/lib/ocm/components/clusters/ClusterPage.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useParams, Navigate } from 'react-router-dom-v5-compat';
 import { useDispatch } from 'react-redux';
-import { PageSection, Content } from '@patternfly/react-core';
+import { PageSection, PageSectionVariants, Text, TextContent } from '@patternfly/react-core';
 import {
   AddHostsContextProvider,
   AlertsContextProvider,
@@ -90,10 +90,12 @@ const ClusterPageGeneric = ({
       return (
         <>
           {showBreadcrumbs && <ClusterBreadcrumbs clusterName={cluster.name} />}
-          <PageSection hasBodyWrapper={false}>
-            <Content component="h1">{cluster.name}</Content>
+          <PageSection variant={PageSectionVariants.light}>
+            <TextContent>
+              <Text component="h1">{cluster.name}</Text>
+            </TextContent>
           </PageSection>
-          <PageSection hasBodyWrapper={false} isFilled>
+          <PageSection variant={PageSectionVariants.light} isFilled>
             <ClusterDetail cluster={cluster} />
           </PageSection>
         </>
@@ -103,12 +105,12 @@ const ClusterPageGeneric = ({
         <>
           {showBreadcrumbs && <ClusterBreadcrumbs clusterName={cluster.name} />}
           {showBreadcrumbs && (
-            <PageSection hasBodyWrapper={false}>
+            <PageSection variant={PageSectionVariants.light}>
               <AssistedInstallerHeader />
             </PageSection>
           )}
 
-          <PageSection hasBodyWrapper={false}>
+          <PageSection variant={PageSectionVariants.light}>
             <ClusterWizardContextProvider cluster={cluster} infraEnv={infraEnv}>
               <ClusterWizard
                 cluster={cluster}
@@ -131,7 +133,7 @@ const ClusterPageGeneric = ({
       return <Navigate to={`${routeBasePath}/clusters`} />;
     }
     return (
-      <PageSection hasBodyWrapper={false} isFilled>
+      <PageSection variant={PageSectionVariants.light} isFilled>
         <ErrorState
           title="Failed to fetch the cluster"
           fetchData={
@@ -145,7 +147,7 @@ const ClusterPageGeneric = ({
 
   if (infraEnvError) {
     return (
-      <PageSection hasBodyWrapper={false} isFilled>
+      <PageSection variant={PageSectionVariants.light} isFilled>
         <ErrorState
           title="Cluster details not found"
           actions={[<BackButton key={'cancel'} to={`..`} />]}
@@ -203,7 +205,7 @@ export const SingleClusterPage = ({
   resetModal: React.ReactNode;
 }) => (
   <AlertsContextProvider>
-    <PageSection hasBodyWrapper={false} isFilled>
+    <PageSection variant={PageSectionVariants.light}>
       <AssistedInstallerHeader />
     </PageSection>
     <ClusterPageGeneric clusterId={clusterId} resetModal={resetModal} />

package/lib/ocm/components/clusters/ClusterPageErrors.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { PageSection } from '@patternfly/react-core';
+import { PageSection, PageSectionVariants } from '@patternfly/react-core';
 import { ErrorState } from '../../../common';
 import { BackButton } from '../ui/Buttons/BackButton';
 
 export const ClusterUiError = () => (
-  <PageSection hasBodyWrapper={false} isFilled>
+  <PageSection variant={PageSectionVariants.light} isFilled>
     <ErrorState
       title="Failed to retrieve the default configuration"
       actions={[<BackButton key={'cancel'} to={'..'} />]}

package/lib/ocm/components/clusters/ClusterStatus.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
+import { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/js/global_success_color_100';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 import { FileAltIcon } from '@patternfly/react-icons/dist/js/icons/file-alt-icon';

package/lib/ocm/components/clusters/Clusters.tsx

@@ -1,6 +1,13 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom-v5-compat';
-import { Button, ButtonVariant, Content, PageSection } from '@patternfly/react-core';
+import {
+  Button,
+  ButtonVariant,
+  PageSectionVariants,
+  TextContent,
+  Text,
+  PageSection,
+} from '@patternfly/react-core';
 import { AddCircleOIcon } from '@patternfly/react-icons/dist/js/icons/add-circle-o-icon';
 import {
   ResourceUIState,
@@ -72,13 +79,13 @@ const Clusters = () => {
   switch (uiState.current) {
     case LOADING:
       return (
-        <PageSection hasBodyWrapper={false} isFilled>
+        <PageSection variant={PageSectionVariants.light} isFilled>
           <LoadingState />
         </PageSection>
       );
     case EMPTY:
       return (
-        <PageSection hasBodyWrapper={false} isFilled>
+        <PageSection variant={PageSectionVariants.light} isFilled>
           <EmptyState
             icon={AddCircleOIcon}
             title="Create new assisted cluster"
@@ -99,7 +106,7 @@ const Clusters = () => {
     default:
       if (clusterRows.length === 0 && uiState.current === POLLING_ERROR) {
         return (
-          <PageSection hasBodyWrapper={false} isFilled>
+          <PageSection variant={PageSectionVariants.light} isFilled>
             <ErrorState title="Failed to fetch clusters." fetchData={fetchClusters} />
           </PageSection>
         );
@@ -107,10 +114,12 @@ const Clusters = () => {
         return (
           <>
             <ClusterBreadcrumbs />
-            <PageSection hasBodyWrapper={false}>
-              <Content component="h1">Assisted Clusters</Content>
+            <PageSection variant={PageSectionVariants.light}>
+              <TextContent>
+                <Text component="h1">Assisted Clusters</Text>
+              </TextContent>
             </PageSection>
-            <PageSection hasBodyWrapper={false} isFilled>
+            <PageSection variant={PageSectionVariants.light} isFilled>
               <Alerts />
               <ClustersTable rows={clusterRows} deleteCluster={deleteClusterAsync} />
             </PageSection>

package/lib/ocm/components/clusters/ClustersListToolbar.tsx

@@ -85,7 +85,7 @@ const ClustersListToolbar: React.FC<ClustersListToolbarProps> = ({
     onSelect('status', isSelectEventChecked(event), value);
   };
 
-  const onDeleteLabel: ToolbarFilterProps['deleteLabel'] = (type, id) => {
+  const onDeleteChip: ToolbarFilterProps['deleteChip'] = (type, id) => {
     if (type) {
       setFilters({
         ...filters,
@@ -96,7 +96,7 @@ const ClustersListToolbar: React.FC<ClustersListToolbarProps> = ({
     }
   };
 
-  const onDeleteLabelGroup: ToolbarFilterProps['deleteLabelGroup'] = (type) => {
+  const onDeleteChipGroup: ToolbarFilterProps['deleteChipGroup'] = (type) => {
     setFilters({
       ...filters,
       [type as string]: [],
@@ -135,9 +135,9 @@ const ClustersListToolbar: React.FC<ClustersListToolbarProps> = ({
           </InputGroup>
         </ToolbarItem>
         <CustomToolbarFilter
-          labels={filters.status}
-          deleteLabel={onDeleteLabel}
-          deleteLabelGroup={onDeleteLabelGroup}
+          chips={filters.status}
+          deleteChip={onDeleteChip}
+          deleteChipGroup={onDeleteChipGroup}
           categoryName="status"
         >
           <Dropdown
@@ -180,10 +180,8 @@ const ClustersListToolbar: React.FC<ClustersListToolbarProps> = ({
         >
           Create Cluster
         </ToolbarButton>
-        {clustersUIState === ResourceUIState.RELOADING && (
-          <Spinner size="lg" data-testid="clusters-list-toolbar-spinner" />
-        )}
-        <ToolbarGroup align={{ lg: 'alignEnd' }}>
+        {clustersUIState === ResourceUIState.RELOADING && <Spinner size="lg" />}
+        <ToolbarGroup align={{ lg: 'alignRight' }}>
           <ToolbarButton
             variant={ButtonVariant.plain}
             onClick={() => fetchClusters()}

package/lib/ocm/components/clusters/DeleteClusterModal.tsx

@@ -1,12 +1,5 @@
 import * as React from 'react';
-import {
-  Button,
-  Modal,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-  ModalVariant,
-} from '@patternfly/react-core';
+import { Modal, Button, ModalVariant } from '@patternfly/react-core';
 
 type DeleteClusterModalProps = {
   name: string;
@@ -24,13 +17,12 @@ const DeleteClusterModal: React.FC<DeleteClusterModalProps> = ({
   isOpen,
 }) => (
   <Modal
+    title="Delete cluster"
     isOpen={isOpen}
-    onClose={isDeleteInProgress ? undefined : () => onClose()}
+    onClose={onClose}
     variant={ModalVariant.small}
-  >
-    <ModalHeader title="Delete cluster" />
-    <ModalBody>Are you sure you want to delete cluster {name} ?</ModalBody>
-    <ModalFooter>
+    showClose={!isDeleteInProgress}
+    actions={[
       <Button
         data-testid="delete-cluster-submit"
         key="confirm"
@@ -40,11 +32,13 @@ const DeleteClusterModal: React.FC<DeleteClusterModalProps> = ({
         isLoading={isDeleteInProgress}
       >
         Delete
-      </Button>
+      </Button>,
       <Button key="cancel" variant="link" onClick={onClose} isDisabled={isDeleteInProgress}>
         Cancel
-      </Button>
-    </ModalFooter>
+      </Button>,
+    ]}
+  >
+    Are you sure you want to delete cluster {name} ?
   </Modal>
 );
 

package/lib/ocm/components/clusters/NewClusterPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PageSection } from '@patternfly/react-core';
+import { PageSectionVariants, PageSection } from '@patternfly/react-core';
 import { AlertsContextProvider } from '../../../common';
 import ClusterBreadcrumbs from './ClusterBreadcrumbs';
 import { ClusterDefaultConfigurationProvider } from '../clusterConfiguration/ClusterDefaultConfigurationContext';
@@ -25,10 +25,10 @@ const NewClusterPageGeneric = ({ children }: React.PropsWithChildren<unknown>) =
             <OpenShiftVersionsContextProvider>
               <NewFeatureSupportLevelProvider loadingUi={<ClusterLoading />}>
                 {children}
-                <PageSection hasBodyWrapper={false} isFilled>
+                <PageSection variant={PageSectionVariants.light}>
                   <AssistedInstallerHeader />
                 </PageSection>
-                <PageSection hasBodyWrapper={false} isFilled>
+                <PageSection variant={PageSectionVariants.light} isFilled>
                   <ClusterWizardContextProvider>
                     <NewClusterWizard />
                   </ClusterWizardContextProvider>

package/lib/ocm/components/featureSupportLevels/ReviewClusterFeatureSupportLevels.tsx

@@ -1,9 +1,8 @@
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import React from 'react';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
-import { t_global_color_status_info_100 as infoColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_info_100';
-import { Content } from '@patternfly/react-core';
+import { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/js/global_success_color_100';
+import { Text, TextList, TextListItem, TextContent } from '@patternfly/react-core';
 import {
   FeatureId,
   FeatureIdToSupportLevel,
@@ -23,7 +22,6 @@ import {
   NewFeatureSupportLevelData,
   useNewFeatureSupportLevel,
 } from '../../../common/components/newFeatureSupportLevels';
-import { useFeature } from '../../hooks/use-feature';
 
 const getFeatureReviewText = (featureId: FeatureId): string => {
   switch (featureId) {
@@ -66,16 +64,14 @@ const getPreviewFeatureList = (supportLevelMap: FeatureIdToSupportLevel) => {
     return null;
   }
   const featureList = previewSupportLevels[supportLevel].map((featureId: FeatureId) => (
-    <Content component="li" key={featureId}>
-      {getFeatureReviewText(featureId)}
-    </Content>
+    <TextListItem key={featureId}>{getFeatureReviewText(featureId)}</TextListItem>
   ));
   return (
     <>
-      <Content component="li">
+      <TextListItem>
         {getPreviewSupportLevelTitle(supportLevel)}
-        <Content component="ul">{featureList}</Content>
-      </Content>
+        <TextList>{featureList}</TextList>
+      </TextListItem>
     </>
   );
 };
@@ -87,21 +83,21 @@ export const LimitedSupportedCluster = ({
   clusterFeatureSupportLevels: FeatureIdToSupportLevel;
   showVersionWarning: boolean;
 }) => (
-  <>
+  <TextContent>
     {showVersionWarning && (
-      <Content component="p">
-        <UiIcon size="sm" icon={<InfoCircleIcon color={infoColor.var} />} />
+      <Text>
+        <UiIcon size="sm" icon={<InfoCircleIcon color="var(--pf-v5-global--info-color--100)" />} />
         &nbsp;The installed OpenShift version is not production-ready
-      </Content>
+      </Text>
     )}
     {Object.keys(clusterFeatureSupportLevels).length > 0 && (
       <>
-        <UiIcon size="sm" icon={<InfoCircleIcon color={infoColor.var} />} />
+        <UiIcon size="sm" icon={<InfoCircleIcon color="var(--pf-v5-global--info-color--100)" />} />
         &nbsp;Your cluster will be subject to support limitations because it includes:
-        <Content component="ul">{getPreviewFeatureList(clusterFeatureSupportLevels)}</Content>
+        <TextList>{getPreviewFeatureList(clusterFeatureSupportLevels)}</TextList>
       </>
     )}
-  </>
+  </TextContent>
 );
 
 export const FullySupportedCluster = () => (
@@ -128,7 +124,6 @@ export const getSupportLevelInfo = (
   featureSupportLevelData: NewFeatureSupportLevelData,
   isSupportedOpenShiftVersion: (version?: string) => boolean,
   t: TFunction,
-  isSingleClusterFeatureEnabled?: boolean,
 ) => {
   const limitedClusterFeatures = getLimitedFeatureSupportLevels(
     cluster,
@@ -139,10 +134,7 @@ export const getSupportLevelInfo = (
   return {
     limitedClusterFeatures,
     hasSupportedVersion,
-    isFullySupported:
-      hasSupportedVersion &&
-      Object.keys(limitedClusterFeatures || {}).length === 0 &&
-      !isSingleClusterFeatureEnabled,
+    isFullySupported: hasSupportedVersion && Object.keys(limitedClusterFeatures || {}).length === 0,
   };
 };
 
@@ -150,25 +142,11 @@ const SupportLevel = ({ cluster }: SupportLevelProps) => {
   const { t } = useTranslation();
   const featureSupportLevelData = useNewFeatureSupportLevel();
   const { isSupportedOpenShiftVersion } = useOpenShiftVersionsContext();
-  const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
 
   const { limitedClusterFeatures, hasSupportedVersion, isFullySupported } =
     React.useMemo<SupportLevelMemo>(
-      () =>
-        getSupportLevelInfo(
-          cluster,
-          featureSupportLevelData,
-          isSupportedOpenShiftVersion,
-          t,
-          isSingleClusterFeatureEnabled,
-        ),
-      [
-        cluster,
-        featureSupportLevelData,
-        t,
-        isSupportedOpenShiftVersion,
-        isSingleClusterFeatureEnabled,
-      ],
+      () => getSupportLevelInfo(cluster, featureSupportLevelData, isSupportedOpenShiftVersion, t),
+      [cluster, featureSupportLevelData, t, isSupportedOpenShiftVersion],
     );
 
   if (!limitedClusterFeatures) {
@@ -184,11 +162,11 @@ const SupportLevel = ({ cluster }: SupportLevelProps) => {
         ) : (
           <LimitedSupportedCluster
             clusterFeatureSupportLevels={limitedClusterFeatures}
-            showVersionWarning={!hasSupportedVersion || isSingleClusterFeatureEnabled}
+            showVersionWarning={!hasSupportedVersion}
           />
         )
       }
-      classNameValue={'pf-v6-u-mb-md'}
+      classNameValue={'pf-v5-u-mb-md'}
       testId="feature-support-levels"
     />
   );

package/lib/ocm/components/featureSupportLevels/featureStateUtils.ts

@@ -294,7 +294,9 @@ const getOpenShiftAIDisabledReason = (
   if (isArm) {
     return `${operatorTitle} is not available when ARM CPU architecture is selected.`;
   }
-
+  if (isSNO(cluster)) {
+    return `${operatorTitle} is not available when deploying a Single Node OpenShift.`;
+  }
   if (!isSupported) {
     return `The installer cannot currently enable ${operatorTitle} with the selected OpenShift version, but it can be enabled later through the OpenShift Console once the installation is complete.`;
   }

package/lib/ocm/components/hosts/DeleteHostModal.tsx

@@ -1,13 +1,5 @@
 import React from 'react';
-import {
-  Button,
-  ButtonVariant,
-  Modal,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-  ModalVariant,
-} from '@patternfly/react-core';
+import { Modal, ModalVariant, Button, ButtonVariant } from '@patternfly/react-core';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 
 type DeleteHostModalProps = {
@@ -25,12 +17,8 @@ const DeleteHostModal = ({ isOpen, hostname, onClose, onDelete }: DeleteHostModa
       isOpen={isOpen}
       onClose={onClose}
       variant={ModalVariant.small}
-    >
-      <ModalHeader title={t('ai:Remove host?')} titleIconVariant="warning" />
-      <ModalBody>
-        {t('ai:Host {{hostname}} will be removed', { hostname: hostname || '' })}
-      </ModalBody>
-      <ModalFooter>
+      titleIconVariant="warning"
+      actions={[
         <Button
           data-testid="delete-host-submit"
           key="confirm"
@@ -38,11 +26,13 @@ const DeleteHostModal = ({ isOpen, hostname, onClose, onDelete }: DeleteHostModa
           onClick={onDelete}
         >
           {t('ai:Remove host')}
-        </Button>
+        </Button>,
         <Button key="cancel" variant={ButtonVariant.link} onClick={onClose}>
           {t('ai:Cancel')}
-        </Button>
-      </ModalFooter>
+        </Button>,
+      ]}
+    >
+      {t('ai:Host {{hostname}} will be removed', { hostname: hostname || '' })}
     </Modal>
   );
 };

package/lib/ocm/components/hosts/HostRequirementsContent.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { List, ListItem, Content } from '@patternfly/react-core';
+import { List, ListItem, Text, TextContent } from '@patternfly/react-core';
 import { DISK_WRITE_SPEED_LINK, ErrorState, ExternalLink, LoadingState } from '../../../common';
 import { useClusterPreflightRequirements } from '../../hooks';
 import { fileSize } from '../../../common/utils';
@@ -41,9 +41,9 @@ const HostRequirementsContent = ({
 
   if (isAddingHosts) {
     return (
-      <Content
-        component={'p'}
-      >{`Worker hosts must have at least ${contentForWorkerNodes}`}</Content>
+      <TextContent>
+        <Text component={'p'}>{`Worker hosts must have at least ${contentForWorkerNodes}`}</Text>
+      </TextContent>
     );
   }
 

package/lib/ocm/components/hosts/HostsDiscoveryTable.tsx

@@ -40,10 +40,9 @@ const HostRowDetailExpand = ({ obj: host }: ExpandComponentProps<Host>) => (
 
 type HostsDiscoveryTableProps = {
   cluster: Cluster;
-  hosts: Host[];
 };
 
-const HostsDiscoveryTable = ({ cluster, hosts }: HostsDiscoveryTableProps) => {
+const HostsDiscoveryTable = ({ cluster }: HostsDiscoveryTableProps) => {
   const {
     onEditHost,
     actionChecks,
@@ -56,7 +55,6 @@ const HostsDiscoveryTable = ({ cluster, hosts }: HostsDiscoveryTableProps) => {
     onMassDeleteHost,
     ...modalProps
   } = useHostsTable(cluster);
-
   const { wizardPerPage, setWizardPerPage } = useClusterWizardContext();
 
   const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
@@ -85,6 +83,7 @@ const HostsDiscoveryTable = ({ cluster, hosts }: HostsDiscoveryTableProps) => {
     [t, onEditHost, actionChecks.canEditHostname, actionChecks.canEditRole, onEditRole, cluster],
   );
 
+  const hosts = cluster.hosts || [];
   const paginationProps = usePagination(hosts.length, wizardPerPage, setWizardPerPage);
   const itemIDs = hosts.map((h) => h.id);
   const showBulkActions = !(isViewerMode || isSNOCluster);

package/lib/ocm/components/hosts/ResetHostModal.tsx

@@ -1,13 +1,5 @@
 import React from 'react';
-import {
-  Button,
-  ButtonVariant,
-  Modal,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-  ModalVariant,
-} from '@patternfly/react-core';
+import { Modal, ModalVariant, Button, ButtonVariant } from '@patternfly/react-core';
 
 type ResetHostModalProps = {
   hostname?: string;
@@ -17,10 +9,12 @@ type ResetHostModalProps = {
 };
 
 const ResetHostModal: React.FC<ResetHostModalProps> = ({ isOpen, hostname, onClose, onReset }) => (
-  <Modal isOpen={isOpen} onClose={onClose} variant={ModalVariant.small}>
-    <ModalHeader title="Reset Host" />
-    <ModalBody>Are you sure you want to reset host{` ${hostname || ''}`} ?</ModalBody>
-    <ModalFooter>
+  <Modal
+    title="Reset Host"
+    isOpen={isOpen}
+    onClose={onClose}
+    variant={ModalVariant.small}
+    actions={[
       <Button
         data-testid="reset-host-submit"
         key="confirm"
@@ -28,11 +22,13 @@ const ResetHostModal: React.FC<ResetHostModalProps> = ({ isOpen, hostname, onClo
         onClick={onReset}
       >
         Reset
-      </Button>
+      </Button>,
       <Button key="cancel" variant={ButtonVariant.link} onClick={onClose}>
         Cancel
-      </Button>
-    </ModalFooter>
+      </Button>,
+    ]}
+  >
+    Are you sure you want to reset host{` ${hostname || ''}`} ?
   </Modal>
 );