MM-15751 Fix for system messages not rendering in IE (#2865)

* MM-15751 Fix for system messages not rendering in IE

  * Add a new utility function which accepts posts and
    creates combines system messages

* Add test case for combined messages when posts greater than 100

* Chnages based on redux repo changes

* Fix for ordering files

* Update redux hash

* Update redux hash

components/post_view/post_list_ie/index.js

@@ -6,12 +6,14 @@ import {connect} from 'react-redux';
 import {makeGetPostsAroundPost, makeGetPostsInChannel} from 'mattermost-redux/selectors/entities/posts';
 import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
 
+import {makeCombineUserActivityFromPosts} from 'selectors/posts';
+
 import PostList from './post_list_ie.jsx';
 
 function makeMapStateToProps() {
  const getPostsInChannel = makeGetPostsInChannel();
  const getPostsAroundPost = makeGetPostsAroundPost();
-
+ const combineUserActivityPosts = makeCombineUserActivityFromPosts();
  return function mapStateToProps(state, ownProps) {
  let posts;
  if (ownProps.focusedPostId) {
@@ -21,7 +23,7 @@ function makeMapStateToProps() {
  }
 
  return {
- posts,
+ posts: combineUserActivityPosts(posts || []),
  currentUserId: getCurrentUserId(state),
  lastViewedAt: state.views.channel.lastChannelViewTime[ownProps.channelId],
  };

components/post_view/post_list_ie/post_list_ie.jsx

@@ -6,7 +6,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import {FormattedMessage} from 'react-intl';
 
-import {isUserActivityPost} from 'mattermost-redux/utils/post_utils';
+import {isCombinedUserActivityPost} from 'mattermost-redux/utils/post_list';
 import {debounce} from 'mattermost-redux/actions/helpers';
 import EventEmitter from 'mattermost-redux/utils/event_emitter';
 
@@ -21,6 +21,7 @@ import LoadingScreen from 'components/loading_screen.jsx';
 import DateSeparator from 'components/post_view/date_separator';
 import FloatingTimestamp from 'components/post_view/floating_timestamp';
 import NewMessagesBelow from 'components/post_view/new_messages_below';
+import CombinedUserActivityPost from 'components/post_view/combined_user_activity_post';
 
 import Post from 'components/post_view/post';
 import ScrollToBottomArrows from 'components/post_view/scroll_to_bottom_arrows.jsx';
@@ -507,24 +508,32 @@ export default class PostList extends React.PureComponent {
 
  for (let i = posts.length - 1; i >= 0; i--) {
  const post = posts[i];
-
+ let postCtl;
  if (
  post == null ||
- post.type === PostTypes.EPHEMERAL_ADD_TO_CHANNEL ||
- isUserActivityPost(post.type)
+ post.type === PostTypes.EPHEMERAL_ADD_TO_CHANNEL
  ) {
  continue;
  }
 
- const postCtl = (
- <Post
- ref={post.id}
- key={'post ' + (post.id || post.pending_post_id)}
- post={post}
- shouldHighlight={this.props.focusedPostId === post.id}
- previousPostId={previousPostId}
- />
- );
+ if (isCombinedUserActivityPost(post.id)) {
+ postCtl = (
+ <CombinedUserActivityPost
+ combinedId={post.id}
+ previousPostId={previousPostId}
+ />
+ );
+ } else {
+ postCtl = (
+ <Post
+ ref={post.id}
+ key={'post ' + (post.id || post.pending_post_id)}
+ post={post}
+ shouldHighlight={this.props.focusedPostId === post.id}
+ previousPostId={previousPostId}
+ />
+ );
+ }
 
  const currentPostDay = Utils.getDateForUnixTicks(post.create_at);
  if (currentPostDay.toDateString() !== previousPostDay.toDateString()) {

components/post_view/post_list_row/__snapshots__/post_list_row.test.jsx.snap

@@ -12,7 +12,7 @@ exports[`components/post_view/post_list_row should render channel intro message
 
 exports[`components/post_view/post_list_row should render combined post 1`] = `
 <Connect(Connect(Post))
- combinedId="user-activity--1234-5678"
+ combinedId="user-activity-1234-5678"
  previousPostId="abcd"
  shouldHighlight={false}
 />

components/post_view/post_list_row/post_list_row.test.jsx

@@ -87,7 +87,7 @@ describe('components/post_view/post_list_row', () => {
  test('should render combined post', () => {
  const props = {
  shouldHighlight: false,
- listId: `${PostListUtils.COMBINED_USER_ACTIVITY}-1234-5678`,
+ listId: `${PostListUtils.COMBINED_USER_ACTIVITY}1234-5678`,
  previousListId: 'abcd',
  };
  const wrapper = shallowWithIntl(

package.json

@@ -32,7 +32,7 @@
  "localforage-observable": "2.0.0",
  "mark.js": "8.11.1",
  "marked": "github:mattermost/marked#e57e07f419f85178354a3bbbd60de5302483c436",
- "mattermost-redux": "github:mattermost/mattermost-redux#6bddbe0f9331b011e71e9e0aaff47702e4a0ece4",
+ "mattermost-redux": "github:mattermost/mattermost-redux#0855bc18bcd2edc252dc1aa6f45a296151f7a943",
  "moment-timezone": "0.5.25",
  "pdfjs-dist": "2.0.489",
  "perfect-scrollbar": "0.8.1",

selectors/posts.js

@@ -4,6 +4,9 @@
 import {createSelector} from 'reselect';
 import {getPost} from 'mattermost-redux/selectors/entities/posts';
 import {getBool as getBoolPreference} from 'mattermost-redux/selectors/entities/preferences';
+import {memoizeResult} from 'mattermost-redux/utils/helpers';
+import {isUserActivityPost} from 'mattermost-redux/utils/post_utils';
+import * as PostListUtils from 'mattermost-redux/utils/post_list';
 
 import {getGlobalItem} from 'selectors/storage';
 import {Preferences, StoragePrefixes} from 'utils/constants';
@@ -39,3 +42,53 @@ export function isEmbedVisible(state, postId) {
 export function shouldShowJoinLeaveMessages(state) {
  return getBoolPreference(state, Preferences.CATEGORY_ADVANCED_SETTINGS, Preferences.ADVANCED_FILTER_JOIN_LEAVE, true);
 }
+
+export function makeCombineUserActivityFromPosts() {
+ return memoizeResult(
+ (posts) => {
+ let lastPostIsUserActivity = false;
+ let combinedCount = 0;
+
+ const out = [];
+ let changed = false;
+
+ for (const post of posts) {
+ const postIsUserActivity = isUserActivityPost(post.type);
+
+ if (postIsUserActivity && lastPostIsUserActivity && combinedCount < PostListUtils.MAX_COMBINED_SYSTEM_POSTS) {
+ // Add the ID to the previous combined post
+ out[out.length - 1].id += '_' + post.id;
+
+ combinedCount += 1;
+
+ changed = true;
+ } else if (postIsUserActivity) {
+ // Start a new combined post, even if the "combined" post is only a single post
+ const formattedPost = {
+ ...post,
+ id: PostListUtils.COMBINED_USER_ACTIVITY + post.id,
+ };
+
+ out.push(formattedPost);
+
+ combinedCount = 1;
+
+ changed = true;
+ } else {
+ out.push(post);
+
+ combinedCount = 0;
+ }
+
+ lastPostIsUserActivity = postIsUserActivity;
+ }
+
+ if (!changed) {
+ // Nothing was combined, so return the original array
+ return posts;
+ }
+
+ return out;
+ },
+ );
+}

selectors/posts.test.js

@@ -0,0 +1,84 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {Posts} from 'mattermost-redux/constants';
+import * as PostListUtils from 'mattermost-redux/utils/post_list';
+
+import {makeCombineUserActivityFromPosts} from './posts';
+
+describe('makeCombineUserActivityFromPosts', () => {
+ test('should do nothing if no post IDs are provided', () => {
+ const combineUserActivityPosts = makeCombineUserActivityFromPosts();
+
+ const posts = [];
+
+ const result = combineUserActivityPosts(posts);
+
+ expect(result).toBe(posts);
+ expect(result).toEqual([]);
+ });
+
+ test('should do nothing if there are no user activity posts', () => {
+ const combineUserActivityPosts = makeCombineUserActivityFromPosts();
+ const posts = [
+ {id: 'post1'},
+ {id: 'post2'},
+ {id: 'post3'},
+ ];
+ const result = combineUserActivityPosts(posts);
+
+ expect(result).toBe(posts);
+ });
+
+ test('should combine adjacent user activity posts', () => {
+ const combineUserActivityPosts = makeCombineUserActivityFromPosts();
+
+ const posts = [
+ {id: 'post1', type: Posts.POST_TYPES.JOIN_CHANNEL},
+ {id: 'post2', type: Posts.POST_TYPES.LEAVE_CHANNEL},
+ {id: 'post3', type: Posts.POST_TYPES.ADD_TO_CHANNEL},
+ ];
+
+ const result = combineUserActivityPosts(posts);
+
+ expect(result).not.toBe(posts);
+ expect(result).toEqual([
+ {id: PostListUtils.COMBINED_USER_ACTIVITY + 'post1_post2_post3', type: Posts.POST_TYPES.JOIN_CHANNEL},
+ ]);
+ });
+
+ test('should not combine with regular messages', () => {
+ const combineUserActivityPosts = makeCombineUserActivityFromPosts();
+
+ const posts = [
+ {id: 'post1', type: Posts.POST_TYPES.JOIN_CHANNEL},
+ {id: 'post2', type: Posts.POST_TYPES.JOIN_CHANNEL},
+ {id: 'post3'},
+ {id: 'post4', type: Posts.POST_TYPES.ADD_TO_CHANNEL},
+ {id: 'post5', type: Posts.POST_TYPES.ADD_TO_CHANNEL},
+ ];
+
+ const result = combineUserActivityPosts(posts);
+
+ expect(result).not.toBe(posts);
+ expect(result).toEqual([
+ {id: PostListUtils.COMBINED_USER_ACTIVITY + 'post1_post2', type: Posts.POST_TYPES.JOIN_CHANNEL},
+ {id: 'post3'},
+ {id: PostListUtils.COMBINED_USER_ACTIVITY + 'post4_post5', type: Posts.POST_TYPES.ADD_TO_CHANNEL},
+ ]);
+ });
+
+ test('should not combine more than 100 posts', () => {
+ const combineUserActivityPosts = makeCombineUserActivityFromPosts();
+
+ const posts = [];
+ for (let i = 0; i < 110; i++) {
+ const postId = `post${i}`;
+ posts.push({id: postId, type: Posts.POST_TYPES.JOIN_CHANNEL});
+ }
+
+ const result = combineUserActivityPosts(posts);
+
+ expect(result).toHaveLength(2);
+ });
+});