Render notifications and add dismissal

ui/package.json

@@ -14,7 +14,7 @@
     "start": "node_modules/webpack/bin/webpack.js -w --config ./webpack/devConfig.js",
     "lint": "eslint src/",
     "test": "karma start",
-    "clean": "rm -rf ui/build"
+    "clean": "rm -rf build"
   },
   "author": "",
   "eslintConfig": {

ui/src/App.js

@@ -1,7 +1,10 @@
 import React, {PropTypes} from 'react';
 import {connect} from 'react-redux';
 import SideNavContainer from 'src/side_nav';
-import {publishNotification as publishNotificationAction} from 'src/shared/actions/notifications';
+import {
+  publishNotification as publishNotificationAction,
+  dismissNotification as dismissNotificationAction,
+} from 'src/shared/actions/notifications';
 
 const App = React.createClass({
   propTypes: {
@@ -13,36 +16,58 @@ const App = React.createClass({
       sourceID: PropTypes.string.isRequired,
     }).isRequired,
     publishNotification: PropTypes.func.isRequired,
+    dismissNotification: PropTypes.func.isRequired,
     notifications: PropTypes.shape({
       success: PropTypes.string,
-      failure: PropTypes.string,
+      error: PropTypes.string,
       warning: PropTypes.string,
     }),
   },
 
-  componentDidMount() {
-    const {publishNotification} = this.props;
-    setTimeout(() => {
-      publishNotification('success', 'everything worked :)');
-    }, 500);
+  handleNotification({type, text}) {
+    this.props.publishNotification(type, text);
+  },
+
+  handleDismissNotification(type) {
+    this.props.dismissNotification(type);
   },
 
   render() {
     const {sourceID} = this.props.params;
-    console.log(this.props.notifications);
-    const addFlashMessage = console.log;
 
     return (
       <div className="enterprise-wrapper--flex">
-        <SideNavContainer sourceID={sourceID} addFlashMessage={addFlashMessage} currentLocation={this.props.location.pathname} />
+        <SideNavContainer sourceID={sourceID} addFlashMessage={this.handleNotification} currentLocation={this.props.location.pathname} />
         <div className="page-wrapper">
+          {this.renderNotifications()}
           {this.props.children && React.cloneElement(this.props.children, {
-            addFlashMessage,
+            addFlashMessage: this.handleNotification,
           })}
         </div>
       </div>
     );
   },
+
+  renderNotifications() {
+    const {success, error} = this.props.notifications;
+    if (!success && !error) {
+      return null;
+    }
+    if (success) {
+      return <div className="alert alert-success" role="alert">{success}{this.renderDismiss()}</div>;
+    }
+    if (error) {
+      return <div className="alert alert-danger" role="alert">{error}{this.renderDismiss()}</div>;
+    }
+  },
+
+  renderDismiss() {
+    return (
+      <button className="close" data-dismiss="alert" aria-label="Close" onClick={this.handleDismissNotification}>
+        <span className="icon remove"></span>
+      </button>
+    );
+  },
 });
 
 function mapStateToProps(state) {
@@ -53,4 +78,5 @@ function mapStateToProps(state) {
 
 export default connect(mapStateToProps, {
   publishNotification: publishNotificationAction,
+  dismissNotification: dismissNotificationAction,
 })(App);

ui/src/hosts/containers/HostsPage.js

@@ -1,6 +1,5 @@
 import React, {PropTypes} from 'react';
 import _ from 'lodash';
-import FlashMessages from 'shared/components/FlashMessages';
 import HostsTable from '../components/HostsTable';
 import {getCpuAndLoadForHosts, getMappings, getAppsForHosts} from '../apis';
 
@@ -13,8 +12,8 @@ export const HostsPage = React.createClass({
       links: PropTypes.shape({
         proxy: PropTypes.string.isRequired,
       }).isRequired,
-    }).isRequired,
-    addFlashMessage: PropTypes.func.isRequired,
+    }),
+    addFlashMessage: PropTypes.func,
   },
 
   getInitialState() {
@@ -66,7 +65,6 @@ export const HostsPage = React.createClass({
       </div>
     );
   },
-
 });
 
-export default FlashMessages(HostsPage);
+export default HostsPage;

ui/src/index.js

@@ -76,7 +76,7 @@ const Root = React.createClass({
     getSources().then(({data: {sources}}) => {
       if (sources && sources.length) {
         const path = `/sources/${this.activeSource(sources).id}/hosts`;
-        replace(path)
+        replace(path);
       }
       callback();
     }).catch(callback);

ui/src/shared/actions/notifications.js

@@ -8,3 +8,11 @@ export function publishNotification(type, message) {
   };
 }
 
+export function dismissNotification(type) {
+  return {
+    type: 'NOTIFICATION_DISMISSED',
+    payload: {
+      type,
+    },
+  };
+}

ui/src/shared/reducers/notifications.js

@@ -6,6 +6,12 @@ export default function notifications(state = {}, action) {
         [type]: message,
       });
     }
+    case 'NOTIFICATION_DISMISSED': {
+      const {type} = action.payload;
+      return Object.assign({}, state, {
+        [type]: undefined,
+      });
+    }
   }
 
   return state;