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

package/lib/cim/components/ClusterDeployment/clusterDetails/ClusterDetailsFormFields.tsx

@@ -76,15 +76,6 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
     nameInputRef.current?.focus();
   }, []);
 
-  const selectOptions = React.useMemo(
-    () =>
-      versions.map((version) => ({
-        label: version.label,
-        value: version.value,
-      })),
-    [versions],
-  );
-
   const additionalSelectOption = React.useMemo(() => {
     if (
       values.customOpenshiftSelect &&
@@ -148,16 +139,15 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
         <>
           <OpenShiftVersionDropdown
             name="openshiftVersion"
-            items={selectOptions}
             versions={versions}
             showReleasesLink={false}
             showOpenshiftVersionModal={() => setOpenshiftVersionModalOpen(true)}
-            customItem={additionalSelectOption}
+            customVersion={additionalSelectOption}
           />
           {openshiftVersionModalOpen && (
             <OpenShiftVersionModal
               allVersions={allVersions}
-              setOpenshiftVersionModalOpen={setOpenshiftVersionModalOpen}
+              onClose={() => setOpenshiftVersionModalOpen(false)}
             />
           )}
         </>

package/lib/cim/components/ClusterDeployment/components/ClusterDeploymentHostsSelectionAdvanced.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import Measure from 'react-measure';
 import isMatch from 'lodash-es/isMatch.js';
 import { useFormikContext } from 'formik';
 import { Alert, AlertVariant, Grid, GridItem } from '@patternfly/react-core';
+import useResizeObserver from '@react-hook/resize-observer';
 
 import { AgentK8sResource } from '../../../types';
 import { AGENT_LOCATION_LABEL_KEY, AGENT_NOLOCATION_VALUE } from '../../common';
@@ -58,6 +58,12 @@ const ClusterDeploymentHostsSelectionAdvanced = <T extends FormValues>({
     [availableAgents, locations, agentLabels],
   );
 
+  const tableRef = React.useRef<HTMLDivElement>(null);
+  const [tableWidth, setTableWidth] = React.useState<number>();
+  useResizeObserver(tableRef, (entry) => {
+    setTableWidth(entry.contentRect.width);
+  });
+
   return (
     <>
       <Grid hasGutter>
@@ -84,20 +90,16 @@ const ClusterDeploymentHostsSelectionAdvanced = <T extends FormValues>({
           />
         )}
         <GridItem>
-          <Measure bounds>
-            {({ measureRef, contentRect }) => (
-              <div ref={measureRef}>
-                <AgentsSelectionTable
-                  matchingAgents={matchingAgents}
-                  onEditRole={onEditRole}
-                  onSetInstallationDiskId={onSetInstallationDiskId}
-                  width={contentRect.bounds?.width}
-                  onEditHost={onEditHost}
-                  onHostSelect={onHostSelect}
-                />
-              </div>
-            )}
-          </Measure>
+          <div ref={tableRef}>
+            <AgentsSelectionTable
+              matchingAgents={matchingAgents}
+              onEditRole={onEditRole}
+              onSetInstallationDiskId={onSetInstallationDiskId}
+              width={tableWidth}
+              onEditHost={onEditHost}
+              onHostSelect={onHostSelect}
+            />
+          </div>
         </GridItem>
       </Grid>
     </>

package/lib/cim/components/ClusterDeployment/customManifests/ConfigMapForm.tsx

@@ -217,7 +217,7 @@ export const ConfigMapForm = ({ namespace }: { namespace: string }) => {
 
       {!isValid && errorAlert}
 
-      {isError && (
+      {!!isError && (
         <GridItem>
           <Alert
             variant={AlertVariant.danger}

package/lib/cim/components/ClusterDeployment/hostDiscovery/ClusterDeploymentHostsDiscovery.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Grid, GridItem, Content, OrderType } from '@patternfly/react-core';
-import Measure from 'react-measure';
+import useResizeObserver from '@react-hook/resize-observer';
 import {
   DiscoveryTroubleshootingModal,
   FormatDiskWarning,
@@ -67,6 +67,12 @@ const ClusterDeploymentHostsDiscovery: React.FC<ClusterDeploymentHostsDiscoveryP
 
   const isSNOCluster = getIsSNOCluster(agentClusterInstall);
   const { t } = useTranslation();
+
+  const tableRef = React.useRef<HTMLDivElement>(null);
+  const [tableWidth, setTableWidth] = React.useState<number>();
+  useResizeObserver(tableRef, (entry) => {
+    setTableWidth(entry.contentRect.width);
+  });
   return (
     <Grid hasGutter>
       <GridItem>
@@ -100,26 +106,22 @@ const ClusterDeploymentHostsDiscovery: React.FC<ClusterDeploymentHostsDiscoveryP
       </GridItem>
 
       <GridItem>
-        <Measure bounds>
-          {({ measureRef, contentRect }) => (
-            <div ref={measureRef}>
-              <ClusterDeploymentHostDiscoveryTable
-                agents={agents}
-                bareMetalHosts={bareMetalHosts}
-                infraEnv={infraEnv}
-                onEditHost={setEditAgent}
-                onEditRole={onEditRole}
-                onSetInstallationDiskId={onSetInstallationDiskId}
-                onEditBMH={setEditBMH}
-                onChangeHostname={onChangeHostname}
-                onChangeBMHHostname={onChangeBMHHostname}
-                onApprove={onApproveAgent}
-                width={contentRect.bounds?.width}
-                onDeleteHost={onDeleteHost}
-              />
-            </div>
-          )}
-        </Measure>
+        <div ref={tableRef}>
+          <ClusterDeploymentHostDiscoveryTable
+            agents={agents}
+            bareMetalHosts={bareMetalHosts}
+            infraEnv={infraEnv}
+            onEditHost={setEditAgent}
+            onEditRole={onEditRole}
+            onSetInstallationDiskId={onSetInstallationDiskId}
+            onEditBMH={setEditBMH}
+            onChangeHostname={onChangeHostname}
+            onChangeBMHHostname={onChangeBMHHostname}
+            onApprove={onApproveAgent}
+            width={tableWidth}
+            onDeleteHost={onDeleteHost}
+          />
+        </div>
         <EditBMHModal
           infraEnv={infraEnv}
           bmh={editBMH}

package/lib/cim/components/ClusterDeployment/hostSelection/ClusterDeploymentHostsSelectionAdvanced.tsx

@@ -1,7 +1,7 @@
 import isMatch from 'lodash-es/isMatch.js';
 import { useFormikContext } from 'formik';
 import React from 'react';
-import Measure from 'react-measure';
+import useResizeObserver from '@react-hook/resize-observer';
 import { Alert, AlertVariant, Grid, GridItem } from '@patternfly/react-core';
 
 import { AgentK8sResource } from '../../../types';
@@ -58,6 +58,12 @@ export const ClusterDeploymentHostsSelectionAdvanced = <T extends FormValues>({
     [availableAgents, locations, agentLabels],
   );
 
+  const tableRef = React.useRef<HTMLDivElement>(null);
+  const [tableWidth, setTableWidth] = React.useState<number>();
+  useResizeObserver(tableRef, (entry) => {
+    setTableWidth(entry.contentRect.width);
+  });
+
   return (
     <>
       <Grid hasGutter>
@@ -84,20 +90,16 @@ export const ClusterDeploymentHostsSelectionAdvanced = <T extends FormValues>({
           />
         )}
         <GridItem>
-          <Measure bounds>
-            {({ measureRef, contentRect }) => (
-              <div ref={measureRef}>
-                <AgentsSelectionTable
-                  matchingAgents={matchingAgents}
-                  onEditRole={onEditRole}
-                  onSetInstallationDiskId={onSetInstallationDiskId}
-                  width={contentRect.bounds?.width}
-                  onEditHost={onEditHost}
-                  onHostSelect={onHostSelect}
-                />
-              </div>
-            )}
-          </Measure>
+          <div ref={tableRef}>
+            <AgentsSelectionTable
+              matchingAgents={matchingAgents}
+              onEditRole={onEditRole}
+              onSetInstallationDiskId={onSetInstallationDiskId}
+              width={tableWidth}
+              onEditHost={onEditHost}
+              onHostSelect={onHostSelect}
+            />
+          </div>
         </GridItem>
       </Grid>
     </>

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

@@ -1,36 +1,50 @@
+import isCIDR from 'is-cidr';
 import {
   Cluster,
   ClusterDefaultConfig,
 } from '@openshift-assisted/types/assisted-installer-service';
 import { NetworkConfigurationValues } from '../../../common/types/clusters';
 import { isDualStack } from '../../../common/components/clusterConfiguration/utils';
-import { DUAL_STACK, IPV4_STACK, NETWORK_TYPE_OVN } from '../../../common/config';
+import { DUAL_STACK, NETWORK_TYPE_OVN, SINGLE_STACK } from '../../../common';
 
 export const getNetworkInitialValues = (
   cluster: Cluster,
   defaultNetworkSettings: Pick<
     ClusterDefaultConfig,
     | 'clusterNetworksIpv4'
+    | 'clusterNetworksIpv6'
     | 'clusterNetworksDualstack'
     | 'serviceNetworksIpv4'
+    | 'serviceNetworksIpv6'
     | 'serviceNetworksDualstack'
   >,
 ): NetworkConfigurationValues => {
   const managedNetworkingType = cluster.userManagedNetworking ? 'userManaged' : 'clusterManaged';
   const isDualStackCluster = isDualStack(cluster);
+  const primaryMachineCidr = cluster.machineNetworks?.[0]?.cidr;
+  const isSingleStackIPv6 =
+    !isDualStackCluster && primaryMachineCidr && isCIDR.v6(primaryMachineCidr);
 
   let clusterNetworks = cluster.clusterNetworks;
   if (!cluster.clusterNetworks?.length) {
-    clusterNetworks = isDualStackCluster
-      ? defaultNetworkSettings.clusterNetworksDualstack
-      : defaultNetworkSettings.clusterNetworksIpv4;
+    if (isDualStackCluster) {
+      clusterNetworks = defaultNetworkSettings.clusterNetworksDualstack;
+    } else if (isSingleStackIPv6) {
+      clusterNetworks = defaultNetworkSettings.clusterNetworksIpv6;
+    } else {
+      clusterNetworks = defaultNetworkSettings.clusterNetworksIpv4;
+    }
   }
 
   let serviceNetworks = cluster.serviceNetworks;
   if (!serviceNetworks?.length) {
-    serviceNetworks = isDualStackCluster
-      ? defaultNetworkSettings.serviceNetworksDualstack
-      : defaultNetworkSettings.serviceNetworksIpv4;
+    if (isDualStackCluster) {
+      serviceNetworks = defaultNetworkSettings.serviceNetworksDualstack;
+    } else if (isSingleStackIPv6) {
+      serviceNetworks = defaultNetworkSettings.serviceNetworksIpv6;
+    } else {
+      serviceNetworks = defaultNetworkSettings.serviceNetworksIpv4;
+    }
   }
 
   const machineNetworks = cluster.machineNetworks || [];
@@ -45,6 +59,6 @@ export const getNetworkInitialValues = (
     vipDhcpAllocation: cluster.vipDhcpAllocation,
     managedNetworkingType,
     networkType: cluster.networkType || NETWORK_TYPE_OVN,
-    stackType: isDualStackCluster ? DUAL_STACK : IPV4_STACK,
+    stackType: isDualStackCluster ? DUAL_STACK : SINGLE_STACK,
   };
 };

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

@@ -20,12 +20,8 @@ import {
   httpProxyValidationSchema,
   noProxyValidationSchema,
   CLUSTER_DEFAULT_NETWORK_SETTINGS,
-  clusterNetworksValidationSchema,
-  serviceNetworkValidationSchema,
-  dualStackValidationSchema,
-  IPv4ValidationSchema,
-  IPV4_STACK,
-  NetworkConfigurationValues,
+  clusterNetworksSchema,
+  serviceNetworksSchema,
 } from '../../../common';
 import { ClusterDeploymentNetworkingValues } from './types';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
@@ -53,22 +49,18 @@ const getNetworkConfigurationValidationSchema = (
 ) =>
   Yup.lazy((values: ClusterDeploymentNetworkingValues) =>
     Yup.object<ClusterDeploymentNetworkingValues>().shape({
-      clusterNetworks: clusterNetworksValidationSchema(t).when('stackType', {
-        is: (stackType: NetworkConfigurationValues['stackType']) => stackType === IPV4_STACK,
-        then: () => clusterNetworksValidationSchema(t).concat(IPv4ValidationSchema),
-        otherwise: () =>
-          clusterNetworksValidationSchema(t).concat(
-            dualStackValidationSchema(t('ai:cluster network'), t, openshiftVersion),
-          ),
-      }),
-      serviceNetworks: serviceNetworkValidationSchema(t).when('stackType', {
-        is: (stackType: NetworkConfigurationValues['stackType']) => stackType === IPV4_STACK,
-        then: () => serviceNetworkValidationSchema(t).concat(IPv4ValidationSchema),
-        otherwise: () =>
-          serviceNetworkValidationSchema(t).concat(
-            dualStackValidationSchema(t('ai:service network'), t, openshiftVersion),
-          ),
-      }),
+      clusterNetworks: clusterNetworksSchema(
+        t,
+        values.stackType ?? '',
+        values.machineNetworks?.[0]?.cidr,
+        openshiftVersion,
+      ),
+      serviceNetworks: serviceNetworksSchema(
+        t,
+        values.stackType ?? '',
+        values.machineNetworks?.[0]?.cidr,
+        openshiftVersion,
+      ),
       apiVips: vipArrayValidationSchema(hostSubnets, values, t),
       ingressVips: vipArrayValidationSchema(hostSubnets, values, t),
       sshPublicKey: sshPublicKeyListValidationSchema(t),

package/lib/cim/components/Hypershift/HostedClusterWizard/DetailsStep/DetailsForm.tsx

@@ -28,24 +28,15 @@ const DetailsForm: React.FC<DetailsFormProps> = ({
     nameInputRef.current?.focus();
   }, []);
 
-  const selectOptions = React.useMemo(
-    () =>
-      ocpVersions.map((version) => ({
-        label: version.label,
-        value: version.value,
-      })),
-    [ocpVersions],
-  );
-
   const additionalSelectOption = React.useMemo(() => {
     if (
       values.customOpenshiftSelect &&
-      !selectOptions.some((option) => option.value === values.customOpenshiftSelect)
+      !ocpVersions.some((option) => option.value === values.customOpenshiftSelect)
     ) {
       return allVersions.find((version) => version.value === values.customOpenshiftSelect);
     }
     return undefined;
-  }, [allVersions, selectOptions, values.customOpenshiftSelect]);
+  }, [allVersions, ocpVersions, values.customOpenshiftSelect]);
 
   return (
     <Form>
@@ -66,16 +57,15 @@ const DetailsForm: React.FC<DetailsFormProps> = ({
       />
       <OpenShiftVersionDropdown
         name="openshiftVersion"
-        items={selectOptions}
         versions={ocpVersions}
         showReleasesLink={false}
         showOpenshiftVersionModal={() => setOpenshiftVersionModalOpen(true)}
-        customItem={additionalSelectOption}
+        customVersion={additionalSelectOption}
       />
       {openshiftVersionModalOpen && (
         <OpenShiftVersionModal
           allVersions={allVersions}
-          setOpenshiftVersionModalOpen={setOpenshiftVersionModalOpen}
+          onClose={() => setOpenshiftVersionModalOpen(false)}
         />
       )}
 

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

@@ -1,10 +1,22 @@
 import * as React from 'react';
 import { FieldArray, useFormikContext } from 'formik';
 import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
-import { Alert, Button, Form, FormGroup, Grid, GridItem } from '@patternfly/react-core';
+import {
+  Alert,
+  Button,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  Form,
+  FormGroup,
+  Grid,
+  GridItem,
+  MenuToggle,
+  MenuToggleElement,
+} from '@patternfly/react-core';
 
 import { useTranslation } from '../../../../../common/hooks/use-translation-wrapper';
-import { PopoverIcon, RadioField, SelectField } from '../../../../../common';
+import { PopoverIcon, RadioField } from '../../../../../common';
 import { getRandomString } from '../../../../../common/utils';
 import { useTemptiflySync } from '../../hooks/useTemptiflySync';
 
@@ -18,21 +30,15 @@ const HostsForm: React.FC<HostsFormProps> = ({
   clusterName,
   initReleaseImage,
 }) => {
-  const { values } = useFormikContext<HostsFormValues>();
+  const { t } = useTranslation();
+  const { values, setFieldValue } = useFormikContext<HostsFormValues>();
+  const [namespaceDropdownOpen, setNamespaceDropdownOpen] = React.useState(false);
   useTemptiflySync({ values, onValuesChanged });
 
-  const { t } = useTranslation();
-  const infraEnvOptions = infraEnvs.length
-    ? infraEnvs.map((ie) => ({
-        label: ie.metadata?.namespace || '',
-        value: ie.metadata?.namespace || '',
-      }))
-    : [
-        {
-          label: t('ai:No namespace with hosts is available'),
-          value: 'NOT_AVAILABLE',
-        },
-      ];
+  const infraEnvOptions = infraEnvs.map((ie) => ({
+    label: ie.metadata?.namespace || '',
+    value: ie.metadata?.namespace || '',
+  }));
 
   const totalHosts = values.nodePools.reduce((acc, nodePool) => {
     acc += nodePool.useAutoscaling ? nodePool.autoscaling.maxReplicas : nodePool.count;
@@ -142,13 +148,9 @@ const HostsForm: React.FC<HostsFormProps> = ({
         </GridItem>
 
         <GridItem>
-          <SelectField
+          <FormGroup
             label={t('ai:Namespace')}
-            name="agentNamespace"
-            options={infraEnvOptions}
-            isRequired
-            isDisabled={!infraEnvs.length}
-            labelIcon={
+            labelHelp={
               <PopoverIcon
                 position="right"
                 bodyContent={t(
@@ -156,7 +158,39 @@ const HostsForm: React.FC<HostsFormProps> = ({
                 )}
               />
             }
-          />
+            isRequired
+            isInline
+          >
+            <Dropdown
+              isOpen={namespaceDropdownOpen}
+              onSelect={(_, value) => {
+                setFieldValue('agentNamespace', value);
+                setNamespaceDropdownOpen(false);
+              }}
+              onOpenChange={(isOpen: boolean) => setNamespaceDropdownOpen(isOpen)}
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  onClick={() => setNamespaceDropdownOpen(!namespaceDropdownOpen)}
+                  isExpanded={namespaceDropdownOpen}
+                  isFullWidth
+                  isDisabled={!infraEnvs.length}
+                  aria-disabled={!infraEnvs.length}
+                >
+                  {values.agentNamespace || t('ai:No namespace with hosts is available')}
+                </MenuToggle>
+              )}
+              shouldFocusToggleOnSelect
+            >
+              <DropdownList>
+                {infraEnvOptions.map((option, i) => (
+                  <DropdownItem key={`infra-env-option-${i}`} value={option.value}>
+                    {option.label}
+                  </DropdownItem>
+                ))}
+              </DropdownList>
+            </Dropdown>
+          </FormGroup>
         </GridItem>
         {totalHosts === 0 && (
           <GridItem>

package/lib/cim/components/Hypershift/modals/NodePoolForm.tsx

@@ -13,7 +13,7 @@ import { useFormikContext } from 'formik';
 import { InputField } from '../../../../common';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 import { AgentK8sResource } from '../../../types';
-import { getAgentsForSelection, getVersionFromReleaseImage } from '../../helpers';
+import { getAgentsForSelection, getVersionFromReleaseString } from '../../helpers';
 import NodePoolAgentsForm from '../forms/NodePoolAgentsForm';
 import {
   AgentMachineK8sResource,
@@ -44,7 +44,7 @@ const NodePoolForm = ({ agents, nodePool, hostedCluster, agentMachines }: NodePo
       !agent.spec.clusterDeploymentName,
   );
 
-  const ocpVersion = getVersionFromReleaseImage(hostedCluster.spec.release.image);
+  const ocpVersion = getVersionFromReleaseString(hostedCluster.spec.release.image);
 
   if (isEdit) {
     const nodePoolAgents = getNodepoolAgents(nodePool, agents, agentMachines, hostedCluster);

package/lib/cim/components/InfraEnv/InfraEnvFormPage.tsx

@@ -132,7 +132,7 @@ type InfraEnvFormProps = {
   osImages?: OsImage[];
 };
 
-const InfraEnvForm: React.FC<InfraEnvFormProps> = ({
+const InfraEnvForm: React.FC<React.PropsWithChildren<InfraEnvFormProps>> = ({
   onValuesChanged,
   children,
   pullSecret,
@@ -288,7 +288,7 @@ type InfraEnvFormPageProps = InfraEnvFormProps & {
   osImages?: OsImage[];
 };
 
-export const InfraEnvFormPage: React.FC<InfraEnvFormPageProps> = ({
+export const InfraEnvFormPage: React.FC<React.PropsWithChildren<InfraEnvFormPageProps>> = ({
   usedNames,
   onSubmit,
   onClose,

package/lib/cim/components/YamlPreview/YamlPreview.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import MonacoEditor from 'react-monaco-editor';
-import Measure from 'react-measure';
+import MonacoEditor, { EditorDidMount, EditorWillMount } from 'react-monaco-editor';
+import { editor } from 'monaco-editor';
+import useResizeObserver from '@react-hook/resize-observer';
 import {
   Alert,
   AlertActionCloseButton,
@@ -13,11 +14,11 @@ import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 
 const options = { readOnly: true, scrollBeyondLastLine: false };
 
-const theme = {
+const theme: editor.IStandaloneThemeData = {
   base: 'vs',
   inherit: true,
   rules: [
-    { background: 'e0e0e0' },
+    { token: '', background: 'e0e0e0' },
     { token: 'number', foreground: '000000' },
     { token: 'type', foreground: '000000' },
     { token: 'string', foreground: '000000' },
@@ -37,19 +38,27 @@ type YamlPreviewProps = {
   loading: boolean;
 };
 
-const YamlPreview: React.FC<YamlPreviewProps> = ({ children, code, setPreviewOpen, loading }) => {
-  const editorDidMount = React.useCallback((editor) => {
-    /* eslint-disable */
+const YamlPreview: React.FC<React.PropsWithChildren<YamlPreviewProps>> = ({
+  children,
+  code,
+  setPreviewOpen,
+  loading,
+}) => {
+  const editorDidMount = React.useCallback<EditorDidMount>((editor) => {
     editor.layout();
     editor.focus();
-    /* eslint-enable */
   }, []);
 
-  const editorWillMount = React.useCallback((monaco) => {
-    // eslint-disable-next-line
+  const editorWillMount = React.useCallback<EditorWillMount>((monaco) => {
     monaco.editor.defineTheme('acm-console', theme);
   }, []);
   const { t } = useTranslation();
+  const editorRef = React.useRef<HTMLDivElement>(null);
+  const [editorHeight, setEditorHeight] = React.useState<number>();
+  useResizeObserver(editorRef, (entry) => {
+    setEditorHeight(entry.contentRect.height);
+  });
+
   return loading ? (
     <LoadingState content="Loading resources" />
   ) : (
@@ -76,23 +85,19 @@ const YamlPreview: React.FC<YamlPreviewProps> = ({ children, code, setPreviewOpe
         </div>
       </StackItem>
       <StackItem isFilled>
-        <Measure bounds>
-          {({ measureRef, contentRect }) => (
-            <div ref={measureRef} style={{ height: '100%' }}>
-              {!!contentRect.bounds?.height && (
-                <MonacoEditor
-                  language="yaml"
-                  theme="acm-console"
-                  height={contentRect.bounds?.height}
-                  value={code}
-                  options={options}
-                  editorDidMount={editorDidMount}
-                  editorWillMount={editorWillMount}
-                />
-              )}
-            </div>
+        <div ref={editorRef} style={{ height: '100%' }}>
+          {!!editorHeight && (
+            <MonacoEditor
+              language="yaml"
+              theme="acm-console"
+              height={editorHeight}
+              value={code}
+              options={options}
+              editorDidMount={editorDidMount}
+              editorWillMount={editorWillMount}
+            />
           )}
-        </Measure>
+        </div>
       </StackItem>
     </Stack>
   );

package/lib/cim/components/featureSupportLevels/ACMFeatureSupportLevelProvider.tsx

@@ -9,7 +9,7 @@ import {
 import { ClusterImageSetK8sResource } from '../../types';
 import { featureSupportLevelsACM } from '../../config/constants';
 import { getFeatureDisabledReason, isFeatureSupported } from './featureStateUtils';
-import { getOCPVersions, getVersionFromReleaseImage } from '../helpers';
+import { getOCPVersions, getVersionFromClusterImageSet } from '../helpers';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { SupportLevel } from '@openshift-assisted/types/assisted-installer-service';
 import { getMajorMinorVersion } from '../../../common/utils';
@@ -53,10 +53,7 @@ export const ACMFeatureSupportLevelProvider: React.FC<ACMFeatureSupportLevelProv
       const clusterImage = clusterImages.find(
         (clusterImageSet) => clusterImageSet.metadata?.name === versionName,
       );
-      const version =
-        getVersionFromReleaseImage(clusterImage?.spec?.releaseImage) ||
-        clusterImage?.metadata?.name ||
-        '';
+      const version = getVersionFromClusterImageSet(clusterImage);
       return getMajorMinorVersion(version);
     },
     [clusterImages],