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

branding/style.css

@@ -5,6 +5,6 @@ put anything here that should override styles
 from brand.css.
 *********************************************/
 
-#about-modal a {
+#about-modal a, #about-modal, #about-modal button {
     color: #ffffff;
 }

src/components/About.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { withMsg } from '_/intl'
 
-import { Modal } from 'patternfly-react'
+import { Modal, ModalVariant } from '@patternfly/react-core'
 import Product from '../version'
 import { fixedStrings } from '../branding'
 
@@ -56,41 +56,45 @@ class AboutDialog extends React.Component {
     const docLink = msg.aboutDialogDocumentationLink({
       link: `<a href='${fixedStrings.DOCUMENTATION_LINK}' target='_blank' id='${idPrefix}-documentation-link'><strong>${msg.aboutDialogDocumentationText()}</strong></a>`,
     })
+    const closeModal = () => this.setState({ openModal: false })
 
     return (
       <>
-        <a href='#' id='about-modal' onClick={() => this.setState({ openModal: true })}>{msg.about()}</a>
+        <a href='#' id='about-modal-link' onClick={() => this.setState({ openModal: true })}>{msg.about()}</a>
         { this.state.openModal && (
-          <Modal id={`${idPrefix}-modal`} contentClassName='about-modal-pf obrand_aboutBackground' onHide={() => this.setState({ openModal: false })} show>
-            <Modal.Header>
-              <Modal.CloseButton onClick={() => this.setState({ openModal: false })} />
-            </Modal.Header>
-            <Modal.Body>
-              <h1 id={`${idPrefix}-title`}>{fixedStrings.BRAND_NAME} {msg.vmPortal()}</h1>
-              <div className='product-versions-pf'>
-                <ul className='list-unstyled'>
-                  <li id={`${idPrefix}-version`}>
-                    <div dangerouslySetInnerHTML={{ __html: webUiVersionText }} />
-                  </li>
-                  <li id={`${idPrefix}-apiversion`}>
-                    <div dangerouslySetInnerHTML={{ __html: apiVersionText }} />
-                  </li>
-                  {fixedStrings.DOCUMENTATION_LINK && (
-                    <li id={`${idPrefix}-documentation`}>
-                      <span dangerouslySetInnerHTML={{ __html: docLink }} />
-                    </li>
-                  )}
-                  <li id={`${idPrefix}-issues`}>
-                    <div dangerouslySetInnerHTML={{ __html: reportLink }} />
+          <Modal
+            id={`${idPrefix}-modal`}
+            onClose={closeModal}
+            className='about-modal-pf obrand_aboutBackground'
+            variant={ModalVariant.medium}
+            position='top'
+            isOpen={true}
+
+          >
+
+            <h1 id={`${idPrefix}-title`}>{fixedStrings.BRAND_NAME} {msg.vmPortal()}</h1>
+            <div className='product-versions-pf'>
+              <ul className='list-unstyled'>
+                <li id={`${idPrefix}-version`}>
+                  <div dangerouslySetInnerHTML={{ __html: webUiVersionText }} />
+                </li>
+                <li id={`${idPrefix}-apiversion`}>
+                  <div dangerouslySetInnerHTML={{ __html: apiVersionText }} />
+                </li>
+                {fixedStrings.DOCUMENTATION_LINK && (
+                  <li id={`${idPrefix}-documentation`}>
+                    <span dangerouslySetInnerHTML={{ __html: docLink }} />
                   </li>
-                </ul>
-              </div>
+                )}
+                <li id={`${idPrefix}-issues`}>
+                  <div dangerouslySetInnerHTML={{ __html: reportLink }} />
+                </li>
+              </ul>
+            </div>
+
+            <LegalInfo />
+            <div className='obrand_aboutApplicationLogo' id={`${idPrefix}-applogo`} />
 
-              <LegalInfo />
-            </Modal.Body>
-            <Modal.Footer>
-              <div className='obrand_aboutApplicationLogo' id={`${idPrefix}-applogo`} />
-            </Modal.Footer>
           </Modal>
         )}
       </>

src/components/NavigationConfirmationModal/index.js

@@ -1,33 +1,31 @@
 import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
-import { Modal, Button } from 'patternfly-react'
-import { Alert } from '@patternfly/react-core'
+import { Modal, ModalVariant, Button } from '@patternfly/react-core'
 import { MsgContext } from '_/intl'
 
 const NavigationConfirmationModal = ({ show, onYes, onNo, additionalNote }) => {
   const { msg } = useContext(MsgContext)
   const idPrefix = 'close-dialog-confim'
 
   return (
-    <Modal show={show}>
-      <Modal.Header>
-        <Modal.Title id={`${idPrefix}-title`}>{msg.unsavedChangesTitle()}</Modal.Title>
-      </Modal.Header>
-      <Modal.Body>
-        <Alert
-          variant='warning'
-          isInline
-          isPlain
-          id={`${idPrefix}-body-text`}
-          title={msg.unsavedChangesConfirmMessage()}
-        >
-          {additionalNote}
-        </Alert>
-      </Modal.Body>
-      <Modal.Footer>
-        <Button id={`${idPrefix}-button-no`} onClick={onNo} bsStyle='default'>{msg.no()}</Button>
-        <Button id={`${idPrefix}-button-yes`} onClick={onYes} bsStyle='primary'>{msg.yes()}</Button>
-      </Modal.Footer>
+    <Modal
+      isOpen={show}
+      title={msg.unsavedChangesTitle()}
+      titleIconVariant='warning'
+      variant={ModalVariant.small}
+      onClose={onNo}
+      position='top'
+      actions={[
+        <Button id={`${idPrefix}-button-yes`} key="confirm" variant="primary" onClick={onYes}>
+          {msg.yes()}
+        </Button>,
+        <Button id={`${idPrefix}-button-no`} key="cancel" variant="link" onClick={onNo}>
+          {msg.no()}
+        </Button>,
+      ]}
+    >
+      <p className='lead'>{msg.unsavedChangesConfirmMessage()}</p>
+      <p>{additionalNote}</p>
     </Modal>
   )
 }

src/components/Settings/style.css

@@ -64,6 +64,7 @@
 
 .section-list{
     list-style-type: disc;
+    padding-left: var(--pf-c-modal-box__body--PaddingLeft);;
 }
 
 .field-list{

src/components/VmActions/ConfirmationModal.js

@@ -1,52 +1,45 @@
 import React, { useContext } from 'react'
 import PropsTypes from 'prop-types'
-import { Modal, Icon } from 'patternfly-react'
+import { Modal, ModalVariant, Button } from '@patternfly/react-core'
 import { MsgContext } from '_/intl'
 
 const btnPropType = PropsTypes.shape({
   title: PropsTypes.string,
   onClick: PropsTypes.func,
 })
 
-const ConfirmationModal = ({ show, title, confirm, body, subContent, onClose, extra, accessibleDescription }) => {
+const ConfirmationModal = ({ show, title, confirm, body, subContent, onClose, extra }) => {
   const { msg } = useContext(MsgContext)
   return (
-    <Modal onHide={onClose} show={show} className='message-dialog-pf' aria-describedby={accessibleDescription}>
-      <Modal.Header>
-        <button
-          className='close'
-          onClick={onClose}
-        >
-          <span className='pficon pficon-close' title='Close' />
-        </button>
-        <Modal.Title>{title}</Modal.Title>
-      </Modal.Header>
-      <Modal.Body>
-        {
+    <Modal
+      title={title}
+      isOpen={show}
+      variant={ModalVariant.small}
+      titleIconVariant='warning'
+      position='top'
+      onClose={onClose}
+      actions={[
+        <Button key='confirm' variant={confirm.type || 'primary'} onClick={() => { confirm.onClick(); onClose() }}>{confirm.title}</Button>,
+        extra && <Button key='extra' variant='secondary' onClick={() => { extra.onClick(); onClose() }}>{extra.title}</Button>,
+        <Button key='cancel' variant='link' onClick={onClose}>{msg.cancel()}</Button>,
+      ].filter(Boolean)}
+    >
+      {
           typeof body === 'string'
             ? (
               <>
-                <Icon type='pf' name='warning-triangle-o' />
-                <div id={accessibleDescription}>
-                  <p className='lead'>
-                    { body }
-                  </p>
-                  {
+                <p className='lead'>
+                  { body }
+                </p>
+                {
                   subContent && typeof subContent === 'string'
                     ? <p>{ subContent }</p>
                     : subContent
                 }
-                </div>
               </>
             )
             : body
         }
-      </Modal.Body>
-      <Modal.Footer>
-        { extra && <button className='btn btn-info' onClick={() => { extra.onClick(); onClose() }}>{extra.title}</button> }
-        <button className={`btn ${confirm ? 'btn-default' : 'btn-info'}`} onClick={onClose}>{msg.cancel()}</button>
-        { confirm && <button className={`btn ${confirm.type ? `btn-${confirm.type}` : 'btn-info'}`} onClick={() => { confirm.onClick(); onClose() }}>{confirm.title}</button> }
-      </Modal.Footer>
     </Modal>
   )
 }
@@ -56,10 +49,9 @@ ConfirmationModal.propTypes = {
   title: PropsTypes.string.isRequired,
 
   onClose: PropsTypes.func,
-  accessibleDescription: PropsTypes.string,
   confirm: PropsTypes.shape({
     title: PropsTypes.string,
-    type: PropsTypes.oneOf(['primary', 'success', 'info', 'warning', 'danger']),
+    type: PropsTypes.oneOf(['primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'link' | 'plain' | 'control']),
     onClick: PropsTypes.func,
   }),
   extra: btnPropType,

src/components/VmActions/index.js

@@ -176,7 +176,7 @@ class VmActions extends React.Component {
         className: 'btn btn-default',
         id: `${idPrefix}-button-shutdown`,
         confirmation: (
-          <ConfirmationModal accessibleDescription='one'
+          <ConfirmationModal
             title={msg.shutdownVm()}
             body={msg.shutdownVmQuestion()}
             confirm={{ title: msg.yes(), onClick: () => onShutdown() }}

src/components/VmConsole/VmConsoleInstructionsModal.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Icon, Modal, Button } from 'patternfly-react'
+import { Modal, Button, ModalVariant } from '@patternfly/react-core'
 import style from './style.css'
 import { withMsg } from '../../intl'
 import PropTypes from 'prop-types'
@@ -23,41 +23,33 @@ class VmConsoleInstructionsModal extends React.Component {
   render () {
     const { disabled, msg } = this.props
     return (
-      <div className={style['console-modal-box']}>
-        <Button bsStyle='link' onClick={this.open} className={style['color-blue']} disabled={disabled}>
+      <>
+        <Button variant='link' onClick={this.open} isDisabled={disabled}>
           { msg.consoleInstructions() }
         </Button>
 
-        <Modal show={this.state.showModal} onHide={this.close} dialogClassName={style['create-snapshot-container']} id={'vm-console-connection-open-modal'}>
-          <Modal.Header>
-            <button
-              className='close'
-              onClick={this.close}
-              aria-hidden='true'
-              aria-label='Close'
-              id='vm-console-connection-open-modal-close'
-            >
-              <Icon type='pf' name='close' />
-            </button>
-            <Modal.Title>{ msg.consoleInstructions() }</Modal.Title>
-          </Modal.Header>
-          <Modal.Body>
-            <div className={style['modal-container']}>
-              <h3>{ msg.remoteViewerConnection() }</h3>
-              <div>{ msg.usingRemoteViewer() }</div>
-              <div>{ msg.remoteViewerAvailable() }</div>
-              <div className={style['console-detail-container']}>
-                <dl>
-                  <dt>RHEL, CentOS</dt><dd>sudo yum install virt-viewer</dd>
-                  <dt>Fedora</dt><dd>sudo dnf install virt-viewer</dd>
-                  <dt>Ubuntu, Debian</dt><dd>sudo apt-get install virt-viewer</dd>
-                  <dt>Windows</dt><dd>{ msg.downloadVirtManagerMSI() }</dd>
-                </dl>
-              </div>
+        <Modal
+          isOpen={this.state.showModal}
+          variant={ModalVariant.medium}
+          id={'vm-console-connection-open-modal'}
+          onClose={this.close}
+          title={ msg.consoleInstructions() }
+        >
+          <>
+            <h3>{ msg.remoteViewerConnection() }</h3>
+            <p>{ msg.usingRemoteViewer() }</p>
+            <p>{ msg.remoteViewerAvailable() }</p>
+            <div className={style['console-detail-container']}>
+              <dl>
+                <dt>RHEL, CentOS</dt><dd>sudo yum install virt-viewer</dd>
+                <dt>Fedora</dt><dd>sudo dnf install virt-viewer</dd>
+                <dt>Ubuntu, Debian</dt><dd>sudo apt-get install virt-viewer</dd>
+                <dt>Windows</dt><dd>{ msg.downloadVirtManagerMSI() }</dd>
+              </dl>
             </div>
-          </Modal.Body>
+          </>
         </Modal>
-      </div>
+      </>
     )
   }
 }

src/components/VmConsole/style.css

@@ -37,10 +37,6 @@
     padding-top: 2px;
 }
 
-.console-modal-box {
-	display: inline-block;
-}
-
 .console-dropdown-label {
 	margin-right: 10px;
 }