diff --git a/webapp/channels/src/components/channel_header/__snapshots__/channel_header.test.tsx.snap b/webapp/channels/src/components/channel_header/__snapshots__/channel_header.test.tsx.snap index dc6f72d70b..99f64e43eb 100644 --- a/webapp/channels/src/components/channel_header/__snapshots__/channel_header.test.tsx.snap +++ b/webapp/channels/src/components/channel_header/__snapshots__/channel_header.test.tsx.snap @@ -196,7 +196,7 @@ exports[`components/ChannelHeader should match snapshot with last active display show={false} target={null} > - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - + `; exports[`components/ProfilePopover should hide add-to-channel option if not on team 1`] = ` - - + `; exports[`components/ProfilePopover should match snapshot 1`] = ` - - + `; exports[`components/ProfilePopover should match snapshot for shared user 1`] = ` - - + `; exports[`components/ProfilePopover should match snapshot when calls are disabled 1`] = ` - - + `; exports[`components/ProfilePopover should match snapshot with custom status 1`] = ` - - + `; exports[`components/ProfilePopover should match snapshot with custom status expired 1`] = ` - - + `; exports[`components/ProfilePopover should match snapshot with custom status not set but can set 1`] = ` - - + `; exports[`components/ProfilePopover should match snapshot with last active display 1`] = ` - - + `; exports[`components/ProfilePopover should match snapshot with no last active display because it is disabled 1`] = ` - - + `; exports[`components/ProfilePopover should show the start call button when isCallsDefaultEnabledOnAllChannels, isCallsCanBeDisabledOnSpecificChannels is false and callsChannelState.enabled is true 1`] = ` @@ -3649,7 +3619,7 @@ exports[`components/ProfilePopover should show the start call button when isCall } userId="0" > - - + diff --git a/webapp/channels/src/components/suggestion/search_suggestion_list.tsx b/webapp/channels/src/components/suggestion/search_suggestion_list.tsx index 77164644a1..664908270e 100644 --- a/webapp/channels/src/components/suggestion/search_suggestion_list.tsx +++ b/webapp/channels/src/components/suggestion/search_suggestion_list.tsx @@ -2,6 +2,7 @@ // See LICENSE.txt for license information. import React from 'react'; +import type {Popover as BSPopover} from 'react-bootstrap'; import {FormattedMessage} from 'react-intl'; import Popover from 'components/widgets/popover'; @@ -46,7 +47,7 @@ interface Props { } export default class SearchSuggestionList extends SuggestionList { - popoverRef: React.RefObject; + popoverRef: React.RefObject; itemsContainerRef: React.RefObject; suggestionReadOut: React.RefObject; currentLabel: string; diff --git a/webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap b/webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap index 2db6ce2566..e3aedeca59 100644 --- a/webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap +++ b/webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap @@ -79,7 +79,7 @@ exports[`component/user_group_popover should match snapshot 1`] = ` searchTerm="" showUserOverlay={[MockFunction]} > - - + diff --git a/webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/__snapshots__/custom_theme_chooser.test.tsx.snap b/webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/__snapshots__/custom_theme_chooser.test.tsx.snap index fb99b52032..d62a63896d 100644 --- a/webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/__snapshots__/custom_theme_chooser.test.tsx.snap +++ b/webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/__snapshots__/custom_theme_chooser.test.tsx.snap @@ -429,11 +429,9 @@ exports[`components/user_settings/display/CustomThemeChooser should match, init - + } placement="top" trigger={ diff --git a/webapp/channels/src/components/widgets/popover/__snapshots__/popover.test.tsx.snap b/webapp/channels/src/components/widgets/popover/__snapshots__/popover.test.tsx.snap index b073ce70c6..68a9cb93e7 100644 --- a/webapp/channels/src/components/widgets/popover/__snapshots__/popover.test.tsx.snap +++ b/webapp/channels/src/components/widgets/popover/__snapshots__/popover.test.tsx.snap @@ -1,13 +1,19 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`components/widgets/popover plain 1`] = ` - - Some text - +
+
+ Some text +
+
`; diff --git a/webapp/channels/src/components/widgets/popover/index.tsx b/webapp/channels/src/components/widgets/popover/index.tsx index 6b8bc82e3f..3eae8ae746 100644 --- a/webapp/channels/src/components/widgets/popover/index.tsx +++ b/webapp/channels/src/components/widgets/popover/index.tsx @@ -19,32 +19,39 @@ interface Props { style?: React.CSSProperties; onMouseOut?: React.MouseEventHandler; // didn't find a better way to satisfy typing, so for now we have a slight 'bootstrap leakage' onMouseOver?: React.MouseEventHandler; + ref?: React.Ref; } -export default class Popover extends React.PureComponent { - static defaultProps = { - placement: 'right', - popoverStyle: 'info', - popoverSize: 'sm', +const Popover = ({ + placement = 'right', + popoverSize = 'sm', + children, + popoverStyle = 'info', + title, + id, + onMouseOut, + onMouseOver, + className, + style, + ref, +}: Props) => { + return ( + + {children} + + ); +}; - }; - render() { - const {placement, popoverSize, children, popoverStyle, title, id, onMouseOut, onMouseOver, className, style} = this.props; - return ( - - {children} - - ); - } -} +export default React.memo(Popover); diff --git a/webapp/channels/src/components/widgets/popover/popover.test.tsx b/webapp/channels/src/components/widgets/popover/popover.test.tsx index 303e2fe355..48a1076d7d 100644 --- a/webapp/channels/src/components/widgets/popover/popover.test.tsx +++ b/webapp/channels/src/components/widgets/popover/popover.test.tsx @@ -1,18 +1,18 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import {shallow} from 'enzyme'; +import {render} from '@testing-library/react'; import React from 'react'; import Popover from '.'; describe('components/widgets/popover', () => { test('plain', () => { - const wrapper = shallow( + const {container} = render( {'Some text'} , ); - expect(wrapper).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); });