Message hook (mattermost#1840)

* Start implementing plugin hook for MessageWillFormat

* Send entire post to webhook. (mattermost#1590)

* Adds plugin-updated message to allow hooks to chain their message changes.

* Updates snaps to reflect Redux connect use.

* Reuses existing 'components' reducer.

* Fix for wrong state key bug.

components/post_markdown/index.js

@@ -1,6 +1,14 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import {connect} from 'react-redux';
+
 import PostMarkdown from './post_markdown';
 
-export default PostMarkdown;
+function mapStateToProps(state) {
+ return {
+ pluginHooks: state.plugins.components.MessageWillFormat,
+ };
+}
+
+export default connect(mapStateToProps)(PostMarkdown);

components/post_markdown/post_markdown.jsx

@@ -32,10 +32,13 @@ export default class PostMarkdown extends React.PureComponent {
  post: PropTypes.object,
 
  options: PropTypes.object,
+
+ pluginHooks: PropTypes.arrayOf(PropTypes.object),
  };
 
  static defaultProps = {
  isRHS: false,
+ pluginHooks: [],
  };
 
  render() {
@@ -50,11 +53,20 @@ export default class PostMarkdown extends React.PureComponent {
  const proxyImages = !this.props.post || !this.props.post.message_source || this.props.post.message === this.props.post.message_source;
  const channelNamesMap = this.props.post && this.props.post.props && this.props.post.props.channel_mentions;
 
+ let {message} = this.props;
+ const {post} = this.props;
+
+ this.props.pluginHooks.forEach((o) => {
+ if (o && o.hook) {
+ message = o.hook(post, message);
+ }
+ });
+
  return (
  <Markdown
  imageProps={this.props.imageProps}
  isRHS={this.props.isRHS}
- message={this.props.message}
+ message={message}
  proxyImages={proxyImages}
  options={this.props.options}
  channelNamesMap={channelNamesMap}

plugins/registry.js

@@ -279,4 +279,20 @@ export default class PluginRegistry {
  unregisterReconnectHandler() {
  unregisterPluginReconnectHandler(this.id);
  }
+
+ registerMessageWillFormatHook(hook) {
+ const id = generateId();
+
+ store.dispatch({
+ type: ActionTypes.RECEIVED_PLUGIN_COMPONENT,
+ name: 'MessageWillFormat',
+ data: {
+ id,
+ pluginId: this.id,
+ hook,
+ },
+ });
+
+ return id;
+ }
 }

reducers/plugins/index.js

@@ -170,7 +170,7 @@ function postTypes(state = {}, action) {
  }
  return state;
  }
- case ActionTypes.REMOVED_PLUGIN_COMPONENT:
+ case ActionTypes.REMOVED_PLUGIN_POST_COMPONENT:
  return removePostPluginComponent(state, action);
  case ActionTypes.RECEIVED_WEBAPP_PLUGIN:
  case ActionTypes.REMOVED_WEBAPP_PLUGIN:

tests/components/__snapshots__/post_markdown.test.jsx.snap

@@ -1,5 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`components/PostMarkdown plugin hooks can build upon other hook message updates 1`] = `
+<Connect(Markdown)
+ channelNamesMap={
+ Object {
+ "test": Object {
+ "display_name": "Test",
+ },
+ }
+ }
+ imageProps={Object {}}
+ isRHS={false}
+ message="hello world!"
+ proxyImages={true}
+/>
+`;
+
+exports[`components/PostMarkdown plugin hooks can overwrite other hooks messages 1`] = `
+<Connect(Markdown)
+ channelNamesMap={
+ Object {
+ "test": Object {
+ "display_name": "Test",
+ },
+ }
+ }
+ imageProps={Object {}}
+ isRHS={false}
+ message="world!"
+ proxyImages={true}
+/>
+`;
+
 exports[`components/PostMarkdown should render header change properly 1`] = `
 <div>
  <FormattedMessage

tests/components/post_markdown.test.jsx

@@ -64,4 +64,70 @@ describe('components/PostMarkdown', () => {
  );
  expect(wrapper).toMatchSnapshot();
  });
+
+ test('plugin hooks can build upon other hook message updates', () => {
+ const props = {
+ ...baseProps,
+ message: 'world',
+ post: {
+ message: 'world',
+ props: {
+ channel_mentions: {
+ test: {
+ display_name: 'Test',
+ },
+ },
+ },
+ },
+ pluginHooks: [
+ {
+ hook: (post, updatedMessage) => {
+ return 'hello ' + updatedMessage;
+ },
+ },
+ {
+ hook: (post, updatedMessage) => {
+ return updatedMessage + '!';
+ },
+ },
+ ],
+ };
+ const wrapper = shallow(
+ <PostMarkdown {...props}/>
+ );
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ test('plugin hooks can overwrite other hooks messages', () => {
+ const props = {
+ ...baseProps,
+ message: 'world',
+ post: {
+ message: 'world',
+ props: {
+ channel_mentions: {
+ test: {
+ display_name: 'Test',
+ },
+ },
+ },
+ },
+ pluginHooks: [
+ {
+ hook: (post) => {
+ return 'hello ' + post.message;
+ },
+ },
+ {
+ hook: (post) => {
+ return post.message + '!';
+ },
+ },
+ ],
+ };
+ const wrapper = shallow(
+ <PostMarkdown {...props}/>
+ );
+ expect(wrapper).toMatchSnapshot();
+ });
 });

tests/components/post_view/__snapshots__/post_message_view.test.jsx.snap

@@ -11,7 +11,7 @@ exports[`components/post_view/PostAttachment should match snapshot 1`] = `
  id="lastPostMessageText1"
  onClick={[Function]}
  >
- <PostMarkdown
+ <Connect(PostMarkdown)
  imageProps={
  Object {
  "onHeightReceived": [Function],
@@ -49,7 +49,7 @@ exports[`components/post_view/PostAttachment should match snapshot, on Show Less
  id="lastPostMessageText1"
  onClick={[Function]}
  >
- <PostMarkdown
+ <Connect(PostMarkdown)
  imageProps={
  Object {
  "onHeightReceived": [Function],
@@ -87,7 +87,7 @@ exports[`components/post_view/PostAttachment should match snapshot, on Show More
  id="lastPostMessageText1"
  onClick={[Function]}
  >
- <PostMarkdown
+ <Connect(PostMarkdown)
  imageProps={
  Object {
  "onHeightReceived": [Function],
@@ -145,7 +145,7 @@ exports[`components/post_view/PostAttachment should match snapshot, on edited po
  id="lastPostMessageText1"
  onClick={[Function]}
  >
- <PostMarkdown
+ <Connect(PostMarkdown)
  imageProps={
  Object {
  "onHeightReceived": [Function],
@@ -205,7 +205,7 @@ exports[`components/post_view/PostAttachment should match snapshot, on ephemeral
  id="lastPostMessageText1"
  onClick={[Function]}
  >
- <PostMarkdown
+ <Connect(PostMarkdown)
  imageProps={
  Object {
  "onHeightReceived": [Function],

tests/plugins/__snapshots__/post_type.test.jsx.snap

@@ -73,7 +73,7 @@ exports[`plugins/PostMessageView should match snapshot with no extended post typ
  id={null}
  onClick={[Function]}
  >
- <PostMarkdown
+ <Connect(PostMarkdown)
  imageProps={
  Object {
  "onHeightReceived": [Function],