From d44ddba99685a4965c6100fdeacc2c74d2f2c8d6 Mon Sep 17 00:00:00 2001
From: Laura Benz <48948963+L-M-K-B@users.noreply.github.com>
Date: Fri, 14 Jun 2024 14:30:05 +0200
Subject: [PATCH] RestoreDashboards: Fix counting bug (#89201)

Fix restore modal showing incorrect counts

Co-authored-by: joshhunt <josh@trtr.co>
---
 .../components/RestoreModal.tsx                 |  9 +++++----
 .../state/RecentlyDeletedActions.tsx            | 17 +++++++++++------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/public/app/features/manage-dashboards/components/RestoreModal.tsx b/public/app/features/manage-dashboards/components/RestoreModal.tsx
index 9e09d26199f..520825861fb 100644
--- a/public/app/features/manage-dashboards/components/RestoreModal.tsx
+++ b/public/app/features/manage-dashboards/components/RestoreModal.tsx
@@ -3,22 +3,23 @@ import React from 'react';
 import { ConfirmModal, Text } from '@grafana/ui';
 
 import { Trans, t } from '../../../core/internationalization';
-import { DashboardTreeSelection } from '../../browse-dashboards/types';
 
 interface Props {
   isOpen: boolean;
   onConfirm: () => Promise<void>;
   onDismiss: () => void;
-  selectedItems: DashboardTreeSelection;
+  selectedDashboards: string[];
   isLoading: boolean;
 }
 
-export const RestoreModal = ({ onConfirm, onDismiss, selectedItems, isLoading, ...props }: Props) => {
-  const numberOfDashboards = selectedItems ? Object.keys(selectedItems.dashboard).length : 0;
+export const RestoreModal = ({ onConfirm, onDismiss, selectedDashboards, isLoading, ...props }: Props) => {
+  const numberOfDashboards = selectedDashboards.length;
+
   const onRestore = async () => {
     await onConfirm();
     onDismiss();
   };
+
   return (
     <ConfirmModal
       body={
diff --git a/public/app/features/manage-dashboards/state/RecentlyDeletedActions.tsx b/public/app/features/manage-dashboards/state/RecentlyDeletedActions.tsx
index a46efec3911..79983e8f8a1 100644
--- a/public/app/features/manage-dashboards/state/RecentlyDeletedActions.tsx
+++ b/public/app/features/manage-dashboards/state/RecentlyDeletedActions.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data/';
 import { Button, useStyles2 } from '@grafana/ui';
@@ -17,11 +17,17 @@ export function RecentlyDeletedActions() {
   const styles = useStyles2(getStyles);
 
   const dispatch = useDispatch();
-  const selectedItems = useActionSelectionState();
+  const selectedItemsState = useActionSelectionState();
   const [, stateManager] = useRecentlyDeletedStateManager();
 
   const [restoreDashboard, { isLoading: isRestoreLoading }] = useRestoreDashboardMutation();
 
+  const selectedDashboards = useMemo(() => {
+    return Object.entries(selectedItemsState.dashboard)
+      .filter(([_, selected]) => selected)
+      .map(([uid]) => uid);
+  }, [selectedItemsState.dashboard]);
+
   const onActionComplete = () => {
     dispatch(setAllSelection({ isSelected: false, folderUID: undefined }));
 
@@ -29,9 +35,8 @@ export function RecentlyDeletedActions() {
   };
 
   const onRestore = async () => {
-    const promises = Object.entries(selectedItems.dashboard)
-      .filter(([_, selected]) => selected)
-      .map(([uid]) => restoreDashboard({ dashboardUID: uid }));
+    const promises = selectedDashboards.map((uid) => restoreDashboard({ dashboardUID: uid }));
+
     await Promise.all(promises);
     onActionComplete();
   };
@@ -41,7 +46,7 @@ export function RecentlyDeletedActions() {
       new ShowModalReactEvent({
         component: RestoreModal,
         props: {
-          selectedItems,
+          selectedDashboards,
           onConfirm: onRestore,
           isLoading: isRestoreLoading,
         },