@openshift-assisted/ui-lib 2.17.4-cim → 2.18.1-cim

package/lib/common/config/constants.ts

@@ -53,6 +53,7 @@ export const clusterStatusLabels = (t: TFunction): { [key in Cluster['status']]:
   error: t('ai:Error'),
   installed: t('ai:Installed'),
   'adding-hosts': t('ai:Adding hosts'),
+  unmonitored: t('ai:Unmonitored'),
 });
 
 export const clusterFieldLabels = (t: TFunction): { [key in string]: string } => ({
@@ -70,6 +71,7 @@ export const clusterFieldLabels = (t: TFunction): { [key in string]: string } =>
   httpProxy: t('ai:HTTP proxy'),
   httpsProxy: t('ai:HTTPS proxy'),
   noProxy: t('ai:No proxy'),
+  additionalNtpSources: t('ai:Additional NTP sources'),
   machineNetworks: t('ai:Machine networks'),
   clusterNetworks: t('ai:Cluster networks'),
   serviceNetworks: t('ai:Service networks'),
@@ -287,8 +289,10 @@ export const CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV6 = {
 export const CLUSTER_DEFAULT_NETWORK_SETTINGS: Pick<
   ClusterDefaultConfig,
   | 'clusterNetworksIpv4'
+  | 'clusterNetworksIpv6'
   | 'clusterNetworksDualstack'
   | 'serviceNetworksIpv4'
+  | 'serviceNetworksIpv6'
   | 'serviceNetworksDualstack'
 > = {
   clusterNetworksIpv4: [
@@ -297,6 +301,12 @@ export const CLUSTER_DEFAULT_NETWORK_SETTINGS: Pick<
       hostPrefix: CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV4.clusterNetworkHostPrefix,
     },
   ],
+  clusterNetworksIpv6: [
+    {
+      cidr: CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV6.clusterNetworkCidr,
+      hostPrefix: CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV6.clusterNetworkHostPrefix,
+    },
+  ],
   clusterNetworksDualstack: [
     {
       cidr: CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV4.clusterNetworkCidr,
@@ -308,6 +318,7 @@ export const CLUSTER_DEFAULT_NETWORK_SETTINGS: Pick<
     },
   ],
   serviceNetworksIpv4: [{ cidr: CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV4.serviceNetworkCidr }],
+  serviceNetworksIpv6: [{ cidr: CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV6.serviceNetworkCidr }],
   serviceNetworksDualstack: [
     { cidr: CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV4.serviceNetworkCidr },
     { cidr: CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV6.serviceNetworkCidr },
@@ -331,10 +342,7 @@ export const MS_PER_DAY = 1000 * 60 * 60 * 24;
 
 export const NO_SUBNET_SET = 'NO_SUBNET_SET';
 
-export const NETWORK_TYPE_OVN = 'OVNKubernetes';
-export const NETWORK_TYPE_SDN = 'OpenShiftSDN';
-
-export const IPV4_STACK = 'singleStack';
+export const SINGLE_STACK = 'singleStack';
 export const DUAL_STACK = 'dualStack';
 
 export const PREFIX_MAX_RESTRICTION = {

package/lib/common/config/docs_links.ts

@@ -54,6 +54,8 @@ export const getOpenShiftNetworkingDocsLink = (ocpVersion?: string) => {
   return `https://docs.redhat.com/en/documentation/openshift_container_platform/${validOcpVersion}/html/installing_on_bare_metal/${variant}#installation-network-user-infra_installing-bare-metal`;
 };
 
+export const RED_HAT_CNI_SUPPORT_MATRIX_LINK = 'https://access.redhat.com/articles/5436171';
+
 export const SSH_GENERATION_DOC_LINK = 'https://www.redhat.com/sysadmin/configure-ssh-keygen';
 
 //Hosts status

package/lib/common/features/featureGate.tsx

@@ -34,9 +34,11 @@ export const FeatureGateContext = React.createContext<FeatureGateContextType>({
   isFeatureEnabled: () => false,
 });
 
-export const FeatureGateContextProvider: React.FC<{
-  features: FeatureListType;
-}> = ({ features, children }) => {
+export const FeatureGateContextProvider: React.FC<
+  React.PropsWithChildren<{
+    features: FeatureListType;
+  }>
+> = ({ features, children }) => {
   const featuresWithDefaults: FeatureListType = {
     ...features,
   };

package/lib/common/types/index.ts

@@ -7,6 +7,7 @@ export * from './events';
 export * from './clusters';
 export * from './cpuArchitecture';
 export * from './featureSupportLevel';
+export * from './networkType';
 export * from './typescriptExtensions';
 export * from './generateIsoFields';
 export * from './errortype';

package/lib/common/types/networkType.ts

@@ -0,0 +1,37 @@
+import type { FeatureSupportLevelId } from '@openshift-assisted/types/assisted-installer-service';
+
+export type NetworkTypeKey =
+  | 'OVNKubernetes'
+  | 'OpenShiftSDN'
+  | 'CiscoACI'
+  | 'Cilium'
+  | 'Calico'
+  | 'None';
+
+export const NETWORK_TYPE_OVN: NetworkTypeKey = 'OVNKubernetes';
+export const NETWORK_TYPE_SDN: NetworkTypeKey = 'OpenShiftSDN';
+export const NETWORK_TYPE_CISCO_ACI: NetworkTypeKey = 'CiscoACI';
+export const NETWORK_TYPE_CILIUM: NetworkTypeKey = 'Cilium';
+export const NETWORK_TYPE_CALICO: NetworkTypeKey = 'Calico';
+export const NETWORK_TYPE_NONE: NetworkTypeKey = 'None';
+
+export const NETWORK_TYPE_LABELS: Record<string, string> = {
+  [NETWORK_TYPE_OVN]: 'Open Virtual Networking (OVN)',
+  [NETWORK_TYPE_SDN]: 'Software-Defined Networking (SDN)',
+  [NETWORK_TYPE_CISCO_ACI]: 'Cisco ACI',
+  [NETWORK_TYPE_CILIUM]: 'Isovalent Cilium',
+  [NETWORK_TYPE_CALICO]: 'Tigera Calico',
+  [NETWORK_TYPE_NONE]: 'None (Custom CNI)',
+};
+
+export const NETWORK_TYPE_FEATURE_IDS: Record<string, FeatureSupportLevelId> = {
+  [NETWORK_TYPE_OVN]: 'OVN_NETWORK_TYPE',
+  [NETWORK_TYPE_SDN]: 'SDN_NETWORK_TYPE',
+  [NETWORK_TYPE_CISCO_ACI]: 'CISCO_ACI_NETWORK_TYPE',
+  [NETWORK_TYPE_CILIUM]: 'CILIUM_NETWORK_TYPE',
+  [NETWORK_TYPE_CALICO]: 'CALICO_NETWORK_TYPE',
+  [NETWORK_TYPE_NONE]: 'NONE_NETWORK_TYPE',
+};
+
+export const isThirdPartyCNI = (networkType: string | undefined): boolean =>
+  !!networkType && networkType !== NETWORK_TYPE_OVN && networkType !== NETWORK_TYPE_SDN;

package/lib/common/types/ui-settings.ts

@@ -1,5 +1,4 @@
 export type UISettingsValues = {
-  addCustomManifests?: boolean;
   customManifestsAdded?: boolean;
   customManifestsUpdated?: boolean;
   bundlesSelected?: string[];

package/lib/common/validationSchemas/networkingValidation.tsx

@@ -13,7 +13,8 @@ import {
   ipBlockValidationSchema,
 } from './addressValidation';
 import { isMajorMinorVersionEqualOrGreater } from '../utils';
-import { allSubnetsIPv4 } from '../components/ui/formik/utils';
+import { allSubnetsIPv4, allSubnetsIPv6 } from '../components/ui/formik/utils';
+import { SINGLE_STACK } from '../config';
 
 export const machineNetworksValidationSchema = Yup.array().of(
   Yup.object({ cidr: hostSubnetValidationSchema, clusterId: Yup.string() }),
@@ -111,3 +112,40 @@ export const IPv4ValidationSchema = Yup.array().test(
   `All network subnets must be IPv4.`,
   (values?: (MachineNetwork | ClusterNetwork | ServiceNetwork)[]) => allSubnetsIPv4(values),
 );
+
+export const IPv6ValidationSchema = Yup.array().test(
+  'single-stack-ipv6',
+  'All network subnets must be IPv6.',
+  (values?: (MachineNetwork | ClusterNetwork | ServiceNetwork)[]) => allSubnetsIPv6(values),
+);
+
+export const clusterNetworksSchema = (
+  t: TFunction,
+  stackType: string,
+  primaryCidr: string | undefined,
+  openshiftVersion?: string,
+) => {
+  const singleStackFamilySchema =
+    primaryCidr && isCIDR.v6(primaryCidr) ? IPv6ValidationSchema : IPv4ValidationSchema;
+
+  const stackFamilySchema =
+    stackType === SINGLE_STACK
+      ? singleStackFamilySchema
+      : dualStackValidationSchema(t('ai:cluster network'), t, openshiftVersion);
+  return clusterNetworksValidationSchema(t).concat(stackFamilySchema);
+};
+
+export const serviceNetworksSchema = (
+  t: TFunction,
+  stackType: string,
+  primaryCidr: string | undefined,
+  openshiftVersion?: string,
+) => {
+  const singleStackFamilySchema =
+    primaryCidr && isCIDR.v6(primaryCidr) ? IPv6ValidationSchema : IPv4ValidationSchema;
+  const stackFamilySchema =
+    stackType === SINGLE_STACK
+      ? singleStackFamilySchema
+      : dualStackValidationSchema(t('ai:service network'), t, openshiftVersion);
+  return serviceNetworkValidationSchema(t).concat(stackFamilySchema);
+};

package/lib/common/validationSchemas/ntpValidation.tsx

@@ -3,28 +3,34 @@ import { trimCommaSeparatedList } from '../components/ui/formik/utils';
 import { isIPorDN } from './utils';
 import { TFunction } from 'i18next';
 
-export const ntpSourceValidationSchema = (t: TFunction) =>
-  Yup.string()
+export const ntpSourceValidationSchema = (t: TFunction, allowEmpty = true) => {
+  let schema = Yup.string();
+
+  if (!allowEmpty) {
+    schema = schema.trim().required(t('ai:Required field'));
+  }
+
+  return schema
     .test(
       'ntp-source-validation',
       t('ai:Provide a comma separated list of valid DNS names or IP addresses.'),
       (value?: string) => {
-        if (!value || value === '') {
+        if (!value || value.trim() === '') {
           return true;
         }
-        return trimCommaSeparatedList(value)
-          .split(',')
-          .every((v) => isIPorDN(v));
+        const parts = trimCommaSeparatedList(value).split(',');
+        return parts.length > 0 && parts.every((v) => isIPorDN(v));
       },
     )
     .test(
       'ntp-source-validation-unique',
       t('ai:DNS names and IP addresses must be unique.'),
       (value?: string) => {
-        if (!value || value === '') {
+        if (!value || value.trim() === '') {
           return true;
         }
         const arr = trimCommaSeparatedList(value).split(',');
         return arr.length === new Set(arr).size;
       },
     );
+};

package/lib/common/validationSchemas/pullSecretValidation.tsx

@@ -6,19 +6,18 @@ export const pullSecretValidationSchema = (t: TFunction) =>
     'is-well-formed-json',
     t("ai:Invalid pull secret format. You must use your Red Hat account's pull secret."),
     (value?: string) => {
-      const isValid = true;
-      if (!value) return isValid;
+      if (!value || !value.trim()) return true;
       try {
-        const pullSecret = JSON.parse(value) as {
-          auths: string;
-        };
+        const pullSecret = JSON.parse(value) as unknown;
         return (
-          pullSecret.constructor.name === 'Object' &&
-          !!pullSecret?.auths &&
-          pullSecret.auths.constructor.name === 'Object'
+          typeof pullSecret === 'object' &&
+          pullSecret !== null &&
+          'auths' in pullSecret &&
+          typeof (pullSecret as { auths: unknown }).auths === 'object' &&
+          (pullSecret as { auths: unknown }).auths !== null
         );
       } catch {
-        return !isValid;
+        return false;
       }
     },
   );

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

@@ -7,7 +7,12 @@ import {
   Button,
   ButtonVariant,
 } from '@patternfly/react-core';
-import { ClusterWizardStep, ErrorState, LoadingState } from '../../../../common';
+import {
+  ClusterWizardStep,
+  ClusterWizardStepHeader,
+  ErrorState,
+  LoadingState,
+} from '../../../../common';
 import { HostsNetworkConfigurationType, InfraEnvsService } from '../../../services';
 import { FormViewHosts } from '../../clusterConfiguration/staticIp/components/FormViewHosts/FormViewHosts';
 import { FormViewNetworkWide } from '../../clusterConfiguration/staticIp/components/FormViewNetworkWide/FormViewNetworkWide';
@@ -164,7 +169,7 @@ const Day2StaticIP = () => {
     >
       <Grid hasGutter>
         <Content>
-          <Content component={ContentVariants.h2}>Static network configurations</Content>
+          <ClusterWizardStepHeader>Static network configurations</ClusterWizardStepHeader>
           <Content component={ContentVariants.small}>
             Network configuration can be done using either the form view or YAML view.
             Configurations done in this step are for discovering hosts.

package/lib/ocm/components/Routes.tsx

@@ -20,7 +20,6 @@ type UILibRoutesProps = {
   children?: React.ReactNode;
   history?: HistoryRouterProps['history'];
   basename?: string;
-  additionalComponents?: React.ReactNode;
 };
 
 export const UILibRoutes = ({
@@ -28,7 +27,6 @@ export const UILibRoutes = ({
   children,
   history,
   basename,
-  additionalComponents,
 }: UILibRoutesProps) => {
   useFeatureDetection(allEnabledFeatures);
 
@@ -36,16 +34,13 @@ export const UILibRoutes = ({
     <>
       <Routes>
         <Route path="assisted-installer/clusters" element={<Outlet />}>
-          <Route path="~new" element={<NewClusterPage />}>
-            <Route path=":clusterId" element={<NewClusterPage />} />
-          </Route>
+          <Route path="~new" element={<NewClusterPage />} />
           <Route path=":clusterId" element={<ClusterPage />} />
           <Route index element={<Clusters />} />
         </Route>
         {children}
         <Route path="*" element={<Navigate to="assisted-installer/clusters" />} />
       </Routes>
-      {additionalComponents}
     </>
   );
 

package/lib/ocm/components/SentryErrorMonitorContextProvider.tsx

@@ -8,7 +8,9 @@ import { handleApiError } from '../../common/api';
 import { isApiError } from '../../common/api/utils';
 import { captureException } from '../sentry';
 
-export const SentryErrorMonitorContextProvider: React.FC = ({ children }) => {
+export const SentryErrorMonitorContextProvider: React.FC<React.PropsWithChildren> = ({
+  children,
+}) => {
   const exceptionReporter: ExceptionReporter = (
     error: unknown,
     message?: string,

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

@@ -21,7 +21,6 @@ import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { OcmRichInputField } from '../ui/OcmFormFields';
 import OcmOpenShiftVersion from './OcmOpenShiftVersion';
 import OcmOpenShiftVersionSelect from './OcmOpenShiftVersionSelect';
-import CustomManifestCheckbox from './CustomManifestCheckbox';
 import CpuArchitectureDropdown from './CpuArchitectureDropdown';
 import { OcmBaseDomainField } from './OcmBaseDomainField';
 import useSupportLevelsAPI from '../../hooks/useSupportLevelsAPI';
@@ -30,8 +29,11 @@ import { ExternalPlatformDropdown } from './platformIntegration/ExternalPlatform
 import { HostsNetworkConfigurationType } from '../../services/types';
 import { useNewFeatureSupportLevel } from '../../../common/components/newFeatureSupportLevels';
 import { ExternalPlatformLabels } from './platformIntegration/constants';
-import { ManagedDomain, PlatformType } from '@openshift-assisted/types/assisted-installer-service';
-import { useClusterWizardContext } from '../clusterWizard/ClusterWizardContext';
+import {
+  Cluster,
+  ManagedDomain,
+  PlatformType,
+} from '@openshift-assisted/types/assisted-installer-service';
 import { useFeature } from '../../hooks/use-feature';
 import ControlPlaneNodesDropdown, {
   ControlPlaneNodesLabel,
@@ -40,28 +42,21 @@ import ControlPlaneNodesDropdown, {
 } from './ControlPlaneNodesDropdown';
 
 export type OcmClusterDetailsFormFieldsProps = {
-  forceOpenshiftVersion?: string;
+  cluster?: Cluster;
   defaultPullSecret?: string;
   isOcm: boolean;
   managedDomains?: ManagedDomain[];
   versions: OpenshiftVersionOptionType[];
-  isPullSecretSet: boolean;
-  clusterExists: boolean;
-  clusterCpuArchitecture?: string;
-  clusterId?: string;
 };
 
 export const OcmClusterDetailsFormFields = ({
   managedDomains = [],
   versions,
-  isPullSecretSet,
   defaultPullSecret,
-  forceOpenshiftVersion,
   isOcm,
-  clusterExists,
-  clusterCpuArchitecture,
-  clusterId,
+  cluster,
 }: OcmClusterDetailsFormFieldsProps) => {
+  const clusterExists = !!cluster;
   const { values, setFieldValue } = useFormikContext<ClusterDetailsValues>();
   const { useRedHatDnsService } = values;
   const nameInputRef = React.useRef<HTMLInputElement>();
@@ -71,7 +66,6 @@ export const OcmClusterDetailsFormFields = ({
   const { openshiftVersion, platform } = values;
   const { getCpuArchitectures } = useOpenShiftVersionsContext();
   const cpuArchitecturesByVersionImage = getCpuArchitectures(openshiftVersion);
-  const clusterWizardContext = useClusterWizardContext();
   const featureSupportLevelData = useSupportLevelsAPI(
     'features',
     values.openshiftVersion,
@@ -94,12 +88,10 @@ export const OcmClusterDetailsFormFields = ({
     (selectedPlatform: PlatformType) => {
       const isOracleSelected = selectedPlatform === 'external';
       if (isOracleSelected) {
-        setFieldValue('addCustomManifest', isOracleSelected, false);
-        clusterWizardContext.setCustomManifestsStep(isOracleSelected);
         setFieldValue('hostsNetworkConfigurationType', HostsNetworkConfigurationType.DHCP);
       }
     },
-    [clusterWizardContext, setFieldValue],
+    [setFieldValue],
   );
 
   React.useEffect(() => {
@@ -165,16 +157,16 @@ export const OcmClusterDetailsFormFields = ({
 
       <OcmBaseDomainField managedDomains={managedDomains} clusterExists={clusterExists} />
 
-      {forceOpenshiftVersion ? (
+      {clusterExists || isSingleClusterFeatureEnabled ? (
         <OcmOpenShiftVersion
           versions={versions}
-          openshiftVersion={forceOpenshiftVersion}
-          clusterCpuArchitecture={clusterCpuArchitecture}
+          openshiftVersion={values.openshiftVersion}
+          clusterCpuArchitecture={values.cpuArchitecture}
           withPreviewText
           withMultiText
         />
       ) : (
-        <OcmOpenShiftVersionSelect versions={versions} />
+        <OcmOpenShiftVersionSelect />
       )}
       {clusterExists || isSingleClusterFeatureEnabled ? (
         <StaticTextField name="cpuArchitecture" label="CPU architecture" isRequired>
@@ -187,7 +179,12 @@ export const OcmClusterDetailsFormFields = ({
         />
       )}
 
-      {!isPullSecretSet && <PullSecret isOcm={isOcm} defaultPullSecret={defaultPullSecret} />}
+      <PullSecret
+        isOcm={isOcm}
+        defaultPullSecret={defaultPullSecret}
+        isPullSecretSet={!!cluster?.pullSecretSet}
+        isSingleClusterFeatureEnabled={isSingleClusterFeatureEnabled}
+      />
 
       {!isSingleClusterFeatureEnabled &&
         (clusterExists ? (
@@ -214,8 +211,6 @@ export const OcmClusterDetailsFormFields = ({
       ) : (
         <ControlPlaneNodesDropdown featureSupportLevelData={featureSupportLevelData} />
       )}
-      <CustomManifestCheckbox clusterId={clusterId || ''} isDisabled={platform === 'external'} />
-
       {!isSingleClusterFeatureEnabled && (
         <HostsNetworkConfigurationControlGroup
           clusterExists={clusterExists}
@@ -225,7 +220,7 @@ export const OcmClusterDetailsFormFields = ({
 
       <DiskEncryptionControlGroup
         values={values}
-        isDisabled={isPullSecretSet}
+        isDisabled={cluster?.pullSecretSet}
         isSNO={values.controlPlaneCount === 1}
         docVersion={openshiftVersion}
       />

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

@@ -5,70 +5,63 @@ import {
   ClusterDetailsValues,
   OpenShiftVersionDropdown,
   OpenShiftVersionModal,
+  getComparableVersionInt,
 } from '../../../common';
 import { isInOcm } from '../../../common/api';
 import { useFormikContext } from 'formik';
 import { getOpenshiftVersionHelperText } from './OpenshiftVersionHelperText';
 import { useOpenShiftVersionsContext } from '../clusterWizard/OpenShiftVersionsContext';
 
+const filterMinVersions = (versions: OpenshiftVersionOptionType[], minVersion: number) =>
+  versions.filter((v) => getComparableVersionInt(v.value) >= minVersion);
+
 type OcmOpenShiftVersionSelectProps = {
-  versions: OpenshiftVersionOptionType[];
+  minVersionAllowed?: number;
 };
-const OcmOpenShiftVersionSelect = ({ versions }: OcmOpenShiftVersionSelectProps) => {
+const OcmOpenShiftVersionSelect = ({ minVersionAllowed }: OcmOpenShiftVersionSelectProps) => {
   const { t } = useTranslation();
   const {
     values: { customOpenshiftSelect },
   } = useFormikContext<ClusterDetailsValues>();
-  const { allVersions } = useOpenShiftVersionsContext();
-  const [isOpenshiftVersionModalOpen, setIsOpenshiftVersionModalOpen] = React.useState(false);
+  const { allVersions: allVersionsCtx, latestVersions } = useOpenShiftVersionsContext();
 
-  const selectOptions = React.useMemo(
-    () =>
-      versions.map((version) => ({
-        label:
-          version.supportLevel === 'beta'
-            ? version.label + ' - ' + t('ai:Developer preview release')
-            : version.label,
-        // This is the "key" from openshift-versions API response
-        // It can either be in the long or short (for default versions) form
-        value: version.value,
-      })),
-    [versions, t],
-  );
+  const allVersions = minVersionAllowed
+    ? filterMinVersions(allVersionsCtx, minVersionAllowed)
+    : allVersionsCtx;
+  const versions = minVersionAllowed
+    ? filterMinVersions(latestVersions, minVersionAllowed)
+    : latestVersions;
 
-  const updatedSelectOptions = React.useMemo(() => {
+  const [isOpenshiftVersionModalOpen, setIsOpenshiftVersionModalOpen] = React.useState(false);
+
+  const customItem = React.useMemo(() => {
     if (
       customOpenshiftSelect &&
-      !selectOptions.some((version) => version.value === customOpenshiftSelect)
+      !versions.some((version) => version.value === customOpenshiftSelect)
     ) {
       return allVersions.find((version) => version.value === customOpenshiftSelect);
     }
     return undefined;
-  }, [allVersions, customOpenshiftSelect, selectOptions]);
+  }, [allVersions, customOpenshiftSelect, versions]);
 
   const getHelperText = (value: string | null, inModal?: boolean) => {
     return getOpenshiftVersionHelperText(allVersions, value, t, inModal);
   };
 
-  const showOpenshiftVersionModal = () => {
-    setIsOpenshiftVersionModalOpen(true);
-  };
-
   return (
     <>
       <OpenShiftVersionDropdown
         name="openshiftVersion"
-        items={selectOptions}
         versions={versions}
         getHelperText={getHelperText}
         showReleasesLink={isInOcm}
-        showOpenshiftVersionModal={showOpenshiftVersionModal}
-        customItem={updatedSelectOptions}
+        showOpenshiftVersionModal={() => setIsOpenshiftVersionModalOpen(true)}
+        customVersion={customItem}
       />
       {isOpenshiftVersionModalOpen && (
         <OpenShiftVersionModal
           allVersions={allVersions}
-          setOpenshiftVersionModalOpen={setIsOpenshiftVersionModalOpen}
+          onClose={() => setIsOpenshiftVersionModalOpen(false)}
           getHelperText={getHelperText}
         />
       )}