Merge pull request #17691 from overleaf/ii-copy-project-mobile

[web] Show modal on mobile when copying a project

GitOrigin-RevId: db0887b91c80f169539d4d02ae9745d9a60abaa3

services/web/frontend/js/features/project-list/components/dropdown/actions-dropdown.tsx

@@ -21,8 +21,11 @@ type ActionButtonProps = {
 function CopyProjectButtonMenuItem({ project, onClick }: ActionButtonProps) {
   return (
     <CopyProjectButton project={project}>
-      {text => (
-        <MenuItemButton onClick={onClick} className="projects-action-menu-item">
+      {(text, handleOpenModal) => (
+        <MenuItemButton
+          onClick={() => handleOpenModal(onClick)}
+          className="projects-action-menu-item"
+        >
           <Icon type="files-o" className="menu-item-button-icon" />{' '}
           <span className="menu-item-button-text">{text}</span>
         </MenuItemButton>

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

@@ -13,9 +13,14 @@ import {
 import { useProjectTags } from '@/features/project-list/hooks/use-project-tags'
 import { isSmallDevice } from '../../../../../../infrastructure/event-tracking'
 
+type HandleOpenModal = (fn?: () => void) => void
+
 type CopyButtonProps = {
   project: Project
-  children: (text: string, handleOpenModal: () => void) => React.ReactElement
+  children: (
+    text: string,
+    handleOpenModal: HandleOpenModal
+  ) => React.ReactElement
 }
 
 function CopyProjectButton({ project, children }: CopyButtonProps) {
@@ -31,9 +36,13 @@ function CopyProjectButton({ project, children }: CopyButtonProps) {
   const isMounted = useIsMounted()
   const projectTags = useProjectTags(project.id)
 
-  const handleOpenModal = useCallback(() => {
-    setShowModal(true)
-  }, [])
+  const handleOpenModal = useCallback(
+    (onOpen?: Parameters<HandleOpenModal>[0]) => {
+      setShowModal(true)
+      onOpen?.()
+    },
+    []
+  )
 
   const handleCloseModal = useCallback(() => {
     if (isMounted.current) {
@@ -97,7 +106,7 @@ const CopyProjectButtonTooltip = memo(function CopyProjectButtonTooltip({
           <button
             className="btn btn-link action-btn"
             aria-label={text}
-            onClick={handleOpenModal}
+            onClick={() => handleOpenModal()}
           >
             <Icon type="files-o" fw />
           </button>