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

package/lib/cim/components/ClusterDeployment/networkConfigurationValidation.ts

@@ -15,8 +15,6 @@ import {
 import {
   getSubnetFromMachineNetworkCidr,
   getHostSubnets,
-  isSubnetInIPv6,
-  getDefaultNetworkType,
 } from '../../../common/components/clusterConfiguration/utils';
 import {
   isSNO,
@@ -25,7 +23,7 @@ import {
   selectMachineNetworkCIDR,
   selectServiceNetworkCIDR,
 } from '../../../common/selectors/clusterSelectors';
-import { NO_SUBNET_SET } from '../../../common/config';
+import { NETWORK_TYPE_OVN, NO_SUBNET_SET } from '../../../common/config';
 
 const getInitHostSubnet = (
   cluster: Cluster,
@@ -48,8 +46,6 @@ export const getNetworkInitialValues = (
   defaultNetworkSettings: ClusterDefaultConfig,
 ): NetworkConfigurationValues => {
   const managedNetworkingType = cluster.userManagedNetworking ? 'userManaged' : 'clusterManaged';
-  const isIPv6 = isSubnetInIPv6(cluster);
-  const isSNOCluster = isSNO(cluster);
 
   return {
     clusterNetworkCidr:
@@ -64,7 +60,7 @@ export const getNetworkInitialValues = (
     hostSubnet: getInitHostSubnet(cluster, managedNetworkingType) || NO_SUBNET_SET,
     vipDhcpAllocation: cluster.vipDhcpAllocation,
     managedNetworkingType,
-    networkType: cluster.networkType || getDefaultNetworkType(isSNOCluster, isIPv6),
+    networkType: cluster.networkType || NETWORK_TYPE_OVN,
   };
 };
 
@@ -72,7 +68,7 @@ export const getNetworkConfigurationValidationSchema = (
   initialValues: NetworkConfigurationValues,
   hostSubnets: HostSubnets,
 ) =>
-  Yup.lazy<NetworkConfigurationValues>((values) =>
+  Yup.lazy((values: NetworkConfigurationValues) =>
     Yup.object<NetworkConfigurationValues>().shape({
       clusterNetworkHostPrefix: hostPrefixValidationSchema(values.clusterNetworkCidr),
       clusterNetworkCidr: ipBlockValidationSchema(values.serviceNetworkCidr),

package/lib/cim/components/ClusterDeployment/use-networking-formik.ts

@@ -45,7 +45,7 @@ const getNetworkConfigurationValidationSchema = (
   initialValues: ClusterDeploymentNetworkingValues,
   hostSubnets: HostSubnets,
 ) =>
-  Yup.lazy<ClusterDeploymentNetworkingValues>((values) =>
+  Yup.lazy((values: ClusterDeploymentNetworkingValues) =>
     Yup.object<ClusterDeploymentNetworkingValues>().shape({
       clusterNetworkHostPrefix: hostPrefixValidationSchema(values.clusterNetworkCidr),
       clusterNetworkCidr: ipBlockValidationSchema(values.serviceNetworkCidr),

package/lib/cim/components/Hypershift/DetailsPage/ClusterInstallationProgress.css

@@ -2,6 +2,6 @@
   margin-left: 1.75rem;
 }
 
-.ai-progress-item__header .pf-c-expandable-section__toggle {
+.ai-progress-item__header .pf-v5-c-expandable-section__toggle {
   padding: 0 !important;
 }

package/lib/cim/components/Hypershift/DetailsPage/ConditionsTable.tsx

@@ -3,13 +3,14 @@ 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 { UnknownIcon } from '@patternfly/react-icons/dist/js/icons/unknown-icon';
-import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import { global_palette_green_500 as okColor } from '@patternfly/react-tokens/dist/js/global_palette_green_500';
-import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
+
 import * as React from 'react';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 
 import './ConditionsTable.css';
+import { UiIcon } from '../../../../common';
 
 const ignoredConditions = ['Progressing'];
 const reversedConditions = ['Degraded'];
@@ -26,7 +27,7 @@ type ConditionsTableProps = {
 const ConditionsTable = ({ conditions, isDone }: ConditionsTableProps) => {
   const { t } = useTranslation();
   return (
-    <TableComposable variant="compact">
+    <Table variant="compact">
       <Thead>
         <Tr>
           <Th width={25}>{t('ai:Condition')}</Th>
@@ -56,7 +57,7 @@ const ConditionsTable = ({ conditions, isDone }: ConditionsTableProps) => {
                 icon = <CheckCircleIcon color={okColor.value} />;
               } else if (c.status === nokStatus) {
                 icon = isDone ? (
-                  <ExclamationCircleIcon color={dangerColor.value} size="sm" />
+                  <UiIcon size="sm" status="danger" icon={<ExclamationCircleIcon />} />
                 ) : (
                   <InProgressIcon />
                 );
@@ -78,7 +79,7 @@ const ConditionsTable = ({ conditions, isDone }: ConditionsTableProps) => {
             );
           })}
       </Tbody>
-    </TableComposable>
+    </Table>
   );
 };
 

package/lib/cim/components/Hypershift/DetailsPage/HostedClusterProgress.tsx

@@ -7,12 +7,12 @@ import {
   StackItem,
 } from '@patternfly/react-core';
 import { global_palette_green_500 as okColor } from '@patternfly/react-tokens/dist/js/global_palette_green_500';
-import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
+
 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 { HostedClusterK8sResource } from '../types';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
-import { ExternalLink } from '../../../../common';
+import { ExternalLink, UiIcon } from '../../../../common';
 import ConditionsTable from './ConditionsTable';
 
 type HostedClusterProgressProps = {
@@ -36,7 +36,7 @@ const HostedClusterProgress = ({ hostedCluster, launchToOCP }: HostedClusterProg
       availableCondtion?.status === 'True' ? (
         <CheckCircleIcon color={okColor.value} />
       ) : (
-        <ExclamationCircleIcon color={dangerColor.value} size="sm" />
+        <UiIcon size="sm" status="danger" icon={<ExclamationCircleIcon />} />
       );
   }
 

package/lib/cim/components/Hypershift/DetailsPage/NodePoolsTable.tsx

@@ -2,17 +2,7 @@ import * as React from 'react';
 import { Link } from 'react-router-dom-v5-compat';
 import { Button, Label, Popover, Stack, StackItem } from '@patternfly/react-core';
 import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
-import {
-  breakWord,
-  expandable,
-  sortable,
-  TableComposable,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tr,
-} from '@patternfly/react-table';
+import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import classnames from 'classnames';
 
 import { TableRow } from '../../../../common/components/hosts/AITable';
@@ -61,10 +51,9 @@ export const nodePoolNameColumn = (): TableRow<NodePoolWithAgents> => {
       title: 'Nodepool',
       props: {
         id: 'col-header-hostname', // ACM jest tests require id over testId
+        modifier: 'breakWord',
       },
-      transforms: [sortable],
-      cellFormatters: [expandable],
-      cellTransforms: [breakWord],
+      sort: true,
     },
     cell: ({ nodePool }) => {
       return {
@@ -99,7 +88,7 @@ const NodePoolsTable = ({
     <>
       <Stack hasGutter>
         <StackItem>
-          <TableComposable variant="compact">
+          <Table variant="compact">
             <Thead>
               <Tr>
                 <Th />
@@ -230,7 +219,7 @@ const NodePoolsTable = ({
                 return rows;
               }, [])}
             </Tbody>
-          </TableComposable>
+          </Table>
         </StackItem>
         <StackItem>
           <Button

package/lib/cim/components/Hypershift/HostedClusterWizard/HostsStep/HostsStep.tsx

@@ -12,7 +12,7 @@ import { TFunction } from 'i18next';
 import { NodePoolK8sResource } from '../../types';
 
 const validationSchema = (clusterName: string, nodePools: NodePoolK8sResource[], t: TFunction) =>
-  Yup.lazy<HostsFormValues>((values) =>
+  Yup.lazy((values: HostsFormValues) =>
     Yup.object<HostsFormValues>().shape({
       agentNamespace: Yup.string().required(t('ai:Required field')),
       nodePools: Yup.array().of(

package/lib/cim/components/Hypershift/HostedClusterWizard/HostsStep/NodePoolForm.css

@@ -2,11 +2,11 @@
   padding-left: 1.75rem;
 }
 
-.ai-node-pool__expandable-button .pf-c-expandable-section__toggle {
+.ai-node-pool__expandable-button .pf-v5-c-expandable-section__toggle {
   padding-right: 0;
 }
 
-.ai-node-pool__expandable-button .pf-c-expandable-section__toggle-text {
+.ai-node-pool__expandable-button .pf-v5-c-expandable-section__toggle-text {
   color: black;
 }
 

package/lib/cim/components/Hypershift/HostedClusterWizard/HostsStep/NodePoolForm.tsx

@@ -135,7 +135,7 @@ const NodePoolForm: React.FC<NodePoolFormProps> = ({ infraEnvs, agents, index, o
               {!isExpanded && (
                 <>
                   <FlexItem>
-                    <Divider />
+                    <Divider orientation={{ default: 'vertical' }} />
                   </FlexItem>
                   <FlexItem>
                     <Label variant="outline">

package/lib/cim/components/Hypershift/HostedClusterWizard/NetworkStep/NetworkForm.css

@@ -1,7 +1,7 @@
-.ai-advanced-fields .pf-c-check__body {
+.ai-advanced-fields .pf-v5-c-check__body {
   width: 100%;
 }
 
-.ai-nodeport-fields .pf-c-radio__body {
+.ai-nodeport-fields .pf-v5-c-radio__body {
   width: 100%;
 }

package/lib/cim/components/Hypershift/HostedClusterWizard/NetworkStep/NetworkStep.tsx

@@ -16,7 +16,7 @@ import {
 import { useTranslation } from '../../../../../common/hooks/use-translation-wrapper';
 
 const getValidationSchema = (t: TFunction) =>
-  Yup.lazy<NetworkFormValues>((values) =>
+  Yup.lazy((values: NetworkFormValues) =>
     Yup.object<NetworkFormValues>().shape({
       sshPublicKey: sshPublicKeyValidationSchema.required(t('ai:Required field')),
       clusterNetworkCidr: values.isAdvanced

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} />;
   }
@@ -169,6 +169,16 @@ const EnvironmentDetails: React.FC<EnvironmentDetailsProps> = ({
                   .label ?? CpuArchitecture.x86}
               </DescriptionListDescription>
             </DescriptionListGroup>
+
+            {infraEnv.spec?.osImageVersion && (
+              <DescriptionListGroup>
+                <DescriptionListTerm>{t('ai:OpenShift version')}</DescriptionListTerm>
+                <DescriptionListDescription>
+                  {`OpenShift ${infraEnv.spec?.osImageVersion}`}
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+            )}
+
             <DescriptionListGroup>
               <DescriptionListTerm>{t('ai:Labels')}</DescriptionListTerm>
               <DescriptionListDescription>

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

@@ -49,6 +49,8 @@ import { getErrorMessage } from '../../../common/utils';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { TFunction } from 'i18next';
 import CpuArchitectureDropdown from '../common/CpuArchitectureDropdown';
+import OpenshiftVersionDropdown from './OpenshiftVersionDropdown';
+import { OsImage } from '../../types';
 
 export type EnvironmentStepFormValues = {
   name: string;
@@ -67,10 +69,11 @@ export type EnvironmentStepFormValues = {
   >;
   enableNtpSources: boolean;
   additionalNtpSources: string;
+  osImageVersion?: string;
 };
 
 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.')),
@@ -92,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;
             }),
@@ -116,6 +119,7 @@ const initialValues: EnvironmentStepFormValues = {
   cpuArchitecture: CpuArchitecture.x86,
   enableNtpSources: false,
   additionalNtpSources: '',
+  osImageVersion: '',
 };
 
 type InfraEnvFormProps = {
@@ -123,6 +127,7 @@ type InfraEnvFormProps = {
   pullSecret?: string;
   sshPublicKey?: string;
   docVersion: string;
+  osImages?: OsImage[];
 };
 
 const InfraEnvForm: React.FC<InfraEnvFormProps> = ({
@@ -131,6 +136,7 @@ const InfraEnvForm: React.FC<InfraEnvFormProps> = ({
   pullSecret,
   sshPublicKey,
   docVersion,
+  osImages,
 }) => {
   const { values, setFieldValue } = useFormikContext<EnvironmentStepFormValues>();
   const { t } = useTranslation();
@@ -222,6 +228,7 @@ const InfraEnvForm: React.FC<InfraEnvFormProps> = ({
             </Flex>
           </FormGroup>
           <CpuArchitectureDropdown />
+          {!!osImages && <OpenshiftVersionDropdown osImages={osImages} />}
           <RichInputField
             label={t('ai:Location')}
             name="location"
@@ -276,6 +283,7 @@ type InfraEnvFormPageProps = InfraEnvFormProps & {
   pullSecret?: string;
   sshPublicKey?: string;
   docVersion: string;
+  osImages?: OsImage[];
 };
 
 export const InfraEnvFormPage: React.FC<InfraEnvFormPageProps> = ({
@@ -345,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

@@ -0,0 +1,72 @@
+import * as React from 'react';
+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';
+import { OsImage } from '../../types';
+
+const OpenshiftVersionDropdown = ({ osImages }: { osImages: OsImage[] }) => {
+  const { t } = useTranslation();
+  const [{ name, value }, , { setValue }] = useField<string>('osImageVersion');
+  const [{ value: cpuArchitecture }] = useField<string>('cpuArchitecture');
+  const [osImageOpen, setOsImageOpen] = React.useState(false);
+  const fieldId = getFieldId(name, 'input');
+
+  const onOsImageSelect = (e?: React.SyntheticEvent<HTMLDivElement>) => {
+    const val = e?.currentTarget.id || '';
+    setValue(val);
+    setOsImageOpen(false);
+  };
+
+  const filteredImages = React.useMemo(
+    () => osImages.filter((image) => image.cpuArchitecture === cpuArchitecture),
+    [osImages, cpuArchitecture],
+  );
+
+  React.useEffect(() => {
+    if (filteredImages.length === 0 && value !== '') {
+      setValue('');
+    }
+  }, [filteredImages.length, setValue, t, value]);
+
+  return (
+    <FormGroup isInline fieldId={fieldId} label={t('ai:OpenShift version')}>
+      <Tooltip
+        content={t(
+          'ai:No OpenShift images available for selected CPU architecture {{cpuArchitecture}}.',
+          architectureData[cpuArchitecture as SupportedCpuArchitecture].label,
+        )}
+        hidden={!!filteredImages.length}
+      >
+        <Dropdown
+          toggle={
+            <DropdownToggle
+              onToggle={() => setOsImageOpen(!osImageOpen)}
+              className="pf-u-w-100"
+              isDisabled={!filteredImages.length}
+            >
+              {value ? `OpenShift ${value}` : t('ai:No version selected')}
+            </DropdownToggle>
+          }
+          name="osImageVersion"
+          isOpen={osImageOpen}
+          onSelect={onOsImageSelect}
+          dropdownItems={[
+            <DropdownItem key={'NO_VALUE'} value={''}>
+              {t('ai:No version selected')}
+            </DropdownItem>,
+            ...filteredImages.map((image) => (
+              <DropdownItem key={image.openshiftVersion} id={image.openshiftVersion}>
+                {`OpenShift ${image.openshiftVersion}`}
+              </DropdownItem>
+            )),
+          ]}
+          className="pf-u-w-100"
+        />
+      </Tooltip>
+    </FormGroup>
+  );
+};
+
+export default OpenshiftVersionDropdown;

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,
@@ -11,9 +12,35 @@ import {
 import { useField } from 'formik';
 import { useFormikHelpers } from '../../../common/hooks/useFormikHelpers';
 
-const CpuArchitectureDropdown = ({ isDisabled = false }: { isDisabled?: boolean }) => {
+const allDropdownItems = {
+  [CpuArchitecture.x86]: (
+    <DropdownItem key={'x86_64'} id="x86_64" description={architectureData['x86_64'].description}>
+      {architectureData['x86_64'].label}
+    </DropdownItem>
+  ),
+  [CpuArchitecture.ARM]: (
+    <DropdownItem key={'arm64'} id="arm64" description={architectureData['arm64'].description}>
+      {architectureData['arm64'].label}
+    </DropdownItem>
+  ),
+  [CpuArchitecture.s390x]: (
+    <DropdownItem key={'s390x'} id="s390x" description={architectureData['s390x'].description}>
+      {architectureData['s390x'].label}
+    </DropdownItem>
+  ),
+};
+
+const CpuArchitectureDropdown = ({
+  isDisabled = false,
+  cpuArchitectures,
+}: {
+  isDisabled?: boolean;
+  cpuArchitectures?: string[];
+}) => {
   const { t } = useTranslation();
-  const [{ name, value }, , { setValue }] = useField<SupportedCpuArchitecture>('cpuArchitecture');
+  const [{ name, value }, , { setValue }] = useField<SupportedCpuArchitecture | ''>(
+    'cpuArchitecture',
+  );
   const [cpuArchOpen, setCpuArchOpen] = React.useState(false);
   const fieldId = getFieldId(name, 'input');
   const { setValue: setUserManagedNetworking } = useFormikHelpers<boolean>('userManagedNetworking');
@@ -26,8 +53,24 @@ const CpuArchitectureDropdown = ({ isDisabled = false }: { isDisabled?: boolean
     setCpuArchOpen(false);
   };
 
+  const dropdownItems = React.useMemo(() => {
+    if (!cpuArchitectures) {
+      return Object.values(allDropdownItems);
+    } else {
+      return Object.entries(allDropdownItems)
+        .filter(([key, _]) => cpuArchitectures.includes(key))
+        .map(([_, val]) => val);
+    }
+  }, [cpuArchitectures]);
+
+  React.useEffect(() => {
+    if (!isDisabled && value !== '' && cpuArchitectures && !cpuArchitectures?.includes(value)) {
+      setValue('');
+    }
+  }, [cpuArchitectures, isDisabled, setValue, value]);
+
   return !isDisabled ? (
-    <FormGroup isInline fieldId={fieldId} label={t('ai:CPU architecture')} required>
+    <FormGroup isInline fieldId={fieldId} label={t('ai:CPU architecture')} isRequired>
       <Dropdown
         toggle={
           <DropdownToggle onToggle={() => setCpuArchOpen(!cpuArchOpen)} className="pf-u-w-100">
@@ -37,35 +80,13 @@ const CpuArchitectureDropdown = ({ isDisabled = false }: { isDisabled?: boolean
         name="cpuArchitecture"
         isOpen={cpuArchOpen}
         onSelect={onCpuArchSelect}
-        dropdownItems={[
-          <DropdownItem
-            key={'x86_64'}
-            id="x86_64"
-            description={architectureData['x86_64'].description}
-          >
-            {architectureData['x86_64'].label}
-          </DropdownItem>,
-          <DropdownItem
-            key={'arm64'}
-            id="arm64"
-            description={architectureData['arm64'].description}
-          >
-            {architectureData['arm64'].label}
-          </DropdownItem>,
-          <DropdownItem
-            key={'s390x'}
-            id="s390x"
-            description={architectureData['s390x'].description}
-          >
-            {architectureData['s390x'].label}
-          </DropdownItem>,
-        ]}
+        dropdownItems={dropdownItems}
         className="pf-u-w-100"
       />
     </FormGroup>
   ) : (
     <StaticField name={'cpuArchitecture'} label={t('ai:CPU architecture')} isRequired>
-      {architectureData[value].label}
+      {architectureData[value as SupportedCpuArchitecture].label}
     </StaticField>
   );
 };

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/helpers/versions.ts

@@ -4,6 +4,7 @@ import {
   AgentClusterInstallK8sResource,
   ClusterImageSetK8sResource,
   ClusterVersionK8sResource,
+  OsImage,
 } from '../../types';
 import { OpenshiftVersionOptionType } from '../../../common';
 import { OpenshiftVersion } from '@openshift-assisted/types/assisted-installer-service';
@@ -51,7 +52,12 @@ export const isValidImageSet = (cis: ClusterImageSetK8sResource, architectures?:
 export const getOCPVersions = (
   clusterImageSets: ClusterImageSetK8sResource[],
   isNutanix?: boolean | undefined,
+  osImages?: OsImage[],
 ): OpenshiftVersionOptionType[] => {
+  const ocpImageVersions = Array.from(
+    new Set(osImages?.map((osImage) => osImage.openshiftVersion)),
+  );
+
   const versions = clusterImageSets
     .filter((clusterImageSet) =>
       isValidImageSet(clusterImageSet, isNutanix ? supportedNutanixPlatforms : undefined),
@@ -67,6 +73,10 @@ export const getOCPVersions = (
         supportLevel: 'production', // getSupportLevelFromChannel(clusterImageSet.metadata?.labels?.channel),
       };
     })
+    .filter((ocpVersion) => {
+      const ver = ocpVersion.version.split('.').slice(0, 2).join('.');
+      return !!ocpImageVersions.length ? ocpImageVersions.includes(ver) : true;
+    })
     .sort(
       (versionA, versionB) => /* descending */ -1 * versionA.label.localeCompare(versionB.label),
     );
@@ -75,6 +85,7 @@ export const getOCPVersions = (
     // make sure that the pre-selected one is the first-one after sorting
     versions[0].default = true;
   }
+
   const deduped = uniqBy(versions, (v) => v.version);
   return deduped;
 };
@@ -86,6 +97,7 @@ export const getSelectedVersion = (
   const selectedClusterImage = clusterImages.find(
     (ci) => ci.metadata?.name === agentClusterInstall?.spec?.imageSetRef?.name,
   );
+
   return selectedClusterImage
     ? getOCPVersions([selectedClusterImage])?.[0]?.version
     : agentClusterInstall?.spec?.imageSetRef?.name;