Add Help button to pop-up dialog

(This commit also incorporates all changes from
 Add OOUI pop up and remove html tags
 on branch update-popup-ooui
 committed on 16 December 2022
 5e2c7a4f
)

src/AutosuggestSitelink.js

@@ -48,21 +48,41 @@ class AutoSuggestSiteLink {
 			action: 'query',
 			list: 'search',
 			srsearch: this.page,
-			srprop: 'size|wordcount|timestamp|snippet|titlesnippet'
+			srprop: 'snippet|titlesnippet'
 		};
 		this.api.get( params ).done( ( data ) => {
 			if ( data.query ) {
-				const $siteLinkList = $( '<div>' ).addClass( 'wikidata-auto-suggest' ),
+				const $siteLinkList = $( '<div>' )
+						.attr( 'style', 'padding-bottom: 30px;' ),
 					contentLang = mw.config.get( 'wgContentLanguage' ),
 					userLang = mw.config.get( 'wgUserLanguage' ),
 					m = Object.prototype.hasOwnProperty.call( this.messages, userLang ) ?
 						this.messages[ userLang ] :
 						this.messages.en;
 
+				// Use this Help button when Wikidata items are found
+				const helpButtonFound = new OO.ui.ButtonWidget( {
+					icon: 'helpNotice',
+					framed: false,
+					title: m.tooltip_found,
+					href: mw.util.getUrl( 'AutosuggestSitelink' ),
+					target: '_blank'
+				} );
+				// Use this Help button when no Wikidata items are found
+				const helpButtonNotFound = new OO.ui.ButtonWidget( {
+					icon: 'helpNotice',
+					framed: false,
+					title: m.tooltip_notfound,
+					href: mw.util.getUrl( 'AutosuggestSitelink' ),
+					target: '_blank'
+				} );
+
 				mw.messages.set( 'WDI-aliases', m.aliases );
 				if ( !data.query.searchinfo.totalhits ) {
+					var $helpDiv = $( '<div>' ).attr( 'style', 'float:right;' );
+					$helpDiv.append(helpButtonNotFound.$element);
 					$siteLinkList.append(
-						$( '<span>' ).text( m.notfound ),
+						$( '<span>' ).text( m.notfound ), // TODO: link below should be refactored with translation
 						$( '<br>' ),
 						$( '<a>' ).attr( 'href',
 							AutoSuggestSiteLink.WIKIDATA_URL + '/wiki/Special:NewItem?' +
@@ -72,14 +92,25 @@ class AutoSuggestSiteLink {
 								label: this.page,
 								lang: contentLang
 							} )
-						).text( m.createnewitem )
+						).text( m.createnewitem ),
+						$helpDiv
 					);
 				} else {
+					var $helpDiv = $( '<div>' ).attr( 'style', 'float:right;position:relative;top:-20px;' );
+					$helpDiv.append(helpButtonFound.$element);
+					var $titleDiv = $( '<div>' )
+						.text( m.popuptitle )
+						.attr( 'style', 'font-size: 18px; margin-bottom: 20px;' );
+					$titleDiv.append($helpDiv);
+					$siteLinkList.append($titleDiv);
 					data.query.search.forEach( ( item ) => {
-						const $itemDiv = $( '<div>' );
+						const $itemDiv = $( '<div>' )
+							.attr( 'style', 'clear: both;' );
+
 						const $addButton = $( '<a>' )
 							.text( m.addwikidata )
 							.attr( 'id', 'item-add-link-' + item.title )
+							.attr( 'style', 'float: left; margin-top: 5px; margin-bottom: 20px;' )
 							.data( 'item', item.title )
 							.on( 'click', ( e ) => {
 								e.preventDefault();
@@ -97,28 +128,44 @@ class AutoSuggestSiteLink {
 						$itemDiv.append(
 							$( '<a>' )
 								.attr( 'href', AutoSuggestSiteLink.WIKIDATA_URL + '/wiki/' + item.title )
-								.text( item.title ),
+								.text( item.title )
+								.attr( 'target', '_blank' ),
 							' (',
 							$( '<span>' )
-								.text( item.titlesnippet ),
+								.text( item.titlesnippet.replace( /<\/?.+?>/ig, '' ) ),
 							')',
 							$( '<span>' ).text( ', ' ),
 							$( '<i>' )
 								.text( item.snippet || m.nodescription )
 								.addClass( item.snippett ? 'WDI-desc' : 'WDI-desc WDI-nodesc' ),
 							$( '<br>' ),
-							$addButton,
-							$( '<br>' )
+							$addButton
 						);
 
 						$siteLinkList.append( $itemDiv );
 					} );
 				}
-				mw.notify( $siteLinkList, {
-					tag: 'wikidata-link',
-					id: 'wikidata-autosuggest',
-					autoHide: false,
-					title: 'Title'
+
+				// Use the verbose option to communicate a long message.
+				const messageDialog = new OO.ui.MessageDialog();
+
+				// Create and append window manager
+				const windowManager = new OO.ui.WindowManager();
+				$( document.body ).append( windowManager.$element );
+
+				// Add the dialog to the window manager
+				windowManager.addWindows( [ messageDialog ] );
+
+				// Configure the message dialog when it is opened with
+				// the window manager’s openWindow() method.
+				windowManager.openWindow( messageDialog, {
+					message: $siteLinkList,
+					verbose: true,
+					actions: [ {
+						action: 'accept',
+						label: m.close,
+						flags: 'primary'
+					} ]
 				} );
 			}
 		} );
@@ -132,15 +179,20 @@ class AutoSuggestSiteLink {
 	get messages() {
 		return {
 			en: {
-				notfound: 'Wikidata item not found.',
+				popuptitle: 'Link a Wikidata item to this article',
+				notfound: 'We couldn\'t find a Wikidata item that matches this article, but you can',
+				close: 'Close',
 				intro: 'Wikidata: ',
 				nolabel: '(No label)',
 				nodescription: 'no description given',
 				aliases: '{{PLURAL:$1|Alias|Aliases}}: ',
 				noaliases: 'None',
 				addwikidata: 'Link this item',
-				createnewitem: 'Create new item',
-				itemlinked: 'Site link created!'
+				createnewitem: 'Create one',
+				itemlinked: 'Site link created!',
+				tooltip_found: "If one of these Wikidata items represents the main subject of this article,\n" +
+					"you can link to the item.  Click the ?-icon to learn more.",
+				tooltip_notfound: "Click the ?-icon to learn more."
 			},
 			ar: {
 				notfound: 'لم يعثر على هذه المادة في ويكي بيانات.',
@@ -521,7 +573,13 @@ function init() {
 
 	Promise.all( [
 		// Resource loader modules
-		mw.loader.using( [ 'mediawiki.action.view.postEdit', 'mediawiki.ForeignApi', 'mediawiki.Title' ] )
+		mw.loader.using( [
+			'mediawiki.action.view.postEdit',
+			'mediawiki.ForeignApi',
+			'mediawiki.Title',
+			'oojs-ui-core',
+			'oojs-ui-windows'
+		] )
 	] ).then( () => {
 		const autoSuggestLink = new AutoSuggestSiteLink();
 		autoSuggestLink.checkSiteLink();