Merge pull request #27806 from overleaf/dp-file-tree-modals-typescript

Convert FileTree modal components to typescript

GitOrigin-RevId: 8dde8dc0d27aa545a300f4be939eb83e6963ad5d

services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-delete.jsx → services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-delete.tsx

@@ -45,7 +45,7 @@ function FileTreeModalDelete() {
       <OLModalBody>
         <p>{t('sure_you_want_to_delete')}</p>
         <ul>
-          {actionedEntities.map(entity => (
+          {actionedEntities?.map(entity => (
             <li key={entity._id}>{entity.name}</li>
           ))}
         </ul>

services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-error.jsx → services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-error.tsx

@@ -72,9 +72,7 @@ function FileTreeModalError() {
       </OLModalHeader>
 
       <OLModalBody>
-        <div role="alert" aria-label={errorMessage()}>
-          {errorMessage()}
-        </div>
+        <div role="alert">{errorMessage()}</div>
       </OLModalBody>
 
       <OLModalFooter>

services/web/frontend/js/features/file-tree/contexts/file-tree-actionable.tsx

@@ -35,6 +35,7 @@ import { Folder } from '../../../../../types/folder'
 import { useReferencesContext } from '@/features/ide-react/context/references-context'
 import { usePermissionsContext } from '@/features/ide-react/context/permissions-context'
 import { fileUrl } from '@/features/utils/fileUrl'
+import { FileTreeEntity } from '@ol-types/file-tree-entity'
 
 type DroppedFile = File & {
   relativePath?: string
@@ -53,7 +54,7 @@ const FileTreeActionableContext = createContext<
       isCreatingFolder: boolean
       isMoving: boolean
       inFlight: boolean
-      actionedEntities: any | null
+      actionedEntities: FileTreeEntity[] | null
       newFileCreateMode: any | null
       error: any | null
       canDelete: boolean
@@ -106,7 +107,7 @@ type State = {
   isCreatingFolder: boolean
   isMoving: boolean
   inFlight: boolean
-  actionedEntities: any | null
+  actionedEntities: FileTreeEntity[] | null
   newFileCreateMode: any | null
   error: unknown | null
 }
@@ -133,7 +134,7 @@ type Action =
     }
   | {
       type: ACTION_TYPES.START_DELETE
-      actionedEntities: any | null
+      actionedEntities: FileTreeEntity[] | null
     }
   | {
       type: ACTION_TYPES.START_CREATE_FILE

services/web/test/frontend/features/file-tree/flows/rename-entity.spec.tsx

@@ -108,18 +108,16 @@ describe('FileTree Rename Entity Flow', function () {
   it('shows error modal on invalid filename', function () {
     renameItem('a.tex', '///')
 
-    cy.findByRole('alert', {
-      name: 'File name is empty or contains invalid characters',
-      hidden: true,
+    cy.findByText('File name is empty or contains invalid characters', {
+      selector: '[role="alert"]',
     })
   })
 
   it('shows error modal on duplicate filename', function () {
     renameItem('a.tex', 'folder')
 
-    cy.findByRole('alert', {
-      name: 'A file or folder with this name already exists',
-      hidden: true,
+    cy.findByText('A file or folder with this name already exists', {
+      selector: '[role="alert"]',
     })
   })
 
@@ -128,18 +126,16 @@ describe('FileTree Rename Entity Flow', function () {
 
     renameItem('c.tex', 'e.tex')
 
-    cy.findByRole('alert', {
-      name: 'A file or folder with this name already exists',
-      hidden: true,
+    cy.findByText('A file or folder with this name already exists', {
+      selector: '[role="alert"]',
     })
   })
 
   it('shows error modal on blocked filename', function () {
     renameItem('a.tex', 'prototype')
 
-    cy.findByRole('alert', {
-      name: 'This file name is blocked.',
-      hidden: true,
+    cy.findByText('This file name is blocked.', {
+      selector: '[role="alert"]',
     })
   })