@openshift-assisted/ui-lib 2.46.2 → 2.46.3

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

@@ -6,10 +6,11 @@ import {
   ButtonVariant,
   ClipboardCopy,
   clipboardCopyFunc,
+  ModalBody,
+  ModalFooter,
   Stack,
   StackItem,
 } from '@patternfly/react-core';
-import { ModalBoxBody, ModalBoxFooter } from '@patternfly/react-core/deprecated';
 import { DetailItem, DetailList } from '../ui';
 import DiscoveryInstructions from './DiscoveryInstructions';
 import { StaticIPInfo } from './DiscoveryImageConfigForm';
@@ -48,7 +49,7 @@ const DownloadIso = ({
 
   return (
     <>
-      <ModalBoxBody>
+      <ModalBody>
         <Stack hasGutter>
           <StackItem>
             <Alert
@@ -103,6 +104,8 @@ const DownloadIso = ({
                 }
               />
             </DetailList>
+          </StackItem>
+          <StackItem>
             <Alert
               variant="info"
               isInline
@@ -112,8 +115,8 @@ const DownloadIso = ({
             />
           </StackItem>
         </Stack>
-      </ModalBoxBody>
-      <ModalBoxFooter>
+      </ModalBody>
+      <ModalFooter>
         <Button
           variant={ButtonVariant.primary}
           onClick={() => downloadUrl && saveAs(downloadUrl)}
@@ -130,7 +133,7 @@ const DownloadIso = ({
             {t('ai:Edit ISO configuration')}
           </Button>
         )}
-      </ModalBoxFooter>
+      </ModalFooter>
     </>
   );
 };

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
 import DownloadIso, { DownloadISOProps } from './DownloadIso';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
+import { Modal, ModalHeader, ModalVariant } from '@patternfly/react-core';
 
 type DownloadIsoModalProps = DownloadISOProps & {
   isOpen: boolean;
@@ -12,13 +12,12 @@ const DownloadIsoModal: React.FC<DownloadIsoModalProps> = ({ isOpen, ...props })
   return (
     <Modal
       aria-label={t('ai:Download host discovery ISO dialog')}
-      title={t('ai:Add host')}
       isOpen={isOpen}
       onClose={props.onClose}
       variant={ModalVariant.small}
-      hasNoBodyWrapper
       id="download-discovery-iso-modal"
     >
+      <ModalHeader title={t('ai:Add host')} />
       <DownloadIso {...props} />
     </Modal>
   );

package/lib/common/components/clusterDetail/ConsoleModal.tsx

@@ -1,6 +1,15 @@
 import React from 'react';
-import { Button, ButtonVariant, Content, ExpandableSection } from '@patternfly/react-core';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
+import {
+  Button,
+  ButtonVariant,
+  Content,
+  ExpandableSection,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { removeProtocolFromURL } from '../../api';
 import { ToolbarButton } from '../ui/Toolbar';
@@ -174,14 +183,12 @@ export const ConsoleModal: React.FC<ConsoleModalProps> = ({
     </Button>,
   ];
   return (
-    <Modal
-      title={t('ai:OpenShift Web Console troubleshooting')}
-      isOpen={isOpen}
-      onClose={closeModal}
-      actions={actions}
-      variant={ModalVariant.large}
-    >
-      <WebConsoleHint cluster={cluster} consoleUrl={consoleUrl} />
+    <Modal isOpen={isOpen} onClose={closeModal} variant={ModalVariant.large}>
+      <ModalHeader title={t('ai:OpenShift Web Console troubleshooting')} />
+      <ModalBody>
+        <WebConsoleHint cluster={cluster} consoleUrl={consoleUrl} />
+      </ModalBody>
+      <ModalFooter>{actions}</ModalFooter>
     </Modal>
   );
 };

package/lib/common/components/clusterDetail/FinalizingProgress.tsx

@@ -87,12 +87,10 @@ export const FinalizingProgress: React.FC<FinalizingProgressProps> = ({
               zIndex={300} // set the zIndex below Cluster Events Modal
               headerContent={<>{t('ai:Initialization')}</>}
               bodyContent={
-                <Content>
-                  <Content component="p">
-                    {t(
-                      'ai:This stage may take a while to finish. To view detailed information, click the events log link below.',
-                    )}
-                  </Content>
+                <Content component="p">
+                  {t(
+                    'ai:This stage may take a while to finish. To view detailed information, click the events log link below.',
+                  )}
                 </Content>
               }
               footerContent={

package/lib/common/components/clusterWizard/ClusterWizardStepHeader.tsx

@@ -2,9 +2,7 @@ import React from 'react';
 import { Content } from '@patternfly/react-core';
 
 const ClusterWizardStepHeader: React.FC = ({ children }) => (
-  <Content>
-    <Content component="h2">{children}</Content>
-  </Content>
+  <Content component="h2">{children}</Content>
 );
 
 export default ClusterWizardStepHeader;

package/lib/common/components/clusterWizard/networkingSteps/UserManagedNetworkingTextContent.tsx

@@ -16,7 +16,7 @@ export const UserManagedNetworkingTextContent = ({
 }: UserManagedNetworkingTextContentProps) => {
   const { t } = useTranslation();
   return (
-    <Content>
+    <>
       <Content component={'p'}>
         <Trans t={t}>
           ai:Please refer to the{' '}
@@ -34,6 +34,6 @@ export const UserManagedNetworkingTextContent = ({
         <ListItem>{t('ai:Network ports')}</ListItem>
         <ListItem>{t('ai:DNS')}</ListItem>
       </List>
-    </Content>
+    </>
   );
 };

package/lib/common/components/hosts/AITableMemo.tsx

@@ -73,6 +73,7 @@ export const AITableMemo = React.memo(
                 </Th>
               ))}
             </Tr>
+            <Tr isBorderRow />
           </Thead>
           <Tbody>
             {rows.map((row, i) => (

package/lib/common/components/hosts/AdditionalNTPSourcesDialog.tsx

@@ -2,13 +2,15 @@ import React from 'react';
 import { Formik, FormikHelpers } from 'formik';
 import * as Yup from 'yup';
 import { TFunction } from 'i18next';
-import { Form, Button } from '@patternfly/react-core';
 import {
+  Form,
+  Button,
+  ModalBody,
+  ModalFooter,
   Modal,
   ModalVariant,
-  ModalBoxBody,
-  ModalBoxFooter,
-} from '@patternfly/react-core/deprecated';
+  ModalHeader,
+} from '@patternfly/react-core';
 import {
   ntpSourceValidationSchema,
   AdditionalNTPSourcesField,
@@ -74,7 +76,7 @@ const AdditionalNTPSourcesForm = ({
       {({ submitForm, status, setStatus, isSubmitting, isValid, dirty }) => {
         return (
           <>
-            <ModalBoxBody>
+            <ModalBody>
               <Form>
                 <AlertFormikError
                   status={status as StatusErrorType}
@@ -90,8 +92,8 @@ const AdditionalNTPSourcesForm = ({
                   isRequired
                 />
               </Form>
-            </ModalBoxBody>
-            <ModalBoxFooter>
+            </ModalBody>
+            <ModalFooter>
               <Button
                 key="submit"
                 // eslint-disable-next-line @typescript-eslint/no-misused-promises
@@ -104,7 +106,7 @@ const AdditionalNTPSourcesForm = ({
               <Button key="cancel" variant="link" onClick={onClose}>
                 {t('ai:Cancel')}
               </Button>
-            </ModalBoxFooter>
+            </ModalFooter>
           </>
         );
       }}
@@ -124,12 +126,11 @@ export const AdditionalNTPSourcesDialog: React.FC<AdditionalNTPSourcesDialogProp
 }) => (
   <Modal
     aria-label="Add NTP sources"
-    title="Add NTP sources"
     isOpen={isOpen}
     onClose={onClose}
     variant={ModalVariant.small}
-    hasNoBodyWrapper
   >
+    <ModalHeader title="Add NTP sources" />
     <AdditionalNTPSourcesForm
       additionalNtpSource={additionalNtpSource}
       onClose={onClose}

package/lib/common/components/hosts/EditHostForm.tsx

@@ -7,8 +7,9 @@ import {
   Form,
   AlertVariant,
   Alert,
+  ModalBody,
+  ModalFooter,
 } from '@patternfly/react-core';
-import { ModalBoxBody, ModalBoxFooter } from '@patternfly/react-core/deprecated';
 
 import { Formik } from 'formik';
 import { TFunction } from 'i18next';
@@ -104,7 +105,7 @@ const EditHostForm = ({
     >
       {({ handleSubmit, status, isSubmitting, isValid, setStatus, dirty }) => (
         <Form onSubmit={handleSubmit}>
-          <ModalBoxBody>
+          <ModalBody>
             <GridGap>
               <AlertFormikError
                 status={status as StatusErrorType}
@@ -135,8 +136,8 @@ const EditHostForm = ({
                 richValidationMessages={hostnameValidationMessages(t)}
               />
             </GridGap>
-          </ModalBoxBody>
-          <ModalBoxFooter>
+          </ModalBody>
+          <ModalFooter>
             <Button
               key="submit"
               data-testid="change-hostname-form__button-change"
@@ -154,7 +155,7 @@ const EditHostForm = ({
             >
               {t('ai:Cancel')}
             </Button>
-          </ModalBoxFooter>
+          </ModalFooter>
         </Form>
       )}
     </Formik>

package/lib/common/components/hosts/EditHostModal.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
 import { Host, Inventory } from '@openshift-assisted/types/assisted-installer-service';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import EditHostForm, { EditHostFormProps } from './EditHostForm';
+import { Modal, ModalHeader, ModalVariant } from '@patternfly/react-core';
 
 type EditHostModalProps = Pick<
   EditHostFormProps,
@@ -33,12 +33,11 @@ const EditHostModal = ({
   return (
     <Modal
       aria-label="Change hostname dialog"
-      title={t('ai:Change hostname')}
       isOpen={isOpen}
       onClose={onClose}
       variant={ModalVariant.small}
-      hasNoBodyWrapper
     >
+      <ModalHeader title={t('ai:Change hostname')} />
       <EditHostForm
         host={host}
         inventory={inventory}

package/lib/common/components/hosts/HostRequirements.tsx

@@ -1,4 +1,4 @@
-import { List, ListItem, Content } from '@patternfly/react-core';
+import { List, ListItem } from '@patternfly/react-core';
 import * as React from 'react';
 import ExternalLink from '../ui/ExternalLink';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
@@ -83,9 +83,7 @@ export const HostRequirementsList: React.FC<HostRequirementsListProps> = ({
 };
 
 const HostRequirements: React.FC<HostRequirementsListProps> = (props) => (
-  <Content>
-    <HostRequirementsList {...props} />
-  </Content>
+  <HostRequirementsList {...props} />
 );
 
 export default HostRequirements;

package/lib/common/components/hosts/HostStatus.tsx

@@ -125,12 +125,12 @@ const HostStatusPopoverContent: React.FC<HostStatusPopoverContentProps> = ({
   return (
     <Stack hasGutter>
       {additionalPopoverContent}
+      {details && (
+        <StackItem>
+          <Content component="p">{details}</Content>
+        </StackItem>
+      )}
       <StackItem>
-        {details && (
-          <Content>
-            <Content component="p">{details}</Content>
-          </Content>
-        )}
         <HostValidationGroups openshiftVersion={openshiftVersion} {...props} />
       </StackItem>
     </Stack>

package/lib/common/components/hosts/MassChangeHostnameModal.tsx

@@ -6,13 +6,16 @@ import {
   Form,
   HelperText,
   HelperTextItem,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
   Popover,
   Split,
   SplitItem,
   Stack,
   StackItem,
 } from '@patternfly/react-core';
-import { Modal, ModalBoxBody, ModalBoxFooter } from '@patternfly/react-core/deprecated';
 import { Formik, useFormikContext } from 'formik';
 import * as Yup from 'yup';
 import { t_global_icon_color_status_info_default as blueInfoColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_info_default';
@@ -175,7 +178,7 @@ const MassChangeHostnameForm = ({
   const { t } = useTranslation();
   return (
     <Form onSubmit={handleSubmit}>
-      <ModalBoxBody>
+      <ModalBody>
         <Stack hasGutter>
           <StackItem>
             <div>{t('ai:Rename hostnames using the custom template:')}</div>
@@ -250,8 +253,8 @@ const MassChangeHostnameForm = ({
             />
           </StackItem>
         </Stack>
-      </ModalBoxBody>
-      <ModalBoxFooter>
+      </ModalBody>
+      <ModalFooter>
         <Button
           key="submit"
           type={ButtonType.submit}
@@ -262,7 +265,7 @@ const MassChangeHostnameForm = ({
         <Button onClick={onClose} variant={ButtonVariant.secondary} isDisabled={isSubmitting}>
           {t('ai:Cancel')}
         </Button>
-      </ModalBoxFooter>
+      </ModalFooter>
     </Form>
   );
 };
@@ -296,13 +299,12 @@ const MassChangeHostnameModal = ({
   return (
     <Modal
       aria-label={t('ai:Change hostnames dialog')}
-      title={t('ai:Change hostnames')}
       isOpen={isOpen}
       onClose={onClose}
-      hasNoBodyWrapper
       id="mass-change-hostname-modal"
       variant="small"
     >
+      <ModalHeader title={t('ai:Change hostnames')} />
       <Formik
         initialValues={initialValues}
         validate={withTemplate(

package/lib/common/components/hosts/MassDeleteHostModal.tsx

@@ -1,6 +1,14 @@
 import * as React from 'react';
-import { Button, ButtonVariant, Stack, StackItem } from '@patternfly/react-core';
-import { Modal, ModalBoxBody, ModalBoxFooter } from '@patternfly/react-core/deprecated';
+import {
+  Button,
+  ButtonVariant,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
 
 import ModalProgress from '../ui/ModalProgress';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
@@ -51,15 +59,13 @@ const MassDeleteHostModal = ({
   return (
     <Modal
       aria-label={t('ai:Remove hosts dialog')}
-      title={t('ai:Remove hosts?')}
       isOpen={isOpen}
       onClose={onClose}
-      hasNoBodyWrapper
       id="mass-delete-modal"
       variant="medium"
-      titleIconVariant="warning"
     >
-      <ModalBoxBody>
+      <ModalHeader title={t('ai:Remove hosts?')} titleIconVariant="warning" />
+      <ModalBody>
         <Stack hasGutter>
           <StackItem>{t('ai:All of the listed hosts will be removed.')}</StackItem>
           <StackItem>{children}</StackItem>
@@ -67,8 +73,8 @@ const MassDeleteHostModal = ({
             <ModalProgress error={error} progress={progress} />
           </StackItem>
         </Stack>
-      </ModalBoxBody>
-      <ModalBoxFooter>
+      </ModalBody>
+      <ModalFooter>
         <Button
           onClick={() => void onClick()}
           isDisabled={progress !== null}
@@ -79,7 +85,7 @@ const MassDeleteHostModal = ({
         <Button onClick={onClose} variant={ButtonVariant.secondary} isDisabled={progress !== null}>
           {t('ai:Cancel')}
         </Button>
-      </ModalBoxFooter>
+      </ModalFooter>
     </Modal>
   );
 };

package/lib/common/components/storage/DisksTable.tsx

@@ -46,9 +46,7 @@ const diskColumns = (t: TFunction, showFormat: boolean) =>
   ].filter(Boolean) as { title: string | React.ReactNode }[];
 
 const SkipFormattingDisk = () => (
-  <Content>
-    <Content component={ContentVariants.p}>This bootable disk will skip formatting</Content>
-  </Content>
+  <Content component={ContentVariants.p}>This bootable disk will skip formatting</Content>
 );
 
 const getDiskLimitation = (

package/lib/common/components/storage/StorageUtils.tsx

@@ -7,9 +7,7 @@ import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/e
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
 
 const SkipFormattingDisks = () => (
-  <Content>
-    <Content component={ContentVariants.p}>Some bootable disks will skip formatting</Content>
-  </Content>
+  <Content component={ContentVariants.p}>Some bootable disks will skip formatting</Content>
 );
 
 export const roleColumn = (t: TFunction, schedulableMasters: boolean): TableRow<Host> => {

package/lib/common/components/ui/ConfirmationModal.tsx

@@ -1,11 +1,19 @@
 import * as React from 'react';
-import { Button, ButtonProps } from '@patternfly/react-core';
-import { Modal, ModalVariant, ModalProps } from '@patternfly/react-core/deprecated';
+import {
+  Button,
+  ButtonProps,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalHeaderProps,
+  ModalVariant,
+} from '@patternfly/react-core';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 type ConfirmationModalProps = {
   title: string;
-  titleIconVariant?: ModalProps['titleIconVariant'];
+  titleIconVariant?: ModalHeaderProps['titleIconVariant'];
   content: React.ReactNode;
   confirmationButtonVariant?: ButtonProps['variant'];
   confirmationButtonText?: string;
@@ -24,13 +32,10 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
 }) => {
   const { t } = useTranslation();
   return (
-    <Modal
-      title={title}
-      titleIconVariant={titleIconVariant}
-      isOpen={true}
-      onClose={onClose}
-      variant={ModalVariant.small}
-      actions={[
+    <Modal isOpen={true} onClose={onClose} variant={ModalVariant.small}>
+      <ModalHeader title={title} titleIconVariant={titleIconVariant} />
+      <ModalBody>{content}</ModalBody>
+      <ModalFooter>
         <Button
           data-testid="confirm-modal-submit"
           key="confirm"
@@ -38,13 +43,11 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
           onClick={onConfirm}
         >
           {confirmationButtonText}
-        </Button>,
+        </Button>
         <Button key="cancel" variant="link" onClick={onClose}>
           {t('ai:Cancel')}
-        </Button>,
-      ]}
-    >
-      {content}
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };

package/lib/common/components/ui/OpenShiftVersionModal.tsx

@@ -1,6 +1,14 @@
 import React, { useState } from 'react';
-import { Button, ButtonVariant, FormGroup } from '@patternfly/react-core';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
+import {
+  Button,
+  ButtonVariant,
+  FormGroup,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
 import { OpenShiftSelectWithSearch } from './OpenShiftSelectWithSearch';
 import { HelperTextType } from './OpenShiftVersionDropdown';
 import { useFormikContext } from 'formik';
@@ -31,32 +39,34 @@ export const OpenShiftVersionModal = ({
 
   return (
     <Modal
-      title="Available OpenShift Versions"
       id="available-openshift-versions-modal"
       isOpen
-      actions={[
+      onClose={onClose}
+      variant={ModalVariant.small}
+    >
+      <ModalHeader title="Available OpenShift Versions" />
+      <ModalBody>
+        <FormGroup
+          id={`form-control__customOpenshiftSelect`}
+          fieldId={'customOpenshiftSelect'}
+          label={'OpenShift version'}
+          isRequired
+        >
+          <OpenShiftSelectWithSearch
+            versions={allVersions}
+            getHelperText={getHelperText}
+            setCustomOpenshiftSelect={setCustomOpenshiftSelect}
+          />
+        </FormGroup>
+      </ModalBody>
+      <ModalFooter>
         <Button key="select-custom-ocp" variant={ButtonVariant.primary} onClick={handleSelect}>
           Select
-        </Button>,
+        </Button>
         <Button key="close-custom-ocp" variant={ButtonVariant.link} onClick={onClose}>
           Cancel
-        </Button>,
-      ]}
-      onClose={onClose}
-      variant={ModalVariant.small}
-    >
-      <FormGroup
-        id={`form-control__customOpenshiftSelect`}
-        fieldId={'customOpenshiftSelect'}
-        label={'OpenShift version'}
-        isRequired
-      >
-        <OpenShiftSelectWithSearch
-          versions={allVersions}
-          getHelperText={getHelperText}
-          setCustomOpenshiftSelect={setCustomOpenshiftSelect}
-        />
-      </FormGroup>
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };

package/lib/common/components/ui/SectionTitle.tsx

@@ -8,10 +8,8 @@ interface SectionTitleProps extends WithTestID {
 
 const SectionTitle = ({ title, testId }: SectionTitleProps) => (
   <GridItem>
-    <Content>
-      <Content data-testid={testId} component={ContentVariants.h3}>
-        {title}
-      </Content>
+    <Content data-testid={testId} component={ContentVariants.h3}>
+      {title}
     </Content>
   </GridItem>
 );

package/lib/common/components/ui/StaticTextField.tsx

@@ -82,10 +82,8 @@ export const StaticTextField: React.FC<StaticFieldProps> = ({ children, ...props
 
   return (
     <StaticField {...props}>
-      <Content>
-        <Content component="p" id={fieldId} aria-describedby={`${fieldId}-helper`}>
-          {children}
-        </Content>
+      <Content component="p" id={fieldId} aria-describedby={`${fieldId}-helper`}>
+        {children}
       </Content>
     </StaticField>
   );