GH-983: style the message like the other messages

opentech/static_src/src/app/src/components/MessageBar/index.js

@@ -3,14 +3,14 @@ import PropTypes from 'prop-types'
 
 import { MESSAGE_TYPES } from '@actions/messages'
 
-const MessageBar = ({ message, type, onDismiss }) => {
-    const modifierClass = type ? `messages__text--${type}` : '';
 
+const MessageBar = ({ message, type, onDismiss, dismissMessage='OK' }) => {
+    const modifierClass = type ? `messages__text--${type}` : '';
     return (
         <li className={`messages__text ${modifierClass}`}>
             <div className="messages__inner">
                 <p className="messages__copy">{message}</p>
-                {onDismiss && <button className="button messages__button" onClick={onDismiss}>Ok</button>}
+                {onDismiss && <button className="button messages__button" onClick={onDismiss}>{dismissMessage}</button>}
             </div>
         </li>
     )
@@ -20,6 +20,7 @@ MessageBar.propTypes = {
     type: PropTypes.oneOf(Object.values(MESSAGE_TYPES)),
     message: PropTypes.string,
     onDismiss: PropTypes.func,
+    dismissMessage: PropTypes.string,
 }
 
 export default MessageBar

opentech/static_src/src/app/src/components/MessagesList/index.js

+import React from 'react'
+import PropTypes from 'prop-types'
+
+import MessageBar from '@components/MessageBar'
+
+const MessagesList = ({ children }) => {
+    return (
+        <ul className="messages">
+            { children }
+        </ul>
+    )
+}
+
+MessagesList.propTypes = {
+    children: PropTypes.oneOfType([PropTypes.arrayOf(MessageBar), MessageBar])
+}
+
+export default MessagesList

opentech/static_src/src/app/src/containers/CurrentSubmissionDisplay.js

@@ -9,6 +9,9 @@ import {
     getCurrentSubmissionID,
 } from '@selectors/submissions'
 import SubmissionDisplay from '@components/SubmissionDisplay';
+import MessagesList from '@components/MessagesList'
+import MessageBar from '@components/MessageBar'
+
 
 const loadData = props => {
     return props.loadCurrentSubmission(['questions'], { bypassCache: true })
@@ -76,10 +79,14 @@ const  CurrentSubmissionDisplay = props => {
     }
 
     const renderUpdatedMessage = () =>{
-        return <p>
-            {updateMessage}
-            <button onClick={handleUpdateSubmission}>Show updated</button>
-        </p>
+        return <MessagesList>
+            <MessageBar
+                    type='info'
+                    message={updateMessage}
+                    onDismiss={handleUpdateSubmission}
+                    dismissMessage="Show Updated"
+               />
+        </MessagesList>
     }
 
     return <>

opentech/static_src/src/app/src/containers/MessagesContainer.js

@@ -3,17 +3,18 @@ import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 
 import MessageBar from '@components/MessageBar'
+import MessagesList from '@components/MessagesList'
 import { getMessages } from '@selectors/messages'
 import { dismissMessage } from '@actions/messages'
 
 const MessagesContainer = ({ messages, dismiss }) => {
     return (
-        <ul className="messages">
+        <MessagesList>
             {Object.values(messages).map(({ message, type, id}) =>
                 <MessageBar key={id} message={message} type={type}
                     onDismiss={() => dismiss(id)} />
             )}
-        </ul>
+        </MessagesList>
     )
 }