kibana/test/functional/page_objects/visualize_page.ts

/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License
 * 2.0 and the Server Side Public License, v 1; you may not use this file except
 * in compliance with, at your election, the Elastic License 2.0 or the Server
 * Side Public License, v 1.
 */

import { FtrProviderContext } from '../ftr_provider_context';
import { VisualizeConstants } from '../../../src/plugins/visualize/public/application/visualize_constants';
import { UI_SETTINGS } from '../../../src/plugins/data/common';

// TODO: Remove & Refactor to use the TTV page objects
interface VisualizeSaveModalArgs {
  saveAsNew?: boolean;
  redirectToOrigin?: boolean;
  addToDashboard?: boolean;
  dashboardId?: string;
}

type DashboardPickerOption =
  | 'add-to-library-option'
  | 'existing-dashboard-option'
  | 'new-dashboard-option';

export function VisualizePageProvider({ getService, getPageObjects }: FtrProviderContext) {
  const kibanaServer = getService('kibanaServer');
  const testSubjects = getService('testSubjects');
  const retry = getService('retry');
  const find = getService('find');
  const log = getService('log');
  const globalNav = getService('globalNav');
  const listingTable = getService('listingTable');
  const queryBar = getService('queryBar');
  const elasticChart = getService('elasticChart');
  const { common, header, visEditor, visChart } = getPageObjects([
    'common',
    'header',
    'visEditor',
    'visChart',
  ]);

  /**
   * This page object contains the visualization type selection, the landing page,
   * and the open/save dialog functions
   */
  class VisualizePage {
    index = {
      LOGSTASH_TIME_BASED: 'logstash-*',
      LOGSTASH_NON_TIME_BASED: 'logstash*',
    };

    public async initTests() {
      await kibanaServer.savedObjects.clean({ types: ['visualization'] });
      await kibanaServer.importExport.load('visualize');

      await kibanaServer.uiSettings.replace({
        defaultIndex: 'logstash-*',
        [UI_SETTINGS.FORMAT_BYTES_DEFAULT_PATTERN]: '0,0.[000]b',
      });
    }

    public async gotoVisualizationLandingPage() {
      await common.navigateToApp('visualize');
    }

    public async clickNewVisualization() {
      await listingTable.clickNewButton('createVisualizationPromptButton');
    }

    public async clickAggBasedVisualizations() {
      await testSubjects.click('visGroupAggBasedExploreLink');
    }

    public async goBackToGroups() {
      await testSubjects.click('goBackLink');
    }

    public async createVisualizationPromptButton() {
      await testSubjects.click('createVisualizationPromptButton');
    }

    public async getChartTypes() {
      const chartTypeField = await testSubjects.find('visNewDialogTypes');
      const $ = await chartTypeField.parseDomContent();
      return $('button')
        .toArray()
        .map((chart) => $(chart).findTestSubject('visTypeTitle').text().trim());
    }

    public async getPromotedVisTypes() {
      const chartTypeField = await testSubjects.find('visNewDialogGroups');
      const $ = await chartTypeField.parseDomContent();
      const promotedVisTypes: string[] = [];
      $('button')
        .toArray()
        .forEach((chart) => {
          const title = $(chart).findTestSubject('visTypeTitle').text().trim();
          if (title) {
            promotedVisTypes.push(title);
          }
        });
      return promotedVisTypes;
    }

    public async waitForVisualizationSelectPage() {
      await retry.try(async () => {
        const visualizeSelectTypePage = await testSubjects.find('visNewDialogTypes');
        if (!(await visualizeSelectTypePage.isDisplayed())) {
          throw new Error('wait for visualization select page');
        }
      });
    }

    public async clickRefresh() {
      if (await visChart.isNewChartsLibraryEnabled()) {
        await elasticChart.setNewChartUiDebugFlag();
      }
      await queryBar.clickQuerySubmitButton();
    }

    public async waitForGroupsSelectPage() {
      await retry.try(async () => {
        const visualizeSelectGroupStep = await testSubjects.find('visNewDialogGroups');
        if (!(await visualizeSelectGroupStep.isDisplayed())) {
          throw new Error('wait for vis groups select step');
        }
      });
    }

    public async navigateToNewVisualization() {
      await this.gotoVisualizationLandingPage();
      await header.waitUntilLoadingHasFinished();
      await this.clickNewVisualization();
      await this.waitForGroupsSelectPage();
    }

    public async navigateToNewAggBasedVisualization() {
      await this.gotoVisualizationLandingPage();
      await header.waitUntilLoadingHasFinished();
      await this.clickNewVisualization();
      await this.clickAggBasedVisualizations();
      await this.waitForVisualizationSelectPage();
    }

    public async hasVisType(type: string) {
      return await testSubjects.exists(`visType-${type}`);
    }

    public async clickVisType(type: string) {
      await testSubjects.click(`visType-${type}`);
      await header.waitUntilLoadingHasFinished();
    }

    public async clickAreaChart() {
      await this.clickVisType('area');
    }

    public async clickDataTable() {
      await this.clickVisType('table');
    }

    public async clickLineChart() {
      await this.clickVisType('line');
    }

    public async clickRegionMap() {
      await this.clickVisType('region_map');
    }

    public async hasRegionMap() {
      return await this.hasVisType('region_map');
    }

    public async clickMarkdownWidget() {
      await this.clickVisType('markdown');
    }

    public async clickMetric() {
      await this.clickVisType('metric');
    }

    public async clickGauge() {
      await this.clickVisType('gauge');
    }

    public async clickPieChart() {
      await this.clickVisType('pie');
    }

    public async clickTileMap() {
      await this.clickVisType('tile_map');
    }

    public async hasTileMap() {
      return await this.hasVisType('tile_map');
    }

    public async clickTagCloud() {
      await this.clickVisType('tagcloud');
    }

    public async clickVega() {
      await this.clickVisType('vega');
    }

    public async clickVisualBuilder() {
      await this.clickVisType('metrics');
    }

    public async clickVerticalBarChart() {
      await this.clickVisType('histogram');
    }

    public async clickHeatmapChart() {
      await this.clickVisType('heatmap');
    }

    public async clickInputControlVis() {
      await this.clickVisType('input_control_vis');
    }

    public async clickLensWidget() {
      await this.clickVisType('lens');
    }

    public async clickMapsApp() {
      await this.clickVisType('maps');
    }

    public async hasMapsApp() {
      return await this.hasVisType('maps');
    }

    public async createSimpleMarkdownViz(vizName: string) {
      await this.gotoVisualizationLandingPage();
      await this.navigateToNewVisualization();
      await this.clickMarkdownWidget();
      await visEditor.setMarkdownTxt(vizName);
      await visEditor.clickGo();
      await this.saveVisualization(vizName);
    }

    public async clickNewSearch(indexPattern = this.index.LOGSTASH_TIME_BASED) {
      await testSubjects.click(`savedObjectTitle${indexPattern.split(' ').join('-')}`);
      await header.waitUntilLoadingHasFinished();
    }

    public async selectVisSourceIfRequired() {
      log.debug('selectVisSourceIfRequired');
      const selectPage = await testSubjects.findAll('visualizeSelectSearch');
      if (selectPage.length) {
        log.debug('a search is required for this visualization');
        await this.clickNewSearch();
      }
    }

    /**
     * Deletes all existing visualizations
     */
    public async deleteAllVisualizations() {
      await retry.try(async () => {
        await listingTable.checkListingSelectAllCheckbox();
        await listingTable.clickDeleteSelected();
        await common.clickConfirmOnModal();
        await testSubjects.find('createVisualizationPromptButton');
      });
    }

    public async isBetaInfoShown() {
      return await testSubjects.exists('betaVisInfo');
    }

    public async getBetaTypeLinks() {
      return await find.allByCssSelector('[data-vis-stage="beta"]');
    }

    public async getExperimentalTypeLinks() {
      return await find.allByCssSelector('[data-vis-stage="experimental"]');
    }

    public async isExperimentalInfoShown() {
      return await testSubjects.exists('experimentalVisInfo');
    }

    public async getExperimentalInfo() {
      return await testSubjects.find('experimentalVisInfo');
    }

    public async getSideEditorExists() {
      return await find.existsByCssSelector('.visEditor__collapsibleSidebar');
    }

    public async clickSavedSearch(savedSearchName: string) {
      await testSubjects.click(`savedObjectTitle${savedSearchName.split(' ').join('-')}`);
      await header.waitUntilLoadingHasFinished();
    }

    public async clickUnlinkSavedSearch() {
      await testSubjects.click('showUnlinkSavedSearchPopover');
      await testSubjects.click('unlinkSavedSearch');
      await header.waitUntilLoadingHasFinished();
    }

    public async ensureSavePanelOpen() {
      log.debug('ensureSavePanelOpen');
      await header.waitUntilLoadingHasFinished();
      const isOpen = await testSubjects.exists('savedObjectSaveModal', { timeout: 5000 });
      if (!isOpen) {
        await testSubjects.click('visualizeSaveButton');
      }
    }

    public async clickLoadSavedVisButton() {
      // TODO: Use a test subject selector once we rewrite breadcrumbs to accept each breadcrumb
      // element as a child instead of building the breadcrumbs dynamically.
      await find.clickByCssSelector('[href="#/"]');
    }

    public async loadSavedVisualization(vizName: string, { navigateToVisualize = true } = {}) {
      if (navigateToVisualize) {
        await this.clickLoadSavedVisButton();
      }
      await this.openSavedVisualization(vizName);
    }

    public async openSavedVisualization(vizName: string) {
      const dataTestSubj = `visListingTitleLink-${vizName.split(' ').join('-')}`;
      await testSubjects.click(dataTestSubj, 20000);
      await header.waitUntilLoadingHasFinished();
    }

    public async waitForVisualizationSavedToastGone() {
      await testSubjects.waitForDeleted('saveVisualizationSuccess');
    }

    public async clickLandingPageBreadcrumbLink() {
      log.debug('clickLandingPageBreadcrumbLink');
      await find.clickByCssSelector(`a[href="#${VisualizeConstants.LANDING_PAGE_PATH}"]`);
    }

    /**
     * Returns true if already on the landing page (that page doesn't have a link to itself).
     * @returns {Promise<boolean>}
     */
    public async onLandingPage() {
      log.debug(`VisualizePage.onLandingPage`);
      return await testSubjects.exists('visualizationLandingPage');
    }

    public async gotoLandingPage() {
      log.debug('VisualizePage.gotoLandingPage');
      const onPage = await this.onLandingPage();
      if (!onPage) {
        await retry.try(async () => {
          await this.clickLandingPageBreadcrumbLink();
          const onLandingPage = await this.onLandingPage();
          if (!onLandingPage) throw new Error('Not on the landing page.');
        });
      }
    }

    public async saveVisualization(vizName: string, saveModalArgs: VisualizeSaveModalArgs = {}) {
      await this.ensureSavePanelOpen();

      await this.setSaveModalValues(vizName, saveModalArgs);
      log.debug('Click Save Visualization button');

      await testSubjects.click('confirmSaveSavedObjectButton');

      // Confirm that the Visualization has actually been saved
      await testSubjects.existOrFail('saveVisualizationSuccess');
      const message = await common.closeToast();
      await header.waitUntilLoadingHasFinished();
      await common.waitForSaveModalToClose();

      return message;
    }

    public async setSaveModalValues(
      vizName: string,
      { saveAsNew, redirectToOrigin, addToDashboard, dashboardId }: VisualizeSaveModalArgs = {}
    ) {
      await testSubjects.setValue('savedObjectTitle', vizName);

      const saveAsNewCheckboxExists = await testSubjects.exists('saveAsNewCheckbox');
      if (saveAsNewCheckboxExists) {
        const state = saveAsNew ? 'check' : 'uncheck';
        log.debug('save as new checkbox exists. Setting its state to', state);
        await testSubjects.setEuiSwitch('saveAsNewCheckbox', state);
      }

      const redirectToOriginCheckboxExists = await testSubjects.exists('returnToOriginModeSwitch');
      if (redirectToOriginCheckboxExists) {
        const state = redirectToOrigin ? 'check' : 'uncheck';
        log.debug('redirect to origin checkbox exists. Setting its state to', state);
        await testSubjects.setEuiSwitch('returnToOriginModeSwitch', state);
      }

      const dashboardSelectorExists = await testSubjects.exists('add-to-dashboard-options');
      if (dashboardSelectorExists) {
        let option: DashboardPickerOption = 'add-to-library-option';
        if (addToDashboard) {
          option = dashboardId ? 'existing-dashboard-option' : 'new-dashboard-option';
        }
        log.debug('save modal dashboard selector, choosing option:', option);
        const dashboardSelector = await testSubjects.find('add-to-dashboard-options');
        const label = await dashboardSelector.findByCssSelector(`label[for="${option}"]`);
        await label.click();

        if (dashboardId) {
          // TODO - selecting an existing dashboard
        }
      }
    }

    public async saveVisualizationExpectSuccess(
      vizName: string,
      { saveAsNew, redirectToOrigin, addToDashboard, dashboardId }: VisualizeSaveModalArgs = {}
    ) {
      const saveMessage = await this.saveVisualization(vizName, {
        saveAsNew,
        redirectToOrigin,
        addToDashboard,
        dashboardId,
      });
      if (!saveMessage) {
        throw new Error(
          `Expected saveVisualization to respond with the saveMessage from the toast, got ${saveMessage}`
        );
      }
    }

    public async saveVisualizationExpectSuccessAndBreadcrumb(
      vizName: string,
      { saveAsNew = false, redirectToOrigin = false } = {}
    ) {
      await this.saveVisualizationExpectSuccess(vizName, { saveAsNew, redirectToOrigin });
      await retry.waitFor(
        'last breadcrumb to have new vis name',
        async () => (await globalNav.getLastBreadcrumb()) === vizName
      );
    }

    public async saveVisualizationAndReturn() {
      await header.waitUntilLoadingHasFinished();
      await testSubjects.existOrFail('visualizesaveAndReturnButton');
      await testSubjects.click('visualizesaveAndReturnButton');
    }

    public async linkedToOriginatingApp() {
      await header.waitUntilLoadingHasFinished();
      await testSubjects.existOrFail('visualizesaveAndReturnButton');
    }

    public async notLinkedToOriginatingApp() {
      await header.waitUntilLoadingHasFinished();
      await testSubjects.missingOrFail('visualizesaveAndReturnButton');
    }

    public async cancelAndReturn(showConfirmModal: boolean) {
      await header.waitUntilLoadingHasFinished();
      await testSubjects.existOrFail('visualizeCancelAndReturnButton');
      await testSubjects.click('visualizeCancelAndReturnButton');
      if (showConfirmModal) {
        await retry.waitFor(
          'confirm modal to show',
          async () => await testSubjects.exists('appLeaveConfirmModal')
        );
        await testSubjects.exists('confirmModalConfirmButton');
        await testSubjects.click('confirmModalConfirmButton');
      }
    }
  }

  return new VisualizePage();
}