Paginate edxnotes frontend

TNL-3908

common/test/acceptance/pages/lms/edxnotes.py

@@ -114,7 +114,7 @@ class EdxNotesPageItem(NoteChild):
     """
     BODY_SELECTOR = ".note"
     UNIT_LINK_SELECTOR = "a.reference-unit-link"
-    TAG_SELECTOR = "a.reference-tags"
+    TAG_SELECTOR = "span.reference-tags"
 
     def go_to_unit(self, unit_page=None):
         self.q(css=self._bounded_selector(self.UNIT_LINK_SELECTOR)).click()

common/test/acceptance/tests/lms/test_lms_edxnotes.py

 """
 Test LMS Notes
 """
+from unittest import skip
 from uuid import uuid4
 from datetime import datetime
 from nose.plugins.attrib import attr
@@ -850,6 +851,7 @@ class EdxNotesPageTest(EventsTestMixin, EdxNotesTestMixin):
         self.assert_viewed_event('Search Results')
         self.assert_search_event('note', 4)
 
+    @skip("scroll to tag functionality is removed")
     def test_scroll_to_tag_recent_activity(self):
         """
         Scenario: Can scroll to a tag group from the Recent Activity view (default view)
@@ -861,6 +863,7 @@ class EdxNotesPageTest(EventsTestMixin, EdxNotesTestMixin):
         self.notes_page.visit()
         self._scroll_to_tag_and_verify("pear", 3)
 
+    @skip("scroll to tag functionality is removed")
     def test_scroll_to_tag_course_structure(self):
         """
         Scenario: Can scroll to a tag group from the Course Structure view
@@ -872,6 +875,7 @@ class EdxNotesPageTest(EventsTestMixin, EdxNotesTestMixin):
         self.notes_page.visit().switch_to_tab("structure")
         self._scroll_to_tag_and_verify("squash", 5)
 
+    @skip("scroll to tag functionality is removed")
     def test_scroll_to_tag_search(self):
         """
         Scenario: Can scroll to a tag group from the Search Results view
@@ -884,6 +888,7 @@ class EdxNotesPageTest(EventsTestMixin, EdxNotesTestMixin):
         self.notes_page.visit().search("note")
         self._scroll_to_tag_and_verify("pumpkin", 4)
 
+    @skip("scroll to tag functionality is removed")
     def test_scroll_to_tag_from_tag_view(self):
         """
         Scenario: Can scroll to a tag group from the Tags view

lms/djangoapps/edxnotes/helpers.py

@@ -106,6 +106,7 @@ def send_request(user, course_id, page, page_size, path="", text=None):
             params=params
         )
     except RequestException:
+        log.error("Failed to connect to edx-notes-api: url=%s, params=%s", url, str(params))
         raise EdxNotesServiceUnavailable(_("EdxNotes Service is unavailable. Please try again in a few minutes."))
 
     return response
@@ -141,6 +142,7 @@ def preprocess_collection(user, course, collection):
     store = modulestore()
     filtered_collection = list()
     cache = {}
+    include_extra_info = settings.NOTES_DISABLED_TABS == []
     with store.bulk_operations(course.id):
         for model in collection:
             update = {
@@ -176,42 +178,46 @@ def preprocess_collection(user, course, collection):
                 log.debug("Unit not found: %s", usage_key)
                 continue
 
-            section = unit.get_parent()
-            if not section:
-                log.debug("Section not found: %s", usage_key)
-                continue
-            if section in cache:
-                usage_context = cache[section]
-                usage_context.update({
-                    "unit": get_module_context(course, unit),
-                })
-                model.update(usage_context)
-                cache[usage_id] = cache[unit] = usage_context
-                filtered_collection.append(model)
-                continue
-
-            chapter = section.get_parent()
-            if not chapter:
-                log.debug("Chapter not found: %s", usage_key)
-                continue
-            if chapter in cache:
-                usage_context = cache[chapter]
-                usage_context.update({
-                    "unit": get_module_context(course, unit),
-                    "section": get_module_context(course, section),
-                })
-                model.update(usage_context)
-                cache[usage_id] = cache[unit] = cache[section] = usage_context
-                filtered_collection.append(model)
-                continue
+            if include_extra_info:
+                section = unit.get_parent()
+                if not section:
+                    log.debug("Section not found: %s", usage_key)
+                    continue
+                if section in cache:
+                    usage_context = cache[section]
+                    usage_context.update({
+                        "unit": get_module_context(course, unit),
+                    })
+                    model.update(usage_context)
+                    cache[usage_id] = cache[unit] = usage_context
+                    filtered_collection.append(model)
+                    continue
+
+                chapter = section.get_parent()
+                if not chapter:
+                    log.debug("Chapter not found: %s", usage_key)
+                    continue
+                if chapter in cache:
+                    usage_context = cache[chapter]
+                    usage_context.update({
+                        "unit": get_module_context(course, unit),
+                        "section": get_module_context(course, section),
+                    })
+                    model.update(usage_context)
+                    cache[usage_id] = cache[unit] = cache[section] = usage_context
+                    filtered_collection.append(model)
+                    continue
 
             usage_context = {
                 "unit": get_module_context(course, unit),
-                "section": get_module_context(course, section),
-                "chapter": get_module_context(course, chapter),
+                "section": get_module_context(course, section) if include_extra_info else {},
+                "chapter": get_module_context(course, chapter) if include_extra_info else {},
             }
             model.update(usage_context)
-            cache[usage_id] = cache[unit] = cache[section] = cache[chapter] = usage_context
+            if include_extra_info:
+                cache[section] = cache[chapter] = usage_context
+
+            cache[usage_id] = cache[unit] = usage_context
             filtered_collection.append(model)
 
     return filtered_collection
@@ -319,16 +325,24 @@ def get_notes(request, course, page=DEFAULT_PAGE, page_size=DEFAULT_PAGE_SIZE, t
     try:
         collection = json.loads(response.content)
     except ValueError:
-        raise EdxNotesParseError(_("Invalid response received from notes api."))
+        log.error("Invalid JSON response received from notes api: response_content=%s", response.content)
+        raise EdxNotesParseError(_("Invalid JSON response received from notes api."))
 
     # Verify response dict structure
-    expected_keys = ['count', 'results', 'num_pages', 'start', 'next', 'previous', 'current_page']
+    expected_keys = ['total', 'rows', 'num_pages', 'start', 'next', 'previous', 'current_page']
     keys = collection.keys()
     if not keys or not all(key in expected_keys for key in keys):
-        raise EdxNotesParseError(_("Invalid response received from notes api."))
-
-    filtered_results = preprocess_collection(request.user, course, collection['results'])
+        log.error("Incorrect data received from notes api: collection_data=%s", str(collection))
+        raise EdxNotesParseError(_("Incorrect data received from notes api."))
+
+    filtered_results = preprocess_collection(request.user, course, collection['rows'])
+    # Notes API is called from:
+    # 1. The annotatorjs in courseware. It expects these attributes to be named "total" and "rows".
+    # 2. The Notes tab Javascript proxied through LMS. It expects these attributes to be called "count" and "results".
+    collection['count'] = collection['total']
+    del collection['total']
     collection['results'] = filtered_results
+    del collection['rows']
 
     collection['next'], collection['previous'] = construct_pagination_urls(
         request,

lms/djangoapps/edxnotes/tests.py

@@ -33,6 +33,16 @@ from student.tests.factories import UserFactory, CourseEnrollmentFactory
 
 
 NOTES_API_EMPTY_RESPONSE = {
+    "total": 0,
+    "rows": [],
+    "current_page": 1,
+    "start": 0,
+    "next": None,
+    "previous": None,
+    "num_pages": 0,
+}
+
+NOTES_VIEW_EMPTY_RESPONSE = {
     "count": 0,
     "results": [],
     "current_page": 1,
@@ -297,13 +307,13 @@ class EdxNotesHelpersTest(ModuleStoreTestCase):
         """
         mock_get.return_value.content = json.dumps(
             {
-                "count": 2,
+                "total": 2,
                 "current_page": 1,
                 "start": 0,
                 "next": None,
                 "previous": None,
                 "num_pages": 1,
-                "results": [
+                "rows": [
                     {
                         u"quote": u"quote text",
                         u"text": u"text",
@@ -404,13 +414,13 @@ class EdxNotesHelpersTest(ModuleStoreTestCase):
         Tests the result if correct data is received.
         """
         mock_get.return_value.content = json.dumps({
-            "count": 2,
+            "total": 2,
             "current_page": 1,
             "start": 0,
             "next": None,
             "previous": None,
             "num_pages": 1,
-            "results": [
+            "rows": [
                 {
                     u"quote": u"quote text",
                     u"text": u"text",
@@ -511,7 +521,7 @@ class EdxNotesHelpersTest(ModuleStoreTestCase):
         """
         mock_get.return_value.content = json.dumps(NOTES_API_EMPTY_RESPONSE)
         self.assertItemsEqual(
-            NOTES_API_EMPTY_RESPONSE,
+            NOTES_VIEW_EMPTY_RESPONSE,
             json.loads(helpers.get_notes(self.request, self.course))
         )
 
@@ -1006,19 +1016,17 @@ class EdxNotesViewsTest(ModuleStoreTestCase):
         """
         Tests that search notes successfully respond if EdxNotes feature is enabled.
         """
-        mock_search.return_value = json.dumps(NOTES_API_EMPTY_RESPONSE)
+        mock_search.return_value = json.dumps(NOTES_VIEW_EMPTY_RESPONSE)
         enable_edxnotes_for_the_course(self.course, self.user.id)
         response = self.client.get(self.notes_url, {"text": "test"})
-        self.assertEqual(json.loads(response.content), NOTES_API_EMPTY_RESPONSE)
+        self.assertEqual(json.loads(response.content), NOTES_VIEW_EMPTY_RESPONSE)
         self.assertEqual(response.status_code, 200)
 
     @patch.dict("django.conf.settings.FEATURES", {"ENABLE_EDXNOTES": False})
-    @patch("edxnotes.views.get_notes", autospec=True)
-    def test_search_notes_is_disabled(self, mock_search):
+    def test_search_notes_is_disabled(self):
         """
         Tests that 404 status code is received if EdxNotes feature is disabled.
         """
-        mock_search.return_value = json.dumps(NOTES_API_EMPTY_RESPONSE)
         response = self.client.get(self.notes_url, {"text": "test"})
         self.assertEqual(response.status_code, 404)
 

lms/djangoapps/edxnotes/views.py

@@ -55,8 +55,10 @@ def edxnotes(request, course_id):
         "course": course,
         "notes_endpoint": reverse("notes", kwargs={"course_id": course_id}),
         "notes": notes_info,
+        "page_size": DEFAULT_PAGE_SIZE,
         "debug": json.dumps(settings.DEBUG),
         'position': None,
+        'disabled_tabs': settings.NOTES_DISABLED_TABS,
     }
 
     if len(json.loads(notes_info)['results']) == 0:

lms/envs/bok_choy.py

@@ -91,6 +91,8 @@ XQUEUE_INTERFACE['url'] = 'http://localhost:8040'
 EDXNOTES_PUBLIC_API = 'http://localhost:8042/api/v1'
 EDXNOTES_INTERNAL_API = 'http://localhost:8042/api/v1'
 
+NOTES_DISABLED_TABS = []
+
 # Silence noisy logs
 import logging
 LOG_OVERRIDES = [

lms/envs/common.py

@@ -2521,6 +2521,9 @@ ENROLLMENT_COURSE_DETAILS_CACHE_TIMEOUT = 60
 if FEATURES['ENABLE_EDXNOTES']:
     OAUTH_ID_TOKEN_EXPIRATION = 60 * 60
 
+# These tabs are currently disabled
+NOTES_DISABLED_TABS = ['course_structure', 'tags']
+
 # Configuration used for generating PDF Receipts/Invoices
 PDF_RECEIPT_TAX_ID = 'add here'
 PDF_RECEIPT_FOOTER_TEXT = 'add your own specific footer text here'

lms/envs/test.py

@@ -509,6 +509,8 @@ MONGODB_LOG = {
     'db': 'xlog',
 }
 
+NOTES_DISABLED_TABS = []
+
 # Enable EdxNotes for tests.
 FEATURES['ENABLE_EDXNOTES'] = True
 

lms/static/js/edxnotes/collections/notes.js

-;(function (define, undefined) {
+;(function (define) {
 'use strict';
 define([
-    'backbone', 'js/edxnotes/models/note'
-], function (Backbone, NoteModel) {
-    var NotesCollection = Backbone.Collection.extend({
+    'underscore', 'common/js/components/collections/paging_collection', 'js/edxnotes/models/note'
+], function (_, PagingCollection, NoteModel) {
+    return PagingCollection.extend({
         model: NoteModel,
 
+        initialize: function(models, options) {
+            PagingCollection.prototype.initialize.call(this);
+
+            this.perPage = options.perPage;
+            this.server_api = _.pick(PagingCollection.prototype.server_api, "page", "page_size");
+            if (options.text) {
+                this.server_api.text = options.text;
+            }
+        },
+
         /**
          * Returns course structure from the list of notes.
          * @return {Object}
@@ -17,30 +27,26 @@ define([
                     sections = {},
                     units = {};
 
-                if (!courseStructure) {
-                    this.each(function (note) {
-                        var chapter = note.get('chapter'),
-                            section = note.get('section'),
-                            unit = note.get('unit');
+                this.each(function (note) {
+                    var chapter = note.get('chapter'),
+                        section = note.get('section'),
+                        unit = note.get('unit');
 
-                        chapters[chapter.location] = chapter;
-                        sections[section.location] = section;
-                        units[unit.location] = units[unit.location] || [];
-                        units[unit.location].push(note);
-                    });
+                    chapters[chapter.location] = chapter;
+                    sections[section.location] = section;
+                    units[unit.location] = units[unit.location] || [];
+                    units[unit.location].push(note);
+                });
 
-                    courseStructure = {
-                        chapters: _.sortBy(_.toArray(chapters), function (c) {return c.index;}),
-                        sections: sections,
-                        units: units
-                    };
-                }
+                courseStructure = {
+                    chapters: _.sortBy(_.toArray(chapters), function (c) {return c.index;}),
+                    sections: sections,
+                    units: units
+                };
 
                 return courseStructure;
             };
         }())
     });
-
-    return NotesCollection;
 });
 }).call(this, define || RequireJS.define);

lms/static/js/edxnotes/views/notes_page.js

@@ -15,17 +15,19 @@ define([
             this.options = options;
             this.tabsCollection = new TabsCollection();
 
-            // Must create the Tags view first to get the "scrollToTag" method.
-            this.tagsView = new TagsView({
-                el: this.el,
-                collection: this.collection,
-                tabsCollection: this.tabsCollection
-            });
+            if (!_.contains(this.options.disabledTabs, 'tags')) {
+                // Must create the Tags view first to get the "scrollToTag" method.
+                this.tagsView = new TagsView({
+                    el: this.el,
+                    collection: this.collection,
+                    tabsCollection: this.tabsCollection
+                });
 
-            scrollToTag = this.tagsView.scrollToTag;
+                scrollToTag = this.tagsView.scrollToTag;
 
-            // Remove the Tags model from the tabs collection because it should not appear first.
-            tagsModel = this.tabsCollection.shift();
+                // Remove the Tags model from the tabs collection because it should not appear first.
+                tagsModel = this.tabsCollection.shift();
+            }
 
             this.recentActivityView = new RecentActivityView({
                 el: this.el,
@@ -34,20 +36,23 @@ define([
                 scrollToTag: scrollToTag
             });
 
-            this.courseStructureView = new CourseStructureView({
-                el: this.el,
-                collection: this.collection,
-                tabsCollection: this.tabsCollection,
-                scrollToTag: scrollToTag
-            });
+            if (!_.contains(this.options.disabledTabs, 'course_structure')) {
+                this.courseStructureView = new CourseStructureView({
+                    el: this.el,
+                    collection: this.collection,
+                    tabsCollection: this.tabsCollection,
+                    scrollToTag: scrollToTag
+                });
 
-            // Add the Tags model after the Course Structure model.
-            this.tabsCollection.push(tagsModel);
+                // Add the Tags model after the Course Structure model.
+                this.tabsCollection.push(tagsModel);
+            }
 
             this.searchResultsView = new SearchResultsView({
                 el: this.el,
                 tabsCollection: this.tabsCollection,
                 debug: this.options.debug,
+                perPage: this.options.perPage,
                 createTabOnInitialization: false,
                 scrollToTag: scrollToTag
             });

lms/static/js/edxnotes/views/page_factory.js

@@ -6,19 +6,30 @@ define([
     /**
      * Factory method for the Notes page.
      * @param {Object} params Params for the Notes page.
-     * @param {Array} params.notesList A list of note models.
+     * @param {List} params.disabledTabs Names of disabled tabs, these tabs will not be shown.
+     * @param {Object} params.notes Paginated notes info.
+     * @param {Number} params.pageSize Number of notes per page.
      * @param {Boolean} params.debugMode Enable the flag to see debug information.
      * @param {String} params.endpoint The endpoint of the store.
      * @return {Object} An instance of NotesPageView.
      */
     return function (params) {
-        var collection = new NotesCollection(params.notesList);
+        var collection = new NotesCollection(
+            params.notes,
+            {
+                url: params.notesEndpoint,
+                perPage: params.pageSize,
+                parse: true
+            }
+        );
 
         return new NotesPageView({
             el: $('.wrapper-student-notes').get(0),
             collection: collection,
             debug: params.debugMode,
-            endpoint: params.endpoint
+            endpoint: params.endpoint,
+            perPage: params.pageSize,
+            disabledTabs: params.disabledTabs
         });
     };
 });

lms/static/js/edxnotes/views/search_box.js

@@ -43,15 +43,12 @@ define([
          * @return {Array}
          */
         prepareData: function (data) {
-            var collection;
-
-            if (!(data && _.has(data, 'total') && _.has(data, 'rows'))) {
+            if (!(data && _.has(data, 'count') && _.has(data, 'results'))) {
                 this.logger.log('Wrong data', data, this.searchQuery);
                 return null;
             }
 
-            collection = new NotesCollection(data.rows);
-            return [collection, data.total, this.searchQuery];
+            return [this.collection, this.searchQuery];
         },
 
         /**
@@ -99,8 +96,8 @@ define([
             if (args) {
                 this.options.search.apply(this, args);
                 this.logger.emit('edx.course.student_notes.searched', {
-                    'number_of_results': args[1],
-                    'search_string': args[2]
+                    'number_of_results': args[0].totalCount,
+                    'search_string': args[1]
                 });
             } else {
                 this.options.error(this.errorMessage, this.searchQuery);
@@ -144,15 +141,15 @@ define([
          * @return {jQuery.Deferred}
          */
         sendRequest: function (text) {
-            var settings = {
-                url: this.el.action,
-                type: this.el.method,
-                dataType: 'json',
-                data: {text: text}
-            };
-
-            this.logger.log(settings);
-            return $.ajax(settings);
+            this.collection = new NotesCollection(
+                [],
+                {
+                    text: text,
+                    perPage: this.options.perPage,
+                    url: this.el.action
+                }
+            );
+            return this.collection.goTo(1);
         }
     });
 

lms/static/js/edxnotes/views/tab_panel.js

 ;(function (define, undefined) {
 'use strict';
-define(['gettext', 'underscore', 'backbone', 'js/edxnotes/views/note_item'],
-function (gettext, _, Backbone, NoteItemView) {
+define(['gettext', 'underscore', 'backbone', 'js/edxnotes/views/note_item',
+    'common/js/components/views/paging_header', 'common/js/components/views/paging_footer'],
+function (gettext, _, Backbone, NoteItemView, PagingHeaderView, PagingFooterView) {
     var TabPanelView = Backbone.View.extend({
         tagName: 'section',
         className: 'tab-panel',
@@ -13,14 +14,30 @@ function (gettext, _, Backbone, NoteItemView) {
 
         initialize: function () {
             this.children = [];
+            if (this.options.createHeaderFooter) {
+                this.pagingHeaderView = new PagingHeaderView({collection: this.collection});
+                this.pagingFooterView = new PagingFooterView({collection: this.collection});
+            }
+            if (this.hasOwnProperty('collection')) {
+                this.listenTo(this.collection, 'page_changed', this.render);
+            }
         },
 
         render: function () {
             this.$el.html(this.getTitle());
+            this.renderView(this.pagingHeaderView);
             this.renderContent();
+            this.renderView(this.pagingFooterView);
             return this;
         },
 
+        renderView: function(view) {
+            if (this.options.createHeaderFooter && this.collection.models.length) {
+                this.$el.append(view.render().el);
+                view.delegateEvents();
+            }
+        },
+
         renderContent: function () {
             return this;
         },

lms/static/js/edxnotes/views/tab_view.js

@@ -14,7 +14,8 @@ define([
         initialize: function (options) {
             _.bindAll(this, 'showLoadingIndicator', 'hideLoadingIndicator');
             this.options = _.defaults(options || {}, {
-                createTabOnInitialization: true
+                createTabOnInitialization: true,
+                createHeaderFooter: true
             });
 
             if (this.options.createTabOnInitialization) {
@@ -64,7 +65,13 @@ define([
 
         getSubView: function () {
             var collection = this.getCollection();
-            return new this.PanelConstructor({collection: collection, scrollToTag: this.options.scrollToTag});
+            return new this.PanelConstructor(
+                {
+                    collection: collection,
+                    scrollToTag: this.options.scrollToTag,
+                    createHeaderFooter: this.options.createHeaderFooter
+                }
+            );
         },
 
         destroySubView: function () {

lms/static/js/edxnotes/views/tabs/search_results.js

@@ -58,6 +58,7 @@ define([
             this.searchBox = new SearchBoxView({
                 el: document.getElementById('search-notes-form'),
                 debug: this.options.debug,
+                perPage: this.options.perPage,
                 beforeSearchStart: this.onBeforeSearchStart,
                 search: this.onSearch,
                 error: this.onSearchError
@@ -81,7 +82,8 @@ define([
                     return new this.PanelConstructor({
                         collection: collection,
                         searchQuery: this.searchResults.searchQuery,
-                        scrollToTag: this.options.scrollToTag
+                        scrollToTag: this.options.scrollToTag,
+                        createHeaderFooter: this.options.createHeaderFooter
                     });
                 } else {
                     return new this.NoResultsViewConstructor({
@@ -122,10 +124,9 @@ define([
             }
         },
 
-        onSearch: function (collection, total, searchQuery) {
+        onSearch: function (collection, searchQuery) {
             this.searchResults = {
                 collection: collection,
-                total: total,
                 searchQuery: searchQuery
             };
 

lms/static/js/spec/edxnotes/collections/notes_spec.js

@@ -6,7 +6,7 @@ define([
         var notes = Helpers.getDefaultNotes();
 
         beforeEach(function () {
-            this.collection = new NotesCollection(notes);
+            this.collection = new NotesCollection(notes, {perPage: 10, parse: true});
         });
 
         it('can return correct course structure', function () {
@@ -23,11 +23,22 @@ define([
                 'i4x://section/2': Helpers.getSection('First Section', 2, [3])
             });
 
-            expect(structure.units).toEqual({
+            var compareUnits = function (structureUnits, collectionUnits) {
+                expect(structureUnits.length === collectionUnits.length).toBeTruthy();
+                for(var i = 0; i < structureUnits.length; i++) {
+                    expect(structureUnits[i].attributes).toEqual(collectionUnits[i].attributes);
+                }
+            };
+
+            var units = {
                 'i4x://unit/0': [this.collection.at(0), this.collection.at(1)],
                 'i4x://unit/1': [this.collection.at(2)],
                 'i4x://unit/2': [this.collection.at(3)],
                 'i4x://unit/3': [this.collection.at(4)]
+            };
+
+            _.each(units, function(value, key){
+                compareUnits(structure.units[key], value);
             });
         });
     });

lms/static/js/spec/edxnotes/helpers.js

-define(['underscore'], function(_) {
+define(['underscore', 'URI', 'common/js/spec_helpers/ajax_helpers'], function(_, URI, AjaxHelpers) {
     'use strict';
     var B64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
         LONG_TEXT, PRUNED_TEXT, TRUNCATED_TEXT, SHORT_TEXT,
-        base64Encode, makeToken, getChapter, getSection, getUnit, getDefaultNotes;
+        base64Encode, makeToken, getChapter, getSection, getUnit, getDefaultNotes,
+        verifyUrl, verifyRequestParams, createNotesData, respondToRequest,
+        verifyPaginationInfo, verifyPageData;
 
     LONG_TEXT = [
         'Adipisicing elit, sed do eiusmod tempor incididunt ',
@@ -106,57 +108,131 @@ define(['underscore'], function(_) {
 
     getDefaultNotes = function () {
         // Note that the server returns notes in reverse chronological order (newest first).
-        return [
-            {
-                chapter: getChapter('Second Chapter', 0, 1, [1, 'w_n', 0]),
-                section: getSection('Third Section', 0, ['w_n', 1, 0]),
-                unit: getUnit('Fourth Unit', 0),
-                created: 'December 11, 2014 at 11:12AM',
-                updated: 'December 11, 2014 at 11:12AM',
-                text: 'Third added model',
-                quote: 'Note 4',
-                tags: ['Pumpkin', 'pumpkin', 'yummy']
-            },
-            {
-                chapter: getChapter('Second Chapter', 0, 1, [1, 'w_n', 0]),
-                section: getSection('Third Section', 0, ['w_n', 1, 0]),
-                unit: getUnit('Fourth Unit', 0),
-                created: 'December 11, 2014 at 11:11AM',
-                updated: 'December 11, 2014 at 11:11AM',
-                text: 'Third added model',
-                quote: 'Note 5'
-            },
-            {
-                chapter: getChapter('Second Chapter', 0, 1, [1, 'w_n', 0]),
-                section: getSection('Third Section', 0, ['w_n', 1, 0]),
-                unit: getUnit('Third Unit', 1),
-                created: 'December 11, 2014 at 11:11AM',
-                updated: 'December 11, 2014 at 11:11AM',
-                text: 'Second added model',
-                quote: 'Note 3',
-                tags: ['yummy']
-            },
-            {
-                chapter: getChapter('Second Chapter', 0, 1, [1, 'w_n', 0]),
-                section: getSection('Second Section', 1, [2]),
-                unit: getUnit('Second Unit', 2),
-                created: 'December 11, 2014 at 11:10AM',
-                updated: 'December 11, 2014 at 11:10AM',
-                text: 'First added model',
-                quote: 'Note 2',
-                tags: ['PUMPKIN', 'pie']
-            },
-            {
-                chapter: getChapter('First Chapter', 1, 0, [2]),
-                section: getSection('First Section', 2, [3]),
-                unit: getUnit('First Unit', 3),
-                created: 'December 11, 2014 at 11:10AM',
-                updated: 'December 11, 2014 at 11:10AM',
-                text: 'First added model',
-                quote: 'Note 1',
-                tags: ['pie', 'pumpkin']
-            }
-        ];
+        return {
+            'count': 5,
+            'current_page': 1,
+            'num_pages': 1,
+            'start': 0,
+            'next': null,
+            'previous': null,
+            'results': [
+                {
+                    chapter: getChapter('Second Chapter', 0, 1, [1, 'w_n', 0]),
+                    section: getSection('Third Section', 0, ['w_n', 1, 0]),
+                    unit: getUnit('Fourth Unit', 0),
+                    created: 'December 11, 2014 at 11:12AM',
+                    updated: 'December 11, 2014 at 11:12AM',
+                    text: 'Third added model',
+                    quote: 'Note 4',
+                    tags: ['Pumpkin', 'pumpkin', 'yummy']
+                },
+                {
+                    chapter: getChapter('Second Chapter', 0, 1, [1, 'w_n', 0]),
+                    section: getSection('Third Section', 0, ['w_n', 1, 0]),
+                    unit: getUnit('Fourth Unit', 0),
+                    created: 'December 11, 2014 at 11:11AM',
+                    updated: 'December 11, 2014 at 11:11AM',
+                    text: 'Third added model',
+                    quote: 'Note 5'
+                },
+                {
+                    chapter: getChapter('Second Chapter', 0, 1, [1, 'w_n', 0]),
+                    section: getSection('Third Section', 0, ['w_n', 1, 0]),
+                    unit: getUnit('Third Unit', 1),
+                    created: 'December 11, 2014 at 11:11AM',
+                    updated: 'December 11, 2014 at 11:11AM',
+                    text: 'Second added model',
+                    quote: 'Note 3',
+                    tags: ['yummy']
+                },
+                {
+                    chapter: getChapter('Second Chapter', 0, 1, [1, 'w_n', 0]),
+                    section: getSection('Second Section', 1, [2]),
+                    unit: getUnit('Second Unit', 2),
+                    created: 'December 11, 2014 at 11:10AM',
+                    updated: 'December 11, 2014 at 11:10AM',
+                    text: 'First added model',
+                    quote: 'Note 2',
+                    tags: ['PUMPKIN', 'pie']
+                },
+                {
+                    chapter: getChapter('First Chapter', 1, 0, [2]),
+                    section: getSection('First Section', 2, [3]),
+                    unit: getUnit('First Unit', 3),
+                    created: 'December 11, 2014 at 11:10AM',
+                    updated: 'December 11, 2014 at 11:10AM',
+                    text: 'First added model',
+                    quote: 'Note 1',
+                    tags: ['pie', 'pumpkin']
+                }
+            ]
+        };
+    };
+
+    verifyUrl = function (requestUrl, expectedUrl, expectedParams) {
+        expect(requestUrl.slice(0, expectedUrl.length) === expectedUrl).toBeTruthy();
+        verifyRequestParams(requestUrl, expectedParams);
+    };
+
+    verifyRequestParams = function (requestUrl, expectedParams) {
+        var urlParams = (new URI(requestUrl)).query(true);
+        _.each(expectedParams, function (value, key) {
+            expect(urlParams[key]).toBe(value);
+        });
+    };
+
+    createNotesData = function (options) {
+
+        var data = {
+            count: options.count || 0,
+            num_pages: options.num_pages || 1,
+            current_page: options.current_page || 1,
+            start: options.start || 0,
+            results: []
+        };
+
+        for(var i = 0; i < options.numNotesToCreate; i++) {
+            var notesInfo = {
+                chapter: getChapter('First Chapter__' + i, 1, 0, [2]),
+                section: getSection('First Section__' + i, 2, [3]),
+                unit: getUnit('First Unit__' + i, 3),
+                created: new Date().toISOString(),
+                updated: new Date().toISOString(),
+                text: 'text__' + i,
+                quote: 'Note__' + i,
+                tags: ['tag__' + i, 'tag__' + i+1]
+            };
+
+            data.results.push(notesInfo);
+        }
+
+        return data;
+    };
+
+    respondToRequest = function(requests, responseJson, respondToEvent) {
+        // Respond to the analytics event
+        if (respondToEvent) {
+            AjaxHelpers.respondWithNoContent(requests);
+        }
+        // Now process the actual request
+        AjaxHelpers.respondWithJson(requests, responseJson);
+    };
+
+    verifyPaginationInfo = function (view, headerMessage, currentPage, totalPages) {
+        expect(view.$('.search-count.listing-count').text().trim()).toBe(headerMessage);
+        expect(parseInt(view.$('.pagination span.current-page').text().trim())).toBe(currentPage);
+        expect(parseInt(view.$('.pagination span.total-pages').text().trim())).toBe(totalPages);
+    };
+
+    verifyPageData = function (view, tabsCollection, tabInfo, tabId, notes) {
+        expect(tabsCollection).toHaveLength(1);
+        expect(tabsCollection.at(0).toJSON()).toEqual(tabInfo);
+        expect(view.$(tabId)).toExist();
+        expect(view.$('.note')).toHaveLength(notes.results.length);
+        _.each(view.$('.note'), function(element, index) {
+            expect($('.note-comments', element)).toContainText(notes.results[index].text);
+            expect($('.note-excerpt', element)).toContainText(notes.results[index].quote);
+        });
     };
 
     return {
@@ -169,6 +245,12 @@ define(['underscore'], function(_) {
         getChapter: getChapter,
         getSection: getSection,
         getUnit: getUnit,
-        getDefaultNotes: getDefaultNotes
+        getDefaultNotes: getDefaultNotes,
+        verifyUrl: verifyUrl,
+        verifyRequestParams: verifyRequestParams,
+        createNotesData: createNotesData,
+        respondToRequest: respondToRequest,
+        verifyPaginationInfo: verifyPaginationInfo,
+        verifyPageData: verifyPageData
     };
 });

lms/static/js/spec/edxnotes/models/note_spec.js

@@ -4,10 +4,23 @@ define([
     'use strict';
     describe('EdxNotes NoteModel', function() {
         beforeEach(function () {
-            this.collection = new NotesCollection([
-                {quote: Helpers.LONG_TEXT, text: 'text\n with\r\nline\n\rbreaks \r'},
-                {quote: Helpers.SHORT_TEXT, text: 'text\n with\r\nline\n\rbreaks \r'}
-            ]);
+            this.collection = new NotesCollection(
+                {
+                    'count': 2,
+                    'current_page': 1,
+                    'num_pages': 1,
+                    'start': 0,
+                    'next': null,
+                    'previous': null,
+                    'results': [
+                        {quote: Helpers.LONG_TEXT, text: 'text\n with\r\nline\n\rbreaks \r'},
+                        {quote: Helpers.SHORT_TEXT, text: 'text\n with\r\nline\n\rbreaks \r'}
+                    ]
+                },
+                {
+                    perPage: 10, parse: true
+                }
+            );
         });
 
         it('has correct values on initialization', function () {

lms/static/js/spec/edxnotes/views/note_item_spec.js

@@ -67,12 +67,12 @@ define([
             var view = getView({tags: ["First", "Second"]});
             expect(view.$('.reference-title').length).toBe(3);
             expect(view.$('.reference-title')[2]).toContainText('Tags:');
-            expect(view.$('a.reference-tags').length).toBe(2);
-            expect(view.$('a.reference-tags')[0]).toContainText('First');
-            expect(view.$('a.reference-tags')[1]).toContainText('Second');
+            expect(view.$('span.reference-tags').length).toBe(2);
+            expect(view.$('span.reference-tags')[0]).toContainText('First');
+            expect(view.$('span.reference-tags')[1]).toContainText('Second');
         });
 
-        it('should handle a click event on the tag', function() {
+        xit('should handle a click event on the tag', function() {
             var scrollToTagSpy = {
                 scrollToTag: function (tagName){}
             };

lms/static/js/spec/edxnotes/views/notes_page_spec.js

@@ -13,7 +13,7 @@ define([
             TemplateHelpers.installTemplates([
                 'templates/edxnotes/note-item', 'templates/edxnotes/tab-item'
             ]);
-            this.view = new NotesFactory({notesList: notes});
+            this.view = new NotesFactory({notes: notes, pageSize: 10});
         });
 
 
@@ -35,8 +35,13 @@ define([
             this.view.$('.search-notes-input').val('test_query');
             this.view.$('.search-notes-submit').click();
             AjaxHelpers.respondWithJson(requests, {
-                total: 0,
-                rows: []
+                'count': 0,
+                'current_page': 1,
+                'num_pages': 1,
+                'start': 0,
+                'next': null,
+                'previous': null,
+                'results': []
             });
             expect(this.view.$('#view-search-results')).toHaveClass('is-active');
             expect(this.view.$('#view-recent-activity')).toExist();

lms/static/js/spec/edxnotes/views/search_box_spec.js

 define([
     'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers', 'js/edxnotes/views/search_box',
-    'js/edxnotes/collections/notes', 'js/spec/edxnotes/custom_matchers', 'jasmine-jquery'
-], function($, _, AjaxHelpers, SearchBoxView, NotesCollection, customMatchers) {
+    'js/edxnotes/collections/notes', 'js/spec/edxnotes/custom_matchers', 'js/spec/edxnotes/helpers', 'jasmine-jquery'
+], function($, _, AjaxHelpers, SearchBoxView, NotesCollection, customMatchers, Helpers) {
     'use strict';
     describe('EdxNotes SearchBoxView', function() {
-        var getSearchBox, submitForm, assertBoxIsEnabled, assertBoxIsDisabled;
+        var getSearchBox, submitForm, assertBoxIsEnabled, assertBoxIsDisabled, searchResponse;
+
+        searchResponse = {
+            'count': 2,
+            'current_page': 1,
+            'num_pages': 1,
+            'start': 0,
+            'next': null,
+            'previous': null,
+            'results': [null, null]
+        };
 
         getSearchBox = function (options) {
             options = _.defaults(options || {}, {
                 el: $('#search-notes-form').get(0),
+                perPage: 10,
                 beforeSearchStart: jasmine.createSpy(),
                 search: jasmine.createSpy(),
                 error: jasmine.createSpy(),
@@ -50,7 +61,11 @@ define([
             submitForm(this.searchBox, 'test_text');
             request = requests[0];
             expect(request.method).toBe(form.method.toUpperCase());
-            expect(request.url).toBe(form.action + '?' + $.param({text: 'test_text'}));
+            Helpers.verifyUrl(
+                request.url,
+                form.action,
+                {text: 'test_text', page: '1', page_size: '10'}
+            );
         });
 
         it('returns success result', function () {
@@ -60,13 +75,10 @@ define([
                 'test_text'
             );
             assertBoxIsDisabled(this.searchBox);
-            AjaxHelpers.respondWithJson(requests, {
-                total: 2,
-                rows: [null, null]
-            });
+            AjaxHelpers.respondWithJson(requests, searchResponse);
             assertBoxIsEnabled(this.searchBox);
             expect(this.searchBox.options.search).toHaveBeenCalledWith(
-                jasmine.any(NotesCollection), 2, 'test_text'
+                jasmine.any(NotesCollection), 'test_text'
             );
             expect(this.searchBox.options.complete).toHaveBeenCalledWith(
                 'test_text'
@@ -76,10 +88,7 @@ define([
         it('should log the edx.course.student_notes.searched event properly', function () {
             var requests = AjaxHelpers.requests(this);
             submitForm(this.searchBox, 'test_text');
-            AjaxHelpers.respondWithJson(requests, {
-                total: 2,
-                rows: [null, null]
-            });
+            AjaxHelpers.respondWithJson(requests, searchResponse);
 
             expect(Logger.log).toHaveBeenCalledWith('edx.course.student_notes.searched', {
                 'number_of_results': 2,
@@ -140,10 +149,7 @@ define([
             submitForm(this.searchBox, 'test_text');
             assertBoxIsDisabled(this.searchBox);
             submitForm(this.searchBox, 'another_text');
-            AjaxHelpers.respondWithJson(requests, {
-                total: 2,
-                rows: [null, null]
-            });
+            AjaxHelpers.respondWithJson(requests, searchResponse);
             assertBoxIsEnabled(this.searchBox);
             expect(requests).toHaveLength(1);
         });

lms/static/js/spec/edxnotes/views/tabs/course_structure_spec.js

@@ -40,7 +40,7 @@ define([
                 'templates/edxnotes/note-item', 'templates/edxnotes/tab-item'
             ]);
 
-            this.collection = new NotesCollection(notes);
+            this.collection = new NotesCollection(notes, {perPage: 10, parse: true});
             this.tabsCollection = new TabsCollection();
         });
 

lms/static/js/spec/edxnotes/views/tabs/recent_activity_spec.js

 define([
-    'jquery', 'common/js/spec_helpers/template_helpers', 'js/edxnotes/collections/notes',
-    'js/edxnotes/collections/tabs', 'js/edxnotes/views/tabs/recent_activity',
-    'js/spec/edxnotes/custom_matchers', 'jasmine-jquery'
+    'jquery', 'common/js/spec_helpers/template_helpers', 'common/js/spec_helpers/ajax_helpers',
+    'js/edxnotes/collections/notes', 'js/edxnotes/collections/tabs', 'js/edxnotes/views/tabs/recent_activity',
+    'js/spec/edxnotes/custom_matchers', 'js/spec/edxnotes/helpers', 'jasmine-jquery'
 ], function(
-    $, TemplateHelpers, NotesCollection, TabsCollection, RecentActivityView, customMatchers
+    $, TemplateHelpers, AjaxHelpers, NotesCollection, TabsCollection, RecentActivityView, customMatchers, Helpers
 ) {
     'use strict';
     describe('EdxNotes RecentActivityView', function() {
-        var notes = [
-            {
-                created: 'December 11, 2014 at 11:12AM',
-                updated: 'December 11, 2014 at 11:12AM',
-                text: 'Third added model',
-                quote: 'Should be listed first'
-            },
-            {
-                created: 'December 11, 2014 at 11:11AM',
-                updated: 'December 11, 2014 at 11:11AM',
-                text: 'Second added model',
-                quote: 'Should be listed second'
-            },
-            {
-                created: 'December 11, 2014 at 11:10AM',
-                updated: 'December 11, 2014 at 11:10AM',
-                text: 'First added model',
-                quote: 'Should be listed third'
-            }
-        ], getView;
+        var notes = {
+            'count': 3,
+            'current_page': 1,
+            'num_pages': 1,
+            'start': 0,
+            'next': null,
+            'previous': null,
+            'results': [
+                {
+                    created: 'December 11, 2014 at 11:12AM',
+                    updated: 'December 11, 2014 at 11:12AM',
+                    text: 'Third added model',
+                    quote: 'Should be listed first'
+                },
+                {
+                    created: 'December 11, 2014 at 11:11AM',
+                    updated: 'December 11, 2014 at 11:11AM',
+                    text: 'Second added model',
+                    quote: 'Should be listed second'
+                },
+                {
+                    created: 'December 11, 2014 at 11:10AM',
+                    updated: 'December 11, 2014 at 11:10AM',
+                    text: 'First added model',
+                    quote: 'Should be listed third'
+                }
+            ]
+        }, getView, tabInfo, recentActivityTabId;
 
         getView = function (collection, tabsCollection, options) {
             var view;
@@ -35,6 +43,7 @@ define([
                 el: $('.wrapper-student-notes'),
                 collection: collection,
                 tabsCollection: tabsCollection,
+                createHeaderFooter: true
             });
 
             view = new RecentActivityView(options);
@@ -43,6 +52,17 @@ define([
             return view;
         };
 
+        tabInfo = {
+            name: 'Recent Activity',
+            identifier: 'view-recent-activity',
+            icon: 'fa fa-clock-o',
+            is_active: true,
+            is_closable: false,
+            view: 'Recent Activity'
+        };
+
+        recentActivityTabId = '#recent-panel';
+
         beforeEach(function () {
             customMatchers(this);
             loadFixtures('js/fixtures/edxnotes/edxnotes.html');
@@ -50,28 +70,135 @@ define([
                 'templates/edxnotes/note-item', 'templates/edxnotes/tab-item'
             ]);
 
-            this.collection = new NotesCollection(notes);
+            this.collection = new NotesCollection(notes, {perPage: 10, parse: true});
             this.tabsCollection = new TabsCollection();
         });
 
         it('displays a tab and content with proper data and order', function () {
             var view = getView(this.collection, this.tabsCollection);
+            Helpers.verifyPaginationInfo(view, "Showing 1-3 out of 3 total", 1, 1);
+            Helpers.verifyPageData(view, this.tabsCollection, tabInfo, recentActivityTabId, notes);
+        });
 
-            expect(this.tabsCollection).toHaveLength(1);
-            expect(this.tabsCollection.at(0).toJSON()).toEqual({
-                name: 'Recent Activity',
-                identifier: 'view-recent-activity',
-                icon: 'fa fa-clock-o',
-                is_active: true,
-                is_closable: false,
-                view: 'Recent Activity'
-            });
-            expect(view.$('#recent-panel')).toExist();
-            expect(view.$('.note')).toHaveLength(3);
-            _.each(view.$('.note'), function(element, index) {
-                expect($('.note-comments', element)).toContainText(notes[index].text);
-                expect($('.note-excerpt', element)).toContainText(notes[index].quote);
-            });
+        it("will not render header and footer if there are no notes", function () {
+            var notes = {
+                'count': 0,
+                'current_page': 1,
+                'num_pages': 1,
+                'start': 0,
+                'next': null,
+                'previous': null,
+                'results': []
+            };
+            var collection = new NotesCollection(notes, {perPage: 10, parse: true});
+            var view = getView(collection, this.tabsCollection);
+            expect(view.$('.search-tools.listing-tools')).toHaveLength(0);
+            expect(view.$('.pagination.pagination-full.bottom')).toHaveLength(0);
+        });
+
+        it("can go to a page number", function () {
+            var requests = AjaxHelpers.requests(this);
+            var notes = Helpers.createNotesData(
+                {
+                    numNotesToCreate: 10,
+                    count: 12,
+                    num_pages: 2,
+                    current_page: 1,
+                    start: 0
+                }
+            );
+            var collection = new NotesCollection(notes, {perPage: 10, parse: true});
+            var view = getView(collection, this.tabsCollection);
+
+            Helpers.verifyPaginationInfo(view, "Showing 1-10 out of 12 total", 1, 2);
+            Helpers.verifyPageData(view, this.tabsCollection, tabInfo, recentActivityTabId, notes);
+
+            view.$('input#page-number-input').val('2');
+            view.$('input#page-number-input').trigger('change');
+            Helpers.verifyRequestParams(
+                requests[requests.length - 1].url,
+                {page: '2', page_size: '10'}
+            );
+
+            notes = Helpers.createNotesData(
+                {
+                    numNotesToCreate: 2,
+                    count: 12,
+                    num_pages: 2,
+                    current_page: 2,
+                    start: 10
+                }
+            );
+            Helpers.respondToRequest(requests, notes, true);
+            Helpers.verifyPaginationInfo(view, "Showing 11-12 out of 12 total", 2, 2);
+            Helpers.verifyPageData(view, this.tabsCollection, tabInfo, recentActivityTabId, notes);
+        });
+
+        it("can navigate forward and backward", function () {
+            var requests = AjaxHelpers.requests(this);
+            var page1Notes = Helpers.createNotesData(
+                {
+                    numNotesToCreate: 10,
+                    count: 15,
+                    num_pages: 2,
+                    current_page: 1,
+                    start: 0
+                }
+            );
+            var collection = new NotesCollection(page1Notes, {perPage: 10, parse: true});
+            var view = getView(collection, this.tabsCollection);
+
+            Helpers.verifyPaginationInfo(view, "Showing 1-10 out of 15 total", 1, 2);
+            Helpers.verifyPageData(view, this.tabsCollection, tabInfo, recentActivityTabId, page1Notes);
+
+            view.$('.pagination .next-page-link').click();
+            Helpers.verifyRequestParams(
+                requests[requests.length - 1].url,
+                {page: '2', page_size: '10'}
+            );
+            var page2Notes = Helpers.createNotesData(
+                {
+                    numNotesToCreate: 5,
+                    count: 15,
+                    num_pages: 2,
+                    current_page: 2,
+                    start: 10
+                }
+            );
+            Helpers.respondToRequest(requests, page2Notes, true);
+            Helpers.verifyPaginationInfo(view, "Showing 11-15 out of 15 total", 2, 2);
+            Helpers.verifyPageData(view, this.tabsCollection, tabInfo, recentActivityTabId, page2Notes);
+
+            view.$('.pagination .previous-page-link').click();
+            Helpers.verifyRequestParams(
+                requests[requests.length - 1].url,
+                {page: '1', page_size: '10'}
+            );
+            Helpers.respondToRequest(requests, page1Notes);
+
+            Helpers.verifyPaginationInfo(view, "Showing 1-10 out of 15 total", 1, 2);
+            Helpers.verifyPageData(view, this.tabsCollection, tabInfo, recentActivityTabId, page1Notes);
+        });
+
+        it("sends correct page size value", function () {
+            var requests = AjaxHelpers.requests(this);
+            var notes = Helpers.createNotesData(
+                {
+                    numNotesToCreate: 5,
+                    count: 7,
+                    num_pages: 2,
+                    current_page: 1,
+                    start: 0
+                }
+            );
+            var collection = new NotesCollection(notes, {perPage: 5, parse: true});
+            var view = getView(collection, this.tabsCollection);
+
+            view.$('.pagination .next-page-link').click();
+            Helpers.verifyRequestParams(
+                requests[requests.length - 1].url,
+                {page: '2', page_size: '5'}
+            );
         });
     });
 });

lms/static/js/spec/edxnotes/views/tabs/tags_spec.js

@@ -44,7 +44,7 @@ define([
                 'templates/edxnotes/note-item', 'templates/edxnotes/tab-item'
             ]);
 
-            this.collection = new NotesCollection(notes);
+            this.collection = new NotesCollection(notes, {perPage: 10, parse: true});
             this.tabsCollection = new TabsCollection();
         });
 

lms/static/sass/course/_student-notes.scss

@@ -235,27 +235,24 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
 
           // CASE: tag matches a search query
           .reference-meta.reference-tags .note-highlight {
-            // needed because .note-highlight is a span, which overrides the color
-            @extend %shame-link-text;
             background-color: $result-highlight-color-base;
           }
 
           // Put commas between tags.
-          a.reference-meta.reference-tags:after {
+          span.reference-meta.reference-tags:after {
             content: ",";
             color: $m-gray-d2;
           }
 
           // But not after the last tag.
-          a.reference-meta.reference-tags:last-child:after {
+          span.reference-meta.reference-tags:last-child:after {
               content: "";
           }
 
           // needed for poor base LMS styling scope
           a.reference-meta {
-            @extend %shame-link-text;
+             @extend %shame-link-text;
           }
-
         }
       }
 
@@ -285,6 +282,15 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
 
     .tab-panel, .inline-error, .ui-loading {
       @extend %no-outline;
+      border-top: $divider-visual-primary;
+
+      .listing-tools {
+        @include margin($baseline $baseline (-$baseline/2) 0);
+      }
+
+      .note-group:first-of-type {
+        border-top: none;
+      }
     }
 
     .tab-panel.note-group {

lms/templates/edxnotes/edxnotes.html

@@ -12,6 +12,10 @@ import json
 </%block>
 
 <%include file="/courseware/course_navigation.html" args="active_page='edxnotes'" />
+<%
+  _notes = json.loads(notes)
+  has_notes = _notes and _notes.get('results')
+%>
 <section class="container">
   <div class="wrapper-student-notes">
     <div class="student-notes">
@@ -24,7 +28,7 @@ import json
           </h1>
         </div>
 
-        % if notes:
+        % if has_notes:
         <div class="wrapper-notes-search">
           <form role="search" action="${notes_endpoint}" method="GET" id="search-notes-form" class="is-hidden">
             <label for="search-notes-input" class="sr">${_('Search notes for:')}</label>
@@ -51,7 +55,7 @@ import json
           <h2 id="tab-view" class="tabs-label">${_('View notes by:')}</h2>
         </div>
 
-        % if notes:
+        % if has_notes:
         <div class="ui-loading" tabindex="-1">
           <span class="spin">
             <i class="icon fa fa-refresh"></i>
@@ -103,11 +107,14 @@ import json
 % endfor
 </%block>
 
-% if notes:
+% if has_notes:
     <%block name="js_extra">
     <%static:require_module module_name="js/edxnotes/views/page_factory" class_name="NotesPageFactory">
         NotesPageFactory({
-            notesList: ${notes if notes is not None else []},
+            disabledTabs: ${disabled_tabs},
+            notes: ${notes},
+            notesEndpoint: '${notes_endpoint}',
+            pageSize: '${page_size}',
             debugMode: ${debug}
         });
     </%static:require_module>

lms/templates/edxnotes/note-item.underscore

@@ -38,7 +38,7 @@
         <% if (tags.length > 0) { %>
             <p class="reference-title"><%- gettext("Tags:") %></p>
             <% for (var i = 0; i < tags.length; i++) { %>
-                <a class="reference-meta reference-tags" href="#"><%= tags[i] %></a>
+                <span class="reference-meta reference-tags"><%= tags[i] %></span>
             <% } %>
         <% } %>
     </div>