2024-10-09 08:13:50 -04:00
|
|
|
import { useState, useEffect, useMemo } from 'react'
|
2024-06-25 02:08:24 -04:00
|
|
|
import PropTypes from 'prop-types'
|
|
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
import { useShareProjectContext } from './share-project-modal'
|
|
|
|
import TransferOwnershipModal from './transfer-ownership-modal'
|
|
|
|
import { removeMemberFromProject, updateMember } from '../../utils/api'
|
|
|
|
import Icon from '@/shared/components/icon'
|
|
|
|
import { useProjectContext } from '@/shared/context/project-context'
|
|
|
|
import { sendMB } from '@/infrastructure/event-tracking'
|
|
|
|
import { Select } from '@/shared/components/select'
|
|
|
|
import type { ProjectContextMember } from '@/shared/context/types/project-context'
|
|
|
|
import { PermissionsLevel } from '@/features/ide-react/types/permissions'
|
2024-06-27 07:53:29 -04:00
|
|
|
import { linkSharingEnforcementDate } from '../../utils/link-sharing'
|
2024-10-09 08:13:50 -04:00
|
|
|
import OLButton from '@/features/ui/components/ol/ol-button'
|
|
|
|
import OLFormGroup from '@/features/ui/components/ol/ol-form-group'
|
|
|
|
import OLCol from '@/features/ui/components/ol/ol-col'
|
|
|
|
import MaterialIcon from '@/shared/components/material-icon'
|
|
|
|
import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
|
|
|
|
import { bsVersion } from '@/features/utils/bootstrap-5'
|
|
|
|
import classnames from 'classnames'
|
2024-06-25 02:08:24 -04:00
|
|
|
|
2024-08-26 09:03:37 -04:00
|
|
|
type PermissionsOption = PermissionsLevel | 'removeAccess' | 'downgraded'
|
2024-06-25 02:08:24 -04:00
|
|
|
|
|
|
|
type EditMemberProps = {
|
|
|
|
member: ProjectContextMember
|
|
|
|
hasExceededCollaboratorLimit: boolean
|
2024-08-26 09:03:37 -04:00
|
|
|
hasBeenDowngraded: boolean
|
2024-06-25 02:08:24 -04:00
|
|
|
canAddCollaborators: boolean
|
|
|
|
}
|
|
|
|
|
|
|
|
type Privilege = {
|
|
|
|
key: PermissionsOption
|
|
|
|
label: string
|
|
|
|
}
|
|
|
|
|
|
|
|
export default function EditMember({
|
|
|
|
member,
|
|
|
|
hasExceededCollaboratorLimit,
|
2024-08-26 09:03:37 -04:00
|
|
|
hasBeenDowngraded,
|
2024-06-25 02:08:24 -04:00
|
|
|
canAddCollaborators,
|
|
|
|
}: EditMemberProps) {
|
|
|
|
const [privileges, setPrivileges] = useState<PermissionsOption>(
|
|
|
|
member.privileges
|
|
|
|
)
|
|
|
|
const [confirmingOwnershipTransfer, setConfirmingOwnershipTransfer] =
|
|
|
|
useState(false)
|
|
|
|
const [privilegeChangePending, setPrivilegeChangePending] = useState(false)
|
|
|
|
const { t } = useTranslation()
|
|
|
|
|
|
|
|
// update the local state if the member's privileges change externally
|
|
|
|
useEffect(() => {
|
|
|
|
setPrivileges(member.privileges)
|
|
|
|
}, [member.privileges])
|
|
|
|
|
|
|
|
const { updateProject, monitorRequest } = useShareProjectContext()
|
|
|
|
const { _id: projectId, members, invites } = useProjectContext()
|
|
|
|
|
|
|
|
// Immediately commit this change if it's lower impact (eg. editor > viewer)
|
|
|
|
// but show a confirmation button for removing access
|
|
|
|
function handlePrivilegeChange(newPrivileges: PermissionsOption) {
|
|
|
|
setPrivileges(newPrivileges)
|
|
|
|
if (newPrivileges !== 'removeAccess') {
|
|
|
|
commitPrivilegeChange(newPrivileges)
|
|
|
|
} else {
|
|
|
|
setPrivilegeChangePending(true)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function shouldWarnMember() {
|
|
|
|
return hasExceededCollaboratorLimit && privileges === 'readAndWrite'
|
|
|
|
}
|
|
|
|
|
|
|
|
function commitPrivilegeChange(newPrivileges: PermissionsOption) {
|
|
|
|
setPrivileges(newPrivileges)
|
|
|
|
setPrivilegeChangePending(false)
|
|
|
|
|
|
|
|
if (newPrivileges === 'owner') {
|
|
|
|
setConfirmingOwnershipTransfer(true)
|
|
|
|
} else if (newPrivileges === 'removeAccess') {
|
|
|
|
monitorRequest(() => removeMemberFromProject(projectId, member)).then(
|
|
|
|
() => {
|
|
|
|
const updatedMembers = members.filter(existing => existing !== member)
|
|
|
|
updateProject({
|
|
|
|
members: updatedMembers,
|
|
|
|
})
|
|
|
|
sendMB('collaborator-removed', {
|
|
|
|
project_id: projectId,
|
|
|
|
current_collaborators_amount: updatedMembers.length,
|
|
|
|
current_invites_amount: invites.length,
|
|
|
|
})
|
|
|
|
}
|
|
|
|
)
|
|
|
|
} else if (
|
|
|
|
newPrivileges === 'readAndWrite' ||
|
|
|
|
newPrivileges === 'readOnly'
|
|
|
|
) {
|
|
|
|
monitorRequest(() =>
|
|
|
|
updateMember(projectId, member, {
|
|
|
|
privilegeLevel: newPrivileges,
|
|
|
|
})
|
|
|
|
).then(() => {
|
|
|
|
updateProject({
|
|
|
|
members: members.map(item =>
|
|
|
|
item._id === member._id ? { ...item, newPrivileges } : item
|
|
|
|
),
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if (confirmingOwnershipTransfer) {
|
|
|
|
return (
|
|
|
|
<TransferOwnershipModal
|
|
|
|
member={member}
|
|
|
|
cancel={() => {
|
|
|
|
setConfirmingOwnershipTransfer(false)
|
|
|
|
setPrivileges(member.privileges)
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
2024-10-09 08:13:50 -04:00
|
|
|
<form
|
|
|
|
className={bsVersion({ bs3: 'form-horizontal' })}
|
2024-06-25 02:08:24 -04:00
|
|
|
id="share-project-form"
|
|
|
|
onSubmit={e => {
|
|
|
|
e.preventDefault()
|
|
|
|
commitPrivilegeChange(privileges)
|
|
|
|
}}
|
|
|
|
>
|
2024-10-09 08:13:50 -04:00
|
|
|
<OLFormGroup
|
|
|
|
className={classnames('project-member', bsVersion({ bs5: 'row' }))}
|
|
|
|
>
|
|
|
|
<OLCol xs={7}>
|
2024-06-25 02:08:24 -04:00
|
|
|
<div className="project-member-email-icon">
|
2024-10-09 08:13:50 -04:00
|
|
|
<BootstrapVersionSwitcher
|
|
|
|
bs3={
|
|
|
|
<Icon
|
|
|
|
type={
|
|
|
|
shouldWarnMember() || member.pendingEditor
|
|
|
|
? 'warning'
|
|
|
|
: 'user'
|
|
|
|
}
|
|
|
|
fw
|
|
|
|
/>
|
|
|
|
}
|
|
|
|
bs5={
|
|
|
|
<MaterialIcon
|
|
|
|
type={
|
|
|
|
shouldWarnMember() || member.pendingEditor
|
|
|
|
? 'warning'
|
|
|
|
: 'person'
|
|
|
|
}
|
|
|
|
className={
|
|
|
|
shouldWarnMember() || member.pendingEditor
|
|
|
|
? 'text-warning'
|
|
|
|
: undefined
|
|
|
|
}
|
|
|
|
/>
|
2024-08-22 06:41:05 -04:00
|
|
|
}
|
|
|
|
/>
|
2024-06-25 02:08:24 -04:00
|
|
|
<div className="email-warning">
|
|
|
|
{member.email}
|
2024-08-22 06:41:05 -04:00
|
|
|
{member.pendingEditor && (
|
2024-08-26 09:03:37 -04:00
|
|
|
<div className="subtitle">{t('view_only_downgraded')}</div>
|
2024-08-22 06:41:05 -04:00
|
|
|
)}
|
2024-06-25 02:08:24 -04:00
|
|
|
{shouldWarnMember() && (
|
|
|
|
<div className="subtitle">
|
|
|
|
{t('will_lose_edit_access_on_date', {
|
2024-06-27 07:53:29 -04:00
|
|
|
date: linkSharingEnforcementDate,
|
2024-06-25 02:08:24 -04:00
|
|
|
})}
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</div>
|
2024-10-09 08:13:50 -04:00
|
|
|
</OLCol>
|
2024-06-25 02:08:24 -04:00
|
|
|
|
2024-10-09 08:13:50 -04:00
|
|
|
<OLCol xs={2}>
|
2024-06-25 02:08:24 -04:00
|
|
|
{privileges !== member.privileges && privilegeChangePending && (
|
|
|
|
<ChangePrivilegesActions
|
|
|
|
handleReset={() => setPrivileges(member.privileges)}
|
|
|
|
/>
|
|
|
|
)}
|
2024-10-09 08:13:50 -04:00
|
|
|
</OLCol>
|
2024-06-25 02:08:24 -04:00
|
|
|
|
2024-10-09 08:13:50 -04:00
|
|
|
<OLCol xs={3} className="project-member-select">
|
|
|
|
{hasBeenDowngraded && (
|
|
|
|
<BootstrapVersionSwitcher
|
|
|
|
bs3={<Icon type="warning" fw />}
|
|
|
|
bs5={<MaterialIcon type="warning" className="text-warning" />}
|
|
|
|
/>
|
|
|
|
)}
|
2024-08-26 09:03:37 -04:00
|
|
|
|
2024-06-25 02:08:24 -04:00
|
|
|
<SelectPrivilege
|
|
|
|
value={privileges}
|
|
|
|
handleChange={value => {
|
2024-08-07 04:16:51 -04:00
|
|
|
if (value) {
|
|
|
|
handlePrivilegeChange(value.key)
|
|
|
|
}
|
2024-06-25 02:08:24 -04:00
|
|
|
}}
|
2024-08-26 09:03:37 -04:00
|
|
|
hasBeenDowngraded={hasBeenDowngraded}
|
2024-06-25 02:08:24 -04:00
|
|
|
canAddCollaborators={canAddCollaborators}
|
|
|
|
/>
|
2024-10-09 08:13:50 -04:00
|
|
|
</OLCol>
|
|
|
|
</OLFormGroup>
|
|
|
|
</form>
|
2024-06-25 02:08:24 -04:00
|
|
|
)
|
|
|
|
}
|
|
|
|
EditMember.propTypes = {
|
|
|
|
member: PropTypes.shape({
|
|
|
|
_id: PropTypes.string.isRequired,
|
|
|
|
email: PropTypes.string.isRequired,
|
|
|
|
privileges: PropTypes.string.isRequired,
|
|
|
|
}),
|
|
|
|
hasExceededCollaboratorLimit: PropTypes.bool.isRequired,
|
|
|
|
canAddCollaborators: PropTypes.bool.isRequired,
|
|
|
|
}
|
|
|
|
|
|
|
|
type SelectPrivilegeProps = {
|
|
|
|
value: string
|
|
|
|
handleChange: (item: Privilege | null | undefined) => void
|
2024-08-26 09:03:37 -04:00
|
|
|
hasBeenDowngraded: boolean
|
2024-06-25 02:08:24 -04:00
|
|
|
canAddCollaborators: boolean
|
|
|
|
}
|
|
|
|
|
|
|
|
function SelectPrivilege({
|
|
|
|
value,
|
|
|
|
handleChange,
|
2024-08-26 09:03:37 -04:00
|
|
|
hasBeenDowngraded,
|
2024-06-25 02:08:24 -04:00
|
|
|
canAddCollaborators,
|
|
|
|
}: SelectPrivilegeProps) {
|
|
|
|
const { t } = useTranslation()
|
2024-06-27 07:53:29 -04:00
|
|
|
const { features } = useProjectContext()
|
2024-06-25 02:08:24 -04:00
|
|
|
|
|
|
|
const privileges = useMemo(
|
|
|
|
(): Privilege[] => [
|
|
|
|
{ key: 'owner', label: t('make_owner') },
|
|
|
|
{ key: 'readAndWrite', label: t('editor') },
|
|
|
|
{ key: 'readOnly', label: t('viewer') },
|
|
|
|
{ key: 'removeAccess', label: t('remove_access') },
|
|
|
|
],
|
|
|
|
[t]
|
|
|
|
)
|
|
|
|
|
2024-08-26 09:03:37 -04:00
|
|
|
const downgradedPseudoPrivilege: Privilege = {
|
|
|
|
key: 'downgraded',
|
|
|
|
label: t('select_access_level'),
|
|
|
|
}
|
|
|
|
|
2024-06-25 02:08:24 -04:00
|
|
|
function getPrivilegeSubtitle(privilege: PermissionsOption) {
|
2024-08-26 09:03:37 -04:00
|
|
|
if (!hasBeenDowngraded) {
|
|
|
|
return !canAddCollaborators &&
|
|
|
|
privilege === 'readAndWrite' &&
|
|
|
|
value !== 'readAndWrite'
|
|
|
|
? t('limited_to_n_editors_per_project', {
|
|
|
|
count: features.collaborators,
|
|
|
|
})
|
|
|
|
: ''
|
|
|
|
}
|
|
|
|
|
|
|
|
return privilege === 'readAndWrite'
|
|
|
|
? t('limited_to_n_editors', {
|
|
|
|
count: features.collaborators,
|
|
|
|
})
|
2024-06-25 02:08:24 -04:00
|
|
|
: ''
|
|
|
|
}
|
|
|
|
|
2024-08-26 09:03:37 -04:00
|
|
|
function isPrivilegeDisabled(privilege: PermissionsOption) {
|
|
|
|
return (
|
|
|
|
!canAddCollaborators &&
|
|
|
|
privilege === 'readAndWrite' &&
|
|
|
|
(hasBeenDowngraded || value !== 'readAndWrite')
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2024-06-25 02:08:24 -04:00
|
|
|
return (
|
|
|
|
<Select
|
|
|
|
items={privileges}
|
|
|
|
itemToKey={item => item.key}
|
|
|
|
itemToString={item => (item ? item.label : '')}
|
|
|
|
itemToSubtitle={item => (item ? getPrivilegeSubtitle(item.key) : '')}
|
2024-08-26 09:03:37 -04:00
|
|
|
itemToDisabled={item => (item ? isPrivilegeDisabled(item.key) : false)}
|
2024-06-25 02:08:24 -04:00
|
|
|
defaultItem={privileges.find(item => item.key === value)}
|
2024-08-26 09:03:37 -04:00
|
|
|
selected={
|
|
|
|
hasBeenDowngraded
|
|
|
|
? downgradedPseudoPrivilege
|
|
|
|
: privileges.find(item => item.key === value)
|
|
|
|
}
|
2024-06-25 02:08:24 -04:00
|
|
|
name="privileges"
|
|
|
|
onSelectedItemChanged={handleChange}
|
|
|
|
selectedIcon
|
|
|
|
/>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
type ChangePrivilegesActionsProps = {
|
2024-10-09 08:13:50 -04:00
|
|
|
handleReset: React.ComponentProps<typeof OLButton>['onClick']
|
2024-06-25 02:08:24 -04:00
|
|
|
}
|
2024-10-09 08:13:50 -04:00
|
|
|
|
2024-06-25 02:08:24 -04:00
|
|
|
function ChangePrivilegesActions({
|
|
|
|
handleReset,
|
|
|
|
}: ChangePrivilegesActionsProps) {
|
|
|
|
const { t } = useTranslation()
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="text-center">
|
2024-10-09 08:13:50 -04:00
|
|
|
<OLButton type="submit" size="sm" variant="primary">
|
2024-06-25 02:08:24 -04:00
|
|
|
{t('change_or_cancel-change')}
|
2024-10-09 08:13:50 -04:00
|
|
|
</OLButton>
|
2024-06-25 02:08:24 -04:00
|
|
|
<div className="text-sm">
|
|
|
|
{t('change_or_cancel-or')}
|
|
|
|
|
2024-10-09 08:13:50 -04:00
|
|
|
<OLButton
|
|
|
|
variant="link"
|
|
|
|
className="btn-inline-link"
|
|
|
|
onClick={handleReset}
|
|
|
|
>
|
2024-06-25 02:08:24 -04:00
|
|
|
{t('change_or_cancel-cancel')}
|
2024-10-09 08:13:50 -04:00
|
|
|
</OLButton>
|
2024-06-25 02:08:24 -04:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|