Merge pull request #33166 from overleaf/ii-share-modal-copy-link

[web] Share modal copy sharing link button

GitOrigin-RevId: a95f879196528ec3bc998558a6838c52aac33069

services/web/frontend/js/features/share-project-modal/components/copy-sharing-link-button.tsx

@@ -0,0 +1,48 @@
+import { useTranslation } from 'react-i18next'
+import OLButton from '@/shared/components/ol/ol-button'
+import { useShareProjectContext } from '@/features/share-project-modal/components/share-project-modal'
+import { useProjectContext } from '@/shared/context/project-context'
+import { useUserContext } from '@/shared/context/user-context'
+import { debugConsole } from '@/utils/debugging'
+import getMeta from '@/utils/meta'
+
+export default function CopySharingLinkButton() {
+  const { t } = useTranslation()
+  const { sharingLinkData, projectAccess, setSuccessActionMessage } =
+    useShareProjectContext()
+  const { projectId } = useProjectContext()
+  const { isAdmin } = useUserContext()
+
+  const isCopyBtnEnabled =
+    Boolean(navigator.clipboard?.writeText) &&
+    Boolean(sharingLinkData?.token) &&
+    (projectAccess === 'anyoneInXyzWithTheLink' ||
+      projectAccess === 'anyoneWithTheLink')
+
+  const handleCopyClick = () => {
+    if (!sharingLinkData?.token) {
+      return
+    }
+
+    const origin = isAdmin
+      ? getMeta('ol-ExposedSettings').siteUrl
+      : window.location.origin
+    const link = `${origin}/project/${projectId}/share#${sharingLinkData.token}`
+
+    navigator.clipboard
+      .writeText(link)
+      .then(() => setSuccessActionMessage(t('link_copied')))
+      .catch(debugConsole.error)
+  }
+
+  return (
+    <OLButton
+      variant="secondary"
+      leadingIcon={isCopyBtnEnabled ? 'link' : 'link_off'}
+      disabled={!isCopyBtnEnabled}
+      onClick={handleCopyClick}
+    >
+      {t('copy_sharing_link')}
+    </OLButton>
+  )
+}

services/web/frontend/js/features/share-project-modal/components/project-access.tsx

@@ -92,7 +92,7 @@ function ProjectAccess({
 
       return data
     }).then(data => {
-      setSharingLinkData(newAccess === 'onlyInvitedPeople' ? null : data)
+      setSharingLinkData(data)
       setProjectAccess(newAccess)
       setSuccessActionMessage(t('access_updated'))
     })

services/web/frontend/js/features/share-project-modal/components/share-project-modal-content.tsx

@@ -14,6 +14,7 @@ import OLNotification from '@/shared/components/ol/ol-notification'
 import OLButton from '@/shared/components/ol/ol-button'
 import OLSpinner from '@/shared/components/ol/ol-spinner'
 import MaterialIcon from '@/shared/components/material-icon'
+import CopySharingLinkButton from '@/features/share-project-modal/components/copy-sharing-link-button'
 import ErrorMessage from '@/features/share-project-modal/components/error-message'
 import GiveFeedbackLink from '@/features/share-project-modal/components/give-feedback-link'
 import classNames from 'classnames'
@@ -74,7 +75,7 @@ function ShareProjectModalContentInner({
   const { t } = useTranslation()
   const isSharingUpdatesEnabled = useFeatureFlag('sharing-updates')
   const [isInvitedPeopleScreen, setIsInvitedPeopleScreen] = useState(false)
-  const { successActionMessage } = useShareProjectContext()
+  const { successActionMessage, projectAccess } = useShareProjectContext()
   const { isRestrictedTokenMember, isProjectOwner } = useEditorContext()
 
   return (
@@ -135,6 +136,12 @@ function ShareProjectModalContentInner({
         <div className="d-flex flex-grow-1 flex-wrap gap-2">
           {isSharingUpdatesEnabled ? (
             <>
+              {!isInvitedPeopleScreen &&
+                (projectAccess === 'onlyInvitedPeople' ||
+                  projectAccess === 'anyoneInXyzWithTheLink' ||
+                  projectAccess === 'anyoneWithTheLink') && (
+                  <CopySharingLinkButton />
+                )}
               {successActionMessage && (
                 <div className="ms-auto px-3 align-self-center">
                   <div