Merge "Migrate page issue overlay to ES6 to fix display"

resources/skins.minerva.scripts/page-issues/overlay/IssueList.js

@@ -12,16 +12,24 @@ const
  *
  * @param {IssueSummary} issues
  */
-function IssueList( issues ) {
-	this.issues = issues;
-	View.call( this, { className: 'cleanup' } );
+class IssueList extends View {
+	constructor( issues ) {
+		super( {
+			className: 'cleanup',
+			issues
+		} );
+	}
+
+	get tagName() {
+		return 'ul';
+	}
+
+	postRender() {
+		super.postRender();
+		this.append(
+			( this.options.issues || [] ).map( ( issue ) => new IssueNotice( issue ).$el )
+		);
+	}
 }
-OO.inheritClass( IssueList, View );
-IssueList.prototype.tagName = 'ul';
-IssueList.prototype.postRender = function () {
-	View.prototype.postRender.apply( this, arguments );
-	this.append(
-		( this.issues || [] ).map( ( issue ) => new IssueNotice( issue ).$el )
-	);
-};
+
 module.exports = IssueList;

resources/skins.minerva.scripts/page-issues/overlay/IssueNotice.js

@@ -11,14 +11,23 @@ const
  *
  * @param {IssueSummary} props
  */
-function IssueNotice( props ) {
-	View.call( this, props );
+class IssueNotice extends View {
+	constructor( props ) {
+		super( props );
+	}
+
+	get tagName() {
+		return 'li';
+	}
+
+	get template() {
+		return mw.template.get( 'skins.minerva.scripts', 'IssueNotice.mustache' );
+	}
+
+	postRender() {
+		super.postRender();
+		this.$el.find( '.issue-notice' ).prepend( this.options.issue.iconElement );
+	}
 }
-OO.inheritClass( IssueNotice, View );
-IssueNotice.prototype.tagName = 'li';
-IssueNotice.prototype.template = mw.template.get( 'skins.minerva.scripts', 'IssueNotice.mustache' );
-IssueNotice.prototype.postRender = function () {
-	View.prototype.postRender.apply( this, arguments );
-	this.$el.find( '.issue-notice' ).prepend( this.options.issue.iconElement );
-};
+
 module.exports = IssueNotice;

resources/skins.minerva.scripts/page-issues/overlay/pageIssuesOverlay.js

@@ -23,15 +23,10 @@ function pageIssuesOverlay( issues, section, namespaceID ) {
 		getNamespaceHeadingText( namespaceID ) :
 		mw.msg( 'minerva-meta-data-issues-section-header' );
 
-	const overlay = new Overlay( {
+	return Overlay.make( {
 		className: 'overlay overlay-issues',
-		heading: '<strong>' + headingText + '</strong>'
-	} );
-
-	overlay.$el.find( '.overlay-content' ).append(
-		new IssueList( issues ).$el
-	);
-	return overlay;
+		heading: `<strong>${ headingText }</strong>`
+	}, new IssueList( issues ) );
 }
 
 /**