Create Plugin: Extend the playwright config file

docusaurus/docs/e2e-test-a-plugin/authentication.md

@@ -26,14 +26,13 @@ In the following example, there's a [setup project](https://playwright.dev/docs/
 The second project, `run-tests`, runs all tests in the `./tests` directory. This project reuses the authentication state from the `auth` project. As a consequence, login only happens once, and all tests in the `run-tests` project start already authenticated.
 
 ```ts title="playwright.config.ts"
-import { dirname } from 'path';
-import { defineConfig, devices } from '@playwright/test';
+import type { PluginOptions } from '@grafana/plugin-e2e';
+import { defineConfig } from '@playwright/test';
+import baseConfig from './.config/playwright.config';
 
-const pluginE2eAuth = `${dirname(require.resolve('@grafana/plugin-e2e'))}/auth`;
-
-export default defineConfig({
-    ...
-    projects: [
+export default defineConfig<PluginOptions>(baseConfig, {
+  projects: [
+    ...baseConfig.projects!,
     {
       name: 'auth',
       testDir: pluginE2eAuth,
@@ -48,7 +47,7 @@ export default defineConfig({
         storageState: 'playwright/.auth/admin.json',
       },
       dependencies: ['auth'],
-    }
+    },
   ],
 });
 ```
@@ -60,14 +59,14 @@ If your plugin uses RBAC, you may want to write tests that verify that certain p
 The `@grafana/plugin-e2e` tool lets you define users with roles in the Playwright config file. In the following example, a new user with the role `Viewer` is created in the `createViewerUserAndAuthenticate` setup project. In the next project, authentication state for the user with the viewer role is reused when running the tests. Note that tests that are specific for the `Viewer` role have been added to a dedicated `testDir`.
 
 ```ts title="playwright.config.ts"
-import { dirname } from 'path';
-import { defineConfig, devices } from '@playwright/test';
-
-const pluginE2eAuth = `${dirname(require.resolve('@grafana/plugin-e2e'))}/auth`;
+import type { PluginOptions } from '@grafana/plugin-e2e';
+import { defineConfig } from '@playwright/test';
+import baseConfig from './.config/playwright.config';
 
-export default defineConfig<PluginOptions>({
+export default defineConfig<PluginOptions>(baseConfig, {
   ...
   projects: [
+      ...baseConfig.projects!,
       {
         name: 'createViewerUserAndAuthenticate',
         testDir: pluginE2eAuth,
@@ -100,12 +99,11 @@ export default defineConfig<PluginOptions>({
 When a `user` is defined in a setup project (like in the RBAC example above) `plugin-e2e` will use the Grafana HTTP API to create the user account. This action requires elevated permissions, so by default the server administrator credentials `admin:admin` will be used. If the end-to-end tests are targeting the [development environment](../set-up/) scaffolded with `create-plugin`, this will work fine. However for other test environments the server administrator password may be different. In that case, we search for GRAFANA_ADMIN_USER and GRAFANA_ADMIN_PASSWORD environment variables. Additionally you can provide the correct credentials by setting `grafanaAPICredentials` in the global options.
 
 ```ts title="playwright.config.ts"
-import { dirname } from 'path';
-import { defineConfig, devices } from '@playwright/test';
-
-const pluginE2eAuth = `${dirname(require.resolve('@grafana/plugin-e2e'))}/auth`;
+import type { PluginOptions } from '@grafana/plugin-e2e';
+import { defineConfig } from '@playwright/test';
+import baseConfig from './.config/playwright.config';
 
-export default defineConfig<PluginOptions>({
+export default defineConfig<PluginOptions>(baseConfig, {
   testDir: './tests',
   use: {
     baseURL: process.env.GRAFANA_URL || 'http://localhost:3000',
@@ -115,6 +113,7 @@ export default defineConfig<PluginOptions>({
     },
   },
   projects: [
+    ...baseConfig.projects!,
     ...
   ]
 })

docusaurus/docs/e2e-test-a-plugin/feature-toggles.md

@@ -27,10 +27,11 @@ The `@grafana/plugin-e2e` tool allows you to override the frontend feature toggl
 
 ```typescript
 // playwright.config.ts
-import { defineConfig, devices } from '@playwright/test';
-import { PluginOptions } from '@grafana/plugin-e2e';
+import type { PluginOptions } from '@grafana/plugin-e2e';
+import { defineConfig } from '@playwright/test';
+import baseConfig from './.config/playwright.config';
 
-export default defineConfig<PluginOptions>({
+export default defineConfig<PluginOptions>(baseConfig, {
   testDir: './tests',
   reporter: 'html',
   use: {

docusaurus/docs/e2e-test-a-plugin/migrate-from-grafana-e2e.md

@@ -58,15 +58,16 @@ Open the Playwright config file that was generated when Playwright was installed
    Your Playwright config should have the following project configuration:
 
 ```ts title="playwright.config.ts"
-import { dirname } from 'path';
-import { defineConfig, devices } from '@playwright/test';
 import type { PluginOptions } from '@grafana/plugin-e2e';
+import { defineConfig } from '@playwright/test';
+import baseConfig from './.config/playwright.config';
 
 const pluginE2eAuth = `${dirname(require.resolve('@grafana/plugin-e2e'))}/auth`;
 
-export default defineConfig<PluginOptions>({
+export default defineConfig<PluginOptions>(baseConfig, {
     ...
     projects: [
+    ...baseConfig.projects!,
     {
       name: 'auth',
       testDir: pluginE2eAuth,

docusaurus/docs/how-to-guides/app-plugins/implement-rbac-in-app-plugins.md

@@ -147,7 +147,7 @@ Note:
 
 Extending anything other than the action sets results in an error.
 ```bash
-logger=plugins.actionsets.registration pluginId=grafana-lokiexplore-app error="[accesscontrol.actionSetInvalid] 
+logger=plugins.actionsets.registration pluginId=grafana-lokiexplore-app error="[accesscontrol.actionSetInvalid]
 currently only folder and dashboard action sets are supported, provided action set grafana-lokiexplore-app:view is not a folder or dashboard action set"
 ```
 
@@ -156,13 +156,14 @@ currently only folder and dashboard action sets are supported, provided action s
 Grafana has several action sets for folders that can be extended:
 
 **Folder Action Sets:**
+
 - `folders:view` → `["folders:read", "dashboards:read"]`
 - `folders:edit` → `["folders:read", "folders:write", "dashboards:read", "dashboards:write", "folders:create"]`
 - `folders:admin` → `["folders:read", "folders:write", "folders:delete", "folders.permissions:read", "folders.permissions:write", ...]`
 
 ### Codepaths
-[RegistrationsOfActionSets](https://github.com/grafana/grafana/blob/main/pkg/services/accesscontrol/resourcepermissions/service.go#L574
-)
+
+[RegistrationsOfActionSets](https://github.com/grafana/grafana/blob/main/pkg/services/accesscontrol/resourcepermissions/service.go#L574)
 
 ### Plugin Action Sets Definition
 
@@ -171,23 +172,15 @@ Plugins can define action sets in their `plugin.json`:
 ```json
 {
   "id": "my-plugin",
-  "type": "app", 
+  "type": "app",
   "actionSets": [
     {
       "action": "folders:edit",
-      "actions": [
-        "my-plugin.documents:create",
-        "my-plugin.documents:update", 
-        "my-plugin.templates:write"
-      ]
+      "actions": ["my-plugin.documents:create", "my-plugin.documents:update", "my-plugin.templates:write"]
     },
     {
-      "action": "folders:admin", 
-      "actions": [
-        "my-plugin.settings:write",
-        "my-plugin.users:manage",
-        "my-plugin.permissions:write"
-      ]
+      "action": "folders:admin",
+      "actions": ["my-plugin.settings:write", "my-plugin.users:manage", "my-plugin.permissions:write"]
     }
   ]
 }
@@ -196,6 +189,7 @@ Plugins can define action sets in their `plugin.json`:
 ### Practical Example
 
 **With Action Sets (extending existing sets):**
+
 ```json
 {
   "actionSets": [
@@ -212,6 +206,7 @@ Plugins can define action sets in their `plugin.json`:
 ```
 
 **Result:** When a user is granted Edit access to a folder, they get:
+
 - All original `folders:edit` actions (folders:read, folders:write, folders:create)
 - Plus the plugin's additional actions (my-plugin.docs:create, my-plugin.docs:edit)