maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Fix bug with Observability > APM header navigation (#100845)

Browse source 
Call `setHeaderActionMenu(undefined)` when the HeaderMenuPortal is unmounted.

Found this line in the docs:

> Calling the handler with `undefined` will unmount the current mount point.

Which we weren't doing before.

Previous behavior:

* Go to /app/observability/alerts
* Click the "View in app" button for an APM alert
* Click back
* Click the "View in app" button for an APM alert
* Get a weird toast error message and the header menu is gone forever

Now:

* Go to /app/observability/alerts
* Click the "View in app" button for an APM alert
* Click back
* Click the "View in app" button for an APM alert
* Get a working header menu

Fixes #97140
This commit is contained in:
Nathan L Smith 2021-05-28 11:10:14 -05:00 committed by GitHub
parent cec62cb706
commit a00fa53000
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 33 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
x-pack/plugins/observability/public/components/shared/header_menu_portal.test.tsx Normal file
View file

@ -0,0 +1,26 @@
/*
* 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 { render } from '@testing-library/react';
import React from 'react';
import HeaderMenuPortal from './header_menu_portal';
describe('HeaderMenuPortal', () => {
describe('when unmounted', () => {
it('calls setHeaderActionMenu with undefined', () => {
const setHeaderActionMenu = jest.fn();
const { unmount } = render(
<HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu}>test</HeaderMenuPortal>
);
unmount();
expect(setHeaderActionMenu).toHaveBeenCalledWith(undefined);
});
});
});

7
x-pack/plugins/observability/public/components/shared/header_menu_portal.tsx
View file

@ -15,17 +15,14 @@ export default function HeaderMenuPortal({ children, setHeaderActionMenu }: Head
const portalNode = useMemo(() => createPortalNode(), []);
useEffect(() => {
let unmount = () => {};
setHeaderActionMenu((element) => {
const mount = toMountPoint(<OutPortal node={portalNode} />);
unmount = mount(element);
return unmount;
return mount(element);
});
return () => {
portalNode.unmount();
unmount();
setHeaderActionMenu(undefined);
};
}, [portalNode, setHeaderActionMenu]);

6
x-pack/plugins/observability/public/pages/alerts/alerts.stories.tsx
View file

@ -11,7 +11,10 @@ import { IntlProvider } from 'react-intl';
import { MemoryRouter } from 'react-router-dom';
import { AlertsPage } from '.';
import { HttpSetup } from '../../../../../../src/core/public';
import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public';
import {
KibanaContextProvider,
KibanaPageTemplate,
} from '../../../../../../src/plugins/kibana_react/public';
import { PluginContext, PluginContextValue } from '../../context/plugin_context';
import { createObservabilityRuleTypeRegistryMock } from '../../rules/observability_rule_type_registry_mock';
import { createCallObservabilityApi } from '../../services/call_observability_api';
@ -63,6 +66,7 @@ export default {
http: { basePath: { prepend: (_: string) => '' } },
},
observabilityRuleTypeRegistry: createObservabilityRuleTypeRegistryMock(),
ObservabilityPageTemplate: KibanaPageTemplate,
} as unknown) as PluginContextValue
}
>