From 630a3db2a6fdaf4de1e77393119a0cd06dd1b4b8 Mon Sep 17 00:00:00 2001
From: Miguel Alatzar <migbot@users.noreply.github.com>
Date: Sun, 16 Jun 2019 11:15:50 -0700
Subject: [PATCH] [MM-15668] Member list items are selectable and enabled only
 when canManagerUsers is true (#2844)

* Member list items are selectable only when canManagerUsers is true

* Address review comment
---
 .../channel_members.test.js.snap              | 85 +++++++++++++++++++
 .../channel_members/channel_members.js        | 34 +++++---
 .../channel_members/channel_members.test.js   | 60 +++++++++++++
 3 files changed, 169 insertions(+), 10 deletions(-)
 create mode 100644 app/screens/channel_members/__snapshots__/channel_members.test.js.snap
 create mode 100644 app/screens/channel_members/channel_members.test.js

diff --git a/app/screens/channel_members/__snapshots__/channel_members.test.js.snap b/app/screens/channel_members/__snapshots__/channel_members.test.js.snap
new file mode 100644
index 000000000..638fd1a58
--- /dev/null
+++ b/app/screens/channel_members/__snapshots__/channel_members.test.js.snap
@@ -0,0 +1,85 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ChannelMembers should match snapshot 1`] = `
+<ForwardRef(forwardConnectRef)>
+  <Connect(StatusBar) />
+  <View
+    style={
+      Object {
+        "marginVertical": 5,
+      }
+    }
+  >
+    <SearchBarIos
+      autoCapitalize="none"
+      backgroundColor="transparent"
+      blurOnSubmit={true}
+      cancelTitle="Cancel"
+      inputHeight={33}
+      inputStyle={
+        Object {
+          "backgroundColor": "rgba(61,60,64,0.2)",
+          "color": "#3d3c40",
+          "fontSize": 15,
+        }
+      }
+      leftComponent={null}
+      onBlur={[Function]}
+      onCancelButtonPress={[Function]}
+      onChangeText={[Function]}
+      onFocus={[Function]}
+      onSearchButtonPress={[Function]}
+      onSelectionChange={[Function]}
+      placeholder="Search"
+      placeholderTextColor="rgba(61,60,64,0.5)"
+      searchIconCollapsedMargin={10}
+      searchIconExpandedMargin={10}
+      tintColorDelete="rgba(61,60,64,0.5)"
+      tintColorSearch="rgba(61,60,64,0.5)"
+      titleCancelColor="#3d3c40"
+      value=""
+    />
+  </View>
+  <CustomList
+    data={Array []}
+    extraData={Object {}}
+    listType="section"
+    loading={false}
+    loadingComponent={null}
+    noResults={null}
+    onLoadMore={[Function]}
+    onRowPress={[Function]}
+    renderItem={[Function]}
+    shouldRenderSeparator={true}
+    showNoResults={true}
+    theme={
+      Object {
+        "awayIndicator": "#ffbc42",
+        "buttonBg": "#166de0",
+        "buttonColor": "#ffffff",
+        "centerChannelBg": "#ffffff",
+        "centerChannelColor": "#3d3c40",
+        "codeTheme": "github",
+        "dndIndicator": "#f74343",
+        "errorTextColor": "#fd5960",
+        "linkColor": "#2389d7",
+        "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",
+      }
+    }
+  />
+</ForwardRef(forwardConnectRef)>
+`;
diff --git a/app/screens/channel_members/channel_members.js b/app/screens/channel_members/channel_members.js
index 1eb4fc40d..d3149d13c 100644
--- a/app/screens/channel_members/channel_members.js
+++ b/app/screens/channel_members/channel_members.js
@@ -225,20 +225,34 @@ export default class ChannelMembers extends PureComponent {
         });
     };
 
-    renderItem = (props) => {
-        // The list will re-render when the selection changes because it's passed into the list as extraData
-        const selected = this.state.selectedIds[props.id];
-        const enabled = props.id !== this.props.currentUserId;
-
+    renderItem = (props, selectProps) => {
         return (
             <UserListRow
                 key={props.id}
                 {...props}
-                selectable={true}
-                selected={selected}
-                enabled={enabled}
+                {...selectProps}
             />
         );
+    }
+
+    renderSelectableItem = (props) => {
+        // The list will re-render when the selection changes because selectedIds is passed into the list as extraData
+        const selectProps = {
+            selectable: true,
+            selected: this.state.selectedIds[props.id],
+            enabled: props.id !== this.props.currentUserId,
+        };
+
+        this.renderItem(props, selectProps);
+    }
+
+    renderUnselectableItem = (props) => {
+        const selectProps = {
+            selectable: false,
+            enabled: false,
+        };
+
+        this.renderItem(props, selectProps);
     };
 
     renderLoading = () => {
@@ -292,7 +306,7 @@ export default class ChannelMembers extends PureComponent {
 
     render() {
         const {formatMessage} = this.context.intl;
-        const {theme} = this.props;
+        const {theme, canManageUsers} = this.props;
         const {
             removing,
             loading,
@@ -374,7 +388,7 @@ export default class ChannelMembers extends PureComponent {
                     noResults={this.renderNoResults()}
                     onLoadMore={this.getProfiles}
                     onRowPress={this.handleSelectProfile}
-                    renderItem={this.renderItem}
+                    renderItem={canManageUsers ? this.renderSelectableItem : this.renderUnselectableItem}
                     theme={theme}
                 />
             </KeyboardLayout>
diff --git a/app/screens/channel_members/channel_members.test.js b/app/screens/channel_members/channel_members.test.js
new file mode 100644
index 000000000..16da3a7d5
--- /dev/null
+++ b/app/screens/channel_members/channel_members.test.js
@@ -0,0 +1,60 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import React from 'react';
+
+import Preferences from 'mattermost-redux/constants/preferences';
+
+import {shallowWithIntl} from 'test/intl-test-helper';
+
+import CustomList from 'app/components/custom_list';
+import ChannelMembers from './channel_members';
+
+describe('ChannelMembers', () => {
+    const navigator = {
+        setOnNavigatorEvent: jest.fn(),
+        setButtons: jest.fn(),
+    };
+
+    const baseProps = {
+        theme: Preferences.THEMES.default,
+        currentUserId: 'current-user-id',
+        currentChannelId: 'current-channel-id',
+        canManageUsers: false,
+        actions: {
+            getProfilesInChannel: jest.fn().mockImplementation(() => Promise.resolve()),
+            handleRemoveChannelMembers: jest.fn(),
+            searchProfiles: jest.fn(),
+        },
+        navigator,
+    };
+
+    test('should match snapshot', () => {
+        const wrapper = shallowWithIntl(
+            <ChannelMembers {...baseProps}/>,
+        );
+
+        expect(wrapper.getElement()).toMatchSnapshot();
+    });
+
+    test('should use renderUnselectableItem when canManagerUsers is false', () => {
+        const props = {...baseProps, canManageUsers: false};
+
+        const wrapper = shallowWithIntl(
+            <ChannelMembers {...props}/>,
+        );
+
+        const renderItem = wrapper.find(CustomList).props().renderItem;
+        expect(renderItem).toEqual(wrapper.instance().renderUnselectableItem);
+    });
+
+    test('should use renderSelectableItem when canManagerUsers is true', () => {
+        const props = {...baseProps, canManageUsers: true};
+
+        const wrapper = shallowWithIntl(
+            <ChannelMembers {...props}/>,
+        );
+
+        const renderItem = wrapper.find(CustomList).props().renderItem;
+        expect(renderItem).toEqual(wrapper.instance().renderSelectableItem);
+    });
+});
\ No newline at end of file