From ab07326169879381b24bc47aabe175e37fc253ce Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Wed, 29 Apr 2020 19:18:37 +0300
Subject: [PATCH] Search: close overlay on Esc press (#24003)

* Search: Close on Esc

* Search: Increase bottom padding for the last item in section

* Search: Move closing search to keybindingsSrv

* Search: Fix folder view

* Search: Do not move folders if already in folder
---
 public/app/core/services/keybindingSrv.ts                | 9 +++++++++
 public/app/core/services/search_srv.ts                   | 4 +++-
 .../app/features/search/components/DashboardSearch.tsx   | 8 +-------
 .../app/features/search/components/ManageDashboards.tsx  | 2 +-
 .../app/features/search/components/MoveToFolderModal.tsx | 3 ++-
 public/app/features/search/components/SearchItem.tsx     | 4 ++++
 public/app/features/search/components/SearchResults.tsx  | 6 +++---
 7 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/public/app/core/services/keybindingSrv.ts b/public/app/core/services/keybindingSrv.ts
index bd81034aad3..b5bac7100e5 100644
--- a/public/app/core/services/keybindingSrv.ts
+++ b/public/app/core/services/keybindingSrv.ts
@@ -87,6 +87,11 @@ export class KeybindingSrv {
     this.$location.search(search);
   }
 
+  closeSearch() {
+    const search = _.extend(this.$location.search(), { search: null });
+    this.$location.search(search);
+  }
+
   openAlerting() {
     this.$location.url('/alerting');
   }
@@ -148,6 +153,10 @@ export class KeybindingSrv {
     if (search.kiosk) {
       this.$rootScope.appEvent(CoreEvents.toggleKioskMode, { exit: true });
     }
+
+    if (search.search) {
+      this.closeSearch();
+    }
   }
 
   bind(keyArg: string | string[], fn: () => void) {
diff --git a/public/app/core/services/search_srv.ts b/public/app/core/services/search_srv.ts
index 8b00995f7ba..25e7ff91511 100644
--- a/public/app/core/services/search_srv.ts
+++ b/public/app/core/services/search_srv.ts
@@ -76,7 +76,9 @@ export class SearchSrv {
     query.folderIds = query.folderIds || [];
 
     if (query.layout === SearchLayout.List) {
-      return backendSrv.search({ ...query, type: DashboardSearchItemType.DashDB });
+      return backendSrv
+        .search({ ...query, type: DashboardSearchItemType.DashDB })
+        .then(results => [{ items: results }]);
     }
 
     if (!filters) {
diff --git a/public/app/features/search/components/DashboardSearch.tsx b/public/app/features/search/components/DashboardSearch.tsx
index 0cba3528126..1241bf373d6 100644
--- a/public/app/features/search/components/DashboardSearch.tsx
+++ b/public/app/features/search/components/DashboardSearch.tsx
@@ -20,19 +20,13 @@ export const DashboardSearch: FC<Props> = memo(({ onCloseSearch, folder }) => {
   const theme = useTheme();
   const styles = getStyles(theme);
 
-  // The main search input has own keydown handler, also TagFilter uses input, so
-  // clicking Esc when tagFilter is active shouldn't close the whole search overlay
-  const onClose = () => {
-    onCloseSearch();
-  };
-
   return (
     <div tabIndex={0} className={styles.overlay}>
       <div className={styles.container}>
         <div className={styles.searchField}>
           <SearchField query={query} onChange={onQueryChange} onKeyDown={onKeyDown} autoFocus clearable />
           <div className={styles.closeBtn}>
-            <IconButton name="times" surface="panel" onClick={onClose} size="xxl" tooltip="Close search" />
+            <IconButton name="times" surface="panel" onClick={onCloseSearch} size="xxl" tooltip="Close search" />
           </div>
         </div>
         <div className={styles.search}>
diff --git a/public/app/features/search/components/ManageDashboards.tsx b/public/app/features/search/components/ManageDashboards.tsx
index 7d8340917e4..cccce6c1511 100644
--- a/public/app/features/search/components/ManageDashboards.tsx
+++ b/public/app/features/search/components/ManageDashboards.tsx
@@ -67,7 +67,7 @@ export const ManageDashboards: FC<Props> = memo(({ folderId, folderUid }) => {
     setIsDeleteModalOpen(true);
   };
 
-  if (canSave && folderId && !hasFilters && results.length === 0) {
+  if (canSave && folderId && !hasFilters && results.length === 0 && !loading) {
     return (
       <EmptyListCTA
         title="This folder doesn't have any dashboards yet"
diff --git a/public/app/features/search/components/MoveToFolderModal.tsx b/public/app/features/search/components/MoveToFolderModal.tsx
index 9c605e3a84e..ef88bc11e5e 100644
--- a/public/app/features/search/components/MoveToFolderModal.tsx
+++ b/public/app/features/search/components/MoveToFolderModal.tsx
@@ -36,9 +36,10 @@ export const MoveToFolderModal: FC<Props> = ({ results, onMoveItems, isOpen, onD
 
         if (result.totalCount === result.alreadyInFolderCount) {
           appEvents.emit(AppEvents.alertError, ['Error', `Dashboard already belongs to folder ${folderTitle}`]);
+        } else {
+          onMoveItems(selectedDashboards, folder);
         }
 
-        onMoveItems(selectedDashboards, folder);
         onDismiss();
       });
     }
diff --git a/public/app/features/search/components/SearchItem.tsx b/public/app/features/search/components/SearchItem.tsx
index be7c5f98f08..aa1fedb99d5 100644
--- a/public/app/features/search/components/SearchItem.tsx
+++ b/public/app/features/search/components/SearchItem.tsx
@@ -63,6 +63,10 @@ const getResultsItemStyles = stylesFactory((theme: GrafanaTheme) => ({
     margin-bottom: ${SEARCH_ITEM_MARGIN}px;
     padding: 0 ${theme.spacing.md};
 
+    &:last-child {
+      margin-bottom: ${SEARCH_ITEM_MARGIN * 2}px;
+    }
+
     :hover {
       cursor: pointer;
     }
diff --git a/public/app/features/search/components/SearchResults.tsx b/public/app/features/search/components/SearchResults.tsx
index f83465c61d9..7d4522bd508 100644
--- a/public/app/features/search/components/SearchResults.tsx
+++ b/public/app/features/search/components/SearchResults.tsx
@@ -47,8 +47,8 @@ export const SearchResults: FC<Props> = ({
       </div>
     );
   };
-
   const renderDashboards = () => {
+    const items = results[0]?.items;
     return (
       <div className={styles.listModeWrapper}>
         <AutoSizer disableWidth>
@@ -59,11 +59,11 @@ export const SearchResults: FC<Props> = ({
               innerElementType="ul"
               itemSize={SEARCH_ITEM_HEIGHT + SEARCH_ITEM_MARGIN}
               height={height}
-              itemCount={results.length}
+              itemCount={items.length}
               width="100%"
             >
               {({ index, style }) => {
-                const item = results[index];
+                const item = items[index];
                 // The wrapper div is needed as the inner SearchItem has margin-bottom spacing
                 // And without this wrapper there is no room for that margin
                 return (