@openshift-assisted/ui-lib 2.14.2-cim → 2.14.4-cim

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { FormGroup } from '@patternfly/react-core';
-import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
+import { Dropdown, DropdownItem, FormGroup, MenuToggle } from '@patternfly/react-core';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import {
   architectureData,
@@ -12,30 +11,18 @@ import {
 import { useField } from 'formik';
 import { useFormikHelpers } from '../../../common/hooks/useFormikHelpers';
 
-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 cimCpuArchitectures = [
+  CpuArchitecture.x86,
+  CpuArchitecture.ARM,
+  CpuArchitecture.s390x,
+] as SupportedCpuArchitecture[];
 
 const CpuArchitectureDropdown = ({
   isDisabled = false,
   cpuArchitectures,
 }: {
   isDisabled?: boolean;
-  cpuArchitectures?: string[];
+  cpuArchitectures?: SupportedCpuArchitecture[];
 }) => {
   const { t } = useTranslation();
   const [{ name, value }, , { setValue }] = useField<SupportedCpuArchitecture | ''>(
@@ -45,7 +32,7 @@ const CpuArchitectureDropdown = ({
   const fieldId = getFieldId(name, 'input');
   const { setValue: setUserManagedNetworking } = useFormikHelpers<boolean>('userManagedNetworking');
 
-  const onCpuArchSelect = (e?: React.SyntheticEvent<HTMLDivElement>) => {
+  const onCpuArchSelect = (e?: React.MouseEvent<Element, MouseEvent>) => {
     const val = e?.currentTarget.id as SupportedCpuArchitecture;
     setValue(val);
     setUserManagedNetworking(val === CpuArchitecture.s390x);
@@ -53,36 +40,60 @@ const CpuArchitectureDropdown = ({
     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]);
+  const dropdownItems = React.useMemo(
+    () =>
+      cimCpuArchitectures.map((arch) => {
+        const isItemEnabled = !cpuArchitectures || cpuArchitectures.includes(arch);
+        const disabledReason = t(
+          'ai:This option is not available with the selected OpenShift version',
+        );
+        return (
+          <DropdownItem
+            key={arch}
+            id={arch}
+            isAriaDisabled={!isItemEnabled}
+            selected={arch === value}
+            description={architectureData[arch].description}
+            tooltipProps={{ content: disabledReason, position: 'top' }}
+            onClick={(e: React.MouseEvent) => e.preventDefault()}
+          >
+            {architectureData[arch].label}
+          </DropdownItem>
+        );
+      }),
+    [cpuArchitectures, t, value],
+  );
 
   React.useEffect(() => {
     if (!isDisabled && value !== '' && cpuArchitectures && !cpuArchitectures?.includes(value)) {
-      setValue('');
+      const defaultVal = cpuArchitectures?.[0] || CpuArchitecture.x86;
+      setValue(defaultVal);
     }
   }, [cpuArchitectures, isDisabled, setValue, value]);
 
   return !isDisabled ? (
-    <FormGroup isInline fieldId={fieldId} label={t('ai:CPU architecture')} isRequired>
+    <FormGroup
+      isInline
+      fieldId={fieldId}
+      label={t('ai:CPU architecture')}
+      isRequired
+      name={'cpuArchiteture'}
+    >
       <Dropdown
-        toggle={
-          <DropdownToggle onToggle={() => setCpuArchOpen(!cpuArchOpen)} className="pf-u-w-100">
+        toggle={(toggleRef) => (
+          <MenuToggle
+            ref={toggleRef}
+            onClick={() => setCpuArchOpen(!cpuArchOpen)}
+            className="pf-u-w-100"
+          >
             {value ? architectureData[value].label : t('ai:CPU architecture')}
-          </DropdownToggle>
-        }
-        name="cpuArchitecture"
+          </MenuToggle>
+        )}
         isOpen={cpuArchOpen}
         onSelect={onCpuArchSelect}
-        dropdownItems={dropdownItems}
-        className="pf-u-w-100"
-      />
+      >
+        {dropdownItems}
+      </Dropdown>
     </FormGroup>
   ) : (
     <StaticField name={'cpuArchitecture'} label={t('ai:CPU architecture')} isRequired>

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

@@ -6,11 +6,18 @@ import {
   ClusterVersionK8sResource,
   OsImage,
 } from '../../types';
-import { OpenshiftVersionOptionType } from '../../../common';
+import { CpuArchitecture, OpenshiftVersionOptionType } from '../../../common';
 import { OpenshiftVersion } from '@openshift-assisted/types/assisted-installer-service';
 
 export const getVersionFromReleaseImage = (releaseImage = '') => {
-  const match = /.+:(.*)-/gm.exec(releaseImage);
+  const match = /.+:(.*)/gm.exec(releaseImage);
+  if (match && match.length > 1 && match[1]) {
+    return match[1];
+  }
+};
+
+const getCPUArchFromReleaseImage = (releaseImage = '') => {
+  const match = /.+:.*-(.*)/gm.exec(releaseImage);
   if (match && match.length > 1 && match[1]) {
     return match[1];
   }
@@ -37,8 +44,12 @@ const getSupportLevelFromChannel = (
 
 export const supportedNutanixPlatforms = ['x86_64', 'x86-64'];
 
-export const isValidImageSet = (cis: ClusterImageSetK8sResource, architectures?: string[]) => {
-  if (cis.metadata?.labels?.visible !== 'true') {
+export const isValidImageSet = (
+  cis: ClusterImageSetK8sResource,
+  architectures?: string[],
+  extended?: boolean,
+) => {
+  if (!extended && cis.metadata?.labels?.visible !== 'true') {
     return false;
   }
   if (!architectures) {
@@ -53,6 +64,7 @@ export const getOCPVersions = (
   clusterImageSets: ClusterImageSetK8sResource[],
   isNutanix?: boolean | undefined,
   osImages?: OsImage[],
+  extended?: boolean,
 ): OpenshiftVersionOptionType[] => {
   const ocpImageVersions = Array.from(
     new Set(osImages?.map((osImage) => osImage.openshiftVersion)),
@@ -60,10 +72,11 @@ export const getOCPVersions = (
 
   const versions = clusterImageSets
     .filter((clusterImageSet) =>
-      isValidImageSet(clusterImageSet, isNutanix ? supportedNutanixPlatforms : undefined),
+      isValidImageSet(clusterImageSet, isNutanix ? supportedNutanixPlatforms : undefined, extended),
     )
     .map((clusterImageSet): OpenshiftVersionOptionType => {
       const version = getVersionFromReleaseImage(clusterImageSet.spec?.releaseImage);
+      const cpuArch = getCPUArchFromReleaseImage(clusterImageSet.spec?.releaseImage);
       return {
         label: `OpenShift ${version ? version : (clusterImageSet.metadata?.name as string)}`,
         version: version || clusterImageSet.metadata?.name || '',
@@ -71,6 +84,7 @@ export const getOCPVersions = (
         default: false,
         // (rawagner) ACM does not have the warning so changing to 'production'
         supportLevel: 'production', // getSupportLevelFromChannel(clusterImageSet.metadata?.labels?.channel),
+        cpuArchitectures: cpuArch ? [cpuArch as CpuArchitecture] : undefined,
       };
     })
     .filter((ocpVersion) => {
@@ -99,7 +113,7 @@ export const getSelectedVersion = (
   );
 
   return selectedClusterImage
-    ? getOCPVersions([selectedClusterImage])?.[0]?.version
+    ? getOCPVersions([selectedClusterImage], undefined, undefined, true)?.[0]?.version
     : agentClusterInstall?.spec?.imageSetRef?.name;
 };
 

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

@@ -11,21 +11,17 @@ interface ControlPlaneNodesOption {
   label: string;
 }
 
-const isDropdownItemEnabled = (controlPlaneNodeCount: number, isNutanix?: boolean): boolean => {
-  return (controlPlaneNodeCount === 1 && !isNutanix) || controlPlaneNodeCount !== 1;
-};
-
 const ControlPlaneNodesDropdown = ({
   isDisabled = false,
-  isNutanix,
+  allowHighlyAvailable,
 }: {
   isDisabled?: boolean;
-  isNutanix?: boolean;
+  allowHighlyAvailable?: boolean;
 }) => {
   const { t } = useTranslation();
-  const [{ name, value: selectedValue }, , { setValue }] = useField<number | 3>(
-    'controlPlaneCount',
-  );
+  const [{ name, value: selectedValue }, , { setValue }] = useField<number>('controlPlaneCount');
+  const [controlPlanelOpen, setControlPlanelOpen] = React.useState(false);
+  const fieldId = getFieldId(name, 'input');
 
   const options: ControlPlaneNodesOption[] = [
     { value: 1, label: t('ai:1 (Single Node OpenShift - not highly available cluster)') },
@@ -34,14 +30,21 @@ const ControlPlaneNodesDropdown = ({
     { value: 5, label: t('ai:5 (highly available cluster++)') },
   ];
 
+  React.useEffect(() => {
+    if (!allowHighlyAvailable && [4, 5].includes(selectedValue)) {
+      setValue(3);
+    }
+  }, [allowHighlyAvailable, selectedValue, setValue]);
+
   const dropdownItems = options.map(({ value, label }) => {
-    const isItemEnabled = isDropdownItemEnabled(value, isNutanix);
-    const disabledReason = t('ai:This option is not available for Nutanix platform');
+    const isItemEnabled = [1, 3].includes(value) || allowHighlyAvailable;
+    const disabledReason = t('ai:This option is not available with the selected OpenShift version');
     return (
       <DropdownItem
         key={value}
         id={value.toString()}
         isAriaDisabled={!isItemEnabled}
+        isDisabled={!isItemEnabled}
         selected={selectedValue === value}
         value={value}
       >
@@ -52,9 +55,6 @@ const ControlPlaneNodesDropdown = ({
     );
   });
 
-  const [controlPlanelOpen, setControlPlanelOpen] = React.useState(false);
-  const fieldId = getFieldId(name, 'input');
-
   const onControlPlaneSelect = (e?: React.SyntheticEvent<HTMLDivElement>) => {
     const val = e?.currentTarget.id as string;
     setValue(toNumber(val));

package/lib/common/components/ui/{OpenshiftSelectWithSearch.tsx → OpenShiftSelectWithSearch.tsx}

@@ -22,11 +22,11 @@ import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 type OpenshiftSelectWithSearchProps = {
   versions: OpenshiftVersionOptionType[];
-  getHelperText: HelperTextType;
+  getHelperText?: HelperTextType;
   setCustomOpenshiftSelect: Dispatch<SetStateAction<OpenshiftVersionOptionType | undefined>>;
 };
 
-export const OpenshiftSelectWithSearch: React.FunctionComponent<OpenshiftSelectWithSearchProps> = ({
+export const OpenShiftSelectWithSearch: React.FunctionComponent<OpenshiftSelectWithSearchProps> = ({
   versions,
   getHelperText,
   setCustomOpenshiftSelect,
@@ -232,7 +232,7 @@ export const OpenshiftSelectWithSearch: React.FunctionComponent<OpenshiftSelectW
     </MenuToggle>
   );
 
-  const helperText = getHelperText(selected, true);
+  const helperText = getHelperText && getHelperText(selected, true);
 
   return (
     <>
@@ -285,7 +285,7 @@ export const OpenshiftSelectWithSearch: React.FunctionComponent<OpenshiftSelectW
         <HelperText>
           <HelperTextItem variant="default">
             {helperText ??
-              'Select an Openshift version from the list or use the type ahead to narrow down the list.'}
+              'Select an OpenShift version from the list or use the type ahead to narrow down the list.'}
           </HelperTextItem>
         </HelperText>
       </FormHelperText>

package/lib/common/components/ui/OpenShiftVersionDropdown.css

@@ -0,0 +1,9 @@
+#form-input-openshiftVersion-field .pf-v5-c-dropdown__menu {
+  max-height: 22vh;
+  overflow: auto;
+}
+
+#form-input-openshiftVersion-field .pf-v5-c-dropdown__menu ul {
+  list-style: none;
+  padding-left: 0;
+}

package/lib/common/components/ui/OpenShiftVersionDropdown.tsx

@@ -22,7 +22,7 @@ import { getFieldId } from './formik';
 import ExternalLink from './ExternalLink';
 import { OCP_RELEASES_PAGE } from '../../config';
 import { ClusterDetailsValues, ItemDropdown } from '../clusterWizard';
-import './OpenshiftVersionDropdown.css';
+import './OpenShiftVersionDropdown.css';
 
 export type HelperTextType = (value: string | undefined, inModal?: boolean) => JSX.Element | null;
 
@@ -30,7 +30,7 @@ type OpenShiftVersionDropdownProps = {
   name: string;
   items: ItemDropdown;
   versions: OpenshiftVersionOptionType[];
-  getHelperText: HelperTextType;
+  getHelperText?: HelperTextType;
   showReleasesLink: boolean;
   showOpenshiftVersionModal: () => void;
   customItems: ItemDropdown;
@@ -159,7 +159,7 @@ export const OpenShiftVersionDropdown = ({
     [setOpen, current, isDisabled],
   );
 
-  const helperText = getHelperText(field.value);
+  const helperText = getHelperText && getHelperText(field.value);
 
   return (
     <FormGroup

package/lib/{ocm/components/clusterConfiguration → common/components/ui}/OpenShiftVersionModal.tsx

@@ -1,23 +1,23 @@
 import React, { useState } from 'react';
 import { Button, ButtonVariant, FormGroup, Modal, ModalVariant } from '@patternfly/react-core';
-import './OpenshiftVersionModal.css';
-import { OpenshiftSelectWithSearch } from '../../../common/components/ui/OpenshiftSelectWithSearch';
-import { useOpenshiftVersionsContext } from '../clusterWizard/OpenshiftVersionsContext';
-import { HelperTextType } from '../../../common/components/ui/OpenShiftVersionDropdown';
+import { OpenShiftSelectWithSearch } from './OpenShiftSelectWithSearch';
+import { HelperTextType } from './OpenShiftVersionDropdown';
 import { useFormikContext } from 'formik';
-import { ClusterDetailsValues, OpenshiftVersionOptionType } from '../../../common';
+import { ClusterDetailsValues, OpenshiftVersionOptionType } from '../..';
+import './OpenShiftVersionModal.css';
 
 type OpenShiftVersionModalProps = {
+  allVersions: OpenshiftVersionOptionType[];
   setOpenshiftVersionModalOpen: (isOpen: boolean) => void;
-  getHelperText: HelperTextType;
+  getHelperText?: HelperTextType;
 };
 
 export const OpenShiftVersionModal = ({
+  allVersions,
   setOpenshiftVersionModalOpen,
   getHelperText,
 }: OpenShiftVersionModalProps) => {
   const { setFieldValue } = useFormikContext<ClusterDetailsValues>();
-  const { allVersions: versions } = useOpenshiftVersionsContext();
   const onClose = () => setOpenshiftVersionModalOpen(false);
   const [customOpenshiftSelect, setCustomOpenshiftSelect] = useState<OpenshiftVersionOptionType>(); // Cambiar el tipo según lo que esperes aquí
 
@@ -50,8 +50,8 @@ export const OpenShiftVersionModal = ({
         label={'OpenShift version'}
         isRequired
       >
-        <OpenshiftSelectWithSearch
-          versions={versions}
+        <OpenShiftSelectWithSearch
+          versions={allVersions}
           getHelperText={getHelperText}
           setCustomOpenshiftSelect={setCustomOpenshiftSelect}
         />

package/lib/common/components/ui/formik/RichInputField.tsx

@@ -101,6 +101,7 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
     const fieldId = getFieldId(props.name, 'input', idPostfix);
     const isValid = !(touched && error?.length);
 
+    const errorMessage = isValid ? '' : error[0];
     return (
       <FormGroup
         id={`form-control__${fieldId}`}
@@ -163,14 +164,15 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
             </Popover>
           </InputGroupItem>
         </InputGroup>
-        {helperText && (
+        {(errorMessage || helperText) && (
           <FormHelperText>
             <HelperText>
               <HelperTextItem
+                icon={errorMessage && <ExclamationCircleIcon />}
                 variant={isValid ? 'default' : 'error'}
                 id={isValid ? `${fieldId}-helper` : `${fieldId}-helper-error`}
               >
-                {helperText}
+                {errorMessage ? errorMessage : helperText}
               </HelperTextItem>
             </HelperText>
           </FormHelperText>

package/lib/common/components/ui/index.ts

@@ -12,6 +12,9 @@ export * from './PreviewBadge';
 export * from './TechnologyPreview';
 export * from './DeveloperPreview';
 
+export * from './OpenShiftVersionDropdown';
+export * from './OpenShiftVersionModal';
+
 export * from './utils';
 
 export { default as PopoverIcon } from './PopoverIcon';

package/lib/ocm/components/AddHosts/day2Wizard/Day2ClusterDetails.tsx

@@ -24,7 +24,7 @@ import Day2HostStaticIpConfigurations from './Day2StaticIpHostConfigurations';
 import { mapClusterCpuArchToInfraEnvCpuArch } from '../../../services/CpuArchitectureService';
 import CpuArchitectureDropdown from '../../clusterConfiguration/CpuArchitectureDropdown';
 import { usePullSecret } from '../../../hooks';
-import { useOpenshiftVersionsContext } from '../../clusterWizard/OpenshiftVersionsContext';
+import { useOpenShiftVersionsContext } from '../../clusterWizard/OpenShiftVersionsContext';
 import {
   Cluster,
   InfraEnv,
@@ -87,7 +87,7 @@ const Day2ClusterDetails = () => {
   const [initialValues, setInitialValues] = React.useState<Day2ClusterDetailValues | null>(null);
   const [isSubmitting, setSubmitting] = React.useState(false);
   const [isAlternativeCpuSelected, setIsAlternativeCpuSelected] = React.useState(false);
-  const { getCpuArchitectures } = useOpenshiftVersionsContext();
+  const { getCpuArchitectures } = useOpenShiftVersionsContext();
   const cpuArchitecturesByVersionImage = getCpuArchitectures(day2Cluster.openshiftVersion);
   const day1CpuArchitecture = mapClusterCpuArchToInfraEnvCpuArch(day2Cluster.cpuArchitecture);
   const [errorState, setErrorState] = React.useState<Error | null>(null);

package/lib/ocm/components/HostsClusterDetailTab/HostsClusterDetailTabContent.tsx

@@ -23,7 +23,7 @@ import {
 import useInfraEnv from '../../hooks/useInfraEnv';
 import { mapOcmArchToCpuArchitecture } from '../../services/CpuArchitectureService';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
-import { OpenshiftVersionsContextProvider } from '../clusterWizard/OpenshiftVersionsContext';
+import { OpenShiftVersionsContextProvider } from '../clusterWizard/OpenShiftVersionsContext';
 
 export const HostsClusterDetailTabContent = ({
   cluster: ocmCluster,
@@ -156,7 +156,7 @@ export const HostsClusterDetailTabContent = ({
       ocpConsoleUrl={ocmCluster?.console?.url}
       canEdit={ocmCluster.canEdit}
     >
-      <OpenshiftVersionsContextProvider>
+      <OpenShiftVersionsContextProvider>
         <NewFeatureSupportLevelProvider
           loadingUi={<LoadingState />}
           cluster={day2Cluster}
@@ -166,7 +166,7 @@ export const HostsClusterDetailTabContent = ({
         >
           <AddHosts />
         </NewFeatureSupportLevelProvider>
-      </OpenshiftVersionsContextProvider>
+      </OpenShiftVersionsContextProvider>
     </AddHostsContextProvider>
   );
 };

package/lib/ocm/components/HostsClusterDetailTab/HostsClusterDetailTabMock.tsx

@@ -16,7 +16,7 @@ import {
 import { OcmClusterType } from '../AddHosts';
 import HostsClusterDetailTab from './HostsClusterDetailTab';
 import clustersAPI from '../../../common/api/assisted-service/ClustersAPI';
-import { OpenshiftVersionsContextProvider } from '../clusterWizard/OpenshiftVersionsContext';
+import { OpenShiftVersionsContextProvider } from '../clusterWizard/OpenShiftVersionsContext';
 
 const clusterWithoutMetrics = {
   id: 'ocm-cluster-id',
@@ -78,13 +78,13 @@ export const HostsClusterDetailTabMock = () => {
   return (
     <PageSection variant={PageSectionVariants.light} isFilled>
       {tabShown ? (
-        <OpenshiftVersionsContextProvider>
+        <OpenShiftVersionsContextProvider>
           <HostsClusterDetailTab
             cluster={getCluster(tabShown)}
             allEnabledFeatures={STANDALONE_DEPLOYMENT_ENABLED_FEATURES}
             isVisible
           />
-        </OpenshiftVersionsContextProvider>
+        </OpenShiftVersionsContextProvider>
       ) : (
         <Grid hasGutter>
           <ToolbarButton variant={ButtonVariant.primary} onClick={() => onAddHosts('no-metrics')}>

package/lib/ocm/components/clusterConfiguration/OcmClusterDetailsFormFields.tsx

@@ -26,7 +26,7 @@ import CpuArchitectureDropdown from './CpuArchitectureDropdown';
 import { OcmBaseDomainField } from './OcmBaseDomainField';
 import OcmSNOControlGroup from './OcmSNOControlGroup';
 import useSupportLevelsAPI from '../../hooks/useSupportLevelsAPI';
-import { useOpenshiftVersionsContext } from '../clusterWizard/OpenshiftVersionsContext';
+import { useOpenShiftVersionsContext } from '../clusterWizard/OpenShiftVersionsContext';
 import { ExternalPlatformDropdown } from './platformIntegration/ExternalPlatformDropdown';
 import { HostsNetworkConfigurationType } from '../../services/types';
 import { useNewFeatureSupportLevel } from '../../../common/components/newFeatureSupportLevels';
@@ -65,7 +65,7 @@ export const OcmClusterDetailsFormFields = ({
   const { t } = useTranslation();
   const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
   const { openshiftVersion, platform } = values;
-  const { getCpuArchitectures } = useOpenshiftVersionsContext();
+  const { getCpuArchitectures } = useOpenShiftVersionsContext();
   const cpuArchitecturesByVersionImage = getCpuArchitectures(openshiftVersion);
   const clusterWizardContext = useClusterWizardContext();
   const featureSupportLevelData = useSupportLevelsAPI(

package/lib/ocm/components/clusterConfiguration/OcmOpenShiftVersion.tsx

@@ -23,7 +23,7 @@ const OcmOpenShiftVersion = ({
 }: OcmOpenShiftVersionProps) => {
   return (
     <StaticTextField name="openshiftVersion" label="OpenShift version" isRequired>
-      Openshift{' '}
+      OpenShift{' '}
       {getOpenshiftVersionText({
         openshiftVersion,
         cpuArchitecture: clusterCpuArchitecture as ClusterCpuArchitecture,

package/lib/ocm/components/clusterConfiguration/OcmOpenShiftVersionSelect.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-import { OpenshiftVersionOptionType, ClusterDetailsValues } from '../../../common';
+import {
+  OpenshiftVersionOptionType,
+  ClusterDetailsValues,
+  OpenShiftVersionDropdown,
+  OpenShiftVersionModal,
+} from '../../../common';
 import { isInOcm } from '../../../common/api';
-import { OpenShiftVersionDropdown } from '../../../common/components/ui/OpenShiftVersionDropdown';
-import { OpenShiftVersionModal } from './OpenShiftVersionModal';
 import { useFormikContext } from 'formik';
 import { getOpenshiftVersionHelperText } from './OpenshiftVersionHelperText';
-import { useOpenshiftVersionsContext } from '../clusterWizard/OpenshiftVersionsContext';
+import { useOpenShiftVersionsContext } from '../clusterWizard/OpenShiftVersionsContext';
 
 type OcmOpenShiftVersionSelectProps = {
   versions: OpenshiftVersionOptionType[];
@@ -50,7 +53,7 @@ const OcmOpenShiftVersionSelect = ({ versions }: OcmOpenShiftVersionSelectProps)
     return [];
   }, [selectOptions, customOpenshiftSelect]);
 
-  const { allVersions } = useOpenshiftVersionsContext();
+  const { allVersions } = useOpenShiftVersionsContext();
 
   const getHelperText = (value: string | undefined, inModal?: boolean) => {
     return getOpenshiftVersionHelperText(allVersions, value, t, inModal);
@@ -69,6 +72,7 @@ const OcmOpenShiftVersionSelect = ({ versions }: OcmOpenShiftVersionSelectProps)
       />
       {isOpenshiftVersionModalOpen && (
         <OpenShiftVersionModal
+          allVersions={allVersions}
           setOpenshiftVersionModalOpen={setIsOpenshiftVersionModalOpen}
           getHelperText={getHelperText}
         />

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

@@ -22,7 +22,7 @@ import {
   UiIcon,
 } from '../../../../common';
 import { useClusterWizardContext } from '../../clusterWizard/ClusterWizardContext';
-import { useOpenshiftVersionsContext } from '../../clusterWizard/OpenshiftVersionsContext';
+import { useOpenShiftVersionsContext } from '../../clusterWizard/OpenShiftVersionsContext';
 import { wizardStepNames } from '../../clusterWizard/constants';
 import {
   ClusterWizardStepsType,
@@ -118,7 +118,7 @@ const getCheckIcon = (validationStatuses: string[]) => {
 const PreflightChecksDetailCollapsed = ({ cluster }: { cluster: Cluster }) => {
   const { t } = useTranslation();
   const featureSupportLevelData = useNewFeatureSupportLevel();
-  const { isSupportedOpenShiftVersion } = useOpenshiftVersionsContext();
+  const { isSupportedOpenShiftVersion } = useOpenShiftVersionsContext();
 
   const { isFullySupported } = React.useMemo<SupportLevelMemo>(
     () => getSupportLevelInfo(cluster, featureSupportLevelData, isSupportedOpenShiftVersion, t),

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

@@ -28,7 +28,7 @@ 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 { OpenShiftVersionsContextProvider } from '../clusterWizard/OpenShiftVersionsContext';
 import {
   unstable_HistoryRouter as HistoryRouter,
   HistoryRouterProps,
@@ -148,7 +148,7 @@ const AssistedInstallerDetailCard = ({
   return (
     <HistoryRouter history={history} basename={basename}>
       <AlertsContextProvider>
-        <OpenshiftVersionsContextProvider>
+        <OpenShiftVersionsContextProvider>
           <SentryErrorMonitorContextProvider>
             <ModalDialogsContextProvider>
               <ClusterDefaultConfigurationProvider
@@ -171,7 +171,7 @@ const AssistedInstallerDetailCard = ({
               </ClusterDefaultConfigurationProvider>
             </ModalDialogsContextProvider>
           </SentryErrorMonitorContextProvider>
-        </OpenshiftVersionsContextProvider>
+        </OpenShiftVersionsContextProvider>
       </AlertsContextProvider>
     </HistoryRouter>
   );

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

@@ -11,7 +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';
+import { OpenShiftVersionsContextProvider } from '../clusterWizard/OpenShiftVersionsContext';
 
 type AssistedInstallerExtraDetailCardProps = {
   allEnabledFeatures: FeatureListType;
@@ -58,9 +58,9 @@ const Wrapper: React.FC<AssistedInstallerExtraDetailCardProps> = (props) => {
   return (
     <Provider store={storeDay1}>
       <AlertsContextProvider>
-        <OpenshiftVersionsContextProvider>
+        <OpenShiftVersionsContextProvider>
           <AssistedInstallerExtraDetailCard {...props} />
-        </OpenshiftVersionsContextProvider>
+        </OpenShiftVersionsContextProvider>
       </AlertsContextProvider>
     </Provider>
   );

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { UiIcon, getOpenshiftVersionText } from '../../../common';
-import { useOpenshiftVersionsContext } from '../clusterWizard/OpenshiftVersionsContext';
+import { useOpenShiftVersionsContext } from '../clusterWizard/OpenShiftVersionsContext';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 import { Popover, Text, TextContent, TextVariants } from '@patternfly/react-core';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
@@ -28,7 +28,7 @@ const UnsupportedVersion = ({ version }: { version: string }) => {
 
 const OpenShiftVersionDetail = ({ cluster }: { cluster: Cluster }) => {
   const { openshiftVersion } = cluster;
-  const { isSupportedOpenShiftVersion, latestVersions: versions } = useOpenshiftVersionsContext();
+  const { isSupportedOpenShiftVersion, latestVersions: versions } = useOpenShiftVersionsContext();
   const isSupported = isSupportedOpenShiftVersion(openshiftVersion);
 
   const version = React.useMemo(() => {