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

package/lib/ocm/components/clusterConfiguration/platformIntegration/ExternalPlatformDropdown.tsx

@@ -2,14 +2,12 @@ import React, { MouseEvent } from 'react';
 import {
   Button,
   ButtonVariant,
-  Dropdown,
-  DropdownItem,
-  DropdownToggle,
   FormGroup,
   Split,
   SplitItem,
   Tooltip,
 } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
 import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
 import { useField } from 'formik';
 import {
@@ -32,7 +30,6 @@ const INPUT_NAME = 'platform';
 const fieldId = getFieldId(INPUT_NAME, 'input');
 
 type ExternalPlatformDropdownProps = {
-  showOciOption: boolean;
   onChange: (selectedPlatform: PlatformType) => void;
   cpuArchitecture?: SupportedCpuArchitecture;
   featureSupportLevelData: NewFeatureSupportLevelMap | null;
@@ -70,13 +67,12 @@ const getDisabledReasonForExternalPlatform = (
 };
 
 const getExternalPlatformTypes = (
-  showOciOption: boolean,
   isSNO: boolean,
   newFeatureSupportLevelContext: NewFeatureSupportLevelData,
   featureSupportLevelData?: NewFeatureSupportLevelMap | null,
   cpuArchitecture?: SupportedCpuArchitecture,
 ): Partial<{ [key in PlatformType]: ExternalPlatformInfo }> => {
-  const platforms = ['none', 'nutanix', showOciOption && 'external', 'vsphere'] as PlatformType[];
+  const platforms = ['none', 'nutanix', 'external', 'vsphere'] as PlatformType[];
 
   return platforms.filter(Boolean).reduce(
     (a, platform) => ({
@@ -118,7 +114,6 @@ const getReasonForDropdownDisabled = (isSNO: boolean, labelCpuArch: string): str
 };
 
 export const ExternalPlatformDropdown = ({
-  showOciOption,
   onChange,
   cpuArchitecture,
   featureSupportLevelData,
@@ -143,7 +138,6 @@ export const ExternalPlatformDropdown = ({
   React.useEffect(() => {
     // Calculate updated externalPlatformTypes based on the dependencies
     const updatedExternalPlatformTypes = getExternalPlatformTypes(
-      showOciOption,
       isSNO,
       newFeatureSupportLevelContext,
       featureSupportLevelData,
@@ -228,10 +222,10 @@ export const ExternalPlatformDropdown = ({
   const toggle = React.useMemo(
     () => (
       <DropdownToggle
-        onToggle={(val: boolean) => setOpen(val)}
+        onToggle={(_event, val) => setOpen(val)}
         toggleIndicator={CaretDownIcon}
         isText
-        className="pf-u-w-100"
+        className="pf-v5-u-w-100"
         isDisabled={dropdownIsDisabled}
       >
         {externalPlatformTypes[field.value as PlatformType]?.label}
@@ -258,7 +252,7 @@ export const ExternalPlatformDropdown = ({
           dropdownItems={enabledItems}
           toggle={toggle}
           isOpen={isOpen}
-          className="pf-u-w-100"
+          className="pf-v5-u-w-100"
           onSelect={onSelect}
           disabled={dropdownIsDisabled}
         />

package/lib/ocm/components/clusterConfiguration/platformIntegration/PlatformIntegrationNote.tsx

@@ -1,14 +1,13 @@
 import React from 'react';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
-import { SupportedPlatformType } from '../../../../common';
+import { UiIcon, SupportedPlatformType } from '../../../../common';
 import { ExternalPlatformLinks } from './constants';
 
 const PlatformIntegrationNote = ({ platformType }: { platformType: SupportedPlatformType }) => {
   const integrationPlatformLink = ExternalPlatformLinks[platformType];
   return (
     <p>
-      <ExclamationTriangleIcon color={warningColor.value} size="sm" /> You will need to modify your
+      <UiIcon status="warning" icon={<ExclamationTriangleIcon />} /> You will need to modify your
       platform configuration after cluster installation is completed.{' '}
       {!!integrationPlatformLink && (
         <a

package/lib/ocm/components/clusterConfiguration/platformIntegration/constants.tsx

@@ -1,4 +1,4 @@
-import { NUTANIX_CONFIG_LINK, VSPHERE_CONFIG_LINK } from '../../../../common';
+import { NUTANIX_CONFIG_LINK, OCI_CONFIG_LINK, VSPHERE_CONFIG_LINK } from '../../../../common';
 import { PlatformType } from '@openshift-assisted/types/assisted-installer-service';
 
 export const ExternalPlatformLabels: { [key in PlatformType]: string } = {
@@ -12,6 +12,7 @@ export const ExternalPlatformLabels: { [key in PlatformType]: string } = {
 export const ExternalPlatformLinks: Partial<{ [key in PlatformType]: string }> = {
   nutanix: NUTANIX_CONFIG_LINK,
   vsphere: VSPHERE_CONFIG_LINK,
+  external: OCI_CONFIG_LINK,
 };
 
 export const ExternalPlaformIds: { [key in PlatformType]: string } = {

package/lib/ocm/components/clusterConfiguration/review/ReviewCluster.css

@@ -8,22 +8,24 @@
   padding-left: 0;
 }
 
-.review-expandable > .pf-c-expandable-section__toggle {
+.review-expandable > .pf-v5-c-expandable-section__toggle {
   margin-right: 0;
   width: 100%;
   display: inline-flex;
 }
 
-.review-expandable .pf-c-expandable-section__toggle-text {
+.review-expandable .pf-v5-c-expandable-section__toggle-text {
   width: 100%;
 }
 
-.summary-expandable .pf-c-expandable-section__toggle,
-.review-expandable > .pf-c-expandable-section__toggle {
+.summary-expandable .pf-v5-c-expandable-section__toggle,
+.review-expandable > .pf-v5-c-expandable-section__toggle {
   color: initial;
   text-align: left;
 }
 
-.summary-expandable > .pf-c-expandable-section__toggle > .pf-c-expandable-section__toggle-icon {
+.summary-expandable
+  > .pf-v5-c-expandable-section__toggle
+  > .pf-v5-c-expandable-section__toggle-icon {
   visibility: hidden;
 }

package/lib/ocm/components/clusterConfiguration/review/ReviewClusterDetailTable.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Table, TableBody, TableVariant } from '@patternfly/react-table';
+import { Table, TableVariant, Tbody, Td, Tr } from '@patternfly/react-table';
 import { genericTableRowKey, getDefaultCpuArchitecture } from '../../../../common';
 import { getDiskEncryptionEnabledOnStatus } from '../../clusterDetail/ClusterProperties';
 import OpenShiftVersionDetail from '../../clusterDetail/OpenShiftVersionDetail';
@@ -63,6 +63,7 @@ export const ReviewClusterDetailTable = ({ cluster }: { cluster: Cluster }) => {
         ],
       },
     ];
+
     const diskEncryptionTitle = getDiskEncryptionEnabledOnStatus(cluster.diskEncryption?.enableOn);
     if (diskEncryptionTitle) {
       rows.push({
@@ -81,14 +82,22 @@ export const ReviewClusterDetailTable = ({ cluster }: { cluster: Cluster }) => {
 
   return (
     <Table
-      rows={rows}
-      cells={['', '']}
       variant={TableVariant.compact}
       borders={false}
       aria-label={'Cluster details review table'}
       className="review-table"
     >
-      <TableBody rowKey={genericTableRowKey} />
+      <Tbody>
+        {rows.map((row, i) => (
+          <Tr key={genericTableRowKey(row.rowId)}>
+            {row.cells.map((cell, j) => (
+              <Td key={`cell-${i}-${j}`} {...cell.props}>
+                {cell.title}
+              </Td>
+            ))}
+          </Tr>
+        ))}
+      </Tbody>
     </Table>
   );
 };

package/lib/ocm/components/clusterConfiguration/review/ReviewCustomManifestsTable.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Table, TableVariant, TableBody } from '@patternfly/react-table';
+import { Table, TableVariant, Tbody, Td, Tr } from '@patternfly/react-table';
 import { Alert } from '@patternfly/react-core';
 import { ListManifestsExtended } from '../manifestsConfiguration/data/dataTypes';
 import { genericTableRowKey } from '../../../../common';
@@ -27,14 +27,22 @@ export const ReviewCustomManifestsTable = ({ manifests }: { manifests: ListManif
   return (
     <>
       <Table
-        rows={rows}
-        cells={['']}
         variant={TableVariant.compact}
         borders={false}
         className="review-table"
         aria-label="Custom manifests review table"
       >
-        <TableBody rowKey={genericTableRowKey} />
+        <Tbody>
+          {rows.map((row, i) => (
+            <Tr key={genericTableRowKey(row.rowId)}>
+              {row.cells.map((cell, j) => (
+                <Td key={`cell-${i}-${j}`} {...cell.props}>
+                  {cell.title}
+                </Td>
+              ))}
+            </Tr>
+          ))}
+        </Tbody>
       </Table>
       <Alert
         isInline

package/lib/ocm/components/clusterConfiguration/review/ReviewNetworkingTable.tsx

@@ -1,5 +1,5 @@
 import { Title } from '@patternfly/react-core';
-import { Table, TableVariant, TableBody, TableProps } from '@patternfly/react-table';
+import { Table, TableVariant, Tbody, Td, Tr } from '@patternfly/react-table';
 import React from 'react';
 import {
   genericTableRowKey,
@@ -14,11 +14,14 @@ import {
 } from '../../clusterDetail/ClusterProperties';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 
-const dummyCells = ['', '', ''];
+type ReviewTableRowsType = {
+  rowId: string;
+  cells: { title: string | React.ReactNode; props?: object }[];
+}[];
 
 export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
   const rows = React.useMemo(() => {
-    const networkRows: TableProps['rows'] = [
+    const networkRows = [
       {
         rowId: 'network-management',
         cells: [
@@ -39,7 +42,7 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
           },
         ],
       },
-    ];
+    ] as ReviewTableRowsType;
 
     !!cluster.machineNetworks?.length &&
       networkRows.push({
@@ -55,7 +58,7 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
             )),
             props: { 'data-testid': 'machine-networks' },
           },
-          isDualStack(cluster) && { title: 'Primary' },
+          isDualStack(cluster) ? { title: 'Primary' } : { title: '' },
         ],
       });
 
@@ -93,7 +96,7 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
       {
         rowId: 'cluster-network-cidr',
         cells: [
-          'Cluster network CIDR',
+          { title: 'Cluster network CIDR' },
           {
             title: cluster.clusterNetworks?.map((network) => (
               <span key={network.cidr}>
@@ -104,12 +107,12 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
             props: { 'data-testid': 'cluster-network-cidr' },
           },
           isDualStack(cluster) && { title: 'Primary' },
-        ],
+        ].filter(Boolean),
       },
       {
         rowId: 'cluster-network-host-prefix',
         cells: [
-          'Cluster network host prefix',
+          { title: 'Cluster network host prefix' },
           {
             title: cluster.clusterNetworks?.map((network) => (
               <span key={network.hostPrefix}>
@@ -120,12 +123,12 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
             props: { 'data-testid': 'cluster-network-prefix' },
           },
           isDualStack(cluster) && { title: 'Primary' },
-        ],
+        ].filter(Boolean),
       },
       {
         rowId: 'service-network-cidr',
         cells: [
-          'Service network CIDR',
+          { title: 'Service network CIDR' },
           {
             title: cluster.serviceNetworks?.map((network) => (
               <span key={network.cidr}>
@@ -136,48 +139,64 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
             props: { 'data-testid': 'service-network-cidr' },
           },
           isDualStack(cluster) && { title: 'Primary' },
-        ],
+        ].filter(Boolean),
       },
       {
         rowId: 'networking-type',
         cells: [
-          'Networking type',
+          { title: 'Networking type' },
           {
             title: getNetworkType(cluster.networkType),
             props: { 'data-testid': 'networking-type', colSpan: 2 },
           },
         ],
       },
-    ];
+    ] as ReviewTableRowsType;
   }, [cluster]);
 
   return (
     <>
       <Table
-        rows={rows}
-        cells={dummyCells}
         variant={TableVariant.compact}
         borders={false}
         className={'review-table'}
         aria-label={'Networking review table'}
       >
-        <TableBody rowKey={genericTableRowKey} />
+        <Tbody>
+          {rows.map((row, i) => (
+            <Tr key={genericTableRowKey(row.rowId)}>
+              {row.cells.map((cell, j) => (
+                <Td key={`cell-${i}-${j}`} {...cell.props}>
+                  {cell.title}
+                </Td>
+              ))}
+            </Tr>
+          ))}
+        </Tbody>
       </Table>
 
       <br />
-      <Title className="pf-u-color-400" headingLevel="h4">
+      <Title className="pf-v5-u-color-400" headingLevel="h4">
         Advanced networking settings
       </Title>
 
       <Table
-        rows={rowsAdvanced}
-        cells={dummyCells}
         variant={TableVariant.compact}
         borders={false}
         className={'review-table'}
         aria-label={'Advanced networking review table'}
       >
-        <TableBody rowKey={genericTableRowKey} />
+        <Tbody>
+          {rowsAdvanced.map((row, i) => (
+            <Tr key={genericTableRowKey(row.rowId)}>
+              {row.cells.map((cell, j) => (
+                <Td key={`cell-${i}-${j}`} {...cell.props}>
+                  {cell.title}
+                </Td>
+              ))}
+            </Tr>
+          ))}
+        </Tbody>
       </Table>
     </>
   );

package/lib/ocm/components/clusterConfiguration/review/ReviewOperatorsTable.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Table, TableVariant, TableBody } from '@patternfly/react-table';
+import { Table, TableVariant, Tbody, Td, Tr } from '@patternfly/react-table';
 import {
   ExposedOperatorNames,
   hasEnabledOperators,
@@ -21,7 +21,7 @@ export const ReviewOperatorsTable = ({ cluster }: { cluster: Cluster }) => {
     ).map((operator) => ({
       rowId: `operator-${operator}`,
       cells: [
-        operatorNames[operator],
+        { title: operatorNames[operator] },
         {
           title: 'Enabled',
           props: { 'data-testid': `operator-${operator}` },
@@ -32,14 +32,22 @@ export const ReviewOperatorsTable = ({ cluster }: { cluster: Cluster }) => {
 
   return (
     <Table
-      rows={rows}
-      cells={['', '']}
       variant={TableVariant.compact}
       borders={false}
       aria-label={'Operators review table'}
       className="review-table"
     >
-      <TableBody rowKey={genericTableRowKey} />
+      <Tbody>
+        {rows.map((row, i) => (
+          <Tr key={genericTableRowKey(row.rowId)}>
+            {row.cells.map((cell, j) => (
+              <Td key={`cell-${i}-${j}`} {...cell.props}>
+                {cell.title}
+              </Td>
+            ))}
+          </Tr>
+        ))}
+      </Tbody>
     </Table>
   );
 };

package/lib/ocm/components/clusterConfiguration/review/ReviewPlatformTable.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Table, TableVariant, Tbody, Td, Tr } from '@patternfly/react-table';
+import { genericTableRowKey } from '../../../../common';
+import { Cluster, PlatformType } from '@openshift-assisted/types/assisted-installer-service';
+import { ExternalPlatformLabels } from '../platformIntegration/constants';
+
+export const ReviewPlatformTable = ({ cluster }: { cluster: Cluster }) => {
+  const rows = React.useMemo(() => {
+    return [
+      {
+        rowId: 'platform',
+        cells: [
+          { title: 'Platform' },
+          {
+            title: ExternalPlatformLabels[cluster.platform?.type as PlatformType],
+            props: { 'data-testid': 'platform-type' },
+          },
+        ],
+      },
+    ];
+  }, [cluster.platform?.type]);
+
+  return (
+    <Table
+      variant={TableVariant.compact}
+      borders={false}
+      aria-label={'Platform'}
+      className="review-table"
+    >
+      <Tbody>
+        {rows.map((row, i) => (
+          <Tr key={genericTableRowKey(row.rowId)}>
+            {row.cells.map((cell, j) => (
+              <Td key={`cell-${i}-${j}`} {...cell.props}>
+                {cell.title}
+              </Td>
+            ))}
+          </Tr>
+        ))}
+      </Tbody>
+    </Table>
+  );
+};

package/lib/ocm/components/clusterConfiguration/review/ReviewPreflightChecks.tsx

@@ -14,12 +14,15 @@ import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/e
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/js/global_success_color_100';
 import { global_info_color_100 as infoColor } from '@patternfly/react-tokens/dist/js/global_info_color_100';
-import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
-import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
-
-import { ClusterValidations, DetailItem, DetailList, HostsValidations } from '../../../../common';
+import {
+  ClusterValidations,
+  DetailItem,
+  DetailList,
+  HostsValidations,
+  UiIcon,
+} from '../../../../common';
 import { useClusterWizardContext } from '../../clusterWizard/ClusterWizardContext';
-import { useOpenshiftVersions } from '../../../hooks';
+import { useOpenshiftVersionsContext } from '../../clusterWizard/OpenshiftVersionsContext';
 import { wizardStepNames } from '../../clusterWizard/constants';
 import {
   ClusterWizardStepsType,
@@ -54,7 +57,7 @@ const PreflightChecksDetailExpanded = ({ cluster }: { cluster: Cluster }) => {
             wizardStepsValidationsMap={wizardStepsValidationsMap}
           />
         }
-        classNameValue={'pf-u-mb-md'}
+        classNameValue={'pf-v5-u-mb-md'}
         testId="cluster-preflight-checks"
       />
       <DetailItem
@@ -68,7 +71,7 @@ const PreflightChecksDetailExpanded = ({ cluster }: { cluster: Cluster }) => {
             wizardStepsValidationsMap={wizardStepsValidationsMap}
           />
         }
-        classNameValue={'pf-u-mb-md'}
+        classNameValue={'pf-v5-u-mb-md'}
         testId="host-preflight-checks"
       />
       <ClusterFeatureSupportLevelsDetailItem cluster={cluster} />
@@ -103,19 +106,19 @@ const PreflightCheckInfo = ({
 
 const getCheckIcon = (validationStatuses: string[]) => {
   if (validationStatuses.includes('failure') || validationStatuses.includes('error')) {
-    return <ExclamationCircleIcon color={dangerColor.value} size="sm" />;
+    return <UiIcon status="danger" icon={<ExclamationCircleIcon />} />;
   } else if (validationStatuses.includes('warning')) {
-    return <ExclamationTriangleIcon color={warningColor.value} />;
+    return <UiIcon status="warning" icon={<ExclamationTriangleIcon />} />;
   } else if (validationStatuses.includes('pending')) {
-    return <InfoCircleIcon size="sm" color={infoColor.value} />;
+    return <UiIcon status="info" icon={<InfoCircleIcon />} />;
   }
-  return <CheckCircleIcon color={okColor.value} />;
+  return <UiIcon status="warning" icon={<CheckCircleIcon color={okColor.value} />} />;
 };
 
 const PreflightChecksDetailCollapsed = ({ cluster }: { cluster: Cluster }) => {
   const { t } = useTranslation();
   const featureSupportLevelData = useNewFeatureSupportLevel();
-  const { isSupportedOpenShiftVersion } = useOpenshiftVersions();
+  const { isSupportedOpenShiftVersion } = useOpenshiftVersionsContext();
 
   const { isFullySupported } = React.useMemo<SupportLevelMemo>(
     () => getSupportLevelInfo(cluster, featureSupportLevelData, isSupportedOpenShiftVersion, t),
@@ -125,7 +128,7 @@ const PreflightChecksDetailCollapsed = ({ cluster }: { cluster: Cluster }) => {
   const supportLevelIcon = isFullySupported ? (
     <CheckCircleIcon color={okColor.value} />
   ) : (
-    <InfoCircleIcon size="sm" color={infoColor.value} />
+    <InfoCircleIcon color={infoColor.value} />
   );
 
   const clusterValidations = React.useMemo(

package/lib/ocm/components/clusterConfiguration/review/ReviewStep.tsx

@@ -21,6 +21,23 @@ const ReviewStep = ({ cluster }: { cluster: Cluster }) => {
   const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
   const [isStartingInstallation, setIsStartingInstallation] = useStateSafely(false);
   const dispatch = useDispatch();
+  const [disableInstallButton, setDisableInstallButton] = React.useState<boolean>();
+
+  React.useEffect(() => {
+    if (
+      cluster['last-installation-preparation']?.status === 'failed' &&
+      cluster['last-installation-preparation'].reason?.includes('manifest')
+    ) {
+      if (clusterWizardContext.uiSettings?.customManifestsUpdated === undefined) {
+        setDisableInstallButton(true);
+        void clusterWizardContext.updateUISettings({ customManifestsUpdated: false });
+      } else if (clusterWizardContext.uiSettings?.customManifestsUpdated === false) {
+        setDisableInstallButton(true);
+      }
+    } else {
+      setDisableInstallButton(isViewerMode || isStartingInstallation || cluster.status !== 'ready');
+    }
+  }, [cluster, isStartingInstallation, isViewerMode, clusterWizardContext]);
 
   const handleClusterInstall = async () => {
     setIsStartingInstallation(true);
@@ -28,6 +45,10 @@ const ReviewStep = ({ cluster }: { cluster: Cluster }) => {
       const { data } = await ClustersService.install(cluster.id, cluster.tags);
       dispatch(updateCluster(data));
       setIsStartingInstallation(false);
+
+      if (clusterWizardContext.uiSettings?.customManifestsUpdated) {
+        void clusterWizardContext.updateUISettings({ customManifestsUpdated: undefined });
+      }
       // If successful, backend changes cluster state which leads to unmounting the Wizard
       // If validation fails, the wizard stays on this step and shows alerts
     } catch (e) {
@@ -54,7 +75,7 @@ const ReviewStep = ({ cluster }: { cluster: Cluster }) => {
             name="install"
             data-testid="button-install-cluster"
             onClick={() => void handleClusterInstall()}
-            isDisabled={isViewerMode || isStartingInstallation || cluster.status !== 'ready'}
+            isDisabled={disableInstallButton}
           >
             Install cluster
           </Button>

package/lib/ocm/components/clusterConfiguration/review/ReviewSummary.tsx

@@ -17,6 +17,7 @@ import {
   ReviewClusterDetailTable,
   ReviewNetworkingTable,
   ReviewOperatorsTable,
+  ReviewPlatformTable,
   TableSummaryExpandable,
 } from '.';
 import { ReviewCustomManifestsTable } from './ReviewCustomManifestsTable';
@@ -51,12 +52,15 @@ export const ReviewSummaryContent = ({ cluster }: { cluster: Cluster }) => {
               <DetailItem
                 title={'Platform integration'}
                 value={
-                  <PlatformIntegrationNote
-                    platformType={cluster.platform?.type as SupportedPlatformType}
-                  />
+                  <>
+                    <ReviewPlatformTable cluster={cluster} />
+                    <PlatformIntegrationNote
+                      platformType={cluster.platform?.type as SupportedPlatformType}
+                    />
+                  </>
                 }
                 testId="platform-integration-note"
-                classNameValue={'pf-u-mt-sm'}
+                classNameValue={'pf-v5-u-mt-sm'}
               />
             </DetailList>
           </RenderIf>

package/lib/ocm/components/clusterConfiguration/review/index.tsx

@@ -2,3 +2,4 @@ export * from './ReviewClusterDetailTable';
 export * from './ReviewOperatorsTable';
 export * from './ReviewNetworkingTable';
 export * from './TableSummaryExpandable';
+export * from './ReviewPlatformTable';