Add initialization dirty flag and fix full mode filter bar

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

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

@@ -58,19 +58,19 @@ export const DashboardEditor = () => {
   );
 
   useEffect(() => {
-    if (appState) {
+    if (appState && dashboard) {
       if (savedDashboardInstance?.id) {
         chrome.setBreadcrumbs(
           setBreadcrumbsForExistingDashboard(
             savedDashboardInstance.title,
             appState?.getState().viewMode,
-            appState?.getState().isDirty
+            dashboard.isDirty
           )
         );
         chrome.docTitle.change(savedDashboardInstance.title);
       } else {
         chrome.setBreadcrumbs(
-          setBreadcrumbsForNewDashboard(appState?.getState().viewMode, appState?.getState().isDirty)
+          setBreadcrumbsForNewDashboard(appState?.getState().viewMode, dashboard.isDirty)
         );
       }
     }
@@ -89,7 +89,9 @@ export const DashboardEditor = () => {
   console.log('appStateData', appState?.getState());
   console.log('currentAppState', currentAppState);
   console.log('isEmbeddableRendered', isEmbeddableRendered);
-  console.log('app state isDirty', appState?.getState().isDirty);
+  if (dashboard) {
+    console.log('isDirty', dashboard.isDirty);
+  }
   console.log('dashboardContainer', dashboardContainer);
 
   return (

src/plugins/dashboard/public/application/lib/get_app_state_defaults.ts

@@ -46,6 +46,5 @@ export function getAppStateDefaults(
     query: savedDashboard.getQuery(),
     filters: savedDashboard.getFilters(),
     viewMode: savedDashboard.id || hideWriteControls ? ViewMode.VIEW : ViewMode.EDIT,
-    isDirty: false,
   };
 }

src/plugins/dashboard/public/application/utils/get_nav_actions.tsx

@@ -114,8 +114,8 @@ export const getNavActions = (
           stateContainer.transitions.set('timeRestore', currentTimeRestore);
         }
 
-        // If the save was successfull, then set the app state isDirty back to false
-        stateContainer.transitions.set('isDirty', false);
+        // If the save was successfull, then set the dashboard isDirty back to false
+        dashboard.isDirty = false;
         return response;
       });
     };
@@ -283,7 +283,7 @@ export const getNavActions = (
         sharingData: {
           title: savedDashboard.title,
         },
-        isDirty: false, // TODO
+        isDirty: dashboard.isDirty,
         embedUrlParamExtensions: [
           {
             paramName: 'embed',
@@ -297,7 +297,7 @@ export const getNavActions = (
   function onChangeViewMode(newMode: ViewMode) {
     const isPageRefresh = newMode === appState.viewMode;
     const isLeavingEditMode = !isPageRefresh && newMode === ViewMode.VIEW;
-    const willLoseChanges = isLeavingEditMode && stateContainer.getState().isDirty === true;
+    const willLoseChanges = isLeavingEditMode && dashboard.isDirty === true;
 
     // If there are no changes, do not show the discard window
     if (!willLoseChanges) {
@@ -340,7 +340,7 @@ export const getNavActions = (
       }
 
       // Set the isDirty flag back to false since we discard all the changes
-      stateContainer.transitions.set('isDirty', false);
+      dashboard.isDirty = false;
     }
 
     overlays

src/plugins/dashboard/public/application/utils/use/use_dashboard_container.tsx

@@ -364,7 +364,6 @@ const handleDashboardContainerChanges = (
   dashboard: Dashboard
 ) => {
   let dirty = false;
-  let dirtyBecasuseOfInitialization = false;
   const appStateData = appState.getState();
   const savedDashboardPanelMap: { [key: string]: SavedDashboardPanel } = {};
   const { opensearchDashboardsVersion } = dashboardServices;
@@ -397,25 +396,11 @@ const handleDashboardContainerChanges = (
       // Do not need to care about initial migration here because the version update
       // is already handled in migrateAppState() when we create state container
       dirty = true;
-
-      const oldVersionVis =
-        savedDashboardPanelMap[panelState.explicitInput.id].embeddableConfig?.vis;
-      const newVersionVis =
-        convertedPanelStateMap[panelState.explicitInput.id].embeddableConfig?.vis;
-
-      // Some visualizations' embeddable config will get initialized after render is completed
-      // Ex. update embeddable: {} to embeddable: { vis: null }
-      // We add this flag to make sure we do not mark dirty because of this initialization
-      if (oldVersionVis === undefined && newVersionVis === null) {
-        dirtyBecasuseOfInitialization = true;
-      }
     }
   });
   if (dirty) {
     appState.transitions.set('panels', Object.values(convertedPanelStateMap));
-    if (!dirtyBecasuseOfInitialization) {
-      appState.transitions.set('isDirty', true);
-    }
+    dashboard.isDirty = true;
   }
   if (input.isFullScreenMode !== appStateData.fullScreenMode) {
     appState.transitions.set('fullScreenMode', input.isFullScreenMode);

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

@@ -44,7 +44,7 @@ export const useEditorUpdates = (
             dashboardContainer.updateInput(changes);
 
             if (changes.filters || changes.query || changes.timeRange || changes.refreshConfig) {
-              appState.transitions.set('isDirty', true);
+              dashboard.isDirty = true;
             }
           }
         }

src/plugins/dashboard/public/types.ts

@@ -128,7 +128,6 @@ export interface DashboardAppState {
   viewMode: ViewMode;
   expandedPanelId?: string;
   savedQuery?: string;
-  isDirty: boolean;
 }
 
 export type DashboardAppStateDefaults = DashboardAppState & {