[Embeddables Rebuild] Publish Phase Events

packages/presentation/presentation_publishing/interfaces/publishes_phase_events.ts

@@ -21,11 +21,11 @@ export interface PhaseEvent {
 }
 
 export interface PublishesPhaseEvents {
-  onPhaseChange: PublishingSubject<PhaseEvent | undefined>;
+  phase$: PublishingSubject<PhaseEvent | undefined>;
 }
 
 export const apiPublishesPhaseEvents = (
   unknownApi: null | unknown
 ): unknownApi is PublishesPhaseEvents => {
-  return Boolean(unknownApi && (unknownApi as PublishesPhaseEvents)?.onPhaseChange !== undefined);
+  return Boolean(unknownApi && (unknownApi as PublishesPhaseEvents)?.phase$ !== undefined);
 };

src/plugins/dashboard/public/dashboard_container/component/grid/dashboard_grid_item.tsx

@@ -103,6 +103,7 @@ export const Item = React.forwardRef<HTMLDivElement, Props>(
         showBorder: useMargins,
         showNotifications: true,
         showShadow: false,
+        onPanelStatusChange,
       };
 
       // render React embeddable
@@ -123,7 +124,6 @@ export const Item = React.forwardRef<HTMLDivElement, Props>(
         <EmbeddablePanel
           key={type}
           index={index}
-          onPanelStatusChange={onPanelStatusChange}
           embeddable={() => container.untilEmbeddableLoaded(id)}
           {...panelProps}
         />

src/plugins/embeddable/public/lib/embeddables/compatibility/legacy_embeddable_to_api.ts

@@ -103,7 +103,7 @@ export const legacyEmbeddableToApi = (
   /**
    * Performance tracking
    */
-  const onPhaseChange = new BehaviorSubject<PhaseEvent | undefined>(undefined);
+  const phase$ = new BehaviorSubject<PhaseEvent | undefined>(undefined);
 
   let loadingStartTime = 0;
   subscriptions.add(
@@ -132,7 +132,7 @@ export const legacyEmbeddableToApi = (
         })
       )
       .subscribe((statusOutput) => {
-        onPhaseChange.next(statusOutput);
+        phase$.next(statusOutput);
       })
   );
 
@@ -252,7 +252,7 @@ export const legacyEmbeddableToApi = (
       dataLoading,
       blockingError,
 
-      onPhaseChange,
+      phase$,
 
       onEdit,
       isEditingEnabled,

src/plugins/embeddable/public/lib/embeddables/embeddable.test.tsx

@@ -118,7 +118,7 @@ test('updating output state retains instance information', async () => {
 test('fires phase events when output changes', async () => {
   const phaseEventTest = new PhaseTestEmbeddable();
   let phaseEventCount = 0;
-  phaseEventTest.onPhaseChange.subscribe((event) => {
+  phaseEventTest.phase$.subscribe((event) => {
     if (event) {
       phaseEventCount++;
     }

src/plugins/embeddable/public/lib/embeddables/embeddable.tsx

@@ -127,7 +127,7 @@ export abstract class Embeddable<
       dataLoading: this.dataLoading,
       filters$: this.filters$,
       blockingError: this.blockingError,
-      onPhaseChange: this.onPhaseChange,
+      phase$: this.phase$,
       setPanelTitle: this.setPanelTitle,
       linkToLibrary: this.linkToLibrary,
       hidePanelTitle: this.hidePanelTitle,
@@ -168,7 +168,7 @@ export abstract class Embeddable<
   public panelTitle: LegacyEmbeddableAPI['panelTitle'];
   public dataLoading: LegacyEmbeddableAPI['dataLoading'];
   public filters$: LegacyEmbeddableAPI['filters$'];
-  public onPhaseChange: LegacyEmbeddableAPI['onPhaseChange'];
+  public phase$: LegacyEmbeddableAPI['phase$'];
   public linkToLibrary: LegacyEmbeddableAPI['linkToLibrary'];
   public blockingError: LegacyEmbeddableAPI['blockingError'];
   public setPanelTitle: LegacyEmbeddableAPI['setPanelTitle'];

src/plugins/embeddable/public/react_embeddable_system/react_embeddable_renderer.test.tsx

@@ -7,44 +7,44 @@
  */
 import { getMockPresentationContainer } from '@kbn/presentation-containers/mocks';
 import { setStubKibanaServices as setupPresentationPanelServices } from '@kbn/presentation-panel-plugin/public/mocks';
-import { render, waitFor, screen } from '@testing-library/react';
+import { render, waitFor, screen, fireEvent } from '@testing-library/react';
 
 import React from 'react';
 import { BehaviorSubject } from 'rxjs';
 import { registerReactEmbeddableFactory } from './react_embeddable_registry';
 import { ReactEmbeddableRenderer } from './react_embeddable_renderer';
 import { ReactEmbeddableFactory } from './types';
 
-describe('react embeddable renderer', () => {
-  const testEmbeddableFactory: ReactEmbeddableFactory<{ name: string; bork: string }> = {
-    type: 'test',
-    deserializeState: jest.fn().mockImplementation((state) => state.rawState),
-    buildEmbeddable: async (state, registerApi) => {
-      const api = registerApi(
-        {
-          serializeState: () => ({
-            rawState: {
-              name: state.name,
-              bork: state.bork,
-            },
-          }),
-        },
-        {
-          name: [new BehaviorSubject<string>(state.name), () => {}],
-          bork: [new BehaviorSubject<string>(state.bork), () => {}],
-        }
-      );
-      return {
-        Component: () => (
-          <div data-test-subj="superTestEmbeddable">
-            SUPER TEST COMPONENT, name: {state.name} bork: {state.bork}
-          </div>
-        ),
-        api,
-      };
-    },
-  };
+const testEmbeddableFactory: ReactEmbeddableFactory<{ name: string; bork: string }> = {
+  type: 'test',
+  deserializeState: jest.fn().mockImplementation((state) => state.rawState),
+  buildEmbeddable: async (state, registerApi) => {
+    const api = registerApi(
+      {
+        serializeState: () => ({
+          rawState: {
+            name: state.name,
+            bork: state.bork,
+          },
+        }),
+      },
+      {
+        name: [new BehaviorSubject<string>(state.name), () => {}],
+        bork: [new BehaviorSubject<string>(state.bork), () => {}],
+      }
+    );
+    return {
+      Component: () => (
+        <div data-test-subj="superTestEmbeddable">
+          SUPER TEST COMPONENT, name: {state.name} bork: {state.bork}
+        </div>
+      ),
+      api,
+    };
+  },
+};
 
+describe('react embeddable renderer', () => {
   const getTestEmbeddableFactory = async () => {
     return testEmbeddableFactory;
   };
@@ -185,6 +185,7 @@ describe('react embeddable renderer', () => {
         serializeState: expect.any(Function),
         resetUnsavedChanges: expect.any(Function),
         snapshotRuntimeState: expect.any(Function),
+        phase$: expect.any(Object),
       })
     );
   });
@@ -209,3 +210,104 @@ describe('react embeddable renderer', () => {
     );
   });
 });
+
+describe('reactEmbeddable phase events', () => {
+  it('publishes rendered phase immediately when dataLoading is not defined', async () => {
+    const immediateLoadEmbeddableFactory: ReactEmbeddableFactory<{ name: string; bork: string }> = {
+      ...testEmbeddableFactory,
+      type: 'immediateLoad',
+    };
+    registerReactEmbeddableFactory('immediateLoad', () =>
+      Promise.resolve(immediateLoadEmbeddableFactory)
+    );
+    setupPresentationPanelServices();
+
+    const renderedEvent = jest.fn();
+    render(
+      <ReactEmbeddableRenderer
+        type={'test'}
+        maybeId={'12345'}
+        onApiAvailable={(api) => {
+          api.phase$.subscribe((phase) => {
+            if (phase?.status === 'rendered') {
+              renderedEvent();
+            }
+          });
+        }}
+        getParentApi={() => ({
+          getSerializedStateForChild: () => ({
+            rawState: { name: 'Kuni Garu' },
+          }),
+        })}
+      />
+    );
+    await waitFor(() => expect(renderedEvent).toHaveBeenCalled());
+  });
+
+  it('publishes rendered phase event when dataLoading is complete', async () => {
+    const dataLoadingEmbeddableFactory: ReactEmbeddableFactory<{ name: string; bork: string }> = {
+      ...testEmbeddableFactory,
+      type: 'loadClicker',
+      buildEmbeddable: async (state, registerApi) => {
+        const dataLoading = new BehaviorSubject<boolean | undefined>(true);
+        const api = registerApi(
+          {
+            serializeState: () => ({
+              rawState: {
+                name: state.name,
+                bork: state.bork,
+              },
+            }),
+            dataLoading,
+          },
+          {
+            name: [new BehaviorSubject<string>(state.name), () => {}],
+            bork: [new BehaviorSubject<string>(state.bork), () => {}],
+          }
+        );
+        return {
+          Component: () => (
+            <>
+              <div data-test-subj="superTestEmbeddable">
+                SUPER TEST COMPONENT, name: {state.name} bork: {state.bork}
+              </div>
+              <button data-test-subj="clickToStopLoading" onClick={() => dataLoading.next(false)}>
+                Done loading
+              </button>
+            </>
+          ),
+          api,
+        };
+      },
+    };
+    registerReactEmbeddableFactory('loadClicker', () =>
+      Promise.resolve(dataLoadingEmbeddableFactory)
+    );
+    setupPresentationPanelServices();
+
+    const phaseFn = jest.fn();
+    render(
+      <ReactEmbeddableRenderer
+        type={'loadClicker'}
+        maybeId={'12345'}
+        onApiAvailable={(api) => {
+          api.phase$.subscribe((phase) => {
+            phaseFn(phase);
+          });
+        }}
+        getParentApi={() => ({
+          getSerializedStateForChild: () => ({
+            rawState: { name: 'Kuni Garu' },
+          }),
+        })}
+      />
+    );
+    await waitFor(() => {
+      expect(phaseFn).toHaveBeenCalledWith(expect.objectContaining({ status: 'loading' }));
+    });
+    await fireEvent.click(screen.getByTestId('clickToStopLoading'));
+    await waitFor(() => {
+      expect(phaseFn).toHaveBeenCalledWith(expect.objectContaining({ status: 'rendered' }));
+    });
+  });
+});