Plugin E2E: Interact with Grafana http api on behalf of logged in user

packages/plugin-e2e/src/auth/auth.setup.ts

@@ -1,8 +1,7 @@
 import { test as setup } from '../';
-import { DEFAULT_ADMIN_USER } from '../options';
 
-setup('authenticate', async ({ login, createUser, user }) => {
-  if (user && (user.user !== DEFAULT_ADMIN_USER.user || user.password !== DEFAULT_ADMIN_USER.password)) {
+setup('authenticate', async ({ login, createUser, user, grafanaAPICredentials }) => {
+  if (user && (user.user !== grafanaAPICredentials.user || user.password !== grafanaAPICredentials.password)) {
     await createUser();
   }
   await login();

packages/plugin-e2e/src/fixtures/commands/createUser.ts

@@ -1,61 +1,13 @@
-import { APIRequestContext, expect, TestFixture } from '@playwright/test';
-import { PlaywrightArgs, User } from '../../types';
+import { TestFixture } from '@playwright/test';
+import { PlaywrightArgs } from '../../types';
 
 type CreateUserFixture = TestFixture<() => Promise<void>, PlaywrightArgs>;
 
-const getHeaders = (user: User) => ({
-  Authorization: `Basic ${Buffer.from(`${user.user}:${user.password}`).toString('base64')}`,
-});
-
-const getUserIdByUsername = async (
-  request: APIRequestContext,
-  userName: string,
-  grafanaAPIUser: User
-): Promise<number> => {
-  const getUserIdByUserNameReq = await request.get(`/api/users/lookup?loginOrEmail=${userName}`, {
-    headers: getHeaders(grafanaAPIUser),
-  });
-  expect(getUserIdByUserNameReq.ok()).toBeTruthy();
-  const json = await getUserIdByUserNameReq.json();
-  return json.id;
-};
-
-export const createUser: CreateUserFixture = async ({ request, user, grafanaAPICredentials }, use) => {
+export const createUser: CreateUserFixture = async ({ grafanaAPIClient, user }, use) => {
   await use(async () => {
     if (!user) {
       throw new Error('Playwright option `User` was not provided');
     }
-
-    const createUserReq = await request.post(`/api/admin/users`, {
-      data: {
-        name: user?.user,
-        login: user?.user,
-        password: user?.password,
-      },
-      headers: getHeaders(grafanaAPICredentials),
-    });
-
-    let userId: number | undefined;
-    if (createUserReq.ok()) {
-      const respJson = await createUserReq.json();
-      userId = respJson.id;
-    } else if (createUserReq.status() === 412) {
-      // user already exists
-      userId = await getUserIdByUsername(request, user?.user, grafanaAPICredentials);
-    } else {
-      throw new Error(`Could not create user '${user?.user}': ${await createUserReq.text()}`);
-    }
-
-    if (user.role) {
-      const updateRoleReq = await request.patch(`/api/org/users/${userId}`, {
-        data: { role: user.role },
-        headers: getHeaders(grafanaAPICredentials),
-      });
-      const updateRoleReqText = await updateRoleReq.text();
-      expect(
-        updateRoleReq.ok(),
-        `Could not assign role '${user.role}' to user '${user.user}': ${updateRoleReqText}`
-      ).toBeTruthy();
-    }
+    await grafanaAPIClient.createUser(user);
   });
 };

packages/plugin-e2e/src/fixtures/commands/gotoDataSourceConfigPage.ts

@@ -1,28 +1,16 @@
 import { TestFixture } from '@playwright/test';
-import { DataSourceSettings, PlaywrightArgs } from '../../types';
+import { PlaywrightArgs } from '../../types';
 import { DataSourceConfigPage } from '../../models/pages/DataSourceConfigPage';
 
 type GotoDataSourceConfigPageFixture = TestFixture<(uid: string) => Promise<DataSourceConfigPage>, PlaywrightArgs>;
 
 export const gotoDataSourceConfigPage: GotoDataSourceConfigPageFixture = async (
-  { request, page, selectors, grafanaVersion, grafanaAPICredentials },
+  { request, page, selectors, grafanaVersion, grafanaAPIClient },
   use,
   testInfo
 ) => {
   await use(async (uid) => {
-    const response = await request.get(`/api/datasources/uid/${uid}`, {
-      headers: {
-        Authorization: `Basic ${Buffer.from(`${grafanaAPICredentials.user}:${grafanaAPICredentials.password}`).toString(
-          'base64'
-        )}`,
-      },
-    });
-    if (!response.ok()) {
-      throw new Error(
-        `Failed to get datasource by uid: ${response.statusText()}. If you're using a provisioned data source, make sure it has a UID`
-      );
-    }
-    const settings: DataSourceSettings = await response.json();
+    const settings = await grafanaAPIClient.getDataSourceSettingsByUID(uid);
     const dataSourceConfigPage = new DataSourceConfigPage(
       { page, selectors, grafanaVersion, request, testInfo },
       settings

packages/plugin-e2e/src/fixtures/commands/login.ts

@@ -1,5 +1,5 @@
 import path from 'path';
-import { expect, TestFixture } from '@playwright/test';
+import { TestFixture } from '@playwright/test';
 import { PlaywrightArgs } from '../../types';
 
 type LoginFixture = TestFixture<() => Promise<void>, PlaywrightArgs>;
@@ -8,7 +8,9 @@ export const login: LoginFixture = async ({ request, user }, use) => {
   await use(async () => {
     const loginReq = await request.post('/login', { data: user });
     const text = await loginReq.text();
-    expect.soft(loginReq.ok(), `Could not log in to Grafana: ${text}`).toBeTruthy();
+    if (!loginReq.ok()) {
+      throw new Error(`Could not login to Grafana using user '${user?.user}': ${text}`);
+    }
     await request.storageState({ path: path.join(process.cwd(), `playwright/.auth/${user?.user}.json`) });
   });
 };

packages/plugin-e2e/src/fixtures/grafanaAPIClient.ts

@@ -0,0 +1,29 @@
+import path from 'path';
+import { TestFixture, expect, APIRequestContext } from '@playwright/test';
+import { PlaywrightArgs, User } from '../types';
+import { GrafanaAPIClient } from '../models/GrafanaAPIClient';
+
+type GrafanaAPIClientFixture = TestFixture<GrafanaAPIClient, PlaywrightArgs>;
+
+const adminClientStorageState = path.join(process.cwd(), `playwright/.auth/grafanaAPICredentials.json`);
+
+export const createAdminClientStorageState = async (request: APIRequestContext, grafanaAPICredentials: User) => {
+  const loginReq = await request.post('/login', { data: grafanaAPICredentials });
+  const text = await loginReq.text();
+  await expect.soft(loginReq.ok(), `Could not log in to Grafana: ${text}`).toBeTruthy();
+  await request.storageState({ path: adminClientStorageState });
+};
+
+export const grafanaAPIClient: GrafanaAPIClientFixture = async ({ browser, grafanaAPICredentials }, use) => {
+  const context = await browser.newContext({ storageState: undefined });
+  const loginReq = await context.request.post('/login', { data: grafanaAPICredentials });
+  if (!loginReq.ok()) {
+    console.log(
+      `Could not login to grafana using credentials '${
+        grafanaAPICredentials?.user
+      }'. Find information on how user can be managed in the plugin-e2e docs: https://grafana.com/developers/plugin-tools/e2e-test-a-plugin/use-authentication#managing-users  : ${await loginReq.text()}`
+    );
+  }
+  await context.request.storageState({ path: adminClientStorageState });
+  await use(new GrafanaAPIClient(context.request));
+};

packages/plugin-e2e/src/index.ts

@@ -2,6 +2,7 @@ import { test as base, expect as baseExpect } from '@playwright/test';
 
 import { AlertPageOptions, AlertVariant, ContainTextOptions, PluginFixture, PluginOptions } from './types';
 import { annotationEditPage } from './fixtures/annotationEditPage';
+import { grafanaAPIClient } from './fixtures/grafanaAPIClient';
 import { createDataSource } from './fixtures/commands/createDataSource';
 import { createDataSourceConfigPage } from './fixtures/commands/createDataSourceConfigPage';
 import { createUser } from './fixtures/commands/createUser';
@@ -63,6 +64,7 @@ export const test = base.extend<PluginFixture, PluginOptions>({
   selectors: e2eSelectors,
   grafanaVersion,
   login,
+  grafanaAPIClient,
   createDataSourceConfigPage,
   page,
   dashboardPage,

packages/plugin-e2e/src/models/GrafanaAPIClient.ts

@@ -0,0 +1,56 @@
+import { APIRequestContext } from '@playwright/test';
+import { DataSourceSettings, User } from '../types';
+
+export class GrafanaAPIClient {
+  constructor(private request: APIRequestContext) {}
+
+  async getUserIdByUsername(userName: string) {
+    const getUserIdByUserNameReq = await this.request.get(`/api/users/lookup?loginOrEmail=${userName}`);
+    const json = await getUserIdByUserNameReq.json();
+    return json.id;
+  }
+
+  async createUser(user: User) {
+    const createUserReq = await this.request.post(`/api/admin/users`, {
+      data: {
+        name: user?.user,
+        login: user?.user,
+        password: user?.password,
+      },
+    });
+    let userId: number | undefined;
+    if (createUserReq.ok()) {
+      const respJson = await createUserReq.json();
+      userId = respJson.id;
+    } else if (createUserReq.status() === 412) {
+      // user already exists
+      userId = await this.getUserIdByUsername(user?.user);
+    } else {
+      throw new Error(
+        `Could not create user '${
+          user?.user
+        }'. Find information on how user can be managed in the plugin-e2e docs: https://grafana.com/developers/plugin-tools/e2e-test-a-plugin/use-authentication#managing-users  : ${await createUserReq.text()}`
+      );
+    }
+
+    if (user.role) {
+      const updateRoleReq = await this.request.patch(`/api/org/users/${userId}`, {
+        data: { role: user.role },
+      });
+      if (!updateRoleReq.ok()) {
+        throw new Error(`Could not assign role '${user.role}' to user '${user.user}': ${await updateRoleReq.text()}`);
+      }
+    }
+  }
+
+  async getDataSourceSettingsByUID(uid: string) {
+    const response = await this.request.get(`/api/datasources/uid/${uid}`);
+    if (!response.ok()) {
+      throw new Error(
+        `Failed to get datasource by uid: ${response.statusText()}. If you're using a provisioned data source, make sure it has a UID`
+      );
+    }
+    const settings: DataSourceSettings = await response.json();
+    return settings;
+  }
+}

packages/plugin-e2e/src/types.ts

@@ -19,6 +19,7 @@ import { PanelEditPage } from './models/pages/PanelEditPage';
 import { VariableEditPage } from './models/pages/VariableEditPage';
 import { VariablePage } from './models/pages/VariablePage';
 import { AlertRuleEditPage } from './models/pages/AlertRuleEditPage';
+import { GrafanaAPIClient } from './models/GrafanaAPIClient';
 
 export type PluginOptions = {
   /**
@@ -193,6 +194,19 @@ export type PluginFixture = {
    */
   isFeatureToggleEnabled<T = object>(featureToggle: keyof T): Promise<boolean>;
 
+  /**
+   * Client that allows you to use certain endpoints in the Grafana http API.
+   *
+   The GrafanaAPIClient doesn't call the Grafana HTTP API on behalf of the logged in user -
+   * it uses the {@link types.grafanaAPICredentials} credentials. grafanaAPICredentials defaults to admin:admin, but you may override this
+   * by specifying grafanaAPICredentials in the playwright config options.
+   *
+   * Note that storage state for the admin client is not persisted throughout the test suite. For every test where the grafanaAPICredentials fixtures is used,
+   * new storage state is created.
+   */
+
+  grafanaAPIClient: GrafanaAPIClient;
+
   /**
    * Isolated {@link DashboardPage} instance for each test.
    *

packages/plugin-e2e/tests/as-admin-user/permissions/createUserUsingInvalidCredentials.spec.ts

@@ -0,0 +1,8 @@
+import { expect, test } from '../../../src';
+
+test.use({ grafanaAPICredentials: { user: 'test', password: 'test' } });
+test('should throw error when credentials are invalid', async ({ grafanaAPIClient }) => {
+  await expect(grafanaAPIClient.createUser({ user: 'testuser1', password: 'pass' })).rejects.toThrowError(
+    /Could not create user 'testuser1'.*/
+  );
+});

packages/plugin-e2e/tests/as-admin-user/permissions/createUserUsingValidCredentials.spec.ts

@@ -0,0 +1,6 @@
+import { expect, test } from '../../../src';
+
+test('should be possible to create user when credentials are valid', async ({ grafanaAPIClient }) => {
+  await expect(grafanaAPIClient.createUser({ user: 'testuser1', password: 'pass' })).resolves.toBeUndefined();
+  await expect(await grafanaAPIClient.getUserIdByUsername('testuser1')).toBeTruthy();
+});

packages/plugin-e2e/tests/as-viewer-user/permissions/createUserUsingInvalidCredentials.spec.ts

@@ -0,0 +1,8 @@
+import { expect, test } from '../../../src';
+
+test.use({ grafanaAPICredentials: { user: 'test', password: 'test' } });
+test('should throw error when credentials are invalid', async ({ grafanaAPIClient }) => {
+  await expect(grafanaAPIClient.createUser({ user: 'testuser1', password: 'pass' })).rejects.toThrowError(
+    /Could not create user 'testuser1'.*/
+  );
+});

packages/plugin-e2e/tests/as-viewer-user/permissions/createUserUsingValidCredentials.spec.ts

@@ -0,0 +1,16 @@
+import { expect, test } from '../../../src';
+
+test('using grafanaAPIClient should not change storage state for logged in user', async ({
+  grafanaAPIClient,
+  page,
+}) => {
+  // assert one can create user on behalf of the admin credentials
+  await expect(grafanaAPIClient.createUser({ user: 'testuser1', password: 'pass' })).resolves.toBeUndefined();
+  await expect(await grafanaAPIClient.getUserIdByUsername('testuser1')).toBeTruthy();
+
+  // but logged in user should still only have viewer persmissions
+  await page.goto('/');
+  const homePageTitle = await page.title();
+  await page.goto('/datasources', { waitUntil: 'networkidle' });
+  expect(await page.title()).toEqual(homePageTitle);
+});