Compare commits

...

16 Commits

Author SHA1 Message Date
kozhuhds
d0042b990e feat: adding some comments 2025-12-05 16:06:50 +01:00
kozhuhds
4ac7e78030 fix: prettier 2025-11-26 16:26:47 +01:00
kozhuhds
104b26bcef refactor: addressing pr comments 2025-11-26 16:17:54 +01:00
kozhuhds
9c20cc2816 fix(dynamic command palette api): prettier 2025-11-21 16:29:43 +01:00
kozhuhds
b5a2dd5b23 feat(dynamic command palette api): cleanup 2025-11-21 16:23:57 +01:00
kozhuhds
0bc022f5ee Merge branch 'main' into kozhuhds/dynamic-command-palette-results 2025-11-21 16:20:56 +01:00
kozhuhds
1c4e0260b5 feat(dynamic command palette api): cleanup 2025-11-21 16:12:04 +01:00
kozhuhds
88d4aaba99 feat(dynamic command palette api): moving the code to command palette folder 2025-11-21 16:05:25 +01:00
kozhuhds
688c51a306 feat(dynamic command palette api): moving the code to command palette folder 2025-11-21 16:04:59 +01:00
kozhuhds
f987a33870 feat: fixing registry ts errors 2025-11-17 11:43:57 +01:00
kozhuhds
e89c83028f feat: fixing registry ts errors 2025-11-17 11:34:59 +01:00
kozhuhds
5d5bca4f31 chore: prettier 2025-11-17 11:08:27 +01:00
kozhuhds
7a8e4b89bf chore: tests 2025-11-17 10:59:59 +01:00
kozhuhds
7a1d7463c3 fix: prettier 2025-10-30 12:04:08 +01:00
kozhuhds
8ee1fb55e7 fix: helpers in dynamic command palette api 2025-10-30 11:51:45 +01:00
kozhuhds
71b0482b1f feat: dynamic command palette search results 2025-10-30 11:05:25 +01:00
8 changed files with 1370 additions and 25 deletions

View File

@@ -590,6 +590,7 @@ export {
type PluginExtensionDataSourceConfigActionsContext,
type PluginExtensionDataSourceConfigStatusContext,
type PluginExtensionCommandPaletteContext,
type DynamicPluginExtensionCommandPaletteContext,
type PluginExtensionOpenModalOptions,
type PluginExtensionExposedComponentConfig,
type PluginExtensionAddedComponentConfig,
@@ -597,6 +598,10 @@ export {
type PluginExtensionAddedFunctionConfig,
type PluginExtensionResourceAttributesContext,
type CentralAlertHistorySceneV1Props,
type PluginExtensionCommandPaletteDynamicConfig,
type CommandPaletteDynamicResult,
type CommandPaletteDynamicSearchProvider,
type CommandPaletteDynamicResultAction,
} from './types/pluginExtensions';
export {
type ScopeDashboardBindingSpec,

View File

@@ -10,6 +10,7 @@ import {
PluginExtensionAddedComponentConfig,
PluginExtensionAddedLinkConfig,
PluginExtensionAddedFunctionConfig,
PluginExtensionCommandPaletteDynamicConfig,
} from './pluginExtensions';
/**
@@ -62,6 +63,7 @@ export class AppPlugin<T extends KeyValue = KeyValue> extends GrafanaPlugin<AppP
private _addedComponentConfigs: PluginExtensionAddedComponentConfig[] = [];
private _addedLinkConfigs: PluginExtensionAddedLinkConfig[] = [];
private _addedFunctionConfigs: PluginExtensionAddedFunctionConfig[] = [];
private _commandPaletteDynamicConfigs: PluginExtensionCommandPaletteDynamicConfig[] = [];
// Content under: /a/${plugin-id}/*
root?: ComponentType<AppRootProps<T>>;
@@ -117,6 +119,10 @@ export class AppPlugin<T extends KeyValue = KeyValue> extends GrafanaPlugin<AppP
return this._addedFunctionConfigs;
}
get commandPaletteDynamicConfigs() {
return this._commandPaletteDynamicConfigs;
}
addLink<Context extends object>(linkConfig: PluginExtensionAddedLinkConfig<Context>) {
this._addedLinkConfigs.push(linkConfig as PluginExtensionAddedLinkConfig);
@@ -140,6 +146,40 @@ export class AppPlugin<T extends KeyValue = KeyValue> extends GrafanaPlugin<AppP
return this;
}
/**
* Register a dynamic command palette search provider
*
* Allows plugins to add dynamic, search-based results to the command palette.
* Results are fetched asynchronously based on user input.
*
* @example
* ```typescript
* plugin.addCommandPaletteDynamicProvider({
* category: 'My Plugin',
* searchProvider: async ({ searchQuery, signal }) => {
* const response = await fetch(`/api/issues?q=${searchQuery}`, { signal });
* const issues = await response.json();
* return issues.slice(0, 5).map(issue => ({
* id: issue.id,
* title: issue.title,
* description: `#${issue.number}`,
* // onSelect is per-result, allowing mixed navigation and custom actions
* onSelect: (result, helpers) => {
* helpers.openModal({
* title: result.title,
* body: IssueDetailsModal,
* });
* },
* }));
* },
* });
* ```
*/
addCommandPaletteDynamicProvider(config: PluginExtensionCommandPaletteDynamicConfig) {
this._commandPaletteDynamicConfigs.push(config);
return this;
}
}
/**

View File

@@ -285,7 +285,23 @@ export type PluginExtensionDataSourceConfigContext<
setSecureJsonData: (secureJsonData: SecureJsonData) => void;
};
export type PluginExtensionCommandPaletteContext = {};
export type PluginExtensionCommandPaletteContext = {
/** The current search query entered by the user */
searchQuery?: string;
/** Signal for request cancellation */
signal?: AbortSignal;
};
/**
* Context for dynamic command palette search providers.
* Unlike the base context, searchQuery and signal are always provided.
*/
export type DynamicPluginExtensionCommandPaletteContext = {
/** The current search query entered by the user */
searchQuery: string;
/** Signal for request cancellation */
signal: AbortSignal;
};
export type PluginExtensionResourceAttributesContext = {
// Key-value pairs of resource attributes, attribute name is the key
@@ -340,3 +356,69 @@ type Dashboard = {
title: string;
tags: string[];
};
// Dynamic Command Palette Types
// --------------------------------------------------------
/**
* A single dynamic result item returned by a command palette search provider
*/
export type CommandPaletteDynamicResult = {
/** Unique identifier for this result (scoped to plugin) */
id: string;
/** Display title */
title: string;
/** Optional subtitle or description */
description?: string;
/** Optional URL to navigate to (alternative to onSelect) */
path?: string;
/** Optional keywords for better search matching */
keywords?: string[];
/** Optional section/category override (defaults to plugin category) */
section?: string;
/** Optional custom data to pass through to the action handler */
data?: Record<string, unknown>;
/**
* Action handler when this result is selected.
* If not provided, will use `path` for navigation.
*/
onSelect?: CommandPaletteDynamicResultAction;
};
/**
* Action handler for when a dynamic result is selected
*/
export type CommandPaletteDynamicResultAction = (
result: Omit<CommandPaletteDynamicResult, 'onSelect'>,
helpers: PluginExtensionEventHelpers<DynamicPluginExtensionCommandPaletteContext>
) => void | Promise<void>;
/**
* Search provider function that fetches dynamic results
*/
export type CommandPaletteDynamicSearchProvider = (
context: DynamicPluginExtensionCommandPaletteContext
) => Promise<CommandPaletteDynamicResult[]>;
/**
* Configuration for registering a dynamic command palette provider
*/
export type PluginExtensionCommandPaletteDynamicConfig = {
/**
* Category/section name for grouping results.
* If not provided, results will be grouped under "Dynamic Results".
*/
category?: string;
/**
* Minimum query length before search is triggered
* @default 2
*/
minQueryLength?: number;
/**
* Search provider function that returns results.
* Return an empty array to skip results for the current search.
*/
searchProvider: CommandPaletteDynamicSearchProvider;
};

View File

@@ -18,6 +18,7 @@ import { ResultItem } from './ResultItem';
import { useSearchResults } from './actions/dashboardActions';
import { useRegisterRecentScopesActions, useRegisterScopesActions } from './actions/scopeActions';
import { useRegisterRecentDashboardsActions, useRegisterStaticActions } from './actions/useActions';
import { useDynamicExtensionResults } from './actions/useDynamicExtensionActions';
import { CommandPaletteAction } from './types';
import { useMatches } from './useMatches';
@@ -51,12 +52,25 @@ function CommandPaletteContents() {
const queryToggle = useCallback(() => query.toggle(), [query]);
const { scopesRow } = useRegisterScopesActions(searchQuery, queryToggle, currentRootActionId);
// Fetch dynamic results from plugins - these bypass kbar's fuzzy filtering
// since they're already filtered by the plugin's searchProvider
const { results: dynamicResults, isLoading: isDynamicLoading } = useDynamicExtensionResults(searchQuery);
// This searches dashboards and folders it shows only if we are not in some specific category (and there is no
// dashboards category right now, so if any category is selected, we don't show these).
// Normally we register actions with kbar, and it knows not to show actions which are under a different parent than is
// the currentRootActionId. Because these search results are manually added to the list later, they would show every
// time.
const { searchResults, isFetchingSearchResults } = useSearchResults({ searchQuery, show: !currentRootActionId });
const { searchResults: dashboardFolderResults, isFetchingSearchResults } = useSearchResults({
searchQuery,
show: !currentRootActionId,
});
// Combine all search results (dashboard/folder results + dynamic plugin results)
const searchResults = useMemo(
() => [...dashboardFolderResults, ...dynamicResults],
[dashboardFolderResults, dynamicResults]
);
const ref = useRef<HTMLDivElement>(null);
const { overlayProps } = useOverlay(
@@ -84,13 +98,13 @@ function CommandPaletteContents() {
className={styles.search}
/>
<div className={styles.loadingBarContainer}>
{isFetchingSearchResults && <LoadingBar width={500} delay={0} />}
{(isFetchingSearchResults || isDynamicLoading) && <LoadingBar width={500} delay={0} />}
</div>
</div>
{scopesRow ? <div className={styles.searchContainer}>{scopesRow}</div> : null}
<div className={styles.resultsContainer}>
<RenderResults
isFetchingSearchResults={isFetchingSearchResults}
isFetchingSearchResults={isFetchingSearchResults || isDynamicLoading}
searchResults={searchResults}
searchQuery={searchQuery}
/>
@@ -148,35 +162,65 @@ const RenderResults = ({ isFetchingSearchResults, searchResults, searchQuery }:
const dashboardsSectionTitle = t('command-palette.section.dashboard-search-results', 'Dashboards');
const foldersSectionTitle = t('command-palette.section.folder-search-results', 'Folders');
// because dashboard search results aren't registered as actions, we need to manually
// convert them to ActionImpls before passing them as items to KBarResults
const dashboardResultItems = useMemo(
() =>
searchResults
.filter((item) => item.id.startsWith('go/dashboard'))
.map((dashboard) => new ActionImpl(dashboard, { store: {} })),
[searchResults]
);
const folderResultItems = useMemo(
() =>
searchResults
.filter((item) => item.id.startsWith('go/folder'))
.map((folder) => new ActionImpl(folder, { store: {} })),
[searchResults]
);
// Group search results by section (dashboard, folder, or dynamic plugin sections)
const groupedSearchResults = useMemo(() => {
const groups = new Map<string, ActionImpl[]>();
searchResults.forEach((item) => {
let section: string;
if (item.id.startsWith('go/dashboard')) {
section = dashboardsSectionTitle;
} else if (item.id.startsWith('go/folder')) {
section = foldersSectionTitle;
} else {
// Dynamic results have their section set
// Section can be a string or { name: string; priority: number; }
const itemSection = item.section;
section =
typeof itemSection === 'string'
? itemSection
: typeof itemSection === 'object' && itemSection !== null
? itemSection.name
: 'Dynamic Results';
}
if (!groups.has(section)) {
groups.set(section, []);
}
groups.get(section)!.push(new ActionImpl(item, { store: {} }));
});
return groups;
}, [searchResults, dashboardsSectionTitle, foldersSectionTitle]);
const items = useMemo(() => {
const results = [...kbarResults];
if (folderResultItems.length > 0) {
// Add all grouped search results (folders, dashboards, and dynamic results)
// Folders first, then dynamic results, then dashboards
const folderResults = groupedSearchResults.get(foldersSectionTitle) ?? [];
if (folderResults.length > 0) {
results.push(foldersSectionTitle);
results.push(...folderResultItems);
results.push(...folderResults);
}
if (dashboardResultItems.length > 0) {
// Add dynamic plugin results (any section that's not dashboard/folder)
groupedSearchResults.forEach((items, section) => {
if (section !== dashboardsSectionTitle && section !== foldersSectionTitle && items.length > 0) {
results.push(section);
results.push(...items);
}
});
const dashboardResults = groupedSearchResults.get(dashboardsSectionTitle) ?? [];
if (dashboardResults.length > 0) {
results.push(dashboardsSectionTitle);
results.push(...dashboardResultItems);
results.push(...dashboardResults);
}
return results;
}, [kbarResults, dashboardsSectionTitle, dashboardResultItems, foldersSectionTitle, folderResultItems]);
}, [kbarResults, groupedSearchResults, dashboardsSectionTitle, foldersSectionTitle]);
const showEmptyState = !isFetchingSearchResults && items.length === 0;
useEffect(() => {

View File

@@ -0,0 +1,810 @@
import { firstValueFrom } from 'rxjs';
import { PluginExtensionCommandPaletteContext } from '@grafana/data';
import { CommandPaletteDynamicRegistry } from './CommandPaletteDynamicRegistry';
describe('CommandPaletteDynamicRegistry', () => {
const pluginId = 'test-plugin';
describe('Registry Management', () => {
it('should return empty registry when no extensions registered', async () => {
const registry = new CommandPaletteDynamicRegistry();
const observable = registry.asObservable();
const state = await firstValueFrom(observable);
expect(state).toEqual({});
});
it('should be possible to register command palette dynamic providers', async () => {
const registry = new CommandPaletteDynamicRegistry();
const mockSearchProvider = jest.fn().mockResolvedValue([]);
registry.register({
pluginId,
configs: [
{
searchProvider: mockSearchProvider,
},
],
});
const state = await registry.getState();
expect(state).toEqual({
[`${pluginId}/0`]: [
{
pluginId,
config: {
searchProvider: mockSearchProvider,
category: undefined,
minQueryLength: 2,
},
},
],
});
});
it('should apply default values for optional config properties', async () => {
const registry = new CommandPaletteDynamicRegistry();
const mockSearchProvider = jest.fn().mockResolvedValue([]);
registry.register({
pluginId,
configs: [
{
searchProvider: mockSearchProvider,
},
],
});
const state = await registry.getState();
const item = state[`${pluginId}/0`][0];
expect(item.config.category).toBeUndefined();
expect(item.config.minQueryLength).toBe(2);
});
it('should preserve custom config values when provided', async () => {
const registry = new CommandPaletteDynamicRegistry();
const mockSearchProvider = jest.fn().mockResolvedValue([]);
registry.register({
pluginId,
configs: [
{
searchProvider: mockSearchProvider,
category: 'Custom Category',
minQueryLength: 5,
},
],
});
const state = await registry.getState();
const item = state[`${pluginId}/0`][0];
expect(item.config.category).toBe('Custom Category');
expect(item.config.minQueryLength).toBe(5);
});
it('should register multiple providers from the same plugin', async () => {
const registry = new CommandPaletteDynamicRegistry();
const mockSearchProvider1 = jest.fn().mockResolvedValue([]);
const mockSearchProvider2 = jest.fn().mockResolvedValue([]);
registry.register({
pluginId,
configs: [
{
searchProvider: mockSearchProvider1,
},
{
searchProvider: mockSearchProvider2,
},
],
});
const state = await registry.getState();
expect(Object.keys(state)).toHaveLength(2);
expect(state[`${pluginId}/0`]).toBeDefined();
expect(state[`${pluginId}/1`]).toBeDefined();
});
it('should notify subscribers when the registry changes', async () => {
const registry = new CommandPaletteDynamicRegistry();
const observable = registry.asObservable();
const subscribeCallback = jest.fn();
observable.subscribe(subscribeCallback);
registry.register({
pluginId,
configs: [
{
searchProvider: jest.fn().mockResolvedValue([]),
},
],
});
expect(subscribeCallback).toHaveBeenCalledTimes(2); // initial empty state + registration
});
it('should not be possible to register on a read-only registry', async () => {
const registry = new CommandPaletteDynamicRegistry();
const readOnlyRegistry = new CommandPaletteDynamicRegistry({
registrySubject: registry['registrySubject'],
});
expect(() => {
readOnlyRegistry.register({
pluginId,
configs: [
{
searchProvider: jest.fn(),
},
],
});
}).toThrow('Cannot register to a read-only registry');
});
it('should create a read-only version of the registry', async () => {
const registry = new CommandPaletteDynamicRegistry();
const readOnlyRegistry = registry.readOnly();
expect(() => {
readOnlyRegistry.register({
pluginId,
configs: [
{
searchProvider: jest.fn(),
},
],
});
}).toThrow('Cannot register to a read-only registry');
const currentState = await readOnlyRegistry.getState();
expect(Object.keys(currentState)).toHaveLength(0);
});
it('should pass down fresh registrations to the read-only version of the registry', async () => {
const registry = new CommandPaletteDynamicRegistry();
const readOnlyRegistry = registry.readOnly();
const subscribeCallback = jest.fn();
let readOnlyState;
// Should have no providers registered in the beginning
readOnlyState = await readOnlyRegistry.getState();
expect(Object.keys(readOnlyState)).toHaveLength(0);
readOnlyRegistry.asObservable().subscribe(subscribeCallback);
// Register a provider to the original (writable) registry
registry.register({
pluginId,
configs: [
{
searchProvider: jest.fn().mockResolvedValue([]),
},
],
});
// The read-only registry should have received the new provider
readOnlyState = await readOnlyRegistry.getState();
expect(Object.keys(readOnlyState)).toHaveLength(1);
expect(subscribeCallback).toHaveBeenCalledTimes(2); // initial empty + registration
expect(Object.keys(subscribeCallback.mock.calls[1][0])).toEqual([`${pluginId}/0`]);
});
});
describe('Config Validation', () => {
let consoleErrorSpy: jest.SpyInstance;
beforeEach(() => {
consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation();
});
afterEach(() => {
consoleErrorSpy.mockRestore();
});
it('should not register provider without searchProvider', async () => {
const registry = new CommandPaletteDynamicRegistry();
registry.register({
pluginId,
configs: [
{
// @ts-ignore - testing invalid config
searchProvider: undefined,
},
],
});
const state = await registry.getState();
expect(Object.keys(state)).toHaveLength(0);
expect(consoleErrorSpy).toHaveBeenCalled();
});
it('should not register provider with non-function searchProvider', async () => {
const registry = new CommandPaletteDynamicRegistry();
registry.register({
pluginId,
configs: [
{
// @ts-ignore - testing invalid config
searchProvider: 'not-a-function',
},
],
});
const state = await registry.getState();
expect(Object.keys(state)).toHaveLength(0);
expect(consoleErrorSpy).toHaveBeenCalled();
});
it('should log provider registration in dev mode', async () => {
const originalNodeEnv = process.env.NODE_ENV;
process.env.NODE_ENV = 'development';
const consoleLogSpy = jest.spyOn(console, 'log').mockImplementation();
const registry = new CommandPaletteDynamicRegistry();
registry.register({
pluginId,
configs: [
{
searchProvider: jest.fn().mockResolvedValue([]),
},
],
});
await registry.getState();
expect(consoleLogSpy).toHaveBeenCalledWith(expect.stringContaining('Registered provider: test-plugin/0'));
consoleLogSpy.mockRestore();
process.env.NODE_ENV = originalNodeEnv;
});
});
describe('Search Functionality', () => {
it('should execute search across all registered providers', async () => {
const registry = new CommandPaletteDynamicRegistry();
const mockSearchProvider1 = jest.fn().mockResolvedValue([{ id: 'result1', title: 'Result 1' }]);
const mockSearchProvider2 = jest.fn().mockResolvedValue([{ id: 'result2', title: 'Result 2' }]);
registry.register({
pluginId: 'plugin1',
configs: [
{
searchProvider: mockSearchProvider1,
},
],
});
registry.register({
pluginId: 'plugin2',
configs: [
{
searchProvider: mockSearchProvider2,
},
],
});
const context: PluginExtensionCommandPaletteContext = {
searchQuery: 'test query',
};
const results = await registry.search(context);
// Search providers receive DynamicPluginExtensionCommandPaletteContext with required fields
expect(mockSearchProvider1).toHaveBeenCalledWith(
expect.objectContaining({
searchQuery: 'test query',
signal: expect.any(Object),
})
);
expect(mockSearchProvider2).toHaveBeenCalledWith(
expect.objectContaining({
searchQuery: 'test query',
signal: expect.any(Object),
})
);
expect(results.size).toBe(2);
});
it('should pass context with AbortSignal to search providers', async () => {
const registry = new CommandPaletteDynamicRegistry();
const mockSearchProvider = jest.fn().mockResolvedValue([]);
registry.register({
pluginId,
configs: [
{
searchProvider: mockSearchProvider,
},
],
});
const abortController = new AbortController();
const context: PluginExtensionCommandPaletteContext = {
searchQuery: 'test',
signal: abortController.signal,
};
await registry.search(context);
expect(mockSearchProvider).toHaveBeenCalledWith(
expect.objectContaining({
searchQuery: 'test',
signal: expect.any(Object),
})
);
});
it('should not search when query is below minimum length', async () => {
const registry = new CommandPaletteDynamicRegistry();
const mockSearchProvider = jest.fn().mockResolvedValue([]);
registry.register({
pluginId,
configs: [
{
searchProvider: mockSearchProvider,
minQueryLength: 3,
},
],
});
const context: PluginExtensionCommandPaletteContext = {
searchQuery: 'ab', // Only 2 characters
};
await registry.search(context);
expect(mockSearchProvider).not.toHaveBeenCalled();
});
it('should search when query meets minimum length', async () => {
const registry = new CommandPaletteDynamicRegistry();
const mockSearchProvider = jest.fn().mockResolvedValue([]);
registry.register({
pluginId,
configs: [
{
searchProvider: mockSearchProvider,
minQueryLength: 2,
},
],
});
const context: PluginExtensionCommandPaletteContext = {
searchQuery: 'ab', // Exactly 2 characters
};
await registry.search(context);
expect(mockSearchProvider).toHaveBeenCalled();
});
it('should limit results to 5 items per provider', async () => {
const registry = new CommandPaletteDynamicRegistry();
const mockSearchProvider = jest.fn().mockResolvedValue([
{ id: '1', title: 'Result 1' },
{ id: '2', title: 'Result 2' },
{ id: '3', title: 'Result 3' },
{ id: '4', title: 'Result 4' },
{ id: '5', title: 'Result 5' },
{ id: '6', title: 'Result 6' },
{ id: '7', title: 'Result 7' },
]);
registry.register({
pluginId,
configs: [
{
searchProvider: mockSearchProvider,
},
],
});
const context: PluginExtensionCommandPaletteContext = {
searchQuery: 'test',
};
const results = await registry.search(context);
const searchResult = results.get(`${pluginId}/0`);
expect(searchResult?.items).toHaveLength(5);
expect(searchResult?.items[4].id).toBe('5');
});
});
describe('Result Validation', () => {
let consoleWarnSpy: jest.SpyInstance;
beforeEach(() => {
consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation();
});
afterEach(() => {
consoleWarnSpy.mockRestore();
});
it('should filter out results without id', async () => {
const registry = new CommandPaletteDynamicRegistry();
const mockSearchProvider = jest.fn().mockResolvedValue([
{ id: 'valid', title: 'Valid Result' },
// @ts-ignore - testing invalid result
{ title: 'Invalid Result' },
]);
registry.register({
pluginId,
configs: [
{
searchProvider: mockSearchProvider,
},
],
});
const context: PluginExtensionCommandPaletteContext = {
searchQuery: 'test',
};
const results = await registry.search(context);
const searchResult = results.get(`${pluginId}/0`);
expect(searchResult?.items).toHaveLength(1);
expect(searchResult?.items[0].id).toBe('valid');
expect(consoleWarnSpy).toHaveBeenCalled();
});
it('should filter out results with non-string id', async () => {
const registry = new CommandPaletteDynamicRegistry();
const mockSearchProvider = jest.fn().mockResolvedValue([
{ id: 'valid', title: 'Valid Result' },
// @ts-ignore - testing invalid result
{ id: 123, title: 'Invalid Result' },
]);
registry.register({
pluginId,
configs: [
{
searchProvider: mockSearchProvider,
},
],
});
const context: PluginExtensionCommandPaletteContext = {
searchQuery: 'test',
};
const results = await registry.search(context);
const searchResult = results.get(`${pluginId}/0`);
expect(searchResult?.items).toHaveLength(1);
expect(searchResult?.items[0].id).toBe('valid');
expect(consoleWarnSpy).toHaveBeenCalled();
});
it('should filter out results without title', async () => {
const registry = new CommandPaletteDynamicRegistry();
const mockSearchProvider = jest.fn().mockResolvedValue([
{ id: 'valid', title: 'Valid Result' },
// @ts-ignore - testing invalid result
{ id: 'invalid' },
]);
registry.register({
pluginId,
configs: [
{
searchProvider: mockSearchProvider,
},
],
});
const context: PluginExtensionCommandPaletteContext = {
searchQuery: 'test',
};
const results = await registry.search(context);
const searchResult = results.get(`${pluginId}/0`);
expect(searchResult?.items).toHaveLength(1);
expect(searchResult?.items[0].id).toBe('valid');
expect(consoleWarnSpy).toHaveBeenCalled();
});
it('should filter out results with non-string title', async () => {
const registry = new CommandPaletteDynamicRegistry();
const mockSearchProvider = jest.fn().mockResolvedValue([
{ id: 'valid', title: 'Valid Result' },
// @ts-ignore - testing invalid result
{ id: 'invalid', title: 123 },
]);
registry.register({
pluginId,
configs: [
{
searchProvider: mockSearchProvider,
},
],
});
const context: PluginExtensionCommandPaletteContext = {
searchQuery: 'test',
};
const results = await registry.search(context);
const searchResult = results.get(`${pluginId}/0`);
expect(searchResult?.items).toHaveLength(1);
expect(searchResult?.items[0].id).toBe('valid');
expect(consoleWarnSpy).toHaveBeenCalled();
});
it('should not include provider in results if no valid items', async () => {
const registry = new CommandPaletteDynamicRegistry();
const mockSearchProvider = jest.fn().mockResolvedValue([
// @ts-ignore - testing invalid results
{ id: 'invalid' }, // missing title
]);
registry.register({
pluginId,
configs: [
{
searchProvider: mockSearchProvider,
},
],
});
const context: PluginExtensionCommandPaletteContext = {
searchQuery: 'test',
};
const results = await registry.search(context);
expect(results.size).toBe(0);
});
it('should warn if provider returns non-array', async () => {
const registry = new CommandPaletteDynamicRegistry();
// @ts-ignore - testing invalid return value
const mockSearchProvider = jest.fn().mockResolvedValue('not-an-array');
registry.register({
pluginId,
configs: [
{
searchProvider: mockSearchProvider,
},
],
});
const context: PluginExtensionCommandPaletteContext = {
searchQuery: 'test',
};
const results = await registry.search(context);
expect(results.size).toBe(0);
expect(consoleWarnSpy).toHaveBeenCalled();
});
});
describe('Error Handling', () => {
let consoleErrorSpy: jest.SpyInstance;
beforeEach(() => {
consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation();
});
afterEach(() => {
consoleErrorSpy.mockRestore();
});
it('should handle search provider errors gracefully', async () => {
const registry = new CommandPaletteDynamicRegistry();
const mockSearchProvider = jest.fn().mockRejectedValue(new Error('Search failed'));
registry.register({
pluginId,
configs: [
{
searchProvider: mockSearchProvider,
},
],
});
const context: PluginExtensionCommandPaletteContext = {
searchQuery: 'test',
};
const results = await registry.search(context);
expect(results.size).toBe(0);
expect(consoleErrorSpy).toHaveBeenCalledWith(
expect.stringContaining('Search failed'),
expect.objectContaining({
error: 'Error: Search failed',
})
);
});
it('should not log AbortErrors', async () => {
const registry = new CommandPaletteDynamicRegistry();
const abortError = new Error('Aborted');
abortError.name = 'AbortError';
const mockSearchProvider = jest.fn().mockRejectedValue(abortError);
registry.register({
pluginId,
configs: [
{
searchProvider: mockSearchProvider,
},
],
});
const context: PluginExtensionCommandPaletteContext = {
searchQuery: 'test',
};
await registry.search(context);
expect(consoleErrorSpy).not.toHaveBeenCalled();
});
it('should continue searching other providers if one fails', async () => {
const registry = new CommandPaletteDynamicRegistry();
const failingProvider = jest.fn().mockRejectedValue(new Error('Failed'));
const successProvider = jest.fn().mockResolvedValue([{ id: 'success', title: 'Success Result' }]);
registry.register({
pluginId: 'failing-plugin',
configs: [
{
searchProvider: failingProvider,
},
],
});
registry.register({
pluginId: 'success-plugin',
configs: [
{
searchProvider: successProvider,
},
],
});
const context: PluginExtensionCommandPaletteContext = {
searchQuery: 'test',
};
const results = await registry.search(context);
expect(results.size).toBe(1);
expect(results.get('success-plugin/0')).toBeDefined();
});
});
describe('Search Context', () => {
it('should handle empty search query', async () => {
const registry = new CommandPaletteDynamicRegistry();
const mockSearchProvider = jest.fn().mockResolvedValue([]);
registry.register({
pluginId,
configs: [
{
searchProvider: mockSearchProvider,
minQueryLength: 0,
},
],
});
const context: PluginExtensionCommandPaletteContext = {
searchQuery: '',
};
await registry.search(context);
expect(mockSearchProvider).toHaveBeenCalled();
});
it('should handle undefined search query', async () => {
const registry = new CommandPaletteDynamicRegistry();
const mockSearchProvider = jest.fn().mockResolvedValue([]);
registry.register({
pluginId,
configs: [
{
searchProvider: mockSearchProvider,
minQueryLength: 0,
},
],
});
const context: PluginExtensionCommandPaletteContext = {};
await registry.search(context);
expect(mockSearchProvider).toHaveBeenCalled();
});
});
describe('Result Structure', () => {
it('should return results with correct structure', async () => {
const registry = new CommandPaletteDynamicRegistry();
const mockSearchProvider = jest.fn().mockResolvedValue([
{
id: 'test-id',
title: 'Test Title',
description: 'Test Description',
path: '/test/path',
keywords: ['test', 'keyword'],
section: 'Test Section',
data: { custom: 'data' },
},
]);
registry.register({
pluginId,
configs: [
{
searchProvider: mockSearchProvider,
},
],
});
const context: PluginExtensionCommandPaletteContext = {
searchQuery: 'test',
};
const results = await registry.search(context);
const searchResult = results.get(`${pluginId}/0`);
expect(searchResult?.items[0]).toEqual({
id: 'test-id',
title: 'Test Title',
description: 'Test Description',
path: '/test/path',
keywords: ['test', 'keyword'],
section: 'Test Section',
data: { custom: 'data' },
});
});
it('should include config information in search result', async () => {
const registry = new CommandPaletteDynamicRegistry();
const mockSearchProvider = jest.fn().mockResolvedValue([{ id: 'test', title: 'Test' }]);
registry.register({
pluginId,
configs: [
{
searchProvider: mockSearchProvider,
category: 'Test Category',
},
],
});
const context: PluginExtensionCommandPaletteContext = {
searchQuery: 'test',
};
const results = await registry.search(context);
const searchResult = results.get(`${pluginId}/0`);
expect(searchResult?.config.pluginId).toBe(pluginId);
expect(searchResult?.config.config.category).toBe('Test Category');
});
});
});

View File

@@ -0,0 +1,201 @@
import { ReplaySubject, Subject, firstValueFrom, map, scan, startWith } from 'rxjs';
import {
PluginExtensionCommandPaletteDynamicConfig,
CommandPaletteDynamicResult,
DynamicPluginExtensionCommandPaletteContext,
PluginExtensionCommandPaletteContext,
} from '@grafana/data';
import { deepFreeze } from '../plugins/extensions/utils';
const logPrefix = '[CommandPaletteDynamic]';
export interface CommandPaletteDynamicRegistryItem {
pluginId: string;
config: PluginExtensionCommandPaletteDynamicConfig;
}
export interface CommandPaletteDynamicSearchResult {
items: CommandPaletteDynamicResult[];
config: CommandPaletteDynamicRegistryItem;
}
type PluginExtensionConfigs = {
pluginId: string;
configs: PluginExtensionCommandPaletteDynamicConfig[];
};
type RegistryType = Record<string, CommandPaletteDynamicRegistryItem[]>;
const MSG_CANNOT_REGISTER_READ_ONLY = 'Cannot register to a read-only registry';
export class CommandPaletteDynamicRegistry {
private isReadOnly: boolean;
private resultSubject: Subject<PluginExtensionConfigs>;
private registrySubject: ReplaySubject<RegistryType>;
constructor(
options: {
registrySubject?: ReplaySubject<RegistryType>;
initialState?: RegistryType;
} = {}
) {
this.resultSubject = new Subject<PluginExtensionConfigs>();
this.isReadOnly = false;
// If the registry subject is provided, it's a read-only instance
if (options.registrySubject) {
this.registrySubject = options.registrySubject;
this.isReadOnly = true;
return;
}
this.registrySubject = new ReplaySubject<RegistryType>(1);
this.resultSubject
.pipe(
scan(this.mapToRegistry.bind(this), options.initialState ?? {}),
startWith(options.initialState ?? {}),
map((registry) => deepFreeze(registry))
)
.subscribe(this.registrySubject);
}
private mapToRegistry(registry: RegistryType, item: PluginExtensionConfigs): RegistryType {
const { pluginId, configs } = item;
for (let index = 0; index < configs.length; index++) {
const config = configs[index];
const { searchProvider, category } = config;
if (!searchProvider || typeof searchProvider !== 'function') {
console.error(`${logPrefix} Plugin ${pluginId}: searchProvider must be a function`);
continue;
}
// Use index to differentiate multiple providers from same plugin.
// Note: Provider IDs are index-based, so changing the order of configs
// in addCommandPaletteDynamicProvider calls could affect result tracking.
// Plugins should maintain consistent ordering of their providers.
const providerId = `${pluginId}/${index}`;
if (!(providerId in registry)) {
registry[providerId] = [];
}
registry[providerId].push({
pluginId,
config: {
...config,
category: category,
minQueryLength: config.minQueryLength ?? 2,
},
});
if (process.env.NODE_ENV === 'development') {
console.log(`${logPrefix} Registered provider: ${providerId}`);
}
}
return registry;
}
register(result: PluginExtensionConfigs): void {
if (this.isReadOnly) {
throw new Error(MSG_CANNOT_REGISTER_READ_ONLY);
}
this.resultSubject.next(result);
}
asObservable() {
return this.registrySubject.asObservable();
}
getState(): Promise<RegistryType> {
return firstValueFrom(this.asObservable());
}
/**
* Execute a search across all registered providers
*/
async search(context: PluginExtensionCommandPaletteContext): Promise<Map<string, CommandPaletteDynamicSearchResult>> {
const registry = await this.getState();
const results = new Map<string, CommandPaletteDynamicSearchResult>();
const searchQuery = context.searchQuery ?? '';
const signal = context.signal ?? new AbortController().signal;
// Create the dynamic context with required fields for searchProvider
const dynamicContext: DynamicPluginExtensionCommandPaletteContext = {
searchQuery,
signal,
};
const searchPromises = Object.entries(registry).map(async ([providerId, registryItems]) => {
if (!Array.isArray(registryItems) || registryItems.length === 0) {
return;
}
const item = registryItems[0]; // Take first config per provider
const { config } = item;
// Check minimum query length
if (searchQuery.length < (config.minQueryLength ?? 2)) {
return;
}
try {
const items = await config.searchProvider(dynamicContext);
// Validate results
if (!Array.isArray(items)) {
console.warn(`${logPrefix} Provider ${providerId} did not return an array`);
return;
}
// Validate and filter items
const validItems = items
.filter((item) => {
if (!item.id || typeof item.id !== 'string') {
console.warn(`${logPrefix} Provider ${providerId}: result missing id`);
return false;
}
if (!item.title || typeof item.title !== 'string') {
console.warn(`${logPrefix} Provider ${providerId}: result missing title`);
return false;
}
return true;
})
.slice(0, 5); // Limit to 5 items maximum
if (validItems.length > 0) {
results.set(providerId, { items: validItems, config: item });
}
} catch (error) {
// Don't log AbortErrors as they are expected
if (error instanceof Error && error.name === 'AbortError') {
return;
}
console.error(`${logPrefix} Search failed for ${providerId}`, { error: String(error) });
}
});
await Promise.all(searchPromises);
return results;
}
/**
* Returns a read-only version of the registry.
*/
readOnly() {
return new CommandPaletteDynamicRegistry({
registrySubject: this.registrySubject,
});
}
}
/**
* Global instance of the Command Palette Dynamic Registry
* This registry is used to manage dynamic command palette providers from plugins
*/
export const commandPaletteDynamicRegistry = new CommandPaletteDynamicRegistry();

View File

@@ -0,0 +1,161 @@
import { useEffect, useMemo, useRef, useState } from 'react';
import { useDebounce } from 'react-use';
import { CommandPaletteDynamicResult, PluginExtensionCommandPaletteContext } from '@grafana/data';
import { appEvents } from 'app/core/app_events';
import { CloseExtensionSidebarEvent, OpenExtensionSidebarEvent, ToggleExtensionSidebarEvent } from 'app/types/events';
import { createOpenModalFunction } from '../../plugins/extensions/utils';
import { commandPaletteDynamicRegistry, CommandPaletteDynamicSearchResult } from '../CommandPaletteDynamicRegistry';
import { CommandPaletteAction } from '../types';
import { EXTENSIONS_PRIORITY } from '../values';
interface DynamicResultWithPluginId extends CommandPaletteDynamicResult {
pluginId: string;
}
/**
* Fetches dynamic results from plugin extensions without registering them with kbar.
* This allows the results to bypass kbar's fuzzy filtering since they're already
* filtered by the plugin's searchProvider function.
*
* Returns flat CommandPaletteAction[] that can be concatenated with other search results.
*/
export function useDynamicExtensionResults(searchQuery: string): {
results: CommandPaletteAction[];
isLoading: boolean;
} {
const [dynamicResults, setDynamicResults] = useState<DynamicResultWithPluginId[]>([]);
const [isLoading, setIsLoading] = useState(false);
const abortControllerRef = useRef<AbortController | null>(null);
// Debounce the search query
const [debouncedSearchQuery, setDebouncedSearchQuery] = useState(searchQuery);
useDebounce(
() => {
setDebouncedSearchQuery(searchQuery);
},
300,
[searchQuery]
);
useEffect(() => {
// Cancel previous request
if (abortControllerRef.current) {
abortControllerRef.current.abort();
}
// Clear results if query is too short
if (debouncedSearchQuery.length < 2) {
setDynamicResults([]);
setIsLoading(false);
return;
}
// Create new abort controller
const abortController = new AbortController();
abortControllerRef.current = abortController;
setIsLoading(true);
const context: PluginExtensionCommandPaletteContext = {
searchQuery: debouncedSearchQuery,
signal: abortController.signal,
};
// Execute search across all registered providers
commandPaletteDynamicRegistry
.search(context)
.then((resultsMap: Map<string, CommandPaletteDynamicSearchResult>) => {
if (abortController.signal.aborted) {
return;
}
const allResults: DynamicResultWithPluginId[] = [];
resultsMap.forEach(({ items, config }: CommandPaletteDynamicSearchResult) => {
items.forEach((item: CommandPaletteDynamicResult) => {
allResults.push({
...item,
pluginId: config.pluginId,
// Use item's section or fall back to config's category
section: item.section ?? config.config.category,
});
});
});
setDynamicResults(allResults);
setIsLoading(false);
})
.catch((error: unknown) => {
if (!abortController.signal.aborted) {
console.error('[CommandPalette] Dynamic search failed:', error);
setDynamicResults([]);
setIsLoading(false);
}
});
// Cleanup
return () => {
abortController.abort();
};
}, [debouncedSearchQuery]);
// Convert dynamic results to CommandPaletteAction[]
const results: CommandPaletteAction[] = useMemo(() => {
return dynamicResults.map((result) => {
const section = result.section ?? 'Dynamic Results';
return {
id: `dynamic-${result.pluginId}-${result.id}`,
name: result.title,
section,
subtitle: result.description,
priority: EXTENSIONS_PRIORITY - 0.5,
keywords: result.keywords?.join(' '),
perform: () => {
if (result.onSelect) {
const extensionPointId = 'grafana/commandpalette/action';
result.onSelect(result, {
context: { searchQuery: debouncedSearchQuery, signal: new AbortController().signal },
extensionPointId,
openModal: createOpenModalFunction({
pluginId: result.pluginId,
title: result.title,
description: result.description,
extensionPointId,
path: result.path,
category: result.section,
}),
openSidebar: (componentTitle, context) => {
appEvents.publish(
new OpenExtensionSidebarEvent({
props: context,
pluginId: result.pluginId,
componentTitle,
})
);
},
closeSidebar: () => {
appEvents.publish(new CloseExtensionSidebarEvent());
},
toggleSidebar: (componentTitle, context) => {
appEvents.publish(
new ToggleExtensionSidebarEvent({
props: context,
pluginId: result.pluginId,
componentTitle,
})
);
},
});
}
},
url: result.path,
};
});
}, [dynamicResults, debouncedSearchQuery]);
return { results, isLoading };
}

View File

@@ -13,6 +13,7 @@ import {
throwIfAngular,
} from '@grafana/data';
import { config } from '@grafana/runtime';
import { commandPaletteDynamicRegistry } from 'app/features/commandPalette/CommandPaletteDynamicRegistry';
import { GenericDataSourcePlugin } from 'app/features/datasources/types';
import { getPanelPluginLoadError } from 'app/features/panel/components/PanelPluginError';
@@ -102,6 +103,7 @@ const appPluginPostImport: PostImportStrategy<AppPlugin, AppPluginMeta> = async
addedComponentsRegistry.register({ pluginId: meta.id, configs: plugin.addedComponentConfigs || [] });
addedLinksRegistry.register({ pluginId: meta.id, configs: plugin.addedLinkConfigs || [] });
addedFunctionsRegistry.register({ pluginId: meta.id, configs: plugin.addedFunctionConfigs || [] });
commandPaletteDynamicRegistry.register({ pluginId: meta.id, configs: plugin.commandPaletteDynamicConfigs || [] });
pluginsCache.set(meta.id, plugin);
return plugin;