Issue/2009 Notifications Added

packages/app/obojobo-document-engine/__tests__/Viewer/components/nav.test.js

@@ -61,7 +61,11 @@ jest.mock('../../../src/scripts/viewer/util/nav-util', () => ({
 	getOrderedList: jest.fn(),
 	getNavTarget: jest.fn(),
 	close: jest.fn(),
-	open: jest.fn()
+	open: jest.fn(),
+	isNotificationEnabled: jest.fn(),
+	setNotificationStatus: jest.fn(),
+	getNotificationTitle: jest.fn(),
+	getNotificationText: jest.fn()
 }))
 
 // NavStore
@@ -699,4 +703,57 @@ describe('Nav', () => {
 		component.instance().closeNavOnMobile({ target: true })
 		expect(NavUtil.close).toHaveBeenCalled()
 	})
+
+	test('renders notification appropriately (isNotificationEnabled=true)', () => {
+		const notification = true
+		NavUtil.getOrderedList.mockReturnValueOnce(navItems)
+		NavUtil.isNotificationEnabled.mockReturnValueOnce(notification)
+		const props = {
+			navState: {
+				notification
+			}
+		}
+
+		const component = renderer.create(<Nav {...props} />)
+		const tree = component.toJSON()
+		expect(tree.props.className).toEqual(expect.stringContaining('is-notification-enabled'))
+		expect(tree).toMatchSnapshot()
+	})
+
+	test('renders notification appropriately (isNotificationEnabled=false)', () => {
+		const notification = false
+		NavUtil.getOrderedList.mockReturnValueOnce(navItems)
+		NavUtil.isNotificationEnabled.mockReturnValueOnce(notification)
+		const props = {
+			navState: {
+				notification
+			}
+		}
+
+		const component = renderer.create(<Nav {...props} />)
+		const tree = component.toJSON()
+		expect(tree.props.className).toEqual(expect.stringContaining('is-not-notification-enabled'))
+		expect(tree).toMatchSnapshot()
+	})
+
+	test('onClickExitNotification exits out the notification', () => {
+		const notification = true
+		NavUtil.getOrderedList.mockReturnValueOnce(navItems)
+		NavUtil.isNotificationEnabled.mockReturnValueOnce(notification)
+		const props = {
+			navState: {
+				notification
+			}
+		}
+
+		const component = mount(<Nav {...props} />)
+		component.instance().selfRef = {
+			current: {
+				contains: () => false
+			}
+		}
+		component.instance().onClickExitNotification()
+		expect(NavUtil.isNotificationEnabled).toHaveBeenCalled()
+		expect(NavUtil.setNotificationStatus).toHaveBeenCalledWith(notification)
+	})
 })

packages/app/obojobo-document-engine/__tests__/Viewer/stores/__snapshots__/nav-store.test.js.snap

@@ -15,6 +15,7 @@ Object {
   "nav:resetContext": [Function],
   "nav:setContext": [Function],
   "nav:setFlag": [Function],
+  "nav:setNotificationStatus": [Function],
   "nav:showChildren": [Function],
   "nav:toggle": [Function],
   "nav:unlock": [Function],
@@ -279,7 +280,10 @@ Object {
   "locked": true,
   "navTargetHistory": Array [],
   "navTargetId": null,
+  "notification": undefined,
   "open": true,
+  "text": undefined,
+  "title": undefined,
   "visitId": 11,
 }
 `;
@@ -296,7 +300,10 @@ Object {
   "locked": false,
   "navTargetHistory": Array [],
   "navTargetId": null,
+  "notification": undefined,
   "open": true,
+  "text": undefined,
+  "title": undefined,
   "visitId": 11,
 }
 `;
@@ -313,7 +320,10 @@ Object {
   "locked": false,
   "navTargetHistory": Array [],
   "navTargetId": null,
+  "notification": undefined,
   "open": true,
+  "text": undefined,
+  "title": undefined,
   "visitId": 11,
 }
 `;
@@ -526,6 +536,33 @@ Object {
 }
 `;
 
+exports[`NavStore nav:setNotificationStatus event fires and updates state 1`] = `
+Array [
+  "navstore:change",
+]
+`;
+
+exports[`NavStore nav:setNotificationStatus event fires and updates state 2`] = `
+Array [
+  Object {
+    "action": "nav:setNotificationStatus",
+    "draftId": undefined,
+    "eventVersion": "1.0.0",
+    "payload": Object {
+      "from": true,
+      "to": false,
+    },
+    "visitId": undefined,
+  },
+]
+`;
+
+exports[`NavStore nav:setNotificationStatus event fires and updates state 3`] = `
+Object {
+  "notification": false,
+}
+`;
+
 exports[`NavStore nav:showChildren event fires and updates state 1`] = `
 Array [
   "navstore:change",

packages/app/obojobo-document-engine/__tests__/Viewer/stores/nav-store.test.js

@@ -1082,4 +1082,23 @@ describe('NavStore', () => {
 		expect(NavUtil.goto).toHaveBeenCalledWith('mockFirstTargetId')
 		expect(NavUtil.goto).toHaveBeenCalledTimes(1)
 	})
+
+	test('nav:setNotificationStatus event fires and updates state', () => {
+		const notification = true
+		NavStore.setState({
+			notification
+		})
+		// simulate trigger
+		Dispatcher.trigger.mockReturnValueOnce()
+
+		// go
+		eventCallbacks['nav:setNotificationStatus']({ value: { notification: !notification } })
+		expect(Dispatcher.trigger).toHaveBeenCalledTimes(1)
+		expect(Dispatcher.trigger.mock.calls[0]).toMatchSnapshot()
+		expect(ViewerAPI.postEvent).toHaveBeenCalledTimes(1)
+		expect(ViewerAPI.postEvent.mock.calls[0]).toMatchSnapshot()
+		const payloadToAPI = ViewerAPI.postEvent.mock.calls[0][0].payload
+		expect(payloadToAPI).toEqual({ from: notification, to: !notification })
+		expect(NavStore.getState()).toMatchSnapshot()
+	})
 })

packages/app/obojobo-document-engine/__tests__/Viewer/util/nav-util.test.js

@@ -531,4 +531,40 @@ describe('NavUtil', () => {
 		NavUtil.resetContext()
 		expect(Common.flux.Dispatcher.trigger).toHaveBeenCalledWith('nav:resetContext')
 	})
+
+	test('isNotificationEnabled returns the notification status from a state object', () => {
+		const notification = true
+		const navState = {
+			notification
+		}
+		const isNotificationEnabled = NavUtil.isNotificationEnabled(navState)
+		expect(isNotificationEnabled).toBe(notification)
+	})
+
+	test('getNotificationTitle returns the notification title from a state object', () => {
+		const title = 'example'
+		const navState = {
+			title
+		}
+		const getNotificationTitle = NavUtil.getNotificationTitle(navState)
+		expect(getNotificationTitle).toBe(title)
+	})
+
+	test('getNotificationText returns the notification text from a state object', () => {
+		const text = true
+		const navState = {
+			text
+		}
+		const getNotificationText = NavUtil.getNotificationText(navState)
+		expect(getNotificationText).toBe(text)
+	})
+
+	test('setNotificationStatus calls Dispatcher.trigger', () => {
+		const notification = true
+		NavUtil.setNotificationStatus(notification)
+
+		expect(Common.flux.Dispatcher.trigger).toHaveBeenCalledWith('nav:setNotificationStatus', {
+			value: { notification }
+		})
+	})
 })

packages/app/obojobo-document-engine/src/scripts/viewer/components/nav.js

@@ -1,11 +1,13 @@
 import './nav.scss'
+import './notification.scss'
 
 import Common from '../../common'
 import FocusUtil from '../util/focus-util'
 import Logo from './logo'
 import NavUtil from '../util/nav-util'
 import AssessmentUtil from '../util/assessment-util'
 import React from 'react'
+import Notification from './notification.js'
 
 const { Button } = Common.components
 const { StyleableText } = Common.text
@@ -26,6 +28,7 @@ export default class Nav extends React.Component {
 		this.selfRef = React.createRef()
 		this.hideOrShowOnResize = this.hideOrShowOnResize.bind(this)
 		this.closeNavOnMobile = this.closeNavOnMobile.bind(this)
+		this.onClickExitNotification = this.onClickExitNotification.bind(this)
 	}
 
 	isMobileSize() {
@@ -222,16 +225,27 @@ export default class Nav extends React.Component {
 		}
 	}
 
+	onClickExitNotification() {
+		const isNotificationEnabled = NavUtil.isNotificationEnabled(this.props.navState)
+		NavUtil.setNotificationStatus(!isNotificationEnabled)
+	}
+
 	render() {
 		const navState = this.props.navState
 		const list = NavUtil.getOrderedList(navState)
 		const lockEl = this.getLockEl(navState.locked)
 		const isNavInaccessible = navState.disabled || !navState.open
+
+		const isNotificationEnabled = NavUtil.isNotificationEnabled(this.props.navState)
+		const notificationTitle = NavUtil.getNotificationTitle(this.props.navState)
+		const notificationText = NavUtil.getNotificationText(this.props.navState)
+
 		const className =
 			'viewer--components--nav' +
 			isOrNot(navState.locked, 'locked') +
 			isOrNot(navState.open, 'open') +
-			isOrNot(!navState.disabled, 'enabled')
+			isOrNot(!navState.disabled, 'enabled') +
+			isOrNot(isNotificationEnabled, 'notification-enabled')
 
 		return (
 			<nav
@@ -253,6 +267,11 @@ export default class Nav extends React.Component {
 				<button className="toggle-button" onClick={NavUtil.toggle}>
 					Toggle Navigation Menu
 				</button>
+				<Notification
+					title={notificationTitle}
+					text={notificationText}
+					onClick={this.onClickExitNotification}
+				/>
 				<ul aria-hidden={isNavInaccessible} tabIndex="-1">
 					{list.map((item, index) => {
 						switch (item.type) {

packages/app/obojobo-document-engine/src/scripts/viewer/components/nav.scss

@@ -408,6 +408,12 @@
 	&.is-not-open .viewer--components--logo {
 		opacity: 0;
 	}
+
+	&.is-not-notification-enabled {
+		.nav-menu {
+			display: none;
+		}
+	}
 }
 
 .is-previewing .viewer--components--nav {

packages/app/obojobo-document-engine/src/scripts/viewer/components/notification.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import './notification.scss'
+
+class Notification extends React.Component {
+	constructor(props) {
+		super(props)
+		this.notificationRef = React.createRef()
+	}
+
+	render() {
+		return (
+			<div className="notification-banner nav-menu">
+				<div className="notification-header">
+					<h1>{this.props.title}</h1>
+					<button onClick={this.props.onClick} className="notification-exit-button">
+						X
+					</button>
+				</div>
+				<p>{this.props.text}</p>
+			</div>
+		)
+	}
+}
+
+export default Notification

packages/app/obojobo-document-engine/src/scripts/viewer/components/notification.scss

@@ -0,0 +1,57 @@
+@import '../../../scss/_includes.scss';
+
+$poppin-pink: #af1b5c;
+$focus-pink: #fbdae6;
+$white: white;
+
+h1 {
+	margin: 0;
+}
+
+p {
+	display: block;
+}
+
+.notification-banner {
+	background-color: $poppin-pink;
+	padding: 1.5em;
+	color: $white;
+	border-radius: 0.5em;
+}
+
+.notification-banner:hover {
+	background-color: $focus-pink;
+	color: $poppin-pink;
+	transition: all 0.2s ease;
+	-webkit-transition: all 0.2s ease;
+}
+
+.dashboard {
+	margin: 0.1em;
+	border-width: 1em;
+}
+
+.viewer--components--nav .nav-menu {
+	margin-top: 3.5em;
+	margin-left: 0.1em;
+	border-width: 0.5em;
+}
+
+.notification-header {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.notification-exit-button {
+	color: $poppin-pink;
+	background-color: $white;
+	border: none;
+	border-radius: 0.5em;
+}
+
+.notification-exit-button:hover {
+	color: $focus-pink;
+	background-color: $poppin-pink;
+}