MDL-89250 core_courseformat: fix stuck collapse-all toggle state

Author: muhammadarnaldo

public/course/format/amd/build/local/content.min.js

@@ -318,6 +318,9 @@ export default class Component extends BaseComponent {
     /**
      * Refresh the collapse/expand all sections element.
      *
+     * Delegated sections, like subsections, are nested inside a regular section, so they are only
+     * visible when their parent section is expanded. They must not drive the toggler state.
+     *
      * @param {Object} state The state data
      */
     _refreshAllSectionsToggler(state) {
@@ -327,26 +330,15 @@ export default class Component extends BaseComponent {
         }
 
         const sectionIsCollapsible = this._getCollapsibleSections();
-
-        // Check if we have all sections collapsed/expanded.
-        let allcollapsed = true;
-        let allexpanded = true;
-        state.section.forEach(
-            section => {
-                if (sectionIsCollapsible[section.id]) {
-                    allcollapsed = allcollapsed && section.contentcollapsed;
-                    allexpanded = allexpanded && !section.contentcollapsed;
-                }
-            }
+        const sections = [...state.section.values()].filter(
+            section => sectionIsCollapsible[section.id] && section.component === null
         );
-        if (allcollapsed) {
-            target.classList.add(this.classes.COLLAPSED);
-            target.setAttribute('aria-expanded', false);
-        }
-        if (allexpanded) {
-            target.classList.remove(this.classes.COLLAPSED);
-            target.setAttribute('aria-expanded', true);
-        }
+
+        // The toggler only offers to expand all when every listed section is collapsed.
+        const allcollapsed = sections.length > 0 && sections.every(section => section.contentcollapsed);
+
+        target.classList.toggle(this.classes.COLLAPSED, allcollapsed);
+        target.setAttribute('aria-expanded', !allcollapsed);
     }
 
     /**
@@ -704,6 +696,7 @@ export default class Component extends BaseComponent {
             promise.then((html, js) => {
                 Templates.replaceNode(sectionitem, html, js);
                 this._indexContents();
+                this._refreshAllSectionsToggler(this.reactive.state);
                 pendingReload.resolve();
             }).catch(() => {
                 pendingReload.resolve();

public/course/format/amd/build/local/content.min.js.map

@@ -75,3 +75,42 @@ Feature: Course content collapsed user preferences
     And I should see "Activity sample 3" in the "region-main" "region"
     And I should not see "Activity sample 4" in the "region-main" "region"
     And I should see "Activity sample 5" in the "region-main" "region"
+
+  @javascript
+  Scenario: The collapse all toggle is updated when only some sections are expanded
+    Given I am on the "C1" "Course" page logged in as "teacher1"
+    And I should see "Collapse all" in the "region-main" "region"
+    And I click on "Collapse all" "button" in the "region-main" "region"
+    And I should see "Expand all" in the "region-main" "region"
+    And I should not see "Activity sample 1" in the "region-main" "region"
+    # Expanding a single section is enough to offer collapsing all of them again.
+    When I click on "Expand" "link" in the "Section 1" "section"
+    Then I should see "Collapse all" in the "region-main" "region"
+    But I should not see "Expand all" in the "region-main" "region"
+
+  @javascript
+  Scenario: The collapse all toggle is updated when a new section is added
+    Given I am on the "C1" "Course" page logged in as "teacher1"
+    And I turn editing mode on
+    And I click on "Collapse all" "button" in the "region-main" "region"
+    And I should see "Expand all" in the "region-main" "region"
+    And the "aria-expanded" attribute of "#collapsesections" "css_element" should contain "false"
+    # New sections are expanded by default, so the toggle switches back to "Collapse all".
+    When I click on "Add section" "link" in the "course-addsection" "region"
+    Then I should see "Collapse all" in the "region-main" "region"
+    And the "aria-expanded" attribute of "#collapsesections" "css_element" should contain "true"
+    But I should not see "Expand all" in the "region-main" "region"
+
+  @javascript
+  Scenario: The collapse all toggle is updated when a section is deleted
+    Given I am on the "C1" "Course" page logged in as "teacher1"
+    And I turn editing mode on
+    And I click on "Collapse all" "button" in the "region-main" "region"
+    # Expand a single section to get a mixed state.
+    And I click on "Expand" "link" in the "Section 5" "section"
+    And I should see "Collapse all" in the "region-main" "region"
+    # Delete the only expanded section, so the toggle goes back to "Expand all".
+    When I delete section "5"
+    And I click on "Delete" "button" in the "Delete section?" "dialogue"
+    Then I should see "Expand all" in the "region-main" "region"
+    But I should not see "Collapse all" in the "region-main" "region"

public/course/format/amd/src/local/content.js

@@ -34,6 +34,23 @@ Feature: Users view subsections on course page
     And I click on "Expand" "link" in the "Subsection1" "activity"
     And I click on "Page1 in Subsection1" "link" in the "Subsection1" "activity"
 
+  @javascript
+  Scenario: Expanded subsections do not keep the collapse all toggle stuck
+    Given I am on the "C1" "Course" page logged in as "student1"
+    And I should see "Collapse all" in the "region-main" "region"
+    # Collapse every top level section but leave the subsections expanded.
+    When I click on "Collapse" "link" in the "General" "section"
+    And I click on "Collapse" "link" in the "Section 1" "section"
+    And I click on "Collapse" "link" in the "Section 2" "section"
+    And I click on "Collapse" "link" in the "Section 3" "section"
+    And I should not see "New database" in the "region-main" "region"
+    # Subsections are hidden inside a collapsed section, so they must not hold the toggle back.
+    Then I should see "Expand all" in the "region-main" "region"
+    But I should not see "Collapse all" in the "region-main" "region"
+    # The toggle must expand everything on the first click instead of being a dead click.
+    And I click on "Expand all" "button" in the "region-main" "region"
+    And I should see "New database" in the "region-main" "region"
+
   @javascript
   Scenario: Teacher can create activities inside subsections on course page
     When I log in as "teacher1"