Added Support for Dismissible Alerts

analytics_dashboard/analytics_dashboard/settings/base.py

@@ -214,6 +214,7 @@ DJANGO_APPS = (
     'django.contrib.admin',
     'waffle',
     'django_countries',
+    'announcements',
 )
 
 # Apps specific for this project go here.

analytics_dashboard/analytics_dashboard/urls.py

@@ -31,6 +31,7 @@ urlpatterns = patterns(
     url(r'^accounts/logout_then_login/$', views.logout_then_login, name='logout_then_login'),
     url(r'^test/auto_auth/$', views.AutoAuth.as_view(), name='auto_auth'),
     url(r'^auth/error/$', 'django.views.defaults.server_error', {'template_name': 'auth_error.html'}, name='auth_error'),
+    url(r'^announcements/', include('announcements.urls')),
 )
 
 if settings.DEBUG:  # pragma: no cover

analytics_dashboard/static/js/application-main.js

@@ -2,6 +2,13 @@
  * Load scripts needed across the application.
  */
 
-require(['bootstrap', 'bootstrap_accessibility', 'vendor/domReady!', 'load/init-page'], function (bootstrap, bootstrap_accessibility, doc, page) {
-    'use strict';
-});
+require(['bootstrap', 'bootstrap_accessibility', 'vendor/domReady!', 'load/init-page', 'views/announcement-view'],
+    function (bootstrap, bootstrap_accessibility, doc, page, AnnouncementView) {
+        'use strict';
+
+        // Instantiate the announcement view(s)
+        $('[data-view=announcement]').each(function (index, element) {
+            new AnnouncementView({el: element});
+        });
+    }
+);

analytics_dashboard/static/js/test/spec-runner.js

@@ -20,7 +20,8 @@ if(isBrowser) {
         config.baseUrl + 'js/spec/specs/world-map-view-spec.js',
         config.baseUrl + 'js/spec/specs/tracking-view-spec.js',
         config.baseUrl + 'js/spec/specs/utils-spec.js',
-        config.baseUrl + 'js/spec/specs/globalization-spec.js'
+        config.baseUrl + 'js/spec/specs/globalization-spec.js',
+        config.baseUrl + 'js/spec/specs/announcement-view-spec.js'
     ];
 } else {
     // you can automatically get the test files using karma's configs

analytics_dashboard/static/js/test/specs/announcement-view-spec.js

+define(['views/announcement-view', 'jquery', 'underscore'], function (AnnouncementView, $, _) {
+    'use strict';
+
+    var view, $el,
+        csrftoken = '1234',
+        url = 'http://example.com',
+        template = _.template('<div id="announcement" data-dismiss-url="<%=url%>"><input type="hidden" name="csrfmiddlewaretoken" value="<%=csrftoken%>"</div>');
+
+    describe('AnnouncementView', function () {
+        beforeEach(function () {
+            // Create DOM elements
+            $el = $(template({url: url, csrftoken: csrftoken}));
+            $(document.body).append($el);
+
+            // Instantiate view
+            view = new AnnouncementView({el: $el[0]});
+        });
+
+        describe('init', function () {
+            it('should retrieve the CSRF token from the hidden input', function () {
+                expect(view.csrftoken).toEqual(csrftoken);
+            });
+        });
+
+        it('should call dismiss when the closed.bs.alert event is fired', function () {
+            spyOn(view, 'dismiss');
+
+            view.delegateEvents();
+            $el.trigger('closed.bs.alert');
+
+            expect(view.dismiss).toHaveBeenCalled();
+        });
+
+        describe('dismiss', function () {
+            var server;
+
+            beforeEach(function () {
+                server = sinon.fakeServer.create();
+                view.dismiss();
+            });
+
+            afterEach(function () {
+                server.restore();
+            });
+
+            it('should add the CSRF token to the header', function () {
+                var request = server.requests[0];
+                expect(request.requestHeaders['X-CSRFToken']).toEqual(csrftoken);
+            });
+
+            it('should POST to the dismiss URL', function () {
+                view.dismiss();
+
+                var request = server.requests[0];
+                expect(request.method).toEqual('POST');
+                expect(request.url).toEqual(url);
+            });
+        });
+    });
+});

analytics_dashboard/static/js/views/announcement-view.js

+define(['backbone', 'jquery'], function (Backbone, $) {
+    'use strict';
+
+    var AnnouncementView = Backbone.View.extend({
+        events: {
+            'closed.bs.alert': 'dismiss'
+        },
+
+        initialize: function () {
+            this.csrftoken = $('input[name=csrfmiddlewaretoken]', this.$el).val();
+            this.render();
+        },
+
+        render: function () {
+            this.delegateEvents();
+            return this;
+        },
+
+        dismiss: function () {
+            var self = this,
+                url = this.$el.data('dismiss-url');
+
+            $.ajaxSetup({
+                beforeSend: function (xhr) {
+                    xhr.setRequestHeader('X-CSRFToken', self.csrftoken);
+                }
+            });
+
+            if (url) {
+                $.post(url);
+            }
+        }
+    });
+
+    return AnnouncementView;
+});

analytics_dashboard/static/sass/_developer.scss

@@ -311,6 +311,12 @@ table.dataTable thead th.sorting_desc:after {
   padding-bottom: $padding-large-vertical * 1.5;
   padding-top: $padding-large-vertical;
 
+  .dismiss {
+    float: right;
+    margin-right: $padding-small-horizontal;
+    cursor: pointer;
+    font-size: $font-size-large;
+  }
 
   .icon {
     color: $edx-blue;

analytics_dashboard/templates/announcements.html

-{% if announcement %}
-  <div class="announcement-container">
-    <div class="container">
-      <div class="row">
-        <div class="col-xs-1 col-md-1">
-          <div class="icon"><i class="fa fa-bullhorn"></i></div>
-        </div>
+{% load announcements_tags %}
+
+{% announcements as announcements_list %}
+
+{% with announcements_list|first as announcement %}
+    {% if announcement %}
+        <div class="announcement-container" role="alert" data-dismiss-url="{{ announcement.dismiss_url }}"
+             data-view="announcement">
+            <div class="container"
+            {% csrf_token %}
+            <a class="dismiss" data-dismiss="alert">
+                <span aria-hidden="true"><i class="fa fa-times"></i></span><span class="sr-only">Close</span>
+            </a>
 
-        <div class="col-xs-9 col-md-9">
-          <div class="message">
-            <div class="title">{{ announcement.title }}</div>
-            <div class="body">{{ announcement.body }}</div>
-          </div>
+            <div class="container">
+                <div class="row">
+                    <div class="col-xs-1 col-md-1">
+                        <div class="icon"><i class="fa fa-bullhorn"></i></div>
+                    </div>
+
+                    <div class="col-xs-9 col-md-9">
+                        <div class="message">
+                            <div class="title">{{ announcement.title }}</div>
+                            <div class="body">{{ announcement.content|safe }}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
         </div>
-      </div>
-    </div>
-  </div>
-{% endif %}
+    {% endif %}
+{% endwith %}

karma.conf.js

@@ -10,7 +10,7 @@ module.exports = function (config) {
 
         // frameworks to use
         // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-        frameworks: ['jasmine', 'requirejs'],
+        frameworks: ['jasmine', 'requirejs', 'sinon'],
 
 
         // list of files / patterns to load in the browser
@@ -40,7 +40,8 @@ module.exports = function (config) {
             'karma-jasmine',
             'karma-requirejs',
             'karma-phantomjs-launcher',
-            'karma-coverage'
+            'karma-coverage',
+            'karma-sinon'
         ],
 
         // test results reporter to use

package.json

@@ -18,7 +18,9 @@
     "karma-jasmine": "^0.1.5",
     "karma-phantomjs-launcher": "^0.1.4",
     "karma-requirejs": "^0.2.2",
+    "karma-sinon": "^1.0.3",
     "phantomjs": "^1.9.11",
-    "requirejs": "^2.1.14"
+    "requirejs": "^2.1.14",
+    "sinon": "^1.10.3"
   }
 }

requirements/base.txt

@@ -10,6 +10,7 @@ logutils==0.3.3				# BSD
 python-social-auth==0.2.0   # BSD
 django-waffle==0.10			# BSD
 django-countries<3.0.0      # MIT
+django-announcements==1.2.0 # MIT
 -e git+https://github.com/edx/edx-analytics-data-api-client.git@0.2.3#egg=edx-analytics-data-api-client # edX
 -e git+https://github.com/edx/django-lang-pref-middleware.git@0.1.0#egg=django-lang-pref-middleware
 -e git+https://github.com/edx/i18n-tools.git@0d7847f9dfa2281640527b4dc51f5854f950f9b7#egg=i18n_tools