Skip to content

Commit aab2a7e

Browse files
rszwajkorszwajko
committed
Switch to PF4 Modal
1. NavigationConfirmationModal - use titleIconVariant='warning' instead of alert - use "lead" class on first paragraph for consistency 2. About modal 3. VmConsoleInstructionsModal 4. VmDetails related modals: Snapshots, Nics, Discs
1 parent be3b751 commit aab2a7e

File tree

14 files changed

+437
-489
lines changed

14 files changed

+437
-489
lines changed

‎branding/style.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,6 @@ put anything here that should override styles
55
from brand.css.
66
*********************************************/
77

8-
#about-modal a {
8+
#about-modal a, #about-modal, #about-modal button {
99
color: #ffffff;
1010
}

‎src/components/About.js

Lines changed: 34 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
33
import { connect } from 'react-redux'
44
import { withMsg } from '_/intl'
55

6-
import { Modal } from 'patternfly-react'
6+
import { Modal, ModalVariant } from '@patternfly/react-core'
77
import Product from '../version'
88
import { fixedStrings } from '../branding'
99

@@ -56,41 +56,45 @@ class AboutDialog extends React.Component {
5656
const docLink = msg.aboutDialogDocumentationLink({
5757
link: `<a href='${fixedStrings.DOCUMENTATION_LINK}' target='_blank' id='${idPrefix}-documentation-link'><strong>${msg.aboutDialogDocumentationText()}</strong></a>`,
5858
})
59+
const closeModal = () => this.setState({ openModal: false })
5960

6061
return (
6162
<>
62-
<a href='#' id='about-modal' onClick={() => this.setState({ openModal: true })}>{msg.about()}</a>
63+
<a href='#' id='about-modal-link' onClick={() => this.setState({ openModal: true })}>{msg.about()}</a>
6364
{ this.state.openModal && (
64-
<Modal id={`${idPrefix}-modal`} contentClassName='about-modal-pf obrand_aboutBackground' onHide={() => this.setState({ openModal: false })} show>
65-
<Modal.Header>
66-
<Modal.CloseButton onClick={() => this.setState({ openModal: false })} />
67-
</Modal.Header>
68-
<Modal.Body>
69-
<h1 id={`${idPrefix}-title`}>{fixedStrings.BRAND_NAME} {msg.vmPortal()}</h1>
70-
<div className='product-versions-pf'>
71-
<ul className='list-unstyled'>
72-
<li id={`${idPrefix}-version`}>
73-
<div dangerouslySetInnerHTML={{ __html: webUiVersionText }} />
74-
</li>
75-
<li id={`${idPrefix}-apiversion`}>
76-
<div dangerouslySetInnerHTML={{ __html: apiVersionText }} />
77-
</li>
78-
{fixedStrings.DOCUMENTATION_LINK && (
79-
<li id={`${idPrefix}-documentation`}>
80-
<span dangerouslySetInnerHTML={{ __html: docLink }} />
81-
</li>
82-
)}
83-
<li id={`${idPrefix}-issues`}>
84-
<div dangerouslySetInnerHTML={{ __html: reportLink }} />
65+
<Modal
66+
id={`${idPrefix}-modal`}
67+
onClose={closeModal}
68+
className='about-modal-pf obrand_aboutBackground'
69+
variant={ModalVariant.medium}
70+
position='top'
71+
isOpen={true}
72+
73+
>
74+
75+
<h1 id={`${idPrefix}-title`}>{fixedStrings.BRAND_NAME} {msg.vmPortal()}</h1>
76+
<div className='product-versions-pf'>
77+
<ul className='list-unstyled'>
78+
<li id={`${idPrefix}-version`}>
79+
<div dangerouslySetInnerHTML={{ __html: webUiVersionText }} />
80+
</li>
81+
<li id={`${idPrefix}-apiversion`}>
82+
<div dangerouslySetInnerHTML={{ __html: apiVersionText }} />
83+
</li>
84+
{fixedStrings.DOCUMENTATION_LINK && (
85+
<li id={`${idPrefix}-documentation`}>
86+
<span dangerouslySetInnerHTML={{ __html: docLink }} />
8587
</li>
86-
</ul>
87-
</div>
88+
)}
89+
<li id={`${idPrefix}-issues`}>
90+
<div dangerouslySetInnerHTML={{ __html: reportLink }} />
91+
</li>
92+
</ul>
93+
</div>
94+
95+
<LegalInfo />
96+
<div className='obrand_aboutApplicationLogo' id={`${idPrefix}-applogo`} />
8897

89-
<LegalInfo />
90-
</Modal.Body>
91-
<Modal.Footer>
92-
<div className='obrand_aboutApplicationLogo' id={`${idPrefix}-applogo`} />
93-
</Modal.Footer>
9498
</Modal>
9599
)}
96100
</>

‎src/components/NavigationConfirmationModal/index.js

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,31 @@
11
import React, { useContext } from 'react'
22
import PropTypes from 'prop-types'
3-
import { Modal, Button } from 'patternfly-react'
4-
import { Alert } from '@patternfly/react-core'
3+
import { Modal, ModalVariant, Button } from '@patternfly/react-core'
54
import { MsgContext } from '_/intl'
65

76
const NavigationConfirmationModal = ({ show, onYes, onNo, additionalNote }) => {
87
const { msg } = useContext(MsgContext)
98
const idPrefix = 'close-dialog-confim'
109

1110
return (
12-
<Modal show={show}>
13-
<Modal.Header>
14-
<Modal.Title id={`${idPrefix}-title`}>{msg.unsavedChangesTitle()}</Modal.Title>
15-
</Modal.Header>
16-
<Modal.Body>
17-
<Alert
18-
variant='warning'
19-
isInline
20-
isPlain
21-
id={`${idPrefix}-body-text`}
22-
title={msg.unsavedChangesConfirmMessage()}
23-
>
24-
{additionalNote}
25-
</Alert>
26-
</Modal.Body>
27-
<Modal.Footer>
28-
<Button id={`${idPrefix}-button-no`} onClick={onNo} bsStyle='default'>{msg.no()}</Button>
29-
<Button id={`${idPrefix}-button-yes`} onClick={onYes} bsStyle='primary'>{msg.yes()}</Button>
30-
</Modal.Footer>
11+
<Modal
12+
isOpen={show}
13+
title={msg.unsavedChangesTitle()}
14+
titleIconVariant='warning'
15+
variant={ModalVariant.small}
16+
onClose={onNo}
17+
position='top'
18+
actions={[
19+
<Button id={`${idPrefix}-button-yes`} key="confirm" variant="primary" onClick={onYes}>
20+
{msg.yes()}
21+
</Button>,
22+
<Button id={`${idPrefix}-button-no`} key="cancel" variant="link" onClick={onNo}>
23+
{msg.no()}
24+
</Button>,
25+
]}
26+
>
27+
<p className='lead'>{msg.unsavedChangesConfirmMessage()}</p>
28+
<p>{additionalNote}</p>
3129
</Modal>
3230
)
3331
}

‎src/components/Settings/style.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@
6464

6565
.section-list{
6666
list-style-type: disc;
67+
padding-left: var(--pf-c-modal-box__body--PaddingLeft);;
6768
}
6869

6970
.field-list{

‎src/components/VmActions/ConfirmationModal.js

Lines changed: 21 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,45 @@
11
import React, { useContext } from 'react'
22
import PropsTypes from 'prop-types'
3-
import { Modal, Icon } from 'patternfly-react'
3+
import { Modal, ModalVariant, Button } from '@patternfly/react-core'
44
import { MsgContext } from '_/intl'
55

66
const btnPropType = PropsTypes.shape({
77
title: PropsTypes.string,
88
onClick: PropsTypes.func,
99
})
1010

11-
const ConfirmationModal = ({ show, title, confirm, body, subContent, onClose, extra, accessibleDescription }) => {
11+
const ConfirmationModal = ({ show, title, confirm, body, subContent, onClose, extra }) => {
1212
const { msg } = useContext(MsgContext)
1313
return (
14-
<Modal onHide={onClose} show={show} className='message-dialog-pf' aria-describedby={accessibleDescription}>
15-
<Modal.Header>
16-
<button
17-
className='close'
18-
onClick={onClose}
19-
>
20-
<span className='pficon pficon-close' title='Close' />
21-
</button>
22-
<Modal.Title>{title}</Modal.Title>
23-
</Modal.Header>
24-
<Modal.Body>
25-
{
14+
<Modal
15+
title={title}
16+
isOpen={show}
17+
variant={ModalVariant.small}
18+
titleIconVariant='warning'
19+
position='top'
20+
onClose={onClose}
21+
actions={[
22+
<Button key='confirm' variant={confirm.type || 'primary'} onClick={() => { confirm.onClick(); onClose() }}>{confirm.title}</Button>,
23+
extra && <Button key='extra' variant='secondary' onClick={() => { extra.onClick(); onClose() }}>{extra.title}</Button>,
24+
<Button key='cancel' variant='link' onClick={onClose}>{msg.cancel()}</Button>,
25+
].filter(Boolean)}
26+
>
27+
{
2628
typeof body === 'string'
2729
? (
2830
<>
29-
<Icon type='pf' name='warning-triangle-o' />
30-
<div id={accessibleDescription}>
31-
<p className='lead'>
32-
{ body }
33-
</p>
34-
{
31+
<p className='lead'>
32+
{ body }
33+
</p>
34+
{
3535
subContent && typeof subContent === 'string'
3636
? <p>{ subContent }</p>
3737
: subContent
3838
}
39-
</div>
4039
</>
4140
)
4241
: body
4342
}
44-
</Modal.Body>
45-
<Modal.Footer>
46-
{ extra && <button className='btn btn-info' onClick={() => { extra.onClick(); onClose() }}>{extra.title}</button> }
47-
<button className={`btn ${confirm ? 'btn-default' : 'btn-info'}`} onClick={onClose}>{msg.cancel()}</button>
48-
{ confirm && <button className={`btn ${confirm.type ? `btn-${confirm.type}` : 'btn-info'}`} onClick={() => { confirm.onClick(); onClose() }}>{confirm.title}</button> }
49-
</Modal.Footer>
5043
</Modal>
5144
)
5245
}
@@ -56,10 +49,9 @@ ConfirmationModal.propTypes = {
5649
title: PropsTypes.string.isRequired,
5750

5851
onClose: PropsTypes.func,
59-
accessibleDescription: PropsTypes.string,
6052
confirm: PropsTypes.shape({
6153
title: PropsTypes.string,
62-
type: PropsTypes.oneOf(['primary', 'success', 'info', 'warning', 'danger']),
54+
type: PropsTypes.oneOf(['primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'link' | 'plain' | 'control']),
6355
onClick: PropsTypes.func,
6456
}),
6557
extra: btnPropType,

‎src/components/VmActions/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@ class VmActions extends React.Component {
176176
className: 'btn btn-default',
177177
id: `${idPrefix}-button-shutdown`,
178178
confirmation: (
179-
<ConfirmationModal accessibleDescription='one'
179+
<ConfirmationModal
180180
title={msg.shutdownVm()}
181181
body={msg.shutdownVmQuestion()}
182182
confirm={{ title: msg.yes(), onClick: () => onShutdown() }}

‎src/components/VmConsole/VmConsoleInstructionsModal.js

Lines changed: 23 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import { Icon, Modal, Button } from 'patternfly-react'
2+
import { Modal, Button, ModalVariant } from '@patternfly/react-core'
33
import style from './style.css'
44
import { withMsg } from '../../intl'
55
import PropTypes from 'prop-types'
@@ -23,41 +23,33 @@ class VmConsoleInstructionsModal extends React.Component {
2323
render () {
2424
const { disabled, msg } = this.props
2525
return (
26-
<div className={style['console-modal-box']}>
27-
<Button bsStyle='link' onClick={this.open} className={style['color-blue']} disabled={disabled}>
26+
<>
27+
<Button variant='link' onClick={this.open} isDisabled={disabled}>
2828
{ msg.consoleInstructions() }
2929
</Button>
3030

31-
<Modal show={this.state.showModal} onHide={this.close} dialogClassName={style['create-snapshot-container']} id={'vm-console-connection-open-modal'}>
32-
<Modal.Header>
33-
<button
34-
className='close'
35-
onClick={this.close}
36-
aria-hidden='true'
37-
aria-label='Close'
38-
id='vm-console-connection-open-modal-close'
39-
>
40-
<Icon type='pf' name='close' />
41-
</button>
42-
<Modal.Title>{ msg.consoleInstructions() }</Modal.Title>
43-
</Modal.Header>
44-
<Modal.Body>
45-
<div className={style['modal-container']}>
46-
<h3>{ msg.remoteViewerConnection() }</h3>
47-
<div>{ msg.usingRemoteViewer() }</div>
48-
<div>{ msg.remoteViewerAvailable() }</div>
49-
<div className={style['console-detail-container']}>
50-
<dl>
51-
<dt>RHEL, CentOS</dt><dd>sudo yum install virt-viewer</dd>
52-
<dt>Fedora</dt><dd>sudo dnf install virt-viewer</dd>
53-
<dt>Ubuntu, Debian</dt><dd>sudo apt-get install virt-viewer</dd>
54-
<dt>Windows</dt><dd>{ msg.downloadVirtManagerMSI() }</dd>
55-
</dl>
56-
</div>
31+
<Modal
32+
isOpen={this.state.showModal}
33+
variant={ModalVariant.medium}
34+
id={'vm-console-connection-open-modal'}
35+
onClose={this.close}
36+
title={ msg.consoleInstructions() }
37+
>
38+
<>
39+
<h3>{ msg.remoteViewerConnection() }</h3>
40+
<p>{ msg.usingRemoteViewer() }</p>
41+
<p>{ msg.remoteViewerAvailable() }</p>
42+
<div className={style['console-detail-container']}>
43+
<dl>
44+
<dt>RHEL, CentOS</dt><dd>sudo yum install virt-viewer</dd>
45+
<dt>Fedora</dt><dd>sudo dnf install virt-viewer</dd>
46+
<dt>Ubuntu, Debian</dt><dd>sudo apt-get install virt-viewer</dd>
47+
<dt>Windows</dt><dd>{ msg.downloadVirtManagerMSI() }</dd>
48+
</dl>
5749
</div>
58-
</Modal.Body>
50+
</>
5951
</Modal>
60-
</div>
52+
</>
6153
)
6254
}
6355
}

‎src/components/VmConsole/style.css

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,6 @@
3737
padding-top: 2px;
3838
}
3939

40-
.console-modal-box {
41-
display: inline-block;
42-
}
43-
4440
.console-dropdown-label {
4541
margin-right: 10px;
4642
}

0 commit comments

Comments
 (0)