[8.x] [kbn-scout][maps] waitForRenderComplete (#211265) (#211445)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[kbn-scout][maps] waitForRenderComplete
(#211265)](https://github.com/elastic/kibana/pull/211265)

<!--- Backport version: 9.6.5 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Dzmitry
Lemechko","email":"dzmitry.lemechko@elastic.co"},"sourceCommit":{"committedDate":"2025-02-17T13:46:44Z","message":"[kbn-scout][maps]
waitForRenderComplete (#211265)\n\n## Summary\n\nThis PR add a method to
wait for map to be loaded to replace
generic\n`renderable.waitForRender()`.\n\nWhile investigating the recent
test failure on CI I found out that for\nmaps case we can simplify the
logic with few facts:\n- before start waiting for render to complete, we
need to wait for main\ncontainer `#maps-plugin` to be in DOM. It takes
2-3 seconds.\n- there is always a single div block with
`data-render-complete`\nattribute, and there is a comment in source code
stating `See if the\n\"data-render-complete\" attribute is \"true\". If
so we're done!` which\nmeans we can simply wait
for\n`div[data-dom-id][data-render-complete=\"true\"]`\n\n\n6de2ef0e6d/x-pack/platform/plugins/shared/maps/public/connected_components/map_container/map_container.tsx (L103-L116)\n\n`renderable.waitForRender()`
is a good waiter, but probably for\ndashboard with multiple
panels.","sha":"08400b1f4225bcc20b3c28262432ba269e117750","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","backport:version","test:scout","v9.1.0","v8.19.0"],"title":"[kbn-scout][maps]
waitForRenderComplete","number":211265,"url":"https://github.com/elastic/kibana/pull/211265","mergeCommit":{"message":"[kbn-scout][maps]
waitForRenderComplete (#211265)\n\n## Summary\n\nThis PR add a method to
wait for map to be loaded to replace
generic\n`renderable.waitForRender()`.\n\nWhile investigating the recent
test failure on CI I found out that for\nmaps case we can simplify the
logic with few facts:\n- before start waiting for render to complete, we
need to wait for main\ncontainer `#maps-plugin` to be in DOM. It takes
2-3 seconds.\n- there is always a single div block with
`data-render-complete`\nattribute, and there is a comment in source code
stating `See if the\n\"data-render-complete\" attribute is \"true\". If
so we're done!` which\nmeans we can simply wait
for\n`div[data-dom-id][data-render-complete=\"true\"]`\n\n\n6de2ef0e6d/x-pack/platform/plugins/shared/maps/public/connected_components/map_container/map_container.tsx (L103-L116)\n\n`renderable.waitForRender()`
is a good waiter, but probably for\ndashboard with multiple
panels.","sha":"08400b1f4225bcc20b3c28262432ba269e117750"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.x"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/211265","number":211265,"mergeCommit":{"message":"[kbn-scout][maps]
waitForRenderComplete (#211265)\n\n## Summary\n\nThis PR add a method to
wait for map to be loaded to replace
generic\n`renderable.waitForRender()`.\n\nWhile investigating the recent
test failure on CI I found out that for\nmaps case we can simplify the
logic with few facts:\n- before start waiting for render to complete, we
need to wait for main\ncontainer `#maps-plugin` to be in DOM. It takes
2-3 seconds.\n- there is always a single div block with
`data-render-complete`\nattribute, and there is a comment in source code
stating `See if the\n\"data-render-complete\" attribute is \"true\". If
so we're done!` which\nmeans we can simply wait
for\n`div[data-dom-id][data-render-complete=\"true\"]`\n\n\n6de2ef0e6d/x-pack/platform/plugins/shared/maps/public/connected_components/map_container/map_container.tsx (L103-L116)\n\n`renderable.waitForRender()`
is a good waiter, but probably for\ndashboard with multiple
panels.","sha":"08400b1f4225bcc20b3c28262432ba269e117750"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Dzmitry Lemechko <dzmitry.lemechko@elastic.co>

packages/kbn-scout/src/playwright/page_objects/maps_page.ts

@@ -9,10 +9,21 @@
 
 import { ScoutPage } from '..';
 
+const DEFAULT_MAP_LOADING_TIMEOUT = 10_000;
+
 export class MapsPage {
   constructor(private readonly page: ScoutPage) {}
 
   async gotoNewMap() {
-    await this.page.gotoApp('maps/map');
+    return this.page.gotoApp('maps/map');
+  }
+
+  async waitForRenderComplete() {
+    // first wait for the top level container to be present
+    await this.page.locator('div#maps-plugin').waitFor({ timeout: DEFAULT_MAP_LOADING_TIMEOUT });
+    // then wait for the map to be fully rendered
+    return this.page
+      .locator('div[data-dom-id][data-render-complete="true"]')
+      .waitFor({ timeout: DEFAULT_MAP_LOADING_TIMEOUT });
   }
 }

x-pack/platform/plugins/shared/maps/ui_tests/tests/full_screen_mode.spec.ts

@@ -22,7 +22,7 @@ test.describe(
     test.beforeEach(async ({ browserAuth, pageObjects }) => {
       await browserAuth.loginAsViewer();
       await pageObjects.maps.gotoNewMap();
-      await pageObjects.renderable.waitForRender();
+      await pageObjects.maps.waitForRenderComplete();
     });
 
     test('Full screen mode', async ({ page }) => {