Move modal factory instantiation to modal::create
Description
Testing Instructions
Scenario: ModalFactory is deprecated and continues to work
Open any page in Moodle
Pull up the Browser developer tools, and switch to the console.
Run the following code:
require(['core/modal_factory'], (MF) => { MF.create({title: 'Example'}).then((modal) => modal.show()); });
Confirm that a modal appeared with a title of "Example"
Confirm that there was a deprecation notice
Scenario: ModalFactory emits a deprecation notice when using the triggerElement
Open any page in Moodle
Pull up the Browser developer tools, and switch to the console.
Run the following code:
require(['core/modal_factory', 'jquery'], (MF, $) => { MF.create( { title: 'Example', }, $('body'), ); });
Confirm that a modal does not appear immediately
Confirm that a deprecation notice was emitted to the browser warning that the
triggerElement
is deprecated
Click on the background of the page
Confirm that a modal appeared with a title of "Example"
Scenario: New show
option
Open any page in Moodle
Pull up the Browser developer tools, and switch to the console.
Run the following code:
require(['core/modal'], (Modal) => { Modal.create( { title: 'Example', show: true, }, ); });
Confirm that the modal showed on the page immediately
Quiz modals (tested by Behat so can be skipped)
Create a least one question in the course question bank
Create a quiz and navigate to the "Questions" tab
From the "Add" dropdown, choose "from question bank"
Confirm that a modal appeared
Select the question you put into the question bank in the first step
Choose "Add selected questions to the quiz"
Confirm that the page refreshed and the question was added
From the first "Add" dropdown, choose "a random question" (the one before any questions)
Confirm that the dialog opened allowing you to configure and choose a random question
*Confirm it had a title of "Add a random question to page 1"
Press the "Add random question" button
*Confirm that the page refreshed and a random question was added to the correct part of the quiz
From the second "Add" dropdown, choose "a random question" (the one after the first question)
Confirm that the dialog opened allowing you to configure and choose a random question
*Confirm it had a title of "Add a random question to page 2"
Press the "Add random question" button
*Confirm that the page refreshed and a random question was added to the correct part of the quiz
Press the "Repaginate" button
Accept the defaults and press "Go"
Confirm that the questions were each put onto their own page
Navigate to the course question bank
Click on the "0" in the comments column
Confirm modal shown
Add two comments
Close the modal using the "Close" button
Confirm the page refreshed
Confirm that the column count now has two comments for that question
Open the comments by clicking on the "2"
Delete one of the comments
Close the modal using the "X" button in the modal's titlebar
Confirm the page refreshed
Confirm that the column count now has one comment for that question
Click on the "1" in the "Usage" column
Confirm the modal opened listing the quiz you created at the beginning
TinyMCE
Navigate to a course as teacher
Navigate to the announcements forum
Create a new discussion
In the TinyMCE editor:
Open the accessibility checker
Confirm it opened
Inspect it in your developers tools and find the reference in the DOM
Close the modal
Confirm that it was removed from the DOM
Open the equation editor
Confirm it opened
Inspect it in your developers tools and find the reference in the DOM
Close the modal
Confirm that it was removed from the DOM
Open the link editor
Confirm it opened
Inspect it in your developers tools and find the reference in the DOM
Close the modal
Confirm that it was removed from the DOM
Open the h5p editor
Confirm it opened
Inspect it in your developers tools and find the reference in the DOM
Close the modal
Confirm that it was removed from the DOM
Open the Insert Image plugin
Confirm it opened
Inspect it in your developers tools and find the reference in the DOM
Close the modal
Confirm that it was removed from the DOM
Open the Insert Video plugin
Confirm it opened
Inspect it in your developers tools and find the reference in the DOM
Close the modal
Confirm that it was removed from the DOM
Open the RecordRTC Audio plugin (requires localhost or SSL)
Confirm it opened
Inspect it in your developers tools and find the reference in the DOM
Close the modal
Confirm that it was removed from the DOM
Open the RecordRTC Video plugin (requires localhost or SSL)
Confirm it opened
Inspect it in your developers tools and find the reference in the DOM
Close the modal
Confirm that it was removed from the DOM
Scenario: Calendar
Navigate to your dashboard
Click on a calendar day to create a new calendar event
Confirm modal opened
Create the event
Open the event again
Confirm modal opened
Click the delete button
Confirm modal opened
Cancel deletion
Click delete again
Confirm modal opened
Delete the event
Confirm it was removed
Navigate to "Import or export calendars" (underneath the main calendar)
Import the following calendar URL:
https://calendar.google.com/calendar/embed?src=moodle.com_p4c2oe7hsb77ltaro5qtihb5d4%40group.calendar.google.com&ctz=Australia%2FPerth
Confirm it imported
Delete the calendar subscription
Confirm the delete modal was shown
Delete it
Confirm the subscription was removed
Scenario: License manager
Navigate to site admin -> Licence -> License manager
Create a new license:
Short name: 78324
Full name: MDL-78324
Source: https://moodle.org
Click the "Delete" (bin) icon beside the newly created license
Confirm delete dialogue shown
Cancel deletion
Confirm modal closed without deleting the license
Click the "Delete" (bin) icon beside the newly created license
Confirm delete dialogue shown
Confirm modal closed deleting the license
Scenario: Badges
Navigate to site admin -> badges -> manage backpacks
Create a new backpack:
API version: Open Badges v2.0
URL: https://example.com
API URL: https://example.com
Press the delete button
Confirm delete dialogue shown
Cancel deletion
Confirm modal closed without deleting the backpack
Click the "Delete" (bin) icon again
Confirm delete dialogue shown
Confirm modal closed deleting the backpack
Scenario: Tags
Tested by behat
Scenario: Grade report singleview
Navigate to a course with some form of gardable items in it (assigment, quiz, etc).
Navigate to Grades
Open the tertiary navigation dropdown and select "Single view"
Switch to view by "Grade items"
Select a grade item
From the "Actions" dropdown, choose "Override all"
Confirm overrides checkboxes all checked
From the "Actions" dropdown, choose "Override none"
Confirm you were prompted with a confirmation
Cancel
From the "Actions" dropdown, choose "Override none"
Confirm you were prompted with a confirmation
Remove overrides
Confirm overrdies checkboxes all cleared
From the "Actions" dropdown, choose "Exclude all"
Confirm excludes checkboxes all checked
From the "Actions" dropdown, choose "Exclude none"
Confirm excludes checkboxes all cleared
From the "Actions" dropdown, choose "Bulk insert grades"
Confirm form elements greyed out and disabled
Confirm save button greyed out and disabled
Check the "I understand" button
Confirm form elements enabled
Choose "All grades"
Confirm submit button enabled
Save
*Confirm page reloaded and recalculated grades
Scenario: Enrolments
Navigate to a course as teacher/admin
Navigate to participants page
Press the "Enrol users" button
Confirm dialogue opened
Enrol a user
Confirm dialogue closed
For any user, press the info ("i") icon in the "Status" column
Confirm that a modal opened up
Press the cog on the "Manual enrolments" row
Confirm that the edit enrolment modal opened
Suspend the user
Save changes
Confirm the user showed as suspended and the modal closed
Click on the Cog icon for the same user
Confirm the edit enrolment modal opened again
Unsuspend the user
Save changes
Confirm the user showed as active and the modal closed
Press the delete button
Confirm delete dialogue shown
Cancel deletion
Confirm modal closed without deleting the user enrolment
Click the "Delete" (bin) icon again
Confirm delete dialogue shown
Confirm modal closed deleting the user enrolment this time
Using the checkboxes at the left, select a couple of users
From the bottom of the page, open the "With selected users" dropdown and choose" Send a message"
Enter a message
Send message
Rejoice
Scenario: Forum
Create a forum and enable "Whole forum grading" (any point/scale)
Log in as a student and navigate to that forum
Click on the "View grades" button
Confirm the dialogue opened
Create content in the forum
Log back in as teacher/admin and navigate to that forum
Press the "Grade users" button
Find the user with content
Press the "View discussion" link
Confirm it opened in a modal
Scenario: File types
Open a course in editing mode
Open activity chooser
Select assignment
Find the "Submission types" section
In the "Accepted file types" option, press the "choose" button
Confirm modal opened
Select some values
Save changes
Confirm they saved
Scenario: Privacy
Navigate to Site admin -> Users -> Privacy and policies -> Privacy settings
Ensure that the "Allow filtering of exports by course" is checked
Navigate to Site admin -> Users -> Privacy and policies -> Data requests
Make a request for a data export for a user enrolled in multiple courses
Run cron
Wait a few seconds for t he cron to run
Refresh the requests page
From the "Actions" dropdown, choose "Approve request (data from selected courses)"
Confirm a modal was shown
Course content download
Navigate to Site admin -> Courses -> download course content
Enable the feature
Navigate to any course and edit its settings
Set "Enable download course content" to yes
Save
From the "More" menu choose "Download course content"
Confirm modal opened
Download the content
Confirm modal closed
Course content
Navigate to a course
Turn editign on
Drag and drop an image from your computer into the course
Confirm modal opened
Accept the modal
Confirm modal closed
Confirm file uploaded
Copy course
Navigate to Site admin -> Courses - Manage courses and categories
Click on the "Copy course" button for any course
Confirm modal opened
Cancel
Confirm modal closed
Click on the "Copy course" button for any course
Confirm modal opened
Enter details and press "Copy and return"
Confirm modal closed
Run cron
Refresh
Confirm new course now shown
Click on the "Copy course" button for any course
Confirm modal opened
Enter details and press "Copy and view"
*Confirm you're taken to the "Course copy progress" page
Scenario: Moodlenet
Navigate to Site admin -> Advanced features
Enable MoodleNet integration (inbound)
Navigate to Site admin -> Developerment -> Experimental settings
Enable sharing to MoodleNet (outbound)
Navigate to Site admin -> MoodleNet -> OUtbound
Click the "Create it" link
Create a "MoodleNet" OAuth2 Provider
Navigate to Site admin -> MoodleNet -> OUtbound
Select the newly created OAUth2 proivder
Navigate to a course
Create an activity
From the activity's "More" menu, choose "Share to MoodleNet"
Confirm modal opened
Repeats
The following tests all require you to open a modal, close it, open it again, and close it again without any error shown in the browser developer console
Course
Enable editing mode
Toggle the Activity chooser open/close/open/close
Toggle the Add block modal open/close/open/close
Automated test results
Pre-check results
Workaround
Attachments
Testing discovered
caused a regression
has to be done before
is blocked by
Activity
This has caused the following regression https://moodle.atlassian.net/browse/MDL-81339#icft=MDL-81339 as well.
I think https://moodle.atlassian.net/browse/MDL-79451#icft=MDL-79451 is another one from here
Just noting this caused a regression in https://moodle.atlassian.net/browse/MDL-79384#icft=MDL-79384 too (lti, analytics)
For the records, https://moodle.atlassian.net/browse/MDL-79340#icft=MDL-79340 has been just created as a regression of this. See you there!
Thanks for your contributions! This change is now available from the main moodle.git repository and will shortly be available on download.moodle.org.
Closing as fixed!
Details
Details
Priority
Affects versions
Components
Labels
Assignee
Reporter
Peer reviewer
Integrator
Fix versions
Tester
Participants
Pull from Repository
Pull Main Branch
Documentation link
Component Lead Review
Clockify
Start / Stop
Clockify

The way in which the core/modal module works and that we must separately register modals, before instantiating them from the factory is, to be frank, batshit crazy.
Right now it looks like:
// mymodal.js import Modal from 'core/modal'; import * as ModalRegistry from 'core/modal_registry'; export default class MyModal extends Modal { static TYPE = 'local_example/mymodal'; // ... } ModalRegistry.register( MyModal.TYPE, MyModal, 'local_example/mymodal', // Template name. );
And then to instantiate it looks like:
// mycode.js import MyModal from './mymodal'; import * as ModalFactory from 'core/modal_factory'; // ... const myModal = await ModalFactory.create(MyModal.TYPE, { // ... large: true, body: 'Hello world!', }); myModal.show();
To be quite frank, this is nuts. There is so much boilerplate here, and it's so easy to reduce and remove most of it.
,
I'd like to get us to to the point where the definition is as simple as:
// mymodal.js import Modal from 'core/modal'; export default class MyModal extends Modal { static TYPE = 'local_example/mymodal'; static TEMPLATE = 'local_example/mymodal'; // ... }
And then the instantiation is:
// mycode.js import MyModal from './mymodal'; const myModal = MyModal.create({ // ... large: true, body: 'Hello world!', show: true, });
I believe that we should be able to entirely get rid of:
the modal_registry (after deprecating)
the modal_factory (moving existing functionality to core/modal as new static methods and depreating)
the need to register modals at all
We also do a ridiculous amount of configuration in the factory instead of the modal itself - again why!?
This issue is about taking some ideas originally put into https://moodle.atlassian.net/browse/MDL-78306#icft=MDL-78306, and enacting them here.