[Dashboard Navigation] Unskip links panel test (#178051)

Closes https://github.com/elastic/kibana/issues/177675
Closes https://github.com/elastic/kibana/issues/177676

## Summary

When I originally ran the FTR on this test, it [passed 100
times](https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/5389),
so I thought we could maybe just unskip the test without further effort.
However, when looking at the failure screenshot, it looks like the link
creation/editor flyout didn't open for some reason - so, I decided to
add some extra logging statements (to make debugging easier if this test
fails again) + add a few extra retry's to **ensure** that the flyout is
open before progressing to (hopefully) prevent this from happening in
the future.

Rerunning the FTR after these changes also [passed 100
times](https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/5391):


![image](32b0bb5d-d063-4095-8fd6-3bca3a191616)

Backporting these changes since the original failure was in 8.13.

### Checklist

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed


### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

src/plugins/links/public/components/editor/link_editor.tsx

@@ -90,7 +90,7 @@ export const LinkEditor = ({
   );
 
   return (
-    <EuiFocusTrap className={'linkEditor in'} data-test-subj="links--linkEditor--flyout">
+    <EuiFocusTrap className={'linkEditor in'}>
       <EuiFlyoutHeader hasBorder>
         <EuiButtonEmpty
           className="linkEditorBackButton"
@@ -108,7 +108,7 @@ export const LinkEditor = ({
           </EuiTitle>
         </EuiButtonEmpty>
       </EuiFlyoutHeader>
-      <EuiFlyoutBody>
+      <EuiFlyoutBody data-test-subj="links--linkEditor--flyout">
         <EuiForm component="form" fullWidth>
           <EuiFormRow label={LinksStrings.editor.linkEditor.getLinkTypePickerLabel()}>
             <EuiRadioGroup

test/functional/apps/dashboard_elements/links/links_create_edit.ts

@@ -37,8 +37,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const DASHBOARD_NAME = 'Test Links panel';
   const LINKS_PANEL_NAME = 'Some links';
 
-  // Failing: See https://github.com/elastic/kibana/issues/177675
+  describe('links panel create and edit', () => {
-  describe.skip('links panel create and edit', () => {
     describe('creation', async () => {
       before(async () => {
         await dashboard.navigateToApp();
@@ -116,7 +115,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
         await dashboardPanelActions.openContextMenu();
         await dashboardPanelActions.clickEdit();
-        await dashboardLinks.expectFlyoutIsOpen();
+        await dashboardLinks.expectPanelEditorFlyoutIsOpen();
 
         // Move the third link up one step
         await dashboardLinks.reorderLinks('link003', 3, 1, true);
@@ -136,7 +135,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
         await dashboardPanelActions.openContextMenu();
         await dashboardPanelActions.clickEdit();
-        await dashboardLinks.expectFlyoutIsOpen();
+        await dashboardLinks.expectPanelEditorFlyoutIsOpen();
 
         await dashboardLinks.editLinkByIndex(5);
         await testSubjects.exists('links--linkEditor--flyout');
@@ -155,7 +154,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
         await dashboardPanelActions.openContextMenu();
         await dashboardPanelActions.clickEdit();
-        await dashboardLinks.expectFlyoutIsOpen();
+        await dashboardLinks.expectPanelEditorFlyoutIsOpen();
 
         await dashboardLinks.deleteLinkByIndex(5);
         await dashboardLinks.clickPanelEditorSaveButton();

test/functional/page_objects/dashboard_page_links.ts

@@ -11,6 +11,7 @@ import { LinksLayoutType } from '@kbn/links-plugin/common/content_management';
 import { FtrService } from '../ftr_provider_context';
 
 export class DashboardPageLinks extends FtrService {
+  private readonly log = this.ctx.getService('log');
   private readonly retry = this.ctx.getService('retry');
   private readonly browser = this.ctx.getService('browser');
   private readonly testSubjects = this.ctx.getService('testSubjects');
@@ -20,6 +21,7 @@ export class DashboardPageLinks extends FtrService {
   private readonly settings = this.ctx.getPageObject('settings');
 
   public async toggleLinksLab(value?: boolean) {
+    this.log.debug(`toggle the links lab setting to ${value}`);
     await this.header.clickStackManagement();
     await this.settings.clickKibanaSettings();
 
@@ -31,11 +33,13 @@ export class DashboardPageLinks extends FtrService {
     ----------------------------------------------------------- */
 
   public async getAllLinksInPanel() {
+    this.log.debug('get all link elements from the panel');
     const listGroup = await this.testSubjects.find('links--component--listGroup');
     return await listGroup.findAllByCssSelector('li');
   }
 
   public async getNumberOfLinksInPanel() {
+    this.log.debug('get the number of links in the panel');
     const links = await this.getAllLinksInPanel();
     return links.length;
   }
@@ -44,28 +48,45 @@ export class DashboardPageLinks extends FtrService {
     Links flyout
     ----------------------------------------------------------- */
 
-  public async expectFlyoutIsOpen() {
+  public async expectPanelEditorFlyoutIsOpen() {
-    await this.testSubjects.exists('links--panelEditor--flyout');
+    await this.retry.waitFor(
+      'links panel editor flyout to exist',
+      async () => await this.testSubjects.exists('links--panelEditor--flyout')
+    );
+  }
+
+  public async expectLinkEditorFlyoutIsOpen() {
+    await this.retry.waitFor(
+      'link editor flyout to exist',
+      async () => await this.testSubjects.exists('links--linkEditor--flyout')
+    );
   }
 
   public async clickPanelEditorSaveButton() {
-    await this.expectFlyoutIsOpen();
+    this.log.debug('click links panel editor save button');
+    await this.expectPanelEditorFlyoutIsOpen();
     await this.testSubjects.clickWhenNotDisabled('links--panelEditor--saveBtn');
   }
 
   public async clickLinkEditorCloseButton() {
+    this.log.debug('click link editor close button');
     await this.testSubjects.click('links--linkEditor--closeBtn');
+    await this.testSubjects.waitForDeleted('links--linkEditor--flyout');
   }
 
   public async clickPanelEditorCloseButton() {
+    this.log.debug('click links panel editor close button');
     await this.testSubjects.click('links--panelEditor--closeBtn');
   }
 
   public async clickLinksEditorSaveButton() {
+    this.log.debug('click link editor save button');
     await this.testSubjects.clickWhenNotDisabled('links--linkEditor--saveBtn');
+    await this.testSubjects.waitForDeleted('links--linkEditor--flyout');
   }
 
   public async findDraggableLinkByIndex(index: number) {
+    this.log.debug(`find the draggable link element at index ${index}`);
     await this.testSubjects.exists('links--panelEditor--flyout');
     const linksFormRow = await this.testSubjects.find('links--panelEditor--linksAreaDroppable');
     return await linksFormRow.findByCssSelector(
@@ -80,9 +101,17 @@ export class DashboardPageLinks extends FtrService {
     openInNewTab: boolean = false,
     linkLabel?: string
   ) {
-    await this.expectFlyoutIsOpen();
+    this.log.debug(
-    await this.testSubjects.click('links--panelEditor--addLinkBtn');
+      `add a dashboard link to "${destination}" ${
-    await this.testSubjects.exists('links--linkEditor--flyout');
+        linkLabel ? `with custom label "${linkLabel}"` : ''
+      }`
+    );
+
+    await this.expectPanelEditorFlyoutIsOpen();
+    await this.retry.try(async () => {
+      await this.testSubjects.click('links--panelEditor--addLinkBtn');
+      await this.expectLinkEditorFlyoutIsOpen();
+    });
     const radioOption = await this.testSubjects.find('links--linkEditor--dashboardLink--radioBtn');
     const label = await radioOption.findByCssSelector('label[for="dashboardLink"]');
     await label.click();
@@ -114,6 +143,11 @@ export class DashboardPageLinks extends FtrService {
     encodeUrl: boolean = true,
     linkLabel?: string
   ) {
+    this.log.debug(
+      `add an external link to "${destination}" ${
+        linkLabel ? `with custom label "${linkLabel}"` : ''
+      }`
+    );
     await this.setExternalUrlInput(destination);
     if (linkLabel) {
       await this.testSubjects.setValue('links--linkEditor--linkLabel--input', linkLabel);
@@ -128,6 +162,7 @@ export class DashboardPageLinks extends FtrService {
   }
 
   public async deleteLinkByIndex(index: number) {
+    this.log.debug(`delete the link at ${index}`);
     const linkToDelete = await this.findDraggableLinkByIndex(index);
     await this.retry.try(async () => {
       await linkToDelete.moveMouseTo();
@@ -138,6 +173,7 @@ export class DashboardPageLinks extends FtrService {
   }
 
   public async editLinkByIndex(index: number) {
+    this.log.debug(`edit the link at ${index}`);
     const linkToEdit = await this.findDraggableLinkByIndex(index);
     await this.retry.try(async () => {
       await linkToEdit.moveMouseTo();
@@ -148,6 +184,11 @@ export class DashboardPageLinks extends FtrService {
   }
 
   public async reorderLinks(linkLabel: string, startIndex: number, steps: number, reverse = false) {
+    this.log.debug(
+      `move the ${linkLabel} link from ${startIndex} to ${
+        reverse ? startIndex - steps : startIndex + steps
+      }`
+    );
     const linkToMove = await this.findDraggableLinkByIndex(startIndex);
     const draggableButton = await linkToMove.findByTestSubject(`panelEditorLink--dragHandle`);
     expect(await draggableButton.getAttribute('data-rfd-drag-handle-draggable-id')).to.equal(
@@ -166,15 +207,19 @@ export class DashboardPageLinks extends FtrService {
   }
 
   public async setLayout(layout: LinksLayoutType) {
-    await this.expectFlyoutIsOpen();
+    this.log.debug(`set the link panel layout to ${layout}`);
+    await this.expectPanelEditorFlyoutIsOpen();
     const testSubj = `links--panelEditor--${layout}LayoutBtn`;
     await this.testSubjects.click(testSubj);
   }
 
   public async setExternalUrlInput(destination: string) {
-    await this.expectFlyoutIsOpen();
+    this.log.debug(`set the external URL input to ${destination}`);
-    await this.testSubjects.click('links--panelEditor--addLinkBtn');
+    await this.expectPanelEditorFlyoutIsOpen();
-    await this.testSubjects.exists('links--linkEditor--flyout');
+    await this.retry.try(async () => {
+      await this.testSubjects.click('links--panelEditor--addLinkBtn');
+      await this.expectLinkEditorFlyoutIsOpen();
+    });
     const option = await this.testSubjects.find('links--linkEditor--externalLink--radioBtn');
     const label = await option.findByCssSelector('label[for="externalLink"]');
     await label.click();
@@ -182,7 +227,8 @@ export class DashboardPageLinks extends FtrService {
   }
 
   public async toggleSaveByReference(checked: boolean) {
-    await this.expectFlyoutIsOpen();
+    this.log.debug(`toggle save by reference for link panel to ${checked}`);
+    await this.expectPanelEditorFlyoutIsOpen();
     await this.testSubjects.setEuiSwitch(
       'links--panelEditor--saveByReferenceSwitch',
       checked ? 'check' : 'uncheck'