Manage dashboards: Can now delete empty folders (#42527) (#42591)

* Manage dashboards: Can now delete empty folders

* Split hasChecked out into a separate function

* Update modal text

(cherry picked from commit a365dcca5b)

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>

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

@@ -32,7 +32,7 @@ export const ConfirmDeleteModal: FC<Props> = ({ results, onDeleteItems, isOpen,
     text += `selected folder${folderEnding} and dashboard${dashEnding}?\n`;
     subtitle = `All dashboards and alerts of the selected folder${folderEnding} will also be deleted`;
   } else if (folderCount > 0) {
-    text += `selected folder${folderEnding} and all their dashboards and alerts?`;
+    text += `selected folder${folderEnding} and all ${folderCount === 1 ? 'its' : 'their'} dashboards and alerts?`;
   } else {
     text += `selected dashboard${dashEnding}?`;
   }

public/app/features/search/hooks/useManageDashboards.test.ts

@@ -197,4 +197,26 @@ describe('useManageDashboards', () => {
       expect(result.current.canDelete).toBe(false);
     });
   });
+
+  describe('when called on an empty folder', () => {
+    it('then canDelete should be true', () => {
+      const results: DashboardSection[] = [
+        { id: 1, checked: true, items: [], title: 'One', type: DashboardSearchItemType.DashFolder, toggle, url: '/' },
+        {
+          id: GENERAL_FOLDER_ID,
+          checked: false,
+          items: [],
+          title: 'General',
+          type: DashboardSearchItemType.DashFolder,
+          toggle,
+          url: '/',
+        },
+        { id: 2, checked: false, items: [], title: 'Two', type: DashboardSearchItemType.DashFolder, toggle, url: '/' },
+      ];
+
+      const { result } = setupTestContext({ results });
+
+      expect(result.current.canDelete).toBe(true);
+    });
+  });
 });

public/app/features/search/hooks/useManageDashboards.ts

@@ -1,12 +1,16 @@
 import { useCallback, useMemo, useReducer } from 'react';
 import { FolderDTO } from 'app/types';
 import { contextSrv } from 'app/core/services/context_srv';
-import { DashboardQuery, OnDeleteItems, OnMoveItems, OnToggleChecked } from '../types';
+import { DashboardQuery, DashboardSection, OnDeleteItems, OnMoveItems, OnToggleChecked } from '../types';
 import { DELETE_ITEMS, MOVE_ITEMS, TOGGLE_ALL_CHECKED, TOGGLE_CHECKED } from '../reducers/actionTypes';
 import { manageDashboardsReducer, manageDashboardsState, ManageDashboardsState } from '../reducers/manageDashboards';
 import { useSearch } from './useSearch';
 import { GENERAL_FOLDER_ID } from '../constants';
 
+const hasChecked = (section: DashboardSection) => {
+  return section.checked || section.items.some((item) => item.checked);
+};
+
 export const useManageDashboards = (
   query: DashboardQuery,
   state: Partial<ManageDashboardsState> = {},
@@ -42,14 +46,13 @@ export const useManageDashboards = (
     dispatch({ type: MOVE_ITEMS, payload: { dashboards: selectedDashboards, folder } });
   };
 
-  const canMove = useMemo(() => results.some((result) => result.items && result.items.some((item) => item.checked)), [
-    results,
-  ]);
+  const canMove = useMemo(() => results.some((result) => result.items.some((item) => item.checked)), [results]);
 
   const canDelete = useMemo(() => {
+    const somethingChecked = results.some(hasChecked);
     const includesGeneralFolder = results.find((result) => result.checked && result.id === GENERAL_FOLDER_ID);
-    return canMove && !includesGeneralFolder;
-  }, [canMove, results]);
+    return somethingChecked && !includesGeneralFolder;
+  }, [results]);
 
   const canSave = folder?.canSave;
   const hasEditPermissionInFolders = folder ? canSave : contextSrv.hasEditPermissionInFolders;