Replace PF3 MessageDialog

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.attention()}
+          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/VmActions/ConfirmationModal.js

@@ -8,20 +8,20 @@ const btnPropType = PropsTypes.shape({
   onClick: PropsTypes.func,
 })
 
-const ConfirmationModal = ({ show, title, confirm, body, subContent, onClose, extra }) => {
+const ConfirmationModal = ({ show, title, confirm, body, subContent, onClose, extra, variant = 'warning', closeTitle }) => {
   const { msg } = useContext(MsgContext)
   return (
     <Modal
       title={title}
       isOpen={show}
       variant={ModalVariant.small}
-      titleIconVariant='warning'
+      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}>{msg.cancel()}</Button>,
+        <Button key='cancel' variant='link' onClick={onClose}>{closeTitle ?? msg.cancel()}</Button>,
       ].filter(Boolean)}
     >
       {
@@ -51,12 +51,14 @@ ConfirmationModal.propTypes = {
   onClose: PropsTypes.func,
   confirm: PropsTypes.shape({
     title: PropsTypes.string,
-    type: PropsTypes.oneOf(['primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'link' | 'plain' | 'control']),
+    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/VmDetails/cards/DetailsCard/HotPlugConfirmationModal.js

@@ -1,37 +1,21 @@
 import React, { useContext } from 'react'
 import PropsTypes from 'prop-types'
-import {
-  MessageDialog,
-  Button,
-  Icon,
-  noop,
-} from 'patternfly-react'
 import { MsgContext } from '_/intl'
+import ConfirmationModal from '_/components/VmActions/ConfirmationModal'
 
 const HotPlugChangeConfirmationModal = ({ show, onCancel, onApplyLater, onApplyNow }) => {
   const { msg } = useContext(MsgContext)
   return (
-    <MessageDialog
+    <ConfirmationModal
       show={show}
-      onHide={onCancel}
+      onClose={onCancel}
       title={msg.hotPlugConfirmTitle()}
-      icon={<Icon type='pf' name='warning-triangle-o' />}
 
-      primaryContent={<div className='lead'>{msg.hotPlugConfirmContent()}</div>}
-      secondaryContent={<div>{msg.hotPlugConfirmContentDetail()}</div>}
+      body={msg.hotPlugConfirmContent()}
+      subContent={msg.hotPlugConfirmContentDetail()}
 
-      accessibleName='prompt-hot-plug'
-      accessibleDescription='hot-plug-configuration-change-will-be-applied-now'
-
-      primaryAction={noop}
-      primaryActionButtonContent=''
-      footer={(
-        <>
-          <Button onClick={onCancel}>{msg.cancel()}</Button>
-          <Button onClick={onApplyLater}>{msg.hotPlugConfirmApplyAfterRestart()}</Button>
-          <Button bsStyle='primary' onClick={onApplyNow}>{msg.hotPlugConfirmApplyNow()}</Button>
-        </>
-      )}
+      confirm={{ title: msg.hotPlugConfirmApplyNow(), onClick: onApplyNow }}
+      extra={{ title: msg.hotPlugConfirmApplyAfterRestart(), onClick: onApplyLater }}
     />
   )
 }

src/components/VmDetails/cards/DetailsCard/NextRunChangeConfirmationModal.js

@@ -1,39 +1,21 @@
 import React, { useContext } from 'react'
 import PropsTypes from 'prop-types'
-import {
-  MessageDialog,
-  Button,
-  Icon,
-  noop,
-} from 'patternfly-react'
 import { MsgContext } from '_/intl'
+import ConfirmationModal from '_/components/VmActions/ConfirmationModal'
 
 const NextRunChangeConfirmationModal = ({ show, onCancel, onSave, onSaveAndRestart }) => {
   const { msg } = useContext(MsgContext)
   return (
-    <MessageDialog
+    <ConfirmationModal
       show={show}
-      onHide={onCancel}
+      onClose={onCancel}
       title={msg.nextRunConfirmTitle()}
-      icon={<Icon type='pf' name='warning-triangle-o' />}
 
-      primaryContent={<div className='lead'>{msg.nextRunConfirmContent()}</div>}
-      secondaryContent={<div>{msg.nextRunConfirmContentDetail()}</div>}
+      body={msg.nextRunConfirmContent()}
+      subContent={msg.nextRunConfirmContentDetail()}
 
-      accessibleName='prompt-next-run'
-      accessibleDescription='next-run-configuration-change-will-be-applied-on-restart'
-
-      primaryAction={noop}
-      primaryActionButtonContent=''
-      footer={(
-        <>
-          <Button onClick={onCancel}>{msg.cancel()}</Button>
-          <Button onClick={onSave}>{msg.nextRunConfirmActionSave()}</Button>
-          <Button bsStyle='primary' onClick={onSaveAndRestart}>
-            {msg.nextRunConfrimActionSaveRestart()}
-          </Button>
-        </>
-      )}
+      extra={{ onClick: onSave, title: msg.nextRunConfirmActionSave() }}
+      confirm={{ onClick: onSaveAndRestart, title: msg.nextRunConfrimActionSaveRestart() }}
     />
   )
 }

src/components/VmDetails/cards/SnapshotsCard/RestoreConfirmationModal.js

@@ -3,10 +3,10 @@ import PropsTypes from 'prop-types'
 import { connect } from 'react-redux'
 import Immutable from 'immutable'
 
-import { Icon, MessageDialog } from 'patternfly-react'
 import { withMsg } from '_/intl'
 import { getMinimizedString, escapeHtml } from '_/components/utils'
 import { restoreVmSnapshot } from './actions'
+import ConfirmationModal from '_/components/VmActions/ConfirmationModal'
 
 const MAX_DESCRIPTION_SIZE = 150
 
@@ -35,38 +35,35 @@ class RestoreConfirmationModal extends React.Component {
   render () {
     const { snapshot, trigger, snapshots, id, msg } = this.props
 
-    const icon = <Icon type='pf' name='warning-triangle-o' />
     const snapshotsThatWillBeDeleted = snapshots.filter((s) => s.get('date') > snapshot.get('date'))
     const minDescription = escapeHtml(getMinimizedString(snapshot.get('description'), MAX_DESCRIPTION_SIZE))
 
     return (
       <>
         { trigger({ onClick: this.open })}
-        <MessageDialog
+        <ConfirmationModal
           id={id}
           show={this.state.showModal}
-          onHide={this.close}
-          primaryAction={this.handleRestore}
-          secondaryAction={this.close}
-          primaryActionButtonContent={msg.restore()}
-          secondaryActionButtonContent={msg.cancel()}
+          onClose={this.close}
           title={msg.confirmRestore()}
-          icon={icon}
-          primaryContent={(
-            <div
-              id={`${id}-lead`}
-              className='lead'
-              dangerouslySetInnerHTML={{
-                __html: msg.areYouSureYouWantToRestoreSnapshot({ snapshotName: `"<strong>${minDescription}</strong>"` }),
-              }}
-            />
-          )}
-          secondaryContent={ snapshotsThatWillBeDeleted.size > 0 && (
-            <div id={`${id}-secondary`}>
-              {msg.nextSnapshotsWillBeDeleted()}
-              {snapshotsThatWillBeDeleted.map((s) => <div key={s.get('date')}>{s.get('description')}</div>)}
-            </div>
+          body={(
+            <>
+              <div
+                id={`${id}-lead`}
+                className='lead'
+                dangerouslySetInnerHTML={{
+                  __html: msg.areYouSureYouWantToRestoreSnapshot({ snapshotName: `"<strong>${minDescription}</strong>"` }),
+                }}
+              />
+              { snapshotsThatWillBeDeleted.size > 0 && (
+                <div id={`${id}-secondary`}>
+                  {msg.nextSnapshotsWillBeDeleted()}
+                  {snapshotsThatWillBeDeleted.map((s) => <div key={s.get('date')}>{s.get('description')}</div>)}
+                </div>
+              )}
+            </>
           )}
+          confirm={{ onClick: this.handleRestore, title: msg.restore() }}
         />
       </>
     )

src/components/VmModals/DeleteConfirmationModal.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { MessageDialog, Icon } from 'patternfly-react'
 import { withMsg } from '_/intl'
+import ConfirmationModal from '../VmActions/ConfirmationModal'
 
 class DeleteConfirmationModal extends React.Component {
   constructor (props) {
@@ -36,30 +36,19 @@ class DeleteConfirmationModal extends React.Component {
       msg,
     } = this.props
 
-    const primary = Array.isArray(children) ? children[0] : children
-    const secondary = Array.isArray(children) ? children.slice(1) : undefined
-
-    const icon = severity === 'normal'
-      ? <Icon type='pf' name='warning-triangle-o' />
-      : <Icon type='pf' name='error-circle-o' />
-    const primaryButtonStyle = severity === 'normal' ? 'primary' : 'danger'
+    const variant = severity === 'normal' ? 'warning' : 'danger'
 
     return (
       <>
         { trigger({ onClick: this.handleTriggerClick }) }
-        <MessageDialog
+        <ConfirmationModal
           id={id}
           show={this.state.show}
-          onHide={this.handleClose}
-          primaryAction={this.handleDelete}
-          secondaryAction={this.handleClose}
-          primaryActionButtonBsStyle={primaryButtonStyle}
-          primaryActionButtonContent={msg.delete()}
-          secondaryActionButtonContent={msg.cancel()}
+          onClose={this.handleClose}
           title={msg.confirmDelete()}
-          icon={icon}
-          primaryContent={<div id={`${id}-lead`} className='lead'>{primary}</div>}
-          secondaryContent={secondary}
+          body={children}
+          variant={variant}
+          confirm={{ onClick: this.handleDelete, title: msg.delete() }}
         />
       </>
     )

src/intl/messages.js

@@ -53,6 +53,7 @@ export const messages: { [messageId: string]: MessageType } = {
   areYouSureYouWantToDeleteNic: 'Are you sure you want to delete NIC {nicName}?',
   areYouSureYouWantToDeleteSnapshot: 'Are you sure you want to delete snapshot {snapshotName}?',
   areYouSureYouWantToRestoreSnapshot: 'Are you sure you want to restore snapshot {snapshotName}?',
+  attention: 'Attention!',
   authorizationExpired: 'Authorization expired. The page is going to be reloaded to re-login.',
   automaticPoolsNotEditable: 'The pool type of {poolName} is automatic so the details of this virtual machine are not editable.',
   availableVmsFromPool: 'Available VMs from this Pool',