From e92674ff10291eff6e564315393c25446b0dc3b4 Mon Sep 17 00:00:00 2001
From: Brooke <97559014+CPTNB@users.noreply.github.com>
Date: Wed, 6 Jul 2022 13:28:45 -0700
Subject: [PATCH] Adding breadcrumbs for drag and drop creation (#1797)

Signed-off-by: Brooke Green <cptn@amazon.com>
---
 src/plugins/wizard/common/index.ts            |  1 +
 .../public/application/components/top_nav.tsx | 25 +++++++++++++++++--
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/plugins/wizard/common/index.ts b/src/plugins/wizard/common/index.ts
index 4b3522fec709..f2ceda0f2af5 100644
--- a/src/plugins/wizard/common/index.ts
+++ b/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';
diff --git a/src/plugins/wizard/public/application/components/top_nav.tsx b/src/plugins/wizard/public/application/components/top_nav.tsx
index d63ceedb302f..e2bdc2b33a24 100644
--- a/src/plugins/wizard/public/application/components/top_nav.tsx
+++ b/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