[Time to Visualize] Adds functional tests for linking/unlinking panel…

… from embeddable library (#89612)
elastic · Feb 8, 2021 · 3cf00d2 · 3cf00d2
1 parent 3ef3e93
commit 3cf00d2
Show file tree

Hide file tree

Showing 8 changed files with 258 additions and 1 deletion.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -91,6 +91,7 @@
 /src/plugins/dashboard/ @elastic/kibana-presentation
 /src/plugins/input_control_vis/ @elastic/kibana-presentation
 /src/plugins/vis_type_markdown/ @elastic/kibana-presentation
+/test/functional/apps/dashboard/  @elastic/kibana-presentation
 /x-pack/plugins/canvas/  @elastic/kibana-presentation
 /x-pack/plugins/dashboard_enhanced/ @elastic/kibana-presentation
 /x-pack/test/functional/apps/canvas/  @elastic/kibana-presentation

diff --git a/src/plugins/dashboard/public/application/actions/add_to_library_action.tsx b/src/plugins/dashboard/public/application/actions/add_to_library_action.tsx
@@ -22,7 +22,7 @@ import { NotificationsStart } from '../../services/core';
 import { dashboardAddToLibraryAction } from '../../dashboard_strings';
 import { DashboardPanelState, DASHBOARD_CONTAINER_TYPE, DashboardContainer } from '..';
 
-export const ACTION_ADD_TO_LIBRARY = 'addToFromLibrary';
+export const ACTION_ADD_TO_LIBRARY = 'saveToLibrary';
 
 export interface AddToLibraryActionContext {
   embeddable: IEmbeddable;

diff --git a/test/functional/apps/dashboard/embeddable_library.ts b/test/functional/apps/dashboard/embeddable_library.ts
@@ -0,0 +1,111 @@
+/*
+ * 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 expect from '@kbn/expect';
+
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const PageObjects = getPageObjects(['dashboard', 'header', 'visualize', 'settings', 'common']);
+  const esArchiver = getService('esArchiver');
+  const find = getService('find');
+  const kibanaServer = getService('kibanaServer');
+  const testSubjects = getService('testSubjects');
+  const dashboardAddPanel = getService('dashboardAddPanel');
+  const panelActions = getService('dashboardPanelActions');
+
+  describe('embeddable library', () => {
+    before(async () => {
+      await esArchiver.load('dashboard/current/kibana');
+      await kibanaServer.uiSettings.replace({
+        defaultIndex: '0bf35f60-3dc9-11e8-8660-4d65aa086b3c',
+      });
+      await PageObjects.common.navigateToApp('dashboard');
+      await PageObjects.dashboard.preserveCrossAppState();
+      await PageObjects.dashboard.clickNewDashboard();
+    });
+
+    it('unlink visualize panel from embeddable library', async () => {
+      // add heatmap panel from library
+      await dashboardAddPanel.clickOpenAddPanel();
+      await dashboardAddPanel.filterEmbeddableNames('Rendering Test: heatmap');
+      await find.clickByButtonText('Rendering Test: heatmap');
+      await dashboardAddPanel.closeAddPanel();
+
+      const originalPanel = await testSubjects.find('embeddablePanelHeading-RenderingTest:heatmap');
+      await panelActions.unlinkFromLibary(originalPanel);
+      await testSubjects.existOrFail('unlinkPanelSuccess');
+
+      const updatedPanel = await testSubjects.find('embeddablePanelHeading-RenderingTest:heatmap');
+      const libraryActionExists = await testSubjects.descendantExists(
+        'embeddablePanelNotification-ACTION_LIBRARY_NOTIFICATION',
+        updatedPanel
+      );
+      expect(libraryActionExists).to.be(false);
+
+      await dashboardAddPanel.clickOpenAddPanel();
+      await dashboardAddPanel.filterEmbeddableNames('Rendering Test: heatmap');
+      await find.existsByLinkText('Rendering Test: heatmap');
+      await dashboardAddPanel.closeAddPanel();
+    });
+
+    it('save visualize panel to embeddable library', async () => {
+      const originalPanel = await testSubjects.find('embeddablePanelHeading-RenderingTest:heatmap');
+      await panelActions.saveToLibrary('Rendering Test: heatmap - copy', originalPanel);
+      await testSubjects.existOrFail('addPanelToLibrarySuccess');
+
+      const updatedPanel = await testSubjects.find(
+        'embeddablePanelHeading-RenderingTest:heatmap-copy'
+      );
+      const libraryActionExists = await testSubjects.descendantExists(
+        'embeddablePanelNotification-ACTION_LIBRARY_NOTIFICATION',
+        updatedPanel
+      );
+      expect(libraryActionExists).to.be(true);
+    });
+
+    it('unlink map panel from embeddable library', async () => {
+      // add map panel from library
+      await dashboardAddPanel.clickOpenAddPanel();
+      await dashboardAddPanel.filterEmbeddableNames('Rendering Test: geo map');
+      await find.clickByButtonText('Rendering Test: geo map');
+      await dashboardAddPanel.closeAddPanel();
+
+      const originalPanel = await testSubjects.find('embeddablePanelHeading-RenderingTest:geomap');
+      await panelActions.unlinkFromLibary(originalPanel);
+      await testSubjects.existOrFail('unlinkPanelSuccess');
+
+      const updatedPanel = await testSubjects.find('embeddablePanelHeading-RenderingTest:geomap');
+      const libraryActionExists = await testSubjects.descendantExists(
+        'embeddablePanelNotification-ACTION_LIBRARY_NOTIFICATION',
+        updatedPanel
+      );
+      expect(libraryActionExists).to.be(false);
+
+      await dashboardAddPanel.clickOpenAddPanel();
+      await dashboardAddPanel.filterEmbeddableNames('Rendering Test: geo map');
+      await find.existsByLinkText('Rendering Test: geo map');
+      await dashboardAddPanel.closeAddPanel();
+    });
+
+    it('save map panel to embeddable library', async () => {
+      const originalPanel = await testSubjects.find('embeddablePanelHeading-RenderingTest:geomap');
+      await panelActions.saveToLibrary('Rendering Test: geo map - copy', originalPanel);
+      await testSubjects.existOrFail('addPanelToLibrarySuccess');
+
+      const updatedPanel = await testSubjects.find(
+        'embeddablePanelHeading-RenderingTest:geomap-copy'
+      );
+      const libraryActionExists = await testSubjects.descendantExists(
+        'embeddablePanelNotification-ACTION_LIBRARY_NOTIFICATION',
+        updatedPanel
+      );
+      expect(libraryActionExists).to.be(true);
+    });
+  });
+}
diff --git a/test/functional/apps/dashboard/index.ts b/test/functional/apps/dashboard/index.ts
@@ -81,6 +81,7 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) {
       // The dashboard_snapshot test below requires the timestamped URL which breaks the view_edit test.
       // If we don't use the timestamp in the URL, the colors in the charts will be different.
       loadTestFile(require.resolve('./dashboard_snapshots'));
+      loadTestFile(require.resolve('./embeddable_library'));
     });
 
     // Each of these tests call initTests themselves, the way it was originally written.  The above tests only load

diff --git a/test/functional/services/dashboard/panel_actions.ts b/test/functional/services/dashboard/panel_actions.ts
@@ -17,6 +17,8 @@ const TOGGLE_EXPAND_PANEL_DATA_TEST_SUBJ = 'embeddablePanelAction-togglePanel';
 const CUSTOMIZE_PANEL_DATA_TEST_SUBJ = 'embeddablePanelAction-ACTION_CUSTOMIZE_PANEL';
 const OPEN_CONTEXT_MENU_ICON_DATA_TEST_SUBJ = 'embeddablePanelToggleMenuIcon';
 const OPEN_INSPECTOR_TEST_SUBJ = 'embeddablePanelAction-openInspector';
+const LIBRARY_NOTIFICATION_TEST_SUBJ = 'embeddablePanelNotification-ACTION_LIBRARY_NOTIFICATION';
+const SAVE_TO_LIBRARY_TEST_SUBJ = 'embeddablePanelAction-saveToLibrary';
 
 export function DashboardPanelActionsProvider({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
@@ -170,6 +172,29 @@ export function DashboardPanelActionsProvider({ getService, getPageObjects }: Ft
       await testSubjects.click(OPEN_INSPECTOR_TEST_SUBJ);
     }
 
+    async unlinkFromLibary(parent?: WebElementWrapper) {
+      log.debug('unlinkFromLibrary');
+      const libraryNotification = parent
+        ? await testSubjects.findDescendant(LIBRARY_NOTIFICATION_TEST_SUBJ, parent)
+        : await testSubjects.find(LIBRARY_NOTIFICATION_TEST_SUBJ);
+      await libraryNotification.click();
+      await testSubjects.click('libraryNotificationUnlinkButton');
+    }
+
+    async saveToLibrary(newTitle: string, parent?: WebElementWrapper) {
+      log.debug('saveToLibrary');
+      await this.openContextMenu(parent);
+      const exists = await testSubjects.exists(SAVE_TO_LIBRARY_TEST_SUBJ);
+      if (!exists) {
+        await this.clickContextMenuMoreItem();
+      }
+      await testSubjects.click(SAVE_TO_LIBRARY_TEST_SUBJ);
+      await testSubjects.setValue('savedObjectTitle', newTitle, {
+        clearWithKeyboard: true,
+      });
+      await testSubjects.click('confirmSaveSavedObjectButton');
+    }
+
     async expectExistsRemovePanelAction() {
       log.debug('expectExistsRemovePanelAction');
       await this.expectExistsPanelAction(REMOVE_PANEL_DATA_TEST_SUBJ);

diff --git a/x-pack/test/functional/apps/lens/dashboard.ts b/x-pack/test/functional/apps/lens/dashboard.ts
@@ -156,5 +156,43 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await panelActions.clickContextMenuMoreItem();
       await testSubjects.existOrFail(ACTION_TEST_SUBJ);
     });
+
+    it('unlink lens panel from embeddable library', async () => {
+      await PageObjects.common.navigateToApp('dashboard');
+      await PageObjects.dashboard.clickNewDashboard();
+      await dashboardAddPanel.clickOpenAddPanel();
+      await dashboardAddPanel.filterEmbeddableNames('lnsPieVis');
+      await find.clickByButtonText('lnsPieVis');
+      await dashboardAddPanel.closeAddPanel();
+
+      const originalPanel = await testSubjects.find('embeddablePanelHeading-lnsPieVis');
+      await panelActions.unlinkFromLibary(originalPanel);
+      await testSubjects.existOrFail('unlinkPanelSuccess');
+
+      const updatedPanel = await testSubjects.find('embeddablePanelHeading-lnsPieVis');
+      const libraryActionExists = await testSubjects.descendantExists(
+        'embeddablePanelNotification-ACTION_LIBRARY_NOTIFICATION',
+        updatedPanel
+      );
+      expect(libraryActionExists).to.be(false);
+    });
+
+    it('save lens panel to embeddable library', async () => {
+      const originalPanel = await testSubjects.find('embeddablePanelHeading-lnsPieVis');
+      await panelActions.saveToLibrary('lnsPieVis - copy', originalPanel);
+      await testSubjects.click('confirmSaveSavedObjectButton');
+      await testSubjects.existOrFail('addPanelToLibrarySuccess');
+
+      const updatedPanel = await testSubjects.find('embeddablePanelHeading-lnsPieVis-copy');
+      const libraryActionExists = await testSubjects.descendantExists(
+        'embeddablePanelNotification-ACTION_LIBRARY_NOTIFICATION',
+        updatedPanel
+      );
+      expect(libraryActionExists).to.be(true);
+
+      await dashboardAddPanel.clickOpenAddPanel();
+      await dashboardAddPanel.filterEmbeddableNames('lnsPieVis');
+      await find.existsByLinkText('lnsPieVis');
+    });
   });
 }
diff --git a/x-pack/test/functional/apps/maps/embeddable/embeddable_library.js b/x-pack/test/functional/apps/maps/embeddable/embeddable_library.js
@@ -0,0 +1,80 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import expect from '@kbn/expect';
+
+export default function ({ getPageObjects, getService }) {
+  const find = getService('find');
+  const testSubjects = getService('testSubjects');
+  const PageObjects = getPageObjects(['common', 'dashboard', 'header', 'maps', 'visualize']);
+  const kibanaServer = getService('kibanaServer');
+  const security = getService('security');
+  const dashboardAddPanel = getService('dashboardAddPanel');
+  const dashboardPanelActions = getService('dashboardPanelActions');
+  const dashboardVisualizations = getService('dashboardVisualizations');
+
+  describe('maps in embeddable library', () => {
+    before(async () => {
+      await security.testUser.setRoles(
+        [
+          'test_logstash_reader',
+          'global_maps_all',
+          'geoshape_data_reader',
+          'global_dashboard_all',
+          'meta_for_geoshape_data_reader',
+        ],
+        false
+      );
+      await kibanaServer.uiSettings.replace({
+        defaultIndex: 'c698b940-e149-11e8-a35a-370a8516603a',
+      });
+      await PageObjects.common.navigateToApp('dashboard');
+      await PageObjects.dashboard.clickNewDashboard();
+      await dashboardAddPanel.clickCreateNewLink();
+      await dashboardVisualizations.ensureNewVisualizationDialogIsShowing();
+      await PageObjects.visualize.clickMapsApp();
+      await PageObjects.header.waitUntilLoadingHasFinished();
+      await PageObjects.maps.waitForLayersToLoad();
+      await PageObjects.maps.clickSaveAndReturnButton();
+      await PageObjects.dashboard.waitForRenderComplete();
+    });
+
+    after(async () => {
+      await security.testUser.restoreDefaults();
+    });
+
+    it('save map panel to embeddable library', async () => {
+      await dashboardPanelActions.saveToLibrary('embeddable library map');
+      await testSubjects.existOrFail('addPanelToLibrarySuccess');
+
+      const mapPanel = await testSubjects.find('embeddablePanelHeading-embeddablelibrarymap');
+      const libraryActionExists = await testSubjects.descendantExists(
+        'embeddablePanelNotification-ACTION_LIBRARY_NOTIFICATION',
+        mapPanel
+      );
+      expect(libraryActionExists).to.be(true);
+    });
+
+    it('unlink map panel from embeddable library', async () => {
+      const originalPanel = await testSubjects.find('embeddablePanelHeading-embeddablelibrarymap');
+      await dashboardPanelActions.unlinkFromLibary(originalPanel);
+      await testSubjects.existOrFail('unlinkPanelSuccess');
+
+      const updatedPanel = await testSubjects.find('embeddablePanelHeading-embeddablelibrarymap');
+      const libraryActionExists = await testSubjects.descendantExists(
+        'embeddablePanelNotification-ACTION_LIBRARY_NOTIFICATION',
+        updatedPanel
+      );
+      expect(libraryActionExists).to.be(false);
+
+      await dashboardAddPanel.clickOpenAddPanel();
+      await dashboardAddPanel.filterEmbeddableNames('embeddable library map');
+      await find.existsByLinkText('embeddable library map');
+      await dashboardAddPanel.closeAddPanel();
+    });
+  });
+}
diff --git a/x-pack/test/functional/apps/maps/embeddable/index.js b/x-pack/test/functional/apps/maps/embeddable/index.js
@@ -9,6 +9,7 @@ export default function ({ loadTestFile }) {
   describe('embeddable', function () {
     loadTestFile(require.resolve('./save_and_return'));
     loadTestFile(require.resolve('./dashboard'));
+    loadTestFile(require.resolve('./embeddable_library'));
     loadTestFile(require.resolve('./embeddable_state'));
     loadTestFile(require.resolve('./tooltip_filter_actions'));
   });