@openshift-assisted/ui-lib 2.16.3-cim → 2.16.4-cim

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

@@ -1,17 +1,13 @@
 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,
   ModalVariant,
-  Stack,
-  StackItem,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import { Formik, useFormikContext } from 'formik';
 import { InfraEnvK8sResource, SecretK8sResource } from '../../types';
 import { LoadingState, PullSecretField, pullSecretValidationSchema } from '../../../common';

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

@@ -1,16 +1,12 @@
 import * as React from 'react';
 import * as Yup from 'yup';
+import { Alert, Button, ButtonVariant, Stack, StackItem } from '@patternfly/react-core';
 import {
-  Alert,
-  Button,
-  ButtonVariant,
   Modal,
   ModalBoxBody,
   ModalBoxFooter,
   ModalVariant,
-  Stack,
-  StackItem,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import { Formik, FormikProps } from 'formik';
 
 import { InfraEnvK8sResource } from '../../types';
@@ -68,7 +64,7 @@ const EditSSHKeyModal: React.FC<EditSSHKeyModalProps> = ({
             onClose();
           } catch (err) {
             const error = err as Error;
-            setError(error?.message || t('ai:An error occurred'));
+            setError(error?.message || t('ai:An error occured'));
           }
         }}
         validateOnMount

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

@@ -1,14 +1,6 @@
 import * as React from 'react';
-import {
-  Alert,
-  Button,
-  ButtonVariant,
-  Modal,
-  ModalBoxBody,
-  ModalBoxFooter,
-  Stack,
-  StackItem,
-} from '@patternfly/react-core';
+import { Alert, Button, ButtonVariant, Stack, StackItem } from '@patternfly/react-core';
+import { Modal, ModalBoxBody, ModalBoxFooter } from '@patternfly/react-core/deprecated';
 import { getAIHosts } from '../helpers';
 import { AgentK8sResource } from '../../types';
 import HostsTable from '../../../common/components/hosts/HostsTable';
@@ -27,7 +19,7 @@ type ApproveTableRowProps = {
 };
 
 const ApproveTableRow: React.FC<ApproveTableRowProps> = ({ agent, children }) => (
-  <div className={agent?.spec.approved ? 'pf-v5-u-color-200' : undefined}>{children}</div>
+  <div className={agent?.spec.approved ? 'pf-v6-u-color-200' : undefined}>{children}</div>
 );
 
 const hostnameColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host> => {
@@ -121,7 +113,7 @@ const MassApproveAgentModal: React.FC<MassApproveAgentModalProps> = ({
       onClose();
     } catch (err) {
       setError({
-        title: t('ai:An error occurred while approving agents'),
+        title: t('ai:An error occured while approving agents'),
         message: getErrorMessage(err),
       });
       setProgress(null);

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Button, Flex, FlexItem, Popover } from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { Link } from 'react-router-dom-v5-compat';
-import { global_palette_blue_300 as blueInfoColor } from '@patternfly/react-tokens/dist/js/global_palette_blue_300';
+import { t_global_icon_color_status_info_default as blueInfoColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_info_default';
 import {
   getHostname,
   getInventory,
@@ -43,7 +43,7 @@ const hostnameColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host
         ?.clusterDeploymentName?.name;
       return {
         title: (
-          <div className={assignedToCluster ? 'pf-v5-u-color-200' : undefined}>
+          <div className={assignedToCluster ? 'pf-v6-u-color-200' : undefined}>
             {computedHostname}
           </div>
         ),

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

@@ -1,9 +1,6 @@
 import React from 'react';
 import * as Yup from 'yup';
 import {
-  Modal,
-  ModalBoxBody,
-  ModalBoxFooter,
   Button,
   ButtonVariant,
   Alert,
@@ -12,6 +9,7 @@ import {
   Stack,
   StackItem,
 } 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';

package/lib/cim/types/index.ts

@@ -2,4 +2,3 @@ export * from './fromOCP';
 export * from './k8s';
 export * from './metal3';
 export * from './resources';
-export * from './models';

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

@@ -58,7 +58,6 @@ export type AgentClusterInstallK8sResource = K8sResourceCommon & {
     };
     holdInstallation?: boolean;
     platformType: string;
-    manifestsConfigMapRefs?: { name: string }[];
   };
   status?: {
     apiVIP?: string;

package/lib/cim/utils.ts

@@ -1,5 +1,3 @@
-import { Patch } from '@openshift-console/dynamic-plugin-sdk';
-import { isEqual } from 'lodash-es';
 import { StatusCondition } from './types';
 
 export function getConditionByType<ConditionType>(
@@ -8,13 +6,3 @@ export function getConditionByType<ConditionType>(
 ): StatusCondition<ConditionType> | undefined {
   return conditions.find((c) => c.type === type);
 }
-
-export const appendPatch = <V>(patches: Patch[], path: string, newVal?: V, existingVal?: V) => {
-  if (!isEqual(newVal, existingVal)) {
-    patches.push({
-      op: existingVal === undefined ? 'add' : 'replace',
-      path,
-      value: newVal,
-    });
-  }
-};

package/lib/common/api/assisted-service/BundleAPI.ts

@@ -6,8 +6,21 @@ const BundleAPI = {
     return `/v2/operators/bundles`;
   },
 
-  list() {
-    return client.get<Bundle[]>(`${BundleAPI.makeBaseURI()}`);
+  list(
+    openshiftVersion?: string,
+    cpuArchitecture?: string,
+    platformType?: string,
+    featureIds?: string,
+  ) {
+    return client.get<Bundle[]>(`${BundleAPI.makeBaseURI()}`, {
+      params: {
+        openshift_version: openshiftVersion,
+        cpu_architecture: cpuArchitecture,
+        platform_type: platformType,
+        feature_ids: featureIds,
+        ...(platformType === 'external' ? { external_platform_name: 'oci' } : {}),
+      },
+    });
   },
 
   listOperatorsForBundle(bundleName: string) {

package/lib/common/api/assisted-service/ClustersAPI.ts

@@ -245,6 +245,12 @@ const ClustersAPI = {
       headers: { 'Content-Type': 'application/json' },
     });
   },
+  registerDisconnected(params: { name: string; openshiftVersion: string }) {
+    return client.post<Cluster, AxiosResponse<Cluster>, { name: string; openshiftVersion: string }>(
+      `${ClustersAPI.makeBaseURI()}disconnected`,
+      params,
+    );
+  },
 };
 
 export default ClustersAPI;

package/lib/common/api/assisted-service/HostsAPI.ts

@@ -1,4 +1,5 @@
 import {
+  Cluster,
   Host,
   HostUpdateParams,
   InfraEnv,
@@ -62,6 +63,18 @@ const HostsAPI = {
       `${HostsAPI.makeActionsBaseURI(infraEnvId, hostId)}/install`,
     );
   },
+  bindHost(infraEnvId: InfraEnv['id'], hostId: Host['id'], clusterId: Cluster['id']) {
+    return client.post<Host, AxiosResponse<Host>, { cluster_id: string }>(
+      `${HostsAPI.makeActionsBaseURI(infraEnvId, hostId)}/bind`,
+      { cluster_id: clusterId },
+      {
+        headers: {
+          accept: 'application/json',
+          'Content-Type': 'application/json',
+        },
+      },
+    );
+  },
 };
 
 export default HostsAPI;

package/lib/common/api/assisted-service/InfraEnvsAPI.ts

@@ -4,6 +4,7 @@ import {
   InfraEnvCreateParams,
   PresignedUrl,
   InfraEnvUpdateParams,
+  Host,
 } from '@openshift-assisted/types/assisted-installer-service';
 import { AxiosResponse } from 'axios';
 
@@ -67,6 +68,11 @@ const InfraEnvsAPI = {
       `${InfraEnvsAPI.makeBaseURI(infraEnvId)}/downloads/files-presigned?file_name=ipxe-script`,
     );
   },
+  getHosts(infraEnvId: InfraEnv['id']) {
+    return client.get<Host[]>(`${InfraEnvsAPI.makeBaseURI(infraEnvId)}/hosts`, {
+      signal: _getRequestAbortController.signal,
+    });
+  },
 };
 
 export default InfraEnvsAPI;

package/lib/common/components/clusterConfiguration/CertificateFields.css

@@ -1,3 +1,3 @@
-.ai-certificate-fields .pf-v5-c-check__body {
+.ai-certificate-fields .pf-v6-c-check__body {
   width: 100%;
 }

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

@@ -22,7 +22,7 @@ export const CertificateFieldsHelperText = ({ fieldId = FIELD_NAME }) => {
     <FormGroup>
       <FormHelperText>
         <HelperText id={fieldId}>
-          <HelperTextItem>
+          <HelperTextItem data-testid="certificate-fields-helper-text">
             {t(
               'ai:Paste in 1 or more PEM formatted certificates that you want the cluster to trust.',
             )}

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

@@ -10,10 +10,9 @@ import {
 } from '@patternfly/react-core';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { getFieldId, StaticField } from '../..';
+import { useField } from 'formik';
 import toNumber from 'lodash-es/toNumber';
 import OcmTNADisclaimer from './OcmTNADisclaimer';
-import { ClusterDetailsValues } from '../clusterWizard';
-import { useField, useFormikContext } from 'formik';
 
 const isItemEnabled = (value: number, allowHighlyAvailable?: boolean, allowTNA?: boolean) => {
   switch (value) {
@@ -45,7 +44,6 @@ const ControlPlaneNodesDropdown = ({
 }) => {
   const { t } = useTranslation();
   const [{ name, value: selectedValue }, , { setValue }] = useField<number>('controlPlaneCount');
-  const { setFieldValue } = useFormikContext<ClusterDetailsValues>();
   const [controlPlanelOpen, setControlPlanelOpen] = React.useState(false);
   const fieldId = getFieldId(name, 'input');
 
@@ -87,13 +85,6 @@ const ControlPlaneNodesDropdown = ({
     e?: React.MouseEvent<Element, MouseEvent>,
     value?: string | number,
   ) => {
-    if (value === 1) {
-      setFieldValue('userManagedNetworking', true);
-      setFieldValue('platform', 'none');
-    } else {
-      setFieldValue('userManagedNetworking', false);
-      setFieldValue('platform', 'baremetal');
-    }
     setValue(toNumber(value));
     setControlPlanelOpen(false);
   };

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

@@ -3,12 +3,12 @@ import * as Yup from 'yup';
 import {
   Button,
   Form,
-  ModalBoxBody,
-  ModalBoxFooter,
   AlertVariant,
   Alert,
   Stack,
   StackItem,
+  ModalBody,
+  ModalFooter,
 } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 import { Formik, FormikHelpers } from 'formik';
@@ -114,7 +114,7 @@ export const DiscoveryImageConfigForm: React.FC<DiscoveryImageConfigFormProps> =
       {({ submitForm, isSubmitting, status }) => {
         return (
           <>
-            <ModalBoxBody>
+            <ModalBody>
               <Stack hasGutter>
                 {hasDHCP === false && (
                   <StackItem>
@@ -139,8 +139,8 @@ export const DiscoveryImageConfigForm: React.FC<DiscoveryImageConfigFormProps> =
                   </Form>
                 </StackItem>
               </Stack>
-            </ModalBoxBody>
-            <ModalBoxFooter>
+            </ModalBody>
+            <ModalFooter>
               <Button
                 // eslint-disable-next-line @typescript-eslint/no-misused-promises
                 onClick={submitForm}
@@ -156,7 +156,7 @@ export const DiscoveryImageConfigForm: React.FC<DiscoveryImageConfigFormProps> =
               <Button key="cancel" variant="link" onClick={onCancel}>
                 {t('ai:Cancel')}
               </Button>
-            </ModalBoxFooter>
+            </ModalFooter>
           </>
         );
       }}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TextListItem, OrderType, Text, TextContent, TextList } from '@patternfly/react-core';
+import { Content, OrderType } from '@patternfly/react-core';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { Trans } from 'react-i18next';
 
@@ -14,35 +14,35 @@ const DiscoveryInstructions = ({
 }: DiscoveryInstructionsProps) => {
   const { t } = useTranslation();
   return (
-    <TextContent>
-      <Text component="h3">{t('ai:Adding hosts instructions')}</Text>
-      <TextList component="ol" type={OrderType.number} style={{ marginLeft: 0 }}>
-        <TextListItem hidden={!showAllInstructions}>
+    <>
+      <Content component="h3">{t('ai:Adding hosts instructions')}</Content>
+      <Content component="ol" type={OrderType.number} style={{ marginLeft: 0 }}>
+        <Content component="li" hidden={!showAllInstructions}>
           {t('ai:Click the Add host button.', { count: +isSNO })}
-        </TextListItem>
-        <TextListItem hidden={!showAllInstructions}>
+        </Content>
+        <Content component="li" hidden={!showAllInstructions}>
           {t('ai:Configure the SSH key and proxy settings after the modal appears (optional).')}
-        </TextListItem>
-        <TextListItem>
+        </Content>
+        <Content component="li">
           {t(
             'ai:Download the Discovery ISO (onto a USB drive, attach it to a virtual media, etc.) and use it to boot your hosts.',
           )}
-        </TextListItem>
-        <TextListItem>
+        </Content>
+        <Content component="li">
           <Trans
             t={t}
             count={+isSNO}
             components={{ bold: <strong /> }}
             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. "
           />
-        </TextListItem>
-        <TextListItem>
+        </Content>
+        <Content component="li">
           {t(
             'ai:Booted hosts should appear in the host inventory table. This may take a few minutes.',
           )}
-        </TextListItem>
-      </TextList>
-    </TextContent>
+        </Content>
+      </Content>
+    </>
   );
 };
 

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

@@ -1,25 +1,25 @@
 import React from 'react';
-import { TextListItem, OrderType, Text, TextContent, TextList } from '@patternfly/react-core';
+import { Content, OrderType } from '@patternfly/react-core';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 const DiscoveryIpxeInstructions = () => {
   const { t } = useTranslation();
   return (
-    <TextContent>
-      <Text component="h3">{t('ai:Adding hosts instructions')}</Text>
-      <TextList component="ol" type={OrderType.number} style={{ marginLeft: 0 }}>
-        <TextListItem>{t('ai:Download the example iPXE script file')}</TextListItem>
-        <TextListItem>
+    <>
+      <Content component="h3">{t('ai:Adding hosts instructions')}</Content>
+      <Content component="ol" type={OrderType.number} style={{ marginLeft: 0 }}>
+        <Content component="li">{t('ai:Download the example iPXE script file')}</Content>
+        <Content component="li">
           {t('ai:Download the assets in the script file to your iPXE server')}
-        </TextListItem>
-        <TextListItem>
+        </Content>
+        <Content component="li">
           {t(
             'ai:Inside the example script file, customize the asset URLs to your local server address',
           )}
-        </TextListItem>
-        <TextListItem>{t('ai:Set all the hosts to boot using iPXE script file')}</TextListItem>
-      </TextList>
-    </TextContent>
+        </Content>
+        <Content component="li">{t('ai:Set all the hosts to boot using iPXE script file')}</Content>
+      </Content>
+    </>
   );
 };
 

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

@@ -1,17 +1,19 @@
 import React from 'react';
 import {
   Button,
-  Modal,
   ButtonVariant,
-  ModalVariant,
-  Text,
-  TextVariants,
+  Content,
   List,
   ListComponent,
   ListItem,
   OrderType,
   HelperText,
   HelperTextItem,
+  Modal,
+  ModalVariant,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
 } from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { PrismCode, SimpleAIPrismTheme, UiIcon } from '../ui';
@@ -38,9 +40,9 @@ export const DiscoveryTroubleshootingModalContent = () => {
   return (
     <List component={ListComponent.ol} type={OrderType.number}>
       <ListItem>
-        <Text component={TextVariants.p}>{t('ai:The host machine is powered on')}</Text>
+        <Content component="p">{t('ai:The host machine is powered on')}</Content>
         <HelperText>
-          <HelperTextItem variant="indeterminate">
+          <HelperTextItem data-testid="discovery-troubleshooting-boot-time-helper">
             {t(
               'ai:Boot time depends on several factors such as your hardware and network configuration, and if you are booting from an ISO.',
             )}
@@ -48,21 +50,21 @@ export const DiscoveryTroubleshootingModalContent = () => {
         </HelperText>
       </ListItem>
       <ListItem>
-        <Text component={TextVariants.p}>
+        <Content component="p">
           {t('ai:If you used DHCP networking, verify that your DHCP server is enabled')}
-        </Text>
+        </Content>
       </ListItem>
       <ListItem>
-        <Text component={TextVariants.p}>
+        <Content component="p">
           {t(
             'ai:If you used static IP, bridges, and bonds networking, verify that your configurations are correct',
           )}
-        </Text>
+        </Content>
       </ListItem>
       <ListItem>
-        <Text component={TextVariants.p}>{t('ai:SSH into your machine')}</Text>
+        <Content component="p">{t('ai:SSH into your machine')}</Content>
         <HelperText>
-          <HelperTextItem variant="indeterminate">
+          <HelperTextItem data-testid="discovery-troubleshooting-ssh-access-helper">
             {t(
               'ai:Verify that you can access your host machine using SSH, or a console such as BMC or virtual machine console. In the CLI, enter the following command:',
             )}
@@ -70,7 +72,7 @@ export const DiscoveryTroubleshootingModalContent = () => {
         </HelperText>
         <PrismCode theme={SimpleAIPrismTheme} code="ssh -i <identity_file> core@<machine-ip>" />
         <HelperText>
-          <HelperTextItem variant="indeterminate">
+          <HelperTextItem data-testid="discovery-troubleshooting-ssh-auth-helper">
             {t(
               'ai:Authentication is provided by the discovery ISO, therefore when you access your host using SSH, a password is not required. Optional -i parameter can be used to specify the private key that matches the public key provided when generating Discovery ISO.',
             )}
@@ -78,11 +80,11 @@ export const DiscoveryTroubleshootingModalContent = () => {
         </HelperText>
       </ListItem>
       <ListItem>
-        <Text component={TextVariants.p}>
+        <Content component="p">
           {t('ai:Unable to SSH into your hosts through the network?')}
-        </Text>
+        </Content>
         <HelperText>
-          <HelperTextItem variant="indeterminate">
+          <HelperTextItem data-testid="discovery-troubleshooting-ssh-alternative-helper">
             {t(
               'ai:Try logging into the machine directly through physical access, out-of-band management, or a virtual machine console. To generate a new bootable image file with password-based login enabled, download the full image file and patch it locally with a login password of your choice using',
             )}{' '}
@@ -99,7 +101,7 @@ export const DiscoveryTroubleshootingModalContent = () => {
           </HelperTextItem>
         </HelperText>
         <HelperText>
-          <HelperTextItem variant="indeterminate">
+          <HelperTextItem data-testid="discovery-troubleshooting-script-usage-helper">
             {t('ai:Run these commands to use the script:')}
           </HelperTextItem>
         </HelperText>
@@ -110,12 +112,12 @@ export const DiscoveryTroubleshootingModalContent = () => {
         />
       </ListItem>
       <ListItem>
-        <Text component={TextVariants.p}>
+        <Content component="p">
           {t('ai:The discovery agent is running with the correct parameters')}
-        </Text>
+        </Content>
         <PrismCode theme={SimpleAIPrismTheme} code={`ps -ef | grep agent`} />
         <HelperText>
-          <HelperTextItem variant="indeterminate">
+          <HelperTextItem data-testid="discovery-troubleshooting-agent-output-helper">
             {t('ai:The output displays the following:')}
           </HelperTextItem>
         </HelperText>
@@ -126,15 +128,15 @@ core        2362    2311  0 08:04 pts/0    00:00:00 grep --color=auto agent`}
         />
       </ListItem>
       <ListItem>
-        <Text component={TextVariants.p}>{t('ai:The agent ran successfully')}</Text>
+        <Content component="p">{t('ai:The agent ran successfully')}</Content>
         <HelperText>
-          <HelperTextItem variant="indeterminate">
+          <HelperTextItem data-testid="discovery-troubleshooting-agent-logs-helper">
             {t('ai:To verify that the agent ran successfully, check the logs:')}
           </HelperTextItem>
         </HelperText>
         <PrismCode theme={SimpleAIPrismTheme} code="sudo journalctl -u agent.service" />
         <HelperText>
-          <HelperTextItem variant="indeterminate">
+          <HelperTextItem data-testid="discovery-troubleshooting-network-error-helper">
             {t('ai:In the following example, the errors indicate there is a network issue:')}
           </HelperTextItem>
         </HelperText>
@@ -152,7 +154,7 @@ Oct 15 11:26:35 localhost systemd[1]: agent.service: Failed with result 'exit-co
 Oct 15 11:26:35 localhost systemd[1]: Failed to start agent.service.`}
         />
         <HelperText>
-          <HelperTextItem variant="indeterminate">
+          <HelperTextItem data-testid="discovery-troubleshooting-proxy-network-helper">
             <Trans
               t={t}
               components={{ code: <code /> }}
@@ -162,16 +164,16 @@ Oct 15 11:26:35 localhost systemd[1]: Failed to start agent.service.`}
         </HelperText>
       </ListItem>
       <ListItem>
-        <Text component={TextVariants.p}>{t('ai:Check agent logs')}</Text>
+        <Content component="p">{t('ai:Check agent logs')}</Content>
         <HelperText>
-          <HelperTextItem variant="indeterminate">
+          <HelperTextItem data-testid="discovery-troubleshooting-detailed-logs-helper">
             {t('ai:To view detailed agent logs and communication use following command:')}
           </HelperTextItem>
         </HelperText>
         <PrismCode theme={SimpleAIPrismTheme} code="sudo journalctl TAG=agent | less" />
       </ListItem>
       <ListItem>
-        <Text component={TextVariants.p}>{t('ai:Check assisted-installer logs')}</Text>
+        <Content component="p">{t('ai:Check assisted-installer logs')}</Content>
         <PrismCode
           theme={SimpleAIPrismTheme}
           code={`sudo su
@@ -180,7 +182,7 @@ podman logs <container id>`}
         />
       </ListItem>
       <ListItem>
-        <Text component={TextVariants.p}>{t('ai:Check bootkube logs')}</Text>
+        <Content component="p">{t('ai:Check bootkube logs')}</Content>
         <PrismCode theme={SimpleAIPrismTheme} code={`sudo journalctl -u bootkube`} />
       </ListItem>
     </List>
@@ -221,24 +223,23 @@ export const DiscoveryTroubleshootingModal = ({
   setDiscoveryHintModalOpen,
   isOpen,
 }: DiscoveryTroubleshootingModalProps) => {
+  const { t } = useTranslation();
   const onClose = React.useCallback(
     () => setDiscoveryHintModalOpen(false),
     [setDiscoveryHintModalOpen],
   );
-  const { t } = useTranslation();
+
   return (
-    <Modal
-      title={t('ai:Hosts not showing up troubleshooter')}
-      isOpen={isOpen}
-      actions={[
+    <Modal isOpen={isOpen} onClose={onClose} variant={ModalVariant.large}>
+      <ModalHeader title={t('ai:Hosts not showing up troubleshooter')} />
+      <ModalBody>
+        <DiscoveryTroubleshootingModalContent />
+      </ModalBody>
+      <ModalFooter>
         <Button key="close" variant={ButtonVariant.primary} onClick={onClose}>
           {t('ai:Close')}
-        </Button>,
-      ]}
-      onClose={onClose}
-      variant={ModalVariant.large}
-    >
-      <DiscoveryTroubleshootingModalContent />
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };