Skip to content

Commit

Permalink
Fix bug with Observability > APM header navigation (#100845) (#100916)
Browse files Browse the repository at this point in the history
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

Co-authored-by: Nathan L Smith <[email protected]>
  • Loading branch information
kibanamachine and smith authored May 28, 2021
1 parent ce51457 commit 3c7b809
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 6 deletions.
Original file line number Diff line number Diff line change
@@ -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);
});
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -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]);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -63,6 +66,7 @@ export default {
http: { basePath: { prepend: (_: string) => '' } },
},
observabilityRuleTypeRegistry: createObservabilityRuleTypeRegistryMock(),
ObservabilityPageTemplate: KibanaPageTemplate,
} as unknown) as PluginContextValue
}
>
Expand Down

0 comments on commit 3c7b809

Please sign in to comment.