Plugins: Extend panel menu with links from plugins (#63089)

* 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.

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

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

* Update packages/grafana-runtime/src/services/pluginExtensions/extensions.test.ts

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

* refactor(extensions): rename limiter -> pluginPlacementCount

* refactor(getpanelmenu): remove redundant continue statement

---------

Co-authored-by: Levente Balogh <balogh.levente.hu@gmail.com>
Co-authored-by: Marcus Andersson <marcus.andersson@grafana.com>

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

@@ -3,6 +3,7 @@ import { ComponentType } from 'react';
 import { KeyValue } from './data';
 import { NavModel } from './navModel';
 import { PluginMeta, GrafanaPlugin, PluginIncludeType } from './plugin';
+import { extensionLinkConfigIsValid, PluginExtensionLink } from './pluginExtensions';
 
 /**
  * @public
@@ -49,7 +50,25 @@ export interface AppPluginMeta<T extends KeyValue = KeyValue> extends PluginMeta
   // TODO anything specific to apps?
 }
 
+/**
+ * These types are towards the plugin developer when extending Grafana or other
+ * plugins from the module.ts
+ */
+export type AppConfigureExtension<T, C = object> = (extension: T, context: C) => Partial<T> | undefined;
+
+export type AppPluginExtensionLink = Pick<PluginExtensionLink, 'description' | 'path' | 'title'>;
+
+export type AppPluginExtensionLinkConfig<C extends object = object> = {
+  title: string;
+  description: string;
+  placement: string;
+  path: string;
+  configure?: AppConfigureExtension<AppPluginExtensionLink, C>;
+};
+
 export class AppPlugin<T extends KeyValue = KeyValue> extends GrafanaPlugin<AppPluginMeta<T>> {
+  private linkExtensions: AppPluginExtensionLinkConfig[] = [];
+
   // Content under: /a/${plugin-id}/*
   root?: ComponentType<AppRootProps<T>>;
 
@@ -58,7 +77,7 @@ export class AppPlugin<T extends KeyValue = KeyValue> extends GrafanaPlugin<AppP
    * This function may be called multiple times on the same instance.
    * The first time, `this.meta` will be undefined
    */
-  init(meta: AppPluginMeta) {}
+  init(meta: AppPluginMeta<T>) {}
 
   /**
    * Set the component displayed under:
@@ -89,6 +108,22 @@ export class AppPlugin<T extends KeyValue = KeyValue> extends GrafanaPlugin<AppP
       }
     }
   }
+
+  get extensionLinks(): AppPluginExtensionLinkConfig[] {
+    return this.linkExtensions;
+  }
+
+  configureExtensionLink<C extends object>(config: AppPluginExtensionLinkConfig<C>) {
+    const { path, description, title, placement } = config;
+
+    if (!extensionLinkConfigIsValid({ path, description, title, placement })) {
+      console.warn('[Plugins] Disabled extension because configureExtensionLink was called with an invalid object.');
+      return this;
+    }
+
+    this.linkExtensions.push(config as AppPluginExtensionLinkConfig);
+    return this;
+  }
 }
 
 /**

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

@@ -51,3 +51,9 @@ export * from './alerts';
 export * from './slider';
 export * from './accesscontrol';
 export * from './icon';
+export {
+  type PluginExtension,
+  type PluginExtensionLink,
+  isPluginExtensionLink,
+  PluginExtensionTypes,
+} from './pluginExtensions';

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

@@ -0,0 +1,34 @@
+/**
+ * These types are exposed when rendering extension points
+ */
+
+export enum PluginExtensionTypes {
+  link = 'link',
+}
+
+export type PluginExtension = {
+  type: PluginExtensionTypes;
+  title: string;
+  description: string;
+  key: number;
+};
+
+export type PluginExtensionLink = PluginExtension & {
+  type: PluginExtensionTypes.link;
+  path: string;
+};
+
+export function isPluginExtensionLink(extension: PluginExtension): extension is PluginExtensionLink {
+  return extension.type === PluginExtensionTypes.link && 'path' in extension;
+}
+
+export function extensionLinkConfigIsValid(props: {
+  path?: string;
+  description?: string;
+  title?: string;
+  placement?: string;
+}) {
+  const valuesAreStrings = Object.values(props).every((val) => typeof val === 'string' && val.length);
+  const placementIsValid = props.placement?.startsWith('grafana/') || props.placement?.startsWith('plugins/');
+  return valuesAreStrings && placementIsValid;
+}