overleaf/services/web/frontend/js/features/share-project-modal/components/edit-member.jsx
roo hutton 2dcf87e3f6 [web] Share modal shows downgraded editors (#20015)
* add hasBeenDowngraded prop for EditMember

* reduce padding on share modal collab row, add prompt to hasBeenDowngraded Select

* share modal select styling tweaks to allow for inline warning icon

* always show editor limit subtitle when in downgraded state

* add AccessLevelsChanged warning, tweak owner row styling

* conditionally set hasBeenDowngraded prop. make invited member row styling more consistent between warning/enforcement

* add an info state for access level changed notification

* add notification for lost edit access on collaborator share modal, TSify SendInvitesNotice

* fix member privilege alignment in collaborator share modal

* show blue upgrade CTA when some pending editors have been resolved

* automatically show share modal to owners when has pending editors or is over collab limit

* only show lost edit access warning in read-only share modal to pending editors

---------

Co-authored-by: Thomas <thomas-@users.noreply.github.com>
GitOrigin-RevId: e3b88052a48b8f598299ffc55b7c24cb793da151
2024-08-27 08:04:49 +00:00

186 lines
5.1 KiB
JavaScript

import { useState, useEffect } from 'react'
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 { Button, Col, Form, FormControl, FormGroup } from 'react-bootstrap'
import Tooltip from '../../../shared/components/tooltip'
import Icon from '../../../shared/components/icon'
import { useProjectContext } from '../../../shared/context/project-context'
import { sendMB } from '../../../infrastructure/event-tracking'
export default function EditMember({ member }) {
const [privileges, setPrivileges] = useState(member.privileges)
const [confirmingOwnershipTransfer, setConfirmingOwnershipTransfer] =
useState(false)
// 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 } = useProjectContext()
function handleSubmit(event) {
event.preventDefault()
if (privileges === 'owner') {
setConfirmingOwnershipTransfer(true)
} else {
monitorRequest(() =>
updateMember(projectId, member, {
privilegeLevel: privileges,
})
).then(() => {
updateProject({
members: members.map(item =>
item._id === member._id ? { ...item, privileges } : item
),
})
})
}
}
if (confirmingOwnershipTransfer) {
return (
<TransferOwnershipModal
member={member}
cancel={() => setConfirmingOwnershipTransfer(false)}
/>
)
}
return (
<Form horizontal id="share-project-form" onSubmit={handleSubmit}>
<FormGroup className="project-member row">
<Col xs={7}>
<FormControl.Static>{member.email}</FormControl.Static>
</Col>
<Col xs={3}>
<SelectPrivilege
value={privileges}
handleChange={event => setPrivileges(event.target.value)}
/>
</Col>
<Col xs={2}>
{privileges === member.privileges ? (
<RemoveMemberAction member={member} />
) : (
<ChangePrivilegesActions
handleReset={() => setPrivileges(member.privileges)}
/>
)}
</Col>
</FormGroup>
</Form>
)
}
EditMember.propTypes = {
member: PropTypes.shape({
_id: PropTypes.string.isRequired,
email: PropTypes.string.isRequired,
privileges: PropTypes.string.isRequired,
}),
}
function SelectPrivilege({ value, handleChange }) {
const { t } = useTranslation()
return (
<FormControl
componentClass="select"
className="privileges"
bsSize="sm"
value={value}
onChange={handleChange}
>
<option value="owner">{t('owner')}</option>
<option value="readAndWrite">{t('can_edit')}</option>
<option value="readOnly">{t('read_only')}</option>
</FormControl>
)
}
SelectPrivilege.propTypes = {
value: PropTypes.string.isRequired,
handleChange: PropTypes.func.isRequired,
}
function RemoveMemberAction({ member }) {
const { t } = useTranslation()
const { updateProject, monitorRequest } = useShareProjectContext()
const { _id: projectId, members, invites } = useProjectContext()
function handleClick(event) {
event.preventDefault()
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,
})
}
)
}
return (
<FormControl.Static className="text-center">
<Tooltip
id="remove-collaborator"
description={t('remove_collaborator')}
overlayProps={{ placement: 'bottom' }}
>
<Button
type="button"
bsStyle="link"
onClick={handleClick}
className="remove-button"
aria-label={t('remove_collaborator')}
>
<Icon type="times" />
</Button>
</Tooltip>
</FormControl.Static>
)
}
RemoveMemberAction.propTypes = {
member: PropTypes.shape({
_id: PropTypes.string.isRequired,
email: PropTypes.string.isRequired,
privileges: PropTypes.string.isRequired,
}),
}
function ChangePrivilegesActions({ handleReset }) {
const { t } = useTranslation()
return (
<div className="text-center">
<Button type="submit" bsSize="sm" bsStyle="primary">
{t('change_or_cancel-change')}
</Button>
<div className="text-sm">
{t('change_or_cancel-or')}
&nbsp;
<Button type="button" className="btn-inline-link" onClick={handleReset}>
{t('change_or_cancel-cancel')}
</Button>
</div>
</div>
)
}
ChangePrivilegesActions.propTypes = {
handleReset: PropTypes.func.isRequired,
}