[MM-17409]Always show the DotMenu component in RHS, if webapp i… (mat…

…termost#3534) * If in mobile view, always show the DotMenu Component in the RHS * Add test to check that <dotMenu> component shows up when isMobile returns true
outofgamut · Aug 27, 2019 · 7a7f24c · 7a7f24c
1 parent 62b8069
commit 7a7f24c
Show file tree

Hide file tree

Showing 3 changed files with 190 additions and 1 deletion.
diff --git a/components/rhs_comment/__snapshots__/rhs_comment.test.jsx.snap b/components/rhs_comment/__snapshots__/rhs_comment.test.jsx.snap
@@ -458,3 +458,178 @@ exports[`components/RhsComment should match snapshot hovered on deleted post 1`]
  </div>
 </div>
 `;
+
+exports[`components/RhsComment should match snapshot mobile 1`] = `
+<div
+ aria-label=""
+ className="a11y__section post post--thread same--root post--comment current--user post--compact"
+ id="rhsPost_id"
+ onFocus={[Function]}
+ onMouseLeave={[Function]}
+ onMouseOver={[Function]}
+ role="listitem"
+ tabIndex="-1"
+>
+ <div
+ className="post__content"
+ role="application"
+ >
+ <div
+ className="post__img"
+ >
+ <Connect(PostProfilePicture)
+ compactDisplay={true}
+ isBusy={false}
+ isRHS={true}
+ post={
+ Object {
+ "channel_id": "channel_id",
+ "create_at": 1502715365009,
+ "delete_at": 0,
+ "edit_at": 1502715372443,
+ "id": "id",
+ "is_pinned": false,
+ "message": "post message",
+ "original_id": "",
+ "parent_id": "",
+ "pending_post_id": "",
+ "props": Object {},
+ "root_id": "",
+ "type": "",
+ "update_at": 1502715372443,
+ "user_id": "user_id",
+ }
+ }
+ userId="user_id"
+ />
+ </div>
+ <div>
+ <div
+ className="post__header"
+ >
+ <div
+ className="col col__name"
+ >
+ <Connect(UserProfile)
+ hasMention={true}
+ isBusy={false}
+ isRHS={true}
+ userId="user_id"
+ />
+ </div>
+ <div
+ className="col"
+ >
+ <Connect(PostTime)
+ eventTime={1502715365009}
+ isPermalink={true}
+ location="RHS_COMMENT"
+ postId="id"
+ />
+ <Connect(PostFlagIcon)
+ isEphemeral={false}
+ isFlagged={true}
+ location="RHS_COMMENT"
+ postId="id"
+ />
+ </div>
+ <div
+ className="col col__reply"
+ >
+ <Connect(DotMenu)
+ enableEmojiPicker={true}
+ handleAddReactionClick={[Function]}
+ handleDropdownOpened={[Function]}
+ isFlagged={true}
+ isReadOnly={false}
+ location="RHS_COMMENT"
+ post={
+ Object {
+ "channel_id": "channel_id",
+ "create_at": 1502715365009,
+ "delete_at": 0,
+ "edit_at": 1502715372443,
+ "id": "id",
+ "is_pinned": false,
+ "message": "post message",
+ "original_id": "",
+ "parent_id": "",
+ "pending_post_id": "",
+ "props": Object {},
+ "root_id": "",
+ "type": "",
+ "update_at": 1502715372443,
+ "user_id": "user_id",
+ }
+ }
+ />
+ <Connect(PostReaction)
+ channelId="channel_id"
+ getDotMenuRef={[Function]}
+ location="RHS_COMMENT"
+ postId="id"
+ showEmojiPicker={false}
+ teamId="team_id"
+ toggleEmojiPicker={[Function]}
+ />
+ </div>
+ </div>
+ <div
+ className="post__body"
+ >
+ <div
+ className=" post--edited"
+ >
+ <MessageWithAdditionalContent
+ isEmbedVisible={false}
+ pluginPostTypes={Object {}}
+ post={
+ Object {
+ "channel_id": "channel_id",
+ "create_at": 1502715365009,
+ "delete_at": 0,
+ "edit_at": 1502715372443,
+ "id": "id",
+ "is_pinned": false,
+ "message": "post message",
+ "original_id": "",
+ "parent_id": "",
+ "pending_post_id": "",
+ "props": Object {},
+ "root_id": "",
+ "type": "",
+ "update_at": 1502715372443,
+ "user_id": "user_id",
+ }
+ }
+ previewCollapsed=""
+ previewEnabled={false}
+ />
+ </div>
+ <Connect(ReactionList)
+ isReadOnly={false}
+ post={
+ Object {
+ "channel_id": "channel_id",
+ "create_at": 1502715365009,
+ "delete_at": 0,
+ "edit_at": 1502715372443,
+ "id": "id",
+ "is_pinned": false,
+ "message": "post message",
+ "original_id": "",
+ "parent_id": "",
+ "pending_post_id": "",
+ "props": Object {},
+ "root_id": "",
+ "type": "",
+ "update_at": 1502715372443,
+ "user_id": "user_id",
+ }
+ }
+ />
+ </div>
+ </div>
+ </div>
+</div>
+`;
diff --git a/components/rhs_comment/rhs_comment.jsx b/components/rhs_comment/rhs_comment.jsx
@@ -345,7 +345,7 @@ export default class RhsComment extends React.PureComponent {
  );
  } else if (isPostDeleted) {
  options = null;
- } else if (!isSystemMessage && (this.state.hover || this.state.a11yActive || this.state.dropdownOpened || this.state.showEmojiPicker)) {
+ } else if (!isSystemMessage && (isMobile() || this.state.hover || this.state.a11yActive || this.state.dropdownOpened || this.state.showEmojiPicker)) {
  const dotMenu = (
  <DotMenu
  post={this.props.post}

diff --git a/components/rhs_comment/rhs_comment.test.jsx b/components/rhs_comment/rhs_comment.test.jsx
@@ -15,6 +15,11 @@ jest.mock('utils/post_utils.jsx', () => ({
  fromAutoResponder: jest.fn().mockReturnValue(false),
 }));
 
+import {isMobile} from 'utils/utils';
+jest.mock('utils/utils', () => ({
+ isMobile: jest.fn(),
+}));
+
 describe('components/RhsComment', () => {
  let post;
  let defaultProps;
@@ -79,6 +84,15 @@ describe('components/RhsComment', () => {
  expect(wrapper).toMatchSnapshot();
  });
 
+ test('should match snapshot mobile', () => {
+ isMobile.mockImplementation(() => true);
+ const wrapper = shallowWithIntl(
+ <RhsComment {...defaultProps}/>
+ );
+
+ expect(wrapper).toMatchSnapshot();
+ });
+
  test('should match snapshot hovered on deleted post', () => {
  const props = {
  ...defaultProps,