Merge pull request #18981 from overleaf/mj-mobile-dropdown

[web] Add rename button to project list mobile view

GitOrigin-RevId: 4ca3c68dcaf4e0d5e97f501084b9f850f9a4e867

services/web/test/frontend/features/project-list/components/table/cells/action-buttons/rename-project-button.test.tsx

@@ -0,0 +1,68 @@
+import RenameProjectButton from '@/features/project-list/components/table/cells/action-buttons/rename-project-button'
+import {
+  renderWithProjectListContext,
+  resetProjectListContextFetch,
+} from '../../../../helpers/render-with-context'
+import { ownedProject, sharedProject } from '../../../../fixtures/projects-data'
+import { Project } from '../../../../../../../../types/project/dashboard/api'
+import { fireEvent, screen, waitFor } from '@testing-library/react'
+import fetchMock from 'fetch-mock'
+import { expect } from 'chai'
+
+// Little test jig for rendering the button
+function renderWithProject(project: Project) {
+  renderWithProjectListContext(
+    <RenameProjectButton project={project}>
+      {(text, onClick) => {
+        return <button onClick={onClick}>Rename Project Button</button>
+      }}
+    </RenameProjectButton>
+  )
+}
+
+describe('<RenameProjectButton />', function () {
+  afterEach(function () {
+    resetProjectListContextFetch()
+  })
+
+  it('opens the modal when clicked', function () {
+    renderWithProject(ownedProject)
+    const btn = screen.getByRole('button')
+    fireEvent.click(btn)
+    screen.getByText('Rename Project')
+    screen.getByDisplayValue(ownedProject.name)
+  })
+
+  it('does not render the button when already archived', function () {
+    renderWithProject(sharedProject)
+    expect(screen.queryByRole('button')).to.be.null
+  })
+
+  it('should rename the project', async function () {
+    const project = Object.assign({}, ownedProject)
+    const renameProjectMock = fetchMock.post(
+      `express:/project/:projectId/rename`,
+      {
+        status: 200,
+      },
+      { delay: 0 }
+    )
+    renderWithProject(ownedProject)
+    const btn = screen.getByRole('button')
+    fireEvent.click(btn)
+    screen.getByText('Rename Project')
+    const confirmBtn = screen.getByText('Rename') as HTMLButtonElement
+    expect(confirmBtn.disabled).to.be.true
+    const nameInput = screen.getByDisplayValue(ownedProject.name)
+    fireEvent.change(nameInput, { target: { value: 'new name' } })
+    expect(confirmBtn.disabled).to.be.false
+    fireEvent.click(confirmBtn)
+    expect(confirmBtn.disabled).to.be.true
+
+    await waitFor(
+      () =>
+        expect(renameProjectMock.called(`/project/${project.id}/rename`)).to.be
+          .true
+    )
+  })
+})

services/web/test/frontend/features/project-list/components/table/project-tools/project-tools-rename.test.tsx

@@ -64,14 +64,20 @@ describe('<ProjectTools />', function () {
     render(<ProjectListRootInner />)
     screen.getByLabelText('Select Starfleet Report (readAndWrite)').click()
     screen.getByRole('button', { name: 'More' }).click()
-    expect(screen.queryByRole('menuitem', { name: 'Rename' })).to.be.null
+    expect(
+      within(
+        screen.getByTestId('project-tools-more-dropdown-menu')
+      ).queryByRole('menuitem', { name: 'Rename' })
+    ).to.be.null
   })
 
   it('displays the Rename option for a project owned by the current user', function () {
     render(<ProjectListRootInner />)
     screen.getByLabelText('Select Starfleet Report (owner)').click()
     screen.getByRole('button', { name: 'More' }).click()
-    screen.getByRole('menuitem', { name: 'Rename' }).click()
+    within(screen.getByTestId('project-tools-more-dropdown-menu'))
+      .getByRole('menuitem', { name: 'Rename' })
+      .click()
     within(screen.getByRole('dialog')).getByText('Rename Project')
   })
 })

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

@@ -97,6 +97,8 @@ export const trashedAndNotOwnedProject = <Project>{
 
 export const sharedProject = archiveableProject
 
+export const ownedProject = copyableProject
+
 export const projectsData: Array<Project> = [
   copyableProject,
   archiveableProject,