Edit Recovery: improve special page listing

This is the first pass at improving Special:EditRecovery. It
does not handle the section name formatting; that will come
in a separate patch. The changes here are:

* Change to ordered list.
* Move read link from title to own link.
* Add 'Recovered on x' at end of list item, with localized time.
* Remove unused sectionLabel key from data object.

Bug: T347673
Change-Id: I952f0150b6237982a046071232ee8a1031a922d6

includes/specials/SpecialEditRecovery.php

@@ -7,6 +7,7 @@
 namespace MediaWiki\Specials;
 
 use MediaWiki\Html\Html;
+use MediaWiki\MainConfigNames;
 use MediaWiki\SpecialPage\SpecialPage;
 
 /**
@@ -37,5 +38,10 @@ class SpecialEditRecovery extends SpecialPage {
 		);
 		$placeholder = Html::rawElement( 'div', [ 'class' => 'mw-EditRecovery-special' ], $noJs );
 		$this->getOutput()->addHTML( $placeholder );
+
+		$this->getOutput()->addJsConfigVars(
+			'wgEditRecoveryExpiry',
+			$this->getConfig()->get( MainConfigNames::EditRecoveryExpiry )
+		);
 	}
 }

languages/i18n/en.json

@@ -658,6 +658,9 @@
 	"edit-recovery-nojs-placeholder": "JavaScript is required for the Edit Recovery feature.",
 	"edit-recovery-special-intro": "You have unsaved changes to the following {{PLURAL:$1|page or section|pages and/or sections}}:",
 	"edit-recovery-special-intro-empty": "You have no unsaved changes.",
+	"edit-recovery-special-view": "view",
+	"edit-recovery-special-edit": "edit",
+	"edit-recovery-special-recovered-on": "Recovered on $1",
 	"edit-recovery-loaded-title": "Changes recovered",
 	"edit-recovery-loaded-message": "Your unsaved changes have been automatically recovered.",
 	"edit-recovery-loaded-show": "Show changes",

languages/i18n/qqq.json

@@ -913,6 +913,9 @@
 	"edit-recovery-nojs-placeholder": "Error message shown when JavaScript is disabled.",
 	"edit-recovery-special-intro": "Message shown above a list of linked page titles.\n\nParameters:\n\n* $1 — Integer number of list items.",
 	"edit-recovery-special-intro-empty": "Message shown instead of the list of pages when the list is empty.",
+	"edit-recovery-special-view": "Link text for the 'view' link.",
+	"edit-recovery-special-edit": "Link text for the 'edit' link.",
+	"edit-recovery-special-recovered-on": "Phrase to describe when the data for a particular list item was stored.\n\nParameters:\n\n* $1 The date and time that the item was stored.",
 	"edit-recovery-loaded-title": "Title for a notification toast popup shown when an in-progress edit is recovered.",
 	"edit-recovery-loaded-message": "Message shown in a notification toast popup when an in-progress edit is recovered.",
 	"edit-recovery-loaded-show": "Button text in a notification toast popup shown when an in-progress edit is recovered, used to show changes.",

resources/Resources.php

@@ -2312,9 +2312,14 @@ return [
 		],
 		'messages' => [
 			'editlink',
-			'parentheses',
+			'parentheses-start',
+			'parentheses-end',
+			'pipe-separator',
 			'edit-recovery-special-intro',
 			'edit-recovery-special-intro-empty',
+			'edit-recovery-special-view',
+			'edit-recovery-special-edit',
+			'edit-recovery-special-recovered-on',
 		],
 	],
 	'mediawiki.special.search' => [

resources/src/mediawiki.special.editrecovery/SpecialEditRecovery.vue

@@ -5,15 +5,18 @@
 	<p v-else>
 		{{ $i18n( 'edit-recovery-special-intro-empty' ) }}
 	</p>
-	<ul>
+	<ol>
 		<li v-for="page in pages" :key="page">
-			<a :href="page.url">{{ page.title }}</a>
+			{{ page.title }}
 			<span v-if="page.section"> &ndash; {{ page.section }}</span>
-			<span>
-				<a :href="page.editUrl">{{ $i18n( 'parentheses', $i18n( 'editlink' ) ) }}</a>
-			</span>
+			{{ $i18n( 'parentheses-start' ) }}
+			<a :href="page.url">{{ $i18n( 'edit-recovery-special-view' ) }}</a>
+			{{ $i18n( 'pipe-separator' ) }}
+			<a :href="page.editUrl">{{ $i18n( 'edit-recovery-special-edit' ) }}</a>
+			{{ $i18n( 'parentheses-end' ) }}
+			{{ $i18n( 'edit-recovery-special-recovered-on', page.timeStored ) }}
 		</li>
-	</ul>
+	</ol>
 </template>
 
 <script>
@@ -23,6 +26,7 @@ module.exports = {
 	setup() {
 		const pages = ref( [] );
 		const storage = require( '../mediawiki.editRecovery/storage.js' );
+		const expiryTTL = mw.config.get( 'wgEditRecoveryExpiry' );
 		storage.openDatabase().then( () => {
 			storage.loadAllData().then( ( allData ) => {
 				allData.forEach( ( d ) => {
@@ -31,12 +35,14 @@ module.exports = {
 					if ( d.section ) {
 						editParams.section = d.section;
 					}
+					// Subtract expiry duration to get the time it was stored.
+					const recoveryTime = new Date( ( d.expiryDate - expiryTTL ) * 1000 );
 					pages.value.push( {
 						title: title.getPrefixedText(),
 						url: title.getUrl(),
 						editUrl: title.getUrl( editParams ),
 						section: d.section,
-						sectionLabel: d.section ? mw.msg( 'parentheses', mw.msg( 'search-section', d.section ) ) : ''
+						timeStored: recoveryTime.toLocaleString( { dateStyle: 'long', timeStyle: 'long' } )
 					} );
 				} );
 			} );