Merge pull request #74 from openstax/custom-notices

Add methods to display notices manually

Author: philschatz

resources/styles/demo.less

@@ -8,6 +8,14 @@
   margin: 100px 0;
 
 }
+.notices {
+  .test-message {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 500px;
+  }
+}
 
 .exercisePreview-demo, .exercise-demo, .multipartExercise-demo {
   max-width: 800px;

src/components/demo.cjsx

@@ -312,9 +312,26 @@ NoticesDemo = React.createClass
     )
     Notifications.startPolling()
 
+  showMessage: ->
+    Notifications.display(
+      message: @refs.message.getDOMNode().value,
+      level: @refs.type.getDOMNode().value
+    )
+
   render: ->
     <div className="notices">
       <NotificationBar />
+      <div className="test-message">
+        <span>Test Message:</span>
+        <input type="text" ref="message" />
+        <select ref="type">
+          <option value="success">Success</option>
+          <option value="notice" selected>Notice</option>
+          <option value="alert">Alert</option>
+          <option value="error">Error</option>
+        </select>
+        <button onClick={@showMessage}>Display</button>
+      </div>
       <button onClick={@startPoll}>Start Polling</button>
     </div>
 

src/components/notifications/bar.cjsx

@@ -4,7 +4,7 @@ _ = require 'underscore'
 Notifications = require '../../model/notifications'
 
 TYPES =
-  tutor: require './system'
+  system: require './system'
   accounts: require './email'
 
 NotificationBar = React.createClass
@@ -23,7 +23,7 @@ NotificationBar = React.createClass
 
     <div className="openstax-notifications-bar">
       {for notice in notifications
-        Component = TYPES[notice.type]
+        Component = TYPES[notice.type] or TYPES['system']
         <Component key={notice.id} notice={notice} />}
     </div>
 

src/components/notifications/system.cjsx

@@ -1,4 +1,5 @@
 React = require 'react'
+classnames = require 'classnames'
 
 Notifications = require '../../model/notifications'
 
@@ -13,10 +14,19 @@ SystemNotification = React.createClass
     Notifications.acknowledge(@props.notice)
     undefined # silence React warning about return value
 
+  getIcon: ->
+    return @props.notice.icon if @props.notice.icon
+    switch @props.notice.level
+      when 'alert' then 'exclamation-triangle'
+      when 'error', 'warning' then 'exclamation-circle'
+      else
+        'info-circle'
+
   render: ->
-    <div className="notification system">
+
+    <div className={classnames('notification', 'system', @props.notice.level)}>
       <span className="body">
-        <i className='icon fa fa-info-circle' />
+        <i className={"icon fa fa-#{@getIcon()}"} />
         {@props.notice.message}
       </span>
       <a className='dismiss' onClick={@acknowledge}>Dismiss</a>

src/model/notifications.coffee

@@ -5,10 +5,18 @@ URLs = require './urls'
 EVENT_BUS = new EventEmitter2
 POLLERS = {}
 
+NOTICES = []
+
+CLIENT_ID = 'client-specified'
 Poller = require './notifications/pollers'
 
 Notifications = {
 
+  display: (notice) ->
+    # fill in an id and type if not provided
+    NOTICES.push( _.defaults(_.clone(notice), id: _.uniqueId(CLIENT_ID), type: CLIENT_ID ))
+    @emit('change')
+
   _startPolling: (type, url) ->
     POLLERS[type] ||= Poller.forType(@, type)
     POLLERS[type].setUrl(url)
@@ -24,10 +32,14 @@ Notifications = {
 
 
   acknowledge: (notice) ->
-    POLLERS[notice.type].acknowledge(notice)
+    if notice.type is CLIENT_ID
+      NOTICES = _.without(NOTICES, _.findWhere(NOTICES, id: notice.id))
+      @emit('change')
+    else
+      POLLERS[notice.type].acknowledge(notice)
 
   getActive: ->
-    notices = []
+    notices = _.clone NOTICES
     for type, poller of POLLERS
       notices = notices.concat( poller.getActiveNotifications() )
     notices

test/components/notifications/system.spec.coffee

@@ -20,3 +20,13 @@ describe 'System Notifications', ->
     Testing.renderComponent( SystemNotifications, props: @props ).then ({dom}) =>
       Testing.actions.click(dom.querySelector('.dismiss'))
       expect(Notifications.acknowledge).to.have.been.calledWith(@props.notice)
+
+  it 'displays icon based on level', ->
+    @props.notice.level = 'alert'
+    Testing.renderComponent( SystemNotifications, props: @props ).then ({dom}) ->
+      expect(dom.querySelector('.fa-exclamation-triangle')).to.exist
+
+  it 'displays icon provided', ->
+    @props.notice.icon = 'beer'
+    Testing.renderComponent( SystemNotifications, props: @props ).then ({dom}) ->
+      expect(dom.querySelector('.fa-beer')).to.exist

test/model/notifications.spec.coffee

@@ -25,3 +25,21 @@ describe 'Notifications', ->
     URLs.update(tutor_notices_url: 'http://localhost:3001/api/notifications')
     Notifications.startPolling(@windowImpl)
     expect(Poller::poll).to.have.callCount(2)
+
+
+  it 'can display and confirm manual notifications', ->
+    changeListener = sinon.stub()
+    notice = {message: 'hello world', icon: 'globe'}
+    Notifications.on('change', changeListener)
+    Notifications.display(notice)
+    expect(changeListener).to.have.been.called
+
+    active = Notifications.getActive()
+    expect(active).to.have.length(1)
+    # should have copied the object vs mutating it
+    expect(active[0]).not.to.not.equal(notice)
+    expect(active[0].type).to.exist
+
+    Notifications.acknowledge(active[0])
+    expect(changeListener).to.have.callCount(2)
+    expect(Notifications.getActive()).to.be.empty