From a3bb097cf82beb5ffa6b2f2752008eeb5ea3806c Mon Sep 17 00:00:00 2001
From: jdlrobson <jdlrobson@gmail.com>
Date: Tue, 5 May 2020 16:26:35 -0700
Subject: [PATCH] Refactor: Generalise personal menu

the PersonalMenu should be generalised. In future we will use it as
the template for all menus

Bug: T249372
Change-Id: Id1c43d2e9eefef1d7aec45f0137e27f10ad935df
---
 includes/VectorTemplate.php                   |  2 +-
 .../{PersonalMenu.mustache => Menu.mustache}  |  0
 includes/templates/index.mustache             |  4 ++--
 includes/templates/legacy.mustache            |  4 ++--
 .../{PersonalMenu.less => Menu.less}          |  2 ++
 resources/skins.vector.styles/index.less      |  2 +-
 resources/skins.vector.styles/legacy.less     |  2 +-
 ...u.stories.data.js => Menu.stories.data.js} | 23 ++++++++++++++++---
 stories/Menu.stories.js                       | 22 ++++++++++++++++++
 stories/PersonalMenu.stories.js               | 17 --------------
 stories/VectorMenu.stories.js                 |  2 +-
 stories/skin.stories.data.js                  |  4 ++--
 stories/types.js                              |  1 +
 .../integration/VectorTemplateTest.php        |  2 +-
 14 files changed, 56 insertions(+), 31 deletions(-)
 rename includes/templates/{PersonalMenu.mustache => Menu.mustache} (100%)
 rename resources/skins.vector.styles/{PersonalMenu.less => Menu.less} (94%)
 rename stories/{PersonalMenu.stories.data.js => Menu.stories.data.js} (89%)
 create mode 100644 stories/Menu.stories.js
 delete mode 100644 stories/PersonalMenu.stories.js

diff --git a/includes/VectorTemplate.php b/includes/VectorTemplate.php
index 4b221b7cb..8ceb919a0 100644
--- a/includes/VectorTemplate.php
+++ b/includes/VectorTemplate.php
@@ -463,7 +463,7 @@ class VectorTemplate extends BaseTemplate {
 		$extraClasses = [
 			self::MENU_TYPE_DROPDOWN => 'vectorMenu',
 			self::MENU_TYPE_TABS => 'vectorTabs',
-			self::MENU_TYPE_DEFAULT => '',
+			self::MENU_TYPE_DEFAULT => 'vectorMenu-default',
 		];
 
 		$props = [
diff --git a/includes/templates/PersonalMenu.mustache b/includes/templates/Menu.mustache
similarity index 100%
rename from includes/templates/PersonalMenu.mustache
rename to includes/templates/Menu.mustache
diff --git a/includes/templates/index.mustache b/includes/templates/index.mustache
index 86c2e0a80..55f5b16c5 100644
--- a/includes/templates/index.mustache
+++ b/includes/templates/index.mustache
@@ -23,7 +23,7 @@
 	string html-navigation-heading heading for entire navigation that is usually hidden to screen
 		readers
 	LogoOptions data-logos
-	MenuDefinition data-personal-menu See PersonalMenu.mustache for documentation.
+	MenuDefinition data-personal-menu
 	object data-namespace-tabs. See VectorTabs.mustache for documentation.
 	object data-variants. See VectorMenu.mustache for documentation.
 	object data-page-actions. See VectorTabs.mustache for documentation.
@@ -77,7 +77,7 @@
 <div id="mw-navigation">
 	<h2>{{{html-navigation-heading}}}</h2>
 	<div id="mw-head">
-		{{#data-personal-menu}}{{>PersonalMenu}}{{/data-personal-menu}}
+		{{#data-personal-menu}}{{>Menu}}{{/data-personal-menu}}
 		<div id="left-navigation">
 			{{#data-namespace-tabs}}{{>VectorTabs}}{{/data-namespace-tabs}}
 			{{#data-variants}}{{>VectorMenu}}{{/data-variants}}
diff --git a/includes/templates/legacy.mustache b/includes/templates/legacy.mustache
index c9f73be8d..082e4fded 100644
--- a/includes/templates/legacy.mustache
+++ b/includes/templates/legacy.mustache
@@ -22,7 +22,7 @@
 	string html-dataAfterContent
 	string html-navigation-heading heading for entire navigation that is
 		usually hidden to screen readers
-	MenuDefinition data-personal-menu See PersonalMenu.mustache for documentation.
+	MenuDefinition data-personal-menu
 	object data-namespace-tabs. See VectorTabs.mustache for documentation.
 	object data-variants. See VectorMenu.mustache for documentation.
 	object data-page-actions. See VectorTabs.mustache for documentation.
@@ -70,7 +70,7 @@
 <div id="mw-navigation">
 	<h2>{{{html-navigation-heading}}}</h2>
 	<div id="mw-head">
-		{{#data-personal-menu}}{{>PersonalMenu}}{{/data-personal-menu}}
+		{{#data-personal-menu}}{{>Menu}}{{/data-personal-menu}}
 		<div id="left-navigation">
 			{{#data-namespace-tabs}}{{>VectorTabs}}{{/data-namespace-tabs}}
 			{{#data-variants}}{{>VectorMenu}}{{/data-variants}}
diff --git a/resources/skins.vector.styles/PersonalMenu.less b/resources/skins.vector.styles/Menu.less
similarity index 94%
rename from resources/skins.vector.styles/PersonalMenu.less
rename to resources/skins.vector.styles/Menu.less
index 56e87acd1..31a7d1250 100644
--- a/resources/skins.vector.styles/PersonalMenu.less
+++ b/resources/skins.vector.styles/Menu.less
@@ -2,6 +2,8 @@
 @import 'mediawiki.mixins.less';
 
 /* Personal */
+.vectorMenu-default,
+/* FIXME: Remove p-personal selector when cache has cleared. */
 #p-personal {
 	position: absolute;
 	top: @top-personal-tools;
diff --git a/resources/skins.vector.styles/index.less b/resources/skins.vector.styles/index.less
index 61fb8fae5..e26e427ea 100644
--- a/resources/skins.vector.styles/index.less
+++ b/resources/skins.vector.styles/index.less
@@ -6,7 +6,7 @@
 	@import 'common.less';
 	@import 'layout.less';
 	@import 'Logo.less';
-	@import 'PersonalMenu.less';
+	@import 'Menu.less';
 	@import 'SearchBox.less';
 	@import 'VectorTabs.less';
 	@import 'watchstar.less';
diff --git a/resources/skins.vector.styles/legacy.less b/resources/skins.vector.styles/legacy.less
index 7542f6e96..f61affaa0 100644
--- a/resources/skins.vector.styles/legacy.less
+++ b/resources/skins.vector.styles/legacy.less
@@ -4,7 +4,7 @@
 @media screen {
 	@import 'common.less';
 	@import 'legacy/layout.less';
-	@import 'PersonalMenu.less';
+	@import 'Menu.less';
 	@import 'SearchBox.less';
 	@import 'VectorTabs.less';
 	@import 'watchstar.less';
diff --git a/stories/PersonalMenu.stories.data.js b/stories/Menu.stories.data.js
similarity index 89%
rename from stories/PersonalMenu.stories.data.js
rename to stories/Menu.stories.data.js
index 103681850..1a138f95a 100644
--- a/stories/PersonalMenu.stories.data.js
+++ b/stories/Menu.stories.data.js
@@ -1,4 +1,4 @@
-import personalMenuTemplate from '!!raw-loader!../includes/templates/PersonalMenu.mustache';
+import menuTemplate from '!!raw-loader!../includes/templates/Menu.mustache';
 import { htmluserlangattributes } from './utils';
 
 /**
@@ -6,7 +6,7 @@ import { htmluserlangattributes } from './utils';
  */
 const loggedOut = {
 	id: 'p-personal',
-	class: '',
+	class: 'vectorMenu-default',
 	'label-id': 'p-personal-label',
 	label: 'Personal tools',
 	'html-userlangattributes': htmluserlangattributes,
@@ -18,6 +18,7 @@ const loggedOut = {
  */
 const loggedInWithEcho = {
 	id: 'p-personal',
+	class: 'vectorMenu-default',
 	'label-id': 'p-personal-label',
 	label: 'Personal tools',
 	'html-userlangattributes': htmluserlangattributes,
@@ -26,11 +27,26 @@ const loggedInWithEcho = {
 
 const ULS_LANGUAGE_SELECTOR = '<li class="uls-trigger active"><a href="#">English</a></li>';
 
+/**
+ * @type {MenuDefinition}
+ */
+const defaultMenu = {
+	id: 'p-generic',
+	class: 'vectorMenu-default',
+	'label-id': 'p-generic-label',
+	label: 'Menu label',
+	'html-userlangattributes': htmluserlangattributes,
+	'html-items': `<li><a href='#'>Item 1</a></li>
+<li><a href='#'>Item 2</a></li>
+<li><a href='#'>Item 3</a></li>`
+};
+
 /**
  * @type {MenuDefinition}
  */
 const loggedInWithULS = {
 	id: 'p-personal',
+	class: 'vectorMenu-default',
 	'label-id': 'p-personal-label',
 	label: 'Personal tools',
 	'html-userlangattributes': htmluserlangattributes,
@@ -42,8 +58,9 @@ const loggedInWithULS = {
  */
 const PERSONAL_MENU_TEMPLATE_DATA = {
 	loggedOut,
+	defaultMenu,
 	loggedInWithEcho,
 	loggedInWithULS
 };
 
-export { PERSONAL_MENU_TEMPLATE_DATA, personalMenuTemplate };
+export { PERSONAL_MENU_TEMPLATE_DATA, menuTemplate };
diff --git a/stories/Menu.stories.js b/stories/Menu.stories.js
new file mode 100644
index 000000000..efac6d40f
--- /dev/null
+++ b/stories/Menu.stories.js
@@ -0,0 +1,22 @@
+import mustache from 'mustache';
+import { menuTemplate, PERSONAL_MENU_TEMPLATE_DATA } from './Menu.stories.data';
+import '../resources/skins.vector.styles/Menu.less';
+import '../.storybook/common.less';
+
+export default {
+	title: 'Menu'
+};
+
+export const menu = () => mustache.render(
+	menuTemplate,
+	PERSONAL_MENU_TEMPLATE_DATA.defaultMenu
+);
+
+export const loggedOut = () => mustache.render( menuTemplate,
+	PERSONAL_MENU_TEMPLATE_DATA.loggedOut );
+
+export const loggedInWithEcho = () => mustache.render( menuTemplate,
+	PERSONAL_MENU_TEMPLATE_DATA.loggedInWithEcho );
+
+export const loggedInWithULS = () => mustache.render( menuTemplate,
+	PERSONAL_MENU_TEMPLATE_DATA.loggedInWithULS );
diff --git a/stories/PersonalMenu.stories.js b/stories/PersonalMenu.stories.js
deleted file mode 100644
index 5e18ad038..000000000
--- a/stories/PersonalMenu.stories.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import mustache from 'mustache';
-import { personalMenuTemplate, PERSONAL_MENU_TEMPLATE_DATA } from './PersonalMenu.stories.data';
-import '../resources/skins.vector.styles/PersonalMenu.less';
-import '../.storybook/common.less';
-
-export default {
-	title: 'Personal Menu'
-};
-
-export const loggedOut = () => mustache.render( personalMenuTemplate,
-	PERSONAL_MENU_TEMPLATE_DATA.loggedOut );
-
-export const loggedInWithEcho = () => mustache.render( personalMenuTemplate,
-	PERSONAL_MENU_TEMPLATE_DATA.loggedInWithEcho );
-
-export const loggedInWithULS = () => mustache.render( personalMenuTemplate,
-	PERSONAL_MENU_TEMPLATE_DATA.loggedInWithULS );
diff --git a/stories/VectorMenu.stories.js b/stories/VectorMenu.stories.js
index e0ca02d4d..9d73f1e96 100644
--- a/stories/VectorMenu.stories.js
+++ b/stories/VectorMenu.stories.js
@@ -4,7 +4,7 @@ import '../.storybook/common.less';
 import { vectorMenuTemplate, moreData, variantsData } from './VectorMenu.stories.data';
 
 export default {
-	title: 'Menu'
+	title: 'MenuDropdown'
 };
 
 export const more = () => mustache.render( vectorMenuTemplate, moreData );
diff --git a/stories/skin.stories.data.js b/stories/skin.stories.data.js
index f0ebff5dc..e1ce38699 100644
--- a/stories/skin.stories.data.js
+++ b/stories/skin.stories.data.js
@@ -1,7 +1,7 @@
 import { htmluserlangattributes } from './utils';
 import { placeholder } from './utils';
 
-import { PERSONAL_MENU_TEMPLATE_DATA, personalMenuTemplate } from './PersonalMenu.stories.data';
+import { PERSONAL_MENU_TEMPLATE_DATA, menuTemplate } from './Menu.stories.data';
 import { pageActionsData, namespaceTabsData, vectorTabsTemplate } from './VectorTabs.stories.data';
 import { vectorMenuTemplate, moreData, variantsData } from './VectorMenu.stories.data';
 import { searchBoxData, searchBoxTemplate } from './SearchBox.stories.data';
@@ -48,7 +48,7 @@ export const TEMPLATE_PARTIALS = Object.assign( {}, SIDEBAR_TEMPLATE_PARTIALS, {
 	Sidebar: sidebarTemplate,
 	VectorTabs: vectorTabsTemplate,
 	VectorMenu: vectorMenuTemplate,
-	PersonalMenu: personalMenuTemplate,
+	Menu: menuTemplate,
 	Footer: footerTemplate
 } );
 
diff --git a/stories/types.js b/stories/types.js
index 9f1dd676e..17dcafb2d 100644
--- a/stories/types.js
+++ b/stories/types.js
@@ -30,6 +30,7 @@
  * @prop {string} html-items
  * @prop {string} [class] of menu
  * @prop {string} [html-userlangattributes]
+ * @prop {boolean} [is-dropdown]
  */
 
 /**
diff --git a/tests/phpunit/integration/VectorTemplateTest.php b/tests/phpunit/integration/VectorTemplateTest.php
index 80e6ba0c1..acaa50617 100644
--- a/tests/phpunit/integration/VectorTemplateTest.php
+++ b/tests/phpunit/integration/VectorTemplateTest.php
@@ -171,7 +171,7 @@ class VectorTemplateTest extends MediaWikiIntegrationTestCase {
 		$this->assertSame( $actions['class'],
 			'emptyPortlet vectorMenu' );
 		$this->assertSame( $props['data-personal-menu']['class'],
-			'emptyPortlet' );
+			'emptyPortlet vectorMenu-default' );
 	}
 
 }