Plugins: Extend panel menu with commands from plugins (#63802)

* feat(plugins): introduce dashboard panel menu placement for adding menu items

* test: add test for getPanelMenu()

* added an unique identifier for each extension.

* added context to getPluginExtensions.

* wip

* Wip

* wiwip

* Wip

* feat: WWWIIIIPPPP 🧨

* Wip

* Renamed some of the types to align a bit better.

* added limit to how many extensions a plugin can register per placement.

* decreased number of items to 2

* will trim the lenght of titles to max 25 chars.

* wrapping configure function with error handling.

* added error handling for all scenarios.

* moved extension menu items to the bottom of the more sub menu.

* added tests for configuring the title.

* minor refactorings.

* changed so you need to specify the full path in package.json.

* wip

* removed unused type.

* big refactor to make things simpler and to centralize all configure error/validation handling.

* added missing import.

* fixed failing tests.

* fixed tests.

* revert(extensions): remove static extensions config in favour of registering via AppPlugin APIs

* removed the compose that didn't work for some reason.

* added tests just to verify that validation and error handling is tied together in configuration function.

* adding some more values to the context.

* draft validation.

* added missing tests for getPanelMenu.

* added more tests.

* refactor(extensions): move logic for validating extension link config to function

* Fixed ts errors.

* Started to add structure for supporting commands.

* fixed tests.

* adding commands to the registry

* tests: group test cases in describe blocks

* tests: add a little bit more refactoring to the tests

* tests: add a test case for checking correct placements

* feat: first version of the command handler

* feat: register panel menu items with commands

* refactor: make the 'configure' function not optional on `PluginExtensionRegistryItem`

* Wip

* Wip

* Wip

* added test to verify the default configure function.

* added some more tests to verify that commands have the proper error handling for its configure function.

* tests: fix TS errors in tests

* tests: add auxiliary functions

* refactor: small refactoring in tests

* refactor: refactoring tests for registryFactory

* refactor: refactoring tests for registryFactory

* refactor: refactoring tests for registryFactory

* refactor: refactoring tests for registryFactory

* refactor: refactoring tests for registryFactory

* refactor: refactoring tests for registryFactory

* refactor: refactoring tests for registryFactory

* refactor: refactoring tests for registryFactory

* draft of wrapping command handler with error handling.

* refactor: refactoring tests for registryFactory

* added test for edge case.

* replaced the registry item with a configure function.

* renamed the configure function type.

* refactoring of the registryfactory.

* added tests for handler error handling.

* fixed issue with assert function.

* added comment about the limited type.

* Update public/app/features/plugins/extensions/errorHandling.test.ts

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

* Update public/app/features/plugins/extensions/errorHandling.test.ts

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

* Update public/app/features/plugins/extensions/errorHandling.test.ts

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

* added missing tests.

---------

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

public/app/features/dashboard/utils/getPanelMenu.test.ts

@@ -2,7 +2,6 @@ import { PanelMenuItem, PluginExtension, PluginExtensionLink, PluginExtensionTyp
 import {
   PluginExtensionPanelContext,
   PluginExtensionRegistryItem,
-  RegistryConfigureExtension,
   setPluginsExtensionRegistry,
 } from '@grafana/runtime';
 import { LoadingState } from '@grafana/schema';
@@ -194,7 +193,7 @@ describe('getPanelMenu()', () => {
     });
 
     it('should use extension for panel menu returned by configure function', () => {
-      const configure = () => ({
+      const configure: PluginExtensionRegistryItem<PluginExtensionLink> = () => ({
         title: 'Wohoo',
         type: PluginExtensionTypes.link,
         description: 'Declaring an incident in the app',
@@ -334,7 +333,7 @@ describe('getPanelMenu()', () => {
     });
 
     it('should pass context that can not be edited in configure function', () => {
-      const configure = (context: PluginExtensionPanelContext) => {
+      const configure: PluginExtensionRegistryItem<PluginExtensionLink> = (context) => {
         // trying to change values in the context
         // @ts-ignore
         context.pluginId = 'changed';
@@ -507,18 +506,10 @@ describe('getPanelMenu()', () => {
   });
 });
 
-function createRegistryItem<T extends PluginExtension>(
+function createRegistryItem<T extends PluginExtension, C extends object = object>(
   extension: T,
-  configure?: (context: PluginExtensionPanelContext) => T | undefined
-): PluginExtensionRegistryItem<T> {
-  if (!configure) {
-    return {
-      extension,
-    };
-  }
-
-  return {
-    extension,
-    configure: configure as RegistryConfigureExtension<T>,
-  };
+  configure?: PluginExtensionRegistryItem<T, C>
+): PluginExtensionRegistryItem<T, C> {
+  const defaultConfigure = () => extension;
+  return configure || defaultConfigure;
 }

public/app/features/dashboard/utils/getPanelMenu.ts

@@ -1,4 +1,4 @@
-import { isPluginExtensionLink, PanelMenuItem } from '@grafana/data';
+import { isPluginExtensionCommand, isPluginExtensionLink, PanelMenuItem } from '@grafana/data';
 import {
   AngularComponent,
   getDataSourceSrv,
@@ -297,6 +297,15 @@ export function getPanelMenu(
         text: truncateTitle(extension.title, 25),
         href: extension.path,
       });
+      continue;
+    }
+
+    if (isPluginExtensionCommand(extension)) {
+      subMenu.push({
+        text: truncateTitle(extension.title, 25),
+        onClick: extension.callHandlerWithContext,
+      });
+      continue;
     }
   }