@openshift-assisted/ui-lib 2.17.0-cim → 2.17.3-cim

package/lib/cim/components/modals/EditBMHModal.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
+import { Modal, ModalHeader, ModalVariant } from '@patternfly/react-core';
 import BMCForm from '../Agent/BMCForm';
 import { SecretK8sResource } from '../../types';
 import { LoadingState } from '../../../common';
@@ -52,13 +52,12 @@ const EditBMHModal: React.FC<EditBMHModalProps> = ({
   return (
     <Modal
       aria-label={t('ai:Edit BMH dialog')}
-      title={t('ai:Edit BMH')}
       isOpen={isOpen}
       onClose={onClose}
       variant={ModalVariant.small}
-      hasNoBodyWrapper
       id="edit-bmh-modal"
     >
+      <ModalHeader title={t('ai:Edit BMH')} />
       {isLoading ? (
         <LoadingState />
       ) : (

package/lib/cim/components/modals/EditNtpSourcesModal.tsx

@@ -1,11 +1,17 @@
 import * as React from 'react';
-import { Alert, Button, ButtonVariant, Form, Stack, StackItem } from '@patternfly/react-core';
 import {
+  Alert,
+  Button,
+  ButtonVariant,
+  Form,
   Modal,
-  ModalBoxBody,
-  ModalBoxFooter,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
   ModalVariant,
-} from '@patternfly/react-core/deprecated';
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
 import { Formik, FormikProps } from 'formik';
 import { InfraEnvK8sResource } from '../../types';
 import { RadioField, AdditionalNTPSourcesField } from '../../../common';
@@ -34,13 +40,12 @@ const EditNtpSourcesModal: React.FC<EditNtpSourcesModalProps> = ({
   return (
     <Modal
       aria-label={t('ai:Edit Ntp sources dialog')}
-      title={t('ai:Edit NTP sources')}
       isOpen={isOpen}
       onClose={onClose}
       variant={ModalVariant.small}
-      hasNoBodyWrapper
       id="edit-ntp-sources-modal"
     >
+      <ModalHeader title={t('ai:Edit NTP sources')} />
       <Formik<EditNtpSourcesFormikValues>
         initialValues={{
           enableNtpSources: infraEnv.spec?.additionalNTPSources ? 'additional' : 'auto',
@@ -64,7 +69,7 @@ const EditNtpSourcesModal: React.FC<EditNtpSourcesModalProps> = ({
         }: FormikProps<EditNtpSourcesFormikValues>) => {
           return (
             <>
-              <ModalBoxBody>
+              <ModalBody>
                 <Form>
                   <Stack hasGutter>
                     <StackItem>
@@ -106,8 +111,8 @@ const EditNtpSourcesModal: React.FC<EditNtpSourcesModalProps> = ({
                     )}
                   </Stack>
                 </Form>
-              </ModalBoxBody>
-              <ModalBoxFooter>
+              </ModalBody>
+              <ModalFooter>
                 {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
                 <Button onClick={submitForm} isDisabled={isSubmitting || !isValid}>
                   {t('ai:Save')}
@@ -115,7 +120,7 @@ const EditNtpSourcesModal: React.FC<EditNtpSourcesModalProps> = ({
                 <Button onClick={onClose} variant={ButtonVariant.secondary}>
                   {t('ai:Cancel')}
                 </Button>
-              </ModalBoxFooter>
+              </ModalFooter>
             </>
           );
         }}

package/lib/cim/components/modals/EditProxyModal.tsx

@@ -1,12 +1,19 @@
 import * as React from 'react';
 import * as Yup from 'yup';
-import { Alert, Button, ButtonVariant, Form, Stack, StackItem } from '@patternfly/react-core';
+import { TFunction } from 'i18next';
 import {
+  Alert,
+  Button,
+  ButtonVariant,
+  Form,
   Modal,
-  ModalBoxBody,
-  ModalBoxFooter,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
   ModalVariant,
-} from '@patternfly/react-core/deprecated';
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
 import { EditProxyModalProps } from './types';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { ProxyInputFields } from '../../../common/components/clusterConfiguration/ProxyFields';
@@ -19,20 +26,22 @@ import {
 import { getErrorMessage } from '../../../common/utils';
 import { getWarningMessage } from './utils';
 
-const validationSchema = () =>
+const validationSchema = (t: TFunction) =>
   Yup.lazy((values: ProxyFieldsType) =>
     Yup.object<ProxyFieldsType>().shape({
       httpProxy: httpProxyValidationSchema({
         values,
         pairValueName: 'httpsProxy',
         allowEmpty: true,
+        t,
       }),
       httpsProxy: httpProxyValidationSchema({
         values,
         pairValueName: 'httpProxy',
         allowEmpty: true,
+        t,
       }),
-      noProxy: noProxyValidationSchema,
+      noProxy: noProxyValidationSchema(t),
     }),
   );
 
@@ -40,7 +49,7 @@ const Footer = ({ onClose }: { onClose: VoidFunction }) => {
   const { t } = useTranslation();
   const { isSubmitting, submitForm, isValid } = useFormikContext();
   return (
-    <ModalBoxFooter>
+    <ModalFooter>
       <Button
         onClick={() => void submitForm()}
         isDisabled={isSubmitting || !isValid}
@@ -51,7 +60,7 @@ const Footer = ({ onClose }: { onClose: VoidFunction }) => {
       <Button onClick={onClose} variant={ButtonVariant.secondary}>
         {t('ai:Cancel')}
       </Button>
-    </ModalBoxFooter>
+    </ModalFooter>
   );
 };
 
@@ -69,15 +78,15 @@ const EditProxyModal: React.FC<EditProxyModalProps> = ({
     !!infraEnv.spec?.proxy?.httpProxy ||
     !!infraEnv.spec?.proxy?.httpsProxy ||
     !!infraEnv.spec?.proxy?.noProxy;
+
   return (
     <Modal
       aria-label={t('ai:Edit proxy settings')}
-      title={t('ai:Edit proxy settings')}
       isOpen
       onClose={onClose}
       variant={ModalVariant.medium}
-      hasNoBodyWrapper
     >
+      <ModalHeader title={t('ai:Edit proxy settings')} />
       <Formik<ProxyFieldsType>
         initialValues={{
           httpProxy: infraEnv.spec?.proxy?.httpProxy,
@@ -85,7 +94,7 @@ const EditProxyModal: React.FC<EditProxyModalProps> = ({
           noProxy: infraEnv.spec?.proxy?.noProxy,
           enableProxy,
         }}
-        validationSchema={validationSchema}
+        validationSchema={validationSchema(t)}
         onSubmit={async (values: ProxyFieldsType) => {
           setError(undefined);
           try {
@@ -97,7 +106,7 @@ const EditProxyModal: React.FC<EditProxyModalProps> = ({
         }}
       >
         <>
-          <ModalBoxBody>
+          <ModalBody>
             <Stack hasGutter>
               <StackItem>
                 <Alert isInline variant="warning" title={warningMsg} />
@@ -113,7 +122,7 @@ const EditProxyModal: React.FC<EditProxyModalProps> = ({
                 </Form>
               </StackItem>
             </Stack>
-          </ModalBoxBody>
+          </ModalBody>
           <Footer onClose={onClose} />
         </>
       </Formik>

package/lib/cim/components/modals/EditPullSecretModal.tsx

@@ -1,13 +1,18 @@
 import * as React from 'react';
 import * as Yup from 'yup';
 import { TFunction } from 'i18next';
-import { Alert, Button, ButtonVariant, Stack, StackItem } from '@patternfly/react-core';
 import {
+  Alert,
+  Button,
+  ButtonVariant,
   Modal,
-  ModalBoxBody,
-  ModalBoxFooter,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
   ModalVariant,
-} from '@patternfly/react-core/deprecated';
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
 import { Formik, useFormikContext } from 'formik';
 import { InfraEnvK8sResource, SecretK8sResource } from '../../types';
 import { LoadingState, PullSecretField, pullSecretValidationSchema } from '../../../common';
@@ -18,7 +23,7 @@ import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 
 const validationSchema = (t: TFunction) =>
   Yup.object({
-    pullSecret: pullSecretValidationSchema.required(t('ai:Pull secret is a required field.')),
+    pullSecret: pullSecretValidationSchema(t).required(t('ai:Pull secret is a required field.')),
   });
 
 type EditPullSecretFormProps = {
@@ -72,7 +77,7 @@ const EditPullSecretForm: React.FC<EditPullSecretFormProps> = ({
   }
   return (
     <>
-      <ModalBoxBody>
+      <ModalBody>
         <Stack hasGutter>
           <StackItem>{body}</StackItem>
         </Stack>
@@ -81,8 +86,8 @@ const EditPullSecretForm: React.FC<EditPullSecretFormProps> = ({
             <Alert title={submitError} variant="danger" isInline />
           </StackItem>
         )}
-      </ModalBoxBody>
-      <ModalBoxFooter>
+      </ModalBody>
+      <ModalFooter>
         <Button
           // eslint-disable-next-line @typescript-eslint/no-misused-promises
           onClick={submitForm}
@@ -93,7 +98,7 @@ const EditPullSecretForm: React.FC<EditPullSecretFormProps> = ({
         <Button onClick={onClose} variant={ButtonVariant.secondary}>
           {t('ai:Cancel')}
         </Button>
-      </ModalBoxFooter>
+      </ModalFooter>
     </>
   );
 };
@@ -119,13 +124,12 @@ const EditPullSecretModal: React.FC<EditPullSecretModalProps> = ({
   return (
     <Modal
       aria-label={t('ai:Edit pull secret dialog')}
-      title={t('ai:Edit pull secret')}
       isOpen={isOpen}
       onClose={onClose}
       variant={ModalVariant.small}
-      hasNoBodyWrapper
       id="edit-pull-secret-modal"
     >
+      <ModalHeader title={t('ai:Edit pull secret')} />
       <Formik<EditPullSecretFormikValues>
         initialValues={{
           pullSecret: undefined,

package/lib/cim/components/modals/EditSSHKeyModal.tsx

@@ -1,12 +1,18 @@
 import * as React from 'react';
 import * as Yup from 'yup';
-import { Alert, Button, ButtonVariant, Stack, StackItem } from '@patternfly/react-core';
+import { TFunction } from 'i18next';
 import {
+  Alert,
+  Button,
+  ButtonVariant,
   Modal,
-  ModalBoxBody,
-  ModalBoxFooter,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
   ModalVariant,
-} from '@patternfly/react-core/deprecated';
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
 import { Formik, FormikProps } from 'formik';
 
 import { InfraEnvK8sResource } from '../../types';
@@ -15,11 +21,12 @@ import { EditSSHKeyFormikValues } from './types';
 import { getWarningMessage } from './utils';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 
-const validationSchema = Yup.object({
-  sshPublicKey: sshPublicKeyValidationSchema.required(
-    'An SSH key is required to debug hosts as they register.',
-  ),
-});
+const validationSchema = (t: TFunction) =>
+  Yup.object({
+    sshPublicKey: sshPublicKeyValidationSchema(t).required(
+      t('ai:An SSH key is required to debug hosts as they register.'),
+    ),
+  });
 
 export type EditSSHKeyModalProps = {
   isOpen: boolean;
@@ -46,18 +53,17 @@ const EditSSHKeyModal: React.FC<EditSSHKeyModalProps> = ({
   return (
     <Modal
       aria-label={t('ai:Edit SSH public key dialog')}
-      title={t('ai:Edit SSH public key')}
       isOpen={isOpen}
       onClose={onClose}
       variant={ModalVariant.small}
-      hasNoBodyWrapper
       id="edit-ssh-key-modal"
     >
+      <ModalHeader title={t('ai:Edit SSH public key')} />
       <Formik<EditSSHKeyFormikValues>
         initialValues={{
           sshPublicKey: infraEnv.spec?.sshAuthorizedKey || '',
         }}
-        validationSchema={validationSchema}
+        validationSchema={validationSchema(t)}
         onSubmit={async (values) => {
           try {
             await onSubmit(values, infraEnv);
@@ -69,9 +75,9 @@ const EditSSHKeyModal: React.FC<EditSSHKeyModalProps> = ({
         }}
         validateOnMount
       >
-        {({ isSubmitting, isValid, submitForm }: FormikProps<EditSSHKeyModalProps>) => (
+        {({ isSubmitting, isValid, submitForm }: FormikProps<EditSSHKeyFormikValues>) => (
           <>
-            <ModalBoxBody>
+            <ModalBody>
               <Stack hasGutter>
                 <StackItem>
                   <Alert isInline variant="warning" title={warningMsg} />
@@ -85,16 +91,15 @@ const EditSSHKeyModal: React.FC<EditSSHKeyModalProps> = ({
                   </StackItem>
                 )}
               </Stack>
-            </ModalBoxBody>
-            <ModalBoxFooter>
-              {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
-              <Button onClick={submitForm} isDisabled={isSubmitting || !isValid}>
+            </ModalBody>
+            <ModalFooter>
+              <Button onClick={() => void submitForm()} isDisabled={isSubmitting || !isValid}>
                 {t('ai:Save')}
               </Button>
               <Button onClick={onClose} variant={ButtonVariant.secondary}>
                 {t('ai:Cancel')}
               </Button>
-            </ModalBoxFooter>
+            </ModalFooter>
           </>
         )}
       </Formik>

package/lib/cim/components/modals/MassApproveAgentModal.tsx

@@ -1,6 +1,15 @@
 import * as React from 'react';
-import { Alert, Button, ButtonVariant, Stack, StackItem } from '@patternfly/react-core';
-import { Modal, ModalBoxBody, ModalBoxFooter } from '@patternfly/react-core/deprecated';
+import {
+  Alert,
+  Button,
+  ButtonVariant,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
 import { getAIHosts } from '../helpers';
 import { AgentK8sResource } from '../../types';
 import HostsTable from '../../../common/components/hosts/HostsTable';
@@ -131,14 +140,13 @@ const MassApproveAgentModal: React.FC<MassApproveAgentModalProps> = ({
   return (
     <Modal
       aria-label={t('ai:Approve hosts dialog')}
-      title={t('ai:Approve hosts to join infrastructure environment')}
       isOpen={isOpen}
       onClose={onClose}
-      hasNoBodyWrapper
       id="mass-approve-modal"
       variant="medium"
     >
-      <ModalBoxBody>
+      <ModalHeader title={t('ai:Approve hosts to join infrastructure environment')} />
+      <ModalBody>
         <Stack hasGutter>
           <StackItem>
             <Alert
@@ -158,8 +166,8 @@ const MassApproveAgentModal: React.FC<MassApproveAgentModalProps> = ({
             <ModalProgress error={error} progress={progress} />
           </StackItem>
         </Stack>
-      </ModalBoxBody>
-      <ModalBoxFooter>
+      </ModalBody>
+      <ModalFooter>
         {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
         <Button onClick={onClick} isDisabled={progress !== null}>
           {t('ai:Approve all hosts')}
@@ -167,7 +175,7 @@ const MassApproveAgentModal: React.FC<MassApproveAgentModalProps> = ({
         <Button onClick={onClose} variant={ButtonVariant.secondary} isDisabled={progress !== null}>
           {t('ai:Cancel')}
         </Button>
-      </ModalBoxFooter>
+      </ModalFooter>
     </Modal>
   );
 };

package/lib/cim/components/modals/MassDeleteAgentModal.tsx

@@ -110,7 +110,7 @@ const statusColumn = (
         );
       } else if (bmh) {
         bmhStatus = getBMHStatus(bmh, bmhStatuses);
-        title = <BMHStatus bmhStatus={bmhStatus} />;
+        title = <BMHStatus bmhStatus={bmhStatus} bmh={bmh} />;
       }
 
       return {

package/lib/cim/components/modals/ScaleUpModal.tsx

@@ -8,8 +8,11 @@ import {
   AlertActionCloseButton,
   Stack,
   StackItem,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
 } from '@patternfly/react-core';
-import { Modal, ModalBoxBody, ModalBoxFooter } from '@patternfly/react-core/deprecated';
 import { Formik, FormikConfig, FormikProps } from 'formik';
 import { AgentK8sResource } from '../../types/k8s/agent';
 import { ClusterDeploymentK8sResource } from '../../types/k8s/cluster-deployment';
@@ -124,12 +127,11 @@ const ScaleUpModal: React.FC<ScaleUpModalProps> = ({
     <>
       <Modal
         aria-label={t('ai:Add host dialog')}
-        title={t('ai:Add hosts')}
         isOpen={isOpen}
         onClose={onClose}
-        hasNoBodyWrapper
         id="scale-up-modal"
       >
+        <ModalHeader title={t('ai:Add hosts')} />
         <Formik
           initialValues={getInitialValues()}
           validationSchema={validationSchema}
@@ -139,7 +141,7 @@ const ScaleUpModal: React.FC<ScaleUpModalProps> = ({
           {({ isSubmitting, isValid, submitForm }: FormikProps<ScaleUpFormValues>) => {
             return (
               <>
-                <ModalBoxBody>
+                <ModalBody>
                   <Stack hasGutter>
                     <StackItem>
                       <ScaleUpForm
@@ -165,8 +167,8 @@ const ScaleUpModal: React.FC<ScaleUpModalProps> = ({
                       </StackItem>
                     )}
                   </Stack>
-                </ModalBoxBody>
-                <ModalBoxFooter>
+                </ModalBody>
+                <ModalFooter>
                   {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
                   <Button onClick={submitForm} isDisabled={isSubmitting || !isValid}>
                     {t('ai:Submit')}
@@ -174,7 +176,7 @@ const ScaleUpModal: React.FC<ScaleUpModalProps> = ({
                   <Button onClick={onClose} variant={ButtonVariant.secondary}>
                     {t('ai:Cancel')}
                   </Button>
-                </ModalBoxFooter>
+                </ModalFooter>
               </>
             );
           }}

package/lib/cim/hooks/index.tsx

@@ -1,2 +1,3 @@
 export * from './useConfigMaps';
 export * from './useAgentServiceConfig';
+export * from './useEvents';

package/lib/cim/hooks/types.tsx

@@ -5,4 +5,7 @@ export type K8sWatchHookListProps = Omit<
   'groupVersionKind' | 'name' | 'isList'
 > | null;
 
-export type K8sWatchHookProps = Pick<WatchK8sResource, 'name' | 'namespace' | 'isList'> | null;
+export type K8sWatchHookProps = Pick<
+  WatchK8sResource,
+  'name' | 'namespace' | 'isList' | 'fieldSelector'
+> | null;

package/lib/cim/hooks/useEvents.tsx

@@ -0,0 +1,14 @@
+import { useK8sWatchResource } from './useK8sWatchResource';
+import { EventK8sResource } from '../types';
+import { K8sWatchHookProps } from './types';
+
+export const useEvents = (props: K8sWatchHookProps) =>
+  useK8sWatchResource<EventK8sResource[]>(
+    {
+      groupVersionKind: {
+        kind: 'Event',
+        version: 'v1',
+      },
+    },
+    props,
+  );

package/lib/cim/types/fromOCP/k8sTypes.ts

@@ -43,3 +43,16 @@ export type RouteK8sResource = {
     wildcardPolicy?: string;
   };
 } & K8sResourceCommon;
+
+export type EventK8sResource = {
+  type?: string;
+  message?: string;
+  eventTime?: string;
+  involvedObject?: {
+    apiVersion?: string;
+    kind?: string;
+    name?: string;
+    namespace?: string;
+    uid?: string;
+  };
+} & K8sResourceCommon;

package/lib/cim/types/k8s/agent-cluster-install.ts

@@ -30,6 +30,8 @@ export type AgentClusterInstallK8sResource = K8sResourceCommon & {
     };
     apiVIP?: string;
     ingressVIP?: string;
+    apiVIPs?: string[];
+    ingressVIPs?: string[];
     sshPublicKey?: string;
     imageSetRef?: {
       name?: string;
@@ -63,6 +65,8 @@ export type AgentClusterInstallK8sResource = K8sResourceCommon & {
   status?: {
     apiVIP?: string;
     ingressVIP?: string;
+    apiVIPs?: string[];
+    ingressVIPs?: string[];
     connectivityMajorityGroups?: string;
     conditions?: AgentClusterInstallStatusCondition[];
     progress?: {

package/lib/cim/types/k8s/bare-metal-host.ts

@@ -28,5 +28,25 @@ export type BareMetalHostK8sResource = K8sResourceCommon & {
     };
     errorMessage?: string;
     errorType?: string;
+    operationalStatus?: 'OK' | 'discovered' | 'error' | 'delayed' | 'detached';
+    operationHistory?: {
+      register?: {
+        start?: string;
+        end?: string;
+      };
+      provision?: {
+        start?: string;
+        end?: string;
+      };
+      inspect?: {
+        start?: string;
+        end?: string;
+      };
+      deprovision?: {
+        start?: string;
+        end?: string;
+      };
+    };
+    lastUpdated?: string;
   };
 };

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import * as Yup from 'yup';
+import { TFunction } from 'i18next';
 import {
   Button,
   Form,
@@ -17,12 +18,12 @@ import {
   ImageType,
   Proxy,
 } from '@openshift-assisted/types/assisted-installer-service';
+import { AlertFormikError } from '../../../common/components/ui';
 import {
-  AlertFormikError,
   httpProxyValidationSchema,
   noProxyValidationSchema,
   sshPublicKeyValidationSchema,
-} from '../../../common/components/ui';
+} from '../../validationSchemas';
 import { ProxyFieldsType, StatusErrorType } from '../../types';
 import ProxyFields from './ProxyFields';
 import UploadSSH from './UploadSSH';
@@ -55,13 +56,13 @@ export const StaticIPInfo = ({ docVersion }: { docVersion?: string }) => {
 
 export type DiscoveryImageFormValues = ImageCreateParams & ProxyFieldsType;
 
-const getValidationSchema = (allowEmpty: boolean) =>
+const getValidationSchema = (allowEmpty: boolean, t: TFunction) =>
   Yup.lazy((values: DiscoveryImageFormValues) =>
     Yup.object<DiscoveryImageFormValues>().shape({
-      sshPublicKey: sshPublicKeyValidationSchema,
-      httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy', allowEmpty }),
-      httpsProxy: httpProxyValidationSchema({ values, pairValueName: 'httpProxy', allowEmpty }), // share the schema, httpS is currently not supported
-      noProxy: noProxyValidationSchema,
+      sshPublicKey: sshPublicKeyValidationSchema(t),
+      httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy', allowEmpty, t }),
+      httpsProxy: httpProxyValidationSchema({ values, pairValueName: 'httpProxy', allowEmpty, t }), // share the schema, httpS is currently not supported
+      noProxy: noProxyValidationSchema(t),
     }),
   );
 
@@ -108,7 +109,7 @@ export const DiscoveryImageConfigForm: React.FC<DiscoveryImageConfigFormProps> =
     <Formik
       initialValues={initialValues}
       initialStatus={{ error: null }}
-      validationSchema={getValidationSchema(!!allowEmpty)}
+      validationSchema={getValidationSchema(!!allowEmpty, t)}
       onSubmit={handleSubmit}
     >
       {({ submitForm, isSubmitting, status }) => {

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

@@ -32,7 +32,7 @@ const DiscoveryInstructions = ({
           <Trans
             t={t}
             count={+isSNO}
-            components={{ bold: <strong /> }}
+            components={{ bold: <span className="pf-v6-u-font-weight-bold" /> }}
             i18nKey="ai:Keep the Discovery ISO media connected to the device throughout the installation process and set each host to boot <bold>only one time</bold> from this device. "
           />
         </Content>