Merge pull request #1537 from rszwajko/modalPF4

Switch to PF4 Modal

branding/style.css

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

src/components/About.js → src/components/About/About.js

@@ -3,9 +3,10 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { withMsg } from '_/intl'
 
-import { Modal } from 'patternfly-react'
-import Product from '../version'
-import { fixedStrings } from '../branding'
+import { Modal, ModalVariant } from '@patternfly/react-core'
+import Product from '_/version'
+import { fixedStrings } from '_/branding'
+import styles from './styles.css'
 
 const LegalInfo = () => {
   const idPrefix = 'about-legal'
@@ -56,41 +57,46 @@ 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 })
+    const openModal = () => this.setState({ openModal: true })
 
     return (
       <>
-        <a href='#' id='about-modal' onClick={() => this.setState({ openModal: true })}>{msg.about()}</a>
+        <a href='#' id='about-modal-link' onClick={openModal}>{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={`${styles['about-modal']} obrand_aboutBackground`}
+            variant={ModalVariant.medium}
+            position='top'
+            isOpen={true}
+
+          >
+
+            <h1 id={`${idPrefix}-title`}>{fixedStrings.BRAND_NAME} {msg.vmPortal()}</h1>
+            <div className={styles['product-versions']}>
+              <ul className={styles['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/About/index.js

@@ -0,0 +1 @@
+export { default } from './About'

src/components/About/styles.css

@@ -0,0 +1,37 @@
+/** based on PF3 about-modal-pf **/
+.about-modal {
+    color: #fff;
+    padding-bottom: 16px;
+    padding-top: 16px;
+    padding-left: 40px;
+    padding-right: 40px;
+}
+
+/** based on PF3 product-versions-pf **/
+.product-versions {
+    margin-bottom: 30px;
+    margin-top: 30px;
+}
+
+/** based on PF3 list-unstyled **/
+.list-unstyled {
+    padding-left: 0;
+    list-style: none;
+}
+
+
+.about-modal a {
+    color: #ffffff;
+}
+
+/** close button styling */
+.about-modal :global(.pf-c-button.pf-m-plain:hover) {
+    color:#fff;
+}
+
+.about-modal :global(.pf-c-button.pf-m-plain) {
+    color:darkgrey
+}
+
+
+

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.unsavedChangesConfirmMessage()}
+      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>{msg.allUnsavedWillBeLost()}</p>
+      <p>{additionalNote}</p>
     </Modal>
   )
 }

src/components/SessionActivityTracker.js

@@ -1,12 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import { MessageDialog, Icon } from 'patternfly-react'
 
-import style from './sharedStyle.css'
 import { withMsg } from '_/intl'
 
 import { logout } from '_/actions'
+import ConfirmationModal from './VmActions/ConfirmationModal'
 
 const TIME_TO_DISPLAY_MODAL = 30 // 30 seconds
 
@@ -71,22 +70,22 @@ class SessionActivityTracker extends React.Component {
     const { config, onLogout, msg } = this.props
     if (this.state.showTimeoutModal) {
       return (
-        <MessageDialog
+        <ConfirmationModal
           show={this.state.counter > 0 && this.state.counter <= TIME_TO_DISPLAY_MODAL}
-          primaryAction={() => this.setState({ showTimeoutModal: false, counter: config.get('userSessionTimeoutInterval') })}
-          secondaryAction={onLogout}
-          onHide={onLogout}
-          primaryContent={<p className='lead'>{ msg.sessionExpired() }</p>}
-          secondaryContent={(
+          onClose={onLogout}
+          title={msg.continueWithSession()}
+          body={msg.sessionExpired() }
+          subContent={(
             <>
               <p>{ msg.logOutInSecondsSecondary({ seconds: this.state.counter }) }</p>
               <p>{ msg.continueSessionSecondary() }</p>
             </>
           )}
-          primaryActionButtonContent={msg.continueSessionBtn()}
-          secondaryActionButtonContent={msg.logOut()}
-          className={style['header-remover']}
-          icon={<Icon type='pf' name='warning-triangle-o' />}
+          closeTitle={msg.logOut()}
+          confirm={{
+            onClick: () => this.setState({ showTimeoutModal: false, counter: config.get('userSessionTimeoutInterval') }),
+            title: msg.continueSessionBtn(),
+          }}
         />
       )
     }

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, variant = 'warning', closeTitle }) => {
   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={variant}
+      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}>{closeTitle ?? msg.cancel()}</Button>,
+      ].filter(Boolean)}
+    >
+      {
           typeof body === 'string'
             ? (
               <>
-                <Icon type='pf' name='warning-triangle-o' />
-                <div id={accessibleDescription}>
-                  <p className='lead'>
-                    { body }
-                  </p>
-                  {
+                <p>
+                  { 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,15 +49,16 @@ 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,
+  closeTitle: PropsTypes.string,
   body: PropsTypes.oneOfType([PropsTypes.node, PropsTypes.string]).isRequired,
   subContent: PropsTypes.oneOfType([PropsTypes.node, PropsTypes.string]),
+  variant: PropsTypes.oneOf(['success', 'danger', 'warning', 'info', 'default']),
 }
 
 export default ConfirmationModal

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() }}