Search(Playground): Sync data when Move and Delete Dashboards (#48944)

Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com>

public/app/features/search/page/SearchPage.tsx

@@ -88,6 +88,14 @@ export default function SearchPage() {
     setSearchSelection(updateSearchSelection(searchSelection, !current, kind, [uid]));
   };
 
+  // function to update items when dashboards or folders are moved or deleted
+  const onChangeItemsList = async () => {
+    // clean up search selection
+    setSearchSelection(newSearchSelection());
+    // trigger again the search to the backend
+    onQueryChange(inputValue);
+  };
+
   const renderResults = () => {
     const value = results.value;
 
@@ -174,7 +182,7 @@ export default function SearchPage() {
         </InlineFieldRow>
 
         {Boolean(searchSelection.items.size > 0) ? (
-          <ManageActions items={searchSelection.items} />
+          <ManageActions items={searchSelection.items} onChange={onChangeItemsList} />
         ) : (
           <ActionRow
             onLayoutChange={(v) => {

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

@@ -5,10 +5,10 @@ import { GrafanaTheme } from '@grafana/data';
 import { ConfirmModal, stylesFactory, useTheme } from '@grafana/ui';
 import { deleteFoldersAndDashboards } from 'app/features/manage-dashboards/state/actions';
 
-import { OnDeleteSelectedItems } from '../../types';
+import { OnMoveOrDeleleSelectedItems } from '../../types';
 
 interface Props {
-  onDeleteItems: OnDeleteSelectedItems;
+  onDeleteItems: OnMoveOrDeleleSelectedItems;
   results: Map<string, Set<string>>;
   isOpen: boolean;
   onDismiss: () => void;
@@ -40,8 +40,8 @@ export const ConfirmDeleteModal: FC<Props> = ({ results, onDeleteItems, isOpen,
 
   const deleteItems = () => {
     deleteFoldersAndDashboards(folders, dashboards).then(() => {
+      onDeleteItems();
       onDismiss();
-      onDeleteItems(folders, dashboards);
     });
   };
 

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

@@ -2,9 +2,10 @@ import React, { useState } from 'react';
 
 import { Button, Checkbox, HorizontalGroup, useStyles2 } from '@grafana/ui';
 import { contextSrv } from 'app/core/services/context_srv';
-import { FolderDTO, FolderInfo } from 'app/types';
+import { FolderDTO } from 'app/types';
 
 import { GENERAL_FOLDER_UID } from '../../constants';
+import { OnMoveOrDeleleSelectedItems } from '../../types';
 
 import { getStyles } from './ActionRow';
 import { ConfirmDeleteModal } from './ConfirmDeleteModal';
@@ -13,9 +14,10 @@ import { MoveToFolderModal } from './MoveToFolderModal';
 type Props = {
   items: Map<string, Set<string>>;
   folder?: FolderDTO; // when we are loading in folder page
+  onChange: OnMoveOrDeleleSelectedItems;
 };
 
-export function ManageActions({ items, folder }: Props) {
+export function ManageActions({ items, folder, onChange }: Props) {
   const styles = useStyles2(getStyles);
 
   const canSave = folder?.canSave;
@@ -45,20 +47,6 @@ export function ManageActions({ items, folder }: Props) {
     alert('TODO, toggle all....');
   };
 
-  //Todo: update item lists that were moved
-  const onMoveItems = (selectedDashboards: string[], folder: FolderInfo | null) => {
-    console.log({ selectedDashboards });
-    console.log({ folder });
-    console.log('items were moved in the backend');
-  };
-
-  //Todo: update item lists that were deleted
-  const onDeleteItems = (folders: string[], dashboards: string[]) => {
-    console.log({ folders });
-    console.log({ dashboards });
-    console.log('items were moved in the backend');
-  };
-
   return (
     <div className={styles.actionRow}>
       <div className={styles.rowContainer}>
@@ -83,13 +71,13 @@ export function ManageActions({ items, folder }: Props) {
       </div>
 
       <ConfirmDeleteModal
-        onDeleteItems={onDeleteItems}
+        onDeleteItems={onChange}
         results={items}
         isOpen={isDeleteModalOpen}
         onDismiss={() => setIsDeleteModalOpen(false)}
       />
       <MoveToFolderModal
-        onMoveItems={onMoveItems}
+        onMoveItems={onChange}
         results={items}
         isOpen={isMoveModalOpen}
         onDismiss={() => setIsMoveModalOpen(false)}

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

@@ -8,10 +8,10 @@ import { useAppNotification } from 'app/core/copy/appNotification';
 import { moveDashboards } from 'app/features/manage-dashboards/state/actions';
 import { FolderInfo } from 'app/types';
 
-import { OnMoveSelectedItems } from '../../types';
+import { OnMoveOrDeleleSelectedItems } from '../../types';
 
 interface Props {
-  onMoveItems: OnMoveSelectedItems;
+  onMoveItems: OnMoveOrDeleleSelectedItems;
   results: Map<string, Set<string>>;
   isOpen: boolean;
   onDismiss: () => void;
@@ -23,11 +23,12 @@ export const MoveToFolderModal: FC<Props> = ({ results, onMoveItems, isOpen, onD
   const styles = getStyles(theme);
   const notifyApp = useAppNotification();
   const selectedDashboards = Array.from(results.get('dashboard') ?? []);
+  const [moving, setMoving] = useState(false);
 
   const moveTo = () => {
     if (folder && selectedDashboards.length) {
       const folderTitle = folder.title ?? 'General';
-
+      setMoving(true);
       moveDashboards(selectedDashboards, folder).then((result: any) => {
         if (result.successCount > 0) {
           const ending = result.successCount === 1 ? '' : 's';
@@ -40,9 +41,10 @@ export const MoveToFolderModal: FC<Props> = ({ results, onMoveItems, isOpen, onD
           notifyApp.error('Error', `Dashboard already belongs to folder ${folderTitle}`);
         } else {
           //update the list
-          onMoveItems(selectedDashboards, folder);
+          onMoveItems();
         }
 
+        setMoving(false);
         onDismiss();
       });
     }
@@ -66,7 +68,7 @@ export const MoveToFolderModal: FC<Props> = ({ results, onMoveItems, isOpen, onD
         </div>
 
         <HorizontalGroup justify="center">
-          <Button variant="primary" onClick={moveTo}>
+          <Button icon={moving ? 'fa fa-spinner' : undefined} variant="primary" onClick={moveTo}>
             Move
           </Button>
           <Button variant="secondary" onClick={onDismiss}>

public/app/features/search/types.ts

@@ -110,5 +110,4 @@ export interface SearchQueryParams {
 }
 
 // new Search Types
-export type OnDeleteSelectedItems = (folders: string[], dashboards: string[]) => void;
+export type OnMoveOrDeleleSelectedItems = () => void;
-export type OnMoveSelectedItems = (selectedDashboards: string[], folder: FolderInfo | null) => void;