Add UI Toolkit to the platform

UITK-75

.jshintrc

@@ -142,6 +142,7 @@
         // Django i18n catalog globals
         "interpolate",
         "gettext",
+        "ngettext",
 
         // Miscellaneous globals
         "JSON"

cms/static/edx-ui-toolkit/js

@@ -0,0 +1 @@
+../../../node_modules/edx-ui-toolkit/src/js

cms/static/js_test.yml

@@ -78,6 +78,8 @@ src_paths:
     - js/certificates
     - js/factories
     - common/js
+    - edx-pattern-library/js
+    - edx-ui-toolkit/js
 
 # Paths to spec (test) JavaScript files
 # We should define the custom path mapping in /coffee/spec/main.coffee as well e.g. certificates etc.

cms/static/js_test_squire.yml

@@ -73,6 +73,8 @@ src_paths:
     - js/utils
     - js/views
     - common/js
+    - edx-pattern-library/js
+    - edx-ui-toolkit/js
 
 # Paths to spec (test) JavaScript files
 spec_paths:

common/static/common/js/components/views/feedback_notification.js

@@ -1,34 +1,34 @@
-;(function (define) {
+;(function(define) {
     'use strict';
-    define(["jquery", "underscore", "underscore.string", "common/js/components/views/feedback"],
+    define(['jquery', 'underscore', 'underscore.string', 'common/js/components/views/feedback'],
         function($, _, str, SystemFeedbackView) {
 
-        var Notification = SystemFeedbackView.extend({
-            options: $.extend({}, SystemFeedbackView.prototype.options, {
-                type: "notification",
-                closeIcon: false
-            })
-        });
-
-        // create Notification.Warning, Notification.Confirmation, etc
-        var capitalCamel, intents;
-        capitalCamel = _.compose(str.capitalize, str.camelize);
-        intents = ["warning", "error", "confirmation", "announcement", "step-required", "help", "mini"];
-        _.each(intents, function(intent) {
-            var subclass;
-            subclass = Notification.extend({
-                options: $.extend({}, Notification.prototype.options, {
-                    intent: intent
+            var Notification = SystemFeedbackView.extend({
+                options: $.extend({}, SystemFeedbackView.prototype.options, {
+                    type: 'notification',
+                    closeIcon: false
                 })
             });
-            Notification[capitalCamel(intent)] = subclass;
-        });
 
-        // set more sensible defaults for Notification.Mini views
-        var miniOptions = Notification.Mini.prototype.options;
-        miniOptions.minShown = 1250;
-        miniOptions.closeIcon = false;
+            // create Notification.Warning, Notification.Confirmation, etc
+            var capitalCamel, intents;
+            capitalCamel = _.compose(str.capitalize, str.camelize);
+            intents = ['warning', 'error', 'confirmation', 'announcement', 'step-required', 'help', 'mini'];
+            _.each(intents, function(intent) {
+                var subclass;
+                subclass = Notification.extend({
+                    options: $.extend({}, Notification.prototype.options, {
+                        intent: intent
+                    })
+                });
+                Notification[capitalCamel(intent)] = subclass;
+            });
+
+            // set more sensible defaults for Notification.Mini views
+            var miniOptions = Notification.Mini.prototype.options;
+            miniOptions.minShown = 1250;
+            miniOptions.closeIcon = false;
 
-        return Notification;
-    });
+            return Notification;
+        });
 }).call(this, define || RequireJS.define);

common/static/edx-pattern-library/js

@@ -0,0 +1 @@
+../../../node_modules/edx-pattern-library/pattern-library/js

common/static/edx-ui-toolkit/js

@@ -0,0 +1 @@
+../../../node_modules/edx-ui-toolkit/src/js/

common/static/js_test_requirejs.yml

@@ -50,6 +50,8 @@ lib_paths:
 # Paths to source JavaScript files
 src_paths:
     - common/js
+    - edx-pattern-library/js
+    - edx-ui-toolkit/js
 
 # Paths to spec (test) JavaScript files
 spec_paths:

lms/djangoapps/teams/static/teams/js/spec/views/instructor_tools_spec.js

@@ -8,18 +8,24 @@ define([
     'teams/js/spec_helpers/team_spec_helpers',
     'common/js/spec_helpers/ajax_helpers',
     'common/js/spec_helpers/page_helpers'
-], function ($, Backbone, _, Team, InstructorToolsView, TeamUtils, TeamSpecHelpers, AjaxHelpers, PageHelpers) {
+], function($, Backbone, _, Team, InstructorToolsView, TeamUtils, TeamSpecHelpers, AjaxHelpers, PageHelpers) {
     'use strict';
 
-    describe('Instructor Tools', function () {
+    describe('Instructor Tools', function() {
         var view,
-            createInstructorTools = function () {
+            pageFixture = '<section class="teams-content">' +
+                    '<div id="teams-message" class="wrapper-msg is-incontext urgency-low is-hidden">' +
+                    '<div class="msg"><div class="msg-content"><div class="copy"></div></div></div>' +
+                    '</div>' +
+                    '<div id="page-prompt"></div>' +
+                    '</section>',
+            createInstructorTools = function() {
                 return new InstructorToolsView({
                     team: new Team(TeamSpecHelpers.createMockTeamData(1, 1)[0]),
                     teamEvents: TeamSpecHelpers.teamEvents
                 });
             },
-            deleteTeam = function (view, confirm) {
+            deleteTeam = function(view, confirm) {
                 view.$('.action-delete').click();
                 // Confirm delete dialog
                 if (confirm) {
@@ -29,29 +35,28 @@ define([
                     $('.action-secondary').click();
                 }
             },
-            expectSuccessMessage = function (team) {
-                expect(TeamUtils.showMessage).toHaveBeenCalledWith(
-                    'Team "' + team.get('name') + '" successfully deleted.',
-                    'success'
+            expectSuccessMessage = function(view) {
+                var team = view.team;
+                expect($('.msg-content .copy').text().trim()).toContain(
+                    'Team "' + team.get('name') + '" successfully deleted.'
                 );
             };
 
-        beforeEach(function () {
-            setFixtures('<div id="page-prompt"></div>');
+        beforeEach(function() {
+            setFixtures(pageFixture);
             PageHelpers.preventBackboneChangingUrl();
             spyOn(Backbone.history, 'navigate');
-            spyOn(TeamUtils, 'showMessage');
             view = createInstructorTools().render();
             spyOn(view.teamEvents, 'trigger');
         });
 
-        it('can render itself', function () {
+        it('can render itself', function() {
             expect(_.strip(view.$('.action-delete').text())).toEqual('Delete Team');
             expect(_.strip(view.$('.action-edit-members').text())).toEqual('Edit Membership');
             expect(view.$el.text()).toContain('Instructor tools');
         });
 
-        it('can delete a team and shows a success message', function () {
+        it('can delete a team and shows a success message', function() {
             var requests = AjaxHelpers.requests(this);
             deleteTeam(view, true);
             AjaxHelpers.expectJsonRequest(requests, 'DELETE', view.team.url, null);
@@ -66,27 +71,27 @@ define([
                     team: view.team
                 }
             );
-            expectSuccessMessage(view.team);
+            expectSuccessMessage(view);
         });
 
-        it('can cancel team deletion', function () {
+        it('can cancel team deletion', function() {
             var requests = AjaxHelpers.requests(this);
             deleteTeam(view, false);
             AjaxHelpers.expectNoRequests(requests);
             expect(Backbone.history.navigate).not.toHaveBeenCalled();
         });
 
-        it('shows a success message after receiving a 404', function () {
+        it('shows a success message after receiving a 404', function() {
             var requests = AjaxHelpers.requests(this);
             deleteTeam(view, true);
             AjaxHelpers.respondWithError(requests, 404);
-            expectSuccessMessage(view.team);
-        });    
-            
-        it('can trigger the edit membership view', function () {
+            expectSuccessMessage(view);
+        });
+
+        it('can trigger the edit membership view', function() {
             view.$('.action-edit-members').click();
             expect(Backbone.history.navigate).toHaveBeenCalledWith(
-                'teams/' + view.team.get('topic_id') + "/" + view.team.id + "/edit-team/manage-members",
+                'teams/' + view.team.get('topic_id') + '/' + view.team.id + '/edit-team/manage-members',
                 {trigger: true}
             );
         });

lms/djangoapps/teams/static/teams/js/spec/views/team_discussion_spec.js

@@ -1,8 +1,9 @@
 define([
     'underscore', 'common/js/spec_helpers/ajax_helpers', 'teams/js/views/team_discussion',
     'teams/js/spec_helpers/team_spec_helpers',
-    'xmodule_js/common_static/coffee/spec/discussion/discussion_spec_helper'
-], function (_, AjaxHelpers, TeamDiscussionView, TeamSpecHelpers, DiscussionSpecHelper) {
+    'xmodule_js/common_static/coffee/spec/discussion/discussion_spec_helper',
+    'edx-ui-toolkit/js/utils/string-utils'
+], function(_, AjaxHelpers, TeamDiscussionView, TeamSpecHelpers, DiscussionSpecHelper, StringUtils) {
     'use strict';
     xdescribe('TeamDiscussionView', function() {
         var discussionView, createDiscussionView, createPost, expandReplies, postReply;
@@ -23,40 +24,37 @@ define([
             discussionView.render();
             AjaxHelpers.expectRequest(
                 requests, 'GET',
-                interpolate(
-                    '/courses/%(courseID)s/discussion/forum/%(discussionID)s/inline?page=1&ajax=1',
+                StringUtils.interpolate(
+                    '/courses/{courseID}/discussion/forum/{discussionID}/inline?page=1&ajax=1',
                     {
                         courseID: TeamSpecHelpers.testCourseID,
                         discussionID: TeamSpecHelpers.testTeamDiscussionID
-                    },
-                    true
-
+                    }
                 )
             );
             AjaxHelpers.respondWithJson(requests, TeamSpecHelpers.createMockDiscussionResponse(threads));
             return discussionView;
         };
 
         createPost = function(requests, view, title, body, threadID) {
-            title = title || "Test title";
-            body = body || "Test body";
-            threadID = threadID || "999";
+            title = title || 'Test title';
+            body = body || 'Test body';
+            threadID = threadID || '999';
             view.$('.new-post-button').click();
             view.$('.js-post-title').val(title);
             view.$('.js-post-body textarea').val(body);
             view.$('.submit').click();
             AjaxHelpers.expectRequest(
                 requests, 'POST',
-                interpolate(
-                    '/courses/%(courseID)s/discussion/%(discussionID)s/threads/create?ajax=1',
+                StringUtils.interpolate(
+                    '/courses/{courseID}/discussion/{discussionID}/threads/create?ajax=1',
                     {
                         courseID: TeamSpecHelpers.testCourseID,
                         discussionID: TeamSpecHelpers.testTeamDiscussionID
-                    },
-                    true
+                    }
                 ),
-                interpolate(
-                    'thread_type=discussion&title=%(title)s&body=%(body)s&anonymous=false&anonymous_to_peers=false&auto_subscribe=true',
+                StringUtils.interpolate(
+                    'thread_type=discussion&title={title}&body={body}&anonymous=false&anonymous_to_peers=false&auto_subscribe=true',  // jshint ignore:line
                     {
                         title: title.replace(/ /g, '+'),
                         body: body.replace(/ /g, '+')
@@ -78,14 +76,13 @@ define([
             view.$('.forum-thread-expand').first().click();
             AjaxHelpers.expectRequest(
                 requests, 'GET',
-                interpolate(
-                    '/courses/%(courseID)s/discussion/forum/%(discussionID)s/threads/%(threadID)s?ajax=1&resp_skip=0&resp_limit=25',
+                StringUtils.interpolate(
+                    '/courses/{courseID}/discussion/forum/{discussionID}/threads/{threadID}?ajax=1&resp_skip=0&resp_limit=25',  // jshint ignore:line
                     {
                         courseID: TeamSpecHelpers.testCourseID,
                         discussionID: TeamSpecHelpers.testTeamDiscussionID,
-                        threadID: threadID || "999"
-                    },
-                    true
+                        threadID: threadID || '999'
+                    }
                 )
             );
             AjaxHelpers.respondWithJson(requests, {
@@ -100,13 +97,12 @@ define([
             replyForm.find('.discussion-submit-post').click();
             AjaxHelpers.expectRequest(
                 requests, 'POST',
-                interpolate(
-                    '/courses/%(courseID)s/discussion/threads/%(threadID)s/reply?ajax=1',
+                StringUtils.interpolate(
+                    '/courses/{courseID}/discussion/threads/{threadID}/reply?ajax=1',
                     {
                         courseID: TeamSpecHelpers.testCourseID,
-                        threadID: threadID || "999"
-                    },
-                    true
+                        threadID: threadID || '999'
+                    }
                 ),
                 'body=' + reply.replace(/ /g, '+')
             );
@@ -115,7 +111,7 @@ define([
                     body: reply,
                     comments_count: 1
                 }),
-                "annotated_content_info": TeamSpecHelpers.createAnnotatedContentInfo()
+                annotated_content_info: TeamSpecHelpers.createAnnotatedContentInfo()
             });
         };
 
@@ -143,8 +139,8 @@ define([
         it('can post a reply', function() {
             var requests = AjaxHelpers.requests(this),
                 view = createDiscussionView(requests),
-                testReply = "Test reply",
-                testThreadID = "1";
+                testReply = 'Test reply',
+                testThreadID = '1';
             expandReplies(requests, view, testThreadID);
             postReply(requests, view, testReply, testThreadID);
             expect(view.$('.discussion-response .response-body').text().trim()).toBe(testReply);
@@ -153,7 +149,7 @@ define([
         it('can post a reply to a new post', function() {
             var requests = AjaxHelpers.requests(this),
                 view = createDiscussionView(requests, []),
-                testReply = "Test reply";
+                testReply = 'Test reply';
             createPost(requests, view);
             expandReplies(requests, view);
             postReply(requests, view, testReply);
@@ -166,7 +162,7 @@ define([
                 postTopicButton, updatedThreadElement,
                 updatedTitle = 'Updated title',
                 updatedBody = 'Updated body',
-                testThreadID = "1";
+                testThreadID = '1';
             expandReplies(requests, view, testThreadID);
             view.$('.action-more .icon').first().click();
             view.$('.action-edit').first().click();
@@ -177,19 +173,18 @@ define([
             view.$('.submit').click();
             AjaxHelpers.expectRequest(
                 requests, 'POST',
-                interpolate(
-                    '/courses/%(courseID)s/discussion/%(discussionID)s/threads/create?ajax=1',
+                StringUtils.interpolate(
+                    '/courses/{courseID}/discussion/{discussionID}/threads/create?ajax=1',
                     {
                         courseID: TeamSpecHelpers.testCourseID,
                         discussionID: TeamSpecHelpers.testTeamDiscussionID
-                    },
-                    true
+                    }
                 ),
-                'thread_type=discussion&title=&body=Updated+body&anonymous=false&anonymous_to_peers=false&auto_subscribe=true'
+                'thread_type=discussion&title=&body=Updated+body&anonymous=false&anonymous_to_peers=false&auto_subscribe=true'  // jshint ignore:line
             );
             AjaxHelpers.respondWithJson(requests, {
                 content: TeamSpecHelpers.createMockPostResponse({
-                    id: "999", title: updatedTitle, body: updatedBody
+                    id: '999', title: updatedTitle, body: updatedBody
                 }),
                 annotated_content_info: TeamSpecHelpers.createAnnotatedContentInfo()
             });
@@ -202,8 +197,7 @@ define([
 
         it('cannot move a new thread to a different topic', function() {
             var requests = AjaxHelpers.requests(this),
-                view = createDiscussionView(requests),
-                postTopicButton;
+                view = createDiscussionView(requests);
             createPost(requests, view);
             expandReplies(requests, view);
             view.$('.action-more .icon').first().click();