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

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();

    e2e.pages.Panels.Visualization.Graph.VisualizationTab.xAxisSection()
      .contains('Show')
      .click();

    e2e.flows.saveDashboard();

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();

    e2e.pages.Panels.Visualization.Graph.VisualizationTab.xAxisSection()
      .contains('Show')
      .click();

    e2e.flows.saveDashboard();

    e2e.pages.Dashboard.backArrow().click();

    e2e.pages.Panels.Panel.title('Panel Title').click();

    e2e.pages.Panels.Panel.headerItems('Share').click();

    e2e.pages.SharePanelModal.linkToRenderedImage().then(($a: any) => {
      // extract the fully qualified href property
      const url = $a.prop('href');

      // Test that the image renderer returns 200 OK
      e2e().request({ method: 'GET', url, timeout: 120000 });

      // Download image
      if (!e2e.env('CIRCLE_SHA1')) {

e2e.components.Select.input()
          .first()
          .should('be.empty')
          .focus()
          .type(`Releases{enter}`);
      });

    e2eSelectors.QueryEditor.Owner.input()
      .should('be.empty')
      .type(`grafana{enter}`);
    e2eSelectors.QueryEditor.Repository.input()
      .should('be.empty')
      .type(`grafana{enter}`);
  };

  e2e.flows
    .addPanel({
      matchScreenshot: true,
      queriesForm: () => {
        fillQueryEditor();

        // Switch to the Table view as we have tabular data from Github (for the screenshot)
        e2e.components.PanelEditor.OptionsPane.open()
          .should('be.visible')
          .click();
        e2e.components.OptionsGroup.toggle('Panel type')
          .should('be.visible')
          .click();
        e2e.components.PluginVisualization.item('Table')
          .scrollIntoView()
          .should('be.visible')
          .click();

const sheetIdVariable = 'sheetId';

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

      // This gets auto-removed within `afterEach` of @grafana/e2e
      addGoogleSheetsDataSource({ apiKey });

      // This gets auto-removed within `afterEach` of @grafana/e2e
      e2e.flows.addDashboard({
        variables: [
          {
            constantValue: sheetId,
            label: 'Template Variable',
            name: sheetIdVariable,
            type: e2e.flows.VARIABLE_TYPE_CONSTANT,
          },
        ],
      });

      // This gets auto-removed within `afterEach` of @grafana/e2e
      addGoogleSheetsPanel({ sheetId, sheetIdVariable });

      // These get auto-removed within `afterEach` of @grafana/e2e
      //addGoogleSheetsDataSource({ jwtPath });
      //addGoogleSheetsPanel({ sheetId, sheetIdVariable });
    });
  },

.within(() => {
        e2e.flows.selectOption({
          container: e2e.components.Select.option(),
          optionText: 'Google JWT File',
        });

        e2e()
          .get('input[type=file]')
          .attachFile(newValue);
      });