Merge pull request #2707 from GSA/2636-user-story-improve-folder-permissions-options

Improve folder permissions on invite team member page:

app/assets/javascripts/collapsibleCheckboxes.js

@@ -63,7 +63,7 @@
     const buttonContent = this.buttonContent[buttonState](this.fieldLabel);
     const stickyClass = expanded ? ' js-stick-at-bottom-when-scrolling' : '';
 
-    return $(`<div class="selection-footer${stickyClass}">
+    return $(`<div class="selection-footer${stickyClass} margin-top-2">
               <button
                 class="govuk-button govuk-button--secondary selection-footer__button usa-button usa-button--outline"
                 aria-expanded="${expanded ? 'true' : 'false'}"
@@ -78,8 +78,6 @@
 
     this.module.$formGroup.append(this.$el);
 
-    // make footer sticky if expanded, clear up from it being sticky if not
-    GOVUK.stickAtBottomWhenScrolling.recalculate();
   };
 
   function CollapsibleCheckboxes () {}
@@ -97,6 +95,7 @@
     this.total = this.$checkboxes.length;
     this.legendText = this.$fieldset.find('legend').first().text().trim();
     this.expanded = false;
+    this.checkUncheckButtonsAdded = false;
 
     this.addHeadingHideLegend();
 
@@ -124,6 +123,44 @@
 
     this.$fieldset.find('legend').addClass('usa-sr-only');
   };
+  CollapsibleCheckboxes.prototype.addCheckUncheckAllButtons = function() {
+    const $buttonsContainer = $('<div class="check-uncheck-all-buttons margin-bottom-2"></div>');
+
+    this.$toggleAllButton = $('<button type="button" class="usa-button usa-button--outline usa-button--small">Select all</button>');
+
+    $buttonsContainer.append(this.$toggleAllButton);
+
+    this.summary.$el.after($buttonsContainer);
+
+    this.$toggleAllButton.on('click', this.toggleAll.bind(this));
+
+    this.updateToggleButtonText();
+  };
+  CollapsibleCheckboxes.prototype.toggleAll = function(e) {
+    e.preventDefault();
+    const allChecked = this.$checkboxes.filter(':checked').length === this.$checkboxes.length;
+
+    if (allChecked) {
+      this.$checkboxes.prop('checked', false);
+    } else {
+      this.$checkboxes.prop('checked', true);
+    }
+
+    this.handleSelection();
+    this.updateToggleButtonText();
+  };
+  CollapsibleCheckboxes.prototype.updateToggleButtonText = function() {
+    if (!this.$toggleAllButton) return;
+
+    const checkedCount = this.$checkboxes.filter(':checked').length;
+    const allChecked = checkedCount === this.$checkboxes.length;
+
+    if (allChecked) {
+      this.$toggleAllButton.text('Deselect all');
+    } else {
+      this.$toggleAllButton.text('Select all');
+    }
+  };
   CollapsibleCheckboxes.prototype.expand = function(e) {
     if (e !== undefined) { e.preventDefault(); }
 
@@ -132,6 +169,15 @@
       this.expanded = true;
       this.summary.update(this.getSelection());
       this.footer.update(this.expanded);
+
+      if (!this.checkUncheckButtonsAdded) {
+        this.addCheckUncheckAllButtons();
+        this.checkUncheckButtonsAdded = true;
+      } else {
+        if (this.$toggleAllButton) {
+          this.$toggleAllButton.parent().show();
+        }
+      }
     }
 
     // shift focus whether expanded or not
@@ -145,6 +191,10 @@
       this.expanded = false;
       this.summary.update(this.getSelection());
       this.footer.update(this.expanded);
+
+      if (this.$toggleAllButton) {
+        this.$toggleAllButton.parent().hide();
+      }
     }
 
     // shift focus whether expanded or not
@@ -159,6 +209,7 @@
   };
   CollapsibleCheckboxes.prototype.handleSelection = function(e) {
     this.summary.update(this.getSelection(), this.total, this.fieldLabel);
+    this.updateToggleButtonText();
   };
   CollapsibleCheckboxes.prototype.bindEvents = function() {
     const self = this;

app/assets/sass/uswds/_uswds-theme-custom-styles.scss

@@ -316,6 +316,13 @@ td.table-empty-message {
 }
 
 .js-stick-at-bottom-when-scrolling {
+  position: sticky;
+  bottom: 0;
+  background: white;
+  border-top: 1px solid color('gray-cool-10');
+  padding: units(2);
+  margin-top: units(2);
+  z-index: 10;
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
@@ -1077,3 +1084,15 @@ nav.nav {
 .usa-site-alert .usa-alert .usa-alert__body {
   max-width: 75rem;
 }
+
+.usa-form-group--nested {
+  margin-top: 0;
+}
+
+.selection-content > ul > li.usa-checkbox {
+  margin-top: 1rem;
+}
+
+.selection-content .usa-form-group--nested li.usa-checkbox {
+  margin-top: 0;
+}

app/main/views/manage_users.py

@@ -49,7 +49,7 @@ def invite_user(service_id, user_id=None):
     form = form_class(
         inviter_email_address=current_user.email_address,
         all_template_folders=current_service.all_template_folders,
-        folder_permissions=[f["id"] for f in current_service.all_template_folders],
+        folder_permissions=[],
     )
 
     if user_id:

tests/javascripts/collapsibleCheckboxes.test.js

@@ -355,7 +355,6 @@ describe('Collapsible fieldset', () => {
       test("is added when the fieldset is expanded", () => {
 
         expect(formGroup.querySelector('.selection-footer').classList.contains('js-stick-at-bottom-when-scrolling')).toBe(true);
-        expect(window.GOVUK.stickAtBottomWhenScrolling.recalculate.mock.calls.length).toBe(1);
 
       });
 
@@ -365,7 +364,6 @@ describe('Collapsible fieldset', () => {
         helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
 
         expect(formGroup.querySelector('.selection-footer').classList.contains('js-stick-at-bottom-when-scrolling')).toBe(false);
-        expect(window.GOVUK.stickAtBottomWhenScrolling.recalculate.mock.calls.length).toBe(2);
 
       });
 
@@ -373,6 +371,86 @@ describe('Collapsible fieldset', () => {
 
   });
 
+  describe("check/uncheck all functionality", () => {
+
+    beforeEach(() => {
+      window.GOVUK.modules.start();
+
+      helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
+    });
+
+    test("adds a 'Select all' button when checkboxes are shown", () => {
+      const toggleButton = document.querySelector('.usa-button--small');
+
+      expect(toggleButton).not.toBeNull();
+      expect(toggleButton.textContent).toEqual('Select all');
+    });
+
+    test("clicking 'Select all' checks all checkboxes", () => {
+      const toggleButton = document.querySelector('.usa-button--small');
+
+      expect(checkboxes[0].checked).toBe(false);
+      expect(checkboxes[9].checked).toBe(false);
+
+      helpers.triggerEvent(toggleButton, 'click');
+
+      expect(checkboxes[0].checked).toBe(true);
+      expect(checkboxes[9].checked).toBe(true);
+    });
+
+    test("button changes to 'Deselect all' when all are checked", () => {
+      const toggleButton = document.querySelector('.usa-button--small');
+
+      helpers.triggerEvent(toggleButton, 'click');
+
+      expect(toggleButton.textContent).toEqual('Deselect all');
+    });
+
+    test("clicking 'Deselect all' unchecks all checkboxes", () => {
+      const toggleButton = document.querySelector('.usa-button--small');
+
+      helpers.triggerEvent(toggleButton, 'click');
+      expect(checkboxes[0].checked).toBe(true);
+
+      helpers.triggerEvent(toggleButton, 'click');
+
+      expect(checkboxes[0].checked).toBe(false);
+      expect(checkboxes[9].checked).toBe(false);
+    });
+
+    test("button is hidden when fieldset is collapsed", () => {
+      const toggleButton = document.querySelector('.usa-button--small');
+      const doneButton = formGroup.querySelector('.govuk-button');
+
+      expect(toggleButton.parentElement.style.display).not.toEqual('none');
+
+      helpers.triggerEvent(doneButton, 'click');
+
+      expect(toggleButton.parentElement.style.display).toEqual('none');
+    });
+
+  });
+
+  describe("toggle button visibility on re-expansion", () => {
+
+    test("shows toggle button again when fieldset is re-opened", () => {
+      window.GOVUK.modules.start();
+
+      helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
+      const toggleButton = document.querySelector('.usa-button--small');
+      expect(toggleButton).not.toBeNull();
+
+      helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
+
+      helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
+
+      const toggleButtonAfter = document.querySelector('.usa-button--small');
+      expect(toggleButtonAfter).not.toBeNull();
+      expect(toggleButtonAfter.parentElement.style.display).not.toEqual('none');
+    });
+
+  });
+
   describe("when the selection changes", () => {
 
     const showCheckboxes = () => {