CommandPalette: Populate dashboard search when the palette is opened (#51293)

Co-authored-by: Kristina Durivage <kristina.durivage@grafana.com>

public/app/features/commandPalette/CommandPalette.tsx

@@ -34,6 +34,7 @@ import getGlobalActions from './actions/global.static.actions';
 export const CommandPalette = () => {
   const styles = useStyles2(getSearchStyles);
   const [actions, setActions] = useState<Action[]>([]);
+  const [staticActions, setStaticActions] = useState<Action[]>([]);
   const { query, showing } = useKBar((state) => ({
     showing: state.visualState === VisualState.showing,
   }));
@@ -48,18 +49,22 @@ export const CommandPalette = () => {
   useEffect(() => {
     (async () => {
       if (isNotLogin) {
-        const staticActions = getGlobalActions(navBarTree);
-        const dashAct = await getDashboardNavActions('go/dashboard');
-        setActions([...staticActions, ...dashAct]);
+        setStaticActions(getGlobalActions(navBarTree));
+        setActions(staticActions);
       }
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isNotLogin]);
+  }, [isNotLogin, navBarTree]);
 
   useEffect(() => {
     if (showing) {
       reportInteraction('commandPalette_opened');
 
+      // Do dashboard search on demand
+      getDashboardNavActions('go/dashboard').then((dashAct) => {
+        setActions([...staticActions, ...dashAct]);
+      });
+
       keybindingSrv.bindGlobal('esc', () => {
         query.setVisualState(VisualState.animatingOut);
       });

public/app/features/commandPalette/actions/dashboard.nav.actions.ts

@@ -1,21 +1,27 @@
 import { Action } from 'kbar';
 
 import { locationUtil } from '@grafana/data';
-import { locationService, getBackendSrv } from '@grafana/runtime';
+import { locationService } from '@grafana/runtime';
+import { getGrafanaSearcher } from 'app/features/search/service';
 
 async function getDashboardNav(parentId: string): Promise<Action[]> {
-  const data: Array<{ type: string; title: string; url: string }> = await getBackendSrv().get('/api/search');
+  const data = await getGrafanaSearcher().search({
+    kind: ['dashboard'],
+    query: '*',
+    limit: 500,
+  });
 
-  const goToDashboardActions: Action[] = data
-    .filter((item) => item.type === 'dash-db')
-    .map((item) => ({
+  const goToDashboardActions: Action[] = data.view.map((item) => {
+    const { url, name } = item; // items are backed by DataFrameView, so must hold the url in a closure
+    return {
       parent: parentId,
-      id: `go/dashboard/${item.url}`,
-      name: `Go to dashboard ${item.title}`,
+      id: `go/dashboard/${url}`,
+      name: `${name}`,
       perform: () => {
-        locationService.push(locationUtil.stripBaseFromUrl(item.url));
+        locationService.push(locationUtil.stripBaseFromUrl(url));
       },
-    }));
+    };
+  });
 
   return goToDashboardActions;
 }

public/app/features/search/service/bluge.ts

@@ -77,7 +77,7 @@ async function doSearchQuery(query: SearchQuery): Promise<QueryResponse> {
     search: {
       ...query,
       query: query.query ?? '*',
-      limit: firstPageSize,
+      limit: query.limit ?? firstPageSize,
     },
   };
   const rsp = await lastValueFrom(

public/app/features/search/service/sql.ts

@@ -42,7 +42,7 @@ export class SQLSearcher implements GrafanaSearcher {
       throw 'facets not supported!';
     }
     const q: APIQuery = {
-      limit: 1000, // 1k max values
+      limit: query.limit ?? 1000, // default 1k max values
       tag: query.tags,
       sort: query.sort,
     };