[Dashboard De-Angular] Add breadcrumb with view/edit mode and unsaved…

… flow (#4479)

* set isDirty back to false when saving susccessfully

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

* Breadcrumb working

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

* change to dashboards in breadcrumb

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

---------

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

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

@@ -14,10 +14,15 @@ 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';
+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(services.chrome);
   const [eventEmitter] = useState(new EventEmitter());
 
@@ -48,6 +53,25 @@ export const DashboardEditor = () => {
     appState
   );
 
+  useEffect(() => {
+    if (appState) {
+      if (savedDashboardInstance?.id) {
+        chrome.setBreadcrumbs(
+          setBreadcrumbsForExistingDashboard(
+            savedDashboardInstance.title,
+            appState?.getState().viewMode,
+            appState?.getState().isDirty
+          )
+        );
+        chrome.docTitle.change(savedDashboardInstance.title);
+      } else {
+        chrome.setBreadcrumbs(
+          setBreadcrumbsForNewDashboard(appState?.getState().viewMode, appState?.getState().isDirty)
+        );
+      }
+    }
+  }, [appState?.getState(), savedDashboardInstance, chrome]);
+
   useEffect(() => {
     // clean up all registered listeners if any is left
     return () => {

src/plugins/dashboard/public/application/utils/breadcrumbs.ts

@@ -0,0 +1,98 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import { i18n } from '@osd/i18n';
+import { DashboardConstants } from '../../dashboard_constants';
+import { ViewMode } from '../../embeddable_plugin';
+
+export function getLandingBreadcrumbs() {
+  return [
+    {
+      text: i18n.translate('dashboard.dashboardAppBreadcrumbsTitle', {
+        defaultMessage: 'Dashboards',
+      }),
+      href: `#${DashboardConstants.LANDING_PAGE_PATH}`,
+    },
+  ];
+}
+
+export const setBreadcrumbsForNewDashboard = (viewMode: ViewMode, isDirty: boolean) => {
+  if (viewMode === ViewMode.VIEW) {
+    return [
+      ...getLandingBreadcrumbs(),
+      {
+        text: i18n.translate('dashboard.strings.dashboardViewTitle', {
+          defaultMessage: 'New Dashboard',
+        }),
+      },
+    ];
+  } else {
+    if (isDirty) {
+      return [
+        ...getLandingBreadcrumbs(),
+        {
+          text: i18n.translate('dashboard.strings.dashboardEditTitle', {
+            defaultMessage: 'Editing New Dashboard (unsaved)',
+          }),
+        },
+      ];
+    } else {
+      return [
+        ...getLandingBreadcrumbs(),
+        {
+          text: i18n.translate('dashboard.strings.dashboardEditTitle', {
+            defaultMessage: 'Editing New Dashboard',
+          }),
+        },
+      ];
+    }
+  }
+};
+
+export const setBreadcrumbsForExistingDashboard = (
+  title: string,
+  viewMode: ViewMode,
+  isDirty: boolean
+) => {
+  if (viewMode === ViewMode.VIEW) {
+    return [
+      ...getLandingBreadcrumbs(),
+      {
+        text: i18n.translate('dashboard.strings.dashboardViewTitle', {
+          defaultMessage: '{title}',
+          values: { title },
+        }),
+      },
+    ];
+  } else {
+    if (isDirty) {
+      return [
+        ...getLandingBreadcrumbs(),
+        {
+          text: i18n.translate('dashboard.strings.dashboardEditTitle', {
+            defaultMessage: 'Editing {title} (unsaved)',
+            values: { title },
+          }),
+        },
+      ];
+    } else {
+      return [
+        ...getLandingBreadcrumbs(),
+        {
+          text: i18n.translate('dashboard.strings.dashboardEditTitle', {
+            defaultMessage: 'Editing {title}',
+            values: { title },
+          }),
+        },
+      ];
+    }
+  }
+};

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

@@ -113,6 +113,9 @@ export const getNavActions = (
           stateContainer.transitions.set('description', currentDescription);
           stateContainer.transitions.set('timeRestore', currentTimeRestore);
         }
+
+        // If the save was successfull, then set the app state isDirty back to false
+        stateContainer.transitions.set('isDirty', false);
         return response;
       });
     };