fix: local state for modal confirmation but the action takes place on the callback of the modal in the parent

e2e/playwright/file-tree.spec.ts

@@ -467,7 +467,7 @@ test.describe('Renaming in the file tree', () => {
       const projectLink = page.getByText('Test Project')
       const projectMenuButton = page.getByTestId('project-sidebar-toggle')
       const fileToRename = u.locatorFile('fileToRename.kcl')
-      const renamedFile = u.locatorFile(newFileName + FILE_EXT )
+      const renamedFile = u.locatorFile(newFileName + FILE_EXT)
       const renameMenuItem = page.getByRole('button', { name: 'Rename' })
       const renameInput = page.getByPlaceholder('fileToRename.kcl')
       const codeLocator = page.locator('.cm-content')

e2e/playwright/test-utils.ts

@@ -600,11 +600,15 @@ export async function getUtils(page: Page, test_?: typeof test) {
     },
 
     locatorFile: (name: string) => {
-      return page.locator('[data-testid="file-pane-scroll-container"] [role=treeitem]').filter({ hasText: name })
+      return page
+        .locator('[data-testid="file-pane-scroll-container"] [role=treeitem]')
+        .filter({ hasText: name })
     },
 
     locatorFolder: (name: string) => {
-      return page.locator('[data-testid="file-pane-scroll-container"] [role=treeitem]').filter({ hasText: name })
+      return page
+        .locator('[data-testid="file-pane-scroll-container"] [role=treeitem]')
+        .filter({ hasText: name })
     },
 
     /**

src/components/Explorer/FileExplorer.tsx

@@ -8,7 +8,8 @@ import {
   isRowFake,
 } from '@src/components/Explorer/utils'
 import { ContextMenu, ContextMenuItem } from '@src/components/ContextMenu'
-import { useRef } from 'react'
+import { Dispatch, useRef, useState } from 'react'
+import { DeleteConfirmationDialog } from '../ProjectCard/DeleteProjectDialog'
 
 export const StatusDot = () => {
   return <span className="text-primary hue-rotate-90">•</span>
@@ -182,6 +183,34 @@ function RenameForm({
   )
 }
 
+function DeleteFileTreeItemDialog({
+  row,
+  setIsOpen,
+}: {
+  row: FileExplorerRender
+  setIsOpen: Dispatch<React.SetStateAction<boolean>>
+}) {
+  return (
+    <DeleteConfirmationDialog
+      title={`Delete ${row.isFolder ? 'folder' : 'file'}`}
+      onDismiss={() => setIsOpen(false)}
+      onConfirm={() => {
+        row.onDelete()
+        setIsOpen(false)
+      }}
+    >
+      <p className="my-4">
+        This will permanently delete "{row.name || 'this file'}"
+        {row.children !== null ? ' and all of its contents. ' : '. '}
+      </p>
+      <p className="my-4">
+        Are you sure you want to delete "{row.name || 'this file'}
+        "? This action cannot be undone.
+      </p>
+    </DeleteConfirmationDialog>
+  )
+}
+
 /**
  * Making div soup!
  * A row is a folder or a file.
@@ -203,6 +232,7 @@ export const FileExplorerRowElement = ({
   const isIndexActive = row.domIndex === row.activeIndex
   const isContextMenuRow = contextMenuRow?.key === row.key
   const isMyRowRenaming = isContextMenuRow && isRenaming
+  const [isConfirmingDelete, setIsConfirmingDelete] = useState<boolean>(false)
 
   const outlineCSS =
     isIndexActive && !isMyRowRenaming
@@ -264,13 +294,19 @@ export const FileExplorerRowElement = ({
       )}
       <div className="ml-auto">{row.status}</div>
       <div style={{ width: '0.25rem' }}></div>
+      {isConfirmingDelete && (
+        <DeleteFileTreeItemDialog
+          row={row}
+          setIsOpen={setIsConfirmingDelete}
+        />
+      )}
       <FileExplorerRowContextMenu
         itemRef={rowElementRef}
         onRename={() => {
           row.onRenameStart()
         }}
         onDelete={() => {
-          row.onDelete()
+          setIsConfirmingDelete(true)
         }}
         onOpenInNewWindow={() => {
           row.onOpenInNewWindow()