diff --git a/lib/types/thread-permission-types.js b/lib/types/thread-permission-types.js --- a/lib/types/thread-permission-types.js +++ b/lib/types/thread-permission-types.js @@ -84,6 +84,236 @@ export type ThreadPermissionFilterPrefix = $Values< typeof threadPermissionFilterPrefixes, >; + +export const userSurfacedPermissions = Object.freeze({ + EDIT_ENTRIES: 'edit_entries', + SEE_SECRET_CHANNELS: 'see_secret_channels', + SPEAK_IN_ANNOUNCEMENT_CHANNELS: 'speak_in_announcement_channels', + CREATE_AND_EDIT_CHANNELS: 'create_and_edit_channels', + DELETE_CHANNELS: 'delete_channels', + ADD_MEMBERS: 'add_members', + REMOVE_MEMBERS: 'remove_members', + CHANGE_ROLES: 'change_roles', + EDIT_VISIBILITY: 'edit_visibility', + MANAGE_PINS: 'manage_pins', + REACT_TO_MESSAGES: 'react_to_messages', + EDIT_MESSAGES: 'edit_messages', + MANAGE_INVITE_LINKS: 'manage_invite_links', +}); +export type UserSurfacedPermission = $Values; + +const calendarEditPermission = { + title: 'Edit calendar', + description: 'Allows members to edit the community calendar', + userSurfacedPermission: userSurfacedPermissions.EDIT_ENTRIES, +}; +const editEntries = threadPermissions.EDIT_ENTRIES; +const descendantEditEntries = + threadPermissionPropagationPrefixes.DESCENDANT + + threadPermissions.EDIT_ENTRIES; + +const secretChannelsPermission = { + title: 'See secret channels', + description: 'Allows members to see all secret channels', + userSurfacedPermission: userSurfacedPermissions.SEE_SECRET_CHANNELS, +}; +const descendantKnowOf = + threadPermissionPropagationPrefixes.DESCENDANT + threadPermissions.KNOW_OF; +const descendantVisible = + threadPermissionPropagationPrefixes.DESCENDANT + threadPermissions.VISIBLE; + +const voicedPermission = { + title: 'Speak in announcement channels', + description: 'Allows members to speak in announcement channels', + userSurfacedPermission: + userSurfacedPermissions.SPEAK_IN_ANNOUNCEMENT_CHANNELS, +}; +const voiced = threadPermissions.VOICED; + +const createAndEditChannelsPermission = { + title: 'Create and edit channels', + description: 'Allows members to create new and edit existing channels', + userSurfacedPermission: userSurfacedPermissions.CREATE_AND_EDIT_CHANNELS, +}; +const editThreadName = threadPermissions.EDIT_THREAD_NAME; +const descendantEditThreadName = + threadPermissionPropagationPrefixes.DESCENDANT + + threadPermissions.EDIT_THREAD_NAME; +const editThreadDescription = threadPermissions.EDIT_THREAD_DESCRIPTION; +const descendantEditThreadDescription = + threadPermissionPropagationPrefixes.DESCENDANT + + threadPermissions.EDIT_THREAD_DESCRIPTION; +const editThreadColor = threadPermissions.EDIT_THREAD_COLOR; +const descendantEditThreadColor = + threadPermissionPropagationPrefixes.DESCENDANT + + threadPermissions.EDIT_THREAD_COLOR; +const createSubchannels = threadPermissions.CREATE_SUBCHANNELS; +const descendantCreateSubchannels = + threadPermissionPropagationPrefixes.DESCENDANT + + threadPermissionFilterPrefixes.TOP_LEVEL + + threadPermissions.CREATE_SUBCHANNELS; +const editThreadAvatar = threadPermissions.EDIT_THREAD_AVATAR; +const descendantEditThreadAvatar = + threadPermissionPropagationPrefixes.DESCENDANT + + threadPermissions.EDIT_THREAD_AVATAR; + +const deleteChannelsPermission = { + title: 'Delete channels', + description: 'Allows members to delete channels', + userSurfacedPermission: userSurfacedPermissions.DELETE_CHANNELS, +}; +const deleteThread = threadPermissions.DELETE_THREAD; +const descendantDeleteThread = + threadPermissionPropagationPrefixes.DESCENDANT + + threadPermissions.DELETE_THREAD; + +const addMembersPermission = { + title: 'Add members', + description: 'Allows members to add other members to channels', + userSurfacedPermission: userSurfacedPermissions.ADD_MEMBERS, +}; +const addMembers = threadPermissions.ADD_MEMBERS; +const descendantAddMembers = + threadPermissionPropagationPrefixes.DESCENDANT + + threadPermissions.ADD_MEMBERS; + +const removeMembersPermission = { + title: 'Remove members', + description: 'Allows members to remove other members from channels', + userSurfacedPermission: userSurfacedPermissions.REMOVE_MEMBERS, +}; +const removeMembers = threadPermissions.REMOVE_MEMBERS; +const descendantRemoveMembers = + threadPermissionPropagationPrefixes.DESCENDANT + + threadPermissions.REMOVE_MEMBERS; + +const changeRolePermission = { + title: 'Change roles', + description: 'Allows members to change the roles of other members', + userSurfacedPermission: userSurfacedPermissions.CHANGE_ROLES, +}; +const changeRole = threadPermissions.CHANGE_ROLE; +const descendantChangeRole = + threadPermissionPropagationPrefixes.DESCENDANT + + threadPermissions.CHANGE_ROLE; + +const editVisibilityPermission = { + title: 'Edit visibility', + description: 'Allows members to edit visibility permissions of channels', + userSurfacedPermission: userSurfacedPermissions.EDIT_VISIBILITY, +}; +const editPermissions = threadPermissions.EDIT_PERMISSIONS; +const descendantEditPermissions = + threadPermissionPropagationPrefixes.DESCENDANT + + threadPermissions.EDIT_PERMISSIONS; + +const managePinsPermission = { + title: 'Manage pins', + description: 'Allows members to pin or unpin messages in channels', + userSurfacedPermission: userSurfacedPermissions.MANAGE_PINS, +}; +const managePins = threadPermissions.MANAGE_PINS; +const descendantManagePins = + threadPermissionPropagationPrefixes.DESCENDANT + + threadPermissions.MANAGE_PINS; + +const reactToMessagePermission = { + title: 'React to messages', + description: 'Allows members to add reactions to messages', + userSurfacedPermission: userSurfacedPermissions.REACT_TO_MESSAGES, +}; +const reactToMessage = threadPermissions.REACT_TO_MESSAGE; +const descendantReactToMessage = + threadPermissionPropagationPrefixes.DESCENDANT + + threadPermissions.REACT_TO_MESSAGE; + +const editMessagePermission = { + title: 'Edit messages', + description: 'Allows members to edit their sent messages', + userSurfacedPermission: userSurfacedPermissions.EDIT_MESSAGES, +}; +const editMessage = threadPermissions.EDIT_MESSAGE; +const descendantEditMessage = + threadPermissionPropagationPrefixes.DESCENDANT + + threadPermissions.EDIT_MESSAGE; + +const manageInviteLinksPermission = { + title: 'Manage invite links', + description: 'Allows members to create and delete invite links', + userSurfacedPermission: userSurfacedPermissions.MANAGE_INVITE_LINKS, +}; +const manageInviteLinks = threadPermissions.MANAGE_INVITE_LINKS; +const descendantManageInviteLinks = + threadPermissionPropagationPrefixes.DESCENDANT + + threadPermissions.MANAGE_INVITE_LINKS; + +export type UserSurfacedPermissionOption = { + +title: string, + +description: string, + +userSurfacedPermission: UserSurfacedPermission, +}; +export const userSurfacedPermissionOptions: $ReadOnlySet = + new Set([ + calendarEditPermission, + secretChannelsPermission, + voicedPermission, + createAndEditChannelsPermission, + deleteChannelsPermission, + addMembersPermission, + removeMembersPermission, + changeRolePermission, + editVisibilityPermission, + managePinsPermission, + reactToMessagePermission, + editMessagePermission, + manageInviteLinksPermission, + ]); + +type ConfigurableCommunityPermission = { + +[permission: string]: UserSurfacedPermission, +}; +export const configurableCommunityPermissions: ConfigurableCommunityPermission = + Object.freeze({ + [editEntries]: userSurfacedPermissions.EDIT_ENTRIES, + [descendantEditEntries]: userSurfacedPermissions.EDIT_ENTRIES, + [descendantKnowOf]: userSurfacedPermissions.SEE_SECRET_CHANNELS, + [descendantVisible]: userSurfacedPermissions.SEE_SECRET_CHANNELS, + [voiced]: userSurfacedPermissions.SPEAK_IN_ANNOUNCEMENT_CHANNELS, + [editThreadName]: userSurfacedPermissions.CREATE_AND_EDIT_CHANNELS, + [descendantEditThreadName]: + userSurfacedPermissions.CREATE_AND_EDIT_CHANNELS, + [editThreadDescription]: userSurfacedPermissions.CREATE_AND_EDIT_CHANNELS, + [descendantEditThreadDescription]: + userSurfacedPermissions.CREATE_AND_EDIT_CHANNELS, + [editThreadColor]: userSurfacedPermissions.CREATE_AND_EDIT_CHANNELS, + [descendantEditThreadColor]: + userSurfacedPermissions.CREATE_AND_EDIT_CHANNELS, + [createSubchannels]: userSurfacedPermissions.CREATE_AND_EDIT_CHANNELS, + [descendantCreateSubchannels]: + userSurfacedPermissions.CREATE_AND_EDIT_CHANNELS, + [editThreadAvatar]: userSurfacedPermissions.CREATE_AND_EDIT_CHANNELS, + [descendantEditThreadAvatar]: + userSurfacedPermissions.CREATE_AND_EDIT_CHANNELS, + [deleteThread]: userSurfacedPermissions.DELETE_CHANNELS, + [descendantDeleteThread]: userSurfacedPermissions.DELETE_CHANNELS, + [addMembers]: userSurfacedPermissions.ADD_MEMBERS, + [descendantAddMembers]: userSurfacedPermissions.ADD_MEMBERS, + [removeMembers]: userSurfacedPermissions.REMOVE_MEMBERS, + [descendantRemoveMembers]: userSurfacedPermissions.REMOVE_MEMBERS, + [changeRole]: userSurfacedPermissions.CHANGE_ROLES, + [descendantChangeRole]: userSurfacedPermissions.CHANGE_ROLES, + [editPermissions]: userSurfacedPermissions.EDIT_VISIBILITY, + [descendantEditPermissions]: userSurfacedPermissions.EDIT_VISIBILITY, + [managePins]: userSurfacedPermissions.MANAGE_PINS, + [descendantManagePins]: userSurfacedPermissions.MANAGE_PINS, + [reactToMessage]: userSurfacedPermissions.REACT_TO_MESSAGES, + [descendantReactToMessage]: userSurfacedPermissions.REACT_TO_MESSAGES, + [editMessage]: userSurfacedPermissions.EDIT_MESSAGES, + [descendantEditMessage]: userSurfacedPermissions.EDIT_MESSAGES, + [manageInviteLinks]: userSurfacedPermissions.MANAGE_INVITE_LINKS, + [descendantManageInviteLinks]: userSurfacedPermissions.MANAGE_INVITE_LINKS, + }); + export type ThreadPermissionInfo = | { +value: true, +source: string } | { +value: false, +source: null }; diff --git a/native/roles/create-roles-screen.react.js b/native/roles/create-roles-screen.react.js --- a/native/roles/create-roles-screen.react.js +++ b/native/roles/create-roles-screen.react.js @@ -1,11 +1,21 @@ // @flow import * as React from 'react'; +import { View, Text, TouchableOpacity, ScrollView } from 'react-native'; +import { + userSurfacedPermissionOptions, + type UserSurfacedPermissionOption, + type UserSurfacedPermission, +} from 'lib/types/thread-permission-types.js'; import type { ThreadInfo } from 'lib/types/thread-types.js'; import type { RolesNavigationProp } from './roles-navigator.react.js'; +import EnumSettingsOption from '../components/enum-settings-option.react.js'; +import SWMansionIcon from '../components/swmansion-icon.react.js'; +import TextInput from '../components/text-input.react.js'; import type { NavigationRoute } from '../navigation/route-names.js'; +import { useStyles } from '../themes/colors.js'; export type CreateRolesScreenParams = { +threadInfo: ThreadInfo, @@ -17,9 +27,162 @@ +route: NavigationRoute<'CreateRolesScreen'>, }; -// eslint-disable-next-line no-unused-vars function CreateRolesScreen(props: CreateRolesScreenProps): React.Node { - return <>; + // eslint-disable-next-line no-unused-vars + const { threadInfo, action } = props.route.params; + + const [customRoleName, setCustomRoleName] = + React.useState('New Role'); + const [selectedPermissions, setSelectedPermissions] = React.useState< + UserSurfacedPermission[], + >([]); + + const styles = useStyles(unboundStyles); + + const onClearPermissions = React.useCallback(() => { + setSelectedPermissions([]); + }, []); + + const isSelectedPermissionsEmpty = selectedPermissions.length === 0; + const clearPermissionsText = React.useMemo(() => { + const textStyle = isSelectedPermissionsEmpty + ? styles.clearPermissionsTextDisabled + : styles.clearPermissionsText; + + return ( + + Clear permissions + + ); + }, [ + isSelectedPermissionsEmpty, + onClearPermissions, + styles.clearPermissionsText, + styles.clearPermissionsTextDisabled, + ]); + + const isUserSurfacedPermissionSelected = React.useCallback( + (option: UserSurfacedPermissionOption) => + selectedPermissions.includes(option.userSurfacedPermission), + [selectedPermissions], + ); + + const onEnumValuePress = React.useCallback( + (option: UserSurfacedPermissionOption) => { + if (isUserSurfacedPermissionSelected(option)) { + setSelectedPermissions(currentPermissions => + currentPermissions.filter( + permission => permission !== option.userSurfacedPermission, + ), + ); + } else { + setSelectedPermissions(currentPermissions => [ + ...currentPermissions, + option.userSurfacedPermission, + ]); + } + }, + [isUserSurfacedPermissionSelected], + ); + + const permissionsList = React.useMemo( + () => + [...userSurfacedPermissionOptions].map(permission => ( + onEnumValuePress(permission)} + /> + )), + [isUserSurfacedPermissionSelected, onEnumValuePress], + ); + + const onChangeRoleNameInput = React.useCallback((roleName: string) => { + setCustomRoleName(roleName); + }, []); + + return ( + + + ROLE NAME + + + + + + + + PERMISSIONS + {clearPermissionsText} + + + {permissionsList} + + + + ); } +const unboundStyles = { + roleNameContainer: { + marginTop: 30, + }, + roleNameText: { + color: 'panelBackgroundLabel', + fontSize: 12, + marginBottom: 5, + marginLeft: 10, + }, + roleInput: { + backgroundColor: 'panelForeground', + padding: 12, + flexDirection: 'row', + justifyContent: 'space-between', + }, + roleInputComponent: { + color: 'whiteText', + fontSize: 16, + }, + pencilIcon: { + color: 'panelInputSecondaryForeground', + }, + permissionsContainer: { + marginTop: 20, + paddingBottom: 220, + }, + permissionsHeader: { + flexDirection: 'row', + justifyContent: 'space-between', + }, + permissionsText: { + color: 'panelBackgroundLabel', + fontSize: 12, + marginLeft: 10, + }, + clearPermissionsText: { + color: 'purpleLink', + fontSize: 12, + marginRight: 15, + }, + clearPermissionsTextDisabled: { + color: 'disabledButton', + fontSize: 12, + marginRight: 15, + }, + permissionsListContainer: { + backgroundColor: 'panelForeground', + marginTop: 10, + }, +}; + export default CreateRolesScreen;