Separate languages portal from other portals in sidebar

In preparation for moving the languages out of the sidebar (T256023)
and to facilitate experimentation in the Universal Language Selector
extension, we should separate the data from the languages portal
from other portals.

Note the languages portal has traditionally appeared at the bottom
of the sidebar, so this can be done safely in the same way we
introduced data-portals-first

Change-Id: I4be06278ec256cc55aee36c2946339fb49d21b46

includes/VectorTemplate.php

@@ -263,6 +263,7 @@ class VectorTemplate extends BaseTemplate {
 		$skin = $this->getSkin();
 		$portals = $skin->buildSidebar();
 		$props = [];
+		$languages = null;
 
 		// Render portals
 		foreach ( $portals as $name => $content ) {
@@ -298,7 +299,7 @@ class VectorTemplate extends BaseTemplate {
 					// languages exist or there is a value in html-after-portal
 					// for example to show the add language wikidata link (T252800)
 					if ( count( $content ) || $portal['html-after-portal'] ) {
-						$props[] = $portal;
+						$languages = $portal;
 					}
 					break;
 				default:
@@ -341,6 +342,7 @@ class VectorTemplate extends BaseTemplate {
 			),
 			'array-portals-rest' => array_slice( $props, 1 ),
 			'data-portals-first' => $firstPortal,
+			'data-portals-languages' => $languages,
 			'msg-vector-action-toggle-sidebar' => $this->msg( 'vector-action-toggle-sidebar' )->text(),
 			// [todo] fetch user preference when logged in (T246427).
 			'sidebar-visible' => true

includes/templates/Sidebar.mustache

@@ -35,4 +35,5 @@
 	</div>
 	{{/data-emphasized-sidebar-action}}
 	{{#array-portals-rest}}{{>Menu}}{{/array-portals-rest}}
+	{{#data-portals-languages}}{{>Menu}}{{/data-portals-languages}}
 </div>

includes/templates/legacy/Sidebar.mustache

@@ -1,8 +1,6 @@
 {{!
+	See @typedef SidebarData
 	string html-logo-attributes for site logo. Must be used inside tag e.g. `class="logo" lang="en-gb"`
-	MenuDefinition data-portals-first
-	MenuDefinition[] array-portals-rest
-	@prop boolean has-logo whether to show a logo or not.
 }}
 
 <div id="mw-panel">
@@ -13,4 +11,5 @@
 	{{/has-logo}}
 	{{#data-portals-first}}{{>Menu}}{{/data-portals-first}}
 	{{#array-portals-rest}}{{>Menu}}{{/array-portals-rest}}
+	{{#data-portals-languages}}{{>Menu}}{{/data-portals-languages}}
 </div>

stories/Sidebar.stories.data.js

@@ -1,4 +1,5 @@
 import sidebarTemplate from '!!raw-loader!../includes/templates/Sidebar.mustache';
+import sidebarLegacyTemplate from '!!raw-loader!../includes/templates/legacy/Sidebar.mustache';
 import { vectorMenuTemplate } from './MenuDropdown.stories.data';
 import { PORTALS } from './MenuPortal.stories.data';
 
@@ -6,7 +7,7 @@ const HTML_LOGO_ATTRIBUTES = `class="mw-wiki-logo" href="/wiki/Main_Page" title=
 const SIDEBAR_BEFORE_OUTPUT_HOOKINFO = `Beware: Portals can be added, removed or reordered using
 SidebarBeforeOutput hook as in this example.`;
 
-export { sidebarTemplate };
+export { sidebarTemplate, sidebarLegacyTemplate };
 
 export const SIDEBAR_TEMPLATE_PARTIALS = {
 	Menu: vectorMenuTemplate
@@ -28,9 +29,9 @@ export const SIDEBAR_DATA = {
 		},
 		'array-portals-rest': [
 			PORTALS.toolbox,
-			PORTALS.otherProjects,
-			PORTALS.langlinks
+			PORTALS.otherProjects
 		],
+		'data-portals-languages': PORTALS.langlinks,
 		'html-logo-attributes': HTML_LOGO_ATTRIBUTES
 	},
 	withPortals: {
@@ -38,18 +39,18 @@ export const SIDEBAR_DATA = {
 		'data-portals-first': PORTALS.navigation,
 		'array-portals-rest': [
 			PORTALS.toolbox,
-			PORTALS.otherProjects,
-			PORTALS.langlinks
+			PORTALS.otherProjects
 		],
+		'data-portals-languages': PORTALS.langlinks,
 		'html-logo-attributes': HTML_LOGO_ATTRIBUTES
 	},
 	withoutLogo: {
 		'has-logo': false,
+		'data-portals-languages': PORTALS.langlinks,
 		'array-portals-first': PORTALS.navigation,
 		'array-portals-rest': [
 			PORTALS.toolbox,
-			PORTALS.otherProjects,
-			PORTALS.langlinks
+			PORTALS.otherProjects
 		]
 	},
 	thirdParty: {

stories/Sidebar.stories.js

@@ -3,24 +3,29 @@ import '../.storybook/common.less';
 import '../resources/skins.vector.styles/Sidebar.less';
 import '../resources/skins.vector.styles/SidebarLogo.less';
 import '../resources/skins.vector.styles/MenuPortal.less';
-import { sidebarTemplate, SIDEBAR_DATA, SIDEBAR_TEMPLATE_PARTIALS } from './Sidebar.stories.data';
+import { sidebarTemplate,
+	sidebarLegacyTemplate, SIDEBAR_DATA, SIDEBAR_TEMPLATE_PARTIALS } from './Sidebar.stories.data';
 
 export default {
 	title: 'Sidebar'
 };
 
-export const sidebarWithNoPortals = () => mustache.render(
-	sidebarTemplate, SIDEBAR_DATA.withNoPortals, SIDEBAR_TEMPLATE_PARTIALS
+export const sidebarLegacyWithNoPortals = () => mustache.render(
+	sidebarLegacyTemplate, SIDEBAR_DATA.withNoPortals, SIDEBAR_TEMPLATE_PARTIALS
 );
 
-export const sidebarWithoutLogo = () => mustache.render(
+export const sidebarLegacyWithPortals = () => mustache.render(
+	sidebarLegacyTemplate, SIDEBAR_DATA.withPortals, SIDEBAR_TEMPLATE_PARTIALS
+);
+
+export const sidebarModernWithoutLogo = () => mustache.render(
 	sidebarTemplate, SIDEBAR_DATA.withoutLogo, SIDEBAR_TEMPLATE_PARTIALS
 );
 
-export const sidebarWithPortals = () => mustache.render(
+export const sidebarModernWithPortals = () => mustache.render(
 	sidebarTemplate, SIDEBAR_DATA.withPortals, SIDEBAR_TEMPLATE_PARTIALS
 );
 
-export const sidebarThirdParty = () => mustache.render(
+export const sidebarModernThirdParty = () => mustache.render(
 	sidebarTemplate, SIDEBAR_DATA.thirdParty, SIDEBAR_TEMPLATE_PARTIALS
 );

stories/skin.stories.data.js

@@ -5,7 +5,8 @@ import { PERSONAL_MENU_TEMPLATE_DATA, menuTemplate } from './Menu.stories.data';
 import { pageActionsData, namespaceTabsData } from './MenuTabs.stories.data';
 import { vectorMenuTemplate, moreData, variantsData } from './MenuDropdown.stories.data';
 import { searchBoxData, searchBoxTemplate } from './SearchBox.stories.data';
-import { SIDEBAR_DATA, SIDEBAR_TEMPLATE_PARTIALS, sidebarTemplate } from './Sidebar.stories.data';
+import { SIDEBAR_DATA, SIDEBAR_TEMPLATE_PARTIALS,
+	sidebarLegacyTemplate, sidebarTemplate } from './Sidebar.stories.data';
 import { FOOTER_TEMPLATE_DATA, footerTemplate } from './Footer.stories.data';
 import { logoTemplate } from './Logo.stories.data';
 
@@ -45,6 +46,7 @@ export const NAVIGATION_TEMPLATE_DATA = {
 export const TEMPLATE_PARTIALS = Object.assign( {}, SIDEBAR_TEMPLATE_PARTIALS, {
 	Logo: logoTemplate,
 	SearchBox: searchBoxTemplate,
+	'legacy/Sidebar': sidebarLegacyTemplate,
 	Sidebar: sidebarTemplate,
 	VectorMenu: vectorMenuTemplate,
 	Menu: menuTemplate,

stories/types.js

@@ -29,6 +29,14 @@
  * @prop {string} msg-sitesubtitle alternate text for tagline.
  */
 
+/**
+ * @typedef {Object} SidebarData
+ * @prop {MenuDefinition} data-portals-languages
+ * @prop {MenuDefinition} data-portals-first
+ * @prop {MenuDefinition[]} array-portals-rest
+ * @prop {boolean} [has-logo] whether to show a logo or not.
+ */
+
 /**
  * @typedef {Object} SearchData
  * @prop {string|null} msg-search