[dashboard] fixs controls cause double fetch

src/platform/plugins/shared/dashboard/public/dashboard_api/control_group_manager.ts

@@ -10,7 +10,7 @@
 import type { Reference } from '@kbn/content-management-utils';
 import type { ControlsGroupState } from '@kbn/controls-schemas';
 import type { ControlGroupApi } from '@kbn/controls-plugin/public';
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, first, skipWhile, switchMap } from 'rxjs';
 
 export const CONTROL_GROUP_EMBEDDABLE_ID = 'CONTROL_GROUP_EMBEDDABLE_ID';
 
@@ -20,6 +20,22 @@ export function initializeControlGroupManager(
 ) {
   const controlGroupApi$ = new BehaviorSubject<ControlGroupApi | undefined>(undefined);
 
+  async function untilControlsInitialized(): Promise<void> {
+    return new Promise((resolve) => {
+      controlGroupApi$
+        .pipe(
+          skipWhile((controlGroupApi) => !controlGroupApi),
+          switchMap(async (controlGroupApi) => {
+            await controlGroupApi?.untilInitialized();
+          }),
+          first()
+        )
+        .subscribe(() => {
+          resolve();
+        });
+    });
+  }
+
   return {
     api: {
       controlGroupApi$,
@@ -53,6 +69,7 @@ export function initializeControlGroupManager(
       },
       setControlGroupApi: (controlGroupApi: ControlGroupApi) =>
         controlGroupApi$.next(controlGroupApi),
+      untilControlsInitialized,
     },
   };
 }

src/platform/plugins/shared/dashboard/public/dashboard_api/get_dashboard_api.ts

@@ -224,6 +224,7 @@ export function getDashboardApi({
     dashboardContainerRef$,
     setDashboardContainerRef: (ref: HTMLElement | null) => dashboardContainerRef$.next(ref),
     serializeControls: () => controlGroupManager.internalApi.serializeControlGroup(),
+    untilControlsInitialized: controlGroupManager.internalApi.untilControlsInitialized,
   };
 
   const searchSessionManager = initializeSearchSessionManager(

src/platform/plugins/shared/dashboard/public/dashboard_api/types.ts

@@ -173,4 +173,5 @@ export interface DashboardInternalApi {
     controlGroupInput: ControlsGroupState | undefined;
     controlGroupReferences: Reference[];
   };
+  untilControlsInitialized: () => Promise<void>;
 }

src/platform/plugins/shared/dashboard/public/dashboard_renderer/viewport/dashboard_viewport.test.tsx

@@ -16,8 +16,16 @@ import { DashboardContext } from '../../dashboard_api/use_dashboard_api';
 import { DashboardInternalContext } from '../../dashboard_api/use_dashboard_internal_api';
 import { buildMockDashboardApi, getMockPanels } from '../../mocks';
 import { DashboardViewport } from './dashboard_viewport';
+import { BehaviorSubject, first, skipWhile } from 'rxjs';
+import type { DashboardInternalApi } from '../../dashboard_api/types';
 
-const createAndMountDashboardViewport = async () => {
+jest.mock('../grid', () => {
+  return {
+    DashboardGrid: () => <div data-test-subj="mockDashboardGrid" />,
+  };
+});
+
+const renderDashboardViewport = async (internalApiOverrides?: Partial<DashboardInternalApi>) => {
   const panels = getMockPanels();
   const { api, internalApi } = buildMockDashboardApi({
     overrides: {
@@ -27,7 +35,12 @@ const createAndMountDashboardViewport = async () => {
   const component = render(
     <EuiThemeProvider>
       <DashboardContext.Provider value={api}>
-        <DashboardInternalContext.Provider value={internalApi}>
+        <DashboardInternalContext.Provider
+          value={{
+            ...internalApi,
+            ...internalApiOverrides,
+          }}
+        >
           <DashboardViewport />
         </DashboardInternalContext.Provider>
       </DashboardContext.Provider>
@@ -36,19 +49,51 @@ const createAndMountDashboardViewport = async () => {
 
   // wait for first render
   await waitFor(() => {
-    expect(component.queryAllByTestId('dashboardPanel').length).toBe(Object.keys(panels).length);
+    component.getByTestId('dshDashboardViewport');
   });
 
   return { dashboardApi: api, internalApi, component };
 };
 
 describe('DashboardViewport', () => {
-  test('renders', async () => {
-    await createAndMountDashboardViewport();
+  test('should render DashboardGrid when dashboard has panels', async () => {
+    const { component } = await renderDashboardViewport();
+    await waitFor(() => {
+      component.getByTestId('mockDashboardGrid');
+    });
+  });
+
+  test('should not render DashboardGrid until controls are ready', async () => {
+    const controlsReadyMock$ = new BehaviorSubject(false);
+    const { component } = await renderDashboardViewport({
+      untilControlsInitialized: () => {
+        return new Promise((resolve) => {
+          controlsReadyMock$
+            .pipe(
+              skipWhile((controlsReady) => !controlsReady),
+              first()
+            )
+            .subscribe(() => {
+              resolve();
+            });
+        });
+      },
+    });
+
+    await waitFor(() => {
+      expect(component.queryByTestId('mockDashboardGrid')).toBeNull();
+    });
+
+    // simulate controls ready
+    controlsReadyMock$.next(true);
+
+    await waitFor(() => {
+      component.getByTestId('mockDashboardGrid');
+    });
   });
 
   test('renders print mode styles', async () => {
-    const { component, dashboardApi } = await createAndMountDashboardViewport();
+    const { component, dashboardApi } = await renderDashboardViewport();
     dashboardApi.setViewMode('print');
 
     await waitFor(() => {

src/platform/plugins/shared/dashboard/public/dashboard_renderer/viewport/dashboard_viewport.tsx

@@ -82,23 +82,18 @@ export const DashboardViewport = () => {
     };
   }, [controlGroupApi]);
 
-  // Bug in main where panels are loaded before control filters are ready
-  // Want to migrate to react embeddable controls with same behavior
-  // TODO - do not load panels until control filters are ready
-  /*
-  const [dashboardInitialized, setDashboardInitialized] = useState(false);
+  const [controlsReady, setControlsReady] = useState(false);
   useEffect(() => {
     let ignore = false;
-    dashboard.untilContainerInitialized().then(() => {
+    dashboardInternalApi.untilControlsInitialized().then(() => {
       if (!ignore) {
-        setDashboardInitialized(true);
+        setControlsReady(true);
       }
     });
     return () => {
       ignore = true;
     };
-  }, [dashboard]);
-  */
+  }, [dashboardInternalApi]);
 
   const styles = useMemoCss(dashboardViewportStyles);
 
@@ -142,7 +137,11 @@ export const DashboardViewport = () => {
         data-shared-items-count={visiblePanelCount}
         data-test-subj={'dshDashboardViewport'}
       >
-        {panelCount === 0 && sectionCount === 0 ? <DashboardEmptyScreen /> : <DashboardGrid />}
+        {panelCount === 0 && sectionCount === 0 ? (
+          <DashboardEmptyScreen />
+        ) : viewMode === 'print' || controlsReady ? (
+          <DashboardGrid />
+        ) : null}
       </div>
     </div>
   );