@openshift-assisted/ui-lib 2.13.0-cim → 2.14.1-cim

package/lib/cim/components/InfraEnv/AddHostDropdown.tsx

@@ -1,3 +1,4 @@
+import { Split, SplitItem, Spinner } from '@patternfly/react-core';
 import {
   Dropdown,
   DropdownGroup,
@@ -5,10 +6,7 @@ import {
   DropdownItemProps,
   DropdownSeparator,
   DropdownToggle,
-  Split,
-  SplitItem,
-  Spinner,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import * as React from 'react';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { AddBmcHostModal, AddBmcHostYamlModal, AddHostModal } from '../modals';
@@ -57,7 +55,11 @@ const AddHostDropdown = ({
       <Dropdown
         id="infraenv-actions"
         toggle={
-          <DropdownToggle id="dropdown-basic" onToggle={setIsKebabOpen} toggleVariant="primary">
+          <DropdownToggle
+            id="dropdown-basic"
+            onToggle={(_event, value) => setIsKebabOpen(value)}
+            toggleVariant="primary"
+          >
             {t('ai:Add hosts')}
           </DropdownToggle>
         }

package/lib/cim/components/InfraEnv/EnvironmentDetails.tsx

@@ -46,7 +46,7 @@ type EditItemProps = {
 const EditItem: React.FC<EditItemProps> = ({ title, onEdit, isLoading, isWarning, noIcon }) => {
   let icon = <CheckCircleIcon color={okColor.value} />;
   if (isLoading) {
-    icon = <Spinner isSVG size="md" />;
+    icon = <Spinner size="md" />;
   } else if (isWarning) {
     icon = <ExclamationTriangleIcon color={warningColor.value} />;
   }

package/lib/cim/components/InfraEnv/InfraEnvAgentTable.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Button, DropdownItem, Stack, StackItem } from '@patternfly/react-core';
+import { Button, Stack, StackItem } from '@patternfly/react-core';
+import { DropdownItem } from '@patternfly/react-core/deprecated';
 import noop from 'lodash-es/noop.js';
 
 import { Host } from '@openshift-assisted/types/assisted-installer-service';

package/lib/cim/components/InfraEnv/InfraEnvFormPage.tsx

@@ -73,7 +73,7 @@ export type EnvironmentStepFormValues = {
 };
 
 const validationSchema = (usedNames: string[], t: TFunction) =>
-  Yup.lazy<EnvironmentStepFormValues>((values) =>
+  Yup.lazy((values: EnvironmentStepFormValues) =>
     Yup.object<EnvironmentStepFormValues>().shape({
       name: richNameValidationSchema(t, usedNames),
       location: locationValidationSchema(t).required(t('ai:Location is a required field.')),
@@ -95,8 +95,8 @@ const validationSchema = (usedNames: string[], t: TFunction) =>
         .test(
           'label-equals-validation',
           'Label selector needs to be in a `key=value` form',
-          (values: string[]) =>
-            values.every((value) => {
+          (values) =>
+            (values as string[]).every((value) => {
               const parts = value.split('=');
               return parts.length === 2;
             }),
@@ -353,7 +353,7 @@ export const InfraEnvFormPage: React.FC<InfraEnvFormPageProps> = ({
                   // eslint-disable-next-line @typescript-eslint/no-misused-promises
                   onClick={submitForm}
                 >
-                  {t('ai:Create')} {isSubmitting && <Spinner isSVG size="md" />}
+                  {t('ai:Create')} {isSubmitting && <Spinner size="md" />}
                 </Button>
                 <Button variant="link" onClick={onClose} isDisabled={isSubmitting}>
                   {t('ai:Cancel')}

package/lib/cim/components/InfraEnv/InfraTableToolbar.tsx

@@ -3,15 +3,17 @@ import {
   Grid,
   GridItem,
   SearchInput,
-  Select,
-  SelectGroup,
-  SelectOption,
-  SelectVariant,
   Split,
   SplitItem,
   ToolbarFilter,
   ToolbarItem,
 } from '@patternfly/react-core';
+import {
+  Select,
+  SelectGroup,
+  SelectOption,
+  SelectVariant,
+} from '@patternfly/react-core/deprecated';
 import { FilterIcon } from '@patternfly/react-icons/dist/js/icons/filter-icon';
 import * as React from 'react';
 import { HostStatus, HostStatusDef } from '../../../common/components/hosts/types';
@@ -119,7 +121,7 @@ const InfraTableToolbar: React.FC<InfraTableToolbarProps> = ({
           <Select
             variant={SelectVariant.checkbox}
             aria-label={t('ai:Status')}
-            onToggle={setStatusFilterOpen}
+            onToggle={(_event, value) => setStatusFilterOpen(value)}
             onSelect={(e, value) => {
               // eslint-disable-next-line
               if ((e.target as any).checked) {

package/lib/cim/components/InfraEnv/OpenshiftVersionDropdown.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Dropdown, DropdownItem, DropdownToggle, FormGroup, Tooltip } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
+import { FormGroup, Tooltip } from '@patternfly/react-core';
 import { useField } from 'formik';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { architectureData, getFieldId, SupportedCpuArchitecture } from '../../../common';
@@ -34,7 +35,7 @@ const OpenshiftVersionDropdown = ({ osImages }: { osImages: OsImage[] }) => {
       <Tooltip
         content={t(
           'ai:No OpenShift images available for selected CPU architecture {{cpuArchitecture}}.',
-          architectureData[cpuArchitecture as SupportedCpuArchitecture].label,
+          { cpuArchitecture: architectureData[cpuArchitecture as SupportedCpuArchitecture].label },
         )}
         hidden={!!filteredImages.length}
       >

package/lib/cim/components/InfraEnv/infra-env.css

@@ -1,7 +1,7 @@
 .infra-env__form {
-  padding-right: var(--pf-c-wizard__main-body--PaddingRight);
+  padding-right: var(--pf-v5-c-wizard__main-body--PaddingRight);
 }
 
 .infra-env-hosts-tab-title__icon {
-  margin-left: var(--pf-global--spacer--xs);
+  margin-left: var(--pf-v5-global--spacer--xs);
 }

package/lib/cim/components/common/CpuArchitectureDropdown.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Dropdown, DropdownItem, DropdownToggle, FormGroup } from '@patternfly/react-core';
+import { FormGroup } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import {
   architectureData,

package/lib/cim/components/common/ResourceAlerts.css

@@ -1,5 +1,5 @@
 .cim-resource-alerts {
-  margin-bottom: var(--pf-global--spacer--sm);
+  margin-bottom: var(--pf-v5-global--spacer--sm);
 }
 
 .cim-resource-alerts--noul ul {

package/lib/cim/components/common/constants.ts

@@ -16,8 +16,7 @@ export const INFRAENV_GENERATED_AI_FLOW = 'agentBareMetal-generated-infraenv-ai-
 export const CPU_ARCHITECTURE_ANNOTATION_KEY = 'agentBareMetal-cpuArchitecture';
 
 export const getInfraEnvDocs = (docVersion: string) =>
-  `https://access.redhat.com/documentation/en-us/red_hat_advanced_cluster_management_for_kubernetes/${docVersion}/html-single/clusters/index#enable-cim`;
-
+  `https://docs.redhat.com/en/documentation/red_hat_advanced_cluster_management_for_kubernetes/${docVersion}/html-single/clusters/index#enable-cim-prerequisites`;
 export const BMH_HOSTNAME_ANNOTATION = 'bmac.agent-install.openshift.io/hostname';
 
 export const OCP_VERSION_MAJOR_MINOR = 'hive.openshift.io/version-major-minor';

package/lib/cim/components/helpers/toAssisted.ts

@@ -170,6 +170,7 @@ export const getAICluster = ({
     validationsInfo: JSON.stringify(agentClusterInstall?.status?.validationsInfo || {}),
     cpuArchitecture: getClusterDeploymentCpuArchitecture(clusterDeployment, infraEnv),
     networkType: agentClusterInstall?.spec?.networking.networkType,
+    controlPlaneCount: agentClusterInstall?.spec?.provisionRequirements.controlPlaneAgents || 3,
   };
   /*
   aiCluster.agentSelectorMasterLabels =

package/lib/cim/components/modals/AddBmcHostYamlForm.css

@@ -1,5 +1,5 @@
 .ai-bmc-yaml__error {
   display: block;
-  font-size: var(--pf-global--FontSize--md);
+  font-size: var(--pf-v5-global--FontSize--md);
   color: red;
 }

package/lib/cim/components/modals/AddBmcHostYamlForm.tsx

@@ -7,6 +7,7 @@ import {
   ButtonVariant,
   EmptyState,
   EmptyStateBody,
+  EmptyStateHeader,
   EmptyStateIcon,
   EmptyStateVariant,
   ModalBoxBody,
@@ -14,7 +15,6 @@ import {
   Spinner,
   Stack,
   StackItem,
-  Title,
 } from '@patternfly/react-core';
 import { ErrorCircleOIcon } from '@patternfly/react-icons/dist/js/icons/error-circle-o-icon';
 import { UploadIcon } from '@patternfly/react-icons/dist/js/icons/upload-icon';
@@ -132,11 +132,12 @@ const AddBmcHostYamlForm: React.FC<
       <ModalBoxBody>
         <Stack hasGutter>
           <StackItem>
-            <EmptyState variant={EmptyStateVariant.large}>
-              <EmptyStateIcon icon={UploadIcon} />
-              <Title headingLevel="h4" size="lg">
-                {t('ai:Upload a YAML file')}
-              </Title>
+            <EmptyState variant={EmptyStateVariant.lg}>
+              <EmptyStateHeader
+                titleText={<>{t('ai:Upload a YAML file')}</>}
+                icon={<EmptyStateIcon icon={UploadIcon} />}
+                headingLevel="h4"
+              />
               <EmptyStateBody>
                 <p>
                   {t(

package/lib/cim/components/modals/AddHostModal.tsx

@@ -3,6 +3,7 @@ import { FormikHelpers } from 'formik';
 import {
   EmptyState,
   EmptyStateBody,
+  EmptyStateHeader,
   EmptyStateIcon,
   Modal,
   ModalVariant,
@@ -29,9 +30,8 @@ const AddHostModal: React.FC<AddHostModalProps> = ({
   const hasDHCP = infraEnv.metadata?.labels?.networkType !== 'static';
   const sshPublicKey = infraEnv.spec?.sshAuthorizedKey || agentClusterInstall?.spec?.sshPublicKey;
   const { httpProxy, httpsProxy, noProxy } = infraEnv.spec?.proxy || {};
-
-  const isoDialog = agentClusterInstall ? 'config' : 'download';
-  const [dialogType, setDialogType] = React.useState<AddHostModalStepType>(isoDialog);
+  const imageType = infraEnv.spec?.imageType || 'minimal-iso';
+  const [dialogType, setDialogType] = React.useState<AddHostModalStepType>('config');
   const { t } = useTranslation();
   const handleIsoConfigSubmit = async (
     values: DiscoveryImageFormValues,
@@ -65,8 +65,8 @@ const AddHostModal: React.FC<AddHostModalProps> = ({
           <DiscoveryImageConfigForm
             onCancel={onClose}
             handleSubmit={handleIsoConfigSubmit}
-            hideDiscoveryImageType={true} // So far configured by env variable on backend
-            imageType="full-iso" // So far the only option for CIM
+            hideDiscoveryImageType={isIPXE}
+            imageType={imageType}
             sshPublicKey={sshPublicKey}
             httpProxy={httpProxy}
             httpsProxy={httpsProxy}
@@ -125,7 +125,7 @@ const GeneratingIsoDownload = ({
     />
   ) : (
     <EmptyState>
-      <EmptyStateIcon icon={Spinner} />
+      <EmptyStateHeader icon={<EmptyStateIcon icon={Spinner} />} />
       <EmptyStateBody>{t('ai:Generating discovery ISO')}</EmptyStateBody>
     </EmptyState>
   );
@@ -149,7 +149,7 @@ const GeneratingIPXEDownload = ({
     />
   ) : (
     <EmptyState>
-      <EmptyStateIcon icon={Spinner} />
+      <EmptyStateHeader icon={<EmptyStateIcon icon={Spinner} />} />
       <EmptyStateBody>{t('ai:Generating iPXE script')}</EmptyStateBody>
     </EmptyState>
   );

package/lib/cim/components/modals/CimConfiguration/CimConfigurationForm.css

@@ -1,4 +1,4 @@
-.cim-config-form-title .pf-c-form__label-text {
+.cim-config-form-title .pf-v5-c-form__label-text {
   font-size: larger;
 }
 
@@ -11,13 +11,13 @@
 }
 
 .cim-config-form-aws {
-  margin-bottom: var(--pf-global--spacer--md);
+  margin-bottom: var(--pf-v5-global--spacer--md);
 }
 
 .cim-config-form-volume input {
   width: 10rem;
 }
 
-.cim-config-modal .pf-c-modal-box__body {
+.cim-config-modal .pf-v5-c-modal-box__body {
   overflow: hidden;
 }

package/lib/cim/components/modals/CimConfiguration/CimConfigurationForm.tsx

@@ -8,8 +8,13 @@ import {
   Popover,
   Checkbox,
   TextInput,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  Icon,
 } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { HelpIcon } from '@patternfly/react-icons/dist/js/icons/help-icon';
 
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
@@ -22,7 +27,6 @@ export const CimConfigurationForm: React.FC<CimConfigurationFormProps> = ({
   docConfigAwsUrl,
   isEdit,
   isInProgressPeriod,
-
   dbVolSize,
   dbVolSizeValidation,
   setDbVolSize,
@@ -65,9 +69,11 @@ export const CimConfigurationForm: React.FC<CimConfigurationFormProps> = ({
         aria-label={t('ai:More info for load balancer on Amazon web services')}
         aria-describedby="cim-config-form-aws-title"
         onClick={(e) => e.preventDefault()}
-        className="pf-c-form__group-label-help"
+        className="pf-v5-c-form__group-label-help"
       >
-        <HelpIcon noVerticalAlign />
+        <Icon>
+          <HelpIcon />
+        </Icon>
       </button>
     </Popover>
   );
@@ -96,9 +102,11 @@ export const CimConfigurationForm: React.FC<CimConfigurationFormProps> = ({
               aria-label={t('ai:More info for configure storage sizes')}
               aria-describedby="cim-config-form-storage-title"
               onClick={(e) => e.preventDefault()}
-              className="pf-c-form__group-label-help"
+              className="pf-v5-c-form__group-label-help"
             >
-              <HelpIcon noVerticalAlign />
+              <Icon>
+                <HelpIcon />
+              </Icon>
             </button>
           </Popover>
         }
@@ -121,29 +129,39 @@ export const CimConfigurationForm: React.FC<CimConfigurationFormProps> = ({
                   aria-label={t('ai:More info for database storage')}
                   aria-describedby="cim-config-form-storage-db"
                   onClick={(e) => e.preventDefault()}
-                  className="pf-c-form__group-label-help"
+                  className="pf-v5-c-form__group-label-help"
                 >
-                  <HelpIcon noVerticalAlign />
+                  <Icon>
+                    <HelpIcon />
+                  </Icon>
                 </button>
               </Popover>
             }
-            helperTextInvalid={dbVolSizeValidation}
-            validated={dbVolSizeValidation ? 'error' : 'default'}
             isRequired
           >
             <span className="cim-config-form-volume">
               <TextInput
+                validated={dbVolSizeValidation ? 'error' : 'default'}
                 isRequired
                 isDisabled={isEdit /* Not supported by backend */}
                 type="number"
                 id="cim-config-form-storage-db"
                 name="cim-config-form-storage-db"
                 value={dbVolSize}
-                onChange={(v: string) => setDbVolSize(getNumber(v, 1))}
+                onChange={(_event, v: string) => setDbVolSize(getNumber(v, 1))}
                 min={0 /* Do the validation elsewhere */}
               />{' '}
               Gi
             </span>
+            {dbVolSizeValidation !== undefined && (
+              <FormHelperText>
+                <HelperText>
+                  <HelperTextItem icon={<ExclamationCircleIcon />} variant="error">
+                    {dbVolSizeValidation}
+                  </HelperTextItem>
+                </HelperText>
+              </FormHelperText>
+            )}
           </FormGroup>
         </FlexItem>
         <FlexItem>
@@ -161,29 +179,39 @@ export const CimConfigurationForm: React.FC<CimConfigurationFormProps> = ({
                   aria-label={t('ai:More info for system storage')}
                   aria-describedby="cim-config-form-storage-sys"
                   onClick={(e) => e.preventDefault()}
-                  className="pf-c-form__group-label-help"
+                  className="pf-v5-c-form__group-label-help"
                 >
-                  <HelpIcon noVerticalAlign />
+                  <Icon>
+                    <HelpIcon />
+                  </Icon>
                 </button>
               </Popover>
             }
-            helperTextInvalid={fsVolSizeValidation}
-            validated={fsVolSizeValidation ? 'error' : 'default'}
             isRequired
           >
             <span className="cim-config-form-volume">
               <TextInput
+                validated={fsVolSizeValidation ? 'error' : 'default'}
                 isRequired
                 isDisabled={isEdit /* Not supported by backend */}
                 type="number"
                 id="cim-config-form-storage-sys"
                 name="cim-config-form-storage-sys"
                 value={fsVolSize}
-                onChange={(v: string) => setFsVolSize(getNumber(v, 1))}
+                onChange={(_event, v: string) => setFsVolSize(getNumber(v, 1))}
                 min={0}
               />{' '}
               Gi
             </span>
+            {fsVolSizeValidation !== undefined && (
+              <FormHelperText>
+                <HelperText>
+                  <HelperTextItem icon={<ExclamationCircleIcon />} variant="error">
+                    {fsVolSizeValidation}
+                  </HelperTextItem>
+                </HelperText>
+              </FormHelperText>
+            )}
           </FormGroup>
         </FlexItem>
         <FlexItem>
@@ -201,33 +229,42 @@ export const CimConfigurationForm: React.FC<CimConfigurationFormProps> = ({
                   aria-label={t('ai:More info for image storage')}
                   aria-describedby="cim-config-form-storage-img"
                   onClick={(e) => e.preventDefault()}
-                  className="pf-c-form__group-label-help"
+                  className="pf-v5-c-form__group-label-help"
                 >
-                  <HelpIcon noVerticalAlign />
+                  <Icon>
+                    <HelpIcon />
+                  </Icon>
                 </button>
               </Popover>
             }
-            helperTextInvalid={imgVolSizeValidation}
-            validated={imgVolSizeValidation ? 'error' : 'default'}
             isRequired
           >
             <span className="cim-config-form-volume">
               <TextInput
+                validated={imgVolSizeValidation ? 'error' : 'default'}
                 isRequired
                 isDisabled={isEdit /* Not supported by backend */}
                 type="number"
                 id="cim-config-form-storage-img"
                 name="cim-config-form-storage-img"
                 value={imgVolSize}
-                onChange={(v: string) => setImgVolSize(getNumber(v, 10))}
+                onChange={(_event, v: string) => setImgVolSize(getNumber(v, 10))}
                 min={0}
               />{' '}
               Gi
             </span>
+            {imgVolSizeValidation !== undefined && (
+              <FormHelperText>
+                <HelperText>
+                  <HelperTextItem icon={<ExclamationCircleIcon />} variant="error">
+                    {imgVolSizeValidation}
+                  </HelperTextItem>
+                </HelperText>
+              </FormHelperText>
+            )}
           </FormGroup>
         </FlexItem>
       </Flex>
-
       <Checkbox
         label={
           <span className="cim-config-form-aws-label">
@@ -246,7 +283,7 @@ export const CimConfigurationForm: React.FC<CimConfigurationFormProps> = ({
           (isEdit &&
             configureLoadBalancerInitial) /* For edit flow, only No to Yes transition is possible */
         }
-        onChange={setConfigureLoadBalancer}
+        onChange={(_event, value) => setConfigureLoadBalancer(value)}
       />
     </Form>
   );

package/lib/cim/components/modals/CimConfiguration/CimConfigurationModal.css

@@ -1,3 +1,3 @@
-.cim-config-modal .pf-c-alert {
-  margin-bottom: var(--pf-global--spacer--md);
+.cim-config-modal .pf-v5-c-alert {
+  margin-bottom: var(--pf-v5-global--spacer--md);
 }

package/lib/cim/components/modals/EditProxyModal.tsx

@@ -25,7 +25,7 @@ import { getErrorMessage } from '../../../common/utils';
 import { getWarningMessage } from './utils';
 
 const validationSchema = () =>
-  Yup.lazy<ProxyFieldsType>((values) =>
+  Yup.lazy((values: ProxyFieldsType) =>
     Yup.object<ProxyFieldsType>().shape({
       httpProxy: httpProxyValidationSchema({
         values,

package/lib/cim/components/modals/MassApproveAction.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DropdownItem } from '@patternfly/react-core';
+import { DropdownItem } from '@patternfly/react-core/deprecated';
 import { AgentK8sResource } from '../../types';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 

package/lib/cim/components/modals/MassApproveAgentModal.tsx

@@ -9,7 +9,6 @@ import {
   Stack,
   StackItem,
 } from '@patternfly/react-core';
-import { sortable } from '@patternfly/react-table';
 import { getAIHosts } from '../helpers';
 import { AgentK8sResource } from '../../types';
 import HostsTable from '../../../common/components/hosts/HostsTable';
@@ -28,7 +27,7 @@ type ApproveTableRowProps = {
 };
 
 const ApproveTableRow: React.FC<ApproveTableRowProps> = ({ agent, children }) => (
-  <div className={agent?.spec.approved ? 'pf-u-color-200' : undefined}>{children}</div>
+  <div className={agent?.spec.approved ? 'pf-v5-u-color-200' : undefined}>{children}</div>
 );
 
 const hostnameColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host> => {
@@ -38,7 +37,7 @@ const hostnameColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host
       props: {
         id: 'col-header-hostname', // ACM jest tests require id over testId
       },
-      transforms: [sortable],
+      sort: true,
     },
     cell: (host) => {
       const agent = agents.find((a) => a.metadata?.uid === host.id);
@@ -63,7 +62,7 @@ const statusColumn = (
       props: {
         id: 'col-header-status', // ACM jest tests require id over testId
       },
-      transforms: [sortable],
+      sort: true,
     },
     cell: (host) => {
       const agent = agents.find((a) => a.metadata?.uid === host.id);

package/lib/cim/components/modals/MassDeleteAgentModal.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { Button, Flex, FlexItem, Popover } from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { Link } from 'react-router-dom-v5-compat';
-import { sortable } from '@patternfly/react-table';
 import { global_palette_blue_300 as blueInfoColor } from '@patternfly/react-tokens/dist/js/global_palette_blue_300';
 import {
   getHostname,
@@ -35,7 +34,7 @@ const hostnameColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host
       props: {
         id: 'col-header-hostname', // ACM jest tests require id over testId
       },
-      transforms: [sortable],
+      sort: true,
     },
     cell: (host) => {
       const inventory = getInventory(host);
@@ -44,7 +43,9 @@ const hostnameColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host
         ?.clusterDeploymentName?.name;
       return {
         title: (
-          <div className={assignedToCluster ? 'pf-u-color-200' : undefined}>{computedHostname}</div>
+          <div className={assignedToCluster ? 'pf-v5-u-color-200' : undefined}>
+            {computedHostname}
+          </div>
         ),
         props: { 'data-testid': 'hostname' },
         sortableValue: computedHostname,
@@ -66,7 +67,7 @@ const statusColumn = (
       props: {
         id: 'col-header-status',
       },
-      transforms: [sortable],
+      sort: true,
     },
     cell: (host) => {
       const agent = agents.find((a) => a.metadata?.uid === host.id);

package/lib/cim/components/modals/ScaleUpModal.tsx

@@ -37,15 +37,15 @@ const getAgentsToAdd = (
   );
 
 const getValidationSchema = (agentsCount: number) => {
-  return Yup.lazy<ScaleUpFormValues>((values) => {
+  return Yup.lazy((values: ScaleUpFormValues) => {
     return Yup.object<ScaleUpFormValues>().shape({
       hostCount: Yup.number().min(1).max(agentsCount),
       autoSelectedHostIds: values.autoSelectHosts
-        ? Yup.array<string>().min(1).max(agentsCount)
-        : Yup.array<string>(),
+        ? Yup.array(Yup.string()).min(1).max(agentsCount)
+        : Yup.array(Yup.string()),
       selectedHostIds: values.autoSelectHosts
-        ? Yup.array<string>()
-        : Yup.array<string>().min(1).max(agentsCount),
+        ? Yup.array(Yup.string())
+        : Yup.array(Yup.string()).min(1).max(agentsCount),
     });
   });
 };

package/lib/cim/types/k8s/infra-env-k8s-resource.ts

@@ -25,6 +25,7 @@ export type InfraEnvK8sResource = K8sResourceCommon & {
     additionalNTPSources?: string[];
     cpuArchitecture?: 'x86_64' | 'arm64' | 's390x';
     osImageVersion?: string;
+    imageType?: 'full-iso' | 'minimal-iso';
   };
   status?: {
     agentLabelSelector?: Selector;

package/lib/common/api/assisted-service/SupportedOpenshiftVersionsAPI.ts

@@ -2,12 +2,14 @@ import { client } from '../../api/axiosClient';
 import { OpenshiftVersion } from '@openshift-assisted/types/assisted-installer-service';
 
 const SupportedOpenshiftVersionsAPI = {
-  makeBaseURI() {
-    return `/v2/openshift-versions`;
+  makeBaseURI(latestRelease: boolean) {
+    return `/v2/openshift-versions?only_latest=${latestRelease.toString()}`;
   },
 
-  list() {
-    return client.get<OpenshiftVersion[]>(`${SupportedOpenshiftVersionsAPI.makeBaseURI()}`);
+  list(latestRelease: boolean) {
+    return client.get<OpenshiftVersion[]>(
+      `${SupportedOpenshiftVersionsAPI.makeBaseURI(latestRelease)}`,
+    );
   },
 };
 

package/lib/common/api/utils.ts

@@ -18,7 +18,7 @@ type OnError = (arg0: unknown) => void;
 
 export const handleApiError = (error: unknown, onError?: OnError): void => {
   if (Axios.isCancel(error)) {
-    captureException(error, 'Request canceled', Sentry.Severity.Info);
+    captureException(error, 'Request canceled');
   } else if (isApiError(error)) {
     const config = error.config || { url: '', method: '' };
     let message = `URL: ${JSON.stringify(config.url, null, 1)}\n`;
@@ -102,10 +102,9 @@ export const captureException = (
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   error: any,
   message?: string,
-  severity: Sentry.Severity = Sentry.Severity.Error,
 ) => {
   if (isInOcm) {
-    message && Sentry.captureMessage(message, severity);
+    message && Sentry.captureMessage(message);
     Sentry.captureException(error);
   } else {
     // severity === Sentry.Severity.Error