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

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

package/lib/common/components/clusterConfiguration/CertificateFields.css

@@ -1,3 +1,3 @@
-.ai-certificate-fields .pf-c-check__body {
+.ai-certificate-fields .pf-v5-c-check__body {
   width: 100%;
 }

package/lib/common/components/clusterConfiguration/CertificateFields.tsx

@@ -1,7 +1,13 @@
 import React from 'react';
 import { useField, useFormikContext } from 'formik';
-import { Grid } from '@patternfly/react-core';
-import { CheckboxField, HelperText, PopoverIcon } from '../ui';
+import {
+  FormGroup,
+  FormHelperText,
+  Grid,
+  HelperText,
+  HelperTextItem,
+} from '@patternfly/react-core';
+import { CheckboxField, PopoverIcon } from '../ui';
 import { TrustedCertificateFieldsType } from '../../types';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
@@ -13,9 +19,17 @@ const FIELD_NAME = 'trustBundle';
 export const CertificateFieldsHelperText = ({ fieldId = FIELD_NAME }) => {
   const { t } = useTranslation();
   return (
-    <HelperText fieldId={fieldId}>
-      {t('ai:Paste in 1 or more PEM formatted certificates that you want the cluster to trust.')}
-    </HelperText>
+    <FormGroup>
+      <FormHelperText>
+        <HelperText id={fieldId}>
+          <HelperTextItem>
+            {t(
+              'ai:Paste in 1 or more PEM formatted certificates that you want the cluster to trust.',
+            )}
+          </HelperTextItem>
+        </HelperText>
+      </FormHelperText>
+    </FormGroup>
   );
 };
 export const CertificateInputFields = () => {

package/lib/common/components/clusterConfiguration/DiscoveryImageConfigForm.tsx

@@ -27,7 +27,7 @@ import { ProxyFieldsType, StatusErrorType } from '../../types';
 import ProxyFields from './ProxyFields';
 import UploadSSH from './UploadSSH';
 import DiscoveryImageTypeControlGroup from './DiscoveryImageTypeControlGroup';
-import { getOCPStaticIPDocLink } from '../../config/constants';
+import { getOCPStaticIPDocLink } from '../../config/docs_links';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 export const StaticIPInfo = ({ docVersion }: { docVersion?: string }) => {
@@ -56,7 +56,7 @@ export const StaticIPInfo = ({ docVersion }: { docVersion?: string }) => {
 export type DiscoveryImageFormValues = ImageCreateParams & ProxyFieldsType;
 
 const getValidationSchema = (allowEmpty: boolean) =>
-  Yup.lazy<DiscoveryImageFormValues>((values) =>
+  Yup.lazy((values: DiscoveryImageFormValues) =>
     Yup.object<DiscoveryImageFormValues>().shape({
       sshPublicKey: sshPublicKeyValidationSchema,
       httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy', allowEmpty }),

package/lib/common/components/clusterConfiguration/DiscoveryTroubleshootingModal.tsx

@@ -14,11 +14,11 @@ import {
   HelperTextItem,
 } from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
-import { PrismCode, SimpleAIPrismTheme } from '../ui';
+import { PrismCode, SimpleAIPrismTheme, UiIcon } from '../ui';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { Trans } from 'react-i18next';
 import { saveAs } from 'file-saver';
-import { CHANGE_ISO_PASSWORD_FILE_LINK } from '../../config/constants';
+import { CHANGE_ISO_PASSWORD_FILE_LINK } from '../../config/docs_links';
 import * as Sentry from '@sentry/browser';
 
 export const DiscoveryTroubleshootingModalContent = () => {
@@ -208,7 +208,7 @@ export const HostsNotShowingLink = ({
     <Button variant={ButtonVariant.link} onClick={() => setDiscoveryHintModalOpen(true)} isInline>
       {!isInline && (
         <>
-          <InfoCircleIcon size="sm" />
+          <UiIcon size="sm" icon={<InfoCircleIcon />} />
           &nbsp;
         </>
       )}

package/lib/common/components/clusterConfiguration/DiskEncryptionFields/DiskEncryptionControlGroup.tsx

@@ -30,12 +30,14 @@ export interface DiskEncryptionControlGroupProps {
   values: DiskEncryptionValues;
   isSNO: boolean;
   isDisabled?: boolean;
+  docVersion?: string;
 }
 
 const DiskEncryptionControlGroup = ({
   values,
   isSNO = false,
   isDisabled = false,
+  docVersion,
 }: DiskEncryptionControlGroupProps) => {
   const {
     enableDiskEncryptionOnMasters,
@@ -108,6 +110,7 @@ const DiskEncryptionControlGroup = ({
               diskEncryptionMode={diskEncryptionMode}
               isDisabled={isDisabled}
               tooltipProps={tooltipProps}
+              docVersion={docVersion || ''}
             />
           </StackItem>
         </RenderIf>

package/lib/common/components/clusterConfiguration/DiskEncryptionFields/DiskEncryptionMode.tsx

@@ -11,14 +11,14 @@ import {
   TooltipProps,
   Tooltip,
 } from '@patternfly/react-core';
-import { ENCRYPTING_DISK_DURING_INSTALLATION } from '../../../config';
+import { getEncryptingDiskDuringInstallationDocsLink } from '../../../config';
 import PopoverIcon from '../../ui/PopoverIcon';
 import { RadioField } from '../../ui/formik';
 import { TangServers } from './TangServers';
 import { DiskEncryption } from '@openshift-assisted/types/assisted-installer-service';
 import { useTranslation } from '../../../hooks/use-translation-wrapper';
 
-const DiskEncryptionModeTPMv2 = () => {
+const DiskEncryptionModeTPMv2 = ({ docVersion }: { docVersion: string }) => {
   const { t } = useTranslation();
   return (
     <>
@@ -32,7 +32,11 @@ const DiskEncryptionModeTPMv2 = () => {
               'ai:TPM v2 stores passphrases in a secure cryptoprocessor contained within as server.',
             )}
             &nbsp;
-            <a href={ENCRYPTING_DISK_DURING_INSTALLATION} target="_blank" rel="noopener noreferrer">
+            <a
+              href={getEncryptingDiskDuringInstallationDocsLink(docVersion)}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               {t('ai:Learn more')} <ExternalLinkAltIcon />
             </a>
           </p>
@@ -42,7 +46,7 @@ const DiskEncryptionModeTPMv2 = () => {
   );
 };
 
-const DiskEncryptionModeTang = () => {
+const DiskEncryptionModeTang = ({ docVersion }: { docVersion: string }) => {
   const { t } = useTranslation();
   return (
     <>
@@ -53,7 +57,11 @@ const DiskEncryptionModeTang = () => {
         bodyContent={
           <p>
             {t('ai:Tang server component that enable network-bound disk encryption (NBDE).')} &nbsp;
-            <a href={ENCRYPTING_DISK_DURING_INSTALLATION} target="_blank" rel="noopener noreferrer">
+            <a
+              href={getEncryptingDiskDuringInstallationDocsLink(docVersion)}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               {t('ai:Learn more')} <ExternalLinkAltIcon />
             </a>
           </p>
@@ -67,12 +75,14 @@ export interface DiskEncryptionModeProps {
   isDisabled: boolean;
   diskEncryptionMode: DiskEncryption['mode'];
   tooltipProps: TooltipProps;
+  docVersion: string;
 }
 
 export const DiskEncryptionMode = ({
   diskEncryptionMode,
   isDisabled,
   tooltipProps,
+  docVersion,
 }: DiskEncryptionModeProps) => {
   const { t } = useTranslation();
   return (
@@ -84,7 +94,7 @@ export const DiskEncryptionMode = ({
               <RadioField
                 isDisabled={isDisabled}
                 name="diskEncryptionMode"
-                label={<DiskEncryptionModeTPMv2 />}
+                label={<DiskEncryptionModeTPMv2 docVersion={docVersion} />}
                 id="TPMV2-button"
                 value="tpmv2"
               />
@@ -95,7 +105,7 @@ export const DiskEncryptionMode = ({
               <RadioField
                 isDisabled={isDisabled}
                 name="diskEncryptionMode"
-                label={<DiskEncryptionModeTang />}
+                label={<DiskEncryptionModeTang docVersion={docVersion} />}
                 id="tang-button"
                 value="tang"
               />

package/lib/common/components/clusterConfiguration/DownloadIpxeScript.tsx

@@ -18,7 +18,7 @@ import { useTranslation } from '../../hooks/use-translation-wrapper';
 export type DownloadISOProps = {
   isSNO?: boolean;
   fileName?: string;
-  downloadUrl?: string;
+  downloadUrl: string;
   onClose: () => void;
   onReset?: () => void;
 };

package/lib/common/components/clusterConfiguration/DownloadIso.tsx

@@ -15,12 +15,14 @@ import { DetailItem, DetailList } from '../ui';
 import DiscoveryInstructions from './DiscoveryInstructions';
 import { StaticIPInfo } from './DiscoveryImageConfigForm';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+import { getCiscoIntersightLink } from '../../config';
 
 export type DownloadISOProps = {
   hasDHCP?: boolean;
   isSNO?: boolean;
   fileName?: string;
-  downloadUrl?: string;
+  downloadUrl: string;
   onClose: () => void;
   onReset?: () => void;
   docVersion?: string;
@@ -58,6 +60,17 @@ const DownloadIso = ({
               <StaticIPInfo docVersion={docVersion} />
             </StackItem>
           )}
+          <StackItem>
+            <Button
+              variant="link"
+              icon={<ExternalLinkAltIcon />}
+              iconPosition="right"
+              isInline
+              onClick={() => window.open(getCiscoIntersightLink(downloadUrl), '_blank', 'noopener')}
+            >
+              {t('ai:Add hosts from Cisco Intersight')}
+            </Button>
+          </StackItem>
           <StackItem>
             <DetailList>
               <DetailItem

package/lib/common/components/clusterConfiguration/OpenShiftVersionSelect.tsx

@@ -2,11 +2,10 @@ import React from 'react';
 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 { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
-import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
-import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
+
 import { OPENSHIFT_LIFE_CYCLE_DATES_LINK } from '../../config';
 import { OpenshiftVersionOptionType } from '../../types';
-import { SelectField } from '../ui';
+import { SelectField, UiIcon } from '../ui';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { SelectFieldProps } from '../ui/formik/types';
 
@@ -26,7 +25,7 @@ const getOpenshiftVersionHelperText =
     if (!versions.length) {
       return (
         <>
-          <ExclamationCircleIcon color={dangerColor.value} size="sm" />
+          <UiIcon size="sm" status="danger" icon={<ExclamationCircleIcon />} />
           &nbsp; {t('ai:No release image is available.')}
         </>
       );
@@ -36,10 +35,13 @@ const getOpenshiftVersionHelperText =
       return null;
     }
 
-    if (selectedVersion.supportLevel !== 'production') {
+    if (
+      selectedVersion.supportLevel !== 'production' &&
+      selectedVersion.supportLevel !== 'maintenance'
+    ) {
       return (
         <>
-          <ExclamationTriangleIcon color={warningColor.value} size="sm" />
+          <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
           &nbsp;{t('ai:Please note that this version is not production-ready.')}&nbsp;
           <OpenShiftLifeCycleDatesLink />
         </>
@@ -56,12 +58,10 @@ type OpenShiftVersionSelectProps = {
 const OpenShiftVersionSelect: React.FC<OpenShiftVersionSelectProps> = ({ versions, onChange }) => {
   const selectOptions = React.useMemo(
     () =>
-      versions
-        .filter((version) => version.supportLevel !== 'maintenance')
-        .map((version) => ({
-          label: version.label,
-          value: version.value,
-        })),
+      versions.map((version) => ({
+        label: version.label,
+        value: version.value,
+      })),
     [versions],
   );
   const { t } = useTranslation();

package/lib/common/components/clusterConfiguration/ProxyFields.css

@@ -1,3 +1,3 @@
-.ai-proxy-fields .pf-c-check__body {
+.ai-proxy-fields .pf-v5-c-check__body {
   width: 100%;
 }

package/lib/common/components/clusterConfiguration/SecurityFields.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { useFormikContext } from 'formik';
-import { Checkbox, FormGroup } from '@patternfly/react-core';
+import { Checkbox, FormGroup, HelperText, HelperTextItem } from '@patternfly/react-core';
 
 import { RenderIf } from '../ui/RenderIf';
-import { getFieldId, HelperText, TextAreaField, trimSshPublicKey, ExternalLink } from '../ui';
+import { getFieldId, TextAreaField, trimSshPublicKey, ExternalLink } from '../ui';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { NetworkConfigurationValues } from '../../types/clusters';
 import { SSH_GENERATION_DOC_LINK } from '../../config';
@@ -14,11 +14,13 @@ export const SshPublicKeyHelperText: React.FC<{
 }> = ({ fieldId = 'sshPublicKey' }) => {
   const { t } = useTranslation();
   return (
-    <HelperText fieldId={fieldId}>
-      {t(
-        'ai:Paste the content of a public ssh key you want to use to connect to the hosts into this field.',
-      )}{' '}
-      <ExternalLink href={SSH_GENERATION_DOC_LINK}>{t('ai:Learn more')}</ExternalLink>
+    <HelperText id={fieldId}>
+      <HelperTextItem>
+        {t(
+          'ai:Paste the content of a public ssh key you want to use to connect to the hosts into this field.',
+        )}{' '}
+        <ExternalLink href={SSH_GENERATION_DOC_LINK}>{t('ai:Learn more')}</ExternalLink>
+      </HelperTextItem>
     </HelperText>
   );
 };
@@ -38,11 +40,9 @@ const SecurityFields = ({
   //clusterSshKey updating causes the textarea to disappear when the user clears it to edit it
   const defaultShareSshKey = !!imageSshKey && (clusterSshKey === imageSshKey || !clusterSshKey);
   const [shareSshKey, setShareSshKey] = React.useState(defaultShareSshKey);
-  const { values, setFieldValue, errors, touched } =
+  const { values, setFieldValue } =
     useFormikContext<Pick<NetworkConfigurationValues, 'sshPublicKey'>>();
 
-  const errorMsg = errors.sshPublicKey;
-
   const handleSshKeyBlur = () => {
     if (values.sshPublicKey) {
       setFieldValue('sshPublicKey', trimSshPublicKey(values.sshPublicKey));
@@ -62,7 +62,6 @@ const SecurityFields = ({
       <FormGroup
         fieldId={fieldId}
         label={t('ai:Host SSH Public Key for troubleshooting after installation')}
-        validated={touched && errorMsg ? 'error' : 'default'}
       >
         <RenderIf condition={Boolean(imageSshKey)}>
           <Checkbox
@@ -72,7 +71,7 @@ const SecurityFields = ({
             aria-describedby={`${fieldId}-helper`}
             isChecked={shareSshKey}
             isDisabled={isDisabled}
-            onChange={setShareSshKey}
+            onChange={(_event, value) => setShareSshKey(value)}
           />
         </RenderIf>
         <RenderIf condition={!shareSshKey}>

package/lib/common/components/clusterConfiguration/UploadSSH.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useField } from 'formik';
 
-import { PopoverIcon, trimSshPublicKey, UploadField } from '../ui';
+import { PopoverIcon, UploadField, trimSshPublicKey } from '../ui';
 import { SshPublicKeyHelperText } from './SecurityFields';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
@@ -11,7 +11,7 @@ type UploadSSHProps = {
 };
 
 const UploadSSH: React.FC<UploadSSHProps> = ({ isRequired, labelText }) => {
-  const [{ name, value }, , { setValue }] = useField<string>('sshPublicKey');
+  const [{ name }, , { setValue }] = useField<string>('sshPublicKey');
   const { t } = useTranslation();
   const defaultLabelText = t(
     'ai:Provide an SSH key to be able to connect to the hosts for debugging purposes during the discovery process',
@@ -27,16 +27,8 @@ const UploadSSH: React.FC<UploadSSHProps> = ({ isRequired, labelText }) => {
       name={name}
       helperText={<SshPublicKeyHelperText />}
       idPostfix="discovery"
-      onBlur={() => value && setValue(trimSshPublicKey(value))}
-      dropzoneProps={{
-        accept: '.pub',
-        maxSize: 2048,
-        onDropRejected:
-          ({ setError }) =>
-          () =>
-            setError(t('ai:File not supported.')),
-      }}
       isRequired={isRequired}
+      onBlur={(_event, value) => value && setValue(trimSshPublicKey(value))}
     />
   );
 };

package/lib/common/components/clusterConfiguration/utils.ts

@@ -9,7 +9,7 @@ import {
   MachineNetwork,
   ServiceNetwork,
 } from '@openshift-assisted/types/assisted-installer-service';
-import { NETWORK_TYPE_OVN, NETWORK_TYPE_SDN, NO_SUBNET_SET } from '../../config';
+import { NO_SUBNET_SET } from '../../config';
 import {
   selectClusterNetworkCIDR,
   selectClusterNetworkHostPrefix,
@@ -173,10 +173,6 @@ export const canSelectNetworkTypeSDN = (isSNO: boolean, isIPv6 = false) => {
   return !(isSNO || isIPv6);
 };
 
-export const getDefaultNetworkType = (isSNO: boolean, isIPv6 = false) => {
-  return isSNO || isIPv6 ? NETWORK_TYPE_OVN : NETWORK_TYPE_SDN;
-};
-
 export const canBeDualStack = (subnets: HostSubnets) =>
   subnets.some((subnet) => Address4.isValid(subnet.subnet)) &&
   subnets.some((subnet) => Address6.isValid(subnet.subnet));

package/lib/common/components/clusterDetail/ConsoleModal.tsx

@@ -84,14 +84,14 @@ export const WebConsoleHint: React.FC<WebConsoleHintProps> = ({ cluster, console
       </Text>
       <ModalExpandableSection
         toggleText={t('ai:Option 1: Add the following records to your DNS server (recommended)')}
-        className="pf-u-pb-md"
+        className="pf-v5-u-pb-md"
         isExpanded={isDNSExpanded}
         onToggle={handleToggle}
         requiredList={aRecords}
       />
       <ModalExpandableSection
         toggleText={t('ai:Option 2: Update your local /etc/hosts or /etc/resolv.conf files')}
-        className="pf-u-pb-md"
+        className="pf-v5-u-pb-md"
         isExpanded={!isDNSExpanded}
         onToggle={handleToggle}
         requiredList={etcHosts}

package/lib/common/components/clusterDetail/FinalizingProgress.tsx

@@ -7,8 +7,8 @@ import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-cir
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
 import { PendingIcon } from '@patternfly/react-icons/dist/js/icons/pending-icon';
-import { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/esm/global_success_color_100';
-import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/esm/global_danger_color_100';
+import { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/js/global_success_color_100';
+import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
 import ClusterProgressItem from './ClusterProgressItem';
 import capitalize from 'lodash-es/capitalize.js';
 import { useTranslation } from '../../hooks/use-translation-wrapper';

package/lib/common/components/clusterDetail/ProgressBarTexts.tsx

@@ -3,8 +3,8 @@ import { Host, HostRole } from '@openshift-assisted/types/assisted-installer-ser
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
-import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/esm/global_danger_color_100';
-import { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/esm/global_success_color_100';
+import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
+import { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/js/global_success_color_100';
 import ClusterProgressItem from './ClusterProgressItem';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 

package/lib/common/components/clusterWizard/ClusterWizardStep.css

@@ -1,9 +1,9 @@
-.cluster-wizard-step .pf-c-wizard__nav-item {
+.cluster-wizard-step .pf-v5-c-wizard__nav-item {
   white-space: nowrap;
 }
 
 .wizard-nav-item-warning-icon {
-  margin-left: var(--pf-global--spacer--sm);
+  margin-left: var(--pf-v5-global--spacer--sm);
 }
 
 .cluster-wizard .cluster-wizard-step__footer {
@@ -15,16 +15,16 @@
   display: block !important;
 }
 
-.cluster-wizard.pf-c-wizard {
-  --pf-c-wizard__nav--Width: 19rem;
+.cluster-wizard.pf-v5-c-wizard {
+  --pf-v5-c-wizard__nav--Width: 19rem;
 }
 
-.pf-c-wizard__inner-wrap {
+.pf-v5-c-wizard__inner-wrap {
   overflow: auto;
 }
 
 @media (min-width: 768px) {
-  .cluster-wizard .cluster-wizard-step .pf-c-wizard__main {
+  .cluster-wizard .cluster-wizard-step .pf-v5-c-wizard__main {
     /* That breaks scrollbar in the ClusterDeployment wizard. As a fix, the "cluster-wizard" class is on the ClusterWizard and CreateClusterWizard only. */
     overflow: inherit !important;
   }

package/lib/common/components/clusterWizard/ClusterWizardStep.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { WizardBody, WizardBodyProps } from '@patternfly/react-core';
+import { WizardBody, WizardBodyProps } from '@patternfly/react-core/deprecated';
 import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 
 import './ClusterWizardStep.css';
 
@@ -10,7 +9,7 @@ type ClusterWizardStepProps = {
   navigation?: React.ReactNode;
 };
 
-const ClusterWizardStep = ({
+export const ClusterWizardStep = ({
   navigation,
   footer,
   children,
@@ -18,16 +17,16 @@ const ClusterWizardStep = ({
   // activeStep is required, but we're not passing it. Using the cast to avoid TS error
   const activeStep = undefined as unknown as WizardBodyProps['activeStep'];
   return (
-    <div className={css(styles.wizardOuterWrap, 'cluster-wizard-step')}>
-      <div className={css(styles.wizardInnerWrap)}>
+    <div className={css('pf-v5-c-wizard__outer-wrap', 'cluster-wizard-step')}>
+      <div className={css('pf-v5-c-wizard__inner-wrap')}>
         {navigation}
         <WizardBody aria-labelledby="step-id" hasNoBodyPadding={false} activeStep={activeStep}>
           {children}
         </WizardBody>
       </div>
-      {footer && <div className="pf-c-wizard__footer cluster-wizard-step__footer">{footer}</div>}
+      {footer && <div className="pf-v5-c-wizard__footer cluster-wizard-step__footer">{footer}</div>}
     </div>
   );
 };
 
-export default ClusterWizardStep;
+// export default ClusterWizardStep;

package/lib/common/components/clusterWizard/ClusterWizardStepValidationsAlert.tsx

@@ -10,7 +10,10 @@ import {
   ListItem,
 } from '@patternfly/react-core';
 import { checkHostValidations, WizardStepsValidationMap } from './validationsInfoUtils';
-import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import {
+  Cluster,
+  LastInstallationPreparation,
+} from '@openshift-assisted/types/assisted-installer-service';
 import { ValidationsInfo } from '../../types/clusters';
 import { ValidationsInfo as HostValidationsInfo } from '../../types/hosts';
 import { ClusterWizardStepHostStatusDeterminationObject } from '../../types/hosts';
@@ -20,6 +23,7 @@ import {
 } from './validationsInfoUtils';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { stringToJSON } from '../../utils';
+import { UISettingsValues } from '../../types';
 
 type ClusterWizardStepValidationsAlertProps<ClusterWizardStepsType extends string> = {
   currentStepId: ClusterWizardStepsType;
@@ -28,6 +32,8 @@ type ClusterWizardStepValidationsAlertProps<ClusterWizardStepsType extends strin
   hosts: ClusterWizardStepHostStatusDeterminationObject[];
   wizardStepsValidationsMap: WizardStepsValidationMap<ClusterWizardStepsType>;
   children?: React.ReactNode;
+  lastInstallationPreparation?: LastInstallationPreparation | undefined;
+  uiSettings?: UISettingsValues;
 };
 
 const ClusterWizardStepValidationsAlert = <ClusterWizardStepsType extends string>({
@@ -37,7 +43,13 @@ const ClusterWizardStepValidationsAlert = <ClusterWizardStepsType extends string
   hosts,
   wizardStepsValidationsMap,
   children,
+  lastInstallationPreparation,
+  uiSettings,
 }: ClusterWizardStepValidationsAlertProps<ClusterWizardStepsType>) => {
+  const [showInstallAlert, setShowInstallAlert] = React.useState(
+    lastInstallationPreparation && lastInstallationPreparation.status === 'failed',
+  );
+
   const { failedClusterValidations, failedHostnameValidations } = React.useMemo(() => {
     const reducedValidationsInfo = getWizardStepClusterValidationsInfo(
       validationsInfo || {},
@@ -64,6 +76,15 @@ const ClusterWizardStepValidationsAlert = <ClusterWizardStepsType extends string
     };
   }, [validationsInfo, currentStepId, wizardStepsValidationsMap, hosts]);
 
+  React.useEffect(() => {
+    if (
+      lastInstallationPreparation?.reason?.includes('manifest') &&
+      uiSettings?.customManifestsUpdated
+    ) {
+      setShowInstallAlert(false);
+    }
+  }, [lastInstallationPreparation, uiSettings]);
+
   const isClusterReady =
     getWizardStepClusterStatus(
       currentStepId,
@@ -111,6 +132,15 @@ const ClusterWizardStepValidationsAlert = <ClusterWizardStepsType extends string
           </Alert>
         </AlertGroup>
       )}
+      {showInstallAlert && (
+        <AlertGroup>
+          <Alert variant={AlertVariant.danger} title="Error in preparing installation" isInline>
+            <Flex spaceItems={{ default: 'spaceItemsSm' }} direction={{ default: 'column' }}>
+              <FlexItem>{lastInstallationPreparation?.reason}</FlexItem>
+            </Flex>
+          </Alert>
+        </AlertGroup>
+      )}
     </>
   );
 };