Add "App Status" banner (#3531)

* Basic AppStatus functioning with fake data

* More URLs to test

* New properly functional static resource

* Streamlined with proper comments

* Documentation update

* Add autofocus

* Removed unnecessary autofocus code

* Apparently React's autofocus is named autoFocus

app/partials/app-status.jsx

@@ -0,0 +1,87 @@
+/*
+"App Status" Banner
+===================
+
+The AppStatus banner has one job: it displays a static message to the users, if
+it detects a non-empty "status message" file at a specified static URL. 
+(The static resource is defined by the hardcoded APP_STATUS_URL.)
+
+Intended use: Zooniverse admins can manually change the status file (e.g. via
+AWS CLI) so we can quickly notify zooniverse.org users of certain messages,
+notably in emergencies, e.g. "Sorry folks but the animals have escaped, brb"
+
+Expected Input/Output:
+* static file found, is non-empty => show contents of static file in banner
+* static file found, is empty => don't show status banner
+* static file not found (403, 404, etc) => don't show status banner
+
+Assumptions:
+* the static "status message" resource is stored on a reliable, scalable host.
+* fetch() polyfill is available.
+
+See https://github.com/zooniverse/Panoptes-Front-End/issues/3530 for initial
+feature specs.
+
+(shaun.a.noordin 20170301)
+********************************************************************************
+ */
+
+import React from 'react';
+
+const APP_STATUS_URL = 'https://static.zooniverse.org/zooniverse.org-status.txt';
+
+export default class AppStatus extends React.Component {
+  constructor(props) {
+    super(props);
+    this.button = null;
+
+    this.state = {
+      show: false,
+      message: '',
+    };
+  }
+
+  componentDidMount() {  //Display only first time user loads zooniverse.org
+    fetch(APP_STATUS_URL, { mode: 'cors' })
+    .then((response) => {
+      if (!response.ok) {
+        console.error('AppStatus: ERROR')
+        throw Error(response.statusText);
+      }
+
+      return response.text();
+    })
+    .then((text) => {
+      console.log('AppStatus: Received status data from ' + APP_STATUS_URL + '.');
+      if (!text || text === '') {
+        console.log('AppStatus: Nothing to report.');
+      } else {
+        this.setState({
+          show: true,
+          message: text,
+        });
+      }
+    })
+    .catch((err) => {
+      console.error('AppStatus: No status data from ' + APP_STATUS_URL + '. ', err);
+    });
+  }
+
+  render() {
+    if (!this.state.show) return null;
+    if (!this.state.message || this.state.message === '') return null;
+
+    return (
+      <div className="app-status">
+        <button className="fa fa-close" onClick={this.hide.bind(this)} autoFocus={true}></button>
+        <div className="message">{this.state.message}</div>
+      </div>
+    );
+  }
+
+  hide() {
+    this.setState({
+      show: false,
+    });
+  }
+}

app/partials/app.cjsx

@@ -1,5 +1,6 @@
 React = require 'react'
 auth = require 'panoptes-client/lib/auth'
+`import AppStatus from './app-status';`
 IOStatus = require './io-status'
 AppLayout = require('../layout').default
 GeordiLogger = require '../lib/geordi-logger'
@@ -70,6 +71,7 @@ PanoptesApp = React.createClass
 
   render: ->
     <div className="panoptes-main">
+      <AppStatus />
       <IOStatus />
       <AppLayout {...@props}>
         {React.cloneElement @props.children, user: @state.user}

css/app-status.styl

@@ -0,0 +1,17 @@
+.app-status
+  background: BACKGROUND
+  border: 1px solid ZOONIVERSE_TEAL
+  border-radius: 1em
+  padding: 0.5em 1em
+  position: fixed
+  left: 50%
+  bottom: 1em
+  transform: translateX(-50%);
+  width: 80%
+  max-width: 40em
+  z-index: 1000
+  box-shadow: 0 0 0.5em BACKGROUND
+
+  button.fa-close
+    float: right
+    cursor: pointer

css/main.styl

@@ -37,6 +37,7 @@
 @require './search'
 @require './subject-viewer'
 @require './frame-annotator'
+@require './app-status'
 
 // Home page
 @require "./home-page"