From ab71a2edb2ddc69f7a63dabc86a467a7490a8da2 Mon Sep 17 00:00:00 2001
From: ilkin-overleaf <100852799+ilkin-overleaf@users.noreply.github.com>
Date: Wed, 3 Apr 2024 14:02:16 +0300
Subject: [PATCH] Merge pull request #17691 from
 overleaf/ii-copy-project-mobile

[web] Show modal on mobile when copying a project

GitOrigin-RevId: db0887b91c80f169539d4d02ae9745d9a60abaa3
---
 .../components/dropdown/actions-dropdown.tsx  |  7 +++++--
 .../action-buttons/copy-project-button.tsx    | 19 ++++++++++++++-----
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/services/web/frontend/js/features/project-list/components/dropdown/actions-dropdown.tsx b/services/web/frontend/js/features/project-list/components/dropdown/actions-dropdown.tsx
index a05e2f4156..b4f6055685 100644
--- a/services/web/frontend/js/features/project-list/components/dropdown/actions-dropdown.tsx
+++ b/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>
diff --git a/services/web/frontend/js/features/project-list/components/table/cells/action-buttons/copy-project-button.tsx b/services/web/frontend/js/features/project-list/components/table/cells/action-buttons/copy-project-button.tsx
index 5d4b167dd2..e753848adb 100644
--- a/services/web/frontend/js/features/project-list/components/table/cells/action-buttons/copy-project-button.tsx
+++ b/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>