Experimental implementation for webapp plugins (#7185)

* Start of experimental implementation for webapp plugins

* Updates to webapp plugin architecture

* Update pluggable test

* Remove debug code

webapp/components/at_mention/at_mention.jsx

@@ -2,6 +2,7 @@
 // See License.txt for license information.
 
 import ProfilePopover from 'components/profile_popover.jsx';
+import Pluggable from 'plugins/pluggable';
 import {Client4} from 'mattermost-redux/client';
 
 import React from 'react';
@@ -79,13 +80,15 @@ export default class AtMention extends React.PureComponent {
                     placement='right'
                     rootClose={true}
                     overlay={
-                        <ProfilePopover
-                            user={user}
-                            src={Client4.getProfilePictureUrl(user.id, user.last_picture_update)}
-                            hide={this.hideProfilePopover}
-                            isRHS={this.props.isRHS}
-                            hasMention={this.props.hasMention}
-                        />
+                        <Pluggable>
+                            <ProfilePopover
+                                user={user}
+                                src={Client4.getProfilePictureUrl(user.id, user.last_picture_update)}
+                                hide={this.hideProfilePopover}
+                                isRHS={this.props.isRHS}
+                                hasMention={this.props.hasMention}
+                            />
+                        </Pluggable>
                     }
                 >
                     <a className='mention-link'>{'@' + user.username}</a>

webapp/components/profile_picture.jsx

@@ -1,6 +1,8 @@
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
+
 import ProfilePopover from './profile_popover.jsx';
+import Pluggable from 'plugins/pluggable';
 import * as Utils from 'utils/utils.jsx';
 
 import PropTypes from 'prop-types';
@@ -56,16 +58,18 @@ export default class ProfilePicture extends React.Component {
                     placement='right'
                     rootClose={true}
                     overlay={
-                        <ProfilePopover
-                            user={this.props.user}
-                            src={this.props.src}
-                            status={this.props.status}
-                            isBusy={this.props.isBusy}
-                            hide={this.hideProfilePopover}
-                            isRHS={this.props.isRHS}
-                            hasMention={this.props.hasMention}
-                        />
-                }
+                        <Pluggable>
+                            <ProfilePopover
+                                user={this.props.user}
+                                src={this.props.src}
+                                status={this.props.status}
+                                isBusy={this.props.isBusy}
+                                hide={this.hideProfilePopover}
+                                isRHS={this.props.isRHS}
+                                hasMention={this.props.hasMention}
+                            />
+                        </Pluggable>
+                    }
                 >
                     <span className='status-wrapper'>
                         <img

webapp/components/user_profile.jsx

@@ -2,6 +2,7 @@
 // See License.txt for license information.
 
 import ProfilePopover from './profile_popover.jsx';
+import Pluggable from 'plugins/pluggable';
 import * as Utils from 'utils/utils.jsx';
 
 import {OverlayTrigger} from 'react-bootstrap';
@@ -76,15 +77,17 @@ export default class UserProfile extends React.Component {
                 placement='right'
                 rootClose={true}
                 overlay={
-                    <ProfilePopover
-                        user={this.props.user}
-                        src={profileImg}
-                        status={this.props.status}
-                        isBusy={this.props.isBusy}
-                        hide={this.hideProfilePopover}
-                        isRHS={this.props.isRHS}
-                        hasMention={this.props.hasMention}
-                    />
+                    <Pluggable>
+                        <ProfilePopover
+                            user={this.props.user}
+                            src={profileImg}
+                            status={this.props.status}
+                            isBusy={this.props.isBusy}
+                            hide={this.hideProfilePopover}
+                            isRHS={this.props.isRHS}
+                            hasMention={this.props.hasMention}
+                        />
+                    </Pluggable>
                 }
             >
                 <div