N°1957 - Navigation menu: Show (dismissable) hint for the menu filter

css/backoffice/layout/_navigation-menu.scss

@@ -121,6 +121,13 @@ $ibo-navigation-menu--menu-filter-clear--right: $ibo-navigation-menu--menu-filte
 $ibo-navigation-menu--menu-filter-clear--padding: 3px 3px !default;
 $ibo-navigation-menu--menu-filter-hotkey--border: 1px solid $ibo-color-grey-400 !default;
 
+$ibo-navigation-menu--menu-filter-hint--margin-top: 16px !default;
+$ibo-navigation-menu--menu-filter-hint--padding-right: 12px !default;
+$ibo-navigation-menu--menu-filter-hint--text-color: $ibo-color-grey-700 !default;
+$ibo-navigation-menu--menu-filter-hint-close--top: 1px !default;
+$ibo-navigation-menu--menu-filter-hint-close--right: 2px !default;
+
+
 $ibo-navigation-menu--menu-groups--margin-top: 50px !default;
 
 $ibo-navigation-menu--menu--placeholder--width: 100% !default;
@@ -568,14 +575,17 @@ $ibo-navigation-menu--user-info--height--is-expanded: 100% !default;
 	padding: 2px 4px;
 	@extend %ibo-font-ral-nor-50;
 }
-.ibo-navigation-menu---menu-filter-hint{
-	display: none; /* TODO 3.0.0: Wait for MVC TWIG feature to be complete, then move this to an alert block */
-	margin-top: 8px;
+.ibo-navigation-menu--menu-filter-hint{
+	position: relative;
+	margin-top: $ibo-navigation-menu--menu-filter-hint--margin-top;
+	padding-right: $ibo-navigation-menu--menu-filter-hint--padding-right;
+	color: $ibo-navigation-menu--menu-filter-hint--text-color;
 	@extend %ibo-font-ral-ita-50;
 }
 .ibo-navigation-menu--menu-filter-hint-close{
 	position: absolute;
-	right: 2px;
+	top: $ibo-navigation-menu--menu-filter-hint-close--top;
+	right: $ibo-navigation-menu--menu-filter-hint-close--right;
 	@extend %ibo-hyperlink-inherited-colors;
 }
 

dictionaries/ui/layouts/en.dictionary.itop.navigation-menu.php

@@ -24,7 +24,7 @@ Dict::Add('EN US', 'English', 'English', array(
 	'UI:Layout:NavigationMenu:MenuFilter:Input:Placeholder' => 'Filter...',
 	'UI:Layout:NavigationMenu:MenuFilter:Input:Tooltip' => 'Type your keywords to filter menus',
 	'UI:Layout:NavigationMenu:MenuFilter:Input:Hotkey' => 'Alt + M',
-	'UI:Layout:NavigationMenu:MenuFilter:Input:Hint' => 'Match from all menu groups will be displayed not only those from this one',
+	'UI:Layout:NavigationMenu:MenuFilter:Input:Hint' => 'Matches from all menu groups will be displayed, not only those from this one',
 	'UI:Layout:NavigationMenu:MenuFilter:Placeholder:Hint' => 'No result for this menu filter',
 	'UI:Layout:NavigationMenu:UserInfo:WelcomeMessage:Text' => 'Hi %1$s!',
 	'UI:Layout:NavigationMenu:UserInfo:Picture:AltText' => '%1$s\'s contact picture'

js/layouts/navigation-menu.js

@@ -44,6 +44,8 @@ $(function()
 					menu_filter_placeholder: '[data-role="ibo-navigation-menu--menu--placeholder"]',
 					menu_filter_input: '[data-role="ibo-navigation-menu--menu-filter-input"]',
 					menu_filter_clear: '[data-role="ibo-navigation-menu--menu-filter-clear"]',
+					menu_filter_hint: '[data-role="ibo-navigation-menu--menu-filter-hint"]',
+					menu_filter_hint_close: '[data-role="ibo-navigation-menu--menu-filter-hint-close"]',
 					user_menu_toggler: '[data-role="ibo-navigation-menu--user-menu--toggler"]',
 					user_menu_container: '[data-role="ibo-navigation-menu--user-menu-container"]',
 					user_menu: '[data-role="ibo-navigation-menu--user-menu-container"] > [data-role="ibo-popover-menu"]'
@@ -90,7 +92,11 @@ $(function()
 				// - Clear icon
 				this.element.find(this.js_selectors.menu_filter_clear).on('click', function (oEvent) {
 					me._onFilterClearClick(oEvent);
-				})
+				});
+				// - Hint close
+				this.element.find(this.js_selectors.menu_filter_hint_close).on('click', function (oEvent) {
+					me._onFilterHintCloseClick(oEvent);
+				});
 
 				// User info
 				this.element.find(this.js_selectors.user_menu_toggler).on('click', function (oEvent) {
@@ -175,6 +181,14 @@ $(function()
 				// Position focus in the input for better UX
 				this._focusFilter();
 			},
+			_onFilterHintCloseClick: function(oEvent)
+			{
+				this.element.find(this.js_selectors.menu_filter_hint).hide();
+
+				// Save state in user preferences
+				SetUserPreference('navigation_menu_filter_hint', false, true);
+			},
+
 			_onUserMenuTogglerClick: function(oEvent)
 			{
 				// Avoid anchor glitch

sources/application/UI/Base/Layout/NavigationMenu/NavigationMenu.php

@@ -55,6 +55,10 @@ class NavigationMenu extends UIBlock
 		'js/forms-json-utils.js',
 	];
 
+	// Specific constants
+	/** @var bool DEFAULT_SHOW_MENU_FILTER_HINT */
+	public const DEFAULT_SHOW_MENU_FILTER_HINT = true;
+
 	/** @var string $sAppRevisionNumber */
 	protected $sAppRevisionNumber;
 	/** @var string $sAppSquareIconUrl */
@@ -75,6 +79,8 @@ class NavigationMenu extends UIBlock
 	private $oNewsroomMenu;
 	/** @var bool $bIsExpanded */
 	protected $bIsExpanded;
+	/** @var bool Whether the hint on how the menu filter works shoudl be displayed or not */
+	protected $bShowMenuFilterHint;
 
 	/**
 	 * NavigationMenu constructor.
@@ -105,6 +111,7 @@ class NavigationMenu extends UIBlock
 		$this->oNewsroomMenu = $oNewsroomMenu;
 
 		$this->ComputeExpandedState();
+		$this->ComputeMenuFilterHintState();
 		$this->ComputeUserData();
 		$this->ComputeSiloSelection();
 	}
@@ -172,6 +179,7 @@ class NavigationMenu extends UIBlock
 	{
 		return $this->oUserMenu;
 	}
+
 	/**
 	 * @return \Combodo\iTop\Application\UI\Base\Component\PopoverMenu\NewsroomMenu\NewsroomMenu
 	 */
@@ -190,6 +198,15 @@ class NavigationMenu extends UIBlock
 		return $this->bIsExpanded;
 	}
 
+	/**
+	 * @uses $bShowMenuFilterHint
+	 * @return bool
+	 */
+	public function HasMenuFilterHint(): bool
+	{
+		return $this->bShowMenuFilterHint;
+	}
+
 	/**
 	 * @inheritDoc
 	 */
@@ -306,6 +323,20 @@ JS;
 		return $this;
 	}
 
+	/**
+	 * Compute if the menu filter hint should be displayed or not
+	 *
+	 * @see $bShowMenuFilterHint
+	 *
+	 * @throws \CoreException
+	 * @throws \CoreUnexpectedValue
+	 * @throws \MySQLException
+	 */
+	protected function ComputeMenuFilterHintState(): void
+	{
+		$this->bShowMenuFilterHint = (true === appUserPreferences::GetPref('navigation_menu_filter_hint', static::DEFAULT_SHOW_MENU_FILTER_HINT));
+	}
+
 	/**
 	 * Compute the user data displayed in the menu (organization, name, picture, ...)
 	 *

templates/base/layouts/navigation-menu/layout.html.twig

@@ -88,10 +88,12 @@
 			<input class="ibo-navigation-menu--menu-filter-input" data-role="ibo-navigation-menu--menu-filter-input" type="text" placeholder="{{ 'UI:Layout:NavigationMenu:MenuFilter:Input:Placeholder'|dict_s }}" data-tooltip-content="{{ 'UI:Layout:NavigationMenu:MenuFilter:Input:Tooltip'|dict_s }}" data-tooltip-trigger="mouseenter">
 			<a class="ibo-navigation-menu--menu-filter-clear" data-role="ibo-navigation-menu--menu-filter-clear" href="#"><span class="fas fa-times"></span></a>
 			<span class="ibo-navigation-menu--menu-filter-hotkey">{{ 'UI:Layout:NavigationMenu:MenuFilter:Input:Hotkey'|dict_s }}</span>
-			<div class="ibo-navigation-menu---menu-filter-hint" data-role="ibo-navigation-menu--menu-filter-hint">
-				{{ 'UI:Layout:NavigationMenu:MenuFilter:Input:Hint'|dict_s }}
-				<a class="ibo-navigation-menu--menu-filter-hint-close" data-role="ibo-navigation-menu--menu-filter-hint-close" href="#"><span class="fas fa-times"></span></a>
-			</div>
+			{% if oUIBlock.HasMenuFilterHint() %}
+				<div class="ibo-navigation-menu--menu-filter-hint" data-role="ibo-navigation-menu--menu-filter-hint">
+					{{ 'UI:Layout:NavigationMenu:MenuFilter:Input:Hint'|dict_s }}
+					<a class="ibo-navigation-menu--menu-filter-hint-close" data-role="ibo-navigation-menu--menu-filter-hint-close" href="#"><span class="fas fa-times"></span></a>
+				</div>
+			{% endif %}
 		</div>
 		<div class="ibo-navigation-menu--menu--placeholder" data-role="ibo-navigation-menu--menu--placeholder">
 			<div class="ibo-navigation-menu--menu--placeholder-image ibo-svg-illustration--container">