Migrate page issue overlay to ES6 to fix display

In ES5 you can override getters via prototype but not
with ES6.
Rather than patch MobileFrontend just for this use case
its easier to patch Minerva.

Bug: T380314
Change-Id: I69ccdb93287dc5e080a0d5a8faa9d208dc67779d

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 ) );
 }
 
 /**