From 8b28155123a045085805fba9773d86c045316371 Mon Sep 17 00:00:00 2001
From: Radoslaw Szwajkowski <rszwajko@redhat.com>
Date: Wed, 24 Nov 2021 17:27:16 +0100
Subject: [PATCH] Replace PF3 MessageDialog

---
 src/components/SessionActivityTracker.js      | 23 +++++-----
 src/components/VmActions/ConfirmationModal.js | 10 +++--
 .../DetailsCard/HotPlugConfirmationModal.js   | 30 +++----------
 .../NextRunChangeConfirmationModal.js         | 32 +++-----------
 .../SnapshotsCard/RestoreConfirmationModal.js | 43 +++++++++----------
 .../VmModals/DeleteConfirmationModal.js       | 25 +++--------
 src/intl/messages.js                          |  1 +
 7 files changed, 59 insertions(+), 105 deletions(-)

diff --git a/src/components/SessionActivityTracker.js b/src/components/SessionActivityTracker.js
index d08883ff3..2700f1342 100644
--- a/src/components/SessionActivityTracker.js
+++ b/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(),
+          }}
         />
       )
     }
diff --git a/src/components/VmActions/ConfirmationModal.js b/src/components/VmActions/ConfirmationModal.js
index 5a8c8da5c..e523e1af9 100644
--- a/src/components/VmActions/ConfirmationModal.js
+++ b/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
diff --git a/src/components/VmDetails/cards/DetailsCard/HotPlugConfirmationModal.js b/src/components/VmDetails/cards/DetailsCard/HotPlugConfirmationModal.js
index 88ec27660..7b39044d5 100644
--- a/src/components/VmDetails/cards/DetailsCard/HotPlugConfirmationModal.js
+++ b/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 }}
     />
   )
 }
diff --git a/src/components/VmDetails/cards/DetailsCard/NextRunChangeConfirmationModal.js b/src/components/VmDetails/cards/DetailsCard/NextRunChangeConfirmationModal.js
index e2c4750d5..51dc6c1e0 100644
--- a/src/components/VmDetails/cards/DetailsCard/NextRunChangeConfirmationModal.js
+++ b/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() }}
     />
   )
 }
diff --git a/src/components/VmDetails/cards/SnapshotsCard/RestoreConfirmationModal.js b/src/components/VmDetails/cards/SnapshotsCard/RestoreConfirmationModal.js
index 018185ced..6b7f382d7 100644
--- a/src/components/VmDetails/cards/SnapshotsCard/RestoreConfirmationModal.js
+++ b/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() }}
         />
       </>
     )
diff --git a/src/components/VmModals/DeleteConfirmationModal.js b/src/components/VmModals/DeleteConfirmationModal.js
index d76ca7437..541a4efeb 100644
--- a/src/components/VmModals/DeleteConfirmationModal.js
+++ b/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() }}
         />
       </>
     )
diff --git a/src/intl/messages.js b/src/intl/messages.js
index 37dc585ff..b3b495d4e 100644
--- a/src/intl/messages.js
+++ b/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',