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

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

.betterer.results

@@ -4473,12 +4473,12 @@ exports[`no explicit any`] = {
       [24, 44, 3, "Unexpected any. Specify a different type.", "193409811"],
       [24, 78, 3, "Unexpected any. Specify a different type.", "193409811"]
     ],
-    "public/app/features/search/service/bluge.ts:3054830800": [
+    "public/app/features/search/service/bluge.ts:59496993": [
       [38, 13, 3, "Unexpected any. Specify a different type.", "193409811"],
       [85, 9, 3, "Unexpected any. Specify a different type.", "193409811"],
       [145, 15, 3, "Unexpected any. Specify a different type.", "193409811"]
     ],
-    "public/app/features/search/service/sql.ts:1428696565": [
+    "public/app/features/search/service/sql.ts:4013142735": [
       [91, 36, 3, "Unexpected any. Specify a different type.", "193409811"]
     ],
     "public/app/features/search/types.ts:479421789": [

public/app/AppWrapper.tsx

@@ -105,6 +105,7 @@ export class AppWrapper extends React.Component<AppWrapperProps, AppWrapperState
     const commandPaletteActionSelected = (action: Action) => {
       reportInteraction('commandPalette_action_selected', {
         actionId: action.id,
+        actionName: action.name,
       });
     };
 

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);
+        setStaticActions(getGlobalActions(navBarTree));
-        const dashAct = await getDashboardNavActions('go/dashboard');
+        setActions(staticActions);
-        setActions([...staticActions, ...dashAct]);
       }
     })();
     // 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
+  const goToDashboardActions: Action[] = data.view.map((item) => {
-    .filter((item) => item.type === 'dash-db')
+    const { url, name } = item; // items are backed by DataFrameView, so must hold the url in a closure
-    .map((item) => ({
+    return {
       parent: parentId,
-      id: `go/dashboard/${item.url}`,
+      id: `go/dashboard/${url}`,
-      name: `Go to dashboard ${item.title}`,
+      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,
     };