UI: update sync conflict modal message

Fix: add missing imports

frontend/src/components/NewProject/ConflictModal.tsx

@@ -46,7 +46,7 @@ const ConflictModal = ({
       open={conflictModalOpen}
       onClose={onClose}
     >
-      <Modal.Header>Heads up!</Modal.Header>
+      <Modal.Header>A project with that name already exists.</Modal.Header>
       <Modal.Content>
         <p>{message}</p>
         <Form>

frontend/src/components/NewProject/Sync/index.jsx

@@ -6,8 +6,8 @@ import { useRouter } from 'next/router'
 import isEmpty from 'lodash/isEmpty'
 
 import { AuthContext } from '@contexts/AuthContext'
-import { deleteRepo, mirrorRepo } from '@utils/giteaApi'
-import { urlToName } from '@utils/index'
+import { deleteRepo, mirrorRepo, repoExists } from '@utils/giteaApi'
+import { urlToName, waitFor } from '@utils/index'
 import SyncRepoFromModel from '@models/SyncRepoForm'
 import useForm from '@hooks/useForm'
 import { SyncOp, NoOp } from '../Ops'
@@ -24,7 +24,7 @@ const Sync = ({ setUserOp }) => {
   const [loading, setLoading] = useState(false)
   const [message, setMessage] = useState({})
   const [conflictModalOpen, setConflictModalOpen] = useState(false)
-  const projectName = urlToName(form.url)
+  const repoName = urlToName(form.url)
 
   const uid = user?.id
   const username = user?.username
@@ -134,7 +134,7 @@ const Sync = ({ setUserOp }) => {
     const repoName = urlToName(repoURL)
 
     const deletedRepoSuccessfully = await deleteRepo(
-      `${user.username}/${projectName}`,
+      `${user.username}/${repoName}`,
       apiToken,
     )
 
@@ -154,7 +154,7 @@ const Sync = ({ setUserOp }) => {
 
       setLoading(false)
       setMessage({
-        content: `Couldn't overwrite "${projectName}"`,
+        content: `Couldn't overwrite "${repoName}"`,
         color: 'red',
       })
     }
@@ -205,7 +205,7 @@ const Sync = ({ setUserOp }) => {
       </div>
       <SyncConflictModal
         conflictModalOpen={conflictModalOpen}
-        originalProjectName={projectName}
+        originalProjectName={repoName}
         onClose={() => {
           setUserOp(NoOp)
           // Close the modal

frontend/test/ConflictModal.test.tsx

@@ -54,7 +54,7 @@ it('opens conflict modal if the project name conflict with existing project', as
   // Click the Sync button
   fireEvent.click(screen.getByText('Sync'))
   // Wait the modal to appear
-  await screen.findByText('Heads up!')
+  await screen.findByText('A project with that name already exists.')
   // It should set the userOp to sync
   expect(setUserOp).toHaveBeenCalled()
 
@@ -82,7 +82,7 @@ it('changes the overwrite button to OK if the new project name does not cause co
   // Click the Sync button
   fireEvent.click(screen.getByText('Sync'))
   // Wait the modal to appear.
-  await screen.findByText('Heads up!')
+  await screen.findByText('A project with that name already exists.')
 
   const conflictModalInput = screen.getAllByRole('textbox')[1] as HTMLInputElement
   // Change the project name.