@openshift-assisted/ui-lib 2.17.1-cim → 2.18.0-cim

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

@@ -1,16 +1,14 @@
-import { Flex, FlexItem } from '@patternfly/react-core';
+import * as React from 'react';
+import { Flex, FlexItem, Icon } from '@patternfly/react-core';
 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 { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
 import { UnknownIcon } from '@patternfly/react-icons/dist/js/icons/unknown-icon';
 import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
 
-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'];
@@ -50,14 +48,22 @@ const ConditionsTable = ({ conditions, isDone }: ConditionsTableProps) => {
                 c.status === okStatus ? (
                   <InProgressIcon />
                 ) : (
-                  <CheckCircleIcon color={okColor.value} />
+                  <Icon status="success">
+                    <CheckCircleIcon />
+                  </Icon>
                 );
             } else {
               if (c.status === okStatus) {
-                icon = <CheckCircleIcon color={okColor.value} />;
+                icon = (
+                  <Icon status="success">
+                    <CheckCircleIcon />
+                  </Icon>
+                );
               } else if (c.status === nokStatus) {
                 icon = isDone ? (
-                  <UiIcon size="sm" status="danger" icon={<ExclamationCircleIcon />} />
+                  <Icon status="danger" size="sm">
+                    <ExclamationCircleIcon />
+                  </Icon>
                 ) : (
                   <InProgressIcon />
                 );

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

@@ -1,18 +1,18 @@
 import * as React from 'react';
 import {
   ExpandableSectionToggle,
+  Icon,
   ProgressStep,
   Spinner,
   Stack,
   StackItem,
 } from '@patternfly/react-core';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
 
 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, UiIcon } from '../../../../common';
+import { ExternalLink } from '../../../../common';
 import ConditionsTable from './ConditionsTable';
 
 type HostedClusterProgressProps = {
@@ -34,9 +34,13 @@ const HostedClusterProgress = ({ hostedCluster, launchToOCP }: HostedClusterProg
   if (progressingCondtion?.status === 'False') {
     progressIcon =
       availableCondtion?.status === 'True' ? (
-        <CheckCircleIcon color={okColor.value} />
+        <Icon status="success">
+          <CheckCircleIcon />
+        </Icon>
       ) : (
-        <UiIcon size="sm" status="danger" icon={<ExclamationCircleIcon />} />
+        <Icon status="danger" size="sm">
+          <ExclamationCircleIcon />
+        </Icon>
       );
   }
 

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

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import {
   ExpandableSectionToggle,
+  Icon,
   ProgressStep,
   Spinner,
   Stack,
   StackItem,
 } from '@patternfly/react-core';
 import { TFunction } from 'i18next';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 
 import {
@@ -42,7 +42,11 @@ const getNodePoolsStatus = (
 
   const nodePoolsStatus: { type: string; icon: React.ReactNode } = {
     type: 'ok',
-    icon: <CheckCircleIcon color={okColor.value} />,
+    icon: (
+      <Icon status="success">
+        <CheckCircleIcon />
+      </Icon>
+    ),
   };
 
   for (const property in nodePoolMap) {

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/DetailsStep/DetailsStep.tsx

@@ -34,8 +34,8 @@ const useDetailsFormik: UseDetailsFormik = ({
     () =>
       Yup.object({
         name: nameValidationSchema(t, usedClusterNames),
-        baseDnsDomain: dnsNameValidationSchema.required('Required'),
-        pullSecret: pullSecretValidationSchema.required('Required.'),
+        baseDnsDomain: dnsNameValidationSchema(t).required(t('ai:Required field')),
+        pullSecret: pullSecretValidationSchema(t).required(t('ai:Required field')),
       }),
     [usedClusterNames, t],
   );

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/HostedClusterWizard/HostsStep/HostsStep.tsx

@@ -6,8 +6,6 @@ import { Stack, StackItem } from '@patternfly/react-core';
 import HostsForm from './HostsForm';
 import { HostsStepProps, HostsFormValues, NodePoolFormValue } from './types';
 import { useTranslation } from '../../../../../common/hooks/use-translation-wrapper';
-import { getAgentsForSelection } from '../../../helpers';
-import { INFRAENV_AGENTINSTALL_LABEL_KEY } from '../../../common';
 import { TFunction } from 'i18next';
 import { NodePoolK8sResource } from '../../types';
 
@@ -61,16 +59,7 @@ const HostsStep: React.FC<HostsStepProps> = ({
   olmCatalogPlacement,
 }) => {
   const { t } = useTranslation();
-  const availableAgents = getAgentsForSelection(agents);
 
-  const infraEnvsWithAgents = infraEnvs.filter((ie) =>
-    availableAgents.some(
-      (a) =>
-        a.metadata?.labels?.[INFRAENV_AGENTINSTALL_LABEL_KEY] === ie.metadata?.name &&
-        a.metadata?.namespace === ie.metadata?.namespace &&
-        !a.spec.clusterDeploymentName,
-    ),
-  );
   return (
     <Stack hasGutter>
       <StackItem>
@@ -84,7 +73,7 @@ const HostsStep: React.FC<HostsStepProps> = ({
             controllerAvailabilityPolicy: controllerAvailabilityPolicy || 'HighlyAvailable',
             infrastructureAvailabilityPolicy: infrastructureAvailabilityPolicy || 'HighlyAvailable',
             olmCatalogPlacement: olmCatalogPlacement || 'management',
-            agentNamespace: initInfraEnv || infraEnvsWithAgents[0]?.metadata?.namespace || '',
+            agentNamespace: initInfraEnv || infraEnvs[0]?.metadata?.namespace || '',
             nodePools: initNodePools || [
               {
                 nodePoolName: `nodepool-${clusterName}-1`,
@@ -106,7 +95,7 @@ const HostsStep: React.FC<HostsStepProps> = ({
         >
           <HostsForm
             onValuesChanged={onValuesChanged}
-            infraEnvs={infraEnvsWithAgents}
+            infraEnvs={infraEnvs}
             agents={agents}
             clusterName={clusterName}
             initReleaseImage={initReleaseImage}

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

@@ -18,22 +18,22 @@ import { useTranslation } from '../../../../../common/hooks/use-translation-wrap
 const getValidationSchema = (t: TFunction) =>
   Yup.lazy((values: NetworkFormValues) =>
     Yup.object<NetworkFormValues>().shape({
-      sshPublicKey: sshPublicKeyValidationSchema.required(t('ai:Required field')),
+      sshPublicKey: sshPublicKeyValidationSchema(t).required(t('ai:Required field')),
       clusterNetworkCidr: values.isAdvanced
-        ? ipBlockValidationSchema(values.serviceNetworkCidr)
+        ? ipBlockValidationSchema(values.serviceNetworkCidr, t)
         : Yup.string(),
       serviceNetworkCidr: values.isAdvanced
-        ? ipBlockValidationSchema(values.clusterNetworkCidr)
+        ? ipBlockValidationSchema(values.clusterNetworkCidr, t)
         : Yup.string(),
       clusterNetworkHostPrefix: values.isAdvanced
-        ? hostPrefixValidationSchema(values.clusterNetworkCidr)
+        ? hostPrefixValidationSchema(values.clusterNetworkCidr, t)
         : Yup.number(),
-      httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy' }),
-      httpsProxy: httpProxyValidationSchema({ values, pairValueName: 'httpProxy' }), // share the schema, httpS is currently not supported
-      noProxy: noProxyValidationSchema,
+      httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy', t }),
+      httpsProxy: httpProxyValidationSchema({ values, pairValueName: 'httpProxy', t }), // share the schema, httpS is currently not supported
+      noProxy: noProxyValidationSchema(t),
       nodePortAddress:
         values.apiPublishingStrategy === 'NodePort'
-          ? day2ApiVipValidationSchema.required(t('ai:Required field'))
+          ? day2ApiVipValidationSchema(t).required(t('ai:Required field'))
           : Yup.string(),
     }),
   );

package/lib/cim/components/Hypershift/utils/status.tsx

@@ -1,14 +1,13 @@
+import React from 'react';
+import { TFunction } from 'i18next';
+import { Icon } from '@patternfly/react-core';
 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 { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
-import React from 'react';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
-import { t_global_icon_color_status_danger_default as dangerColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_danger_default';
-import { t_global_icon_color_status_warning_default as warningColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_warning_default';
+
+import { NodePoolK8sResource } from '../types';
 import { AgentK8sResource } from '../../../types';
 import { getAgentStatus } from '../../helpers';
-import { NodePoolK8sResource } from '../types';
-import { TFunction } from 'i18next';
 import { agentStatus } from '../../helpers/agentStatus';
 
 export type NodePoolStatus = {
@@ -40,7 +39,11 @@ export const getNodePoolStatus = (
   if (hasErrorAgents) {
     return {
       type: 'error',
-      icon: <ExclamationCircleIcon color={dangerColor.value} />,
+      icon: (
+        <Icon status="danger">
+          <ExclamationCircleIcon />
+        </Icon>
+      ),
       text: t('ai:Error'),
     };
   }
@@ -58,7 +61,11 @@ export const getNodePoolStatus = (
   if (hasWarningAgents) {
     return {
       type: 'warning',
-      icon: <ExclamationCircleIcon color={warningColor.value} />,
+      icon: (
+        <Icon status="warning">
+          <ExclamationCircleIcon />
+        </Icon>
+      ),
       text: t('ai:Warning'),
     };
   }
@@ -66,7 +73,11 @@ export const getNodePoolStatus = (
   return nodePool.status?.conditions?.find(({ type }) => type === 'Ready')?.status === 'True'
     ? {
         type: 'ok',
-        icon: <CheckCircleIcon color={okColor.value} />,
+        icon: (
+          <Icon status="success">
+            <CheckCircleIcon />
+          </Icon>
+        ),
         text: t('ai:Ready'),
       }
     : {

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

@@ -13,12 +13,11 @@ import {
   Title,
   TitleSizes,
   Label,
+  Icon,
 } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 import { PencilAltIcon } from '@patternfly/react-icons/dist/js/icons/pencil-alt-icon';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
-import { t_global_icon_color_status_warning_default as warningColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_warning_default';
 
 import { architectureData } from '../../../common';
 import { InfraEnvK8sResource, SecretK8sResource } from '../../types';
@@ -39,11 +38,19 @@ type EditItemProps = {
 };
 
 const EditItem: React.FC<EditItemProps> = ({ title, onEdit, isLoading, isWarning, noIcon }) => {
-  let icon = <CheckCircleIcon color={okColor.value} />;
+  let icon = (
+    <Icon status="success">
+      <CheckCircleIcon />
+    </Icon>
+  );
   if (isLoading) {
     icon = <Spinner size="md" />;
   } else if (isWarning) {
-    icon = <ExclamationTriangleIcon color={warningColor.value} />;
+    icon = (
+      <Icon status="warning">
+        <ExclamationTriangleIcon />
+      </Icon>
+    );
   }
   const btn = (
     <>

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

@@ -76,32 +76,34 @@ const validationSchema = (usedNames: string[], t: TFunction) =>
   Yup.lazy((values: EnvironmentStepFormValues) =>
     Yup.object<EnvironmentStepFormValues>().shape({
       name: richNameValidationSchema(t, usedNames),
-      location: locationValidationSchema(t).required(t('ai:Location is a required field.')),
-      pullSecret: pullSecretValidationSchema.required(t('ai:Pull secret is a required field.')),
-      sshPublicKey: sshPublicKeyValidationSchema,
+      location: locationValidationSchema(t),
+      pullSecret: pullSecretValidationSchema(t).required(t('ai:Required field')),
+      sshPublicKey: sshPublicKeyValidationSchema(t),
       httpProxy: httpProxyValidationSchema({
         values,
         pairValueName: 'httpsProxy',
         allowEmpty: true,
+        t,
       }),
       httpsProxy: httpProxyValidationSchema({
         values,
         pairValueName: 'httpProxy',
         allowEmpty: true,
+        t,
       }), // share the schema, httpS is currently not supported
-      noProxy: noProxyValidationSchema,
+      noProxy: noProxyValidationSchema(t),
       labels: Yup.array()
         .of(Yup.string())
         .test(
           'label-equals-validation',
-          'Label selector needs to be in a `key=value` form',
+          t('ai:Label needs to be in a `key=value` form'),
           (values) =>
             (values as string[]).every((value) => {
               const parts = value.split('=');
               return parts.length === 2;
             }),
         ),
-      additionalNtpSources: ntpSourceValidationSchema,
+      additionalNtpSources: ntpSourceValidationSchema(t),
     }),
   );
 
@@ -130,7 +132,7 @@ type InfraEnvFormProps = {
   osImages?: OsImage[];
 };
 
-const InfraEnvForm: React.FC<InfraEnvFormProps> = ({
+const InfraEnvForm: React.FC<React.PropsWithChildren<InfraEnvFormProps>> = ({
   onValuesChanged,
   children,
   pullSecret,
@@ -286,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/InfraEnv/InfraEnvHostsTabAgentsWarning.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
+import { Icon, Tooltip } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-import { t_global_icon_color_status_warning_default as warningColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_warning_default';
 import { getAgentStatus, getBMHStatus } from '../helpers';
 import { AgentK8sResource, BareMetalHostK8sResource } from '../../types';
 import { AGENT_BMH_NAME_LABEL_KEY } from '../common';
-import { Tooltip } from '@patternfly/react-core';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { agentStatus, bmhStatus } from '../helpers/agentStatus';
 
@@ -51,10 +50,9 @@ const InfraEnvHostsTabAgentsWarning: React.FC<InfraEnvHostsTabAgentsWarning> = (
   if (hostsWithProblemsCount) {
     return (
       <Tooltip content={t('ai:{{count}} host has problems', { count: hostsWithProblemsCount })}>
-        <ExclamationTriangleIcon
-          color={warningColor.value}
-          className="infra-env-hosts-tab-title__icon"
-        />
+        <Icon status="warning">
+          <ExclamationTriangleIcon className="infra-env-hosts-tab-title__icon" />
+        </Icon>
       </Tooltip>
     );
   }

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/helpers/agentStatus.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
+import { TFunction } from 'i18next';
+import { Icon } from '@patternfly/react-core';
 import { ConnectedIcon } from '@patternfly/react-icons/dist/js/icons/connected-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import { t_global_icon_color_status_danger_default as dangerColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_danger_default';
 import { hostStatus } from '../../../common';
 import { HostStatus } from '../../../common/components/hosts/types';
-import { TFunction } from 'i18next';
 
 export const bmhStatus = (t: TFunction): HostStatus<string> => ({
   'bmh-error': {
@@ -68,7 +68,11 @@ export const agentStatus = (t: TFunction): HostStatus<string> => ({
   specSyncErr: {
     key: 'specSyncErr',
     title: t('ai:Sync error'),
-    icon: <ExclamationCircleIcon color={dangerColor.value} />,
+    icon: (
+      <Icon status="danger">
+        <ExclamationCircleIcon />
+      </Icon>
+    ),
     category: 'Discovery related',
   },
 });