Search: minor fixes (#23984)

* Search: Use folder id as key when present

* Search: Do not render modals if not open

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

@@ -46,7 +46,7 @@ export const ConfirmDeleteModal: FC<Props> = ({ results, onDeleteItems, isOpen,
     });
     });
   };
   };
 
 
-  return (
+  return isOpen ? (
     <ConfirmModal
     <ConfirmModal
       isOpen={isOpen}
       isOpen={isOpen}
       title="Delete"
       title="Delete"
@@ -59,7 +59,7 @@ export const ConfirmDeleteModal: FC<Props> = ({ results, onDeleteItems, isOpen,
       onConfirm={deleteItems}
       onConfirm={deleteItems}
       onDismiss={onDismiss}
       onDismiss={onDismiss}
     />
     />
-  );
+  ) : null;
 };
 };
 
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
 const getStyles = stylesFactory((theme: GrafanaTheme) => {

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

@@ -44,7 +44,7 @@ export const MoveToFolderModal: FC<Props> = ({ results, onMoveItems, isOpen, onD
     }
     }
   };
   };
 
 
-  return (
+  return isOpen ? (
     <Modal
     <Modal
       className={styles.modal}
       className={styles.modal}
       title="Choose Dashboard Folder"
       title="Choose Dashboard Folder"
@@ -71,7 +71,7 @@ export const MoveToFolderModal: FC<Props> = ({ results, onMoveItems, isOpen, onD
         </HorizontalGroup>
         </HorizontalGroup>
       </>
       </>
     </Modal>
     </Modal>
-  );
+  ) : null;
 };
 };
 
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
 const getStyles = stylesFactory((theme: GrafanaTheme) => {

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

@@ -36,7 +36,7 @@ export const SearchResults: FC<Props> = ({
       <div className={styles.wrapper}>
       <div className={styles.wrapper}>
         {results.map(section => {
         {results.map(section => {
           return (
           return (
-            <div aria-label="Search section" className={styles.section} key={section.title}>
+            <div aria-label="Search section" className={styles.section} key={section.id || section.title}>
               <SectionHeader onSectionClick={onToggleSection} {...{ onToggleChecked, editable, section }} />
               <SectionHeader onSectionClick={onToggleSection} {...{ onToggleChecked, editable, section }} />
               <div aria-label="Search items" className={styles.sectionItems}>
               <div aria-label="Search items" className={styles.sectionItems}>
                 {section.expanded && section.items.map(item => <SearchItem key={item.id} {...itemProps} item={item} />)}
                 {section.expanded && section.items.map(item => <SearchItem key={item.id} {...itemProps} item={item} />)}