Merge pull request #3911 from overleaf/ae-share-modal-link-sharing

Only use project sharing data from the websocket connection

GitOrigin-RevId: 4549a6379dfebb00581ca4ddf276654fbbb3701d

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

@@ -13,7 +13,7 @@ import CopyLink from '../../../shared/components/copy-link'
 export default function LinkSharing() {
   const [inflight, setInflight] = useState(false)
 
-  const { monitorRequest, updateProject } = useShareProjectContext()
+  const { monitorRequest } = useShareProjectContext()
 
   const project = useProjectContext()
 
@@ -23,15 +23,16 @@ export default function LinkSharing() {
       setInflight(true)
       monitorRequest(() => setProjectAccessLevel(project, publicAccesLevel))
         .then(() => {
-          // TODO: ideally this would use the response from the server
-          updateProject({ publicAccesLevel })
+          // NOTE: not calling `updateProject` here as it receives data via
+          // project:publicAccessLevel:changed and project:tokens:changed
+          // over the websocket connection
           // TODO: eventTracking.sendMB('project-make-token-based') when publicAccesLevel is 'tokenBased'
         })
         .finally(() => {
           setInflight(false)
         })
     },
-    [monitorRequest, project, updateProject]
+    [monitorRequest, project]
   )
 
   switch (project.publicAccesLevel) {

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

@@ -736,6 +736,21 @@ describe('<ShareProjectModal/>', function () {
   it('handles switching between access levels', async function () {
     fetchMock.post('express:/project/:projectId/settings/admin', 204)
 
+    let watchCallbacks = {}
+
+    const ideWithProject = project => {
+      return {
+        $scope: {
+          $watch: (path, callback, deep) => {
+            watchCallbacks[path] = callback
+            return () => {}
+          },
+          $applyAsync: () => {},
+          project
+        }
+      }
+    }
+
     render(
       <ShareProjectModal
         {...modalProps}
@@ -758,6 +773,10 @@ describe('<ShareProjectModal/>', function () {
       publicAccessLevel: 'tokenBased'
     })
 
+    // NOTE: updating the scoped project data manually,
+    // as the project data is usually updated via the websocket connection
+    watchCallbacks.project({ ...project, publicAccesLevel: 'tokenBased' })
+
     await screen.findByText('Link sharing is on')
     const disableButton = await screen.findByRole('button', {
       name: 'Turn off link sharing'
@@ -770,6 +789,10 @@ describe('<ShareProjectModal/>', function () {
       publicAccessLevel: 'private'
     })
 
+    // NOTE: updating the scoped project data manually,
+    // as the project data is usually updated via the websocket connection
+    watchCallbacks.project({ ...project, publicAccesLevel: 'private' })
+
     await screen.findByText(
       'Link sharing is off, only invited users can view this project.'
     )