From d5d6383374af2a78a53e799124926a3b0f434f48 Mon Sep 17 00:00:00 2001
From: Stepan Miakchilo <smiakchilo@exadel.com>
Date: Fri, 29 Nov 2024 02:38:56 +0300
Subject: [PATCH] [Tech] Updated "Select all"/"unselect all" control

---
 .../css/console-ui.checkboxlist.css           | 13 +++---
 .../js/console-ui.dialog.js                   | 43 ++++++++++++-------
 2 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/ui.apps/src/main/content/jcr_root/apps/etoolbox-rollout-manager/clientlibs/rollout-manager-ui/css/console-ui.checkboxlist.css b/ui.apps/src/main/content/jcr_root/apps/etoolbox-rollout-manager/clientlibs/rollout-manager-ui/css/console-ui.checkboxlist.css
index 54e50d9..18c19b9 100644
--- a/ui.apps/src/main/content/jcr_root/apps/etoolbox-rollout-manager/clientlibs/rollout-manager-ui/css/console-ui.checkboxlist.css
+++ b/ui.apps/src/main/content/jcr_root/apps/etoolbox-rollout-manager/clientlibs/rollout-manager-ui/css/console-ui.checkboxlist.css
@@ -31,9 +31,12 @@
     padding: 0;
 }
 
-.rollout-manager-select-all {
-    font-size: small;
-    min-width: 86px;
+.rollout-manager-select-all .coral3-Checkbox-description {
+    color: #666;
+    font-size: 0.75rem;
+    padding-top: 0.15rem;
+    text-decoration: underline;
+    text-decoration-style: dashed;
 }
 
 .rollout-manager-coral-accordion-item-content {
@@ -56,8 +59,8 @@
 }
 
 .rollout-manager-dialog .coral3-Dialog-wrapper {
-    width: 800px;
     height: 566px;
+    width: 800px;
 }
 
 .rollout-manager-dialog .coral3-Checkbox {
@@ -85,7 +88,7 @@
 
 .rollout-manager-nestedcheckboxlist-container {
     overflow-y: auto;
-    height: 206px;
+    height: 246px;
 }
 
 .rollout-manager-logger-dialog .coral3-Dialog-wrapper {
diff --git a/ui.apps/src/main/content/jcr_root/apps/etoolbox-rollout-manager/clientlibs/rollout-manager-ui/js/console-ui.dialog.js b/ui.apps/src/main/content/jcr_root/apps/etoolbox-rollout-manager/clientlibs/rollout-manager-ui/js/console-ui.dialog.js
index 2216e78..5027736 100644
--- a/ui.apps/src/main/content/jcr_root/apps/etoolbox-rollout-manager/clientlibs/rollout-manager-ui/js/console-ui.dialog.js
+++ b/ui.apps/src/main/content/jcr_root/apps/etoolbox-rollout-manager/clientlibs/rollout-manager-ui/js/console-ui.dialog.js
@@ -137,9 +137,7 @@
             .text(TARGET_PATHS_LABEL);
         label.appendTo(span);
 
-        const selectAll = $('<a is="coral-anchorbutton" variant="quiet" class="rollout-manager-select-all">')
-            .text(SELECT_ALL_LABEL);
-        selectAll.appendTo(span);
+        $(`<coral-checkbox class="rollout-manager-select-all">${SELECT_ALL_LABEL}</coral-checkbox>`).appendTo(span);
 
         span.appendTo(sourceElement);
     }
@@ -217,31 +215,44 @@
         };
     }
 
-    function changeSelectAllLabel(hasSelection) {
-        const selectAllEl = $('.rollout-manager-select-all');
-        selectAllEl.text(hasSelection ? UNSELECT_ALL_LABEL : SELECT_ALL_LABEL);
-    }
-
     function hasSelection() {
         return $(CORAL_CHECKBOX_ITEM + '[checked]').length > 0;
     }
 
-    function selectUnselectAll() {
-        $(CORAL_CHECKBOX_ITEM).filter(':not([disabled])').prop('checked', !hasSelection());
+    function isFullySelected() {
+        return $(CORAL_CHECKBOX_ITEM).filter(':not([disabled])').length === $(CORAL_CHECKBOX_ITEM + '[checked]').length;
+    }
+
+    function selectUnselectAll(checked) {
+        $(CORAL_CHECKBOX_ITEM).filter(':not([disabled])').prop('checked', checked);
     }
 
-    function validateSelection(hasSelection, submitBtn) {
+    function changeButtonState(hasSelection, submitBtn) {
         submitBtn.attr('disabled', !hasSelection);
     }
 
     function onCheckboxChange(submitBtn) {
-        const hasAnySelection = hasSelection();
-        changeSelectAllLabel(hasAnySelection);
-        validateSelection(hasAnySelection, submitBtn);
+        const $selectAll = $('.rollout-manager-select-all');
+        const $selectAllLabel = $selectAll.find('label');
+        if (hasSelection()) {
+            if (isFullySelected()) {
+                $selectAll.prop('checked', true).prop('indeterminate', false);
+            } else {
+                $selectAll.prop('checked', true).prop('indeterminate', true);
+            }
+            $selectAllLabel.text(UNSELECT_ALL_LABEL);
+            changeButtonState(true, submitBtn);
+        } else {
+            $selectAll.prop('checked', false).prop('indeterminate', false);
+            $selectAllLabel.text(SELECT_ALL_LABEL);
+            changeButtonState(false, submitBtn);
+        }
     }
 
     function onSelectAllClick(submitBtn) {
-        selectUnselectAll();
+        const $selectAll = $('.rollout-manager-select-all');
+        const allSelected = !!$selectAll.prop('checked');
+        selectUnselectAll(!allSelected);
         onCheckboxChange(submitBtn);
     }
 
@@ -312,7 +323,7 @@
 
         dialog.show();
 
-        validateSelection(hasSelection(), $submitBtn.add($rolloutBtn));
+        changeButtonState(hasSelection(), $submitBtn.add($rolloutBtn));
 
         return deferred.promise();
     }