Plugin E2E: Expose variable list page as fixture

docusaurus/docs/create-a-plugin/extend-a-plugin/add-resource-handler.md

@@ -158,12 +158,12 @@ func (d *MyDatasource) handleNamespaces(rw http.ResponseWriter, req *http.Reques
 	rw.WriteHeader(http.StatusOK)
 }
 ```
+
 ## Additional examples
 
 Some other examples of using resource handlers and the [`httpadapter`](https://pkg.go.dev/github.com/grafana/grafana-plugin-sdk-go/backend/resource/httpadapter) package:
 
 - The [datasource-basic](https://github.com/grafana/grafana-plugin-examples/tree/main/examples/datasource-basic) example:
-  - [create resource handler](https://github.com/grafana/grafana-plugin-examples/blob/309228fffb09c092c08dbd3d17f45a656b2ec3c6/examples/datasource-basic/pkg/plugin/datasource.go#L39) and [register routes](https://github.com/grafana/grafana-plugin-examples/blob/main/examples/datasource-basic/pkg/plugin/resource_handler.go) in the backend. 
+  - [create resource handler](https://github.com/grafana/grafana-plugin-examples/blob/309228fffb09c092c08dbd3d17f45a656b2ec3c6/examples/datasource-basic/pkg/plugin/datasource.go#L39) and [register routes](https://github.com/grafana/grafana-plugin-examples/blob/main/examples/datasource-basic/pkg/plugin/resource_handler.go) in the backend.
   - [fetch](https://github.com/grafana/grafana-plugin-examples/blob/309228fffb09c092c08dbd3d17f45a656b2ec3c6/examples/datasource-basic/src/components/QueryEditor/QueryEditor.tsx#L15) and [populate query types in a drop-down](https://github.com/grafana/grafana-plugin-examples/blob/309228fffb09c092c08dbd3d17f45a656b2ec3c6/examples/datasource-basic/src/components/QueryEditor/QueryEditor.tsx#L42) in the query editor component in the frontend. Fetching is done in a [separate function](https://github.com/grafana/grafana-plugin-examples/blob/309228fffb09c092c08dbd3d17f45a656b2ec3c6/examples/datasource-basic/src/components/QueryEditor/useQueryTypes.tsx#L13) which calls the [getAvailableQueryTypes function of the datasource](https://github.com/grafana/grafana-plugin-examples/blob/309228fffb09c092c08dbd3d17f45a656b2ec3c6/examples/datasource-basic/src/datasource.ts#L21-L23).
 - Grafana's built-in TestData datasource, [create resource handler](https://github.com/grafana/grafana/blob/5687243d0b3bad06c4da809f925cfdf3d32c5a16/pkg/tsdb/grafana-testdata-datasource/testdata.go#L45) and [register routes](https://github.com/grafana/grafana/blob/5687243d0b3bad06c4da809f925cfdf3d32c5a16/pkg/tsdb/grafana-testdata-datasource/resource_handler.go#L17-L28).
-

docusaurus/docs/tutorials/convert-a-frontend-datasource-to-backend.md

@@ -43,7 +43,7 @@ Data source plugins require two components: a query editor and a config editor.
 
 ### Query and config editor
 
-These two frontend components do not need to be changed when converting a frontend data source to a backend data source. However, if you add a backend component to a data source you can request `resources` from it.  Resources are additional endpoints that the plugin exposes and can be used to populate or validate the query or config editor. Learn about this in the [resource requests section](#other-resource-requests).
+These two frontend components do not need to be changed when converting a frontend data source to a backend data source. However, if you add a backend component to a data source you can request `resources` from it. Resources are additional endpoints that the plugin exposes and can be used to populate or validate the query or config editor. Learn about this in the [resource requests section](#other-resource-requests).
 
 ## Plugin structure comparison
 

packages/plugin-e2e/src/e2e-selectors/types.ts

@@ -111,7 +111,7 @@ export type Components = {
   };
   PageToolbar: {
     item: (tooltip: string) => string;
-    shotMoreItems: string;
+    showMoreItems: string;
     itemButton: (title: string) => string;
     itemButtonTitle: string;
   };
@@ -198,6 +198,9 @@ export type Pages = {
   Dashboard: {
     url: (uid: string) => string;
     Settings: {
+      Actions: {
+        close: string;
+      };
       Annotations: {
         Edit: {
           url: (dashboardUid: string, annotationIndex: string) => string;
@@ -223,10 +226,23 @@ export type Pages = {
             generalTypeSelectV2: string;
             previewOfValuesOption: string;
             submitButton: string;
+            generalNameInputV2: string;
+            applyButton: string;
           };
         };
       };
     };
+    SubMenu: {
+      submenuItemLabels: (item: string) => string;
+      submenuItemValueDropDownValueLinkTexts: (item: string) => string;
+      submenuItemValueDropDownDropDown: string;
+      submenuItemValueDropDownOptionTexts: (item: string) => string;
+    };
+    SaveDashboardAsModal: {
+      saveButton: string;
+      newName: string;
+      save: string;
+    };
   };
   Explore: {
     url: string;

packages/plugin-e2e/src/e2e-selectors/versioned/apis.ts

@@ -34,7 +34,7 @@ export const versionedAPIs = {
   },
   Dashboard: {
     delete: {
-      [MIN_GRAFANA_VERSION]: (uid: string) => `/api/datasources/uid/${uid}`,
+      [MIN_GRAFANA_VERSION]: (uid: string) => `/api/dashboards/uid/${uid}`,
     },
   },
   Plugin: {

packages/plugin-e2e/src/e2e-selectors/versioned/components.ts

@@ -170,7 +170,7 @@ export const versionedComponents = {
     item: {
       [MIN_GRAFANA_VERSION]: (tooltip: string) => `${tooltip}`,
     },
-    shotMoreItems: {
+    showMoreItems: {
       [MIN_GRAFANA_VERSION]: 'Show more items',
     },
     itemButton: {

packages/plugin-e2e/src/e2e-selectors/versioned/pages.ts

@@ -79,6 +79,12 @@ export const versionedPages = {
       [MIN_GRAFANA_VERSION]: (uid: string) => `/d/${uid}`,
     },
     Settings: {
+      Actions: {
+        close: {
+          [MIN_GRAFANA_VERSION]: 'Go Back button',
+          '9.5.0': 'data-testid dashboard-settings-close',
+        },
+      },
       Annotations: {
         Edit: {
           url: {
@@ -136,10 +142,39 @@ export const versionedPages = {
             selectionOptionsIncludeAllSwitch: {
               [MIN_GRAFANA_VERSION]: 'Variable editor Form IncludeAll switch',
             },
+            generalNameInputV2: {
+              '8.5.0': 'data-testid Variable editor Form Name field',
+              [MIN_GRAFANA_VERSION]: 'Variable editor Form Name field',
+            },
+            applyButton: {
+              '9.3.0': 'data-testid Variable editor Apply button',
+            },
           },
         },
       },
     },
+    SubMenu: {
+      submenuItemLabels: {
+        [MIN_GRAFANA_VERSION]: (item: string) => `data-testid Dashboard template variables submenu Label ${item}`,
+      },
+      submenuItemValueDropDownValueLinkTexts: {
+        [MIN_GRAFANA_VERSION]: (item: string) =>
+          `data-testid Dashboard template variables Variable Value DropDown value link text ${item}`,
+      },
+      submenuItemValueDropDownDropDown: { [MIN_GRAFANA_VERSION]: 'Variable options' },
+      submenuItemValueDropDownOptionTexts: {
+        [MIN_GRAFANA_VERSION]: (item: string) =>
+          `data-testid Dashboard template variables Variable Value DropDown option text ${item}`,
+      },
+    },
+    SaveDashboardAsModal: {
+      newName: {
+        [MIN_GRAFANA_VERSION]: 'Save dashboard title field',
+      },
+      save: {
+        [MIN_GRAFANA_VERSION]: 'Save dashboard button',
+      },
+    },
   },
   Explore: {
     url: {

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

@@ -0,0 +1,17 @@
+import { TestFixture } from '@playwright/test';
+import { DashboardPageArgs, PlaywrightArgs } from '../../types';
+import { VariablePage } from '../../models/pages/VariablePage';
+
+type GotoVariablePageFixture = TestFixture<(args: DashboardPageArgs) => Promise<VariablePage>, PlaywrightArgs>;
+
+export const gotoVariablePage: GotoVariablePageFixture = async (
+  { request, page, selectors, grafanaVersion },
+  use,
+  testInfo
+) => {
+  await use(async (args) => {
+    const variablePage = new VariablePage({ page, selectors, grafanaVersion, request, testInfo }, args);
+    await variablePage.goto();
+    return variablePage;
+  });
+};

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

@@ -0,0 +1,15 @@
+import { TestFixture } from '@playwright/test';
+import { PlaywrightArgs } from '../types';
+import { VariablePage } from '../models/pages/VariablePage';
+
+type VariablePageFixture = TestFixture<VariablePage, PlaywrightArgs>;
+
+export const variablePage: VariablePageFixture = async (
+  { page, selectors, grafanaVersion, request },
+  use,
+  testInfo
+) => {
+  const variablePage = new VariablePage({ page, selectors, grafanaVersion, request, testInfo });
+  await variablePage.goto();
+  await use(variablePage);
+};

packages/plugin-e2e/src/index.ts

@@ -32,6 +32,8 @@ import { toDisplayPreviews } from './matchers/toDisplayPreviews';
 import { toBeOK } from './matchers/toBeOK';
 import { GrafanaPage } from './models/pages/GrafanaPage';
 import { VariableEditPage } from './models/pages/VariableEditPage';
+import { variablePage } from './fixtures/variablePage';
+import { gotoVariablePage } from './fixtures/commands/gotoVariablePage';
 
 // models
 export { DataSourcePicker } from './models/components/DataSourcePicker';
@@ -66,6 +68,7 @@ export const test = base.extend<PluginFixture, PluginOptions>({
   dashboardPage,
   panelEditPage,
   variableEditPage,
+  variablePage,
   annotationEditPage,
   alertRuleEditPage,
   explorePage,
@@ -78,6 +81,7 @@ export const test = base.extend<PluginFixture, PluginOptions>({
   gotoDashboardPage,
   gotoPanelEditPage,
   gotoVariableEditPage,
+  gotoVariablePage,
   gotoAnnotationEditPage,
   gotoAlertRuleEditPage,
   gotoDataSourceConfigPage,

packages/plugin-e2e/src/models/pages/ExplorePage.ts

@@ -75,7 +75,7 @@ export class ExplorePage extends GrafanaPage {
       });
     } catch (_) {
       // handle the case when the run button is hidden behind the "Show more items" button
-      await this.getByGrafanaSelector(components.PageToolbar.item(components.PageToolbar.shotMoreItems)).click();
+      await this.getByGrafanaSelector(components.PageToolbar.item(components.PageToolbar.showMoreItems)).click();
       await this.getByGrafanaSelector(components.RefreshPicker.runButtonV2).last().click();
     }
     return responsePromise;

packages/plugin-e2e/src/models/pages/VariablePage.ts

@@ -3,7 +3,7 @@ import { GrafanaPage } from './GrafanaPage';
 import { VariableEditPage } from './VariableEditPage';
 
 export class VariablePage extends GrafanaPage {
-  constructor(readonly ctx: PluginTestCtx, readonly dashboard?: DashboardPageArgs) {
+  constructor(readonly ctx: PluginTestCtx, public readonly dashboard?: DashboardPageArgs) {
     super(ctx);
   }
 

packages/plugin-e2e/src/types.ts

@@ -17,6 +17,7 @@ import { DataSourceConfigPage } from './models/pages/DataSourceConfigPage';
 import { ExplorePage } from './models/pages/ExplorePage';
 import { PanelEditPage } from './models/pages/PanelEditPage';
 import { VariableEditPage } from './models/pages/VariableEditPage';
+import { VariablePage } from './models/pages/VariablePage';
 import { AlertRuleEditPage } from './models/pages/AlertRuleEditPage';
 
 export type PluginOptions = {
@@ -218,6 +219,14 @@ export type PluginFixture = {
    */
   variableEditPage: VariableEditPage;
 
+  /**
+   * Isolated {@link VariablePage} instance for each test.
+   *
+   * When using this fixture in a test, you will get a new dashboard page with a new empty variable edit page
+   * To load an existing dashboard with an existing variable, use the {@link gotoVariableEditPage} fixture.
+   */
+  variablePage: VariablePage;
+
   /**
    * Isolated {@link AnnotationEditPage} instance for each test.
    *
@@ -262,6 +271,11 @@ export type PluginFixture = {
    */
   gotoVariableEditPage: (args: DashboardEditViewArgs<string>) => Promise<VariableEditPage>;
 
+  /**
+   * Fixture command that navigates a variable edit page for an already existing variable query in a dashboard.
+   */
+  gotoVariablePage: (args: DashboardPageArgs) => Promise<VariablePage>;
+
   /**
    * Fixture command that navigates an annotation edit page for an already existing annotation query in a dashboard.
    */