MDL-76545 core: fix reactive debug panel

The reactive debug panel stops working when a new reactive instance is
created in the fly. This was not detected until the new dragf and drop
files into course uses a second reactive UI component in the same page.

lib/amd/src/local/reactive/debugpanel.js

@@ -89,8 +89,14 @@ class GlobalDebugPanel extends BaseComponent {
         this.selectors = {
             LOADERS: `[data-for='loaders']`,
             SUBPANEL: `[data-for='subpanel']`,
+            NOINSTANCES: `[data-for='noinstances']`,
             LOG: `[data-for='log']`,
         };
+        this.classes = {
+            HIDE: `d-none`,
+        };
+        // The list of loaded debuggers.
+        this.subPanels = new Set();
     }
 
     /**
@@ -99,17 +105,38 @@ class GlobalDebugPanel extends BaseComponent {
      * @param {object} state the initial state
      */
     stateReady(state) {
-        if (state.reactives.size > 0) {
-            this.getElement(this.selectors.LOADERS).innerHTML = '';
-        }
+        this._updateReactivesPanels({state});
+        // Remove loading wheel.
+        this.getElement(this.selectors.SUBPANEL).innerHTML = '';
+    }
+
+    /**
+     * Component watchers.
+     *
+     * @returns {Array} of watchers
+     */
+    getWatchers() {
+        return [
+            {watch: `reactives:created`, handler: this._updateReactivesPanels},
+        ];
+    }
+
+    /**
+     * Update the list of reactive instances.
+     * @param {Object} args
+     * @param {Object} args.state the current state
+     */
+    _updateReactivesPanels({state}) {
+        this.getElement(this.selectors.NOINSTANCES)?.classList?.toggle(
+            this.classes.HIDE,
+            state.reactives.size > 0
+        );
         // Generate loading buttons.
         state.reactives.forEach(
             instance => {
                 this._createLoader(instance);
             }
         );
-        // Remove loading wheel.
-        this.getElement(this.selectors.SUBPANEL).innerHTML = '';
     }
 
     /**
@@ -118,6 +145,10 @@ class GlobalDebugPanel extends BaseComponent {
      * @param {object} instance hte instance data
      */
     _createLoader(instance) {
+        if (this.subPanels.has(instance.id)) {
+            return;
+        }
+        this.subPanels.add(instance.id);
         const loaders = this.getElement(this.selectors.LOADERS);
         const btn = document.createElement("button");
         btn.innerHTML = instance.id;

lib/templates/local/reactive/debugpanel.mustache

@@ -32,7 +32,11 @@
 <div id="{{uniqid}}-reactive-debugpanel" class="py-1">
     <div>
         {{#str}} reactive_instances , core_debug {{/str}}
-        <span data-for="loaders">{{#str}} reactive_noinstances , core_debug {{/str}}</span>
+        <span data-for="loaders">
+            <span data-for="noinstances">
+                {{#str}} reactive_noinstances , core_debug {{/str}}
+            </span>
+        </span>
     </div>
     <div data-for="subpanel">
         {{> core/loading }}