From db4d23d2df8271af288b1fdded496678d578feb2 Mon Sep 17 00:00:00 2001 From: roo hutton Date: Tue, 27 Aug 2024 10:53:34 +0100 Subject: [PATCH] Merge pull request #20080 from overleaf/rh-lost-edit-access-modal [web] Show modal to pending editors GitOrigin-RevId: 63dfed45a1483e835978dc7ac76cd0f37b4e1f50 --- .../web/frontend/extracted-translations.json | 1 + .../components/editor-navigation-toolbar.tsx | 3 +- .../view-only-access-modal-content.tsx | 55 +++++++++++++ .../view-only-access-modal.tsx | 79 +++++++++++++++++++ services/web/locales/en.json | 1 + 5 files changed, 138 insertions(+), 1 deletion(-) create mode 100644 services/web/frontend/js/features/share-project-modal/components/restricted-link-sharing/view-only-access-modal-content.tsx create mode 100644 services/web/frontend/js/features/share-project-modal/components/restricted-link-sharing/view-only-access-modal.tsx diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json index b5bea122fb..17bf04a058 100644 --- a/services/web/frontend/extracted-translations.json +++ b/services/web/frontend/extracted-translations.json @@ -1660,6 +1660,7 @@ "view_metrics_commons_subtext": "", "view_metrics_group_subtext": "", "view_more": "", + "view_only_access": "", "view_only_downgraded": "", "view_options": "", "view_pdf": "", diff --git a/services/web/frontend/js/features/ide-react/components/editor-navigation-toolbar.tsx b/services/web/frontend/js/features/ide-react/components/editor-navigation-toolbar.tsx index b24511caf8..3e4cc19e5f 100644 --- a/services/web/frontend/js/features/ide-react/components/editor-navigation-toolbar.tsx +++ b/services/web/frontend/js/features/ide-react/components/editor-navigation-toolbar.tsx @@ -6,7 +6,7 @@ import EditorNavigationToolbarRoot from '@/features/editor-navigation-toolbar/co import NewShareProjectModal from '@/features/share-project-modal/components/restricted-link-sharing/share-project-modal' import ShareProjectModal from '@/features/share-project-modal/components/share-project-modal' import EditorOverLimitModal from '@/features/share-project-modal/components/restricted-link-sharing/editor-over-limit-modal' - +import ViewOnlyAccessModal from '@/features/share-project-modal/components/restricted-link-sharing/view-only-access-modal' import getMeta from '@/utils/meta' function EditorNavigationToolbar() { @@ -35,6 +35,7 @@ function EditorNavigationToolbar() { {showNewShareModal ? ( <> + void +} + +export default function ViewOnlyAccessModalContent({ + handleHide, +}: ViewOnlyAccessModalContentProps) { + const { t } = useTranslation() + + return ( + <> + + {t('view_only_access')} + + + +

{t('this_project_already_has_maximum_editors')}

+

{t('please_ask_the_project_owner_to_upgrade_more_editors')}

+ + + + + + + ) +} diff --git a/services/web/frontend/js/features/share-project-modal/components/restricted-link-sharing/view-only-access-modal.tsx b/services/web/frontend/js/features/share-project-modal/components/restricted-link-sharing/view-only-access-modal.tsx new file mode 100644 index 0000000000..93caa3335e --- /dev/null +++ b/services/web/frontend/js/features/share-project-modal/components/restricted-link-sharing/view-only-access-modal.tsx @@ -0,0 +1,79 @@ +import { useEffect, useState } from 'react' +import AccessibleModal from '@/shared/components/accessible-modal' +import ViewOnlyAccessModalContent from './view-only-access-modal-content' +import customLocalStorage from '@/infrastructure/local-storage' +import { useProjectContext } from '@/shared/context/project-context' +import { useEditorContext } from '@/shared/context/editor-context' +import { sendMB } from '@/infrastructure/event-tracking' + +const ViewOnlyAccessModal = () => { + const [show, setShow] = useState(false) + + const { isProjectOwner, isPendingEditor, permissionsLevel } = + useEditorContext() + const { members, features, _id: projectId } = useProjectContext() + + const handleHide = () => { + setShow(false) + } + + // split test: link-sharing-enforcement + // show the view-only access modal if + // is editor on a project over + // collaborator limit (once every week) + useEffect(() => { + const showModalCooldownHours = 24 * 7 // 7 days + const shouldShowToPendingEditor = () => { + if (isProjectOwner || !features) { + return false + } + + if (features.collaborators === -1) { + return false + } + return isPendingEditor + } + + if (shouldShowToPendingEditor()) { + const localStorageKey = `last-shown-view-only-access-modal.${projectId}` + const lastShownNeedEditModalTime = + customLocalStorage.getItem(localStorageKey) + if ( + !lastShownNeedEditModalTime || + lastShownNeedEditModalTime + showModalCooldownHours * 60 * 60 * 1000 < + Date.now() + ) { + setShow(true) + customLocalStorage.setItem(localStorageKey, Date.now()) + sendMB('notification-prompt', { + name: 'link-sharing-collaborator-limit', + }) + } + } + }, [ + features, + isProjectOwner, + isPendingEditor, + members, + permissionsLevel, + projectId, + ]) + + return show ? ( + { + sendMB('notification-dismiss', { + name: 'link-sharing-collaborator-limit', + }) + handleHide() + }} + id="editor-over-limit-modal" + > + + + ) : null +} + +export default ViewOnlyAccessModal diff --git a/services/web/locales/en.json b/services/web/locales/en.json index 179c64ee1d..6d5216de95 100644 --- a/services/web/locales/en.json +++ b/services/web/locales/en.json @@ -2308,6 +2308,7 @@ "view_metrics_commons_subtext": "Monitor and download usage metrics for your Commons subscription", "view_metrics_group_subtext": "Monitor and download usage metrics for your group subscription", "view_more": "View more", + "view_only_access": "View-only access", "view_only_downgraded": "View only. Upgrade to restore edit access.", "view_options": "View options", "view_pdf": "View PDF",