Spaces:
Sleeping
Sleeping
File size: 5,340 Bytes
13555f3 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 | // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {useState, useRef} from 'react'
import Select from 'react-select'
import {useIntl, FormattedMessage} from 'react-intl'
import {MemberRole} from '../blocks/board'
import {IUser} from '../user'
import ConfirmationDialog from './confirmationDialogBox'
import './confirmAddUserForNotifications.scss'
type Props = {
user: IUser
minimumRole: MemberRole
allowManageBoardRoles: boolean
onConfirm: (userId: string, role: string) => void
onClose: () => void
}
const ConfirmAddUserForNotifications = (props: Props): JSX.Element => {
const {user, allowManageBoardRoles} = props
const [newUserRole, setNewUserRole] = useState<MemberRole>(props.minimumRole || MemberRole.Viewer)
const userRole = useRef<string>(newUserRole)
const intl = useIntl()
// if allowed to manage board roles, only display roles higher than minimum
const roleOptions = []
if (allowManageBoardRoles) {
if (props.minimumRole === MemberRole.Viewer || props.minimumRole === MemberRole.None) {
roleOptions.push(
{id: MemberRole.Viewer, label: intl.formatMessage({id: 'BoardMember.schemeViewer', defaultMessage: 'Viewer'})},
)
}
if (props.minimumRole === MemberRole.Viewer || props.minimumRole === MemberRole.None || props.minimumRole === MemberRole.Commenter) {
roleOptions.push(
{id: MemberRole.Commenter, label: intl.formatMessage({id: 'BoardMember.schemeCommenter', defaultMessage: 'Commenter'})},
)
}
roleOptions.push(
{id: MemberRole.Editor, label: intl.formatMessage({id: 'BoardMember.schemeEditor', defaultMessage: 'Editor'})},
)
if (!user.is_guest) {
roleOptions.push(
{id: MemberRole.Admin, label: intl.formatMessage({id: 'BoardMember.schemeAdmin', defaultMessage: 'Admin'})},
)
}
}
// if not admin, (ie. Editor/Commentor on Public board)
// set to minimum board role, only option, read only.
if (!allowManageBoardRoles) {
if (props.minimumRole === MemberRole.Viewer || props.minimumRole === MemberRole.None) {
roleOptions.push(
{id: MemberRole.Viewer, label: intl.formatMessage({id: 'BoardMember.schemeViewer', defaultMessage: 'Viewer'})},
)
}
if (props.minimumRole === MemberRole.Commenter) {
roleOptions.push(
{id: MemberRole.Commenter, label: intl.formatMessage({id: 'BoardMember.schemeCommenter', defaultMessage: 'Commenter'})},
)
}
if (props.minimumRole === MemberRole.Editor) {
roleOptions.push(
{id: MemberRole.Editor, label: intl.formatMessage({id: 'BoardMember.schemeEditor', defaultMessage: 'Editor'})},
)
}
}
const subText = (
<div className='ConfirmAddUserForNotifications'>
<p>
<FormattedMessage
id='person.add-user-to-board-warning'
defaultMessage='{username} is not a member of the board, and will not receive any notifications about it.'
values={{username: props.user.username}}
/>
</p>
<p>
<FormattedMessage
id='person.add-user-to-board-question'
defaultMessage='Do you want to add {username} to the board?'
values={{username: props.user.username}}
/>
</p>
<div className='permissions-title'>
<label>
<FormattedMessage
id='person.add-user-to-board-permissions'
defaultMessage='Permissions'
/>
</label>
</div>
<Select
className='select'
getOptionLabel={(o: {id: MemberRole, label: string}) => o.label}
getOptionValue={(o: {id: MemberRole, label: string}) => o.id}
styles={{menuPortal: (base) => ({...base, zIndex: 9999})}}
menuPortalTarget={document.body}
isDisabled={!allowManageBoardRoles}
options={roleOptions}
onChange={(option) => {
if (allowManageBoardRoles) {
setNewUserRole(option?.id || props.minimumRole)
userRole.current = option?.id || props.minimumRole
}
}}
value={roleOptions.find((o) => o.id === newUserRole)}
/>
</div>
)
return (
<ConfirmationDialog
dialogBox={{
heading: intl.formatMessage({id: 'person.add-user-to-board', defaultMessage: 'Add {username} to board'}, {username: props.user.username}),
subText,
confirmButtonText: intl.formatMessage({id: 'person.add-user-to-board-confirm-button', defaultMessage: 'Add to board'}),
onConfirm: () => props.onConfirm(user.id, userRole.current),
onClose: props.onClose,
}}
/>
)
}
export default ConfirmAddUserForNotifications
|