[Security Solution] Flyout persist after navigating away from security and come back to landing page

[christineweng]

Describe the issue Currently the flyout stores its state in url by default, when url changes, a redux action called (urlChanged) is dispatched. When an user has expandable flyout open then go to another page, as the url changes, the urlChanged action will close the flyout as clean up.

However, the url listener is relying on useHistory here, and it is within the security wrapper. Hence when a user navigate away from security (say advanced settings or discover), the urlChanged action will not fire and the panel state in redux remains as 'open'.

Such edge case was not discovered in alerts because timeline wrapper actively monitor url and synchronize url state and redux, in doing so, it triggers a urlChange and closes the flyout.

Exposure: this bug is only present when an user 1) has an expandable flyout open, 2) navigates to non-security pages, 3) come back to a page without timeline wrapper (rule landing page, explore landing page and manage landing page)

Kibana/Elasticsearch Stack version: 8.14

Functional Area (e.g. Endpoint management, timelines, resolver, etc.): Expandable flyout

Steps to reproduce:

1. Open an expandable flyout
2. Go to advanced setting
3. Go back to Explore
4. Notice the flyout is opened in the explore landing page

https://github.com/elastic/kibana/assets/18648970/0854faaa-403d-40d6-b7f0-5b92f189e281

Current behavior: Flyout is showing on explore landing page Expected behavior: Flyout should be closed

[elasticmachine]

Pinging @elastic/security-threat-hunting-investigations (Team:Threat Hunting:Investigations)

[elasticmachine]

Pinging @elastic/security-solution (Team: SecuritySolution)