From 217ef59f1c31ff4bac7e35112f7ecdaa328c50bb Mon Sep 17 00:00:00 2001
From: Farhan Munshi <3207297+fm2munsh@users.noreply.github.com>
Date: Mon, 16 Mar 2020 11:29:13 -0400
Subject: [PATCH] [MM-23271] Check canAddReaction permission inside of render
 reactions (#4032)

* MM-23271 check canAddReaction when creating in reactions component

* MM-23271 Fixing linting
---
 .../__snapshots__/reactions.test.js.snap      | 289 ++++++++++++++++++
 app/components/reactions/reactions.js         |   4 +-
 app/components/reactions/reactions.test.js    |  47 +++
 3 files changed, 338 insertions(+), 2 deletions(-)
 create mode 100644 app/components/reactions/__snapshots__/reactions.test.js.snap
 create mode 100644 app/components/reactions/reactions.test.js

diff --git a/app/components/reactions/__snapshots__/reactions.test.js.snap b/app/components/reactions/__snapshots__/reactions.test.js.snap
new file mode 100644
index 000000000..5e9a4d9ba
--- /dev/null
+++ b/app/components/reactions/__snapshots__/reactions.test.js.snap
@@ -0,0 +1,289 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Reactions should match snapshot 1`] = `
+<View
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "flex": 1,
+      "flexDirection": "row",
+      "flexWrap": "wrap",
+    }
+  }
+>
+  <Reaction
+    count={1}
+    emojiName="frowning_face"
+    highlight={true}
+    onLongPress={[Function]}
+    onPress={[Function]}
+    postId="post-id"
+    theme={
+      Object {
+        "awayIndicator": "#ffbc42",
+        "buttonBg": "#166de0",
+        "buttonColor": "#ffffff",
+        "centerChannelBg": "#ffffff",
+        "centerChannelColor": "#3d3c40",
+        "codeTheme": "github",
+        "dndIndicator": "#f74343",
+        "errorTextColor": "#fd5960",
+        "linkColor": "#2389d7",
+        "mentionBg": "#ffffff",
+        "mentionBj": "#ffffff",
+        "mentionColor": "#145dbf",
+        "mentionHighlightBg": "#ffe577",
+        "mentionHighlightLink": "#166de0",
+        "newMessageSeparator": "#ff8800",
+        "onlineIndicator": "#06d6a0",
+        "sidebarBg": "#145dbf",
+        "sidebarHeaderBg": "#1153ab",
+        "sidebarHeaderTextColor": "#ffffff",
+        "sidebarText": "#ffffff",
+        "sidebarTextActiveBorder": "#579eff",
+        "sidebarTextActiveColor": "#ffffff",
+        "sidebarTextHoverBg": "#4578bf",
+        "sidebarUnreadText": "#ffffff",
+        "type": "Mattermost",
+      }
+    }
+  />
+  <Reaction
+    count={1}
+    emojiName="grinning"
+    highlight={true}
+    onLongPress={[Function]}
+    onPress={[Function]}
+    postId="post-id"
+    theme={
+      Object {
+        "awayIndicator": "#ffbc42",
+        "buttonBg": "#166de0",
+        "buttonColor": "#ffffff",
+        "centerChannelBg": "#ffffff",
+        "centerChannelColor": "#3d3c40",
+        "codeTheme": "github",
+        "dndIndicator": "#f74343",
+        "errorTextColor": "#fd5960",
+        "linkColor": "#2389d7",
+        "mentionBg": "#ffffff",
+        "mentionBj": "#ffffff",
+        "mentionColor": "#145dbf",
+        "mentionHighlightBg": "#ffe577",
+        "mentionHighlightLink": "#166de0",
+        "newMessageSeparator": "#ff8800",
+        "onlineIndicator": "#06d6a0",
+        "sidebarBg": "#145dbf",
+        "sidebarHeaderBg": "#1153ab",
+        "sidebarHeaderTextColor": "#ffffff",
+        "sidebarText": "#ffffff",
+        "sidebarTextActiveBorder": "#579eff",
+        "sidebarTextActiveColor": "#ffffff",
+        "sidebarTextHoverBg": "#4578bf",
+        "sidebarUnreadText": "#ffffff",
+        "type": "Mattermost",
+      }
+    }
+  />
+  <Reaction
+    count={1}
+    emojiName="sweat"
+    highlight={true}
+    onLongPress={[Function]}
+    onPress={[Function]}
+    postId="post-id"
+    theme={
+      Object {
+        "awayIndicator": "#ffbc42",
+        "buttonBg": "#166de0",
+        "buttonColor": "#ffffff",
+        "centerChannelBg": "#ffffff",
+        "centerChannelColor": "#3d3c40",
+        "codeTheme": "github",
+        "dndIndicator": "#f74343",
+        "errorTextColor": "#fd5960",
+        "linkColor": "#2389d7",
+        "mentionBg": "#ffffff",
+        "mentionBj": "#ffffff",
+        "mentionColor": "#145dbf",
+        "mentionHighlightBg": "#ffe577",
+        "mentionHighlightLink": "#166de0",
+        "newMessageSeparator": "#ff8800",
+        "onlineIndicator": "#06d6a0",
+        "sidebarBg": "#145dbf",
+        "sidebarHeaderBg": "#1153ab",
+        "sidebarHeaderTextColor": "#ffffff",
+        "sidebarText": "#ffffff",
+        "sidebarTextActiveBorder": "#579eff",
+        "sidebarTextActiveColor": "#ffffff",
+        "sidebarTextHoverBg": "#4578bf",
+        "sidebarUnreadText": "#ffffff",
+        "type": "Mattermost",
+      }
+    }
+  />
+  <TouchableWithFeedbackIOS
+    onPress={[Function]}
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "borderColor": "rgba(61,60,64,0.3)",
+          "borderRadius": 2,
+          "borderWidth": 1,
+          "flexDirection": "row",
+          "height": 30,
+          "justifyContent": "center",
+          "marginBottom": 5,
+          "marginRight": 6,
+          "marginTop": 10,
+          "paddingHorizontal": 6,
+          "paddingVertical": 2,
+          "width": 40,
+        },
+      ]
+    }
+    type="opacity"
+  >
+    <Image
+      source={
+        Object {
+          "testUri": "../../../dist/assets/images/icons/reaction.png",
+        }
+      }
+      style={
+        Object {
+          "height": 20,
+          "tintColor": "rgba(61,60,64,0.5)",
+          "width": 23,
+        }
+      }
+    />
+  </TouchableWithFeedbackIOS>
+</View>
+`;
+
+exports[`Reactions should match snapshot with canAddReaction = false 1`] = `
+<View
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "flex": 1,
+      "flexDirection": "row",
+      "flexWrap": "wrap",
+    }
+  }
+>
+  <Reaction
+    count={1}
+    emojiName="frowning_face"
+    highlight={true}
+    onLongPress={[Function]}
+    onPress={[Function]}
+    postId="post-id"
+    theme={
+      Object {
+        "awayIndicator": "#ffbc42",
+        "buttonBg": "#166de0",
+        "buttonColor": "#ffffff",
+        "centerChannelBg": "#ffffff",
+        "centerChannelColor": "#3d3c40",
+        "codeTheme": "github",
+        "dndIndicator": "#f74343",
+        "errorTextColor": "#fd5960",
+        "linkColor": "#2389d7",
+        "mentionBg": "#ffffff",
+        "mentionBj": "#ffffff",
+        "mentionColor": "#145dbf",
+        "mentionHighlightBg": "#ffe577",
+        "mentionHighlightLink": "#166de0",
+        "newMessageSeparator": "#ff8800",
+        "onlineIndicator": "#06d6a0",
+        "sidebarBg": "#145dbf",
+        "sidebarHeaderBg": "#1153ab",
+        "sidebarHeaderTextColor": "#ffffff",
+        "sidebarText": "#ffffff",
+        "sidebarTextActiveBorder": "#579eff",
+        "sidebarTextActiveColor": "#ffffff",
+        "sidebarTextHoverBg": "#4578bf",
+        "sidebarUnreadText": "#ffffff",
+        "type": "Mattermost",
+      }
+    }
+  />
+  <Reaction
+    count={1}
+    emojiName="grinning"
+    highlight={true}
+    onLongPress={[Function]}
+    onPress={[Function]}
+    postId="post-id"
+    theme={
+      Object {
+        "awayIndicator": "#ffbc42",
+        "buttonBg": "#166de0",
+        "buttonColor": "#ffffff",
+        "centerChannelBg": "#ffffff",
+        "centerChannelColor": "#3d3c40",
+        "codeTheme": "github",
+        "dndIndicator": "#f74343",
+        "errorTextColor": "#fd5960",
+        "linkColor": "#2389d7",
+        "mentionBg": "#ffffff",
+        "mentionBj": "#ffffff",
+        "mentionColor": "#145dbf",
+        "mentionHighlightBg": "#ffe577",
+        "mentionHighlightLink": "#166de0",
+        "newMessageSeparator": "#ff8800",
+        "onlineIndicator": "#06d6a0",
+        "sidebarBg": "#145dbf",
+        "sidebarHeaderBg": "#1153ab",
+        "sidebarHeaderTextColor": "#ffffff",
+        "sidebarText": "#ffffff",
+        "sidebarTextActiveBorder": "#579eff",
+        "sidebarTextActiveColor": "#ffffff",
+        "sidebarTextHoverBg": "#4578bf",
+        "sidebarUnreadText": "#ffffff",
+        "type": "Mattermost",
+      }
+    }
+  />
+  <Reaction
+    count={1}
+    emojiName="sweat"
+    highlight={true}
+    onLongPress={[Function]}
+    onPress={[Function]}
+    postId="post-id"
+    theme={
+      Object {
+        "awayIndicator": "#ffbc42",
+        "buttonBg": "#166de0",
+        "buttonColor": "#ffffff",
+        "centerChannelBg": "#ffffff",
+        "centerChannelColor": "#3d3c40",
+        "codeTheme": "github",
+        "dndIndicator": "#f74343",
+        "errorTextColor": "#fd5960",
+        "linkColor": "#2389d7",
+        "mentionBg": "#ffffff",
+        "mentionBj": "#ffffff",
+        "mentionColor": "#145dbf",
+        "mentionHighlightBg": "#ffe577",
+        "mentionHighlightLink": "#166de0",
+        "newMessageSeparator": "#ff8800",
+        "onlineIndicator": "#06d6a0",
+        "sidebarBg": "#145dbf",
+        "sidebarHeaderBg": "#1153ab",
+        "sidebarHeaderTextColor": "#ffffff",
+        "sidebarText": "#ffffff",
+        "sidebarTextActiveBorder": "#579eff",
+        "sidebarTextActiveColor": "#ffffff",
+        "sidebarTextHoverBg": "#4578bf",
+        "sidebarUnreadText": "#ffffff",
+        "type": "Mattermost",
+      }
+    }
+  />
+</View>
+`;
diff --git a/app/components/reactions/reactions.js b/app/components/reactions/reactions.js
index 1a1d3dd1e..508e6efff 100644
--- a/app/components/reactions/reactions.js
+++ b/app/components/reactions/reactions.js
@@ -133,7 +133,7 @@ export default class Reactions extends PureComponent {
     };
 
     render() {
-        const {position, reactions, canAddMoreReactions} = this.props;
+        const {position, reactions, canAddMoreReactions, canAddReaction} = this.props;
         const styles = getStyleSheet(this.props.theme);
 
         if (!reactions) {
@@ -141,7 +141,7 @@ export default class Reactions extends PureComponent {
         }
 
         let addMoreReactions = null;
-        if (canAddMoreReactions) {
+        if (canAddReaction && canAddMoreReactions) {
             addMoreReactions = (
                 <TouchableWithFeedback
                     key='addReaction'
diff --git a/app/components/reactions/reactions.test.js b/app/components/reactions/reactions.test.js
new file mode 100644
index 000000000..2e58d7757
--- /dev/null
+++ b/app/components/reactions/reactions.test.js
@@ -0,0 +1,47 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import Reactions from './reactions';
+
+import Preferences from 'mattermost-redux/constants/preferences';
+
+describe('Reactions', () => {
+    const baseProps = {
+        actions: {
+            addReaction: jest.fn(),
+            getReactionsForPost: jest.fn(),
+            removeReaction: jest.fn(),
+        },
+        canAddReaction: true,
+        canAddMoreReactions: true,
+        canRemoveReaction: true,
+        currentUserId: 'current-user-id',
+        position: 'right',
+        postId: 'post-id',
+        reactions: {
+            'current-user-id-frowning_face': {create_at: 1, emoji_name: 'frowning_face', post_id: 'post-id', user_id: 'current-user-id'},
+            'current-user-id-grinning': {create_at: 1, emoji_name: 'grinning', post_id: 'post-id', user_id: 'current-user-id'},
+            'current-user-id-sweat': {create_at: 1, emoji_name: 'sweat', post_id: 'post-id', user_id: 'current-user-id'},
+        },
+        theme: Preferences.THEMES.default,
+
+    };
+
+    test('should match snapshot', () => {
+        const wrapper = shallow(<Reactions {...baseProps}/>);
+        expect(wrapper.getElement()).toMatchSnapshot();
+    });
+
+    test('should match snapshot with canAddReaction = false', () => {
+        const wrapper = shallow(
+            <Reactions
+                {...baseProps}
+                canAddReaction={false}
+            />,
+        );
+        expect(wrapper.getElement()).toMatchSnapshot();
+    });
+});