2024-06-25 02:08:24 -04:00
|
|
|
import { useCallback } from 'react'
|
|
|
|
import PropTypes from 'prop-types'
|
|
|
|
import { useShareProjectContext } from './share-project-modal'
|
|
|
|
import Icon from '@/shared/components/icon'
|
|
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
import MemberPrivileges from './member-privileges'
|
|
|
|
import { resendInvite, revokeInvite } from '../../utils/api'
|
|
|
|
import { useProjectContext } from '@/shared/context/project-context'
|
|
|
|
import { sendMB } from '@/infrastructure/event-tracking'
|
2024-10-09 08:13:50 -04:00
|
|
|
import OLRow from '@/features/ui/components/ol/ol-row'
|
|
|
|
import OLCol from '@/features/ui/components/ol/ol-col'
|
|
|
|
import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
|
|
|
|
import OLButton from '@/features/ui/components/ol/ol-button'
|
|
|
|
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
|
|
|
|
|
|
|
export default function Invite({ invite, isProjectOwner }) {
|
|
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
2024-10-09 08:13:50 -04:00
|
|
|
<OLRow className="project-invite">
|
|
|
|
<OLCol xs={8}>
|
2024-06-25 02:08:24 -04:00
|
|
|
<div>{invite.email}</div>
|
|
|
|
<div className="small">
|
|
|
|
{t('invite_not_accepted')}
|
|
|
|
.
|
|
|
|
{isProjectOwner && <ResendInvite invite={invite} />}
|
|
|
|
</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={3} className="text-end">
|
2024-06-25 02:08:24 -04:00
|
|
|
<MemberPrivileges privileges={invite.privileges} />
|
2024-10-09 08:13:50 -04:00
|
|
|
</OLCol>
|
2024-06-25 02:08:24 -04:00
|
|
|
|
|
|
|
{isProjectOwner && (
|
2024-10-09 08:13:50 -04:00
|
|
|
<OLCol xs={1} className="text-center">
|
2024-06-25 02:08:24 -04:00
|
|
|
<RevokeInvite invite={invite} />
|
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
|
|
|
</OLRow>
|
2024-06-25 02:08:24 -04:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
Invite.propTypes = {
|
|
|
|
invite: PropTypes.object.isRequired,
|
|
|
|
isProjectOwner: PropTypes.bool.isRequired,
|
|
|
|
}
|
|
|
|
|
|
|
|
function ResendInvite({ invite }) {
|
|
|
|
const { t } = useTranslation()
|
2024-07-12 05:00:26 -04:00
|
|
|
const { monitorRequest, setError, inFlight } = useShareProjectContext()
|
2024-06-25 02:08:24 -04:00
|
|
|
const { _id: projectId } = useProjectContext()
|
|
|
|
|
|
|
|
// const buttonRef = useRef(null)
|
|
|
|
//
|
|
|
|
const handleClick = useCallback(
|
|
|
|
() =>
|
2024-07-12 05:00:26 -04:00
|
|
|
monitorRequest(() => resendInvite(projectId, invite))
|
|
|
|
.catch(error => {
|
|
|
|
if (error?.response?.status === 404) {
|
|
|
|
setError('invite_expired')
|
|
|
|
}
|
|
|
|
if (error?.response?.status === 429) {
|
|
|
|
setError('invite_resend_limit_hit')
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.finally(() => {
|
|
|
|
// NOTE: disabled as react-bootstrap v0.33.1 isn't forwarding the ref to the `button`
|
|
|
|
// if (buttonRef.current) {
|
|
|
|
// buttonRef.current.blur()
|
|
|
|
// }
|
|
|
|
document.activeElement.blur()
|
|
|
|
}),
|
|
|
|
[invite, monitorRequest, projectId, setError]
|
2024-06-25 02:08:24 -04:00
|
|
|
)
|
|
|
|
|
|
|
|
return (
|
2024-10-09 08:13:50 -04:00
|
|
|
<OLButton
|
|
|
|
variant="link"
|
2024-06-25 02:08:24 -04:00
|
|
|
className="btn-inline-link"
|
|
|
|
onClick={handleClick}
|
2024-07-12 05:00:26 -04:00
|
|
|
disabled={inFlight}
|
2024-06-25 02:08:24 -04:00
|
|
|
// ref={buttonRef}
|
|
|
|
>
|
|
|
|
{t('resend')}
|
2024-10-09 08:13:50 -04:00
|
|
|
</OLButton>
|
2024-06-25 02:08:24 -04:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
ResendInvite.propTypes = {
|
|
|
|
invite: PropTypes.object.isRequired,
|
|
|
|
}
|
|
|
|
|
|
|
|
function RevokeInvite({ invite }) {
|
|
|
|
const { t } = useTranslation()
|
|
|
|
const { updateProject, monitorRequest } = useShareProjectContext()
|
|
|
|
const { _id: projectId, invites, members } = useProjectContext()
|
|
|
|
|
|
|
|
function handleClick(event) {
|
|
|
|
event.preventDefault()
|
|
|
|
|
|
|
|
monitorRequest(() => revokeInvite(projectId, invite)).then(() => {
|
|
|
|
const updatedInvites = invites.filter(existing => existing !== invite)
|
|
|
|
updateProject({
|
|
|
|
invites: updatedInvites,
|
|
|
|
})
|
|
|
|
sendMB('collaborator-invite-revoked', {
|
|
|
|
project_id: projectId,
|
|
|
|
current_invites_amount: updatedInvites.length,
|
|
|
|
current_collaborators_amount: members.length,
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
2024-10-09 08:13:50 -04:00
|
|
|
<OLTooltip
|
2024-06-25 02:08:24 -04:00
|
|
|
id="revoke-invite"
|
|
|
|
description={t('revoke_invite')}
|
|
|
|
overlayProps={{ placement: 'bottom' }}
|
|
|
|
>
|
2024-10-09 08:13:50 -04:00
|
|
|
<OLButton
|
|
|
|
variant="link"
|
2024-06-25 02:08:24 -04:00
|
|
|
onClick={handleClick}
|
|
|
|
aria-label={t('revoke')}
|
2024-10-09 08:13:50 -04:00
|
|
|
className={classnames(
|
|
|
|
'btn-inline-link',
|
|
|
|
bsVersion({ bs5: 'text-decoration-none' })
|
|
|
|
)}
|
2024-06-25 02:08:24 -04:00
|
|
|
>
|
2024-10-09 08:13:50 -04:00
|
|
|
<BootstrapVersionSwitcher
|
|
|
|
bs3={<Icon type="times" />}
|
|
|
|
bs5={<MaterialIcon type="clear" />}
|
|
|
|
/>
|
|
|
|
</OLButton>
|
|
|
|
</OLTooltip>
|
2024-06-25 02:08:24 -04:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
RevokeInvite.propTypes = {
|
|
|
|
invite: PropTypes.object.isRequired,
|
|
|
|
}
|