From c126ea976f86fd6b2f50c98b19edeed466c27561 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Fri, 12 May 2023 16:33:04 +0100
Subject: [PATCH] [v10.0.x] Command Palette: Prevent stale search results from
 overwriting newer results (#68392)

Command Palette: Prevent stale search results from overwriting newer results (#68377)

* only update the state if this is the most recent request

* fix empty state as well

* improve perf of recent dashboards

(cherry picked from commit 446885bd1a8e28d353483ea09083a94618c34e01)

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
---
 .../commandPalette/actions/dashboardActions.ts   | 16 +++++++++++++---
 .../commandPalette/actions/useActions.ts         |  4 +---
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/public/app/features/commandPalette/actions/dashboardActions.ts b/public/app/features/commandPalette/actions/dashboardActions.ts
index 69016f4d80e..a46c4443859 100644
--- a/public/app/features/commandPalette/actions/dashboardActions.ts
+++ b/public/app/features/commandPalette/actions/dashboardActions.ts
@@ -1,5 +1,5 @@
 import debounce from 'debounce-promise';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { locationUtil } from '@grafana/data';
 import { config } from '@grafana/runtime';
@@ -83,17 +83,27 @@ export async function getSearchResultActions(searchQuery: string): Promise<Comma
 export function useSearchResults(searchQuery: string, isShowing: boolean) {
   const [searchResults, setSearchResults] = useState<CommandPaletteAction[]>([]);
   const [isFetchingSearchResults, setIsFetchingSearchResults] = useState(false);
+  const lastRequestTimestamp = useRef<number>();
 
   // Hit dashboards API
   useEffect(() => {
+    const timestamp = Date.now();
     if (isShowing && searchQuery.length > 0) {
       setIsFetchingSearchResults(true);
       debouncedSearch(searchQuery).then((resultActions) => {
-        setSearchResults(resultActions);
-        setIsFetchingSearchResults(false);
+        // Only update the state if this is the most recent request
+        // We don't need to worry about clearing the isFetching state either
+        // If there's a later request in progress, this will clear it for us
+        if (!lastRequestTimestamp.current || timestamp > lastRequestTimestamp.current) {
+          setSearchResults(resultActions);
+          setIsFetchingSearchResults(false);
+          lastRequestTimestamp.current = timestamp;
+        }
       });
     } else {
       setSearchResults([]);
+      setIsFetchingSearchResults(false);
+      lastRequestTimestamp.current = timestamp;
     }
   }, [isShowing, searchQuery]);
 
diff --git a/public/app/features/commandPalette/actions/useActions.ts b/public/app/features/commandPalette/actions/useActions.ts
index 15f5547266f..a3895f694ca 100644
--- a/public/app/features/commandPalette/actions/useActions.ts
+++ b/public/app/features/commandPalette/actions/useActions.ts
@@ -30,10 +30,8 @@ export default function useActions(searchQuery: string) {
         .catch((err) => {
           console.error('Error loading recent dashboard actions', err);
         });
-    } else {
-      setRecentDashboardActions([]);
     }
   }, [searchQuery]);
 
-  return [...recentDashboardActions, ...navTreeActions];
+  return searchQuery ? navTreeActions : [...recentDashboardActions, ...navTreeActions];
 }