Merge pull request #25553 from overleaf/dp-clone-project-modal-proptypes

Remove Proptypes from CloneProjectModal

GitOrigin-RevId: 400f4c9de72eb1910a0ca067882a6358663303d3

services/web/frontend/js/features/clone-project-modal/components/clone-project-modal-content.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable jsx-a11y/no-autofocus */
-import PropTypes from 'prop-types'
-import { useCallback, useMemo, useState } from 'react'
+import { FormEvent, useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { postJSON } from '../../../infrastructure/fetch-json'
 import { CloneProjectTag } from './clone-project-tag'
@@ -16,6 +15,7 @@ import OLFormGroup from '@/features/ui/components/ol/ol-form-group'
 import OLFormControl from '@/features/ui/components/ol/ol-form-control'
 import OLFormLabel from '@/features/ui/components/ol/ol-form-label'
 import OLButton from '@/features/ui/components/ol/ol-button'
+import { Tag } from '../../../../../app/src/Features/Tags/types'
 
 export default function CloneProjectModalContent({
   handleHide,
@@ -25,10 +25,18 @@ export default function CloneProjectModalContent({
   projectId,
   projectName,
   projectTags,
+}: {
+  handleHide: () => void
+  inFlight: boolean
+  setInFlight: (inFlight: boolean) => void
+  handleAfterCloned: (clonedProject: any, tags: Tag[]) => void
+  projectId: string
+  projectName: string
+  projectTags: Tag[]
 }) {
   const { t } = useTranslation()
 
-  const [error, setError] = useState()
+  const [error, setError] = useState<string | boolean>()
   const [clonedProjectName, setClonedProjectName] = useState(
     `${projectName} (Copy)`
   )
@@ -42,7 +50,7 @@ export default function CloneProjectModalContent({
   )
 
   // form submission: clone the project if the name is valid
-  const handleSubmit = event => {
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault()
 
     if (!valid) {
@@ -75,7 +83,7 @@ export default function CloneProjectModalContent({
       })
   }
 
-  const removeTag = useCallback(tag => {
+  const removeTag = useCallback((tag: Tag) => {
     setClonedProjectTags(value => value.filter(item => item._id !== tag._id))
   }, [])
 
@@ -120,7 +128,11 @@ export default function CloneProjectModalContent({
 
         {error && (
           <Notification
-            content={error.length ? error : t('generic_something_went_wrong')}
+            content={
+              typeof error === 'string' && error.length
+                ? error
+                : t('generic_something_went_wrong')
+            }
             type="error"
           />
         )}
@@ -142,18 +154,3 @@ export default function CloneProjectModalContent({
     </>
   )
 }
-CloneProjectModalContent.propTypes = {
-  handleHide: PropTypes.func.isRequired,
-  inFlight: PropTypes.bool,
-  setInFlight: PropTypes.func.isRequired,
-  handleAfterCloned: PropTypes.func.isRequired,
-  projectId: PropTypes.string,
-  projectName: PropTypes.string,
-  projectTags: PropTypes.arrayOf(
-    PropTypes.shape({
-      _id: PropTypes.string.isRequired,
-      name: PropTypes.string.isRequired,
-      color: PropTypes.string,
-    })
-  ),
-}

services/web/frontend/js/features/clone-project-modal/components/clone-project-modal.tsx

@@ -1,7 +1,8 @@
 import React, { memo, useCallback, useState } from 'react'
-import PropTypes from 'prop-types'
 import CloneProjectModalContent from './clone-project-modal-content'
 import OLModal from '@/features/ui/components/ol/ol-modal'
+import { ClonedProject } from '../../../../../types/project/dashboard/api'
+import { Tag } from '../../../../../app/src/Features/Tags/types'
 
 function CloneProjectModal({
   show,
@@ -10,6 +11,13 @@ function CloneProjectModal({
   projectId,
   projectName,
   projectTags,
+}: {
+  show: boolean
+  handleHide: () => void
+  handleAfterCloned: (clonedProject: ClonedProject, tags: Tag[]) => void
+  projectId: string
+  projectName: string
+  projectTags: Tag[]
 }) {
   const [inFlight, setInFlight] = useState(false)
 
@@ -42,19 +50,4 @@ function CloneProjectModal({
   )
 }
 
-CloneProjectModal.propTypes = {
-  handleHide: PropTypes.func.isRequired,
-  show: PropTypes.bool.isRequired,
-  handleAfterCloned: PropTypes.func.isRequired,
-  projectId: PropTypes.string,
-  projectName: PropTypes.string,
-  projectTags: PropTypes.arrayOf(
-    PropTypes.shape({
-      _id: PropTypes.string.isRequired,
-      name: PropTypes.string.isRequired,
-      color: PropTypes.string,
-    })
-  ),
-}
-
 export default memo(CloneProjectModal)

services/web/frontend/js/features/clone-project-modal/components/editor-clone-project-modal-wrapper.tsx

@@ -1,11 +1,18 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import { useProjectContext } from '../../../shared/context/project-context'
 import withErrorBoundary from '../../../infrastructure/error-boundary'
 import CloneProjectModal from './clone-project-modal'
 
 const EditorCloneProjectModalWrapper = React.memo(
-  function EditorCloneProjectModalWrapper({ show, handleHide, openProject }) {
+  function EditorCloneProjectModalWrapper({
+    show,
+    handleHide,
+    openProject,
+  }: {
+    show: boolean
+    handleHide: () => void
+    openProject: ({ project_id }: { project_id: string }) => void
+  }) {
     const {
       _id: projectId,
       name: projectName,
@@ -30,10 +37,4 @@ const EditorCloneProjectModalWrapper = React.memo(
   }
 )
 
-EditorCloneProjectModalWrapper.propTypes = {
-  handleHide: PropTypes.func.isRequired,
-  show: PropTypes.bool.isRequired,
-  openProject: PropTypes.func.isRequired,
-}
-
 export default withErrorBoundary(EditorCloneProjectModalWrapper)

services/web/frontend/js/shared/context/types/project-context.tsx

@@ -1,6 +1,7 @@
 import { UserId } from '../../../../../types/user'
 import { PublicAccessLevel } from '../../../../../types/public-access-level'
 import { ProjectSnapshot } from '@/infrastructure/project-snapshot'
+import { Tag } from '../../../../../app/src/Features/Tags/types'
 
 export type ProjectContextMember = {
   _id: UserId
@@ -43,11 +44,7 @@ export type ProjectContextValue = {
     privileges: string
     signUpDate: string
   }
-  tags: {
-    _id: string
-    name: string
-    color?: string
-  }[]
+  tags: Tag[]
   trackChangesState: boolean | Record<UserId | '__guests__', boolean>
   projectSnapshot: ProjectSnapshot
   joinedOnce: boolean