NestedFolders: add delete confirmation to delete modal (#65548)

add delete confirmation to delete modal

public/app/features/search/components/DashboardActions.tsx

@@ -90,12 +90,7 @@ export const DashboardActions = ({ folder, canCreateFolders = false, canCreateDa
       </div>
 
       {canMove && isMoveModalOpen && (
-        <MoveToFolderModal
-          onMoveItems={() => {}}
-          results={moveSelection}
-          isOpen={isMoveModalOpen}
-          onDismiss={() => setIsMoveModalOpen(false)}
-        />
+        <MoveToFolderModal onMoveItems={() => {}} results={moveSelection} onDismiss={() => setIsMoveModalOpen(false)} />
       )}
     </>
   );

public/app/features/search/page/components/ConfirmDeleteModal.test.tsx

@@ -1,22 +1,46 @@
 import { render, screen, within } from '@testing-library/react';
 import React from 'react';
 
+import { config } from 'app/core/config';
+
 import { ConfirmDeleteModal } from './ConfirmDeleteModal';
 
 describe('ConfirmModal', () => {
   it('should render correct title, body, dismiss-, cancel- and delete-text', () => {
-    const items = new Map();
-    const dashboardsUIDs = new Set();
-    dashboardsUIDs.add('uid1');
-    dashboardsUIDs.add('uid2');
-    items.set('dashboard', dashboardsUIDs);
-    const onDeleteItems = jest.fn();
-    render(<ConfirmDeleteModal onDeleteItems={onDeleteItems} results={items} onDismiss={() => {}} />);
+    const selectedItems = new Map([['dashboard', new Set(['uid1', 'uid2'])]]);
+
+    render(<ConfirmDeleteModal onDeleteItems={() => {}} results={selectedItems} onDismiss={() => {}} />);
 
     expect(screen.getByRole('heading', { name: 'Delete' })).toBeInTheDocument();
     expect(screen.getByText('Do you want to delete the 2 selected dashboards?')).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
     const button = screen.getByRole('button', { name: 'Confirm Modal Danger Button' });
     expect(within(button).getByText('Delete')).toBeInTheDocument();
+
+    expect(screen.queryByPlaceholderText('Type delete to confirm')).not.toBeInTheDocument();
+  });
+
+  describe('with nestedFolders feature flag', () => {
+    let originalNestedFoldersValue = config.featureToggles.nestedFolders;
+
+    beforeAll(() => {
+      originalNestedFoldersValue = config.featureToggles.nestedFolders;
+      config.featureToggles.nestedFolders = true;
+    });
+
+    afterAll(() => {
+      config.featureToggles.nestedFolders = originalNestedFoldersValue;
+    });
+
+    it("should ask to type 'delete' to confirm when a folder is selected", async () => {
+      const selectedItems = new Map([
+        ['dashboard', new Set(['uid1', 'uid2'])],
+        ['folder', new Set(['uid3'])],
+      ]);
+
+      render(<ConfirmDeleteModal onDeleteItems={() => {}} results={selectedItems} onDismiss={() => {}} />);
+
+      expect(screen.getByPlaceholderText('Type delete to confirm')).toBeInTheDocument();
+    });
   });
 });

public/app/features/search/page/components/ConfirmDeleteModal.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { ConfirmModal, useStyles2 } from '@grafana/ui';
+import { config } from 'app/core/config';
 import { deleteFoldersAndDashboards } from 'app/features/manage-dashboards/state/actions';
 
 import { OnMoveOrDeleleSelectedItems } from '../../types';
@@ -43,6 +44,8 @@ export const ConfirmDeleteModal = ({ results, onDeleteItems, onDismiss }: Props)
     });
   };
 
+  const requireDoubleConfirm = config.featureToggles.nestedFolders && folderCount > 0;
+
   return (
     <ConfirmModal
       isOpen
@@ -53,6 +56,7 @@ export const ConfirmDeleteModal = ({ results, onDeleteItems, onDismiss }: Props)
         </>
       }
       confirmText="Delete"
+      confirmationText={requireDoubleConfirm ? 'delete' : undefined}
       onConfirm={deleteItems}
       onDismiss={onDismiss}
     />