CommandPalette: Pass matched tag as a search query to 'Add new connection' page (#80556)

* add some special logic to pass the matched tag to the add new connection page

* extend action type to accept callback for url

public/app/features/commandPalette/KBarResults.tsx

@@ -3,6 +3,8 @@ import { usePointerMovedSinceMount } from 'kbar/lib/utils';
 import * as React from 'react';
 import { useVirtual } from 'react-virtual';
 
+import { URLCallback } from './types';
+
 // From https://github.com/timc1/kbar/blob/main/src/KBarResults.tsx
 // TODO: Go back to KBarResults from kbar when https://github.com/timc1/kbar/issues/281 is fixed
 // Remember to remove dependency on react-virtual when removing this file
@@ -157,7 +159,7 @@ export const KBarResults = (props: KBarResultsProps) => {
         {rowVirtualizer.virtualItems.map((virtualRow) => {
           // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
           const item = itemsRef.current[virtualRow.index] as ActionImpl & {
-            url?: string;
+            url?: string | URLCallback;
             target?: React.HTMLAttributeAnchorTarget;
           };
 
@@ -202,7 +204,7 @@ export const KBarResults = (props: KBarResultsProps) => {
             return (
               <a
                 key={virtualRow.index}
-                href={url}
+                href={typeof url === 'function' ? url(search) : url}
                 target={target}
                 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
                 ref={active ? (activeRef as React.RefObject<HTMLAnchorElement>) : null}

public/app/features/commandPalette/actions/staticActions.ts

@@ -29,6 +29,14 @@ function navTreeToActions(navTree: NavModelItem[], parents: NavModelItem[] = [])
       continue;
     }
 
+    let urlOrCallback: CommandPaletteAction['url'] = url;
+    if (url && navItem.id === 'connections-add-new-connection') {
+      urlOrCallback = (searchQuery: string) => {
+        const matchingKeyword = keywords?.find((keyword) => keyword.toLowerCase().includes(searchQuery.toLowerCase()));
+        return matchingKeyword ? `${url}?search=${matchingKeyword}` : url;
+      };
+    }
+
     const section = isCreateAction
       ? t('command-palette.section.actions', 'Actions')
       : t('command-palette.section.pages', 'Pages');
@@ -39,13 +47,13 @@ function navTreeToActions(navTree: NavModelItem[], parents: NavModelItem[] = [])
     const action: CommandPaletteAction = {
       id: idForNavItem(navItem),
       name: text,
-      section: section,
+      section,
-      url,
+      url: urlOrCallback,
       target,
       parent: parents.length > 0 && !isCreateAction ? idForNavItem(parents[parents.length - 1]) : undefined,
       perform: onClick,
       keywords: keywords?.join(' '),
-      priority: priority,
+      priority,
       subtitle: isCreateAction ? undefined : subtitle,
     };
 

public/app/features/commandPalette/types.ts

@@ -6,16 +6,18 @@ type NotNullable<T> = Exclude<T, null | undefined>;
 // Parent actions require a section, but not child actions
 export type CommandPaletteAction = RootCommandPaletteAction | ChildCommandPaletteAction;
 
+export type URLCallback = (searchQuery: string) => string;
+
 type RootCommandPaletteAction = Omit<Action, 'parent'> & {
   section: NotNullable<Action['section']>;
   priority: NotNullable<Action['priority']>;
   target?: React.HTMLAttributeAnchorTarget;
-  url?: string;
+  url?: string | URLCallback;
 };
 
 type ChildCommandPaletteAction = Action & {
   parent: NotNullable<Action['parent']>;
   priority: NotNullable<Action['priority']>;
   target?: React.HTMLAttributeAnchorTarget;
-  url?: string;
+  url?: string | URLCallback;
 };