Replace PF3 Alerts

src/actions/error.js

@@ -13,7 +13,7 @@ export function extractErrorText (exception: Object): string {
     : (exception.statusText || 'UNKNOWN')
 }
 
-export function failedExternalAction ({ message, messageDescriptor, exception, failedAction }: FailedExternalActionInputType): FailedExternalActionType {
+export function failedExternalAction ({ message, titleDescriptor, messageDescriptor, exception, failedAction }: FailedExternalActionInputType): FailedExternalActionType {
   if (exception) {
     message = message || extractErrorText(exception)
     message = customizeErrorMessage(message)
@@ -25,6 +25,7 @@ export function failedExternalAction ({ message, messageDescriptor, exception, f
       payload: {
         message,
         messageDescriptor,
+        titleDescriptor,
         type,
         failedAction,
       },
@@ -34,8 +35,9 @@ export function failedExternalAction ({ message, messageDescriptor, exception, f
   return {
     type: FAILED_EXTERNAL_ACTION,
     payload: {
-      messageDescriptor,
       message,
+      messageDescriptor,
+      titleDescriptor,
       failedAction,
     },
   }

src/actions/types.js

@@ -38,6 +38,7 @@ export type MessageDescriptorType = {
 export type FailedExternalActionInputType = {
   message: string,
   messageDescriptor: ?MessageDescriptorType,
+  titleDescriptor: ?MessageDescriptorType,
   exception?: Object,
   failedAction?: Object
 }
@@ -48,6 +49,7 @@ export type FailedExternalActionType = {
     message: string,
     failedAction?: Object,
     messageDescriptor: ?MessageDescriptorType,
+    titleDescriptor: ?MessageDescriptorType,
     type?: number | 'ERROR'
   }
 }

src/components/CounterAlert.js

@@ -2,7 +2,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { Alert } from 'patternfly-react'
+import { Alert, AlertActionCloseButton } from '@patternfly/react-core'
 import style from './sharedStyle.css'
 
 class CounterAlert extends React.Component {
@@ -45,10 +45,13 @@ class CounterAlert extends React.Component {
   render () {
     const { title, type, children } = this.props
     return this.state.showAlert && (
-      <Alert type={type} onDismiss={this.handleDismiss} className={style['text-align-left']}>
-        {title}
-        {children}
-      </Alert>
+      <Alert
+        variant={type}
+        actionClose={<AlertActionCloseButton onClose={this.handleDismiss} />}
+        className={style['text-align-left']}
+        title={title}
+        children={children}
+      />
     )
   }
 }

src/components/CreateVmWizard/steps/SummaryReview.js

@@ -1,7 +1,8 @@
 import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import { Alert, Icon, Spinner, Label } from 'patternfly-react'
+import { Icon, Spinner, Label } from 'patternfly-react'
+import { Alert } from '@patternfly/react-core'
 import { InfoCircleIcon } from '@patternfly/react-icons'
 
 import { MsgContext, enumMsg } from '_/intl'
@@ -290,13 +291,13 @@ const SummaryReview = ({
             {msg.createVmWizardReviewSuccess()}
           </div>
           { progress.messages && progress.messages.length > 0 && (
-            <Alert type='success' >
-              {progress.messages.map((message, index) => (
-                <div key={`message-${index}`}>
-                  { message }
-                </div>
-              )
-              )}
+            <Alert variant='success' isInline title={msg.messages()}>{
+                progress.messages.map((message, index) => (
+                  <div key={`message-${index}`}>
+                    { message }
+                  </div>
+                ))
+              }
             </Alert>
           )}
         </div>
@@ -310,13 +311,13 @@ const SummaryReview = ({
             {msg.createVmWizardReviewError()}
           </div>
           { progress.messages && progress.messages.length > 0 && (
-            <Alert type='error' >
-              {progress.messages.map((message, index) => (
-                <div key={`message-${index}`}>
-                  { message }
-                </div>
-              )
-              )}
+            <Alert variant='danger' isInline title={msg.messages()}>{
+                progress.messages.map((message, index) => (
+                  <div key={`message-${index}`}>
+                    { message }
+                  </div>
+                ))
+              }
             </Alert>
           )}
         </div>

src/components/NavigationConfirmationModal/index.js

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
-import { Modal, Button, Alert } from 'patternfly-react'
+import { Modal, Button } from 'patternfly-react'
+import { Alert } from '@patternfly/react-core'
 import { MsgContext } from '_/intl'
 
 const NavigationConfirmationModal = ({ show, onYes, onNo, additionalNote }) => {
@@ -13,8 +14,15 @@ const NavigationConfirmationModal = ({ show, onYes, onNo, additionalNote }) => {
         <Modal.Title id={`${idPrefix}-title`}>{msg.unsavedChangesTitle()}</Modal.Title>
       </Modal.Header>
       <Modal.Body>
-        <Alert type='warning' id={`${idPrefix}-body-text`}>{msg.unsavedChangesConfirmMessage()}</Alert>
-        {additionalNote}
+        <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>

src/components/Settings/Settings.js

@@ -130,7 +130,7 @@ const Settings = ({
         { partialSave.show && (
           <CounterAlert
             timeout={10}
-            type='error'
+            type='danger'
             title={<p>{msg.failedToSaveChangesToFields()}</p>}
             onDismiss={() => resetNotifications(setShowPartialSave, { show: false, fields: [] })}
           >
@@ -140,7 +140,7 @@ const Settings = ({
         { showCompleteFailure && (
           <CounterAlert
             timeout={10}
-            type='error'
+            type='danger'
             title={msg.failedToSaveChanges()}
             onDismiss={() => resetNotifications(setShowCompleteFailure, false)}
           />

src/components/ToastNotifications.js

@@ -2,36 +2,68 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 
-import { TimedToastNotification, ToastNotificationList } from 'patternfly-react'
+import { Alert, AlertGroup, AlertActionCloseButton } from '@patternfly/react-core'
 import { setNotificationNotified } from '_/actions'
 import { withMsg } from '_/intl'
-import { buildMessageFromRecord } from '_/helpers'
+import { buildMessageFromRecord, translate } from '_/helpers'
 
 import style from './sharedStyle.css'
 
 function normalizeType (theType) {
   theType = String(theType).toLowerCase()
-  const isExpected = ['error', 'warning', 'success', 'info', 'danger'].includes(theType)
-  return isExpected ? theType : 'warning'
+  // PF4 statuses
+  if (['default', 'warning', 'success', 'info', 'danger'].includes(theType)) {
+    return theType
+  }
+
+  // 'error' (used in PF3) was replaced by 'danger'
+  return theType === 'error' ? 'danger' : 'warning'
+}
+
+function buildTitle ({ id, params } = {}, msg, type) {
+  if (!id) {
+    // no title provide - generate one based on type
+    return mapTypeToTitle(msg, type)
+  }
+  return translate({ id, params, msg })
+}
+
+function mapTypeToTitle (msg, type) {
+  switch (type) {
+    case 'warning':
+      return msg.warning()
+    case 'danger':
+      return msg.error()
+    case 'success':
+      return msg.success()
+    case 'info':
+    default:
+      return msg.info()
+  }
 }
 
 const ToastNotifications = ({ userMessages, onDismissNotification, msg }) => {
   return (
-    <ToastNotificationList>
-      { userMessages.get('records').filter(r => !r.get('notified')).map(r => (
-        <TimedToastNotification
+    <AlertGroup isToast isLiveRegion>
+      { userMessages.get('records').toJS().filter(({ notified }) => !notified).map(r => (
+        <Alert
+          variant={normalizeType(r.type)}
           className={style['toast-margin-top']}
-          type={normalizeType(r.get('type'))}
-          onDismiss={() => onDismissNotification(r.get('id'))}
-          key={r.get('time')}
+          title={buildTitle(r.titleDescriptor, msg, normalizeType(r.type))}
+          timeout={true}
+          onTimeout={() => onDismissNotification(r.id)}
+          actionClose={(
+            <AlertActionCloseButton
+              onClose={() => onDismissNotification(r.id)}
+            />
+          )}
+          key={r.time}
         >
-          <span>
-            {buildMessageFromRecord(r.toJS(), msg)}
-          </span>
-        </TimedToastNotification>
+          {buildMessageFromRecord(r, msg)}
+        </Alert>
       )
       )}
-    </ToastNotificationList>
+    </AlertGroup>
   )
 }
 

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

@@ -34,13 +34,12 @@ import {
 } from '_/components/utils'
 
 import {
-  Alert,
   ExpandCollapse,
   FormControl,
   Icon,
 } from 'patternfly-react'
 
-import { Switch } from '@patternfly/react-core'
+import { Switch, Alert } from '@patternfly/react-core'
 
 import SelectBox from '_/components/SelectBox'
 import BaseCard from '../../BaseCard'
@@ -1094,9 +1093,13 @@ class DetailsCard extends React.Component {
                 ) }
 
                 { correlatedMessages && correlatedMessages.size > 0 && correlatedMessages.map((message, key) => (
-                  <Alert key={`user-message-${key}`} type='error' style={{ margin: '5px 0 0 0' }}>
-                    {buildMessageFromRecord(message.toJS(), msg)}
-                  </Alert>
+                  <Alert
+                    key={`user-message-${key}`}
+                    variant='danger'
+                    isInline
+                    style={{ margin: '5px 0 0 0' }}
+                    title={buildMessageFromRecord(message.toJS(), msg)}
+                  />
                 ))}
               </>
             )

src/components/VmDetails/cards/OverviewCard/index.js

@@ -9,7 +9,8 @@ import { generateUnique, buildMessageFromRecord } from '_/helpers'
 import { formatUptimeDuration } from '_/utils'
 import { editVm } from '_/actions'
 
-import { FormControl, FormGroup, HelpBlock, Alert, Checkbox } from 'patternfly-react'
+import { FormControl, FormGroup, HelpBlock, Checkbox } from 'patternfly-react'
+import { Alert } from '@patternfly/react-core'
 
 import BaseCard from '../../BaseCard'
 import VmIcon from '../../../VmIcon'
@@ -298,9 +299,14 @@ class OverviewCard extends React.Component {
 
               { correlatedMessages && correlatedMessages.size > 0 &&
                 correlatedMessages.map((message, key) => (
-                  <Alert key={`user-message-${key}`} type='error' style={{ margin: '5px 0 0 0' }} id={`${idPrefix}-alert`}>
-                    {buildMessageFromRecord(message.toJS(), msg)}
-                  </Alert>
+                  <Alert
+                    key={`user-message-${key}`}
+                    variant='danger'
+                    isInline
+                    style={{ margin: '5px 0 0 0' }}
+                    id={`${idPrefix}-alert`}
+                    title={buildMessageFromRecord(message.toJS(), msg)}
+                  />
                 )
                 )
               }

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

@@ -5,7 +5,6 @@ import { connect } from 'react-redux'
 import { addVmSnapshot } from './actions'
 
 import {
-  Alert,
   Button,
   Col,
   Form,
@@ -17,6 +16,7 @@ import {
   Modal,
   noop,
 } from 'patternfly-react'
+import { Alert } from '@patternfly/react-core'
 import { withMsg } from '_/intl'
 import style from './style.css'
 
@@ -94,8 +94,13 @@ class NewSnapshotModal extends Component {
           <Modal.Body>
             <Form onSubmit={this.handleSave} horizontal>
               <Col sm={12}>
-                <Alert type='info'>
-                  { msg.snapshotInfo() }
+                <Alert
+                  variant='info'
+                  isInline
+                  title={msg.details()}
+                  style={{ 'margin-bottom': '10px' }}
+                >
+                  {msg.snapshotInfo() }
                 </Alert>
               </Col>
               <FormGroup bsClass='form-group col-sm-12 required' validationState={this.state.emptyDescription ? 'error' : null}>

src/components/VmDetails/index.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Alert, Card, CardBody } from 'patternfly-react'
+import { Card, CardBody } from 'patternfly-react'
+import { Alert } from '@patternfly/react-core'
 import { withMsg } from '_/intl'
 
 import styles from './style.css'
@@ -63,7 +64,7 @@ class VmDetailsContainer extends React.Component {
             <Col>
               <Card>
                 <CardBody>
-                  <Alert type='info' style={{ margin: '0' }}>{msg.vmHasPendingConfigurationChanges()}</Alert>
+                  <Alert variant='info' isInline title={msg.vmHasPendingConfigurationChanges()}/>
                 </CardBody>
               </Card>
             </Col>

src/intl/messages.js

@@ -343,6 +343,7 @@ export const messages: { [messageId: string]: MessageType } = {
     message: 'Not responding',
     description: 'VM is not responding. One of states of a virtual machine. Other are e.g. Up, Down, Powering-Up',
   },
+  error: 'Error',
   errorWhileCreatingNewDisk: 'Error while creating new disk:',
   every30Seconds: 'Every 30 seconds',
   everyMinute: 'Every minute',
@@ -405,6 +406,7 @@ export const messages: { [messageId: string]: MessageType } = {
   htmlUnsupportedOvirtVersionFoundButVersionAtLeastRequired: '<strong>Unsupported {version} {productName} version</strong> found, but at least version {requiredVersion} is required.',
   icon: 'Icon',
   ifVmIsRunningClickToAccessItsGraphicsConsole: 'If the virtual machine is running, click the protocol name to access its Graphical Console.',
+  info: 'Information',
   inPreview: 'In Preview',
   ieNotSupported: 'Internet Explorer is not a supported browser.',
   ipAddress: { message: 'IP Address', description: 'Label for IP addresses reported by VM guest agent' },
@@ -649,6 +651,7 @@ export const messages: { [messageId: string]: MessageType } = {
     message: '({size} {unit} free)',
     description: 'Show the amount of free space a storage domain has when rendered in a select list of storage domains',
   },
+  success: 'Success',
   suspend: 'Suspend',
   suspendVm: 'Suspend the VM',
   suspendVmQuestion: 'Are you sure you want to Suspend the VM?',
@@ -791,6 +794,7 @@ export const messages: { [messageId: string]: MessageType } = {
   vncOptions: 'VNC Options',
   vnicProfile: 'VNIC Profile',
   vnicProfileEmpty: '<Empty>',
+  warning: 'Warning',
   yes: 'Yes',
   youHaveNoAllowedVnicProfiles: 'You cannot create or edit NICs because you do not have permission to use any vNIC Profiles in the VM\'s Data Center.',
 }