Merge pull request #27840 from overleaf/mj-file-tree-ts

[web] Convert most remaining file tree components and functions to Typescript

GitOrigin-RevId: 1aabe371af489def891ffc420c7f28b4efc309ef

services/web/frontend/js/features/file-tree/components/file-tree-create/file-tree-modal-create-file-body.tsx

@@ -8,11 +8,14 @@ import { useFileTreeActionable } from '../../contexts/file-tree-actionable'
 import { useFileTreeData } from '../../../../shared/context/file-tree-data-context'
 
 import importOverleafModules from '../../../../../macros/import-overleaf-module.macro'
-import { lazy, Suspense } from 'react'
+import { ElementType, lazy, Suspense } from 'react'
 import { FullSizeLoadingSpinner } from '@/shared/components/loading-spinner'
 import getMeta from '@/utils/meta'
 
-const createFileModeModules = importOverleafModules('createFileModes')
+const createFileModeModules = importOverleafModules('createFileModes') as {
+  import: { CreateFilePane: ElementType; CreateFileMode: ElementType }
+  path: string
+}[]
 
 const FileTreeUploadDoc = lazy(() => import('./modes/file-tree-upload-doc'))
 
@@ -27,7 +30,10 @@ export default function FileTreeModalCreateFileBody() {
     hasLinkUrlFeature,
   } = getMeta('ol-ExposedSettings')
 
-  if (!fileCount || fileCount.status === 'error') {
+  if (
+    !fileCount ||
+    (typeof fileCount === 'object' && fileCount.status === 'error')
+  ) {
     return null
   }
 

services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-create-new-doc.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react'
+import { FormEventHandler, useCallback, useEffect } from 'react'
 import FileTreeCreateNameInput from '../file-tree-create-name-input'
 import { useFileTreeActionable } from '../../../contexts/file-tree-actionable'
 import { useFileTreeCreateName } from '../../../contexts/file-tree-create-name'
@@ -20,7 +20,7 @@ export default function FileTreeCreateNewDoc() {
   const { openDoc } = useEditorManagerContext()
 
   // form submission: create an empty doc with this name
-  const handleSubmit = useCallback(
+  const handleSubmit: FormEventHandler = useCallback(
     async event => {
       event.preventDefault()
 

services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-import-from-url.tsx

@@ -1,4 +1,10 @@
-import { useCallback, useEffect, useState } from 'react'
+import {
+  ChangeEvent,
+  FormEventHandler,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react'
 import { useTranslation } from 'react-i18next'
 import FileTreeCreateNameInput from '../file-tree-create-name-input'
 import { useFileTreeActionable } from '../../../contexts/file-tree-actionable'
@@ -18,7 +24,7 @@ export default function FileTreeImportFromUrl() {
 
   const [url, setUrl] = useState('')
 
-  const handleChange = useCallback(event => {
+  const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
     setUrl(event.target.value)
   }, [])
 
@@ -36,7 +42,7 @@ export default function FileTreeImportFromUrl() {
   }, [setValid, validName, url])
 
   // form submission: create a linked file with this name, from this URL
-  const handleSubmit = event => {
+  const handleSubmit: FormEventHandler = event => {
     event.preventDefault()
     eventTracking.sendMB('new-file-created', {
       method: 'url',