Add support for empty states to the current language selector

Bug: T290436 Change-Id: I42c5d44ec15e291d71723c9738ddb8f0d1cf0b09
2022-06-23 15:33:48 +05:30
parent 5179a8accb
commit 3450f90678
5 changed files with 111 additions and 8 deletions
--- a/extension.json
+++ b/extension.json
@@ -265,7 +265,12 @@
 				"ext-uls-undo-language-tooltip-text",
 				"ext-uls-undo-language-tooltip-text-local",
 				"ext-uls-actions-menu-language-settings-item-label",
-				"ext-uls-actions-menu-header"
+				"ext-uls-actions-menu-header",
+				"ext-uls-actions-menu-language-settings-item-label",
+				"ext-uls-empty-state-header",
+				"ext-uls-empty-state-desc",
+				"ext-uls-empty-state-header-actions-available",
+				"ext-uls-empty-state-desc-actions-available"
 			]
 		},
 		"ext.uls.interlanguage": {
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -74,5 +74,9 @@
 	"ext-uls-setlang-loading": "Applying...",
 	"ext-uls-setlang-cancel": "Don't change",
 	"ext-uls-actions-menu-header": "More options",
-	"ext-uls-actions-menu-language-settings-item-label": "Open language settings"
+	"ext-uls-actions-menu-language-settings-item-label": "Open language settings",
+	"ext-uls-empty-state-header": "No languages yet",
+	"ext-uls-empty-state-desc": "No languages are available for now",
+	"ext-uls-empty-state-header-actions-available": "No languages yet. Add a new one?",
+	"ext-uls-empty-state-desc-actions-available": " Make the content available in more languages."
 }
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -78,5 +78,9 @@
 	"ext-uls-setlang-loading": "Button label displayed while the API call is in progress after the user clicks on the accept button. See {{msg-mw|ext-uls-setlang-accept}}.",
 	"ext-uls-setlang-cancel": "Button label for cancel on the language preference dialog.",
 	"ext-uls-actions-menu-header": "Title of the dialog that contains the quick actions menu, that opens when user clicks on the settings icon inside content language selector",
-	"ext-uls-actions-menu-language-settings-item-label": "Label of the button that opens the language settings inside the quick actions menu of the content language selector."
+	"ext-uls-actions-menu-language-settings-item-label": "Label of the button that opens the language settings inside the quick actions menu of the content language selector.",
+	"ext-uls-empty-state-header": "Header text shown in languages selector when there are no languages to select",
+	"ext-uls-empty-state-desc": "Description text shown in languages selector when there are no languages to select",
+	"ext-uls-empty-state-header-actions-available": "Header text shown in languages selector when there are no languages to select, but selector provides ways to create new.",
+	"ext-uls-empty-state-desc-actions-available": "Description text shown in languages selector when there are no languages to select, but selector provides ways to create new."
 }
--- a/resources/css/ext.uls.interface.less
+++ b/resources/css/ext.uls.interface.less
@@ -56,3 +56,17 @@
 .uls-tipsy.uls-tipsy {
 	z-index: 1000;
 }
+
+.uls-empty-state {
+	padding: 28px;
+
+	.uls-empty-state__header,
+	.uls-empty-state__desc {
+		color: #54595d;
+	}
+
+	.uls-language-action-items {
+		list-style: none;
+		margin: 1em 0;
+	}
+}
--- a/resources/js/ext.uls.interface.js
+++ b/resources/js/ext.uls.interface.js
@@ -21,7 +21,8 @@
 	'use strict';
 	var languageSettingsModules = [ 'ext.uls.displaysettings' ],
 		launchULS = require( './ext.uls.launch.js' ),
-		ActionsMenu = require( './ext.uls.actions.menu.js' );
+		ActionsMenu = require( './ext.uls.actions.menu.js' ),
+		ActionsMenuItem = require( './ext.uls.actions.menu.item.js' );
 	require( './ext.uls.actions.menu.items.registry.js' );

 	/**
@@ -102,6 +103,10 @@
 		actionsMenuTrigger.addClass( iconClass );
 	}

+	function hideLanguageSettingsFooter( uls ) {
+		uls.$menu.find( '#uls-settings-block' ).eq( 0 ).hide();
+	}
+
 	/**
 	 * @param {jQuery} $element
 	 * @param {Function} onCloseHandler
@@ -117,6 +122,71 @@
 			} ).trigger( 'click' );
 		} );
 	}
+
+	/**
+	 * Provide entry points to create article in other languages. T290436
+	 *
+	 * @param {Object} uls The ULS object
+	 */
+	function addEmptyState( uls ) {
+		var $emptyStateContainer = $( '<section>' ).addClass( 'uls-empty-state' );
+
+		function openActionsMenuEventHandler( event ) {
+			event.stopPropagation();
+			function onMenuClose() {
+				uls.show();
+			}
+			openLanguageSettings( $( event.target ), onMenuClose, uls );
+		}
+
+		var languageSettingsMenuItem = {
+			name: 'languageSettings',
+			icon: 'settings',
+			text: $.i18n( 'ext-uls-actions-menu-language-settings-item-label' ),
+			handler: openActionsMenuEventHandler
+		};
+
+		var actionItemsRegistry = mw.uls.ActionsMenuItemsRegistry;
+		actionItemsRegistry.register( languageSettingsMenuItem );
+
+		var $actionsMenuTrigger = createActionsMenuTrigger();
+		setActionsMenuTriggerIconClass( $actionsMenuTrigger, actionItemsRegistry.size() );
+		var $header = $( '<h3>' )
+			.addClass( 'uls-empty-state__header' )
+			.text( $.i18n( 'ext-uls-empty-state-header' ) );
+		var $desc = $( '<p>' )
+			.addClass( 'uls-empty-state__desc' )
+			.text( $.i18n( 'ext-uls-empty-state-desc' ) );
+		$emptyStateContainer.append( $header, $desc );
+		uls.$resultsView.append( $emptyStateContainer );
+
+		var actionItems = actionItemsRegistry.getItems();
+
+		if ( actionItems.length > 1 ) {
+			// languageSettingsMenuItem will be always there.
+			// If other actions available, change text
+			$header.text( $.i18n( 'ext-uls-empty-state-header-actions-available' ) );
+			$desc.text( $.i18n( 'ext-uls-empty-state-desc-actions-available' ) );
+		}
+
+		// Action menu items need OOUI widgets. Load them and register trigger event handler.
+		mw.loader.using( [ 'oojs-ui-widgets', 'oojs-ui.styles.icons-interactions' ] ).done( function () {
+			var $actionsList = $( '<ul>' ).addClass( 'uls-language-action-items' );
+			actionItems.forEach( function ( actionItem ) {
+				var actionButton = new ActionsMenuItem(
+					actionItem.icon,
+					actionItem.text,
+					actionItem.handler,
+					actionItem.href
+				).render();
+				$actionsList.append( $( '<li>' ).append( actionButton.$element ) );
+			} );
+
+			$emptyStateContainer.append( $actionsList );
+		} );
+
+	}
+
 	/**
 	 * Add language actions menu
 	 *
@@ -144,9 +214,6 @@

 		var actionItemsRegistry = mw.uls.ActionsMenuItemsRegistry;
 		actionItemsRegistry.register( languageSettingsMenuItem );
-		// first hide #uls-settings-block div since it's unused, and it causes
-		// an unwanted extra border to show up at the bottom of the menu
-		uls.$menu.find( '#uls-settings-block' ).eq( 0 ).hide();

 		var $actionsMenuTrigger = createActionsMenuTrigger();
 		setActionsMenuTriggerIconClass( $actionsMenuTrigger, actionItemsRegistry.size() );
@@ -618,7 +685,16 @@
 				// Provide access to display and input settings if this entry point is the single
 				// point of access to all language settings.
 				uls = $target.data( 'uls' );
-				addActionsMenuTrigger( uls );
+				// first hide #uls-settings-block div since it's unused, and it causes
+				// an unwanted extra border to show up at the bottom of the menu
+				hideLanguageSettingsFooter( uls );
+				if ( languageNodes.length ) {
+					addActionsMenuTrigger( uls );
+				} else {
+					// There are no languages - The article exist only the current language wiki
+					// Provide entry points to create article in other languages. T290436
+					addEmptyState( uls );
+				}
 				$target.trigger( 'click' );
 			} else {
 				$target.trigger( 'click' );