Skip to content

Commit 7715df2

Browse files
rszwajkorszwajko
committed
Switch to PF4 Alert
1 parent b497e32 commit 7715df2

File tree

8 files changed

+67
-39
lines changed

8 files changed

+67
-39
lines changed

‎src/components/CounterAlert.js

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import React from 'react'
33
import PropTypes from 'prop-types'
44

5-
import { Alert } from 'patternfly-react'
5+
import { Alert, AlertActionCloseButton } from '@patternfly/react-core'
66
import style from './sharedStyle.css'
77

88
class CounterAlert extends React.Component {
@@ -45,10 +45,14 @@ class CounterAlert extends React.Component {
4545
render () {
4646
const { title, type, children } = this.props
4747
return this.state.showAlert && (
48-
<Alert type={type} onDismiss={this.handleDismiss} className={style['text-align-left']}>
49-
{title}
50-
{children}
51-
</Alert>
48+
<Alert
49+
variant={type}
50+
onTimeout={this.handleDismiss}
51+
actionClose={<AlertActionCloseButton onClose={this.handleDismiss} />}
52+
className={style['text-align-left']}
53+
title={title}
54+
children={children}
55+
/>
5256
)
5357
}
5458
}

‎src/components/CreateVmWizard/steps/SummaryReview.js

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React, { useContext } from 'react'
22
import PropTypes from 'prop-types'
33
import { connect } from 'react-redux'
4-
import { Alert, Icon, Spinner, Label } from 'patternfly-react'
4+
import { Icon, Spinner, Label } from 'patternfly-react'
5+
import { Alert } from '@patternfly/react-core'
56
import { InfoCircleIcon } from '@patternfly/react-icons'
67

78
import { MsgContext, enumMsg } from '_/intl'
@@ -290,13 +291,13 @@ const SummaryReview = ({
290291
{msg.createVmWizardReviewSuccess()}
291292
</div>
292293
{ progress.messages && progress.messages.length > 0 && (
293-
<Alert type='success' >
294-
{progress.messages.map((message, index) => (
295-
<div key={`message-${index}`}>
296-
{ message }
297-
</div>
298-
)
299-
)}
294+
<Alert variant='success' isInline title={msg.messages()}>{
295+
progress.messages.map((message, index) => (
296+
<div key={`message-${index}`}>
297+
{ message }
298+
</div>
299+
))
300+
}
300301
</Alert>
301302
)}
302303
</div>
@@ -310,13 +311,13 @@ const SummaryReview = ({
310311
{msg.createVmWizardReviewError()}
311312
</div>
312313
{ progress.messages && progress.messages.length > 0 && (
313-
<Alert type='error' >
314-
{progress.messages.map((message, index) => (
315-
<div key={`message-${index}`}>
316-
{ message }
317-
</div>
318-
)
319-
)}
314+
<Alert variant='danger' isInline title={msg.messages()}>{
315+
progress.messages.map((message, index) => (
316+
<div key={`message-${index}`}>
317+
{ message }
318+
</div>
319+
))
320+
}
320321
</Alert>
321322
)}
322323
</div>

‎src/components/NavigationConfirmationModal/index.js

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useContext } from 'react'
22
import PropTypes from 'prop-types'
3-
import { Modal, Button, Alert } from 'patternfly-react'
3+
import { Modal, Button } from 'patternfly-react'
4+
import { Alert } from '@patternfly/react-core'
45
import { MsgContext } from '_/intl'
56

67
const NavigationConfirmationModal = ({ show, onYes, onNo, additionalNote }) => {
@@ -13,8 +14,15 @@ const NavigationConfirmationModal = ({ show, onYes, onNo, additionalNote }) => {
1314
<Modal.Title id={`${idPrefix}-title`}>{msg.unsavedChangesTitle()}</Modal.Title>
1415
</Modal.Header>
1516
<Modal.Body>
16-
<Alert type='warning' id={`${idPrefix}-body-text`}>{msg.unsavedChangesConfirmMessage()}</Alert>
17-
{additionalNote}
17+
<Alert
18+
variant='warning'
19+
isInline
20+
isPlain
21+
id={`${idPrefix}-body-text`}
22+
title={msg.unsavedChangesConfirmMessage()}
23+
>
24+
{additionalNote}
25+
</Alert>
1826
</Modal.Body>
1927
<Modal.Footer>
2028
<Button id={`${idPrefix}-button-no`} onClick={onNo} bsStyle='default'>{msg.no()}</Button>

‎src/components/Settings/Settings.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ const Settings = ({
130130
{ partialSave.show && (
131131
<CounterAlert
132132
timeout={10}
133-
type='error'
133+
type='danger'
134134
title={<p>{msg.failedToSaveChangesToFields()}</p>}
135135
onDismiss={() => resetNotifications(setShowPartialSave, { show: false, fields: [] })}
136136
>
@@ -140,7 +140,7 @@ const Settings = ({
140140
{ showCompleteFailure && (
141141
<CounterAlert
142142
timeout={10}
143-
type='error'
143+
type='danger'
144144
title={msg.failedToSaveChanges()}
145145
onDismiss={() => resetNotifications(setShowCompleteFailure, false)}
146146
/>

‎src/components/VmDetails/cards/DetailsCard/index.js

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,13 +34,12 @@ import {
3434
} from '_/components/utils'
3535

3636
import {
37-
Alert,
3837
ExpandCollapse,
3938
FormControl,
4039
Icon,
4140
} from 'patternfly-react'
4241

43-
import { Switch } from '@patternfly/react-core'
42+
import { Switch, Alert } from '@patternfly/react-core'
4443

4544
import SelectBox from '_/components/SelectBox'
4645
import BaseCard from '../../BaseCard'
@@ -1094,9 +1093,13 @@ class DetailsCard extends React.Component {
10941093
) }
10951094

10961095
{ correlatedMessages && correlatedMessages.size > 0 && correlatedMessages.map((message, key) => (
1097-
<Alert key={`user-message-${key}`} type='error' style={{ margin: '5px 0 0 0' }}>
1098-
{buildMessageFromRecord(message.toJS(), msg)}
1099-
</Alert>
1096+
<Alert
1097+
key={`user-message-${key}`}
1098+
variant='danger'
1099+
isInline
1100+
style={{ margin: '5px 0 0 0' }}
1101+
title={buildMessageFromRecord(message.toJS(), msg)}
1102+
/>
11001103
))}
11011104
</>
11021105
)

‎src/components/VmDetails/cards/OverviewCard/index.js

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ import { generateUnique, buildMessageFromRecord } from '_/helpers'
99
import { formatUptimeDuration } from '_/utils'
1010
import { editVm } from '_/actions'
1111

12-
import { FormControl, FormGroup, HelpBlock, Alert, Checkbox } from 'patternfly-react'
12+
import { FormControl, FormGroup, HelpBlock, Checkbox } from 'patternfly-react'
13+
import { Alert } from '@patternfly/react-core'
1314

1415
import BaseCard from '../../BaseCard'
1516
import VmIcon from '../../../VmIcon'
@@ -298,9 +299,14 @@ class OverviewCard extends React.Component {
298299

299300
{ correlatedMessages && correlatedMessages.size > 0 &&
300301
correlatedMessages.map((message, key) => (
301-
<Alert key={`user-message-${key}`} type='error' style={{ margin: '5px 0 0 0' }} id={`${idPrefix}-alert`}>
302-
{buildMessageFromRecord(message.toJS(), msg)}
303-
</Alert>
302+
<Alert
303+
key={`user-message-${key}`}
304+
variant='danger'
305+
isInline
306+
style={{ margin: '5px 0 0 0' }}
307+
id={`${idPrefix}-alert`}
308+
title={buildMessageFromRecord(message.toJS(), msg)}
309+
/>
304310
)
305311
)
306312
}

‎src/components/VmDetails/cards/SnapshotsCard/NewSnapshotModal.js

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { connect } from 'react-redux'
55
import { addVmSnapshot } from './actions'
66

77
import {
8-
Alert,
98
Button,
109
Col,
1110
Form,
@@ -17,6 +16,7 @@ import {
1716
Modal,
1817
noop,
1918
} from 'patternfly-react'
19+
import { Alert } from '@patternfly/react-core'
2020
import { withMsg } from '_/intl'
2121
import style from './style.css'
2222

@@ -94,8 +94,13 @@ class NewSnapshotModal extends Component {
9494
<Modal.Body>
9595
<Form onSubmit={this.handleSave} horizontal>
9696
<Col sm={12}>
97-
<Alert type='info'>
98-
{ msg.snapshotInfo() }
97+
<Alert
98+
variant='info'
99+
isInline
100+
title={msg.details()}
101+
style={{ 'margin-bottom': '10px' }}
102+
>
103+
{msg.snapshotInfo() }
99104
</Alert>
100105
</Col>
101106
<FormGroup bsClass='form-group col-sm-12 required' validationState={this.state.emptyDescription ? 'error' : null}>

‎src/components/VmDetails/index.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react'
22
import PropTypes from 'prop-types'
3-
import { Alert, Card, CardBody } from 'patternfly-react'
3+
import { Card, CardBody } from 'patternfly-react'
4+
import { Alert } from '@patternfly/react-core'
45
import { withMsg } from '_/intl'
56

67
import styles from './style.css'
@@ -63,7 +64,7 @@ class VmDetailsContainer extends React.Component {
6364
<Col>
6465
<Card>
6566
<CardBody>
66-
<Alert type='info' style={{ margin: '0' }}>{msg.vmHasPendingConfigurationChanges()}</Alert>
67+
<Alert variant='info' isInline title={msg.vmHasPendingConfigurationChanges()}/>
6768
</CardBody>
6869
</Card>
6970
</Col>

0 commit comments

Comments
 (0)