diff --git a/apps/assisted-disconnected-ui/src/components/ResetSingleClusterModal.tsx b/apps/assisted-disconnected-ui/src/components/ResetSingleClusterModal.tsx index 0cb0e8b0fe..819c15bea3 100644 --- a/apps/assisted-disconnected-ui/src/components/ResetSingleClusterModal.tsx +++ b/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 = [ - , - , - ]; - return ( - - - - - - {t('ai:This will remove all current configurations and will revert to the defaults.')} - - - {t('ai:Are you sure you want to reset the cluster?')} - - - {error && ( + + + + - - {error.message} - + + + {t( + 'ai:This will remove all current configurations and will revert to the defaults.', + )} + + + {t('ai:Are you sure you want to reset the cluster?')} + - )} - + {error && ( + + + {error.message} + + + )} + + + + + + ); }; diff --git a/libs/locales/lib/en/translation.json b/libs/locales/lib/en/translation.json index bcb9846ebd..5b3f474d95 100644 --- a/libs/locales/lib/en/translation.json +++ b/libs/locales/lib/en/translation.json @@ -63,7 +63,7 @@ "ai:Add hosts with {{cpuArchitecture}} architecture to an <6>infrastructure environment": "Add hosts with {{cpuArchitecture}} architecture to an <6>infrastructure environment", "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", diff --git a/libs/ui-lib/lib/cim/components/Agent/BMCForm.tsx b/libs/ui-lib/lib/cim/components/Agent/BMCForm.tsx index 157ba041bc..51ca212e29 100644 --- a/libs/ui-lib/lib/cim/components/Agent/BMCForm.tsx +++ b/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 = ({ > {({ isSubmitting, isValid, submitForm }: FormikProps) => ( <> - +
= ({ 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 = ({ 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,8 +343,8 @@ const BMCForm: React.FC = ({ {error} )} - - + + {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */} - + )} diff --git a/libs/ui-lib/lib/cim/components/Agent/MinimalHWRequirements.tsx b/libs/ui-lib/lib/cim/components/Agent/MinimalHWRequirements.tsx index 45b71b9678..1cc3e17de3 100644 --- a/libs/ui-lib/lib/cim/components/Agent/MinimalHWRequirements.tsx +++ b/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 ( - + + + + + , - ]} - onClose={onClose} - variant={ModalVariant.medium} - > - + + ); }; diff --git a/libs/ui-lib/lib/cim/components/Hypershift/DetailsPage/NodePoolsTable.tsx b/libs/ui-lib/lib/cim/components/Hypershift/DetailsPage/NodePoolsTable.tsx index 154d3b4651..72bc84f30a 100644 --- a/libs/ui-lib/lib/cim/components/Hypershift/DetailsPage/NodePoolsTable.tsx +++ b/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')} diff --git a/libs/ui-lib/lib/cim/components/Hypershift/HostedClusterWizard/HostsStep/HostsForm.tsx b/libs/ui-lib/lib/cim/components/Hypershift/HostedClusterWizard/HostsStep/HostsForm.tsx index f663b53ede..96f276cb5e 100644 --- a/libs/ui-lib/lib/cim/components/Hypershift/HostedClusterWizard/HostsStep/HostsForm.tsx +++ b/libs/ui-lib/lib/cim/components/Hypershift/HostedClusterWizard/HostsStep/HostsForm.tsx @@ -235,7 +235,7 @@ const HostsForm: React.FC = ({ } as NodePoolFormValue); }} > - {t('ai:Add Nodepool')} + {t('ai:Add nodepool')} diff --git a/libs/ui-lib/lib/cim/components/Hypershift/modals/AddNodePoolModal.tsx b/libs/ui-lib/lib/cim/components/Hypershift/modals/AddNodePoolModal.tsx index 82fbb19c1d..3714c2c68e 100644 --- a/libs/ui-lib/lib/cim/components/Hypershift/modals/AddNodePoolModal.tsx +++ b/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 ( - + + initialValues={{ nodePoolName: `nodepool-${hostedCluster.metadata?.name || ''}-${Math.floor( @@ -97,7 +96,7 @@ const AddNodePoolModal = ({ > {({ isSubmitting, isValid, submitForm }) => ( <> - + @@ -108,8 +107,8 @@ const AddNodePoolModal = ({ )} - - + + - + )} diff --git a/libs/ui-lib/lib/cim/components/Hypershift/modals/ManageHostsModal.tsx b/libs/ui-lib/lib/cim/components/Hypershift/modals/ManageHostsModal.tsx index 819b5501f4..b7b6eb32ce 100644 --- a/libs/ui-lib/lib/cim/components/Hypershift/modals/ManageHostsModal.tsx +++ b/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 ( - + + initialValues={{ nodePoolName: nodePool.metadata?.name || '', @@ -135,7 +134,7 @@ const ManageHostsModal = ({ > {({ isSubmitting, isValid, submitForm }) => ( <> - + )} - - + + - + )} diff --git a/libs/ui-lib/lib/cim/components/Hypershift/modals/NodePoolForm.tsx b/libs/ui-lib/lib/cim/components/Hypershift/modals/NodePoolForm.tsx index 4ec6e83330..112433652a 100644 --- a/libs/ui-lib/lib/cim/components/Hypershift/modals/NodePoolForm.tsx +++ b/libs/ui-lib/lib/cim/components/Hypershift/modals/NodePoolForm.tsx @@ -94,7 +94,7 @@ const NodePoolForm = ({ agents, nodePool, hostedCluster, agentMachines }: NodePo /> - + {t('ai:OpenShift version')} diff --git a/libs/ui-lib/lib/cim/components/Hypershift/modals/RemoveNodePoolModal.tsx b/libs/ui-lib/lib/cim/components/Hypershift/modals/RemoveNodePoolModal.tsx index c9ed444863..7916faafb6 100644 --- a/libs/ui-lib/lib/cim/components/Hypershift/modals/RemoveNodePoolModal.tsx +++ b/libs/ui-lib/lib/cim/components/Hypershift/modals/RemoveNodePoolModal.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 { NodePoolK8sResource } from '../types'; import { getErrorMessage } from '../../../../common/utils'; import { useTranslation } from '../../../../common/hooks/use-translation-wrapper'; @@ -23,14 +28,12 @@ const RemoveNodePoolModal = ({ onClose, onRemove, nodePool }: RemoveNodePoolModa return ( - + + {t( @@ -44,8 +47,8 @@ const RemoveNodePoolModal = ({ onClose, onRemove, nodePool }: RemoveNodePoolModa )} - - + + - + ); }; diff --git a/libs/ui-lib/lib/cim/components/InfraEnv/EnvironmentErrors.tsx b/libs/ui-lib/lib/cim/components/InfraEnv/EnvironmentErrors.tsx index 7aa48859c6..7520f7b1fc 100644 --- a/libs/ui-lib/lib/cim/components/InfraEnv/EnvironmentErrors.tsx +++ b/libs/ui-lib/lib/cim/components/InfraEnv/EnvironmentErrors.tsx @@ -3,14 +3,12 @@ import { getFailingResourceConditions } from '../helpers'; import { InfraEnvK8sResource } from '../../types'; import { SingleResourceAlerts } from '../common/ResourceAlerts'; import { Alert, AlertVariant } from '@patternfly/react-core'; -import { ModalBoxBody } from '@patternfly/react-core/deprecated'; import { getInfraEnvDocs } from '../common/constants'; import { useTranslation } from '../../../common/hooks/use-translation-wrapper'; export type EnvironmentErrorsProps = { infraEnv: InfraEnvK8sResource; docVersion: string; - inModal?: boolean; children?: React.ReactNode; }; @@ -18,7 +16,6 @@ export const EnvironmentErrors: React.FC = ({ infraEnv, docVersion, children, - inModal, }) => { const infraEnvAlerts = getFailingResourceConditions(infraEnv, ['ImageCreated']); const { t } = useTranslation(); @@ -27,7 +24,7 @@ export const EnvironmentErrors: React.FC = ({ return <>{children}; } - const errors = ( + return ( <> {!infraEnv.status && ( = ({ /> ); - - return inModal ? {errors} : errors; }; diff --git a/libs/ui-lib/lib/cim/components/modals/AddBmcHostModal.tsx b/libs/ui-lib/lib/cim/components/modals/AddBmcHostModal.tsx index 8afcd4d9ea..3be66beeb8 100644 --- a/libs/ui-lib/lib/cim/components/modals/AddBmcHostModal.tsx +++ b/libs/ui-lib/lib/cim/components/modals/AddBmcHostModal.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Modal, ModalVariant } from '@patternfly/react-core/deprecated'; +import { Modal, ModalBody, ModalHeader, ModalVariant } from '@patternfly/react-core'; import BMCForm from '../Agent/BMCForm'; import { AddBmcHostModalProps } from './types'; import { useTranslation } from '../../../common/hooks/use-translation-wrapper'; @@ -20,23 +20,24 @@ const AddBmcHostModal: React.FC = ({ return ( - - - - + + + + + + + ); }; diff --git a/libs/ui-lib/lib/cim/components/modals/AddBmcHostYamlForm.tsx b/libs/ui-lib/lib/cim/components/modals/AddBmcHostYamlForm.tsx index 13bba662ef..91323f0a3b 100644 --- a/libs/ui-lib/lib/cim/components/modals/AddBmcHostYamlForm.tsx +++ b/libs/ui-lib/lib/cim/components/modals/AddBmcHostYamlForm.tsx @@ -8,11 +8,12 @@ import { EmptyState, EmptyStateBody, EmptyStateVariant, + ModalBody, + ModalFooter, Spinner, Stack, StackItem, } from '@patternfly/react-core'; -import { ModalBoxBody, ModalBoxFooter } from '@patternfly/react-core/deprecated'; import { ErrorCircleOIcon } from '@patternfly/react-icons/dist/js/icons/error-circle-o-icon'; import { UploadIcon } from '@patternfly/react-icons/dist/js/icons/upload-icon'; import jsYaml from 'js-yaml'; @@ -126,7 +127,7 @@ const AddBmcHostYamlForm: React.FC< return ( <> - + )} - - + + - + ); }; diff --git a/libs/ui-lib/lib/cim/components/modals/AddBmcHostYamlModal.tsx b/libs/ui-lib/lib/cim/components/modals/AddBmcHostYamlModal.tsx index 28df451ce6..37f1f8b001 100644 --- a/libs/ui-lib/lib/cim/components/modals/AddBmcHostYamlModal.tsx +++ b/libs/ui-lib/lib/cim/components/modals/AddBmcHostYamlModal.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Modal, ModalVariant } from '@patternfly/react-core/deprecated'; +import { Modal, ModalBody, ModalHeader, ModalVariant } from '@patternfly/react-core'; import { UploadActionModalProps } from './types'; import AddBmcHostYamlForm from './AddBmcHostYamlForm'; import { useTranslation } from '../../../common/hooks/use-translation-wrapper'; @@ -18,16 +18,17 @@ const AddBmcHostYamlModal: React.FC = ({ return ( - - - - + + + + + + + ); }; diff --git a/libs/ui-lib/lib/cim/components/modals/AddHostModal.tsx b/libs/ui-lib/lib/cim/components/modals/AddHostModal.tsx index 9ea75ddb4c..3c2a1c2906 100644 --- a/libs/ui-lib/lib/cim/components/modals/AddHostModal.tsx +++ b/libs/ui-lib/lib/cim/components/modals/AddHostModal.tsx @@ -1,7 +1,14 @@ import * as React from 'react'; import { FormikHelpers } from 'formik'; -import { EmptyState, EmptyStateBody, Spinner } from '@patternfly/react-core'; -import { Modal, ModalVariant } from '@patternfly/react-core/deprecated'; +import { + EmptyState, + EmptyStateBody, + Modal, + ModalBody, + ModalHeader, + ModalVariant, + Spinner, +} from '@patternfly/react-core'; import { DownloadIso, DiscoveryImageConfigForm, DiscoveryImageFormValues } from '../../../common'; import { AddHostModalProps } from './types'; import { useTranslation } from '../../../common/hooks/use-translation-wrapper'; @@ -54,14 +61,13 @@ const AddHostModal: React.FC = ({ return ( - + + {dialogType === 'config' && ( = ({ docVersion={docVersion} /> )} + {dialogType === 'download' && ( <> {isIPXE ? ( @@ -129,9 +136,11 @@ const GeneratingIsoDownload = ({ ciscoUrl={ciscoUrl} /> ) : ( - - {t('ai:Generating discovery ISO')} - + + + {t('ai:Generating discovery ISO')} + + ); }; @@ -152,9 +161,11 @@ const GeneratingIPXEDownload = ({ onReset={onReset} /> ) : ( - - {t('ai:Generating iPXE script')} - + + + {t('ai:Generating iPXE script')} + + ); }; diff --git a/libs/ui-lib/lib/cim/components/modals/CimConfiguration/CimConfigurationModal.tsx b/libs/ui-lib/lib/cim/components/modals/CimConfiguration/CimConfigurationModal.tsx index 736864e427..5a5622ed54 100644 --- a/libs/ui-lib/lib/cim/components/modals/CimConfiguration/CimConfigurationModal.tsx +++ b/libs/ui-lib/lib/cim/components/modals/CimConfiguration/CimConfigurationModal.tsx @@ -8,8 +8,12 @@ import { StackItem, Stack, Content, + Modal, + ModalVariant, + ModalFooter, + ModalBody, + ModalHeader, } from '@patternfly/react-core'; -import { Modal, ModalVariant } from '@patternfly/react-core/deprecated'; import { Formik, FormikHelpers } from 'formik'; import parseUrl from 'parse-url'; @@ -130,76 +134,82 @@ export const CimConfigurationModal: React.FC = ({ {({ handleSubmit, isValid, isSubmitting }) => ( void handleSubmit()} - > - {t('ai:Configure')} - , - , - ] - : [ - , - ] - } variant={ModalVariant.medium} id="cim-config-modal" > - - - - {t( - 'ai:Configuring the host inventory settings will enable the Central Infrastructure Management.', - )} - - - - {isError && ( + + + - - {error.message} - + + {t( + 'ai:Configuring the host inventory settings will enable the Central Infrastructure Management.', + )} + - )} - - - - - - - - - {isConfigure && ( + {isError && ( + + + {error.message} + + + )} + - + + + + + + {isConfigure && ( + + + + )} + + + + {isConfigure ? ( + <> + + + + ) : ( + )} - + )} diff --git a/libs/ui-lib/lib/cim/components/modals/EditBMHModal.tsx b/libs/ui-lib/lib/cim/components/modals/EditBMHModal.tsx index 6c06da7595..aba00642cb 100644 --- a/libs/ui-lib/lib/cim/components/modals/EditBMHModal.tsx +++ b/libs/ui-lib/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 = ({ return ( + {isLoading ? ( ) : ( diff --git a/libs/ui-lib/lib/cim/components/modals/EditNtpSourcesModal.tsx b/libs/ui-lib/lib/cim/components/modals/EditNtpSourcesModal.tsx index af891b7a47..8d3136c978 100644 --- a/libs/ui-lib/lib/cim/components/modals/EditNtpSourcesModal.tsx +++ b/libs/ui-lib/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 = ({ return ( + initialValues={{ enableNtpSources: infraEnv.spec?.additionalNTPSources ? 'additional' : 'auto', @@ -64,7 +69,7 @@ const EditNtpSourcesModal: React.FC = ({ }: FormikProps) => { return ( <> - + @@ -106,8 +111,8 @@ const EditNtpSourcesModal: React.FC = ({ )} - - +
+ {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */} - + ); }} diff --git a/libs/ui-lib/lib/cim/components/modals/EditProxyModal.tsx b/libs/ui-lib/lib/cim/components/modals/EditProxyModal.tsx index dcba8622eb..308284fe1f 100644 --- a/libs/ui-lib/lib/cim/components/modals/EditProxyModal.tsx +++ b/libs/ui-lib/lib/cim/components/modals/EditProxyModal.tsx @@ -1,12 +1,18 @@ import * as React from 'react'; import * as Yup from 'yup'; -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 { EditProxyModalProps } from './types'; import { useTranslation } from '../../../common/hooks/use-translation-wrapper'; import { ProxyInputFields } from '../../../common/components/clusterConfiguration/ProxyFields'; @@ -40,7 +46,7 @@ const Footer = ({ onClose }: { onClose: VoidFunction }) => { const { t } = useTranslation(); const { isSubmitting, submitForm, isValid } = useFormikContext(); return ( - + - + ); }; @@ -69,15 +75,15 @@ const EditProxyModal: React.FC = ({ !!infraEnv.spec?.proxy?.httpProxy || !!infraEnv.spec?.proxy?.httpsProxy || !!infraEnv.spec?.proxy?.noProxy; + return ( + initialValues={{ httpProxy: infraEnv.spec?.proxy?.httpProxy, @@ -97,7 +103,7 @@ const EditProxyModal: React.FC = ({ }} > <> - + @@ -113,7 +119,7 @@ const EditProxyModal: React.FC = ({ - +