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

Signed-off-by: Brooke Green <[email protected]>
joshuarrrr · Jul 6, 2022 · e92674f · e92674f
1 parent c7db124
commit e92674f
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git 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
@@ -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