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/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();

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

@@ -1,10 +1,11 @@
 define([
     'underscore', 'common/js/spec_helpers/ajax_helpers', 'teams/js/models/team',
     'teams/js/views/team_profile', 'teams/js/spec_helpers/team_spec_helpers',
-    'xmodule_js/common_static/coffee/spec/discussion/discussion_spec_helper'
-], function (_, AjaxHelpers, TeamModel, TeamProfileView, TeamSpecHelpers, DiscussionSpecHelper) {
+    'xmodule_js/common_static/coffee/spec/discussion/discussion_spec_helper',
+    'edx-ui-toolkit/js/utils/string-utils'
+], function(_, AjaxHelpers, TeamModel, TeamProfileView, TeamSpecHelpers, DiscussionSpecHelper, StringUtils) {
     'use strict';
-    describe('TeamProfileView', function () {
+    describe('TeamProfileView', function() {
         var profileView, createTeamProfileView, createTeamModelData, clickLeaveTeam,
             teamModel,
             leaveTeamLinkSelector = '.leave-team-link',
@@ -20,17 +21,17 @@ define([
                 }
             ];
 
-        beforeEach(function () {
+        beforeEach(function() {
             setFixtures('<div id="page-prompt"></div>' +
                 '<div class="teams-content"><div class="msg-content"><div class="copy"></div></div></div>' +
                 '<div class="profile-view"></div>');
             DiscussionSpecHelper.setUnderscoreFixtures();
         });
 
-        createTeamModelData = function (options) {
+        createTeamModelData = function(options) {
             return {
-                id: "test-team",
-                name: "Test Team",
+                id: 'test-team',
+                name: 'Test Team',
                 discussion_topic_id: TeamSpecHelpers.testTeamDiscussionID,
                 country: options.country || '',
                 language: options.language || '',
@@ -40,7 +41,7 @@ define([
         };
 
         createTeamProfileView = function(requests, options) {
-            teamModel = new TeamModel(createTeamModelData(options), { parse: true });
+            teamModel = new TeamModel(createTeamModelData(options), {parse: true});
             profileView = new TeamProfileView({
                 el: $('.profile-view'),
                 teamEvents: TeamSpecHelpers.teamEvents,
@@ -55,13 +56,12 @@ define([
             AjaxHelpers.expectRequest(
                 requests,
                 'GET',
-                interpolate(
-                    '/courses/%(courseID)s/discussion/forum/%(topicID)s/inline?page=1&ajax=1',
+                StringUtils.interpolate(
+                    '/courses/{courseID}/discussion/forum/{topicID}/inline?page=1&ajax=1',
                     {
                         courseID: TeamSpecHelpers.testCourseID,
                         topicID: TeamSpecHelpers.testTeamDiscussionID
-                    },
-                    true
+                    }
                 )
             );
             AjaxHelpers.respondWithJson(requests, TeamSpecHelpers.createMockDiscussionResponse());
@@ -95,13 +95,13 @@ define([
         };
 
         describe('DiscussionsView', function() {
-            it('can render itself', function () {
+            it('can render itself', function() {
                 var requests = AjaxHelpers.requests(this),
                     view = createTeamProfileView(requests, {});
                 expect(view.$('.discussion-thread').length).toEqual(3);
             });
 
-            it('shows New Post button when user joins a team', function () {
+            it('shows New Post button when user joins a team', function() {
                 var requests = AjaxHelpers.requests(this),
                     view = createTeamProfileView(requests, {});
 
@@ -187,7 +187,7 @@ define([
                     assertTeamDetails(view, 0, false);
                 });
 
-                it("wouldn't do anything if user click on Cancel button on dialog", function() {
+                it('should not do anything if user clicks on Cancel button on dialog', function() {
                     var requests = AjaxHelpers.requests(this);
 
                     var view = createTeamProfileView(
@@ -198,10 +198,10 @@ define([
                     assertTeamDetails(view, 1, true);
                 });
 
-                it('shows correct error messages', function () {
+                it('shows correct error messages', function() {
                     var requests = AjaxHelpers.requests(this);
 
-                    var verifyErrorMessage = function (requests, errorMessage, expectedMessage) {
+                    var verifyErrorMessage = function(requests, errorMessage, expectedMessage) {
                         var view = createTeamProfileView(
                             requests, {country: 'US', language: 'en', membership: DEFAULT_MEMBERSHIP}
                         );