overleaf/services/web/frontend/js/features/share-project-modal/components/restricted-link-sharing/send-invites-notice.tsx
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

53 lines
1.5 KiB
TypeScript

import { Col, Row } from 'react-bootstrap'
import { useTranslation } from 'react-i18next'
import { useProjectContext } from '@/shared/context/project-context'
import Notification from '@/shared/components/notification'
import { PublicAccessLevel } from '../../../../../../types/public-access-level'
import { useEditorContext } from '@/shared/context/editor-context'
export default function SendInvitesNotice() {
const { publicAccessLevel } = useProjectContext()
const { isPendingEditor } = useEditorContext()
const { t } = useTranslation()
return (
<div>
{isPendingEditor && (
<Notification
isActionBelowContent
type="info"
title={t('youve_lost_edit_access')}
content={
<div>
<p>{t('this_project_already_has_maximum_editors')}</p>
<p>{t('please_ask_the_project_owner_to_upgrade_more_editors')}</p>
</div>
}
/>
)}
<Row className="public-access-level public-access-level--notice">
<Col xs={12} className="text-center">
<AccessLevel level={publicAccessLevel} />
</Col>
</Row>
</div>
)
}
type AccessLevelProps = {
level: PublicAccessLevel | undefined
}
function AccessLevel({ level }: AccessLevelProps) {
const { t } = useTranslation()
switch (level) {
case 'private':
return <span>{t('to_add_more_collaborators')}</span>
case 'tokenBased':
return <span>{t('to_change_access_permissions')}</span>
default:
return <span>''</span>
}
}