MM-17661 Pass ProfilePopover hide through to plugin components

[MatthewDorner]

Summary

Pass this.props.hide to Pluggable for Popover User Actions and Popover User Attributes plugin components, so the components are able to hide the popover.

Ticket Link

Fixes mattermost/mattermost#11842

[lieut-data]

Thanks, @MatthewDorner!

Would you also be open to helping make a change to our https://github.com/mattermost/mattermost-plugin-demo to illustrate this new functionality?

[MatthewDorner]

yeah, I can do that.

[saturninoabril]

Thanks @MatthewDorner, looks good to me

[MatthewDorner]

Not sure if you're waiting for the https://github.com/mattermost/mattermost-plugin-demo PR before merging this one, but I should have it ready sometime this week.

[prapti]

@MatthewDorner Could you please add unit tests for the PR. That'd be great!

[MatthewDorner]

Can you provide any guidance on where these tests should go? I see tests in a lot of different places in the repository and I'm still new to the project.

I guess I should add it to the Pluggable component's PropTypes as non-required, at least. Should it somehow be tested in the tests for ProfilePopover?

With some of the pluggable component types, as you can see in https://github.com/mattermost/mattermost-webapp/tree/master/plugins, there are container components, but there aren't any for the popover plugin components.

[saturninoabril]

@MatthewDorner Pluggable component is so generic where props are not exactly define. Since this implementation is specific to ProfilePopover component, I suggest to have the test on itself (profile_popover.test.jsx), checking whether props, including hide is passed into the Pluggable component. Something like:

import Pluggable from 'plugins/pluggable';
...
    test('should match props passed into Pluggable component', () => {
        const hide = jest.fn();
        const status = 'online';
        const props = {...baseProps, hide, status};

        const wrapper = shallowWithIntl(
            <ProfilePopover {...props}/>
        ).dive();

        const pluggableProps = {
            hide,
            status,
            user: props.user,
        };
        expect(wrapper.find(Pluggable).first().props()).toEqual({...pluggableProps, pluggableName: 'PopoverUserAttributes'});
        expect(wrapper.find(Pluggable).last().props()).toEqual({...pluggableProps, pluggableName: 'PopoverUserActions'});
    });

[MatthewDorner]

Anything else?

[saturninoabril]

Thanks @MatthewDorner, looks good to me. Please update to master so we can merge.

@prapti for your review

[prapti]

Checked for unit tests.
Will be tested post merge into master.
Removing QA Review label.
Approving.