Edit Sections: gray out sections the user can't remove

test plan:
 1. enroll a user in a course via a SIS import
    (or just set a sis_source_id on the enrollment via console)
 2. as a teacher who is not an account admin, go to the People page
    and click the gear menu and Edit Sections
 3. the SIS enrollment should be grayed out, with no X button,
    and hover text stating "You cannot remove this enrollment."
 4. you should be able to add/remove other non-SIS enrollments
    (with and without refreshing the people page)
 5. "Remove From Course" should not appear in the gear menu if
    any non-deleteable enrollments exist
 6. a teacher who *is* an account admin should be able to delete
    the SIS enrollment

fixes CNVS-23009

Change-Id: I203286c537f7a2aede8d12b039ee47ec86a36a9b
Reviewed-on: https://gerrit.instructure.com/64771
Tested-by: Jenkins
Reviewed-by: Dan Minkevitch <dan@instructure.com>
QA-Review: Clare Strong <clare@instructure.com>
Product-Review: Cosme Salazar <cosme@instructure.com>

Author: jstanley0

app/coffeescripts/views/courses/roster/EditSectionsView.coffee

@@ -56,7 +56,7 @@ define [
       $sections = @$('#user_sections')
       for e in @model.sectionEditableEnrollments()
         if section = ENV.CONTEXTS['sections'][e.course_section_id]
-          $sections.append sectionTemplate(id: section.id, name: section.name, role: e.role)
+          $sections.append sectionTemplate(id: section.id, name: section.name, role: e.role, can_be_removed: e.can_be_removed)
 
     onNewToken: ($token) =>
       $link = $token.find('a')
@@ -86,6 +86,7 @@ define [
         if enrollment.role != enrollment.type
           data.enrollment.role = enrollment.role
         deferreds.push $.ajaxJSON url, 'POST', data, (newEnrollment) =>
+          _.extend newEnrollment, { can_be_removed: true }
           newEnrollments.push newEnrollment
 
       # delete old section enrollments

app/coffeescripts/views/courses/roster/RosterUserView.coffee

@@ -50,7 +50,7 @@ define [
       json.url = "#{ENV.COURSE_ROOT_URL}/users/#{@model.get('id')}"
       json.isObserver = @model.hasEnrollmentType('ObserverEnrollment')
       json.isPending = @model.pending(@model.currentRole)
-      json.canRemoveUsers = ENV.permissions.manage_admin_users or (ENV.permissions.manage_students and _.any @model.get('enrollments'), (e) -> e.can_be_removed)
+      json.canRemoveUsers = _.all @model.get('enrollments'), (e) -> e.can_be_removed
       json.canEditSections = not _.isEmpty @model.sectionEditableEnrollments()
       json.canLinkStudents = json.isObserver && !ENV.course.concluded
       json.canViewLoginIdColumn = ENV.permissions.manage_admin_users or ENV.permissions.manage_students

app/stylesheets/base/mixins/_bubbles.scss

@@ -32,6 +32,14 @@
   border-radius: 10px;
   cursor: default;
   position: relative;
+  &.cannot_remove, &.cannot_remove:hover {
+    background-color: $gray-light;
+    border-color: $gray-lighter;
+    div {
+      background-color: $gray-lighter;
+      color: $gray;
+    }
+  }
   &:hover {
     div {
       background-color: #bccef4;

app/views/jst/courses/roster/section.handlebars

@@ -1,9 +1,13 @@
-<li>
-  <div class="ellipsis" title="{{name}} - {{enrollmentName role}}">{{name}} - {{enrollmentName role}}</div>
-  <a href="#" title="{{#t "remove_user_from_course_section"}}Remove user from {{name}}{{/t}}">
-    <span class="screenreader-only">
-      {{#t "remove_user_from_course_section"}}Remove user from {{name}}{{/t}}
-    </span>
-  </a>
+<li class="{{#unless can_be_removed}}cannot_remove{{/unless}}">
+  {{#if can_be_removed}}
+    <div class="ellipsis" title="{{name}} - {{enrollmentName role}}">{{name}} - {{enrollmentName role}}</div>
+    <a href="#" title="{{#t "remove_user_from_course_section"}}Remove user from {{name}}{{/t}}">
+      <span class="screenreader-only">
+        {{#t "remove_user_from_course_section"}}Remove user from {{name}}{{/t}}
+      </span>
+    </a>
+  {{else}}
+    <div class="ellipsis" title="{{#t}}You cannot remove this enrollment.{{/t}}">{{name}} - {{enrollmentName role}}</div>
+  {{/if}}
   <input type="hidden" name="sections[]" value="section_{{id}}">
 </li>

spec/selenium/people_spec.rb

@@ -347,22 +347,10 @@ def link_to_student(enrollment, student)
     end
   end
 
-  def add_a_section
-    section_name = 'section2'
-    get "/courses/#{@course.id}/settings#tab-sections"
-
-    section_input = f('#course_section_name')
-    keep_trying_until { expect(section_input).to be_displayed }
-    replace_content(section_input, section_name)
-    submit_form('#add_section_form')
-    wait_for_ajaximations
-    expect(ff('#sections > .section')[1]).to include_text(section_name)
-  end
-
   context "course with multiple sections", priority: "2" do
     before (:each) do
-      course_with_admin_logged_in
-      add_a_section
+      course_with_teacher_logged_in
+      @section2 = @course.course_sections.create!(name: 'section2')
     end
 
     it "should save add people form data" do
@@ -408,11 +396,9 @@ def add_a_section
     end
 
     it "should remove a student from a section", priority: "1", test_id: 296461 do
-     sec1 = @course.course_sections.create!(name: "section1")
-     sec2 = @course.course_sections.create!(name: "section2")
      @student = user
-     @course.enroll_student(@student, section: sec1, allow_multiple_enrollments: true)
-     @course.enroll_student(@student, section: sec2, allow_multiple_enrollments: true)
+     @course.enroll_student(@student, allow_multiple_enrollments: true)
+     @course.enroll_student(@student, section: @section2, allow_multiple_enrollments: true)
      get "/courses/#{@course.id}/users"
      ff(".icon-settings")[1].click
      fln("Edit Sections").click
@@ -421,6 +407,30 @@ def add_a_section
      wait_for_ajaximations
      expect(ff(".StudentEnrollment")[0].text).not_to include_text("section2")
     end
+
+    it "should gray out sections the user doesn't have permission to remove" do
+      @student = user_with_pseudonym
+      @course.enroll_student(@student, allow_multiple_enrollments: true).update_attribute(:sis_source_id, 'E001')
+      get "/courses/#{@course.id}/users"
+      ff(".icon-settings")[1].click
+      fln("Edit Sections").click
+      expect(f('#user_sections li.cannot_remove').text).to include @course.default_section.name
+
+      # add another section (not via SIS) and ensure it remains editable
+      f(".token_input.browsable").click
+      section_input_element = driver.find_element(:name, "token_capture")
+      section_input_element.send_keys("section2")
+      f('.last.context').click
+      wait_for_ajaximations
+      expect(f("a[title='Remove user from section2']")).not_to be_nil
+      f('.ui-dialog-buttonset .btn-primary').click
+      wait_for_ajaximations
+
+      ff(".icon-settings")[1].click
+      fln("Edit Sections").click
+      expect(f('#user_sections li.cannot_remove').text).to include @course.default_section.name
+      expect(f("a[title='Remove user from section2']")).not_to be_nil
+    end
   end
 
   it "should get the max total activity time" do