Plugins: Add Command Palette extension point (#78098)

Co-authored-by: Marcus Andersson <[email protected]>

Author: sd2k

packages/grafana-data/src/types/index.ts

@@ -63,5 +63,6 @@ export {
   type PluginExtensionEventHelpers,
   type PluginExtensionPanelContext,
   type PluginExtensionDataSourceConfigContext,
+  type PluginExtensionCommandPaletteContext,
   type PluginExtensionOpenModalOptions,
 } from './pluginExtensions';

packages/grafana-data/src/types/pluginExtensions.ts

@@ -118,6 +118,7 @@ export type PluginExtensionEventHelpers<Context extends object = object> = {
 // Extension Points available in core Grafana
 export enum PluginExtensionPoints {
   AlertInstanceAction = 'grafana/alerting/instance/action',
+  CommandPalette = 'grafana/commandpalette/action',
   DashboardPanelMenu = 'grafana/dashboard/panel/menu',
   DataSourceConfig = 'grafana/datasources/config',
   ExploreToolbarAction = 'grafana/explore/toolbar/action',
@@ -154,6 +155,8 @@ export type PluginExtensionDataSourceConfigContext<JsonData extends DataSourceJs
   setJsonData: (jsonData: JsonData) => void;
 };
 
+export type PluginExtensionCommandPaletteContext = {};
+
 type Dashboard = {
   uid: string;
   title: string;

public/app/core/components/AppChrome/AppChrome.test.tsx

@@ -14,6 +14,11 @@ import { Page } from '../Page/Page';
 
 import { AppChrome } from './AppChrome';
 
+jest.mock('@grafana/runtime', () => ({
+  ...jest.requireActual('@grafana/runtime'),
+  getPluginLinkExtensions: jest.fn().mockReturnValue({ extensions: [] }),
+}));
+
 const pageNav: NavModelItem = {
   text: 'pageNav title',
   children: [

public/app/features/commandPalette/actions/dashboardActions.test.ts

@@ -87,7 +87,7 @@ describe('dashboardActions', () => {
           {
             id: 'recent-dashboards/my-dashboard-1',
             name: 'My dashboard 1',
-            priority: 5,
+            priority: 6,
             section: 'Recent dashboards',
             url: '/my-dashboard-1',
           },

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

@@ -0,0 +1,22 @@
+import { PluginExtensionCommandPaletteContext, PluginExtensionPoints } from '@grafana/data';
+import { getPluginLinkExtensions } from '@grafana/runtime';
+
+import { CommandPaletteAction } from '../types';
+import { EXTENSIONS_PRIORITY } from '../values';
+
+export default function getExtensionActions(): CommandPaletteAction[] {
+  const context: PluginExtensionCommandPaletteContext = {};
+  const { extensions } = getPluginLinkExtensions({
+    extensionPointId: PluginExtensionPoints.CommandPalette,
+    context,
+    limitPerPlugin: 3,
+  });
+  return extensions.map((extension) => ({
+    section: extension.category ?? 'Extensions',
+    priority: EXTENSIONS_PRIORITY,
+    id: extension.id,
+    name: extension.title,
+    target: extension.path,
+    perform: () => extension.onClick && extension.onClick(),
+  }));
+}

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

@@ -6,6 +6,8 @@ import { changeTheme } from 'app/core/services/theme';
 import { CommandPaletteAction } from '../types';
 import { ACTIONS_PRIORITY, DEFAULT_PRIORITY, PREFERENCES_PRIORITY } from '../values';
 
+import getExtensionActions from './extensionActions';
+
 // TODO: Clean this once ID is mandatory on nav items
 function idForNavItem(navItem: NavModelItem) {
   return 'navModel.' + navItem.id ?? navItem.url ?? navItem.text ?? navItem.subTitle;
@@ -84,7 +86,8 @@ export default (navBarTree: NavModelItem[]): CommandPaletteAction[] => {
     },
   ];
 
+  const extensionActions = getExtensionActions();
   const navBarActions = navTreeToActions(navBarTree);
 
-  return [...globalActions, ...navBarActions];
+  return [...globalActions, ...extensionActions, ...navBarActions];
 };

public/app/features/commandPalette/values.ts

@@ -1,4 +1,5 @@
-export const RECENT_DASHBOARDS_PRORITY = 5;
+export const RECENT_DASHBOARDS_PRORITY = 6;
+export const EXTENSIONS_PRIORITY = 5;
 export const ACTIONS_PRIORITY = 4;
 export const DEFAULT_PRIORITY = 3;
 export const PREFERENCES_PRIORITY = 2;

public/app/features/dashboard/containers/DashboardPage.test.tsx

@@ -66,6 +66,11 @@ jest.mock('app/core/core', () => ({
   },
 }));
 
+jest.mock('@grafana/runtime', () => ({
+  ...jest.requireActual('@grafana/runtime'),
+  getPluginLinkExtensions: jest.fn().mockReturnValue({ extensions: [] }),
+}));
+
 jest.mock('react-virtualized-auto-sizer', () => {
   // The size of the children need to be small enough to be outside the view.
   // So it does not trigger the query to be run by the PanelQueryRunner.