diff --git a/webapp/components/at_mention/at_mention.jsx b/webapp/components/at_mention/at_mention.jsx index 9bb2d2aada..668222cc2f 100644 --- a/webapp/components/at_mention/at_mention.jsx +++ b/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={ - + + + } > {'@' + user.username} diff --git a/webapp/components/profile_picture.jsx b/webapp/components/profile_picture.jsx index fbaa46127a..90cea9d34d 100644 --- a/webapp/components/profile_picture.jsx +++ b/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={ - - } + + + + } > + + + } >
{ + function onLoad() { + // Add the plugin's js to the page + const script = document.createElement('script'); + script.type = 'text/javascript'; + script.text = this.responseText; + document.getElementsByTagName('head')[0].appendChild(script); + + // Initialize the plugin + console.log('Registering ' + m.id + ' plugin...'); //eslint-disable-line no-console + const plugin = window.plugins[m.id]; + plugin.initialize(registerComponents, store); + console.log('...done'); //eslint-disable-line no-console + } + + // Fetch the plugin's bundled js + const xhrObj = new XMLHttpRequest(); + xhrObj.open('GET', getSiteURL() + m.bundle_path, true); + xhrObj.addEventListener('load', onLoad); + xhrObj.send(''); + }); +} diff --git a/webapp/plugins/pluggable/index.js b/webapp/plugins/pluggable/index.js new file mode 100644 index 0000000000..d00f18a5d7 --- /dev/null +++ b/webapp/plugins/pluggable/index.js @@ -0,0 +1,17 @@ +// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import {connect} from 'react-redux'; +import {getTheme} from 'mattermost-redux/selectors/entities/preferences'; + +import Pluggable from './pluggable.jsx'; + +function mapStateToProps(state, ownProps) { + return { + ...ownProps, + components: state.plugins.components, + theme: getTheme(state) + }; +} + +export default connect(mapStateToProps)(Pluggable); diff --git a/webapp/plugins/pluggable/pluggable.jsx b/webapp/plugins/pluggable/pluggable.jsx new file mode 100644 index 0000000000..566e024e5a --- /dev/null +++ b/webapp/plugins/pluggable/pluggable.jsx @@ -0,0 +1,55 @@ +// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +// EXPERIMENTAL - SUBJECT TO CHANGE + +import React from 'react'; +import PropTypes from 'prop-types'; + +export default class Pluggable extends React.PureComponent { + static propTypes = { + + /* + * Should be a single overridable React component + */ + children: PropTypes.element.isRequired, + + /* + * Components for overriding provided by plugins + */ + components: PropTypes.object.isRequired, + + /* + * Logged in user's theme + */ + theme: PropTypes.object.isRequired + } + + render() { + const child = React.Children.only(this.props.children).type; + const components = this.props.components; + + if (child == null) { + return null; + } + + // Include any props passed to this component or to the child component + let props = {...this.props}; + Reflect.deleteProperty(props, 'children'); + Reflect.deleteProperty(props, 'components'); + props = {...props, ...this.props.children.props}; + + // Override the default component with any registered plugin's component + if (components.hasOwnProperty(child.name)) { + const PluginComponent = components[child.name]; + return ( + + ); + } + + return React.cloneElement(this.props.children, {...props}); + } +} diff --git a/webapp/reducers/index.js b/webapp/reducers/index.js index ff2eb0d50b..eb245d851b 100644 --- a/webapp/reducers/index.js +++ b/webapp/reducers/index.js @@ -2,7 +2,9 @@ // See License.txt for license information. import views from './views'; +import plugins from './plugins'; export default { - views + views, + plugins }; diff --git a/webapp/reducers/plugins/index.js b/webapp/reducers/plugins/index.js new file mode 100644 index 0000000000..9cad727153 --- /dev/null +++ b/webapp/reducers/plugins/index.js @@ -0,0 +1,22 @@ +// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import {combineReducers} from 'redux'; +import {ActionTypes} from 'utils/constants.jsx'; + +function components(state = {}, action) { + switch (action.type) { + case ActionTypes.RECEIVED_PLUGIN_COMPONENTS: { + if (action.data) { + return {...action.data, ...state}; + } + return state; + } + default: + return state; + } +} + +export default combineReducers({ + components +}); diff --git a/webapp/root.jsx b/webapp/root.jsx index 635c8e93be..65d4cb0e48 100644 --- a/webapp/root.jsx +++ b/webapp/root.jsx @@ -14,6 +14,7 @@ import * as Websockets from 'actions/websocket_actions.jsx'; import {loadMeAndConfig} from 'actions/user_actions.jsx'; import ChannelStore from 'stores/channel_store.jsx'; import * as I18n from 'i18n/i18n.jsx'; +import {initializePlugins} from 'plugins'; // Import our styles import 'bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css'; @@ -90,6 +91,7 @@ function preRenderSetup(callwhendone) { function afterIntl() { $.when(d1).done(() => { + initializePlugins(); I18n.doAddLocaleData(); callwhendone(); }); diff --git a/webapp/store/index.js b/webapp/store/index.js index 2b8a4fb282..2da4728810 100644 --- a/webapp/store/index.js +++ b/webapp/store/index.js @@ -104,7 +104,7 @@ export default function configureStore(initialState) { autoRehydrate: { log: false }, - blacklist: ['errors', 'offline', 'requests', 'entities', 'views'], + blacklist: ['errors', 'offline', 'requests', 'entities', 'views', 'plugins'], debounce: 500, transforms: [ setTransformer diff --git a/webapp/tests/plugins/__snapshots__/pluggable.test.jsx.snap b/webapp/tests/plugins/__snapshots__/pluggable.test.jsx.snap new file mode 100644 index 0000000000..2f7a5e2325 --- /dev/null +++ b/webapp/tests/plugins/__snapshots__/pluggable.test.jsx.snap @@ -0,0 +1,111 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`plugins/Pluggable should match snapshot with no overridden component 1`] = ` + + + + +