Add post type control to forum new post form

Also change server to pass post type through to the comments service.

common/static/coffee/src/discussion/views/new_post_view.coffee

@@ -13,7 +13,8 @@ if Backbone?
           context = _.clone(@course_settings.attributes)
           _.extend(context, {
               cohort_options: @getCohortOptions(),
-              mode: @mode
+              mode: @mode,
+              form_id: @mode + (if @topicId then "-" + @topicId else "")
           })
           context.topics_html = @renderCategoryMap(@course_settings.get("category_map")) if @mode is "tab"
           @$el.html(_.template($("#new-post-template").html(), context))
@@ -71,6 +72,7 @@ if Backbone?
 
       createPost: (event) ->
           event.preventDefault()
+          thread_type = @$(".post-type-input:checked").val()
           title   = @$(".js-post-title").val()
           body    = @$(".js-post-body").find(".wmd-input").val()
           group = @$(".js-group-select option:selected").attr("value")
@@ -89,6 +91,7 @@ if Backbone?
               dataType: 'json'
               async: false # TODO when the rest of the stuff below is made to work properly..
               data:
+                  thread_type: thread_type
                   title: title
                   body: body
                   anonymous: anonymous

lms/djangoapps/django_comment_client/base/tests.py

@@ -72,6 +72,7 @@ class ViewsTestCase(UrlResetMixin, ModuleStoreTestCase, MockRequestSetupMixin):
     def test_create_thread(self, mock_request):
         mock_request.return_value.status_code = 200
         self._set_mock_request_data(mock_request, {
+            "thread_type": "discussion",
             "title": "Hello",
             "body": "this is a post",
             "course_id": "MITx/999/Robot_Super_Course",
@@ -100,12 +101,14 @@ class ViewsTestCase(UrlResetMixin, ModuleStoreTestCase, MockRequestSetupMixin):
             "read": False,
             "comments_count": 0,
         })
-        thread = {"body": ["this is a post"],
-                  "anonymous_to_peers": ["false"],
-                  "auto_subscribe": ["false"],
-                  "anonymous": ["false"],
-                  "title": ["Hello"]
-                  }
+        thread = {
+            "thread_type": "discussion",
+            "body": ["this is a post"],
+            "anonymous_to_peers": ["false"],
+            "auto_subscribe": ["false"],
+            "anonymous": ["false"],
+            "title": ["Hello"],
+        }
         url = reverse('create_thread', kwargs={'commentable_id': 'i4x-MITx-999-course-Robot_Super_Course',
                                                'course_id': self.course_id.to_deprecated_string()})
         response = self.client.post(url, data=thread)
@@ -114,6 +117,7 @@ class ViewsTestCase(UrlResetMixin, ModuleStoreTestCase, MockRequestSetupMixin):
             'post',
             '{prefix}/i4x-MITx-999-course-Robot_Super_Course/threads'.format(prefix=CS_PREFIX),
             data={
+                'thread_type': 'discussion',
                 'body': u'this is a post',
                 'anonymous_to_peers': False, 'user_id': 1,
                 'title': u'Hello',
@@ -628,7 +632,7 @@ class CreateThreadUnicodeTestCase(ModuleStoreTestCase, UnicodeTestMixin, MockReq
     @patch('lms.lib.comment_client.utils.requests.request')
     def _test_unicode_data(self, text, mock_request):
         self._set_mock_request_data(mock_request, {})
-        request = RequestFactory().post("dummy_url", {"body": text, "title": text})
+        request = RequestFactory().post("dummy_url", {"thread_type": "discussion", "body": text, "title": text})
         request.user = self.student
         request.view_name = "create_thread"
         response = views.create_thread(request, course_id=self.course.id.to_deprecated_string(), commentable_id="test_commentable")

lms/djangoapps/django_comment_client/base/views.py

@@ -96,6 +96,7 @@ def create_thread(request, course_id, commentable_id):
         commentable_id=commentable_id,
         course_id=course_key.to_deprecated_string(),
         user_id=request.user.id,
+        thread_type=post["thread_type"],
         body=post["body"],
         title=post["title"]
     )

lms/lib/comment_client/thread.py

@@ -30,7 +30,7 @@ class Thread(models.Model):
         'endorsed', 'read'
     ]
 
-    initializable_fields = updatable_fields
+    initializable_fields = updatable_fields + ['thread_type']
 
     base_url = "{prefix}/threads".format(prefix=settings.PREFIX)
     default_retrieve_params = {'recursive': False}

lms/static/sass/discussion/utilities/_shame.scss

@@ -102,7 +102,11 @@ li[class*=forum-nav-thread-label-] {
 
 .forum-new-post-form {
   // Override global label rules
-  .topic-filter-label {
+  .post-type {
+    text-shadow: none;
+  }
+
+  .post-type, .topic-filter-label {
     margin-bottom: 0;
   }
 

lms/static/sass/discussion/views/_new-post.scss

@@ -24,6 +24,7 @@
       .field-input {
         display: inline-block;
         width: 100%;
+        vertical-align: top;
       }
 
       .field-label-text {
@@ -79,6 +80,39 @@
     }
   }
 
+  .post-type-input {
+    @extend %text-sr;
+  }
+
+  .post-type-label {
+    @extend %cont-truncated;
+    @include box-sizing(border-box);
+    @include white-button;
+    @include font-size(14);
+    display: inline-block;
+    padding: 0 ($baseline/2);
+    width: 48%;
+    height: 40px;
+    text-align: center;
+    color: $gray-d3;
+    font-weight: 600;
+    line-height: 36px;
+
+    .icon {
+      margin-right: 5px;
+    }
+  }
+
+  .post-type-input:checked + .post-type-label {
+    background-color: $forum-color-active-thread;
+    background-image: none;
+    box-shadow: 0 1px 1px rgba(0, 0,  0, 0.4) inset;
+  }
+
+  .post-type-input:focus + .post-type-label {
+    box-shadow: 0 1px 1px rgba(0, 0,  0, 0.4) inset, 0 0 2px 2px $blue;
+  }
+
   input[type=text].field-input {
     @include box-sizing(border-box);
     border: 1px solid $gray-l2;

lms/templates/discussion/_underscore_templates.html

@@ -439,6 +439,30 @@
 <script aria-hidden="true" type="text/template" id="new-post-template">
     <form class="forum-new-post-form">
         <ul class="post-errors" style="display: none"></ul>
+        <div class="post-field">
+            <div class="field-label">
+                <span class="field-label-text">
+                    ## Translators: This is the label for a control to
+                    ## select a forum post type
+                    ${_("Post type:")}
+                </span><fieldset class="field-input">
+                    <input type="radio" name="${"<%= form_id %>"}-post-type" class="post-type-input" id="${"<%= form_id %>"}-post-type-question" value="question" checked>
+                    <label for="${"<%= form_id %>"}-post-type-question" class="post-type-label">
+                        <i class="icon icon-question"></i>
+                        ## Translators: This is a forum post type
+                        ${_("Question")}
+                    </label>
+                    <input type="radio" name="${"<%= form_id %>"}-post-type" class="post-type-input" id="${"<%= form_id %>"}-post-type-discussion" value="discussion">
+                    <label for="${"<%= form_id %>"}-post-type-discussion" class="post-type-label">
+                        <i class="icon icon-comments"></i>
+                        ## Translators: This is a forum post type
+                        ${_("Discussion")}
+                    </label>
+                </fieldset>
+            </div><span class="field-help">
+                ${_("Questions raise issues that need answers. Discussions share ideas and start conversations.")}
+            </span>
+        </div>
         ${'<% if (mode=="tab") { %>'}
         <div class="post-field">
             ## Using div here instead of label because we are using a non-native control