From ab1b4873dfedc7c634280b201e632a88e732a5e3 Mon Sep 17 00:00:00 2001
From: Jon Robson <jdlrobson@gmail.com>
Date: Wed, 4 Dec 2024 17:26:20 -0800
Subject: [PATCH] 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
---
 .../page-issues/overlay/IssueList.js          | 30 ++++++++++++-------
 .../page-issues/overlay/IssueNotice.js        | 27 +++++++++++------
 .../page-issues/overlay/pageIssuesOverlay.js  | 11 ++-----
 3 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/resources/skins.minerva.scripts/page-issues/overlay/IssueList.js b/resources/skins.minerva.scripts/page-issues/overlay/IssueList.js
index 57ec9d917..3f0b19a20 100644
--- a/resources/skins.minerva.scripts/page-issues/overlay/IssueList.js
+++ b/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;
diff --git a/resources/skins.minerva.scripts/page-issues/overlay/IssueNotice.js b/resources/skins.minerva.scripts/page-issues/overlay/IssueNotice.js
index 90d2cfb08..4ed1faa15 100644
--- a/resources/skins.minerva.scripts/page-issues/overlay/IssueNotice.js
+++ b/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;
diff --git a/resources/skins.minerva.scripts/page-issues/overlay/pageIssuesOverlay.js b/resources/skins.minerva.scripts/page-issues/overlay/pageIssuesOverlay.js
index 2f8c66df8..5da154534 100644
--- a/resources/skins.minerva.scripts/page-issues/overlay/pageIssuesOverlay.js
+++ b/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 ) );
 }
 
 /**