Skip to content

Commit 30ba9b2

Browse files
openshift-merge-bot[bot]openshift-merge-bot[bot]
authored
Merge pull request #228 from adamviktora/modal-update
CNV-58647: update PatternFly Modal to new version
2 parents 1fc971f + 3b85b3e commit 30ba9b2

File tree

32 files changed

+227
-186
lines changed

32 files changed

+227
-186
lines changed

Diff for: ‎src/styles/modal-action.scss

+5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
.networking-modal {
22
.tabmodal-footer {
33
flex: 1;
4+
gap: 0.5rem;
45
flex-direction: row-reverse;
6+
7+
.pf-v6-c-button:not(:last-child) {
8+
--pf-v6-c-modal-box__footer--c-button--MarginInlineEnd: 0;
9+
}
510
}
611
}

Diff for: ‎src/utils/components/ConfirmModal/ConfirmModal.tsx

+13-20
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { FC } from 'react';
22

3-
import { ActionList, ActionListItem, Button, ButtonVariant } from '@patternfly/react-core';
4-
import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
3+
import { Button, ButtonVariant, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core';
4+
import { Modal, ModalVariant } from '@patternfly/react-core';
55
import { useNetworkingTranslation } from '@utils/hooks/useNetworkingTranslation';
66

77
import '@styles/modal-action.scss';
@@ -30,30 +30,23 @@ const ConfirmModal: FC<ConfirmModalProps> = ({
3030

3131
return (
3232
<Modal
33-
className="ocs-modal networking-modal"
34-
footer={
35-
<ActionList className="tabmodal-footer">
36-
<ActionListItem>
37-
<Button onClick={submit} variant={ButtonVariant.primary}>
38-
{btnText || t('Confirm')}
39-
</Button>
40-
</ActionListItem>
41-
<ActionListItem>
42-
<Button onClick={closeModal} variant="link">
43-
{t('Cancel')}
44-
</Button>
45-
</ActionListItem>
46-
</ActionList>
47-
}
33+
className="networking-modal"
4834
id="confirm-modal"
4935
isOpen
5036
onClose={closeModal}
5137
position={'top'}
52-
title={title}
53-
titleIconVariant="warning"
5438
variant={ModalVariant.small}
5539
>
56-
{message}
40+
<ModalHeader title={title} titleIconVariant="warning" />
41+
<ModalBody>{message}</ModalBody>
42+
<ModalFooter>
43+
<Button onClick={submit} variant={ButtonVariant.primary}>
44+
{btnText || t('Confirm')}
45+
</Button>
46+
<Button onClick={closeModal} variant={ButtonVariant.link}>
47+
{t('Cancel')}
48+
</Button>
49+
</ModalFooter>
5750
</Modal>
5851
);
5952
};

Diff for: ‎src/utils/components/CopyToClipboard/CopyToClipboard.tsx

+9-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,14 @@ import React, { FC, memo, ReactNode, useState } from 'react';
22
import { CopyToClipboard as CTC } from 'react-copy-to-clipboard';
33
import * as _ from 'lodash';
44

5-
import { Button, CodeBlock, CodeBlockAction, CodeBlockCode, Tooltip } from '@patternfly/react-core';
5+
import {
6+
Button,
7+
ButtonVariant,
8+
CodeBlock,
9+
CodeBlockAction,
10+
CodeBlockCode,
11+
Tooltip,
12+
} from '@patternfly/react-core';
613
import { CopyIcon } from '@patternfly/react-icons';
714
import { useNetworkingTranslation } from '@utils/hooks/useNetworkingTranslation';
815

@@ -38,8 +45,7 @@ export const CopyToClipboard: FC<CopyToClipboardProps> = memo((props) => {
3845
</>
3946
}
4047
onMouseEnter={() => setCopied(false)}
41-
type="button"
42-
variant="plain"
48+
variant={ButtonVariant.plain}
4349
/>
4450
</CTC>
4551
</Tooltip>

Diff for: ‎src/utils/components/DetailsItem/DetailsItem.tsx

+7-3
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
Breadcrumb,
1212
BreadcrumbItem,
1313
Button,
14+
ButtonVariant,
1415
Popover,
1516
Split,
1617
SplitItem,
@@ -50,8 +51,7 @@ const EditButton: SFC<EditButtonProps> = (props) => {
5051
iconPosition="end"
5152
isInline
5253
onClick={props.onClick}
53-
type="button"
54-
variant="link"
54+
variant={ButtonVariant.link}
5555
>
5656
{props.children}
5757
</Button>
@@ -99,7 +99,11 @@ export const DetailsItem: FC<DetailsItemProps> = ({
9999
})}
100100
maxWidth="30rem"
101101
>
102-
<Button className="details-item__popover-button" data-test={label} variant="plain">
102+
<Button
103+
className="details-item__popover-button"
104+
data-test={label}
105+
variant={ButtonVariant.plain}
106+
>
103107
{label}
104108
</Button>
105109
</Popover>

Diff for: ‎src/utils/components/LabelSelectorEditor/LabelSelectorEditor.tsx

+3-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { FC } from 'react';
22

3-
import { Button, TextInput, Tooltip } from '@patternfly/react-core';
3+
import { Button, ButtonVariant, TextInput, Tooltip } from '@patternfly/react-core';
44
import { MinusCircleIcon, PlusCircleIcon } from '@patternfly/react-icons';
55
import { useNetworkingTranslation } from '@utils/hooks/useNetworkingTranslation';
66

@@ -78,8 +78,7 @@ const LabelSelectorEditor: FC<LabelSelectorEditorProps> = ({
7878
</>
7979
}
8080
onClick={() => onRemove(index)}
81-
type="button"
82-
variant="plain"
81+
variant={ButtonVariant.plain}
8382
/>
8483
</Tooltip>
8584
</div>
@@ -92,8 +91,7 @@ const LabelSelectorEditor: FC<LabelSelectorEditorProps> = ({
9291
className="pf-m-link--align-left"
9392
icon={<PlusCircleIcon />}
9493
onClick={onAddPair}
95-
type="button"
96-
variant="link"
94+
variant={ButtonVariant.link}
9795
>
9896
{t('Add label')}
9997
</Button>

Diff for: ‎src/utils/components/ListEmptyState/ListErrorState.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Trans } from 'react-i18next';
44
import { ListPageHeader } from '@openshift-console/dynamic-plugin-sdk';
55
import {
66
Alert,
7+
AlertVariant,
78
Button,
89
ButtonVariant,
910
EmptyState,
@@ -41,7 +42,7 @@ const ListErrorState: FC<ListErrorStateProps> = ({ error, title }) => {
4142
</EmptyStateBody>
4243
{!isEmpty(error?.message) && (
4344
<EmptyStateFooter>
44-
<Alert isInline title={t('Error details')} variant="danger">
45+
<Alert isInline title={t('Error details')} variant={AlertVariant.danger}>
4546
{error?.message}
4647
</Alert>
4748
</EmptyStateFooter>

Diff for: ‎src/utils/components/MatchExpression/Expression.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React, { ChangeEvent, FC, Ref, useState } from 'react';
33
import { MatchExpression, Operator } from '@openshift-console/dynamic-plugin-sdk';
44
import {
55
Button,
6+
ButtonVariant,
67
Dropdown,
78
DropdownItem,
89
DropdownList,
@@ -99,8 +100,7 @@ export const Expression: FC<ExpressionProps> = ({
99100
className="key-operator-value__delete-button"
100101
icon={<MinusCircleIcon />}
101102
onClick={onClickRemove}
102-
type="button"
103-
variant="plain"
103+
variant={ButtonVariant.plain}
104104
/>
105105
</FormGroup>
106106
</FormGroup>

Diff for: ‎src/utils/components/MatchExpression/MatchExpression.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { FC } from 'react';
22

33
import { MatchExpression, Operator } from '@openshift-console/dynamic-plugin-sdk';
4-
import { Button } from '@patternfly/react-core';
4+
import { Button, ButtonVariant } from '@patternfly/react-core';
55
import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
66
import { useNetworkingTranslation } from '@utils/hooks/useNetworkingTranslation';
77

@@ -46,8 +46,7 @@ export const MatchExpressions: FC<MatchExpressionsProps> = ({
4646
<Button
4747
icon={<PlusCircleIcon className="co-icon-space-r" />}
4848
onClick={addExpression}
49-
type="button"
50-
variant="link"
49+
variant={ButtonVariant.link}
5150
>
5251
{t('Add expression')}
5352
</Button>

Diff for: ‎src/utils/components/PodSelectorModal/PodSelectorModal.tsx

+46-38
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,17 @@ import {
88
ResourceIcon,
99
} from '@openshift-console/dynamic-plugin-sdk';
1010
import {
11-
ActionList,
12-
ActionListItem,
1311
Alert,
1412
AlertVariant,
1513
Button,
1614
ButtonVariant,
15+
FormGroup,
16+
Modal,
17+
ModalBody,
18+
ModalFooter,
19+
ModalHeader,
20+
ModalVariant,
1721
} from '@patternfly/react-core';
18-
import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
1922
import { useNetworkingTranslation } from '@utils/hooks/useNetworkingTranslation';
2023
import { isEmpty } from '@utils/utils';
2124
import { get } from '@utils/utils/helpers';
@@ -72,52 +75,57 @@ const PodSelectorModal: FC<PodSelectorModalProps> = ({
7275

7376
return (
7477
<Modal
75-
className="ocs-modal networking-modal"
76-
footer={
77-
<ActionList className="tabmodal-footer">
78-
<ActionListItem>
79-
<Button
80-
isDisabled={loading}
81-
isLoading={loading}
82-
onClick={updatePodSelector}
83-
variant={ButtonVariant.primary}
84-
>
85-
{t('Save')}
86-
</Button>
87-
</ActionListItem>
88-
<ActionListItem>
89-
<Button onClick={closeModal} variant={ButtonVariant.link}>
90-
{t('Cancel')}
91-
</Button>
92-
</ActionListItem>
93-
</ActionList>
94-
}
78+
className="networking-modal"
9579
id="pod-selector-modal"
9680
isOpen
9781
onClose={closeModal}
9882
position="top"
99-
title={t('Edit Pod selector')}
10083
variant={ModalVariant.small}
10184
>
102-
<div className="row co-m-form-row">
103-
<div className="col-sm-12">
104-
<label className="control-label" htmlFor="tags-input">
105-
{t('Pod selector for')}{' '}
106-
<ResourceIcon groupVersionKind={getGroupVersionKindForModel(model)} />
107-
{resource?.metadata?.name}
108-
</label>
109-
<SelectorInput
110-
autoFocus
111-
onChange={(newSelector) => setSelector(newSelector)}
112-
tags={selector || []}
113-
/>
85+
<ModalHeader title={t('Edit Pod selector')} />
86+
<ModalBody>
87+
<div className="pf-v6-c-form">
88+
<FormGroup
89+
fieldId="tags-input"
90+
label={
91+
<>
92+
{t('Pod selector for')}{' '}
93+
<ResourceIcon groupVersionKind={getGroupVersionKindForModel(model)} />
94+
{resource?.metadata?.name}
95+
</>
96+
}
97+
>
98+
<SelectorInput
99+
autoFocus
100+
onChange={(newSelector) => setSelector(newSelector)}
101+
tags={selector || []}
102+
/>
103+
</FormGroup>
114104
</div>
115105
{error && (
116-
<Alert title={t('Error')} variant={AlertVariant.danger}>
106+
<Alert
107+
className="pf-v6-u-mt-md"
108+
isInline
109+
title={t('Error')}
110+
variant={AlertVariant.danger}
111+
>
117112
{error}
118113
</Alert>
119114
)}
120-
</div>
115+
</ModalBody>
116+
<ModalFooter className="tabmodal-footer">
117+
<Button
118+
isDisabled={loading}
119+
isLoading={loading}
120+
onClick={updatePodSelector}
121+
variant={ButtonVariant.primary}
122+
>
123+
{t('Save')}
124+
</Button>
125+
<Button onClick={closeModal} variant={ButtonVariant.link}>
126+
{t('Cancel')}
127+
</Button>
128+
</ModalFooter>
121129
</Modal>
122130
);
123131
};

Diff for: ‎src/utils/components/SyncedEditor/SyncedEditor.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { ComponentType, FC, useState } from 'react';
22
import * as _ from 'lodash';
33

44
import { K8sResourceKind } from '@openshift-console/dynamic-plugin-sdk';
5-
import { Alert, Bullseye, Button } from '@patternfly/react-core';
5+
import { Alert, AlertVariant, Bullseye, Button, ButtonVariant } from '@patternfly/react-core';
66
import { useNetworkingTranslation } from '@utils/hooks/useNetworkingTranslation';
77

88
import Loading from '../Loading/Loading';
@@ -120,15 +120,15 @@ export const SyncedEditor: FC<SyncedEditorProps> = ({
120120
className="co-synced-editor__yaml-warning"
121121
isInline
122122
title={t('Invalid YAML cannot be persisted')}
123-
variant="danger"
123+
variant={AlertVariant.danger}
124124
>
125125
{displayConversionError && <p>{switchError}</p>}
126126
<p>{t('Switching to form view will delete any invalid YAML.')}</p>
127-
<Button onClick={onClickYAMLWarningConfirm} variant="danger">
127+
<Button onClick={onClickYAMLWarningConfirm} variant={ButtonVariant.danger}>
128128
{t('Switch and delete')}
129129
</Button>
130130
&nbsp;
131-
<Button onClick={onClickYAMLWarningCancel} variant="secondary">
131+
<Button onClick={onClickYAMLWarningCancel} variant={ButtonVariant.secondary}>
132132
{t('Cancel')}
133133
</Button>
134134
</Alert>

0 commit comments

Comments
 (0)