synchronously register embeddables and actions to fix race condition causing flaky add panel test

packages/kbn-optimizer/limits.yml

@@ -9,7 +9,7 @@ pageLoadAssetSize:
   aiops: 15227
   alerting: 22371
   alertingVTwo: 76778
-  apm: 27979
+  apm: 28027
   apmSourcesAccess: 2278
   automaticImport: 18629
   banners: 4006

src/platform/packages/shared/kbn-scout/src/playwright/page_objects/dashboard_app.ts

@@ -504,8 +504,19 @@ export class DashboardApp {
     );
   }
 
-  async getAddPanelFlyoutPanelTypesCount(): Promise<number> {
-    return this.panelSelectionFlyout.locator('[data-test-subj*="create-action-"]').count();
+  async getAddPanelFlyoutActions(): Promise<string[]> {
+    const addPanelActions = await this.panelSelectionFlyout
+      .locator('[data-test-subj*="create-action-"]')
+      .all();
+
+    return await Promise.all(
+      addPanelActions.map(async (action) => {
+        const testSubj = await action.getAttribute('data-test-subj');
+        // remove prefix so strings like 'create-action-Links' become 'Links'
+        const match = testSubj?.match(/create-action-(.*)/);
+        return match?.[1] ?? '';
+      })
+    );
   }
 
   /**

src/platform/plugins/private/links/public/mocks.ts

@@ -11,8 +11,6 @@ import { coreMock } from '@kbn/core/public/mocks';
 import { dashboardPluginMock } from '@kbn/dashboard-plugin/public/mocks';
 import { embeddablePluginMock } from '@kbn/embeddable-plugin/public/mocks';
 import { contentManagementMock } from '@kbn/content-management-plugin/public/mocks';
-import { presentationUtilPluginMock } from '@kbn/presentation-util-plugin/public/mocks';
-import { uiActionsPluginMock } from '@kbn/ui-actions-plugin/public/mocks';
 import { BehaviorSubject } from 'rxjs';
 import { getMockPresentationContainer } from '@kbn/presentation-publishing/interfaces/containers/mocks';
 import type { AggregateQuery, Filter, Query, TimeRange } from '@kbn/es-query';
@@ -40,8 +38,6 @@ export const setStubKibanaServices = () => {
     dashboard: dashboardPluginMock.createStartContract(),
     embeddable: embeddablePluginMock.createStartContract(),
     contentManagement: contentManagementMock.createStartContract(),
-    presentationUtil: presentationUtilPluginMock.createStartContract(),
-    uiActions: uiActionsPluginMock.createStartContract(),
   });
 };
 

src/platform/plugins/private/links/public/plugin.ts

@@ -15,11 +15,11 @@ import type {
 import type { CoreSetup, CoreStart, Plugin } from '@kbn/core/public';
 import type { DashboardStart } from '@kbn/dashboard-plugin/public';
 import type { EmbeddableSetup, EmbeddableStart } from '@kbn/embeddable-plugin/public';
-import type { PresentationUtilPluginStart } from '@kbn/presentation-util-plugin/public';
+import type { PresentationUtilPluginSetup } from '@kbn/presentation-util-plugin/public';
 import type { UsageCollectionStart } from '@kbn/usage-collection-plugin/public';
 import type { VisualizationsSetup } from '@kbn/visualizations-plugin/public';
 
-import type { UiActionsPublicStart } from '@kbn/ui-actions-plugin/public/plugin';
+import type { UiActionsPublicSetup } from '@kbn/ui-actions-plugin/public/plugin';
 import { ADD_PANEL_TRIGGER } from '@kbn/ui-actions-plugin/common/trigger_ids';
 import type { LinksEmbeddableState } from '../common';
 import {
@@ -39,14 +39,14 @@ export interface LinksSetupDependencies {
   embeddable: EmbeddableSetup;
   visualizations: VisualizationsSetup;
   contentManagement: ContentManagementPublicSetup;
+  presentationUtil: PresentationUtilPluginSetup;
+  uiActions: UiActionsPublicSetup;
 }
 
 export interface LinksStartDependencies {
   embeddable: EmbeddableStart;
   dashboard: DashboardStart;
-  presentationUtil: PresentationUtilPluginStart;
   contentManagement: ContentManagementPublicStart;
-  uiActions: UiActionsPublicStart;
   usageCollection?: UsageCollectionStart;
 }
 
@@ -56,93 +56,85 @@ export class LinksPlugin
   constructor() {}
 
   public setup(core: CoreSetup<LinksStartDependencies>, plugins: LinksSetupDependencies) {
-    core.getStartServices().then(([_, deps]) => {
-      plugins.contentManagement.registry.register({
-        id: CONTENT_ID,
-        version: {
-          latest: LATEST_VERSION,
-        },
-        name: APP_NAME,
-      });
-
-      plugins.embeddable.registerAddFromLibraryType({
-        onAdd: async (container, savedObject) => {
-          container.addNewPanel<LinksEmbeddableState>(
-            {
-              panelType: LINKS_EMBEDDABLE_TYPE,
-              serializedState: {
-                ref_id: savedObject.id,
-              },
+    plugins.contentManagement.registry.register({
+      id: CONTENT_ID,
+      version: {
+        latest: LATEST_VERSION,
+      },
+      name: APP_NAME,
+    });
+
+    plugins.embeddable.registerAddFromLibraryType({
+      onAdd: async (container, savedObject) => {
+        container.addNewPanel<LinksEmbeddableState>(
+          {
+            panelType: LINKS_EMBEDDABLE_TYPE,
+            serializedState: {
+              ref_id: savedObject.id,
             },
-            {
-              displaySuccessMessage: true,
+          },
+          {
+            displaySuccessMessage: true,
+          }
+        );
+      },
+      savedObjectType: LINKS_SAVED_OBJECT_TYPE,
+      savedObjectName: APP_NAME,
+      getIconForSavedObject: () => APP_ICON,
+    });
+
+    plugins.embeddable.registerEmbeddablePublicDefinition(LINKS_EMBEDDABLE_TYPE, async () => {
+      const { getLinksEmbeddableFactory } = await import('./embeddable/links_embeddable');
+      return getLinksEmbeddableFactory();
+    });
+
+    plugins.embeddable.registerLegacyURLTransform(LINKS_EMBEDDABLE_TYPE, async () => {
+      const { transformOut } = await import('../common/embeddable/transforms/transform_out');
+      return transformOut;
+    });
+
+    plugins.visualizations.registerAlias({
+      disableCreate: true, // do not allow creation through visualization listing page
+      name: CONTENT_ID,
+      title: APP_NAME,
+      icon: APP_ICON,
+      description: i18n.translate('links.description', {
+        defaultMessage: 'Use links to navigate to commonly used dashboards and websites.',
+      }),
+      stage: 'production',
+      appExtensions: {
+        visualizations: {
+          docTypes: [CONTENT_ID],
+          searchFields: ['title^3'],
+          client: getLinksClient,
+          toListItem(
+            linkItem: Omit<LinksCrudTypes['Item'], 'attributes'> & {
+              attributes: { title: string; description?: string };
             }
-          );
-        },
-        savedObjectType: LINKS_SAVED_OBJECT_TYPE,
-        savedObjectName: APP_NAME,
-        getIconForSavedObject: () => APP_ICON,
-      });
-
-      plugins.embeddable.registerEmbeddablePublicDefinition(LINKS_EMBEDDABLE_TYPE, async () => {
-        const { getLinksEmbeddableFactory } = await import('./embeddable/links_embeddable');
-        return getLinksEmbeddableFactory();
-      });
-
-      plugins.embeddable.registerLegacyURLTransform(LINKS_EMBEDDABLE_TYPE, async () => {
-        const { transformOut } = await import('../common/embeddable/transforms/transform_out');
-        return transformOut;
-      });
-
-      plugins.visualizations.registerAlias({
-        disableCreate: true, // do not allow creation through visualization listing page
-        name: CONTENT_ID,
-        title: APP_NAME,
-        icon: APP_ICON,
-        description: i18n.translate('links.description', {
-          defaultMessage: 'Use links to navigate to commonly used dashboards and websites.',
-        }),
-        stage: 'production',
-        appExtensions: {
-          visualizations: {
-            docTypes: [CONTENT_ID],
-            searchFields: ['title^3'],
-            client: getLinksClient,
-            toListItem(
-              linkItem: Omit<LinksCrudTypes['Item'], 'attributes'> & {
-                attributes: { title: string; description?: string };
-              }
-            ) {
-              const { id, type, updatedAt, attributes } = linkItem;
-              const { title, description } = attributes;
-
-              return {
-                id,
-                title,
-                editor: {
-                  onEdit: async (refId: string) => {
-                    const { onVisualizationsEdit } = await import(
-                      './editor/on_visualizations_edit'
-                    );
-                    onVisualizationsEdit(refId);
-                  },
+          ) {
+            const { id, type, updatedAt, attributes } = linkItem;
+            const { title, description } = attributes;
+
+            return {
+              id,
+              title,
+              editor: {
+                onEdit: async (refId: string) => {
+                  const { onVisualizationsEdit } = await import('./editor/on_visualizations_edit');
+                  onVisualizationsEdit(refId);
                 },
-                description,
-                updatedAt,
-                icon: APP_ICON,
-                typeTitle: APP_NAME,
-                stage: 'production',
-                savedObjectType: type,
-              };
-            },
+              },
+              description,
+              updatedAt,
+              icon: APP_ICON,
+              typeTitle: APP_NAME,
+              stage: 'production',
+              savedObjectType: type,
+            };
           },
         },
-      });
+      },
     });
-  }
-
-  public start(core: CoreStart, plugins: LinksStartDependencies) {
-    setKibanaServices(core, plugins);
 
     plugins.uiActions.addTriggerActionAsync(
       ADD_PANEL_TRIGGER,
@@ -161,6 +153,10 @@ export class LinksPlugin
         return { placementSettings };
       }
     );
+  }
+
+  public start(core: CoreStart, plugins: LinksStartDependencies) {
+    setKibanaServices(core, plugins);
 
     return {};
   }

src/platform/plugins/private/links/public/services/kibana_services.ts

@@ -13,18 +13,13 @@ import type { ContentManagementPublicStart } from '@kbn/content-management-plugi
 import type { CoreStart } from '@kbn/core/public';
 import type { DashboardStart } from '@kbn/dashboard-plugin/public';
 import type { EmbeddableStart } from '@kbn/embeddable-plugin/public';
-import type { PresentationUtilPluginStart } from '@kbn/presentation-util-plugin/public';
-
-import type { UiActionsPublicStart } from '@kbn/ui-actions-plugin/public/plugin';
 import { CONTENT_ID } from '../../common';
 import type { LinksStartDependencies } from '../plugin';
 
 export let coreServices: CoreStart;
 export let dashboardServices: DashboardStart;
 export let embeddableService: EmbeddableStart;
-export let presentationUtil: PresentationUtilPluginStart;
 export let contentManagement: ContentManagementPublicStart;
-export let uiActions: UiActionsPublicStart;
 export let trackUiMetric: (
   type: string,
   eventNames: string | string[],
@@ -49,9 +44,7 @@ export const setKibanaServices = (kibanaCore: CoreStart, deps: LinksStartDepende
   coreServices = kibanaCore;
   dashboardServices = deps.dashboard;
   embeddableService = deps.embeddable;
-  presentationUtil = deps.presentationUtil;
   contentManagement = deps.contentManagement;
-  uiActions = deps.uiActions;
   if (deps.usageCollection)
     trackUiMetric = deps.usageCollection.reportUiCounter.bind(deps.usageCollection, CONTENT_ID);
 

src/platform/plugins/shared/dashboard/test/scout/ui/parallel_tests/dashboard_add_panel_flyout.spec.ts

@@ -13,14 +13,28 @@ import { expect } from '@kbn/scout/ui';
 import { DASHBOARD_DEFAULT_INDEX_TITLE, DASHBOARD_SAVED_SEARCH_ARCHIVE } from '../constants';
 
 const getExpected = (config: ScoutTestConfig) => {
-  if (config.projectType === 'es' || config.projectType === 'security') {
+  if (config.projectType === 'es') {
     return {
       groups: [
         'visualizationsGroup',
         'controlsGroup',
         'annotation-and-navigationGroup',
+        'logs-aiopsGroup',
         'mlGroup',
+        'legacyGroup',
+      ],
+      count: 17,
+    };
+  }
+
+  if (config.projectType === 'security') {
+    return {
+      groups: [
+        'visualizationsGroup',
+        'controlsGroup',
+        'annotation-and-navigationGroup',
         'logs-aiopsGroup',
+        'mlGroup',
         'legacyGroup',
       ],
       count: 20,
@@ -32,8 +46,8 @@ const getExpected = (config: ScoutTestConfig) => {
       'visualizationsGroup',
       'controlsGroup',
       'annotation-and-navigationGroup',
-      'mlGroup',
       'logs-aiopsGroup',
+      'mlGroup',
       'observabilityGroup',
       'legacyGroup',
     ],
@@ -47,8 +61,7 @@ const getExpected = (config: ScoutTestConfig) => {
  * This test exists to ensures additions to menu
  * notify our team and can be reviewed by design.
  */
-// Failing: See https://github.com/elastic/kibana/issues/268101
-spaceTest.describe.skip(
+spaceTest.describe(
   'Dashboard add panel flyout',
   {
     tag: [
@@ -80,7 +93,7 @@ spaceTest.describe.skip(
       await scoutSpace.savedObjects.cleanStandardList();
     });
 
-    spaceTest('renders add panel flyout', async ({ pageObjects }) => {
+    spaceTest('renders add panel flyout', async ({ pageObjects, log }) => {
       await spaceTest.step('open new dashboard and add panel flyout', async () => {
         await pageObjects.dashboard.openNewDashboard();
         await pageObjects.dashboard.openAddPanelFlyout();
@@ -92,7 +105,9 @@ spaceTest.describe.skip(
       });
 
       await spaceTest.step('verify total panel count', async () => {
-        expect(await pageObjects.dashboard.getAddPanelFlyoutPanelTypesCount()).toBe(expectedCount);
+        const addPanelActions = await pageObjects.dashboard.getAddPanelFlyoutActions();
+        log.info(`Add panel actions: ${addPanelActions.join(',')}`);
+        expect(addPanelActions).toHaveLength(expectedCount);
       });
     });
   }

src/platform/plugins/shared/embeddable/public/plugin.tsx

@@ -33,6 +33,7 @@ import {
 } from './bwc/legacy_url_transform';
 import { registerDrilldown } from './drilldowns/registry';
 import { registerActions } from './ui_actions/register_actions';
+import { closeSetup } from './react_embeddable_system/react_embeddable_registry';
 
 export class EmbeddablePublicPlugin implements Plugin<EmbeddableSetup, EmbeddableStart> {
   private stateTransferService: EmbeddableStateTransfer = {} as EmbeddableStateTransfer;
@@ -53,6 +54,7 @@ export class EmbeddablePublicPlugin implements Plugin<EmbeddableSetup, Embeddabl
   }
 
   public start(core: CoreStart, deps: EmbeddableStartDependencies): EmbeddableStart {
+    closeSetup();
     this.appListSubscription = core.application.applications$.subscribe((appList) => {
       this.appList = appList;
     });