Certificates tab javascript constructor always fails in Instructor page when it is enabled

[fsologureng]

Conditions

There is at least one bug when the instructor page is opened in lms and the Certificates sub tab is enabled.
The conditions required to trigger the bug are:

• Subtab certificates enabled¹.
• FEATURES.CERTIFICATES_INSTRUCTOR_GENERATION in false value (default).
• FEATURES.CERTIFICATES_INSTRUCTOR_GENERATION in true value and additional course settings about certificates.

Trace

On load, the Instructor page run a script which initialize each subtab defined in a hardcoded array named sectionsToInitialize.

Then, each subtab is initialized through its own constructor:

edx-platform/lms/static/js/instructor_dashboard/instructor_dashboard.js

Lines 222 to 226 in 7f7cade

	constructor = _arg.constructor;
	$element = _arg.$element;
	return plantTimeout(0, sectionsHaveLoaded.waitFor(function() {
	if ($element[0]) {
	return new constructor($element);

The certificates constructor has a call to initialize the instructor task monitor:

edx-platform/lms/static/js/instructor_dashboard/certificates.js

Lines 111 to 114 in 8b4adaf

	function Certificates($section) {
	$section.data('wrapper', this);
	this.instructor_tasks = new window.InstructorDashboard.util.PendingInstructorTasks($section);
	}

defined in utils.

In this PendingInstructorTasks function, there are three div containers searched and defined to further implement the running_tasks section:

edx-platform/lms/static/js/instructor_dashboard/util.js

Lines 371 to 373 in 8b4adaf

	this.$running_tasks_section = findAndAssert(this.$section, '.running-tasks-section');
	this.$table_running_tasks = findAndAssert(this.$section, '.running-tasks-table');
	this.$no_tasks_message = findAndAssert(this.$section, '.no-pending-tasks-message');

findAndAssert is a utility function which throw an exception when the selector passed as a parameter has found zero or multiple objects:

edx-platform/lms/static/js/instructor_dashboard/util.js

Lines 32 to 33 in 8b4adaf

	if (item.length !== 1) {
	msg = 'Failed Element Selection';

Errors

First

The first container searched is not shown when the settings variable FEATURES.CERTIFICATES_INSTRUCTOR_GENERATION is false (see
https://github.com/openedx/edx-platform/blob/master/lms/djangoapps/instructor/views/instructor_dashboard.py#L362,
https://github.com/openedx/edx-platform/blob/master/lms/djangoapps/instructor/views/instructor_dashboard.py#L375 and https://github.com/openedx/edx-platform/blob/master/lms/templates/instructor/instructor_dashboard_2/certificates.html#L82),
which is its default state. As a consequence, the function findAndAssert will always fail for the selector .running-tasks-section interrupting further subtab initialization.

Second

If FEATURES.CERTIFICATES_INSTRUCTOR_GENERATION is defined true through settings, but at least one of enabled_for_course² or html_cert_enabled³ is false, then the function findAndAssert will always fail because the mentioned section will be absent.

These additional conditions were added in this commit.

Third

If the previous conditions are met in order to show the .running-tasks-section container, then the third findAndAssert call will fail because there is a second .no-pending-tasks-message container added for the certificate-exception-section.

This section was added in this commit. Apparently, that second message container is useless.

Remediaton suggested

To remediate the bug, we suggest to conditionate the initialization of the running task monitor to the presence of the .running-tasks-section container (not always present as we saw). This means that the first findAndAssert call should be changed for a test to detect the existence of the section before checking the associated inner containers needed for the monitor, and as a precondition to initialize the running tasks monitor.
Additionally, the selectors for inner containers should add the scope of the section to avoid the match to other sections as the certificate-exception section does.

Footnotes

1. To enable the certificate sub tab, go to https://lms-url/admin/certificates/certificategenerationconfiguration and create a new configuration object with the checkbox selected. ↩

2. To make enabled_for_course state true a certificategenerationcoursesetting object needs to be created in association with the course at https://lms-url/admin/certificates/certificategenerationcoursesetting/. ↩

3. In the case of html_cert_enabled a html template needs to be created associated with the course at https://lms-url/admin/certificates/certificatetemplate/. ↩