Adjust modal dialogs to PF4 guidelines

Reference-Url: https://www.patternfly.org/v4/components/modal/design-guidelines/#types-of-modals

src/components/About/About.js

@@ -4,8 +4,8 @@ import { connect } from 'react-redux'
 import { withMsg } from '_/intl'
 
 import { Modal, ModalVariant } from '@patternfly/react-core'
-import Product from '../../version'
-import { fixedStrings } from '../../branding'
+import Product from '_/version'
+import { fixedStrings } from '_/branding'
 import styles from './styles.css'
 
 const LegalInfo = () => {
@@ -58,10 +58,11 @@ class AboutDialog extends React.Component {
       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-link' 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`}

src/components/NavigationConfirmationModal/index.js

@@ -10,7 +10,7 @@ const NavigationConfirmationModal = ({ show, onYes, onNo, additionalNote }) => {
   return (
     <Modal
       isOpen={show}
-      title={msg.unsavedChangesTitle()}
+      title={msg.unsavedChangesConfirmMessage()}
       titleIconVariant='warning'
       variant={ModalVariant.small}
       onClose={onNo}
@@ -24,7 +24,7 @@ const NavigationConfirmationModal = ({ show, onYes, onNo, additionalNote }) => {
         </Button>,
       ]}
     >
-      <p className='lead'>{msg.unsavedChangesConfirmMessage()}</p>
+      <p>{msg.allUnsavedWillBeLost()}</p>
       <p>{additionalNote}</p>
     </Modal>
   )

src/components/SessionActivityTracker.js

@@ -73,7 +73,7 @@ class SessionActivityTracker extends React.Component {
         <ConfirmationModal
           show={this.state.counter > 0 && this.state.counter <= TIME_TO_DISPLAY_MODAL}
           onClose={onLogout}
-          title={msg.attention()}
+          title={msg.continueWithSession()}
           body={msg.sessionExpired() }
           subContent={(
             <>

src/components/VmActions/ConfirmationModal.js

@@ -28,7 +28,7 @@ const ConfirmationModal = ({ show, title, confirm, body, subContent, onClose, ex
           typeof body === 'string'
             ? (
               <>
-                <p className='lead'>
+                <p>
                   { body }
                 </p>
                 {

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

@@ -9,10 +9,9 @@ const HotPlugChangeConfirmationModal = ({ show, onCancel, onApplyLater, onApplyN
     <ConfirmationModal
       show={show}
       onClose={onCancel}
-      title={msg.hotPlugConfirmTitle()}
+      title={msg.hotPlugConfirmContent()}
 
-      body={msg.hotPlugConfirmContent()}
-      subContent={msg.hotPlugConfirmContentDetail()}
+      body={msg.hotPlugConfirmContentDetail()}
 
       confirm={{ title: msg.hotPlugConfirmApplyNow(), onClick: onApplyNow }}
       extra={{ title: msg.hotPlugConfirmApplyAfterRestart(), onClick: onApplyLater }}

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

@@ -11,8 +11,7 @@ const NextRunChangeConfirmationModal = ({ show, onCancel, onSave, onSaveAndResta
       onClose={onCancel}
       title={msg.nextRunConfirmTitle()}
 
-      body={msg.nextRunConfirmContent()}
-      subContent={msg.nextRunConfirmContentDetail()}
+      body={msg.nextRunConfirmContentDetail()}
 
       extra={{ onClick: onSave, title: msg.nextRunConfirmActionSave() }}
       confirm={{ onClick: onSaveAndRestart, title: msg.nextRunConfrimActionSaveRestart() }}

src/components/VmDetails/cards/DisksCard/DiskListItem.js

@@ -117,6 +117,7 @@ const DiskListItem = ({
           { canDelete && (
             <DeleteConfirmationModal
               id={`${idPrefix}-delete-modal`}
+              title={msg.permanentlyDeleteDisk()}
               severity='danger'
               onDelete={() => { onDelete(vm.get('id'), view.id) }}
               trigger={({ onClick }) => (

src/components/VmDetails/cards/NicsCard/NicListItem.js

@@ -108,6 +108,8 @@ const NicListItem = ({ idPrefix, nic, vmStatus, vnicProfileList, isEditing, onEd
           { canDelete && (
             <DeleteConfirmationModal
               id={`${idPrefix}-delete-modal`}
+              severity='danger'
+              title={msg.permanentlyDeleteNic()}
               onDelete={() => { onDelete(nic.id) }}
               trigger={({ onClick }) => (
                 <Tooltip id={`${idPrefix}-delete-tooltip`} tooltip={msg.nicDeleteTooltip()}>

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

@@ -108,7 +108,7 @@ class NewSnapshotModal extends Component {
                 variant='info'
                 isInline
                 title={msg.details()}
-                style={{ 'margin-bottom': '10px' }}
+                style={{ marginBottom: '10px' }}
               >
                 {msg.snapshotInfo() }
               </Alert>

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

@@ -45,7 +45,7 @@ class RestoreConfirmationModal extends React.Component {
           id={id}
           show={this.state.showModal}
           onClose={this.close}
-          title={msg.confirmRestore()}
+          title={msg.restoreSnapshot()}
           body={(
             <>
               <div

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

@@ -156,6 +156,8 @@ class SnapshotItem extends React.Component {
           <DeleteConfirmationModal
             key='delete'
             id={`${this.props.id}-delete-modal`}
+            severity='danger'
+            title={msg.permanentlyDeleteSnapshot()}
             onDelete={this.props.onSnapshotDelete}
             trigger={({ onClick }) => (
               <SnapshotAction key='delete' id={`${this.props.id}-delete`} disabled={isActionsDisabled} onClick={onClick}>

src/components/VmModals/DeleteConfirmationModal.js

@@ -33,6 +33,7 @@ class DeleteConfirmationModal extends React.Component {
       trigger,
       id,
       severity = 'normal',
+      title,
       msg,
     } = this.props
 
@@ -45,10 +46,10 @@ class DeleteConfirmationModal extends React.Component {
           id={id}
           show={this.state.show}
           onClose={this.handleClose}
-          title={msg.confirmDelete()}
+          title={title || msg.confirmDelete()}
           body={children}
           variant={variant}
-          confirm={{ onClick: this.handleDelete, title: msg.delete() }}
+          confirm={{ onClick: this.handleDelete, title: msg.delete(), type: variant }}
         />
       </>
     )
@@ -62,6 +63,7 @@ DeleteConfirmationModal.propTypes = {
   onDelete: PropTypes.func.isRequired,
   onClose: PropTypes.func,
   severity: PropTypes.oneOf(['normal', 'danger']),
+  title: PropTypes.string,
   msg: PropTypes.object.isRequired,
 }
 

src/intl/messages.js

@@ -46,14 +46,14 @@ export const messages: { [messageId: string]: MessageType } = {
     description: 'In sense of "human friendly name"',
   },
   allocatedVms: 'Allocated VMs',
+  allUnsavedWillBeLost: 'The page contains unsaved changes. All unsaved information will be lost.',
   allTabs: 'This action is applied to all tabs.',
   apiConnectionFailed: 'oVirt API connection failed',
   apiVersionCheckFailed: 'oVirt API version check failed',
   areYouSureYouWantToDeleteDisk: 'Are you sure you want to delete disk {diskName}?',
   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',
@@ -96,7 +96,6 @@ export const messages: { [messageId: string]: MessageType } = {
   cluster: 'Cluster',
   clusterCanOnlyChangeWhenVmStopped: 'Cluster can only be changed when the VM is stopped.',
   confirmDelete: 'Confirm Delete',
-  confirmRestore: 'Confirm Restore',
   connect: {
     message: 'Connect',
     description: 'Connect button for SSO authorization modal dialog.',
@@ -122,6 +121,7 @@ export const messages: { [messageId: string]: MessageType } = {
     message: 'Continue',
     description: 'Button to continue user session in SessionTimeout modal component.',
   },
+  continueWithSession: 'Continue with your session?',
   coresPerSockets: 'Cores per Virtual Socket',
   cpus: 'Total Virtual CPUs',
   cpusBadTopology: 'No valid CPU topology exists for this total Virtual CPUs count.',
@@ -402,11 +402,10 @@ export const messages: { [messageId: string]: MessageType } = {
   hostNameTooltip: 'Virtual Machine hostname.',
   hotPlugConfirmApplyAfterRestart: 'Apply after Restart',
   hotPlugConfirmApplyNow: 'Apply Changes Now',
-  hotPlugConfirmContent: 'Apply Changes Now with Hot Plug',
+  hotPlugConfirmContent: 'Apply Changes Now with Hot Plug?',
   hotPlugConfirmContentDetail:
   'Applying the changes to CPU and/or Memory can be done right now but it requires ' +
   'doing a hot plug.  You can choose to apply these changes after a restart instead.',
-  hotPlugConfirmTitle: 'Apply Changes',
   htmlPleaseReferToDocumentationForMoreInformation: 'Please refer to <a href="{documentationUrl}" target="_blank">documentation</a> for more information.',
   htmlUnsupportedOvirtVersionFoundButVersionAtLeastRequired: '<strong>Unsupported {version} {productName} version</strong> found, but at least version {requiredVersion} is required.',
   icon: 'Icon',
@@ -467,12 +466,11 @@ export const messages: { [messageId: string]: MessageType } = {
   newSnapshot: 'New snapshot',
   nextRunConfirmActionSave: 'Save Changes',
   nextRunConfrimActionSaveRestart: 'Save Changes and Restart',
-  nextRunConfirmContent: 'Some Configuration Changes Will Be Applied on Restart',
   nextRunConfirmContentDetail:
     'Some configuration changes will not be able to take effect until the ' +
     'Virtual Machine is restarted next.  A power cycle needs to take place to ' +
     'pick up this new configuration.',
-  nextRunConfirmTitle: 'Configuration Change on Restart',
+  nextRunConfirmTitle: 'Restart required',
   nextSnapshotsWillBeDeleted: 'Restoring this snapshot will also delete newer snapshots:',
   nic: 'Network interfaces',
   nicActionCreateNew: 'Create NIC',
@@ -539,6 +537,9 @@ export const messages: { [messageId: string]: MessageType } = {
   permissionsNoEditVm: 'You do not have the required permissions to edit a VM.',
   permissionsNoEditThisVm: 'You do not have permissions to edit VM {name} / {vmId}',
   pendingChanges: 'Pending Changes',
+  permanentlyDeleteDisk: 'Permanently delete Disk?',
+  permanentlyDeleteNic: 'Permanently delete Nic?',
+  permanentlyDeleteSnapshot: 'Permanently delete Snapshot?',
   persistenceReEnableHowTo: {
     message: 'To re-enable server-side persistence go to {advancedOptions}.',
     description: 'Instruction for the user how to re-enable server side persistence. Parameter advancedOptions is the translated label for Advanced Options section in Account Setttings',
@@ -592,6 +593,7 @@ export const messages: { [messageId: string]: MessageType } = {
     message: 'Restore',
     description: 'Confirmation modal action button label for a Restore operation',
   },
+  restoreSnapshot: 'Restore Snapshot?',
   results: {
     message: '{total} Results',
     description: 'Number of filtered fetched VMs (including pools)',
@@ -693,12 +695,8 @@ export const messages: { [messageId: string]: MessageType } = {
     description: 'unknown data center',
   },
   unsavedChangesConfirmMessage: {
-    message: 'Are you sure you want to drop your changes?',
-    description: 'Message in the modal dialog opened when a user tried to navigate off an editor page after changes have been made.',
-  },
-  unsavedChangesTitle: {
-    message: 'Dialog contains unsaved changes',
-    description: 'Title of modal dialog opened when a user tried to navigate off an editor page after changes have been made.',
+    message: 'Drop your changes?',
+    description: 'Title of a modal dialog opened when a user tried to navigate off an editor page after changes have been made.',
   },
   untilNextPageReload: {
     message: 'until next page reload',