Render editor page with basic nav actions

Added dashboard embeddable container to render the dashboard editor page.

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

src/plugins/dashboard/public/application/components/dashboard_editor.tsx

@@ -6,42 +6,24 @@
 import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { EventEmitter } from 'events';
-import { EMPTY, Subscription, merge } from 'rxjs';
-import { catchError, distinctUntilChanged, map, mapTo, startWith, switchMap } from 'rxjs/operators';
-import deepEqual from 'fast-deep-equal';
 import { DashboardTopNav } from '../components/dashboard_top_nav';
 import { useChromeVisibility } from '../utils/use/use_chrome_visibility';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { useSavedDashboardInstance } from '../utils/use/use_saved_dashboard_instance';
 
-import { DashboardServices, SavedDashboardPanel } from '../../types';
-import {
-  DASHBOARD_CONTAINER_TYPE,
-  DashboardContainer,
-  DashboardContainerInput,
-  DashboardPanelState,
-} from '../embeddable';
-import {
-  ContainerOutput,
-  ErrorEmbeddable,
-  ViewMode,
-  isErrorEmbeddable,
-} from '../../embeddable_plugin';
-import { DashboardEmptyScreen, DashboardEmptyScreenProps } from '../dashboard_empty_screen';
-import { convertSavedDashboardPanelToPanelState } from '../lib/embeddable_saved_object_converters';
+import { DashboardServices } from '../../types';
 import { useDashboardAppState } from '../utils/use/use_dashboard_app_state';
+import { useDashboardContainer } from '../utils/use/use_dashboard_container';
+import { useEditorUpdates } from '../utils/use/use_editor_updates';
 
 export const DashboardEditor = () => {
   const { id: dashboardIdFromUrl } = useParams<{ id: string }>();
   const { services } = useOpenSearchDashboards<DashboardServices>();
-  const { embeddable, data, dashboardConfig, embeddableCapabilities, uiSettings, http } = services;
-  const { query: queryService } = data;
-  const { visualizeCapabilities, mapsCapabilities } = embeddableCapabilities;
-  const timefilter = queryService.timefilter.timefilter;
   const isChromeVisible = useChromeVisibility(services.chrome);
   const [eventEmitter] = useState(new EventEmitter());
+  const dashboardDom = document.getElementById('dashboardViewport');
 
-  const { savedDashboardInstance } = useSavedDashboardInstance(
+  const savedDashboardInstance = useSavedDashboardInstance(
     services,
     eventEmitter,
     isChromeVisible,
@@ -50,176 +32,50 @@ export const DashboardEditor = () => {
 
   const { appState } = useDashboardAppState(services, eventEmitter, savedDashboardInstance);
 
-  const appStateData = appState?.get();
-  if (!appStateData) {
-    return null;
-  }
-  // let dashboardContainer: DashboardContainer | undefined;
-  let inputSubscription: Subscription | undefined;
-  let outputSubscription: Subscription | undefined;
-
-  const [dashboardContainer, setDashboardContainer] = useState<DashboardContainer>({});
-  const dashboardDom = document.getElementById('dashboardViewport');
-  const dashboardFactory = embeddable.getEmbeddableFactory<
-    DashboardContainerInput,
-    ContainerOutput,
-    DashboardContainer
-  >(DASHBOARD_CONTAINER_TYPE);
-
-  const getShouldShowEditHelp = () => {
-    return (
-      !appStateData.panels.length &&
-      appStateData.viewMode === ViewMode.EDIT &&
-      !dashboardConfig.getHideWriteControls()
-    );
-  };
-
-  const getShouldShowViewHelp = () => {
-    return (
-      !appStateData.panels.length &&
-      appStateData.viewMode === ViewMode.VIEW &&
-      !dashboardConfig.getHideWriteControls()
-    );
-  };
-
-  const shouldShowUnauthorizedEmptyState = () => {
-    const readonlyMode =
-      !appStateData.panels.length &&
-      !getShouldShowEditHelp() &&
-      !getShouldShowViewHelp() &&
-      dashboardConfig.getHideWriteControls();
-    const userHasNoPermissions =
-      !appStateData.panels.length && !visualizeCapabilities.save && !mapsCapabilities.save;
-    return readonlyMode || userHasNoPermissions;
-  };
-
-  const getEmptyScreenProps = (
-    shouldShowEditHelp: boolean,
-    isEmptyInReadOnlyMode: boolean
-  ): DashboardEmptyScreenProps => {
-    const emptyScreenProps: DashboardEmptyScreenProps = {
-      onLinkClick: () => {}, // TODO
-      showLinkToVisualize: shouldShowEditHelp,
-      uiSettings,
-      http,
-    };
-    if (shouldShowEditHelp) {
-      emptyScreenProps.onVisualizeClick = () => {
-        alert('click'); // TODO
-      };
-    }
-    if (isEmptyInReadOnlyMode) {
-      emptyScreenProps.isReadonlyMode = true;
-    }
-    return emptyScreenProps;
-  };
+  const { dashboardContainer } = useDashboardContainer(
+    services,
+    isChromeVisible,
+    eventEmitter,
+    dashboardDom,
+    savedDashboardInstance,
+    appState
+  );
 
-  const getDashboardInput = () => {
-    const embeddablesMap: {
-      [key: string]: DashboardPanelState;
-    } = {};
-    appStateData.panels.forEach((panel: SavedDashboardPanel) => {
-      embeddablesMap[panel.panelIndex] = convertSavedDashboardPanelToPanelState(panel);
-    });
+  const { isEmbeddableRendered, currentAppState } = useEditorUpdates(
+    services,
+    eventEmitter,
+    savedDashboardInstance,
+    dashboardContainer,
+    appState
+  );
 
-    const lastReloadRequestTime = 0;
-    return {
-      id: savedDashboardInstance.id || '',
-      filters: appStateData.filters,
-      hidePanelTitles: appStateData?.options.hidePanelTitles,
-      query: appStateData.query,
-      timeRange: {
-        ..._.cloneDeep(timefilter.getTime()),
-      },
-      refreshConfig: timefilter.getRefreshInterval(),
-      viewMode: appStateData.viewMode,
-      panels: embeddablesMap,
-      isFullScreenMode: appStateData?.fullScreenMode,
-      isEmbeddedExternally: false, // TODO
-      // isEmptyState: shouldShowEditHelp || shouldShowViewHelp || isEmptyInReadonlyMode,
-      isEmptyState: false, // TODO
-      useMargins: appStateData.options.useMargins,
-      lastReloadRequestTime, // TODO
-      title: appStateData.title,
-      description: appStateData.description,
-      expandedPanelId: appStateData.expandedPanelId,
-    };
-  };
   useEffect(() => {
-    if (dashboardFactory) {
-      dashboardFactory
-        .create(getDashboardInput())
-        .then((container: DashboardContainer | ErrorEmbeddable | undefined) => {
-          if (container && !isErrorEmbeddable(container)) {
-            // dashboardContainer = container;
-            setDashboardContainer(container);
-
-          }
-        });
-    }
-  }, [dashboardFactory, getDashboardInput]);
-
-  dashboardContainer.renderEmpty = () => {
-    const shouldShowEditHelp = getShouldShowEditHelp();
-    const shouldShowViewHelp = getShouldShowViewHelp();
-    const isEmptyInReadOnlyMode = shouldShowUnauthorizedEmptyState();
-    const isEmptyState =
-      shouldShowEditHelp || shouldShowViewHelp || isEmptyInReadOnlyMode;
-    return isEmptyState ? (
-      <DashboardEmptyScreen
-        {...getEmptyScreenProps(shouldShowEditHelp, isEmptyInReadOnlyMode)}
-      />
-    ) : null;
-  };
-
-  outputSubscription = merge(
-    // output of dashboard container itself
-    dashboardContainer.getOutput$(),
-    // plus output of dashboard container children,
-    // children may change, so make sure we subscribe/unsubscribe with switchMap
-    dashboardContainer.getOutput$().pipe(
-      map(() => dashboardContainer!.getChildIds()),
-      distinctUntilChanged(deepEqual),
-      switchMap((newChildIds: string[]) =>
-        merge(
-          ...newChildIds.map((childId) =>
-            dashboardContainer!
-              .getChild(childId)
-              .getOutput$()
-              .pipe(catchError(() => EMPTY))
-          )
-        )
-      )
-    )
-  )
-    .pipe(
-      mapTo(dashboardContainer),
-      startWith(dashboardContainer) // to trigger initial index pattern update
-      // updateIndexPatternsOperator //TODO
-    )
-    .subscribe();
-
-  inputSubscription = dashboardContainer.getInput$().subscribe((foo) => {
-    console.log(foo);
-  });
-
-  if (dashboardDom && dashboardContainer) {
-    console.log('dashboard container inside', dashboardContainer);
-    dashboardContainer.render(dashboardDom);
-  }
+    // clean up all registered listeners if any is left
+    return () => {
+      eventEmitter.removeAllListeners();
+    };
+  }, [eventEmitter]);
 
+  console.log('savedDashboardInstance', savedDashboardInstance);
+  console.log('appState', appState);
+  console.log('currentAppState', currentAppState);
+  console.log('isEmbeddableRendered', isEmbeddableRendered);
+  console.log('dashboardContainer', dashboardContainer);
 
   return (
     <div>
-      {savedDashboardInstance && appState && (
-        <DashboardTopNav
-          isChromeVisible={isChromeVisible}
-          savedDashboardInstance={savedDashboardInstance}
-          currentAppState={appStateData}
-          stateContainer={appState}
-          dashboardContainer={dashboardContainer}
-        />
-      )}
+      <div>
+        {savedDashboardInstance && appState && dashboardContainer && currentAppState && (
+          <DashboardTopNav
+            isChromeVisible={isChromeVisible}
+            savedDashboardInstance={savedDashboardInstance}
+            stateContainer={appState}
+            currentAppState={currentAppState}
+            isEmbeddableRendered={isEmbeddableRendered}
+            dashboardContainer={dashboardContainer}
+          />
+        )}
+      </div>
     </div>
   );
 };

src/plugins/dashboard/public/application/components/dashboard_top_nav.tsx

@@ -20,8 +20,9 @@ import { DashboardContainer } from '../embeddable';
 interface DashboardTopNavProps {
   isChromeVisible: boolean;
   savedDashboardInstance: any;
-  currentAppState: DashboardAppState;
   stateContainer: DashboardAppStateContainer;
+  currentAppState: DashboardAppState;
+  isEmbeddableRendered: boolean;
   dashboardContainer?: DashboardContainer;
 }
 
@@ -36,8 +37,9 @@ enum UrlParams {
 const TopNav = ({
   isChromeVisible,
   savedDashboardInstance,
-  currentAppState,
   stateContainer,
+  currentAppState,
+  isEmbeddableRendered,
   dashboardContainer,
 }: DashboardTopNavProps) => {
   const [filters, setFilters] = useState<Filter[]>([]);
@@ -66,22 +68,29 @@ const TopNav = ({
   }, [services, queryService]);
 
   useEffect(() => {
-    const navActions = getNavActions(
-      stateContainer,
-      savedDashboardInstance,
-      services,
-      dashboardContainer
-    );
-    setTopNavMenu(
-      getTopNavConfig(currentAppState?.viewMode, navActions, dashboardConfig.getHideWriteControls())
-    );
+    if (isEmbeddableRendered) {
+      const navActions = getNavActions(
+        stateContainer,
+        savedDashboardInstance,
+        services,
+        dashboardContainer
+      );
+      setTopNavMenu(
+        getTopNavConfig(
+          currentAppState?.viewMode,
+          navActions,
+          dashboardConfig.getHideWriteControls()
+        )
+      );
+    }
   }, [
     currentAppState,
     services,
     dashboardConfig,
     dashboardContainer,
     savedDashboardInstance,
     stateContainer,
+    isEmbeddableRendered,
   ]);
 
   useEffect(() => {
@@ -115,9 +124,9 @@ const TopNav = ({
     }*/
   }, []);
 
-  console.log('currentAppState', currentAppState);
-  console.log('state container get()', stateContainer.get());
-  console.log('dashboard container top nav', dashboardContainer);
+  // console.log('currentAppState', currentAppState);
+  // console.log('state container get()', stateContainer.get());
+  // console.log('dashboard container top nav', dashboardContainer);
   return isChromeVisible ? (
     <TopNavMenu
       appName={'dashboard'}