clean up editor

Signed-off-by: Kawika Avilla <kavilla414@gmail.com>

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

@@ -13,19 +13,13 @@ import { useSavedDashboardInstance } from '../utils/use/use_saved_dashboard_inst
 import { DashboardServices } from '../../types';
 import { useDashboardAppAndGlobalState } from '../utils/use/use_dashboard_app_state';
 import { useEditorUpdates } from '../utils/use/use_editor_updates';
-import {
-  setBreadcrumbsForExistingDashboard,
-  setBreadcrumbsForNewDashboard,
-} from '../utils/breadcrumbs';
 
 export const DashboardEditor = () => {
   const { id: dashboardIdFromUrl } = useParams<{ id: string }>();
   const { services } = useOpenSearchDashboards<DashboardServices>();
   const { chrome } = services;
   const isChromeVisible = useChromeVisibility(chrome);
   const [eventEmitter] = useState(new EventEmitter());
-  const dashboardDom = document.getElementById('dashboardViewport');
-  const [isEmbeddableRendered, setIsEmbeddableRendered] = useState(false);
 
   const { savedDashboard: savedDashboardInstance, dashboard } = useSavedDashboardInstance(
     services,
@@ -41,52 +35,15 @@ export const DashboardEditor = () => {
     dashboard
   );
 
-  const { currentAppState } = useEditorUpdates(
+  const { isEmbeddableRendered, currentAppState } = useEditorUpdates(
     eventEmitter,
+    services,
     dashboard,
     savedDashboardInstance,
     currentContainer,
     appStateContainer
   );
 
-  useEffect(() => {
-    if (currentAppState && dashboard) {
-      if (savedDashboardInstance?.id) {
-        chrome.setBreadcrumbs(
-          setBreadcrumbsForExistingDashboard(
-            savedDashboardInstance.title,
-            currentAppState.viewMode,
-            dashboard.isDirty
-          )
-        );
-        chrome.docTitle.change(savedDashboardInstance.title);
-      } else {
-        chrome.setBreadcrumbs(
-          setBreadcrumbsForNewDashboard(currentAppState.viewMode, dashboard.isDirty)
-        );
-      }
-    }
-  }, [savedDashboardInstance, chrome, currentAppState, dashboard]);
-
-  useEffect(() => {
-    if (!currentContainer || !dashboardDom) {
-      return;
-    }
-    currentContainer.render(dashboardDom);
-    setIsEmbeddableRendered(true);
-
-    return () => {
-      setIsEmbeddableRendered(false);
-    };
-  }, [currentContainer, dashboardDom]);
-
-  useEffect(() => {
-    // clean up all registered listeners if any is left
-    return () => {
-      eventEmitter.removeAllListeners();
-    };
-  }, [eventEmitter]);
-
   return (
     <div>
       <div>

src/plugins/dashboard/public/application/utils/use/use_editor_updates.ts

@@ -5,25 +5,30 @@
 
 import EventEmitter from 'events';
 import { useEffect, useState } from 'react';
-import { DashboardAppState, DashboardAppStateContainer } from '../../../types';
+import { DashboardAppState, DashboardAppStateContainer, DashboardServices } from '../../../types';
 import { DashboardContainer } from '../../embeddable';
 import { Dashboard } from '../../../dashboard';
+import { SavedObjectDashboard } from '../../../saved_dashboards';
+import { setBreadcrumbsForExistingDashboard, setBreadcrumbsForNewDashboard } from '../breadcrumbs';
 
 export const useEditorUpdates = (
   eventEmitter: EventEmitter,
+  services: DashboardServices,
   dashboard?: Dashboard,
-  dashboardInstance?: any,
+  savedDashboardInstance?: SavedObjectDashboard,
   dashboardContainer?: DashboardContainer,
   appState?: DashboardAppStateContainer
 ) => {
+  const dashboardDom = document.getElementById('dashboardViewport');
   const [currentAppState, setCurrentAppState] = useState<DashboardAppState>();
+  const [isEmbeddableRendered, setIsEmbeddableRendered] = useState(false);
   // We only mark dirty when there is changes in the panels, query, and filters
   // We do not mark dirty for embed mode, view mode, full screen and etc
   // The specific behaviors need to check the functional tests and previous dashboard
   // const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
 
   useEffect(() => {
-    if (!appState || !dashboardInstance || !dashboard) {
+    if (!appState || !savedDashboardInstance || !dashboard) {
       return;
     }
 
@@ -37,7 +42,46 @@ export const useEditorUpdates = (
     return () => {
       unsubscribeStateUpdates();
     };
-  }, [appState, eventEmitter, dashboard, dashboardInstance]);
+  }, [appState, eventEmitter, dashboard, savedDashboardInstance]);
 
-  return { currentAppState };
+  useEffect(() => {
+    const { chrome } = services;
+    if (currentAppState && dashboard) {
+      if (savedDashboardInstance?.id) {
+        chrome.setBreadcrumbs(
+          setBreadcrumbsForExistingDashboard(
+            savedDashboardInstance.title,
+            currentAppState.viewMode,
+            dashboard.isDirty
+          )
+        );
+        chrome.docTitle.change(savedDashboardInstance.title);
+      } else {
+        chrome.setBreadcrumbs(
+          setBreadcrumbsForNewDashboard(currentAppState.viewMode, dashboard.isDirty)
+        );
+      }
+    }
+  }, [savedDashboardInstance, services, currentAppState, dashboard]);
+
+  useEffect(() => {
+    if (!dashboardContainer || !dashboardDom) {
+      return;
+    }
+    dashboardContainer.render(dashboardDom);
+    setIsEmbeddableRendered(true);
+
+    return () => {
+      setIsEmbeddableRendered(false);
+    };
+  }, [dashboardContainer, dashboardDom]);
+
+  useEffect(() => {
+    // clean up all registered listeners if any is left
+    return () => {
+      eventEmitter.removeAllListeners();
+    };
+  }, [eventEmitter]);
+
+  return { currentAppState, isEmbeddableRendered };
 };