From 9414929b8a6b8369f04d1d995ff8155f9c0c1f82 Mon Sep 17 00:00:00 2001
From: Beverly Nguyen <Beverly.Nguyen@gsa.gov>
Date: Mon, 23 Jun 2025 15:05:36 -0700
Subject: [PATCH] Improve folder permissions on invite team member page: -
 Default folder permissions to unchecked instead of all selected - Add Select
 all/Deselect all toggle button that appears when expanded

---
 .../javascripts/collapsibleCheckboxes.js      | 57 ++++++++++++++++++-
 .../uswds/_uswds-theme-custom-styles.scss     | 12 ++++
 app/main/views/manage_users.py                |  2 +-
 3 files changed, 67 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/collapsibleCheckboxes.js b/app/assets/javascripts/collapsibleCheckboxes.js
index 696d7e1c1..f3c43abb7 100644
--- a/app/assets/javascripts/collapsibleCheckboxes.js
+++ b/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;
diff --git a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
index 4d8efcb49..208a42f30 100644
--- a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
+++ b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
@@ -1077,3 +1077,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;
+}
diff --git a/app/main/views/manage_users.py b/app/main/views/manage_users.py
index 66e00c48e..81571fcc2 100644
--- a/app/main/views/manage_users.py
+++ b/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: