[Top Navigation] Close actions popover on click

[kowalczyk-krzysztof]

Summary

This PR makes it so the actions popover closes after clicking on an item.

Closes: #201358

[elasticmachine]

Pinging @elastic/appex-sharedux (Team:SharedUX)

[eokoneyo]

Hi @kowalczyk-krzysztof I took a look at this, whilst this PR fixes the particularly issue mentioned, I was able to reproduce the same in other parts of the app, see the video linked below;

Screen.Recording.2024-12-13.at.09.52.54.mov

Could we apply this fix in such a way that it's global?

[kowalczyk-krzysztof]

@eokoneyo Thanks for checking this. I thought the component is reused across top navigation - but I guess not. I'll look into it.

[kowalczyk-krzysztof]

So it seems that for non-solution specific code this component is used:
https://github.com/elastic/kibana/blob/main/src/plugins/navigation/public/top_nav_menu/top_nav_menu_items.tsx - it's also used for some Management pages.

However, each solutions seems to have its own implementation of this component:

• Search: https://github.com/elastic/kibana/blob/main/x-pack/plugins/enterprise_search/public/applications/shared/layout/endpoints_header_action.tsx
• Observability:
  • Logs Explorer page: https://github.com/elastic/kibana/blob/main/x-pack/plugins/observability_solution/observability_logs_explorer/public/components/logs_explorer_top_nav_menu.tsx
  • Inventory page: https://github.com/elastic/kibana/blob/main/x-pack/plugins/observability_solution/inventory/public/components/app_root/header_action_menu/index.tsx
  • Infrastructure page: https://github.com/elastic/kibana/blob/main/x-pack/plugins/observability_solution/infra/public/pages/metrics/index.tsx
  • Services page: https://github.com/elastic/kibana/blob/main/x-pack/plugins/observability_solution/apm/public/components/routing/app_root/apm_header_action_menu/index.tsx
  • Synthetics page: https://github.com/elastic/kibana/blob/main/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/common/header/action_menu_content.tsx
  • User experience page: https://github.com/elastic/kibana/blob/main/x-pack/solutions/observability/plugins/ux/public/components/app/rum_dashboard/action_menu/index.tsx
  • Overview page and others not listed above: https://github.com/elastic/kibana/blob/main/x-pack/solutions/observability/plugins/observability/public/pages/overview/components/header_menu/header_menu.tsx
• Security: https://github.com/elastic/kibana/blob/main/x-pack/plugins/security_solution/public/app/home/global_header/index.tsx
• Management:
  • Integrations: https://github.com/elastic/kibana/blob/main/x-pack/plugins/fleet/public/applications/integrations/components/header/header.tsx
  • Stack monitoring (this component doesn't follow the pattern of using EuiHeaderLinks): https://github.com/elastic/kibana/blob/main/x-pack/plugins/monitoring/public/alerts/alerts_dropdown.tsx

I think this is a great candidate for a shared component, I will open a follow up issue for this.

EDIT: Follow up issue: #204347

[eokoneyo]

Changes LGTM, tested locally. We decided that the previous concern pertaining to other similar instances of the same issue will be resolved in a different issue.

[elasticmachine]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: 821393b

Failed CI Steps

• Jest Tests #15

Test Failures

• [job] [logs] Jest Tests #15 / MultipleAgentPolicySummaryLine it should render the first policy name and the badge when there are multiple policies

Metrics [docs]

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
navigation	18.3KB	18.3KB	+55.0B

History

• 💛 Build #259393 was flaky 3c6bc21

cc @kowalczyk-krzysztof

[kibanamachine]

Starting backport for target branches: 8.x

https://github.com/elastic/kibana/actions/runs/12351877828

[kibanamachine]

💚 All backports created successfully

Status	Branch	Result
✅	8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation