E2E: Add support for building test plugins (#91873)

* build test apps with webpack

* add extensions test app

* update e2e tests

* remove non-build test apps using amd

* use @grafana/plugin-configs rather than create-plugin config

* Update e2e/plugin-e2e/plugin-e2e-api-tests/as-admin-user/extensions/usePluginComponents.spec.ts

Co-authored-by: Jack Westbrook <jack.westbrook@gmail.com>

* Update package.json

Co-authored-by: Jack Westbrook <jack.westbrook@gmail.com>

* use run dir variable instead of hardcoded path

* add dummy licence file

* add separate step for building test plugins

* support nested plugins

* remove react-router-dom from the externals array

* remove add_mode dev

* lint starlark

* pass license path as env variable

* fix the path

* chore(e2e-plugins): clean up dependencies to match core versions

* refactor(e2e-plugins): prefer extending webpack plugins-config

* docs(e2e-plugins): add basic info to extensions test plugin readme

* update readme

* change dir name from custom plugins to test plugins

* change root readme

* update lockfile

---------

Co-authored-by: Jack Westbrook <jack.westbrook@gmail.com>

e2e/plugin-e2e/plugin-e2e-api-tests/as-admin-user/extensions/extensionPoints.spec.ts

@@ -1,5 +1,7 @@
 import { test, expect } from '@grafana/plugin-e2e';
 
+import { ensureExtensionRegistryIsPopulated } from './utils';
+
 const testIds = {
   container: 'main-app-body',
   actions: {
@@ -14,13 +16,18 @@ const testIds = {
   },
   appB: {
     modal: 'b-app-modal',
+    reusableComponent: 'b-app-configure-extension-component',
+  },
+  legacyAPIPage: {
+    container: 'data-testid pg-two-container',
   },
 };
 
-const pluginId = 'myorg-extensionpoint-app';
+const pluginId = 'grafana-extensionstest-app';
 
 test('should extend the actions menu with a link to a-app plugin', async ({ page }) => {
-  await page.goto(`/a/${pluginId}/one`);
+  await page.goto(`/a/${pluginId}/legacy-apis`);
+  await ensureExtensionRegistryIsPopulated(page);
   await page.getByTestId(testIds.actions.button).click();
   await page.getByTestId(testIds.container).getByText('Go to A').click();
   await page.getByTestId(testIds.modal.open).click();
@@ -28,7 +35,16 @@ test('should extend the actions menu with a link to a-app plugin', async ({ page
 });
 
 test('should extend the actions menu with a command triggered from b-app plugin', async ({ page }) => {
-  await page.goto(`/a/${pluginId}/one`);
+  await page.goto(`/a/${pluginId}/legacy-apis`);
+  await ensureExtensionRegistryIsPopulated(page);
+  await expect(
+    page.getByTestId(testIds.legacyAPIPage.container).getByTestId(testIds.appB.reusableComponent)
+  ).toHaveText('Hello World!');
+});
+
+test('should extend main app with component extension from app B', async ({ page }) => {
+  await page.goto(`/a/${pluginId}/legacy-apis`);
+  await ensureExtensionRegistryIsPopulated(page);
   await page.getByTestId(testIds.actions.button).click();
   await page.getByTestId(testIds.container).getByText('Open from B').click();
   await expect(page.getByTestId(testIds.appB.modal)).toBeVisible();

e2e/plugin-e2e/plugin-e2e-api-tests/as-admin-user/extensions/extensions.spec.ts

@@ -1,5 +1,8 @@
+import { selectors } from '@grafana/e2e-selectors';
 import { expect, test } from '@grafana/plugin-e2e';
 
+import { ensureExtensionRegistryIsPopulated } from './utils';
+
 const panelTitle = 'Link with defaults';
 const extensionTitle = 'Open from time series...';
 const testIds = {
@@ -7,7 +10,7 @@ const testIds = {
     container: 'ape-modal-body',
   },
   mainPage: {
-    container: 'ape-main-page-container',
+    container: 'main-app-body',
   },
 };
 
@@ -16,6 +19,7 @@ const linkPathDashboardUid = 'd1fbb077-cd44-4738-8c8a-d4e66748b719';
 
 test('should add link extension (path) with defaults to time series panel', async ({ gotoDashboardPage, page }) => {
   const dashboardPage = await gotoDashboardPage({ uid: linkPathDashboardUid });
+  await ensureExtensionRegistryIsPopulated(page);
   const panel = await dashboardPage.getPanelByTitle(panelTitle);
   await panel.clickOnMenuItem(extensionTitle, { parentItem: 'Extensions' });
   await expect(page.getByTestId(testIds.mainPage.container)).toBeVisible();
@@ -23,6 +27,7 @@ test('should add link extension (path) with defaults to time series panel', asyn
 
 test('should add link extension (onclick) with defaults to time series panel', async ({ gotoDashboardPage, page }) => {
   const dashboardPage = await gotoDashboardPage({ uid: linkOnClickDashboardUid });
+  await ensureExtensionRegistryIsPopulated(page);
   const panel = await dashboardPage.getPanelByTitle(panelTitle);
   await panel.clickOnMenuItem(extensionTitle, { parentItem: 'Extensions' });
   await expect(page.getByRole('dialog')).toContainText('Select query from "Link with defaults"');
@@ -32,6 +37,7 @@ test('should add link extension (onclick) with new title to pie chart panel', as
   const panelTitle = 'Link with new name';
   const extensionTitle = 'Open from piechart';
   const dashboardPage = await gotoDashboardPage({ uid: linkOnClickDashboardUid });
+  await ensureExtensionRegistryIsPopulated(page);
   const panel = await dashboardPage.getPanelByTitle(panelTitle);
   await panel.clickOnMenuItem(extensionTitle, { parentItem: 'Extensions' });
   await expect(page.getByRole('dialog')).toContainText('Select query from "Link with new name"');

e2e/plugin-e2e/plugin-e2e-api-tests/as-admin-user/extensions/useExposedComponent.spec.ts

@@ -1,9 +1,9 @@
 import { test, expect } from '@grafana/plugin-e2e';
 
-const pluginId = 'myorg-componentconsumer-app';
+const pluginId = 'grafana-extensionstest-app';
 const exposedComponentTestId = 'exposed-component';
 
 test('should display component exposed by another app', async ({ page }) => {
-  await page.goto(`/a/${pluginId}`);
+  await page.goto(`/a/${pluginId}/exposed-components`);
   await expect(await page.getByTestId(exposedComponentTestId)).toHaveText('Hello World!');
 });

e2e/plugin-e2e/plugin-e2e-api-tests/as-admin-user/extensions/usePluginComponents.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@grafana/plugin-e2e';
+
+const pluginId = 'grafana-extensionstest-app';
+const exposedComponentTestId = 'exposed-component';
+
+test('should render component with usePluginComponents hook', async ({ page }) => {
+  await page.goto(`/a/${pluginId}/added-components`);
+  await expect(
+    page.getByTestId('data-testid pg-added-components-container').getByTestId('b-app-add-component')
+  ).toHaveText('Hello World!');
+});

e2e/plugin-e2e/plugin-e2e-api-tests/as-admin-user/extensions/utils.ts

@@ -0,0 +1,10 @@
+import { Page } from '@playwright/test';
+
+import { selectors } from '@grafana/e2e-selectors';
+
+export async function ensureExtensionRegistryIsPopulated(page: Page) {
+  // Due to these plugins using the old getter extensions api we need to force a refresh by navigating home then back
+  // to guarantee the extensions are available to the plugin before we interact with the page.
+  await page.getByTestId(selectors.components.Breadcrumbs.breadcrumb('Home')).click();
+  await page.goBack();
+}