-
Notifications
You must be signed in to change notification settings - Fork 8.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor observability plugin breadcrumbs (#102290)
Previously the observability plugin set the page title and breadcrumbs in the main app rendering component based on the `breadcrumb` property of the current route. In addition, there's a `useBreadcrumb` hook used by the UX app, exploratory view, and cases. The conflict between these was creating situations where neither would work and the breadcrumbs would just show "Kibana". Remove the breadcrumb properties from the routes and the main app breadcrumb handling and just use `useBreadcrumb` on all pages. Fixes #102131.
- Loading branch information
Showing
14 changed files
with
211 additions
and
141 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
116 changes: 116 additions & 0 deletions
116
x-pack/plugins/observability/public/hooks/use_breadcrumbs.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| import { renderHook } from '@testing-library/react-hooks'; | ||
| import React, { ReactNode } from 'react'; | ||
| import { MemoryRouter } from 'react-router-dom'; | ||
| import { CoreStart } from '../../../../../src/core/public'; | ||
| import { createKibanaReactContext } from '../../../../../src/plugins/kibana_react/public'; | ||
| import { useBreadcrumbs } from './use_breadcrumbs'; | ||
|
|
||
| const setBreadcrumbs = jest.fn(); | ||
| const setTitle = jest.fn(); | ||
| const kibanaServices = ({ | ||
| application: { getUrlForApp: () => {}, navigateToApp: () => {} }, | ||
| chrome: { setBreadcrumbs, docTitle: { change: setTitle } }, | ||
| uiSettings: { get: () => true }, | ||
| } as unknown) as Partial<CoreStart>; | ||
| const KibanaContext = createKibanaReactContext(kibanaServices); | ||
|
|
||
| function Wrapper({ children }: { children?: ReactNode }) { | ||
| return ( | ||
| <MemoryRouter> | ||
| <KibanaContext.Provider>{children}</KibanaContext.Provider> | ||
| </MemoryRouter> | ||
| ); | ||
| } | ||
|
|
||
| describe('useBreadcrumbs', () => { | ||
| afterEach(() => { | ||
| setBreadcrumbs.mockClear(); | ||
| setTitle.mockClear(); | ||
| }); | ||
|
|
||
| describe('when setBreadcrumbs and setTitle are not defined', () => { | ||
| it('does not set breadcrumbs or the title', () => { | ||
| renderHook(() => useBreadcrumbs([]), { | ||
| wrapper: ({ children }) => ( | ||
| <MemoryRouter> | ||
| <KibanaContext.Provider | ||
| services={ | ||
| ({ ...kibanaServices, chrome: { docTitle: {} } } as unknown) as Partial<CoreStart> | ||
| } | ||
| > | ||
| {children} | ||
| </KibanaContext.Provider> | ||
| </MemoryRouter> | ||
| ), | ||
| }); | ||
|
|
||
| expect(setBreadcrumbs).not.toHaveBeenCalled(); | ||
| expect(setTitle).not.toHaveBeenCalled(); | ||
| }); | ||
| }); | ||
|
|
||
| describe('with an empty array', () => { | ||
| it('sets the overview breadcrumb', () => { | ||
| renderHook(() => useBreadcrumbs([]), { wrapper: Wrapper }); | ||
|
|
||
| expect(setBreadcrumbs).toHaveBeenCalledWith([ | ||
| { href: '/overview', onClick: expect.any(Function), text: 'Observability' }, | ||
| ]); | ||
| }); | ||
|
|
||
| it('sets the overview title', () => { | ||
| renderHook(() => useBreadcrumbs([]), { wrapper: Wrapper }); | ||
|
|
||
| expect(setTitle).toHaveBeenCalledWith(['Observability']); | ||
| }); | ||
| }); | ||
|
|
||
| describe('given breadcrumbs', () => { | ||
| it('sets the breadcrumbs', () => { | ||
| renderHook( | ||
| () => | ||
| useBreadcrumbs([ | ||
| { text: 'One', href: '/one' }, | ||
| { | ||
| text: 'Two', | ||
| }, | ||
| ]), | ||
| { wrapper: Wrapper } | ||
| ); | ||
|
|
||
| expect(setBreadcrumbs).toHaveBeenCalledWith([ | ||
| { href: '/overview', onClick: expect.any(Function), text: 'Observability' }, | ||
| { | ||
| href: '/one', | ||
| onClick: expect.any(Function), | ||
| text: 'One', | ||
| }, | ||
| { | ||
| text: 'Two', | ||
| }, | ||
| ]); | ||
| }); | ||
|
|
||
| it('sets the title', () => { | ||
| renderHook( | ||
| () => | ||
| useBreadcrumbs([ | ||
| { text: 'One', href: '/one' }, | ||
| { | ||
| text: 'Two', | ||
| }, | ||
| ]), | ||
| { wrapper: Wrapper } | ||
| ); | ||
|
|
||
| expect(setTitle).toHaveBeenCalledWith(['Two', 'One', 'Observability']); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.