[Security Solution][Investigations] - Fix flaky timeline (+) test (#1…

…57856)

## Summary

This PR fixes the flaky test
#153771.

It was run 30 Times locally in this commit:
075960ccd7f7df7beb21f8055fc681525f42f59f

x-pack/plugins/security_solution/cypress/e2e/timelines/flyout_button.cy.ts

@@ -6,11 +6,7 @@
  */
 
 import { TIMELINE_BOTTOM_BAR_TOGGLE_BUTTON } from '../../screens/security_main';
-import {
-  CREATE_NEW_TIMELINE,
-  TIMELINE_FLYOUT_HEADER,
-  TIMELINE_SETTINGS_ICON,
-} from '../../screens/timeline';
+import { CREATE_NEW_TIMELINE, TIMELINE_FLYOUT_HEADER } from '../../screens/timeline';
 import { cleanKibana } from '../../tasks/common';
 
 import { waitForAllHostsToBeLoaded } from '../../tasks/hosts/all_hosts';
@@ -20,6 +16,10 @@ import {
   closeTimelineUsingToggle,
   openTimelineUsingToggle,
 } from '../../tasks/security_main';
+import {
+  closeCreateTimelineOptionsPopover,
+  openCreateTimelineOptionsPopover,
+} from '../../tasks/timeline';
 
 import { HOSTS_URL } from '../../urls/navigation';
 
@@ -61,13 +61,13 @@ describe('timeline flyout button', () => {
     cy.get(TIMELINE_BOTTOM_BAR_TOGGLE_BUTTON).should('have.focus');
   });
 
-  // FLAKY: https://github.com/elastic/kibana/issues/153771
-  it.skip('the `(+)` button popover menu owns focus', () => {
-    cy.get(TIMELINE_SETTINGS_ICON).filter(':visible').click({ force: true });
+  it('the `(+)` button popover menu owns focus when open', () => {
+    openCreateTimelineOptionsPopover();
     cy.get(`${CREATE_NEW_TIMELINE}`)
+      .should('be.visible')
       .pipe(($el) => $el.trigger('focus'))
       .should('have.focus');
-    cy.get(TIMELINE_SETTINGS_ICON).filter(':visible').type('{esc}');
+    closeCreateTimelineOptionsPopover();
     cy.get(CREATE_NEW_TIMELINE).should('not.exist');
   });
 

x-pack/plugins/security_solution/cypress/tasks/timeline.ts

@@ -314,8 +314,16 @@ export const createNewTimeline = () => {
     .pipe(($el) => $el.trigger('click'));
 };
 
+export const openCreateTimelineOptionsPopover = () => {
+  cy.get(TIMELINE_SETTINGS_ICON).filter(':visible').should('be.visible').click();
+};
+
+export const closeCreateTimelineOptionsPopover = () => {
+  cy.get(TIMELINE_SETTINGS_ICON).filter(':visible').should('be.visible').type('{esc}');
+};
+
 export const createNewTimelineTemplate = () => {
-  cy.get(TIMELINE_SETTINGS_ICON).filter(':visible').click({ force: true });
+  openCreateTimelineOptionsPopover();
   cy.get(CREATE_NEW_TIMELINE_TEMPLATE).click();
 };
 
@@ -355,8 +363,7 @@ export const openTimelineInspectButton = () => {
 
 export const openTimelineFromSettings = () => {
   const click = ($el: Cypress.ObjectLike) => cy.wrap($el).click();
-  cy.get(TIMELINE_SETTINGS_ICON).should('be.visible');
-  cy.get(TIMELINE_SETTINGS_ICON).filter(':visible').pipe(click);
+  openCreateTimelineOptionsPopover();
   cy.get(OPEN_TIMELINE_ICON).should('be.visible');
   cy.get(OPEN_TIMELINE_ICON).pipe(click);
 };