remove @kbn/presentation-containers from synthetics page load bundle (#…

…189533)

#189128 increases
@kbn/presentation-containers size. This causes synthetics page load
bundle to exceed the bundle size limit. Synthetics page load should not
include @kbn/presentation-containers. This PR resolves the problem by
putting @kbn/presentation-containers load behind an async import

Note for reviewers, put compatibility check into its own file to avoid
importing entire @kbn/presentation-containers
into async bundle. Tree shaking is enable by putting the import in a
seperate file - see
#189206 (comment) for
more details

x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/ui_actions/compatibility_check.ts

@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { apiIsPresentationContainer, PresentationContainer } from '@kbn/presentation-containers';
+import { EmbeddableApiContext } from '@kbn/presentation-publishing';
+
+export const compatibilityCheck = (
+  api: EmbeddableApiContext['embeddable']
+): api is PresentationContainer => {
+  return apiIsPresentationContainer(api);
+};

x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/ui_actions/create_overview_panel_action.tsx

@@ -5,7 +5,6 @@
  * 2.0.
  */
 import { i18n } from '@kbn/i18n';
-import { apiIsPresentationContainer } from '@kbn/presentation-containers';
 import {
   IncompatibleActionError,
   type UiActionsActionDefinition,
@@ -34,10 +33,12 @@ export function createStatusOverviewPanelAction(): UiActionsActionDefinition<Emb
     order: 30,
     getIconType: () => 'online',
     isCompatible: async ({ embeddable }) => {
-      return apiIsPresentationContainer(embeddable);
+      const { compatibilityCheck } = await import('./compatibility_check');
+      return compatibilityCheck(embeddable);
     },
     execute: async ({ embeddable }) => {
-      if (!apiIsPresentationContainer(embeddable)) throw new IncompatibleActionError();
+      const { compatibilityCheck } = await import('./compatibility_check');
+      if (!compatibilityCheck(embeddable)) throw new IncompatibleActionError();
       try {
         embeddable.addNewPanel({
           panelType: SYNTHETICS_OVERVIEW_EMBEDDABLE,