MDL-81043 gradereport_grader: Improve gradereport_grader/collapse

- This will helps `nodesUpdate` handle asynchronous updates better
 - This also helps to fix Random Behat failure

grade/report/grader/amd/src/collapse.js

@@ -57,6 +57,7 @@ const selectors = {
     placeholder: '.collapsecolumndropdown [data-region="placeholder"]',
     fullDropdown: '.collapsecolumndropdown',
     searchResultContainer: '.searchresultitemscontainer',
+    cellMenuButton: '.cellmenubtn',
 };
 
 const countIndicator = document.querySelector(selectors.count);
@@ -196,6 +197,7 @@ export default class ColumnSearch extends search_combobox {
     async docClickHandler(e) {
         if (e.target.dataset.hider === selectors.hider) {
             e.preventDefault();
+            const pendingPromise = new Pending('gradereport_grader/collapse:docClickHandler:hide');
             const desiredToHide = e.target.closest(selectors.colVal) ?
                 e.target.closest(selectors.colVal)?.dataset.col :
                 e.target.closest(selectors.itemVal)?.dataset.itemid;
@@ -205,11 +207,13 @@ export default class ColumnSearch extends search_combobox {
             }
             await this.prefcountpipe();
 
-            this.nodesUpdate(desiredToHide);
+            await this.nodesUpdate(desiredToHide);
+            pendingPromise.resolve();
         }
 
         if (e.target.closest('button')?.dataset.hider === selectors.expand) {
             e.preventDefault();
+            const pendingPromise = new Pending('gradereport_grader/collapse:docClickHandler:expand');
             const desiredToHide = e.target.closest(selectors.colVal) ?
                 e.target.closest(selectors.colVal)?.dataset.col :
                 e.target.closest(selectors.itemVal)?.dataset.itemid;
@@ -218,8 +222,9 @@ export default class ColumnSearch extends search_combobox {
 
             await this.prefcountpipe();
 
-            this.nodesUpdate(e.target.closest(selectors.colVal)?.dataset.col);
-            this.nodesUpdate(e.target.closest(selectors.colVal)?.dataset.itemid);
+            await this.nodesUpdate(e.target.closest(selectors.colVal)?.dataset.col);
+            await this.nodesUpdate(e.target.closest(selectors.colVal)?.dataset.itemid);
+            pendingPromise.resolve();
         }
     }
 
@@ -331,11 +336,14 @@ export default class ColumnSearch extends search_combobox {
         });
     }
 
-    nodesUpdate(item) {
+    async nodesUpdate(item) {
         const colNodesToHide = [...document.querySelectorAll(`[data-col="${item}"]`)];
         const itemIDNodesToHide = [...document.querySelectorAll(`[data-itemid="${item}"]`)];
-        this.nodes = [...colNodesToHide, ...itemIDNodesToHide];
-        this.updateDisplay();
+        const elements = [...colNodesToHide, ...itemIDNodesToHide];
+        if (elements && elements.length) {
+            const pendingPromise = new Pending('gradereport_grader/collapse:nodesUpdate:' + item);
+            this.updateDisplay(elements).then(() => pendingPromise.resolve()).catch(Notification.exception);
+        }
     }
 
     /**
@@ -400,14 +408,30 @@ export default class ColumnSearch extends search_combobox {
 
     /**
      * With an array of nodes, switch their classes and values.
+     *
+     * @param {Array} elements The elements to update.
      */
-    updateDisplay() {
-        this.nodes.forEach((element) => {
+    async updateDisplay(elements) {
+        const promises = [];
+        elements.forEach((element) => {
+            promises.push(this.updateDisplayForElement(element));
+        });
+
+        await Promise.all(promises);
+    }
+
+    /**
+     * Update display for given element, switch its classes and values.
+     *
+     * @param {HTMLElement} element The element to update.
+     */
+    async updateDisplayForElement(element) {
         const content = element.querySelector(selectors.content);
         const sort = element.querySelector(selectors.sort);
         const expandButton = element.querySelector(selectors.expandbutton);
         const rangeRowCell = element.querySelector(selectors.rangerowcell);
         const avgRowCell = element.querySelector(selectors.avgrowcell);
+        const cellMenuButton = element.querySelector(selectors.cellMenuButton);
         const nodeSet = [
             element.querySelector(selectors.menu),
             element.querySelector(selectors.icons),
@@ -436,6 +460,7 @@ export default class ColumnSearch extends search_combobox {
                     node?.classList.remove('d-none');
                 });
                 expandButton?.classList.add('d-none');
+                cellMenuButton?.focus();
             } else {
                 element.classList.add('collapsed');
                 content.classList.remove('d-flex');
@@ -445,7 +470,6 @@ export default class ColumnSearch extends search_combobox {
                 expandButton?.classList.remove('d-none');
             }
         }
-        });
     }
 
     /**