MDL-69079 course: Handle fetch module data failures in activity chooser

course/amd/src/activitychooser.js

@@ -133,7 +133,18 @@ const registerListenerEvents = (courseId, chooserConfig) => {
                 const sectionModal = buildModal(bodyPromise, footerData);
 
                 // Now we have a modal we should start fetching data.
-                const data = await fetchModuleData();
+                // If an error occurs while fetching the data, display the error within the modal.
+                const data = await fetchModuleData().catch(async(e) => {
+                    const errorTemplateData = {
+                        'errormessage': e.message
+                    };
+                    bodyPromiseResolver(await Templates.render('core_course/local/activitychooser/error', errorTemplateData));
+                });
+
+                // Early return if there is no module data.
+                if (!data) {
+                    return;
+                }
 
                 // Apply the section id to all the module instance links.
                 const builtModuleData = sectionIdMapper(data, caller.dataset.sectionid, caller.dataset.sectionreturnid);

course/templates/local/activitychooser/error.mustache

@@ -0,0 +1,39 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core_course/local/activitychooser/error
+
+    Chooser error template.
+
+    Variables required for this template:
+    * errormessage - The error message
+
+    Example context (json):
+    {
+        "errormessage": "Error"
+    }
+}}
+<div class="p-2 px-sm-5 py-sm-4">
+    <div class="alert alert-danger" role="alert">
+        <h5 class="alert-heading">
+            <i class="fa fa-exclamation-circle fa-fw text-danger"></i>
+            {{#str}} error, error {{/str}}
+        </h5>
+        <hr>
+        <p class="text-break">{{{errormessage}}}</p>
+    </div>
+</div>