Toggle visibility of all student names (#1775)

* toggle visibility of all student names

* Add toggle names button tests

Author: tuncbkose

nbgrader/server_extensions/formgrader/static/js/gradebook_notebook_submissions.js

@@ -37,11 +37,13 @@ var SubmittedNotebookUI = Backbone.View.extend({
     showName: function () {
         this.$reveal.parent().find(".name-shown").show();
         this.$reveal.parent().find(".name-hidden").hide();
+        updateToggleNamesButtonLabel();
     },
 
     hideName: function () {
         this.$reveal.parent().find(".name-hidden").show();
         this.$reveal.parent().find(".name-shown").hide();
+        updateToggleNamesButtonLabel();
     },
 
     render: function () {
@@ -187,6 +189,33 @@ var loadSubmittedNotebooks = function () {
     });
 };
 
+// at least one hidden name -> label="Show All Names"
+// no hidden name -> label="Hide All Names"
+let updateToggleNamesButtonLabel = function() {
+    const button = document.getElementById("toggle_names");
+    const icons = document.getElementsByClassName("glyphicon name-hidden");
+    const icon_array = [...icons];
+    if (icon_array.some(el => $(el).is(':visible'))){
+        button.innerHTML = "Show All Names";
+    } else{
+        button.innerHTML = "Hide All Names";
+    }
+};
+
+// button to toggle all student names
+let toggleAllNames = function () {
+    let icons;
+    const button = document.getElementById("toggle_names");
+    const names_hidden = (button.innerHTML === "Show All Names");
+    if (names_hidden){
+        icons = document.getElementsByClassName("glyphicon name-hidden");
+    } else {
+        icons = document.getElementsByClassName("glyphicon name-shown");
+    }
+    let icon_array = [...icons];
+    icon_array.forEach(x => x.click());
+};
+
 var models = undefined;
 var views = [];
 $(window).on('load', function () {

nbgrader/server_extensions/formgrader/templates/gradebook_notebook_submissions.tpl

@@ -17,6 +17,11 @@ var notebook_id = "{{ notebook_id }}";
 </ol>
 {%- endblock -%}
 
+<!-- Button to toggle all student names -->
+{%- block messages -%}
+<button id="toggle_names" onclick="toggleAllNames()">Show All Names</button>
+{%- endblock -%}
+
 {%- block table_header -%}
 <tr>
   <th></th>

nbgrader/tests/labextension_ui-tests/tests/test_formgrader.spec.ts

@@ -510,6 +510,55 @@ test('Gradebook3 show hide names', async ({
 
 });
 
+/*
+  Toggle name visibility button
+ */
+test('Gradebook toggle names button', async ({
+  page,
+  baseURL,
+  tmpPath
+}) => {
+
+  test.skip(is_windows, 'This test does not work on Windows');
+
+  if (baseURL === undefined) throw new Error("BaseURL is undefined.");
+
+  // create environment
+  await create_env(page, tmpPath, exchange_dir, cache_dir, is_windows);
+  await add_courses(page, baseURL, tmpPath);
+  await open_formgrader(page);
+
+  // get formgrader iframe
+  const iframe = page.mainFrame().childFrames()[0];
+
+  // Change iframe URL to gradebook Problem Set 1
+  await iframe.goto(`${baseURL}/formgrader/gradebook/Problem Set 1/Problem 1`);
+  await check_formgrader_breadcrumbs(iframe, ["Manual Grading", "Problem Set 1", "Problem 1"]);
+
+  const button = iframe.locator("[id='toggle_names']").first()
+  const hidden = iframe.locator("td .glyphicon.name-hidden").first();
+  const shown = iframe.locator("td .glyphicon.name-shown").first();
+
+  // At the start, all names are hidden
+  await expect(button).toHaveText("Show All Names", {useInnerText: true});
+  await expect(hidden).toBeVisible();
+  await expect(shown).toBeHidden();
+
+  // Clicking should make names shown
+  await button.click();
+  await expect(button).toHaveText("Hide All Names", {useInnerText: true});
+  await expect(hidden).toBeHidden();
+  await expect(shown).toBeVisible();
+
+  // If there is at least one hidden, button should default to showing all names
+  await shown.click();
+  await expect(button).toHaveText("Show All Names", {useInnerText: true});
+  await button.click();
+  await expect(hidden).toBeHidden();
+  await expect(shown).toBeVisible();
+
+});
+
 /*
  * Load students and test students links
  */

nbgrader/tests/nbextensions/test_formgrader.py

@@ -278,6 +278,38 @@ def test_gradebook3_show_hide_names(browser, port, gradebook):
     assert hidden.is_displayed()
 
 
+@pytest.mark.nbextensions
+def test_gradebook_toggle_names_button(browser, port, gradebook):
+    problem = gradebook.find_assignment("Problem Set 1").notebooks[0]
+    utils._load_gradebook_page(browser, port, "gradebook/Problem Set 1/{}".format(problem.name))
+    submissions = problem.submissions
+    submissions.sort(key=lambda x: x.id)
+
+    button = browser.find_element(By.ID, "toggle_names")
+    row1 = browser.find_element(By.CSS_SELECTOR, "tbody tr")
+    col1 = row1.find_element(By.CSS_SELECTOR, "td")
+    hidden = col1.find_element(By.CSS_SELECTOR, ".glyphicon.name-hidden")
+    shown = col1.find_element(By.CSS_SELECTOR, ".glyphicon.name-shown")
+
+    # At the start, all names are hidden
+    assert button.text == "Show All Names"
+    assert hidden.is_displayed()
+    assert not shown.is_displayed()
+
+    # Clicking should make names shown
+    button.click()
+    assert button.text == "Hide All Names"
+    assert not hidden.is_displayed()
+    assert shown.is_displayed()
+
+    # If there is at least one hidden, button should default to showing all names
+    shown.click()
+    assert button.text == "Show All Names"
+    button.click()
+    assert not hidden.is_displayed()
+    assert shown.is_displayed()
+
+
 @pytest.mark.nbextensions
 def test_load_student1(browser, port, gradebook):
     # load the student view