Add features menu for mobile and tablet viewports #13013

Feature Description

On mobile and tablet viewports, consolidate the dashboard header's feature action icons (Manage email reports, Dashboard sharing settings, Download PDF report) into a single vertical three-dots "features" menu, so these internal features have room to grow as more are added. On desktop the individual icons remain unchanged. The menu is structured to also host the upcoming Features Hub "Add features" button, which is not part of this ticket.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• On mobile and tablet viewports, the dashboard header shows a single three-dots features menu in place of the separate email reports, dashboard sharing, and PDF download icons.
• Opening the menu lists the available feature actions: Manage email reports, Dashboard sharing settings, and Download PDF report.
• Selecting a menu item performs the same action as its individual header icon.
• On desktop viewports the individual header icons continue to show as before, with no three-dots menu.
• The menu omits dashboard sharing on the view-only dashboard and shows Download PDF report only when PDF generation is enabled.
• The menu closes when an item is selected, when clicking outside it, or on Escape.

Implementation Brief

A new three-dots menu mirroring HelpMenu, shown on tablet and mobile breakpoints, consolidating the email reports (#13010), dashboard sharing, and PDF download header actions into menu items that fire the same dispatches. Desktop keeps the individual icons.

Files to modify

Icon

• Create file assets/svg/icons/more-vertical.svg with the vertical three-dots icon used for the menu trigger.

Frontend

• Create file assets/js/components/FeaturesMenu/index.tsx, mirroring assets/js/components/help/HelpMenu.js: a three-dots icon Button toggling a Menu (from googlesitekit-components) with useClickAway, useKeyCodesInside( [ ESCAPE, TAB ] ), and trackEvent. Menu items: Manage email reports (dispatch USER_SETTINGS_SELECTION_PANEL_OPENED_KEY), Dashboard sharing settings (dispatch SETTINGS_DIALOG, omitted on view-only), Download PDF report (dispatch PDF_DOWNLOAD_PANEL_OPENED_KEY, only when the pdfGeneration feature flag is enabled), each reusing its existing header-icon svg.
• Update file assets/js/components/DashboardMainApp.js to render <FeaturesMenu /> in the Header children on BREAKPOINT_TABLET and BREAKPOINT_SMALL in place of ManageEmailReportsButton, PDFDownloadButton, and DashboardSharingSettingsButton, keeping the individual icons on desktop and leaving EntitySearchInput, DateRangeSelector, and HelpMenu unchanged.
• Update file assets/sass/components/ styles for the features menu.

Test Coverage

• Create assets/js/components/FeaturesMenu/index.test.tsx asserting the trigger renders, the menu opens and closes (item select, click-away, Escape), the items reflect gating (PDF item hidden without the pdfGeneration flag, sharing item hidden on view-only), and each item dispatches the correct UI key.
• Create assets/js/components/FeaturesMenu/index.stories.tsx covering the open menu and gating variants, including a mobile/tablet viewport story that verifies the header shows the features menu instead of the separate icons, for visual regression.

QA Brief

• Shared behavior (what each action opens, when the email reports entry point shows, view-only data-access rules) is covered by the QA Brief on Add email report management entry point to the header #13010; the checks below cover only the mobile and tablet menu.
• As an administrator on a desktop-width window, confirm the header shows the individual email reports, PDF download, and dashboard sharing icons with no three-dots menu.
• Narrow the window to tablet or phone width (or open the dashboard on a mobile device) and confirm the three icons collapse into a single three-dots menu, sitting between the help icon and the profile picture.
• Open the menu and confirm it lists Manage email reports, Dashboard sharing settings, and Download PDF report, and that selecting each opens the same panel or dialog as its desktop icon.
• Confirm the menu closes when an item is selected, when clicking outside it, and when pressing Escape.
• On the view-only dashboard at mobile width, confirm the menu omits Dashboard sharing settings.

Changelog entry

• Add features menu for mobile and tablet viewports.