Adding breadcrumbs for drag and drop creation (opensearch-project#1797)

Signed-off-by: Brooke Green <[email protected]>

src/plugins/wizard/common/index.ts

@@ -5,5 +5,6 @@
 
 export const PLUGIN_ID = 'wizard';
 export const PLUGIN_NAME = 'Wizard';
+export const VISUALIZE_ID = 'visualize';
 
 export { WizardSavedObjectAttributes, WIZARD_SAVED_OBJECT } from './wizard_saved_object_attributes';

src/plugins/wizard/public/application/components/top_nav.tsx

@@ -3,8 +3,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useMemo } from 'react';
-import { PLUGIN_ID } from '../../../common';
+import { i18n } from '@osd/i18n';
+import React, { useMemo, useEffect } from 'react';
+import { PLUGIN_ID, VISUALIZE_ID } from '../../../common';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { getTopNavconfig } from '../utils/get_top_nav_config';
 import { WizardServices } from '../../types';
@@ -16,6 +17,7 @@ export const TopNav = () => {
   const { services } = useOpenSearchDashboards<WizardServices>();
   const {
     setHeaderActionMenu,
+    chrome,
     navigation: {
       ui: { TopNavMenu },
     },
@@ -24,6 +26,25 @@ export const TopNav = () => {
   const config = useMemo(() => getTopNavconfig(services), [services]);
   const indexPattern = useIndexPattern();
 
+  useEffect(() => {
+    const visualizeHref = window.location.href.split(`${PLUGIN_ID}#/`)[0] + `${VISUALIZE_ID}#/`;
+    chrome.setBreadcrumbs([
+      {
+        text: i18n.translate('visualize.listing.breadcrumb', {
+          defaultMessage: 'Visualize',
+        }),
+        href: visualizeHref,
+      },
+      {
+        text: i18n.translate('wizard.nav.breadcrumb.create', {
+          defaultMessage: 'Create',
+        }),
+      },
+    ]);
+    // we want to run this hook exactly once, which you do by an empty dep array
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <div className="wizTopNav">
       <TopNavMenu