toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

[MM-15668] Member list items are selectable and enabled only when canManagerUsers is true (#2844)

Browse source 
* Member list items are selectable only when canManagerUsers is true

* Address review comment
This commit is contained in:
Miguel Alatzar 2019-06-16 11:15:50 -07:00 committed by Miguel Alatzar
parent a565c96fcf
commit 630a3db2a6
3 changed files with 169 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
app/screens/channel_members/__snapshots__/channel_members.test.js.snap Normal file
View file

@ -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)>
`;

34
app/screens/channel_members/channel_members.js
View file

@ -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>

60
app/screens/channel_members/channel_members.test.js Normal file
View file

@ -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);
});
});