MGMT-22505: Stop using deprecated Modal components

apps/assisted-disconnected-ui/src/components/ResetSingleClusterModal.tsx

@@ -1,6 +1,17 @@
 import React from 'react';
-import { Button, ButtonVariant, Content, Stack, StackItem, Alert } from '@patternfly/react-core';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
+import {
+  Button,
+  ButtonVariant,
+  Content,
+  Stack,
+  StackItem,
+  Alert,
+  Modal,
+  ModalVariant,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+} from '@patternfly/react-core';
 import { useModalDialogsContext, ClustersService } from '@openshift-assisted/ui-lib/ocm';
 import {
   getApiErrorMessage,
@@ -45,48 +56,50 @@ const ResetSingleClusterModal: React.FC = () => {
     }
   };
 
-  const actions = [
-    <Button
-      key="reset"
-      variant={ButtonVariant.danger}
-      onClick={() => void handleResetAsync()}
-      isDisabled={isLoading}
-      isLoading={isLoading}
-    >
-      {t('ai:Reset')}
-    </Button>,
-    <Button key="cancel" variant={ButtonVariant.link} onClick={handleClose} isDisabled={isLoading}>
-      {t('ai:Cancel')}
-    </Button>,
-  ];
-
   return (
-    <Modal
-      title={t('ai:Reset cluster')}
-      titleIconVariant="warning"
-      isOpen={isOpen}
-      variant={ModalVariant.small}
-      actions={actions}
-      onClose={handleClose}
-    >
-      <Stack hasGutter>
-        <StackItem>
-          <Content>
-            <Content component="p">
-              {t('ai:This will remove all current configurations and will revert to the defaults.')}
-            </Content>
-
-            <Content component="p">{t('ai:Are you sure you want to reset the cluster?')}</Content>
-          </Content>
-        </StackItem>
-        {error && (
+    <Modal isOpen={isOpen} variant={ModalVariant.small} onClose={handleClose}>
+      <ModalHeader title={t('ai:Reset cluster')} titleIconVariant="warning" />
+      <ModalBody>
+        <Stack hasGutter>
           <StackItem>
-            <Alert isInline variant="danger" title={error.title}>
-              {error.message}
-            </Alert>
+            <Content>
+              <Content component="p">
+                {t(
+                  'ai:This will remove all current configurations and will revert to the defaults.',
+                )}
+              </Content>
+
+              <Content component="p">{t('ai:Are you sure you want to reset the cluster?')}</Content>
+            </Content>
           </StackItem>
-        )}
-      </Stack>
+          {error && (
+            <StackItem>
+              <Alert isInline variant="danger" title={error.title}>
+                {error.message}
+              </Alert>
+            </StackItem>
+          )}
+        </Stack>
+      </ModalBody>
+      <ModalFooter>
+        <Button
+          key="reset"
+          variant={ButtonVariant.danger}
+          onClick={() => void handleResetAsync()}
+          isDisabled={isLoading}
+          isLoading={isLoading}
+        >
+          {t('ai:Reset')}
+        </Button>
+        <Button
+          key="cancel"
+          variant={ButtonVariant.link}
+          onClick={handleClose}
+          isDisabled={isLoading}
+        >
+          {t('ai:Cancel')}
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };

libs/locales/lib/en/translation.json

@@ -63,7 +63,7 @@
   "ai:Add hosts with {{cpuArchitecture}} architecture to an <6>infrastructure environment</6>": "Add hosts with {{cpuArchitecture}} architecture to an <6>infrastructure environment</6>",
   "ai:Add label": "Add label",
   "ai:Add more": "Add more",
-  "ai:Add Nodepool": "Add nodepool",
+  "ai:Add nodepool": "Add nodepool",
   "ai:Add your own NTP (Network Time Protocol) sources": "Add your own NTP (Network Time Protocol) sources",
   "ai:Adding hosts": "Adding hosts",
   "ai:Adding hosts instructions": "Adding hosts instructions",
@@ -735,7 +735,6 @@
   "ai:Remove hosts dialog": "Remove hosts dialog",
   "ai:Remove hosts?": "Remove hosts?",
   "ai:Remove nodepool": "Remove nodepool",
-  "ai:Remove Nodepool": "Remove Nodepool",
   "ai:Removing {{name}} will remove the association with {{count}} host. These hosts will become available for other nodepools.": "Removing {{name}} will remove the association with {{count}} host. These hosts will become available for other nodepools.",
   "ai:Removing {{name}} will remove the association with {{count}} host. These hosts will become available for other nodepools._plural": "Removing {{name}} will remove the association with {{count}} hosts. These hosts will become available for other nodepools.",
   "ai:Removing from cluster": "Removing from cluster",

libs/ui-lib/lib/cim/components/Agent/BMCForm.tsx

@@ -13,8 +13,9 @@ import {
   Content,
   TextInputTypes,
   ContentVariants,
+  ModalBody,
+  ModalFooter,
 } from '@patternfly/react-core';
-import { ModalBoxBody, ModalBoxFooter } from '@patternfly/react-core/deprecated';
 import {
   Formik,
   FormikProps,
@@ -274,7 +275,7 @@ const BMCForm: React.FC<BMCFormProps> = ({
     >
       {({ isSubmitting, isValid, submitForm }: FormikProps<AddBmcValues>) => (
         <>
-          <ModalBoxBody>
+          <ModalBody>
             <Form id="add-bmc-form">
               <InputField
                 label={t('ai:Name')}
@@ -300,7 +301,7 @@ const BMCForm: React.FC<BMCFormProps> = ({
                 label={t('ai:Boot NIC MAC Address')}
                 name="bootMACAddress"
                 placeholder={t('ai:Enter an address')}
-                description={t(
+                helperText={t(
                   "ai:The MAC address of the host's network connected NIC that will be used to provision the host.",
                 )}
                 isRequired
@@ -324,7 +325,7 @@ const BMCForm: React.FC<BMCFormProps> = ({
                     label={t('ai:NMState')}
                     name="nmState"
                     language={Language.yaml}
-                    description={t(
+                    helperText={t(
                       'ai:Upload a YAML file in NMstate format (not the entire NMstate config CR) that includes your network configuration (static IPs, bonds, etc.).',
                     )}
                   />
@@ -342,16 +343,16 @@ const BMCForm: React.FC<BMCFormProps> = ({
                 {error}
               </Alert>
             )}
-          </ModalBoxBody>
-          <ModalBoxFooter>
+          </ModalBody>
+          <ModalFooter>
             {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
             <Button onClick={submitForm} isDisabled={isSubmitting || !isValid}>
               {isEdit ? t('ai:Submit') : t('ai:Create')}
             </Button>
             <Button onClick={onClose} variant={ButtonVariant.secondary}>
               {t('ai:Cancel')}
             </Button>
-          </ModalBoxFooter>
+          </ModalFooter>
         </>
       )}
     </Formik>

libs/ui-lib/lib/cim/components/Agent/MinimalHWRequirements.tsx

@@ -1,6 +1,13 @@
 import * as React from 'react';
-import { Button, ButtonVariant } from '@patternfly/react-core';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
+import {
+  Button,
+  ButtonVariant,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 
 import { ConfigMapK8sResource } from '../../types';
@@ -100,18 +107,16 @@ export const MinimalHWRequirementsModal = ({
 }: MinimalHWRequirementsModalProps) => {
   const { t } = useTranslation();
   return (
-    <Modal
-      title={t('ai:Minimum hardware requirements')}
-      isOpen={isOpen}
-      actions={[
+    <Modal isOpen={isOpen} onClose={onClose} variant={ModalVariant.medium}>
+      <ModalHeader title={t('ai:Minimum hardware requirements')} />
+      <ModalBody>
+        <HostRequirements {...getHWRequirements(aiConfigMap)} isSNOCluster={isSNOCluster} />
+      </ModalBody>
+      <ModalFooter>
         <Button key="close" variant={ButtonVariant.primary} onClick={onClose}>
           {t('ai:Close')}
-        </Button>,
-      ]}
-      onClose={onClose}
-      variant={ModalVariant.medium}
-    >
-      <HostRequirements {...getHWRequirements(aiConfigMap)} isSNOCluster={isSNOCluster} />
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };

libs/ui-lib/lib/cim/components/Hypershift/DetailsPage/NodePoolsTable.tsx

@@ -174,7 +174,7 @@ const NodePoolsTable = ({
                             onClick: () => setManageHostsOpen(np.metadata?.uid),
                           },
                           {
-                            title: t('ai:Remove Nodepool'),
+                            title: t('ai:Remove nodepool'),
                             onClick: () => setRemoveNodePoolOpen(np.metadata?.uid),
                           },
                         ],
@@ -228,7 +228,7 @@ const NodePoolsTable = ({
             iconPosition="right"
             onClick={() => setAddNodePool(true)}
           >
-            {t('ai:Add Nodepool')}
+            {t('ai:Add nodepool')}
           </Button>
         </StackItem>
       </Stack>

libs/ui-lib/lib/cim/components/Hypershift/HostedClusterWizard/HostsStep/HostsForm.tsx

@@ -235,7 +235,7 @@ const HostsForm: React.FC<HostsFormProps> = ({
                     } as NodePoolFormValue);
                   }}
                 >
-                  {t('ai:Add Nodepool')}
+                  {t('ai:Add nodepool')}
                 </Button>
               </GridItem>
             </>

libs/ui-lib/lib/cim/components/Hypershift/modals/AddNodePoolModal.tsx

@@ -1,11 +1,16 @@
 import * as React from 'react';
-import { Alert, Button, Spinner, Stack, StackItem } from '@patternfly/react-core';
 import {
+  Alert,
+  Button,
   Modal,
-  ModalBoxBody,
-  ModalBoxFooter,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
   ModalVariant,
-} from '@patternfly/react-core/deprecated';
+  Spinner,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
 import { Formik } from 'formik';
 
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
@@ -72,14 +77,8 @@ const AddNodePoolModal = ({
   };
 
   return (
-    <Modal
-      aria-label="add node pool dialog"
-      title={t('ai:Add Nodepool')}
-      isOpen
-      onClose={onClose}
-      variant={ModalVariant.medium}
-      hasNoBodyWrapper
-    >
+    <Modal aria-label="add node pool dialog" isOpen onClose={onClose} variant={ModalVariant.medium}>
+      <ModalHeader title={t('ai:Add nodepool')} />
       <Formik<NodePoolFormValues>
         initialValues={{
           nodePoolName: `nodepool-${hostedCluster.metadata?.name || ''}-${Math.floor(
@@ -97,7 +96,7 @@ const AddNodePoolModal = ({
       >
         {({ isSubmitting, isValid, submitForm }) => (
           <>
-            <ModalBoxBody>
+            <ModalBody>
               <Stack hasGutter>
                 <StackItem>
                   <NodePoolForm agents={namespaceAgents} hostedCluster={hostedCluster} />
@@ -108,8 +107,8 @@ const AddNodePoolModal = ({
                   </StackItem>
                 )}
               </Stack>
-            </ModalBoxBody>
-            <ModalBoxFooter>
+            </ModalBody>
+            <ModalFooter>
               <Button
                 // eslint-disable-next-line @typescript-eslint/no-misused-promises
                 onClick={submitForm}
@@ -121,7 +120,7 @@ const AddNodePoolModal = ({
               <Button variant="link" onClick={onClose}>
                 {t('ai:Cancel')}
               </Button>
-            </ModalBoxFooter>
+            </ModalFooter>
           </>
         )}
       </Formik>

libs/ui-lib/lib/cim/components/Hypershift/modals/ManageHostsModal.tsx

@@ -1,10 +1,15 @@
-import { Alert, Button, Spinner, Stack, StackItem } from '@patternfly/react-core';
 import {
+  Alert,
+  Button,
   Modal,
-  ModalBoxBody,
-  ModalBoxFooter,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
   ModalVariant,
-} from '@patternfly/react-core/deprecated';
+  Spinner,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
 import { Formik, FormikConfig } from 'formik';
 import * as React from 'react';
 import { AgentK8sResource } from '../../../types';
@@ -109,14 +114,8 @@ const ManageHostsModal = ({
   };
 
   return (
-    <Modal
-      aria-label="Manage hosts dialog"
-      title={t('ai:Manage hosts')}
-      isOpen
-      onClose={onClose}
-      variant={ModalVariant.medium}
-      hasNoBodyWrapper
-    >
+    <Modal aria-label="Manage hosts dialog" isOpen onClose={onClose} variant={ModalVariant.medium}>
+      <ModalHeader title={t('ai:Manage hosts')} />
       <Formik<NodePoolFormValues>
         initialValues={{
           nodePoolName: nodePool.metadata?.name || '',
@@ -135,7 +134,7 @@ const ManageHostsModal = ({
       >
         {({ isSubmitting, isValid, submitForm }) => (
           <>
-            <ModalBoxBody>
+            <ModalBody>
               <Stack hasGutter>
                 <StackItem>
                   <NodePoolForm
@@ -151,8 +150,8 @@ const ManageHostsModal = ({
                   </StackItem>
                 )}
               </Stack>
-            </ModalBoxBody>
-            <ModalBoxFooter>
+            </ModalBody>
+            <ModalFooter>
               <Button
                 // eslint-disable-next-line @typescript-eslint/no-misused-promises
                 onClick={submitForm}
@@ -164,7 +163,7 @@ const ManageHostsModal = ({
               <Button variant="link" onClick={onClose}>
                 {t('ai:Cancel')}
               </Button>
-            </ModalBoxFooter>
+            </ModalFooter>
           </>
         )}
       </Formik>

libs/ui-lib/lib/cim/components/Hypershift/modals/NodePoolForm.tsx

@@ -94,7 +94,7 @@ const NodePoolForm = ({ agents, nodePool, hostedCluster, agentMachines }: NodePo
           />
         </GridItem>
         <GridItem>
-          <DescriptionList isHorizontal>
+          <DescriptionList isHorizontal horizontalTermWidthModifier={{ default: '17ch' }}>
             <DescriptionListGroup>
               <DescriptionListTerm>{t('ai:OpenShift version')}</DescriptionListTerm>
               <DescriptionListDescription>