Skip to content

Commit 81ef26a

Browse files
jgyselovjgyselov
authored
Stop using deprecate Modal component in CIM (#3343)
1 parent 2283bcd commit 81ef26a

23 files changed

+334
-268
lines changed

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

Lines changed: 54 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,17 @@
11
import React from 'react';
2-
import { Button, ButtonVariant, Content, Stack, StackItem, Alert } from '@patternfly/react-core';
3-
import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
2+
import {
3+
Button,
4+
ButtonVariant,
5+
Content,
6+
Stack,
7+
StackItem,
8+
Alert,
9+
Modal,
10+
ModalVariant,
11+
ModalHeader,
12+
ModalBody,
13+
ModalFooter,
14+
} from '@patternfly/react-core';
415
import { useModalDialogsContext, ClustersService } from '@openshift-assisted/ui-lib/ocm';
516
import {
617
getApiErrorMessage,
@@ -45,48 +56,50 @@ const ResetSingleClusterModal: React.FC = () => {
4556
}
4657
};
4758

48-
const actions = [
49-
<Button
50-
key="reset"
51-
variant={ButtonVariant.danger}
52-
onClick={() => void handleResetAsync()}
53-
isDisabled={isLoading}
54-
isLoading={isLoading}
55-
>
56-
{t('ai:Reset')}
57-
</Button>,
58-
<Button key="cancel" variant={ButtonVariant.link} onClick={handleClose} isDisabled={isLoading}>
59-
{t('ai:Cancel')}
60-
</Button>,
61-
];
62-
6359
return (
64-
<Modal
65-
title={t('ai:Reset cluster')}
66-
titleIconVariant="warning"
67-
isOpen={isOpen}
68-
variant={ModalVariant.small}
69-
actions={actions}
70-
onClose={handleClose}
71-
>
72-
<Stack hasGutter>
73-
<StackItem>
74-
<Content>
75-
<Content component="p">
76-
{t('ai:This will remove all current configurations and will revert to the defaults.')}
77-
</Content>
78-
79-
<Content component="p">{t('ai:Are you sure you want to reset the cluster?')}</Content>
80-
</Content>
81-
</StackItem>
82-
{error && (
60+
<Modal isOpen={isOpen} variant={ModalVariant.small} onClose={handleClose}>
61+
<ModalHeader title={t('ai:Reset cluster')} titleIconVariant="warning" />
62+
<ModalBody>
63+
<Stack hasGutter>
8364
<StackItem>
84-
<Alert isInline variant="danger" title={error.title}>
85-
{error.message}
86-
</Alert>
65+
<Content>
66+
<Content component="p">
67+
{t(
68+
'ai:This will remove all current configurations and will revert to the defaults.',
69+
)}
70+
</Content>
71+
72+
<Content component="p">{t('ai:Are you sure you want to reset the cluster?')}</Content>
73+
</Content>
8774
</StackItem>
88-
)}
89-
</Stack>
75+
{error && (
76+
<StackItem>
77+
<Alert isInline variant="danger" title={error.title}>
78+
{error.message}
79+
</Alert>
80+
</StackItem>
81+
)}
82+
</Stack>
83+
</ModalBody>
84+
<ModalFooter>
85+
<Button
86+
key="reset"
87+
variant={ButtonVariant.danger}
88+
onClick={() => void handleResetAsync()}
89+
isDisabled={isLoading}
90+
isLoading={isLoading}
91+
>
92+
{t('ai:Reset')}
93+
</Button>
94+
<Button
95+
key="cancel"
96+
variant={ButtonVariant.link}
97+
onClick={handleClose}
98+
isDisabled={isLoading}
99+
>
100+
{t('ai:Cancel')}
101+
</Button>
102+
</ModalFooter>
90103
</Modal>
91104
);
92105
};

‎libs/locales/lib/en/translation.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
"ai:Add hosts with {{cpuArchitecture}} architecture to an <6>infrastructure environment</6>": "Add hosts with {{cpuArchitecture}} architecture to an <6>infrastructure environment</6>",
6464
"ai:Add label": "Add label",
6565
"ai:Add more": "Add more",
66-
"ai:Add Nodepool": "Add nodepool",
66+
"ai:Add nodepool": "Add nodepool",
6767
"ai:Add your own NTP (Network Time Protocol) sources": "Add your own NTP (Network Time Protocol) sources",
6868
"ai:Adding hosts": "Adding hosts",
6969
"ai:Adding hosts instructions": "Adding hosts instructions",
@@ -742,7 +742,6 @@
742742
"ai:Remove hosts dialog": "Remove hosts dialog",
743743
"ai:Remove hosts?": "Remove hosts?",
744744
"ai:Remove nodepool": "Remove nodepool",
745-
"ai:Remove Nodepool": "Remove Nodepool",
746745
"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.",
747746
"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.",
748747
"ai:Removing from cluster": "Removing from cluster",

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

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,9 @@ import {
1313
Content,
1414
TextInputTypes,
1515
ContentVariants,
16+
ModalBody,
17+
ModalFooter,
1618
} from '@patternfly/react-core';
17-
import { ModalBoxBody, ModalBoxFooter } from '@patternfly/react-core/deprecated';
1819
import {
1920
Formik,
2021
FormikProps,
@@ -274,7 +275,7 @@ const BMCForm: React.FC<BMCFormProps> = ({
274275
>
275276
{({ isSubmitting, isValid, submitForm }: FormikProps<AddBmcValues>) => (
276277
<>
277-
<ModalBoxBody>
278+
<ModalBody>
278279
<Form id="add-bmc-form">
279280
<InputField
280281
label={t('ai:Name')}
@@ -300,7 +301,7 @@ const BMCForm: React.FC<BMCFormProps> = ({
300301
label={t('ai:Boot NIC MAC Address')}
301302
name="bootMACAddress"
302303
placeholder={t('ai:Enter an address')}
303-
description={t(
304+
helperText={t(
304305
"ai:The MAC address of the host's network connected NIC that will be used to provision the host.",
305306
)}
306307
isRequired
@@ -324,7 +325,7 @@ const BMCForm: React.FC<BMCFormProps> = ({
324325
label={t('ai:NMState')}
325326
name="nmState"
326327
language={Language.yaml}
327-
description={t(
328+
helperText={t(
328329
'ai:Upload a YAML file in NMstate format (not the entire NMstate config CR) that includes your network configuration (static IPs, bonds, etc.).',
329330
)}
330331
/>
@@ -342,16 +343,16 @@ const BMCForm: React.FC<BMCFormProps> = ({
342343
{error}
343344
</Alert>
344345
)}
345-
</ModalBoxBody>
346-
<ModalBoxFooter>
346+
</ModalBody>
347+
<ModalFooter>
347348
{/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
348349
<Button onClick={submitForm} isDisabled={isSubmitting || !isValid}>
349350
{isEdit ? t('ai:Submit') : t('ai:Create')}
350351
</Button>
351352
<Button onClick={onClose} variant={ButtonVariant.secondary}>
352353
{t('ai:Cancel')}
353354
</Button>
354-
</ModalBoxFooter>
355+
</ModalFooter>
355356
</>
356357
)}
357358
</Formik>

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

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
import * as React from 'react';
2-
import { Button, ButtonVariant } from '@patternfly/react-core';
3-
import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
2+
import {
3+
Button,
4+
ButtonVariant,
5+
Modal,
6+
ModalBody,
7+
ModalFooter,
8+
ModalHeader,
9+
ModalVariant,
10+
} from '@patternfly/react-core';
411
import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
512

613
import { ConfigMapK8sResource } from '../../types';
@@ -100,18 +107,16 @@ export const MinimalHWRequirementsModal = ({
100107
}: MinimalHWRequirementsModalProps) => {
101108
const { t } = useTranslation();
102109
return (
103-
<Modal
104-
title={t('ai:Minimum hardware requirements')}
105-
isOpen={isOpen}
106-
actions={[
110+
<Modal isOpen={isOpen} onClose={onClose} variant={ModalVariant.medium}>
111+
<ModalHeader title={t('ai:Minimum hardware requirements')} />
112+
<ModalBody>
113+
<HostRequirements {...getHWRequirements(aiConfigMap)} isSNOCluster={isSNOCluster} />
114+
</ModalBody>
115+
<ModalFooter>
107116
<Button key="close" variant={ButtonVariant.primary} onClick={onClose}>
108117
{t('ai:Close')}
109-
</Button>,
110-
]}
111-
onClose={onClose}
112-
variant={ModalVariant.medium}
113-
>
114-
<HostRequirements {...getHWRequirements(aiConfigMap)} isSNOCluster={isSNOCluster} />
118+
</Button>
119+
</ModalFooter>
115120
</Modal>
116121
);
117122
};

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@ const NodePoolsTable = ({
174174
onClick: () => setManageHostsOpen(np.metadata?.uid),
175175
},
176176
{
177-
title: t('ai:Remove Nodepool'),
177+
title: t('ai:Remove nodepool'),
178178
onClick: () => setRemoveNodePoolOpen(np.metadata?.uid),
179179
},
180180
],
@@ -228,7 +228,7 @@ const NodePoolsTable = ({
228228
iconPosition="right"
229229
onClick={() => setAddNodePool(true)}
230230
>
231-
{t('ai:Add Nodepool')}
231+
{t('ai:Add nodepool')}
232232
</Button>
233233
</StackItem>
234234
</Stack>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,7 @@ const HostsForm: React.FC<HostsFormProps> = ({
235235
} as NodePoolFormValue);
236236
}}
237237
>
238-
{t('ai:Add Nodepool')}
238+
{t('ai:Add nodepool')}
239239
</Button>
240240
</GridItem>
241241
</>

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

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
11
import * as React from 'react';
2-
import { Alert, Button, Spinner, Stack, StackItem } from '@patternfly/react-core';
32
import {
3+
Alert,
4+
Button,
45
Modal,
5-
ModalBoxBody,
6-
ModalBoxFooter,
6+
ModalBody,
7+
ModalFooter,
8+
ModalHeader,
79
ModalVariant,
8-
} from '@patternfly/react-core/deprecated';
10+
Spinner,
11+
Stack,
12+
StackItem,
13+
} from '@patternfly/react-core';
914
import { Formik } from 'formik';
1015

1116
import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
@@ -72,14 +77,8 @@ const AddNodePoolModal = ({
7277
};
7378

7479
return (
75-
<Modal
76-
aria-label="add node pool dialog"
77-
title={t('ai:Add Nodepool')}
78-
isOpen
79-
onClose={onClose}
80-
variant={ModalVariant.medium}
81-
hasNoBodyWrapper
82-
>
80+
<Modal aria-label="add node pool dialog" isOpen onClose={onClose} variant={ModalVariant.medium}>
81+
<ModalHeader title={t('ai:Add nodepool')} />
8382
<Formik<NodePoolFormValues>
8483
initialValues={{
8584
nodePoolName: `nodepool-${hostedCluster.metadata?.name || ''}-${Math.floor(
@@ -97,7 +96,7 @@ const AddNodePoolModal = ({
9796
>
9897
{({ isSubmitting, isValid, submitForm }) => (
9998
<>
100-
<ModalBoxBody>
99+
<ModalBody>
101100
<Stack hasGutter>
102101
<StackItem>
103102
<NodePoolForm agents={namespaceAgents} hostedCluster={hostedCluster} />
@@ -108,8 +107,8 @@ const AddNodePoolModal = ({
108107
</StackItem>
109108
)}
110109
</Stack>
111-
</ModalBoxBody>
112-
<ModalBoxFooter>
110+
</ModalBody>
111+
<ModalFooter>
113112
<Button
114113
// eslint-disable-next-line @typescript-eslint/no-misused-promises
115114
onClick={submitForm}
@@ -121,7 +120,7 @@ const AddNodePoolModal = ({
121120
<Button variant="link" onClick={onClose}>
122121
{t('ai:Cancel')}
123122
</Button>
124-
</ModalBoxFooter>
123+
</ModalFooter>
125124
</>
126125
)}
127126
</Formik>

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

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
1-
import { Alert, Button, Spinner, Stack, StackItem } from '@patternfly/react-core';
21
import {
2+
Alert,
3+
Button,
34
Modal,
4-
ModalBoxBody,
5-
ModalBoxFooter,
5+
ModalBody,
6+
ModalFooter,
7+
ModalHeader,
68
ModalVariant,
7-
} from '@patternfly/react-core/deprecated';
9+
Spinner,
10+
Stack,
11+
StackItem,
12+
} from '@patternfly/react-core';
813
import { Formik, FormikConfig } from 'formik';
914
import * as React from 'react';
1015
import { AgentK8sResource } from '../../../types';
@@ -109,14 +114,8 @@ const ManageHostsModal = ({
109114
};
110115

111116
return (
112-
<Modal
113-
aria-label="Manage hosts dialog"
114-
title={t('ai:Manage hosts')}
115-
isOpen
116-
onClose={onClose}
117-
variant={ModalVariant.medium}
118-
hasNoBodyWrapper
119-
>
117+
<Modal aria-label="Manage hosts dialog" isOpen onClose={onClose} variant={ModalVariant.medium}>
118+
<ModalHeader title={t('ai:Manage hosts')} />
120119
<Formik<NodePoolFormValues>
121120
initialValues={{
122121
nodePoolName: nodePool.metadata?.name || '',
@@ -135,7 +134,7 @@ const ManageHostsModal = ({
135134
>
136135
{({ isSubmitting, isValid, submitForm }) => (
137136
<>
138-
<ModalBoxBody>
137+
<ModalBody>
139138
<Stack hasGutter>
140139
<StackItem>
141140
<NodePoolForm
@@ -151,8 +150,8 @@ const ManageHostsModal = ({
151150
</StackItem>
152151
)}
153152
</Stack>
154-
</ModalBoxBody>
155-
<ModalBoxFooter>
153+
</ModalBody>
154+
<ModalFooter>
156155
<Button
157156
// eslint-disable-next-line @typescript-eslint/no-misused-promises
158157
onClick={submitForm}
@@ -164,7 +163,7 @@ const ManageHostsModal = ({
164163
<Button variant="link" onClick={onClose}>
165164
{t('ai:Cancel')}
166165
</Button>
167-
</ModalBoxFooter>
166+
</ModalFooter>
168167
</>
169168
)}
170169
</Formik>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ const NodePoolForm = ({ agents, nodePool, hostedCluster, agentMachines }: NodePo
9494
/>
9595
</GridItem>
9696
<GridItem>
97-
<DescriptionList isHorizontal>
97+
<DescriptionList isHorizontal horizontalTermWidthModifier={{ default: '17ch' }}>
9898
<DescriptionListGroup>
9999
<DescriptionListTerm>{t('ai:OpenShift version')}</DescriptionListTerm>
100100
<DescriptionListDescription>

0 commit comments

Comments
 (0)