@openshift-assisted/ui-lib 2.46.2 → 2.47.0

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/clusterDetailsValidation.ts

@@ -75,7 +75,7 @@ export const getClusterDetailsInitialValues = ({
     diskEncryptionTangServers: parseTangServers(cluster?.diskEncryption?.tangServers),
     diskEncryption: cluster?.diskEncryption ?? {},
     cpuArchitecture: cluster?.cpuArchitecture || getDefaultCpuArchitecture(),
-    platform: cluster?.platform?.type || 'none',
+    platform: cluster?.platform?.type || 'baremetal',
     customOpenshiftSelect: null,
     userManagedNetworking: cluster?.userManagedNetworking || false,
     enableDiskEncryptionOnArbiters: ['all', 'arbiters'].includes(

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>
   );

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

@@ -1,6 +1,14 @@
 import React from 'react';
-import { Button, ButtonVariant, Spinner, Title } from '@patternfly/react-core';
-import { Modal, ModalVariant, ModalBoxBody } from '@patternfly/react-core/deprecated';
+import {
+  Button,
+  ButtonVariant,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
+  Spinner,
+} 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 globalIconColorWarning } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_warning_default';
 import { ToolbarButton } from './Toolbar';
@@ -82,30 +90,21 @@ export const EventsModal = ({
 
   return (
     <Modal
-      header={
-        <Title headingLevel={'h1'}>
-          {title} {isLoading && <Spinner size="lg" data-testid="events-modal-spinner" />}
-        </Title>
-      }
       isOpen={isOpen}
       aria-label={t('ai:Displays events')}
-      hasNoBodyWrapper
-      actions={[
-        <Button
-          key="close"
-          variant={ButtonVariant.primary}
-          onClick={onClose}
-          data-testid="close-events-modal"
-        >
-          {t('ai:Close')}
-        </Button>,
-      ]}
       onClose={onClose}
       variant={ModalVariant.large}
       className="events-modal"
       id={'events-modal'}
     >
-      <ModalBoxBody className="events-modal__body">
+      <ModalHeader
+        title={
+          <>
+            {title} {isLoading && <Spinner size="lg" data-testid="events-modal-spinner" />}
+          </>
+        }
+      />
+      <ModalBody className="events-modal__body">
         {fallbackEventsURL ? (
           <ErrorState
             title={t('ai:Could not load events')}
@@ -123,7 +122,17 @@ export const EventsModal = ({
         ) : (
           <EventListFetch className="events-modal__event-list" setLoading={setLoading} {...rest} />
         )}
-      </ModalBoxBody>
+      </ModalBody>
+      <ModalFooter>
+        <Button
+          key="close"
+          variant={ButtonVariant.primary}
+          onClick={onClose}
+          data-testid="close-events-modal"
+        >
+          {t('ai:Close')}
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };

package/lib/common/components/ui/formik/AlertFormikError.tsx

@@ -14,16 +14,14 @@ export const AlertFormikError = ({ status, onClose }: AlertFormikErrorProps) =>
   const actionClose = onClose ? <AlertActionCloseButton onClose={onClose} /> : undefined;
 
   return (
-    <>
-      <Alert
-        variant={AlertVariant.danger}
-        title={status.error.title}
-        isInline
-        actionClose={actionClose}
-      >
-        {status.error.message}
-      </Alert>
-    </>
+    <Alert
+      variant={AlertVariant.danger}
+      title={status.error.title}
+      isInline
+      actionClose={actionClose}
+    >
+      {status.error.message}
+    </Alert>
   );
 };
 

package/lib/common/components/ui/formik/RichInputField.css

@@ -2,13 +2,6 @@
   padding-top: var(--pf-v6-c-helper-text--Gap);
 }
 
-.rich-input__group {
-  border-color: var(--pf-v6-global--BorderColor--300) var(--pf-v6-global--BorderColor--300)
-    var(--pf-v6-global--BorderColor--200) var(--pf-v6-global--BorderColor--300);
-  border-width: 1px;
-  border-style: solid;
-}
-
 .rich-input__group--invalid {
   border-bottom-color: var(--pf-v6-global--danger-color--100);
 }

package/lib/common/components/ui/formik/RichInputField.tsx

@@ -14,6 +14,7 @@ import {
   InputGroupItem,
   FormHelperText,
   HelperText,
+  ButtonVariant,
 } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { CheckIcon } from '@patternfly/react-icons/dist/js/icons/check-icon';
@@ -170,7 +171,7 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
                     <InfoCircleIcon color={blueInfoColor.value} />
                   )
                 }
-                variant="plain"
+                variant={ButtonVariant.control}
                 aria-label="Validation"
               />
             </Popover>

package/lib/common/components/ui/formik/TextAreaField.tsx

@@ -61,13 +61,22 @@ const TextAreaField: React.FC<TextAreaFieldProps> = ({
         <FormHelperText>
           <HelperText>
             <HelperTextItem
-              icon={errorMessage && <ExclamationCircleIcon />}
-              variant={errorMessage ? 'error' : 'default'}
-              id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
+              variant={'default'}
+              id={`${fieldId}-helper`}
               data-testid={`input-textarea-${fieldId}-helper-text`}
             >
-              {errorMessage ? errorMessage : helperText}
+              {helperText}
             </HelperTextItem>
+            {errorMessage && (
+              <HelperTextItem
+                icon={<ExclamationCircleIcon />}
+                variant={'error'}
+                id={`${fieldId}-helper-error`}
+                data-testid={`input-textarea-${fieldId}-helper-text`}
+              >
+                {errorMessage}
+              </HelperTextItem>
+            )}
           </HelperText>
         </FormHelperText>
       )}