How to use the @grafana/e2e.e2e.pages 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.pages.Dashboard.backArrow().click();

export function ShareModalCtrl(
  $scope: any,
  $rootScope: GrafanaRootScope,
  $location: ILocationService,
  $timeout: any,
  timeSrv: TimeSrv,
  templateSrv: TemplateSrv,
  linkSrv: LinkSrv
) {
  $scope.options = {
    forCurrent: true,
    includeTemplateVars: true,
    theme: 'current',
  };
  $scope.editor = { index: $scope.tabIndex || 0 };
  $scope.selectors = e2e.pages.SharePanelModal.selectors;

  $scope.init = () => {
    $scope.panel = $scope.model && $scope.model.panel ? $scope.model.panel : $scope.panel; // React pass panel and dashboard in the "model" property
    $scope.dashboard = $scope.model && $scope.model.dashboard ? $scope.model.dashboard : $scope.dashboard; // ^
    $scope.modeSharePanel = $scope.panel ? true : false;

    $scope.tabs = [{ title: 'Link', src: 'shareLink.html' }];

    if ($scope.modeSharePanel) {
      $scope.modalTitle = 'Share Panel';
      $scope.tabs.push({ title: 'Embed', src: 'shareEmbed.html' });
    } else {
      $scope.modalTitle = 'Share';
    }

    if (!$scope.dashboard.meta.isSnapshot) {

constructor(private variableSrv: VariableSrv, private $location: ILocationService) {
    this.annotations = this.dashboard.templating.list;
    this.variables = this.variableSrv.variables;
    this.submenuEnabled = this.dashboard.meta.submenuEnabled;
    this.dashboard.events.on(CoreEvents.submenuVisibilityChanged, (enabled: boolean) => {
      this.submenuEnabled = enabled;
    });
    this.selectors = e2e.pages.Dashboard.SubMenu.selectors;
  }

constructor(private dashboardSrv: DashboardSrv) {
    this.message = '';
    this.max = 64;
    this.isSaving = false;
    this.timeChange = this.dashboardSrv.getCurrent().hasTimeChanged();
    this.variableValueChange = this.dashboardSrv.getCurrent().hasVariableValuesChanged();
    this.selectors = e2e.pages.SaveDashboardModal.selectors;
  }

render() {
    return (
      <div>
        <span>Query</span>
        <textarea aria-label="{e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.selectors.queryOptionsQueryInput}" required="" placeholder="metric name or tags query" value="{this.state.value}" rows="{this.getLineCount()}">      &lt;/div&gt;
    );
  }
}</textarea></div>

renderOptionLink = (icon: string, text: string, onClick: any) => {
    return (
      <div>
        <a aria-label="{e2e.pages.AddDashboard.selectors.ctaButtons(text)}" href="#">
          <div>
            <i>
          </i></div><i>
          <span>{text}</span>
        </i></a><i>
      </i></div><i>
    );
  };
</i>

<input placeholder="Confirm new password" required="" name="confirmNew" type="password">
          
          <div>
            
              <a aria-label="{e2e.pages.Login.selectors.skip}">
                Skip
              </a>
            

            <button disabled="{!this.state.valid}" type="submit">
              Save
            </button>
          </div>
        
      
    );

export const DashNavButton: FunctionComponent = ({ icon, tooltip, classSuffix, onClick, href }) => {
  if (onClick) {
    return (
      
        <button aria-label="{e2e.pages.Dashboard.Toolbar.selectors.toolbarItems(tooltip)}">
          <i>
        </i></button><i>
      </i><i>
    );
  }

  return (
    
      <a href="{href}">
        <i>
      </i></a><i>
    </i><i>
  );
};
</i></i>

if (item.submenu) {
    listItemClass = 'dropdown-submenu';
  }

  html += `<li class="${listItemClass}"><a href="${item.href}"><i class="${item.icon}"></i>`;
  html += `<span aria-label="${e2e.pages.Dashboard.Panels.Panel.selectors.headerItems(
    item.text
  )}" class="dropdown-item-text">${item.text}</span>`;

  if (item.shortcut) {
    html += `<span class="dropdown-menu-item-shortcut">${item.shortcut}</span>`;
  }

  html += `</a>`;

  if (item.submenu) {
    html += '<ul class="dropdown-menu dropdown-menu--menu panel-menu">';
    for (const subitem of item.submenu) {
      html += renderMenuItem(subitem, ctrl);
    }
    html += '</ul>';
  }</li>

function TabItem({ tab, activeTab, onClick }: TabItemParams) {
  const tabClasses = classNames({
    'panel-editor-tabs__link': true,
    active: activeTab === tab.id,
  });

  return (
    <div> onClick(tab)}&gt;
      <a aria-label="{e2e.pages.Dashboard.Panels.EditPanel.selectors.tabItems(tab.text)}">
        
          <i>
        </i><i>
      </i></a><i>
    </i></div><i>
  );
}
</i>