How to use the @grafana/e2e.e2e.scenario function in @grafana/e2e

import { e2e } from '@grafana/e2e';
import { ScenarioContext } from '@grafana/e2e/src/support';

e2e.scenario({
  describeName: 'Smoke tests',
  itName: 'Login scenario, create test data source, dashboard, panel, and export scenario',
  addScenarioDataSource: true,
  addScenarioDashBoard: true,
  skipScenario: false,
  scenario: ({ dataSourceName, dashboardTitle, dashboardUid }: ScenarioContext) => {
    e2e.flows.openDashboard(dashboardUid);
    e2e.pages.Dashboard.toolbarItems('Add panel')
      .should('be.visible') // prevents flakiness
      .click();
    e2e.pages.AddDashboard.ctaButtons('Add Query').click();

    e2e.pages.Panels.EditPanel.tabItems('Queries').click();
    e2e.pages.Panels.DataSource.TestData.QueryTab.scenarioSelect().select('CSV Metric Values');

    e2e.pages.Panels.EditPanel.tabItems('Visualization').click();

.then(({ config: { panelTitle } }: { config: PartialConfigurePanelConfig }) => {
      // Make sure the template variable works
      e2e.flows.editPanel({
        matchScreenshot: true,
        panelTitle,
        queriesForm: () => {
          e2eSelectors.QueryEditor.Owner.input()
            .clear()
            .type(`$${variableName}{enter}`);
        },
        visitDashboardAtStart: false,
      });
    });
};

e2e.scenario({
  describeName: 'Smoke tests',
  itName: 'Login, create data source, annotation, template variable, dashboard, panel',
  scenario: () => {
    e2e()
      .readProvisions([
        // Paths are relative to /provisioning
        'datasources/github.yaml',
      ])
      .then(([provision]) => addGithubDataSource(provision.datasources[0].secureJsonData.accessToken))
      .then(({ config: { name: dataSourceName } }) => {
        const variableName = 'owner';

        e2e.flows.addDashboard({
          annotations: [
            {
              dataSource: dataSourceName,

e2e.flows.addPanel({
    matchScreenshot: true,
    queriesForm: () => fillSpreadsheetID(sheetId),
    visualizationName: e2e.flows.VISUALIZATION_TABLE,
  }).then(({ config: { panelTitle } }: any) => {
    // Assert template variable as sheet id
    e2e.flows.editPanel({
      matchScreenshot: true,
      panelTitle,
      queriesForm: () => fillSpreadsheetID(`$${sheetIdVariable}`, sheetId, true),
      visitDashboardAtStart: false,
    });
  });
};

e2e.scenario({
  describeName: 'Smoke tests',
  itName: 'Login, create data source, dashboard and panel',
  scenario: () => {
    e2e().readProvisions([
      // Paths are relative to /provisioning
      'datasources/google-sheets-datasource-API-key.yaml',
      'datasources/google-sheets-datasource-jwt.yaml',
    ]).then(([apiKeyProvision, jwtProvision]) => {
      const { apiKey } = apiKeyProvision.datasources[0].secureJsonData;
      //const { jwt } = jwtProvision.datasources[0].secureJsonData;
      const sheetId = '1Kn_9WKsuT-H0aJL3fvqukt27HlizMLd-KQfkNgeWj4U';
      const sheetIdVariable = 'sheetId';

      //const jwtPath = 'jwt.json';
      //e2e().writeFile(`${Cypress.config('fixturesFolder')}/${jwtPath}`, jwt);

import { e2e } from '@grafana/e2e';

e2e.scenario({
  describeName: 'Smoke tests',
  itName: 'Login scenario, create test data source, dashboard, panel, and export scenario',
  addScenarioDataSource: true,
  addScenarioDashBoard: true,
  skipScenario: false,
  scenario: () => {},
});