PluginExtensions: Added onClick to link as a replacement for the command type (#65837)

* Added onClick to the link and made path optional.

* Added type to the import.

* revert(plugin-extensions): put back isPromise utility function

* Minor update to the isPromise function.

* added onClick in the panel menu item.

---------

Co-authored-by: Jack Westbrook <jack.westbrook@gmail.com>
Co-authored-by: Levente Balogh <balogh.levente.hu@gmail.com>

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

@@ -3,7 +3,7 @@ import { ComponentType } from 'react';
 import { KeyValue } from './data';
 import { NavModel } from './navModel';
 import { PluginMeta, GrafanaPlugin, PluginIncludeType } from './plugin';
-import type { PluginExtensionLinkConfig } from './pluginExtensions';
+import { type PluginExtensionLinkConfig, PluginExtensionTypes } from './pluginExtensions';
 
 /**
  * @public
@@ -97,8 +97,11 @@ export class AppPlugin<T extends KeyValue = KeyValue> extends GrafanaPlugin<AppP
     return this._extensionConfigs;
   }
 
-  configureExtensionLink<Context extends object>(extension: PluginExtensionLinkConfig<Context>) {
-    this._extensionConfigs.push(extension as PluginExtensionLinkConfig);
+  configureExtensionLink<Context extends object>(extension: Exclude<PluginExtensionLinkConfig<Context>, 'type'>) {
+    this._extensionConfigs.push({
+      ...extension,
+      type: PluginExtensionTypes.link,
+    } as PluginExtensionLinkConfig);
 
     return this;
   }

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

@@ -17,7 +17,8 @@ export type PluginExtension = {
 
 export type PluginExtensionLink = PluginExtension & {
   type: PluginExtensionTypes.link;
-  path: string;
+  path?: string;
+  onClick?: (event: React.MouseEvent) => void;
 };
 
 // Objects used for registering extensions (in app plugins)
@@ -40,10 +41,14 @@ export type PluginExtensionConfig<Context extends object = object, ExtraProps ex
 
 export type PluginExtensionLinkConfig<Context extends object = object> = PluginExtensionConfig<
   Context,
-  Pick<PluginExtensionLink, 'path'>
+  Pick<PluginExtensionLink, 'path'> & {
+    type: PluginExtensionTypes.link;
+    onClick?: (event: React.MouseEvent, helpers: PluginExtensionEventHelpers<Context>) => void;
+  }
 >;
 
-export type PluginExtensionEventHelpers = {
+export type PluginExtensionEventHelpers<Context extends object = object> = {
+  context?: Readonly<Context>;
   // Opens a modal dialog and renders the provided React component inside it
   openModal: (options: {
     // The title of the modal

packages/grafana-runtime/src/services/pluginExtensions/utils.test.ts

@@ -15,6 +15,17 @@ describe('Plugin Extensions / Utils', () => {
           path: '...',
         } as PluginExtension)
       ).toBe(true);
+
+      expect(
+        isPluginExtensionLink({
+          id: 'id',
+          pluginId: 'plugin-id',
+          type: PluginExtensionTypes.link,
+          title: 'Title',
+          description: 'Description',
+          onClick: () => {},
+        } as PluginExtension)
+      ).toBe(true);
     });
     test('should return FALSE if the object is NOT a link extension', () => {
       expect(

packages/grafana-runtime/src/services/pluginExtensions/utils.ts

@@ -4,6 +4,5 @@ export function isPluginExtensionLink(extension: PluginExtension | undefined): e
   if (!extension) {
     return false;
   }
-
-  return extension.type === PluginExtensionTypes.link && 'path' in extension;
+  return extension.type === PluginExtensionTypes.link && ('path' in extension || 'onClick' in extension);
 }