Merge pull request #9664 from overleaf/jel-copy-shared

[web] Fix view when copying shared project

GitOrigin-RevId: a5e9360434032718ad9cb231f90c3f9c72e955f6

services/web/frontend/js/features/project-list/context/project-list-context.tsx

@@ -342,6 +342,7 @@ export function ProjectListProvider({ children }: ProjectListProviderProps) {
         source: 'owner',
         trashed: false,
         archived: false,
+        accessLevel: 'owner',
       }
 
       setLoadedProjects(loadedProjects => {

services/web/test/frontend/features/project-list/components/project-list-root.test.tsx

@@ -4,15 +4,19 @@ import fetchMock from 'fetch-mock'
 import sinon from 'sinon'
 import ProjectListRoot from '../../../../../frontend/js/features/project-list/components/project-list-root'
 import { renderWithProjectListContext } from '../helpers/render-with-context'
-import { currentProjects, trashedProjects } from '../fixtures/projects-data'
+import {
+  currentProjects,
+  owner,
+  trashedProjects,
+} from '../fixtures/projects-data'
 
-const userId = '624333f147cfd8002622a1d3'
+const userId = owner.id
 
 describe('<ProjectListRoot />', function () {
   const originalLocation = window.location
   const locationStub = sinon.stub()
 
-  beforeEach(function () {
+  beforeEach(async function () {
     window.metaAttributesCache = new Map()
     window.metaAttributesCache.set('ol-tags', [])
     window.metaAttributesCache.set('ol-ExposedSettings', { templateLinks: [] })
@@ -21,6 +25,12 @@ describe('<ProjectListRoot />', function () {
     Object.defineProperty(window, 'location', {
       value: { assign: locationStub },
     })
+
+    renderWithProjectListContext(<ProjectListRoot />)
+    await fetchMock.flush(true)
+    await waitFor(() => {
+      screen.findByRole('table')
+    })
   })
 
   afterEach(function () {
@@ -36,14 +46,6 @@ describe('<ProjectListRoot />', function () {
     let actionsToolbar: HTMLElement
     let project1Id: string | null, project2Id: string | null
 
-    beforeEach(async function () {
-      renderWithProjectListContext(<ProjectListRoot />)
-      await fetchMock.flush(true)
-      await waitFor(() => {
-        screen.findByRole('table')
-      })
-    })
-
     describe('all projects', function () {
       beforeEach(function () {
         allCheckboxes = screen.getAllByRole<HTMLInputElement>('checkbox')
@@ -247,7 +249,6 @@ describe('<ProjectListRoot />', function () {
 
   describe('search', function () {
     it('shows only projects based on the input', async function () {
-      renderWithProjectListContext(<ProjectListRoot />)
       await fetchMock.flush(true)
       await waitFor(() => {
         screen.findByRole('table')
@@ -264,4 +265,51 @@ describe('<ProjectListRoot />', function () {
       expect(results.length).to.equal(2) // first is header
     })
   })
+
+  describe('copying project', function () {
+    it('correctly updates the view after copying a shared project', async function () {
+      const filterButton = screen.getAllByText('Shared with you')[0]
+      fireEvent.click(filterButton)
+
+      const tableRows = screen.getAllByRole('row')
+
+      const linkForProjectToCopy = within(tableRows[1]).getByRole('link')
+      const projectNameToCopy = linkForProjectToCopy.textContent
+      const copiedProjectName = `${projectNameToCopy} Copy`
+      fetchMock.post(`express:/project/:id/clone`, {
+        status: 200,
+        body: {
+          name: copiedProjectName,
+          lastUpdated: new Date(),
+          project_id: userId,
+          owner_ref: userId,
+          owner,
+          id: '6328e14abec0df019fce0be5',
+          lastUpdatedBy: owner,
+          accessLevel: 'owner',
+          source: 'owner',
+          trashed: false,
+          archived: false,
+        },
+      })
+      const copyButton = within(tableRows[1]).getAllByLabelText('Copy')[0]
+      fireEvent.click(copyButton)
+
+      // confirm in modal
+      // const copyConfirmButton = screen.getByText('Copy')
+      const copyConfirmButton = document.querySelector(
+        'button[type="submit"]'
+      ) as HTMLElement
+      fireEvent.click(copyConfirmButton)
+
+      await fetchMock.flush(true)
+      expect(fetchMock.done()).to.be.true
+
+      expect(screen.queryByText(copiedProjectName)).to.be.null
+
+      const yourProjectFilter = screen.getAllByText('Your Projects')[0]
+      fireEvent.click(yourProjectFilter)
+      screen.findByText(copiedProjectName)
+    })
+  })
 })

services/web/test/frontend/features/project-list/fixtures/projects-data.ts

@@ -1,6 +1,13 @@
 import { Project } from '../../../../../types/project/dashboard/api'
 const moment = require('moment')
 
+export const owner = {
+  id: '624333f147cfd8002622a1d3',
+  email: 'riker@overleaf.com',
+  firstName: 'William',
+  lastName: 'Riker',
+}
+
 const users = {
   laforge: {
     id: '624371e98a21dd0026a5bfef',
@@ -14,12 +21,7 @@ const users = {
     firstName: 'Jean-Luc',
     lastName: 'Picard',
   },
-  riker: {
-    id: '624333f147cfd8002622a1d3',
-    email: 'riker@overleaf.com',
-    firstName: 'William',
-    lastName: 'Riker',
-  },
+  riker: owner,
   worf: {
     id: '624371708a21dd0026a5bf86',
     email: 'worf@overleaf.com',
@@ -77,7 +79,7 @@ export const archivedProject = <Project>{
 }
 
 export const trashedAndNotOwnedProject = <Project>{
-  id: '62d6d3721357e20a682110d5',
+  id: '63d6d3721357e20a682110d5',
   name: "Captain's logs very old (Trashed & Read Only & Not Owned)",
   lastUpdated: moment().subtract(11, 'year').toDate(),
   lastUpdatedBy: users.picard,