[UI] Handle selection of all branches

Author: NirmalScaria

html/branchSelection.html

@@ -11,7 +11,7 @@
                 d="M11.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122V6A2.5 2.5 0 0110 8.5H6a1 1 0 00-1 1v1.128a2.251 2.251 0 11-1.5 0V5.372a2.25 2.25 0 111.5 0v1.836A2.492 2.492 0 016 7h4a1 1 0 001-1v-.628A2.25 2.25 0 019.5 3.25zM4.25 12a.75.75 0 100 1.5.75.75 0 000-1.5zM3.5 3.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0z">
               </path>
             </svg>
-            <span class="css-truncate-target" data-menu-button="">All branches</span>
+            <span class="css-truncate-target" data-menu-button="" id = "branches-dropdown-button">All branches</span>
             <span class="dropdown-caret"></span>
           </summary>
           <div class="SelectMenu">

js/setBranchOptions.js

@@ -1,6 +1,7 @@
 function setBranchOptions(branches, selectedBranchNames, allBranches) {
     var branchesContainer = document.getElementById("branches-list-parent");
     var existingChild = branchesContainer.children[0];
+    var branchesDropdownButton = document.getElementById("branches-dropdown-button");
 
     var branchNames = new Set()
     for (var branch in allBranches) {
@@ -11,6 +12,12 @@ function setBranchOptions(branches, selectedBranchNames, allBranches) {
         var newChild = existingChild.cloneNode(true);
         newChild.children[1].innerHTML = branch;
         newChild.setAttribute("branch-name", branch);
+        if(selectedBranchNames.includes(branch)){
+            newChild.setAttribute("aria-checked", "true");
+        }
+        else{
+            newChild.setAttribute("aria-checked", "false");
+        }
         newChild.addEventListener("click", () => {
             var thisItem = document.querySelector(`[branch-name="${branch}"]`);
 
@@ -33,6 +40,15 @@ function setBranchOptions(branches, selectedBranchNames, allBranches) {
         branchesContainer.appendChild(newChild);
     });
 
+    if (branchNames.size == selectedBranchNames.length) {
+        branchesContainer.children[0].setAttribute("aria-checked", "true");
+        branchesDropdownButton.innerHTML = "All Branches";
+    }
+    else {
+        branchesContainer.children[0].setAttribute("aria-checked", "false");
+        branchesDropdownButton.innerHTML = "Select Branches";
+    }
+    
     // Action for the "All branches" button
     branchesContainer.children[0].addEventListener("click", () => {
         if (branchesContainer.children[0].getAttribute("aria-checked") == "true") {