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

package/lib/ocm/components/clusterConfiguration/staticIp/components/YamlView/yamlViewValidationSchema.tsx

@@ -60,7 +60,7 @@ const getInterfaceNamesInCurrentHost: UniqueStringArrayExtractor<YamlViewValues>
 };
 
 const macInterfaceMapValidationSchema = Yup.array<MacInterfaceMap>().of(
-  Yup.object().shape({
+  Yup.object({
     macAddress: macAddressValidationSchema
       .required(requiredMsg)
       .concat(getUniqueValidationSchema(getAllMacAddresses)),
@@ -72,7 +72,7 @@ const macInterfaceMapValidationSchema = Yup.array<MacInterfaceMap>().of(
   }),
 );
 
-export const yamlViewValidationSchema = Yup.object().shape<YamlViewValues>({
+export const yamlViewValidationSchema = Yup.object({
   hosts: Yup.array<HostStaticNetworkConfig>().of(
     Yup.object().shape({
       networkYaml: networkYamlValidationSchema,

package/lib/ocm/components/clusterConfiguration/staticIp/components/propTypes.ts

@@ -32,6 +32,6 @@ export type StaticIpFormProps<StaticIpViewValues extends object> = StaticIpViewP
   showEmptyValues: boolean;
   getInitialValues(infraEnv: InfraEnv): StaticIpViewValues;
   getUpdateParams(currentInfraEnv: InfraEnv, values: StaticIpViewValues): HostStaticNetworkConfig[];
-  validationSchema: Yup.Schema<StaticIpViewValues>;
+  validationSchema: Yup.ObjectSchema<Yup.AnyObject> | Yup.Lazy<Yup.AnyObject>;
   getEmptyValues(): StaticIpViewValues;
 };

package/lib/ocm/components/clusterConfiguration/staticIp/components/staticIp.css

@@ -1,18 +1,18 @@
-.pf-c-form.pf-m-horizontal .static-config-type-label .pf-c-form__group-label {
+.pf-v5-c-form.pf-m-horizontal .static-config-type-label .pf-v5-c-form__group-label {
   padding-top: unset;
 }
 
-.pf-c-form.pf-m-horizontal .static-config-type-label .pf-c-form__label {
+.pf-v5-c-form.pf-m-horizontal .static-config-type-label .pf-v5-c-form__label {
   vertical-align: text-top;
 }
 
 .vlan-id {
-  margin-left: var(--pf-global--spacer--md);
+  margin-left: var(--pf-v5-global--spacer--md);
 }
 
-.mac-ip-mapping .pf-c-form__label-text {
-  color: var(--pf-global--Color--200);
-  font-size: var(--pf-global--FontSize--md);
+.mac-ip-mapping .pf-v5-c-form__label-text {
+  color: var(--pf-v5-global--Color--200);
+  font-size: var(--pf-v5-global--FontSize--md);
   font-weight: unset;
 }
 
@@ -24,6 +24,6 @@
   flex: 0 0 6rem;
 }
 
-.machine-network .pf-c-form__helper-text.pf-m-error {
+.machine-network .pf-v5-c-form__helper-text.pf-m-error {
   margin-top: unset;
 }

package/lib/ocm/components/clusterConfiguration/staticIp/data/dataTypes.ts

@@ -31,6 +31,10 @@ export type MachineNetworks = { [protocolVersion in ProtocolVersion]: string };
 export type FormViewHost = {
   macAddress: string;
   ips: HostIps;
+  useBond: boolean;
+  bondType: string;
+  bondPrimaryInterface: string;
+  bondSecondaryInterface: string;
 };
 
 export type StaticFormData = {

package/lib/ocm/components/clusterConfiguration/staticIp/data/dummyData.ts

@@ -2,11 +2,18 @@ import {
   HostStaticNetworkConfig,
   MacInterfaceMap,
 } from '@openshift-assisted/types/assisted-installer-service';
-import { ProtocolVersion, StaticIpInfo, StaticIpView } from './dataTypes';
+import {
+  FormViewNetworkWideValues,
+  ProtocolVersion,
+  StaticIpInfo,
+  StaticIpView,
+} from './dataTypes';
 import { NmstateEthernetInterface, NmstateInterfaceType } from './nmstateTypes';
 import { FORM_VIEW_PREFIX, getNmstateProtocolConfig, toYamlWithComments } from './nmstateYaml';
+import { getShownProtocolVersions } from './protocolVersion';
 
-const DUMMY_MAC = '01:23:45:67:89:AB';
+const DUMMY_MAC_4 = '01:23:45:67:89:AB';
+const DUMMY_MAC_6 = '01:23:45:67:89:AC';
 const DUMMY_NIC_PREFIX = 'DUMMY';
 
 export const getDummyNicName = (protocolVersion: ProtocolVersion) => {
@@ -14,6 +21,14 @@ export const getDummyNicName = (protocolVersion: ProtocolVersion) => {
   return `${DUMMY_NIC_PREFIX}${protocolNumber}`;
 };
 
+export const getDummyMacAddress = (protocolVersion: ProtocolVersion) => {
+  if (protocolVersion === ProtocolVersion.ipv4) {
+    return DUMMY_MAC_4;
+  } else {
+    return DUMMY_MAC_6;
+  }
+};
+
 export const DUMMY_NMSTATE_ADDRESSES = {
   ipv4: {
     prefixLength: 24,
@@ -39,8 +54,21 @@ export const getDummyInterfaces = (): NmstateEthernetInterface[] => {
   ];
 };
 
-export const getDummyMacInterfaceMap = (): MacInterfaceMap => {
-  return [{ macAddress: DUMMY_MAC, logicalNicName: getDummyNicName(ProtocolVersion.ipv4) }];
+export const getDummyMacInterfaceMap = (
+  networkWideConfiguration?: FormViewNetworkWideValues,
+): MacInterfaceMap => {
+  const macInterfaceMap = [];
+  if (networkWideConfiguration) {
+    for (const protocolVersion of getShownProtocolVersions(networkWideConfiguration.protocolType)) {
+      macInterfaceMap.push({
+        macAddress: getDummyMacAddress(protocolVersion),
+        logicalNicName: getDummyNicName(protocolVersion),
+      });
+    }
+    return macInterfaceMap;
+  } else {
+    return [{ macAddress: DUMMY_MAC_4, logicalNicName: getDummyNicName(ProtocolVersion.ipv4) }];
+  }
 };
 
 export const isDummyInterface = (nicName: string) => {

package/lib/ocm/components/clusterConfiguration/staticIp/data/emptyData.ts

@@ -19,6 +19,10 @@ export const getEmptyFormViewHost = (): FormViewHost => {
   return {
     macAddress: '',
     ips: getEmptyHostIps(),
+    useBond: false,
+    bondType: 'active-backup',
+    bondPrimaryInterface: '',
+    bondSecondaryInterface: '',
   };
 };
 

package/lib/ocm/components/clusterConfiguration/staticIp/data/formDataFromInfraEnvField.ts

@@ -24,6 +24,8 @@ import {
   isVlanInterface,
   NmstateEthernetInterface,
   NmstateVlanInterface,
+  NmstateBondInterface,
+  NmstateInterfaceType,
 } from './nmstateTypes';
 import { isDummyInterface } from './dummyData';
 
@@ -38,12 +40,9 @@ type ParsedFormViewYaml = {
   nmstate: Nmstate;
 };
 
-const findFirstRealInterface = (interfaces: NmstateInterface[]): NmstateInterface | undefined => {
-  return interfaces.find(
-    (currentInterface) => !isDummyInterface(currentInterface.name),
-  ) as unknown as NmstateInterface | undefined;
+const findAllRealInterfaces = (interfaces: NmstateInterface[]): NmstateInterface[] => {
+  return interfaces.filter((currentInterface) => !isDummyInterface(currentInterface.name));
 };
-
 const parseYaml = (yaml: string): ParsedFormViewYaml => {
   const lines = yaml.split('\n');
   const lastCommentIdx = findLastIndex(lines, (line) => line.startsWith(YAML_COMMENT_CHAR));
@@ -64,7 +63,7 @@ const getVlanId = (interfaces: NmstateInterface[]): number | null => {
 };
 
 const getIpAddress = (
-  networkInterface: NmstateEthernetInterface | NmstateVlanInterface,
+  networkInterface: NmstateEthernetInterface | NmstateVlanInterface | NmstateBondInterface,
   protocolVersion: ProtocolVersion,
 ): string => {
   const ipAddressData = networkInterface[protocolVersion];
@@ -131,9 +130,26 @@ const getFormViewHost = (
   }
 
   const { nmstate } = parseYaml(infraEnvHost.networkYaml);
-  const realInterface = findFirstRealInterface(nmstate.interfaces);
 
-  if (!realInterface) {
+  const realInterfaces = findAllRealInterfaces(nmstate.interfaces);
+  const firstInterface = realInterfaces[0];
+  const secondInterface = realInterfaces[1]; // Puede ser undefined
+
+  let bondInterface: NmstateInterface | undefined;
+  let nonBondInterface: NmstateInterface | undefined;
+
+  if (firstInterface) {
+    if (firstInterface.type === NmstateInterfaceType.BOND) {
+      bondInterface = firstInterface;
+      nonBondInterface = secondInterface;
+    } else {
+      nonBondInterface = firstInterface;
+      bondInterface =
+        secondInterface?.type === NmstateInterfaceType.BOND ? secondInterface : undefined;
+    }
+  }
+
+  if (realInterfaces.length === 0) {
     //handle case 2
     return null;
   }
@@ -145,11 +161,26 @@ const getFormViewHost = (
       ipv4: '',
       ipv6: '',
     },
+    bondType: 'active-backup',
+    bondPrimaryInterface: '',
+    bondSecondaryInterface: '',
+    useBond: false,
   };
 
+  if (bondInterface?.type === NmstateInterfaceType.BOND) {
+    ret.useBond = true;
+    ret.bondType = bondInterface['link-aggregation'].mode;
+    ret.bondPrimaryInterface = infraEnvHost.macInterfaceMap[0].macAddress ?? '';
+    ret.bondSecondaryInterface = infraEnvHost.macInterfaceMap[1].macAddress ?? '';
+  }
+
   for (const protocolVersion of getShownProtocolVersions(protocolType)) {
-    ret.ips[protocolVersion] = getIpAddress(realInterface, protocolVersion);
+    const interfaceToUse = nonBondInterface || bondInterface;
+    if (interfaceToUse) {
+      ret.ips[protocolVersion] = getIpAddress(interfaceToUse, protocolVersion);
+    }
   }
+
   return ret;
 };
 

package/lib/ocm/components/clusterConfiguration/staticIp/data/formDataToInfraEnvField.ts

@@ -2,6 +2,7 @@ import { dump } from 'js-yaml';
 import {
   HostStaticNetworkConfig,
   InfraEnv,
+  MacInterfaceMap,
 } from '@openshift-assisted/types/assisted-installer-service';
 import {
   ProtocolVersion,
@@ -34,6 +35,8 @@ import { getMachineNetworkCidr } from './machineNetwork';
 import { getEmptyHostIps } from './emptyData';
 
 const REAL_NIC_NAME = 'eth0';
+const REAL_NIC_NAME_1 = 'eth1';
+const BOND_NIC_NAME = 'bond0';
 
 const getPrefixLength = (
   networkWide: FormViewNetworkWideValues,
@@ -54,6 +57,8 @@ const toYamlWithComments = (json: object, comments: string[]) => {
 const getNmstateObject = (
   networkWide: FormViewNetworkWideValues,
   hostIps: Partial<HostIps>,
+  bondType?: string,
+  hasBondsConfigured?: boolean,
 ): Nmstate => {
   const interfaces: NmstateInterface[] = [];
   const routeConfigs: NmstateRoutesConfig[] = [];
@@ -63,13 +68,26 @@ const getNmstateObject = (
   for (const protocolVersion of getShownProtocolVersions(networkWide.protocolType)) {
     const hostIp = hostIps[protocolVersion];
     let nicName = '';
-
     if (hostIp) {
-      nicName = REAL_NIC_NAME;
+      nicName = bondType && hasBondsConfigured ? BOND_NIC_NAME : REAL_NIC_NAME;
       realProtocolConfigs[protocolVersion] = getNmstateProtocolConfig(
         hostIp,
         getPrefixLength(networkWide, protocolVersion),
       );
+      if (networkWide.useVlan && networkWide.vlanId) {
+        if (bondType && hasBondsConfigured) {
+          interfaces.push(
+            getInterface(
+              BOND_NIC_NAME,
+              realProtocolConfigs,
+              networkWide,
+              bondType,
+              hasBondsConfigured,
+              true,
+            ),
+          );
+        }
+      }
     } else {
       //this happens when a host was particall configured, or not configured at all
       const protocolConfigs = {
@@ -79,7 +97,23 @@ const getNmstateObject = (
         ),
       };
       nicName = getDummyNicName(protocolVersion);
-      interfaces.push(getInterface(nicName, protocolConfigs, networkWide));
+      interfaces.push(
+        getInterface(nicName, protocolConfigs, networkWide, bondType, hasBondsConfigured),
+      );
+      if (bondType && hasBondsConfigured) {
+        interfaces.push(
+          getInterface(
+            BOND_NIC_NAME,
+            protocolConfigs,
+            networkWide,
+            bondType,
+            hasBondsConfigured,
+            true,
+          ),
+        );
+      }
+      // eslint-disable-next-line no-console
+      console.log(interfaces);
     }
 
     routeConfigs.push(
@@ -94,7 +128,15 @@ const getNmstateObject = (
   }
 
   if (Object.keys(realProtocolConfigs).length > 0) {
-    interfaces.unshift(getInterface(REAL_NIC_NAME, realProtocolConfigs, networkWide));
+    interfaces.unshift(
+      getInterface(
+        bondType && hasBondsConfigured ? BOND_NIC_NAME : REAL_NIC_NAME,
+        realProtocolConfigs,
+        networkWide,
+        bondType,
+        hasBondsConfigured,
+      ),
+    );
   }
 
   const nmstate = {
@@ -119,7 +161,12 @@ const toYaml = (
     );
   }
   const hostIps = formHostData ? formHostData.ips : getEmptyHostIps();
-  const nmstate = getNmstateObject(networkWideConfiguration, hostIps);
+  const bondType = formHostData ? formHostData.bondType : '';
+  const hasBondsConfigured =
+    formHostData &&
+    formHostData.bondPrimaryInterface !== '' &&
+    formHostData.bondSecondaryInterface !== '';
+  const nmstate = getNmstateObject(networkWideConfiguration, hostIps, bondType, hasBondsConfigured);
   return toYamlWithComments(nmstate, comments);
 };
 
@@ -130,25 +177,47 @@ const formDataToInfraEnvField = (formData: StaticFormData): HostStaticNetworkCon
     ret = [
       {
         networkYaml: toYaml(formData.networkWide),
-        macInterfaceMap: getDummyMacInterfaceMap(),
+        macInterfaceMap: getDummyMacInterfaceMap(formData.networkWide),
       },
     ];
   } else {
     for (const host of formData.hosts) {
       ret.push({
         networkYaml: toYaml(formData.networkWide, host),
-        macInterfaceMap: [
-          {
-            macAddress: host.macAddress,
-            logicalNicName: REAL_NIC_NAME,
-          },
-        ],
+        macInterfaceMap: getMapInterfaceMap(host),
       });
     }
   }
   return ret;
 };
 
+export const getMapInterfaceMap = (host: FormViewHost): MacInterfaceMap => {
+  if (
+    host.bondPrimaryInterface &&
+    host.bondPrimaryInterface !== '' &&
+    host.bondSecondaryInterface &&
+    host.bondSecondaryInterface !== ''
+  ) {
+    return [
+      {
+        macAddress: host.bondPrimaryInterface,
+        logicalNicName: REAL_NIC_NAME,
+      },
+      {
+        macAddress: host.bondSecondaryInterface,
+        logicalNicName: REAL_NIC_NAME_1,
+      },
+    ];
+  } else {
+    return [
+      {
+        macAddress: host.macAddress,
+        logicalNicName: REAL_NIC_NAME,
+      },
+    ];
+  }
+};
+
 export const formViewHostsToInfraEnvField = (
   currentInfraEnv: InfraEnv,
   formViewHosts: FormViewHost[],

package/lib/ocm/components/clusterConfiguration/staticIp/data/nmstateTypes.ts

@@ -3,6 +3,7 @@ import { ProtocolVersion } from './dataTypes';
 export enum NmstateInterfaceType {
   ETHERNET = 'ethernet',
   VLAN = 'vlan',
+  BOND = 'bond',
 }
 
 export type NmstateAddress = {
@@ -53,16 +54,19 @@ export type NmstateVlanInterface = {
   };
 } & NmstateProtocolConfigs;
 
-export type NmstateInterface = NmstateEthernetInterface | NmstateVlanInterface;
+export type NmstateInterface =
+  | NmstateEthernetInterface
+  | NmstateVlanInterface
+  | NmstateBondInterface;
 
 export const isVlanInterface = (
-  nmStateInterface: NmstateVlanInterface | NmstateEthernetInterface,
+  nmStateInterface: NmstateVlanInterface | NmstateEthernetInterface | NmstateBondInterface,
 ): nmStateInterface is NmstateVlanInterface => {
   return nmStateInterface.type === NmstateInterfaceType.VLAN;
 };
 
 export const isEthernetInterface = (
-  nmStateInterface: NmstateVlanInterface | NmstateEthernetInterface,
+  nmStateInterface: NmstateVlanInterface | NmstateEthernetInterface | NmstateBondInterface,
 ): nmStateInterface is NmstateEthernetInterface => {
   return nmStateInterface.type === NmstateInterfaceType.ETHERNET;
 };
@@ -79,3 +83,23 @@ export type Nmstate = {
   };
   interfaces: NmstateInterface[];
 };
+
+export type NmstateBondInterface = {
+  name: string;
+  type: NmstateInterfaceType.BOND;
+  state: string;
+} & NmstateProtocolConfigs & {
+    'link-aggregation': {
+      mode: string;
+      options: {
+        miimon: string;
+      };
+      port: string[];
+    };
+  };
+
+export const isBondInterface = (
+  nmStateInterface: NmstateVlanInterface | NmstateEthernetInterface | NmstateBondInterface,
+): nmStateInterface is NmstateEthernetInterface => {
+  return nmStateInterface.type === NmstateInterfaceType.BOND;
+};

package/lib/ocm/components/clusterConfiguration/staticIp/data/nmstateYaml.ts

@@ -16,6 +16,9 @@ import {
 } from './dataTypes';
 import findLastIndex from 'lodash-es/findLastIndex.js';
 
+const REAL_NIC_NAME = 'eth0';
+const REAL_NIC_NAME_1 = 'eth1';
+
 const ROUTE_DESTINATIONS = {
   ipv4: '0.0.0.0/0',
   ipv6: '::/0',
@@ -99,8 +102,11 @@ export const getInterface = (
   nicName: string,
   protocolConfigs: NmstateProtocolConfigs,
   networkWide: FormViewNetworkWideValues,
+  bondType?: string,
+  hasBondsConfigured?: boolean,
+  createBondInterface?: boolean,
 ): NmstateInterface => {
-  if (networkWide.useVlan && networkWide.vlanId) {
+  if (networkWide.useVlan && networkWide.vlanId && !createBondInterface) {
     return {
       name: getVlanNicName(nicName, networkWide.vlanId),
       type: NmstateInterfaceType.VLAN,
@@ -108,6 +114,20 @@ export const getInterface = (
       vlan: { 'base-iface': nicName, id: networkWide.vlanId },
       ...protocolConfigs,
     };
+  } else if (bondType && hasBondsConfigured) {
+    return {
+      name: nicName,
+      type: NmstateInterfaceType.BOND,
+      state: 'up',
+      ...protocolConfigs,
+      'link-aggregation': {
+        mode: bondType,
+        options: {
+          miimon: '100',
+        },
+        port: [REAL_NIC_NAME, REAL_NIC_NAME_1],
+      },
+    };
   } else {
     return {
       name: nicName,

package/lib/ocm/components/clusterDetail/AssistedInstallerDetailCard.tsx

@@ -28,10 +28,18 @@ import { NewFeatureSupportLevelProvider } from '../featureSupportLevels';
 import { usePullSecret } from '../../hooks';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { useFeatureDetection } from '../../hooks/use-feature-detection';
+import { OpenshiftVersionsContextProvider } from '../clusterWizard/OpenshiftVersionsContext';
+import {
+  unstable_HistoryRouter as HistoryRouter,
+  HistoryRouterProps,
+  BrowserRouter,
+} from 'react-router-dom-v5-compat';
 
 type AssistedInstallerDetailCardProps = {
   aiClusterId: string;
   allEnabledFeatures: FeatureListType;
+  history: HistoryRouterProps['history'];
+  basename: HistoryRouterProps['basename'];
   permissions?: AssistedInstallerOCMPermissionTypesListType;
 };
 
@@ -58,12 +66,14 @@ const ClusterLoadFailed = ({ clusterId, error }: { clusterId: Cluster['id']; err
         </Title>
       </CardHeader>
       <CardBody>
-        <ErrorState
-          title="Failed to fetch the cluster"
-          fetchData={fetchCluster}
-          actions={[<BackButton key={'cancel'} to={'..'} />]}
-          content={error}
-        />
+        <BrowserRouter>
+          <ErrorState
+            title="Failed to fetch the cluster"
+            fetchData={fetchCluster}
+            actions={[<BackButton key={'cancel'} to={'/cluster-list'} />]}
+            content={error}
+          />
+        </BrowserRouter>
       </CardBody>
     </Card>
   );
@@ -77,10 +87,12 @@ const LoadingDefaultConfigFailedCard = () => (
       </Title>
     </CardHeader>
     <CardBody>
-      <ErrorState
-        title="Failed to retrieve the default configuration"
-        actions={[<BackButton key={'cancel'} to={'..'} />]}
-      />
+      <BrowserRouter>
+        <ErrorState
+          title="Failed to retrieve the default configuration"
+          actions={[<BackButton key={'cancel'} to={'/cluster-list'} />]}
+        />
+      </BrowserRouter>
     </CardBody>
   </Card>
 );
@@ -88,6 +100,8 @@ const LoadingDefaultConfigFailedCard = () => (
 const AssistedInstallerDetailCard = ({
   aiClusterId,
   allEnabledFeatures,
+  history,
+  basename,
   permissions,
 }: AssistedInstallerDetailCardProps) => {
   useFeatureDetection(allEnabledFeatures);
@@ -130,31 +144,36 @@ const AssistedInstallerDetailCard = ({
   );
 
   const isOutdatedClusterData = uiState === ResourceUIState.POLLING_ERROR;
+
   return (
-    <AlertsContextProvider>
-      <SentryErrorMonitorContextProvider>
-        <ModalDialogsContextProvider>
-          <ClusterDefaultConfigurationProvider
-            loadingUI={<LoadingCard />}
-            errorUI={<LoadingDefaultConfigFailedCard />}
-          >
-            <NewFeatureSupportLevelProvider
-              loadingUi={<LoadingCard />}
-              cluster={cluster}
-              cpuArchitecture={infraEnv.cpuArchitecture as CpuArchitecture}
-              openshiftVersion={cluster.openshiftVersion}
-              platformType={cluster.platform?.type}
-            >
-              {content}
-            </NewFeatureSupportLevelProvider>
-            {isOutdatedClusterData && <ClusterPollingErrorModal />}
-            <CancelInstallationModal />
-            <ResetClusterModal />
-            <DiscoveryImageModal />
-          </ClusterDefaultConfigurationProvider>
-        </ModalDialogsContextProvider>
-      </SentryErrorMonitorContextProvider>
-    </AlertsContextProvider>
+    <HistoryRouter history={history} basename={basename}>
+      <AlertsContextProvider>
+        <OpenshiftVersionsContextProvider>
+          <SentryErrorMonitorContextProvider>
+            <ModalDialogsContextProvider>
+              <ClusterDefaultConfigurationProvider
+                loadingUI={<LoadingCard />}
+                errorUI={<LoadingDefaultConfigFailedCard />}
+              >
+                <NewFeatureSupportLevelProvider
+                  loadingUi={<LoadingCard />}
+                  cluster={cluster}
+                  cpuArchitecture={infraEnv.cpuArchitecture as CpuArchitecture}
+                  openshiftVersion={cluster.openshiftVersion}
+                  platformType={cluster.platform?.type}
+                >
+                  {content}
+                </NewFeatureSupportLevelProvider>
+                {isOutdatedClusterData && <ClusterPollingErrorModal />}
+                <CancelInstallationModal />
+                <ResetClusterModal />
+                <DiscoveryImageModal />
+              </ClusterDefaultConfigurationProvider>
+            </ModalDialogsContextProvider>
+          </SentryErrorMonitorContextProvider>
+        </OpenshiftVersionsContextProvider>
+      </AlertsContextProvider>
+    </HistoryRouter>
   );
 };
 

package/lib/ocm/components/clusterDetail/AssistedInstallerExtraDetailCard.tsx

@@ -11,6 +11,7 @@ import useInfraEnv from '../../hooks/useInfraEnv';
 import { usePullSecret } from '../../hooks';
 import { selectCurrentClusterState } from '../../store/slices/current-cluster/selectors';
 import { useFeatureDetection } from '../../hooks/use-feature-detection';
+import { OpenshiftVersionsContextProvider } from '../clusterWizard/OpenshiftVersionsContext';
 
 type AssistedInstallerExtraDetailCardProps = {
   allEnabledFeatures: FeatureListType;
@@ -45,7 +46,7 @@ const AssistedInstallerExtraDetailCard: React.FC<AssistedInstallerExtraDetailCar
         openshiftVersion={cluster.openshiftVersion}
         platformType={cluster.platform?.type}
       >
-        <Grid className="pf-u-mt-md">
+        <Grid className="pf-v5-u-mt-md">
           <ClusterProperties cluster={cluster} externalMode />
         </Grid>
       </NewFeatureSupportLevelProvider>
@@ -53,12 +54,16 @@ const AssistedInstallerExtraDetailCard: React.FC<AssistedInstallerExtraDetailCar
   );
 };
 
-const Wrapper: React.FC<AssistedInstallerExtraDetailCardProps> = (props) => (
-  <Provider store={storeDay1}>
-    <AlertsContextProvider>
-      <AssistedInstallerExtraDetailCard {...props} />
-    </AlertsContextProvider>
-  </Provider>
-);
+const Wrapper: React.FC<AssistedInstallerExtraDetailCardProps> = (props) => {
+  return (
+    <Provider store={storeDay1}>
+      <AlertsContextProvider>
+        <OpenshiftVersionsContextProvider>
+          <AssistedInstallerExtraDetailCard {...props} />
+        </OpenshiftVersionsContextProvider>
+      </AlertsContextProvider>
+    </Provider>
+  );
+};
 
 export default Wrapper;

package/lib/ocm/components/clusterDetail/CancelInstallationModal.tsx

@@ -71,7 +71,7 @@ const CancelInstallationModal: React.FC = () => {
           }}
           isDisabled={isSubmitting}
         >
-          Abort Installation
+          Abort installation
         </Button>,
         <Button
           key="cancel"