Fix bug with Observability > APM header navigation (#100845)
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:
parent
cec62cb706
commit
a00fa53000
|
@ -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);
|
||||
});
|
||||
});
|
||||
});
|
|
@ -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]);
|
||||
|
||||
|
|
|
@ -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
|
||||
}
|
||||
>
|
||||
|
|
Loading…
Reference in a new issue