Merge pull request #6443 from open-craft/kelketek/hide-irrelevant-cohort-menu

Add classes to cohort selector element group

common/static/coffee/spec/discussion/discussion_spec_helper.coffee

@@ -317,7 +317,7 @@ browser and pasting the output.  When that file changes, this one should be rege
         <ul class="post-errors" style="display: none"></ul>
         <div class="forum-new-post-form-wrapper"></div>
         <% if (cohort_options) { %>
-        <div class="post-field">
+        <div class="post-field group-selector-wrapper<% if (!is_commentable_cohorted) { %> disabled<% } %>">
             <label class="field-label">
                 <span class="field-label-text">
                     Visible To:

common/static/coffee/spec/discussion/view/new_post_view_spec.coffee

@@ -10,21 +10,29 @@ describe "NewPostView", ->
         )
         @discussion = new Discussion([], {pages: 1})
 
-    checkVisibility = (view, expectedVisible, expectedDisabled) =>
-      view.render()
-      expect(view.$(".js-group-select").is(":visible")).toEqual(expectedVisible)
-      disabled = view.$(".js-group-select").prop("disabled")
-      if expectedVisible and ! expectedDisabled
+    checkVisibility = (view, expectedVisible, expectedDisabled, render) =>
+      if render
+        view.render()
+      # Can also be undefined if the element does not exist.
+      expect(view.$('.group-selector-wrapper').is(":visible") or false).toEqual(expectedVisible)
+      disabled = view.$(".js-group-select").prop("disabled") or false
+      group_disabled = view.$('.group-selector-wrapper').hasClass('disabled')
+      if expectedVisible and !expectedDisabled
         expect(disabled).toEqual(false)
+        expect(group_disabled).toEqual(false)
       else if expectedDisabled
         expect(disabled).toEqual(true)
+        expect(group_disabled).toEqual(true)
 
     describe "cohort selector", ->
       beforeEach ->
         @course_settings = new DiscussionCourseSettings({
           "category_map": {
-            "children": ["Topic"],
-            "entries": {"Topic": {"is_cohorted": true, "id": "topic"}}
+            "children": ["Topic", "General"],
+            "entries": {
+              "Topic": {"is_cohorted": true, "id": "topic"},
+              "General": {"is_cohorted": false, "id": "general"}
+            }
           },
           "allow_anonymous": false,
           "allow_anonymous_to_peers": false,
@@ -38,19 +46,33 @@ describe "NewPostView", ->
           el: $("#fixture-element"),
           collection: @discussion,
           course_settings: @course_settings,
+          is_commententable_cohorted: true,
           mode: "tab"
         )
 
       it "is not visible to students", ->
-        checkVisibility(@view, false)
+        checkVisibility(@view, false, false, true)
 
       it "allows TAs to see the cohort selector", ->
         DiscussionSpecHelper.makeTA()
-        checkVisibility(@view, true)
+        checkVisibility(@view, true, false, true)
 
       it "allows moderators to see the cohort selector", ->
         DiscussionSpecHelper.makeModerator()
-        checkVisibility(@view, true)
+        checkVisibility(@view, true, false, true)
+
+      it "only enables the cohort selector when applicable", ->
+        DiscussionSpecHelper.makeModerator()
+        # We start on the cohorted discussion
+        checkVisibility(@view, true, false, true)
+        # Select the uncohorted topic
+        $('.topic-title:contains(General)').click()
+        # The menu should now be visible but disabled.
+        checkVisibility(@view, true, true, false)
+        # Select the cohorted topic again
+        $('.topic-title:contains(Topic)').click()
+        # It should be visible and enabled once more.
+        checkVisibility(@view, true, false, false)
 
       it "allows the user to make a cohort selection", ->
         DiscussionSpecHelper.makeModerator()
@@ -97,20 +119,20 @@ describe "NewPostView", ->
       it "disables the cohort menu if it is set false", ->
         DiscussionSpecHelper.makeModerator()
         @view.is_commentable_cohorted = false
-        checkVisibility(@view, true, true)
+        checkVisibility(@view, true, true, true)
 
       it "enables the cohort menu if it is set true", ->
         DiscussionSpecHelper.makeModerator()
         @view.is_commentable_cohorted = true
-        checkVisibility(@view, true)
+        checkVisibility(@view, true, false, true)
 
       it "is not visible to students when set false", ->
         @view.is_commentable_cohorted = false
-        checkVisibility(@view, false)
+        checkVisibility(@view, false, false, true)
 
       it "is not visible to students when set true", ->
         @view.is_commentable_cohorted = true
-        checkVisibility(@view, false)
+        checkVisibility(@view, false, false, true)
 
     describe "cancel post resets form ", ->
       beforeEach ->

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

@@ -19,6 +19,8 @@ if Backbone?
           })
           @$el.html(_.template($("#new-post-template").html(), context))
           threadTypeTemplate = _.template($("#thread-type-template").html());
+          if $('.js-group-select').is(':disabled')
+              $('.group-selector-wrapper').addClass('disabled')
           @addField(threadTypeTemplate({form_id: _.uniqueId("form-")}));
           if @isTabMode()
               @topicView = new DiscussionTopicMenuView {
@@ -52,8 +54,10 @@ if Backbone?
       toggleGroupDropdown: ($target) ->
         if $target.data('cohorted')
             $('.js-group-select').prop('disabled', false);
+            $('.group-selector-wrapper').removeClass('disabled')
         else
             $('.js-group-select').val('').prop('disabled', true);
+            $('.group-selector-wrapper').addClass('disabled')
 
       postOptionChange: (event) ->
           $target = $(event.target)

lms/templates/discussion/_underscore_templates.html

@@ -387,7 +387,7 @@
         <ul class="post-errors" style="display: none"></ul>
         <div class="forum-new-post-form-wrapper"></div>
         ${'<% if (cohort_options) { %>'}
-        <div class="post-field">
+        <div class="post-field group-selector-wrapper${'<% if (!is_commentable_cohorted) { %>'} disabled${'<% } %>'}" >
             <label class="field-label">
                 <span class="field-label-text">
                     ## Translators: This labels the selector for which group of students can view a post