[Time to Visualize] Add functional tests for adding visualizations fr…

…om Visualize, Lens, and Maps and adjust capabilities for new modal (#89245)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

src/plugins/presentation_util/public/components/dashboard_picker.tsx

@@ -64,6 +64,7 @@ export function DashboardPicker(props: DashboardPickerProps) {
 
   return (
     <EuiComboBox
+      data-test-subj="dashboardPickerInput"
       placeholder={i18n.translate('presentationUtil.dashboardPicker.searchDashboardPlaceholder', {
         defaultMessage: 'Search dashboards...',
       })}

src/plugins/presentation_util/public/components/saved_object_save_modal_dashboard.tsx

@@ -40,14 +40,10 @@ export function SavedObjectSaveModalDashboard(props: SaveModalDashboardProps) {
   const initialCopyOnSave = !Boolean(documentId);
 
   const { capabilities } = pluginServices.getHooks();
-  const {
-    canAccessDashboards,
-    canCreateNewDashboards,
-    canEditDashboards,
-  } = capabilities.useService();
-
-  const disableDashboardOptions =
-    !canAccessDashboards() || (!canCreateNewDashboards && !canEditDashboards);
+  const { canAccessDashboards, canCreateNewDashboards } = capabilities.useService();
+
+  // Disable the dashboard options if the user can't access dashboards or if they're read-only
+  const disableDashboardOptions = !canAccessDashboards() || !canCreateNewDashboards();
 
   const [dashboardOption, setDashboardOption] = useState<'new' | 'existing' | null>(
     documentId || disableDashboardOptions ? null : 'existing'

src/plugins/presentation_util/public/components/saved_object_save_modal_dashboard_selector.tsx

@@ -21,7 +21,6 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 
-import { pluginServices } from '../services';
 import { DashboardPicker, DashboardPickerProps } from './dashboard_picker';
 
 import './saved_object_save_modal_dashboard.scss';
@@ -37,9 +36,6 @@ export interface SaveModalDashboardSelectorProps {
 
 export function SaveModalDashboardSelector(props: SaveModalDashboardSelectorProps) {
   const { documentId, onSelectDashboard, dashboardOption, onChange, copyOnSave } = props;
-  const { capabilities } = pluginServices.getHooks();
-  const { canCreateNewDashboards, canEditDashboards } = capabilities.useService();
-
   const isDisabled = !copyOnSave && !!documentId;
 
   return (
@@ -70,50 +66,44 @@ export function SaveModalDashboardSelector(props: SaveModalDashboardSelectorProp
       >
         <EuiPanel color="subdued" hasShadow={false} data-test-subj="add-to-dashboard-options">
           <div>
-            {canEditDashboards() && (
-              <>
-                {' '}
-                <EuiRadio
-                  checked={dashboardOption === 'existing'}
-                  id="existing-dashboard-option"
-                  name="dashboard-option"
-                  label={i18n.translate(
-                    'presentationUtil.saveModalDashboard.existingDashboardOptionLabel',
-                    {
-                      defaultMessage: 'Existing',
-                    }
-                  )}
-                  onChange={() => onChange('existing')}
-                  disabled={isDisabled}
-                />
-                <div className="savAddDashboard__searchDashboards">
-                  <DashboardPicker
-                    isDisabled={dashboardOption !== 'existing'}
-                    onChange={onSelectDashboard}
-                  />
-                </div>
-                <EuiSpacer size="s" />
-              </>
-            )}
-            {canCreateNewDashboards() && (
-              <>
-                {' '}
-                <EuiRadio
-                  checked={dashboardOption === 'new'}
-                  id="new-dashboard-option"
-                  name="dashboard-option"
-                  label={i18n.translate(
-                    'presentationUtil.saveModalDashboard.newDashboardOptionLabel',
-                    {
-                      defaultMessage: 'New',
-                    }
-                  )}
-                  onChange={() => onChange('new')}
-                  disabled={isDisabled}
+            <>
+              <EuiRadio
+                checked={dashboardOption === 'existing'}
+                id="existing-dashboard-option"
+                name="dashboard-option"
+                label={i18n.translate(
+                  'presentationUtil.saveModalDashboard.existingDashboardOptionLabel',
+                  {
+                    defaultMessage: 'Existing',
+                  }
+                )}
+                onChange={() => onChange('existing')}
+                disabled={isDisabled}
+              />
+              <div className="savAddDashboard__searchDashboards">
+                <DashboardPicker
+                  isDisabled={dashboardOption !== 'existing'}
+                  onChange={onSelectDashboard}
                 />
-                <EuiSpacer size="s" />
-              </>
-            )}
+              </div>
+              <EuiSpacer size="s" />
+            </>
+            <>
+              <EuiRadio
+                checked={dashboardOption === 'new'}
+                id="new-dashboard-option"
+                name="dashboard-option"
+                label={i18n.translate(
+                  'presentationUtil.saveModalDashboard.newDashboardOptionLabel',
+                  {
+                    defaultMessage: 'New',
+                  }
+                )}
+                onChange={() => onChange('new')}
+                disabled={isDisabled}
+              />
+              <EuiSpacer size="s" />
+            </>
             <EuiRadio
               checked={dashboardOption === null}
               id="add-to-library-option"

src/plugins/presentation_util/public/services/index.ts

@@ -20,7 +20,6 @@ export interface PresentationDashboardsService {
 export interface PresentationCapabilitiesService {
   canAccessDashboards: () => boolean;
   canCreateNewDashboards: () => boolean;
-  canEditDashboards: () => boolean;
 }
 
 export interface PresentationUtilServices {

src/plugins/presentation_util/public/services/kibana/capabilities.ts

@@ -21,6 +21,5 @@ export const capabilitiesServiceFactory: CapabilitiesServiceFactory = ({ coreSta
   return {
     canAccessDashboards: () => Boolean(dashboard.show),
     canCreateNewDashboards: () => Boolean(dashboard.createNew),
-    canEditDashboards: () => !Boolean(dashboard.hideWriteControls),
   };
 };

src/plugins/visualize/public/application/components/visualize_listing.tsx

@@ -149,6 +149,7 @@ export const VisualizeListing = () => {
   const calloutMessage = (
     <>
       <FormattedMessage
+        data-test-subj="visualize-dashboard-flow-prompt"
         id="visualize.visualizeListingDashboardFlowDescription"
         defaultMessage="Building a dashboard? Create content directly from the {dashboardApp} using a new integrated workflow."
         values={{

test/functional/apps/visualize/_add_to_dashboard.ts

@@ -0,0 +1,147 @@
+/*
+ * 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 'test/functional/ftr_provider_context';
+import expect from '@kbn/expect';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const dashboardExpect = getService('dashboardExpect');
+  const testSubjects = getService('testSubjects');
+  const listingTable = getService('listingTable');
+
+  const PageObjects = getPageObjects([
+    'common',
+    'dashboard',
+    'header',
+    'visualize',
+    'visEditor',
+    'discover',
+    'timePicker',
+    'timeToVisualize',
+  ]);
+
+  describe('Add to Dashboard', function describeIndexTests() {
+    it('adding a new metric to a new dashboard', async function () {
+      await PageObjects.visualize.navigateToNewAggBasedVisualization();
+      await PageObjects.visualize.clickMetric();
+      await PageObjects.visualize.clickNewSearch();
+      await PageObjects.timePicker.setDefaultAbsoluteRange();
+
+      await testSubjects.click('visualizeSaveButton');
+
+      await PageObjects.timeToVisualize.saveFromModal('My New Vis 1', {
+        addToDashboard: 'new',
+      });
+
+      await PageObjects.dashboard.waitForRenderComplete();
+      await dashboardExpect.metricValuesExist(['14,004']);
+      const panelCount = await PageObjects.dashboard.getPanelCount();
+      expect(panelCount).to.eql(1);
+
+      await PageObjects.timeToVisualize.resetNewDashboard();
+    });
+
+    it('adding a existing metric to a new dashboard', async function () {
+      await PageObjects.visualize.navigateToNewAggBasedVisualization();
+      await PageObjects.visualize.clickMetric();
+      await PageObjects.visualize.clickNewSearch();
+      await PageObjects.timePicker.setDefaultAbsoluteRange();
+
+      await testSubjects.click('visualizeSaveButton');
+
+      // Save this new viz to library
+      await PageObjects.timeToVisualize.saveFromModal('My New Vis 1', {
+        addToDashboard: null,
+      });
+
+      await testSubjects.click('visualizeSaveButton');
+
+      // All the options should be disabled
+      await PageObjects.timeToVisualize.ensureDashboardOptionsAreDisabled();
+
+      // Save a new copy of this viz to a new dashboard
+      await PageObjects.timeToVisualize.saveFromModal('My New Vis 1 Copy', {
+        addToDashboard: 'new',
+        saveAsNew: true,
+      });
+
+      await PageObjects.dashboard.waitForRenderComplete();
+      await dashboardExpect.metricValuesExist(['14,004']);
+      const panelCount = await PageObjects.dashboard.getPanelCount();
+      expect(panelCount).to.eql(1);
+
+      await PageObjects.timeToVisualize.resetNewDashboard();
+    });
+
+    it('adding a new metric to an existing dashboard', async function () {
+      await PageObjects.common.navigateToApp('dashboard');
+
+      await PageObjects.dashboard.clickNewDashboard();
+      await PageObjects.dashboard.addVisualizations(['Visualization AreaChart']);
+      await PageObjects.dashboard.saveDashboard('My Wonderful Dashboard');
+      await PageObjects.dashboard.gotoDashboardLandingPage();
+      await listingTable.searchAndExpectItemsCount('dashboard', 'My Wonderful Dashboard', 1);
+
+      await PageObjects.visualize.navigateToNewAggBasedVisualization();
+      await PageObjects.visualize.clickMetric();
+      await PageObjects.visualize.clickNewSearch();
+      await PageObjects.timePicker.setDefaultAbsoluteRange();
+
+      await testSubjects.click('visualizeSaveButton');
+
+      await PageObjects.timeToVisualize.saveFromModal('My New Vis 2', {
+        addToDashboard: 'existing',
+        dashboardId: 'My Wonderful Dashboard',
+      });
+
+      await PageObjects.dashboard.waitForRenderComplete();
+      await dashboardExpect.metricValuesExist(['14,004']);
+      const panelCount = await PageObjects.dashboard.getPanelCount();
+      expect(panelCount).to.eql(2);
+    });
+
+    it('adding a existing metric to an existing dashboard', async function () {
+      await PageObjects.common.navigateToApp('dashboard');
+
+      await PageObjects.dashboard.clickNewDashboard();
+      await PageObjects.dashboard.addVisualizations(['Visualization AreaChart']);
+      await PageObjects.dashboard.saveDashboard('My Very Cool Dashboard');
+      await PageObjects.dashboard.gotoDashboardLandingPage();
+      await listingTable.searchAndExpectItemsCount('dashboard', 'My Very Cool Dashboard', 1);
+
+      await PageObjects.visualize.navigateToNewAggBasedVisualization();
+      await PageObjects.visualize.clickMetric();
+      await PageObjects.visualize.clickNewSearch();
+      await PageObjects.timePicker.setDefaultAbsoluteRange();
+
+      await testSubjects.click('visualizeSaveButton');
+
+      // Save this new viz to library
+      await PageObjects.timeToVisualize.saveFromModal('My New Vis 2', {
+        addToDashboard: null,
+      });
+
+      await testSubjects.click('visualizeSaveButton');
+
+      // All the options should be disabled
+      await PageObjects.timeToVisualize.ensureDashboardOptionsAreDisabled();
+
+      // Save a new copy of this viz to an existing dashboard
+      await PageObjects.timeToVisualize.saveFromModal('My New Vis 2 Copy', {
+        addToDashboard: 'existing',
+        dashboardId: 'My Very Cool Dashboard',
+        saveAsNew: true,
+      });
+
+      await PageObjects.dashboard.waitForRenderComplete();
+      await dashboardExpect.metricValuesExist(['14,004']);
+      const panelCount = await PageObjects.dashboard.getPanelCount();
+      expect(panelCount).to.eql(2);
+    });
+  });
+}

test/functional/apps/visualize/index.ts

@@ -102,6 +102,7 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) {
       loadTestFile(require.resolve('./_lab_mode'));
       loadTestFile(require.resolve('./_linked_saved_searches'));
       loadTestFile(require.resolve('./_visualize_listing'));
+      loadTestFile(require.resolve('./_add_to_dashboard.ts'));
 
       if (isOss) {
         loadTestFile(require.resolve('./_tile_map'));

test/functional/page_objects/index.ts

@@ -25,6 +25,7 @@ import { VisualizePageProvider } from './visualize_page';
 import { VisualizeEditorPageProvider } from './visualize_editor_page';
 import { VisualizeChartPageProvider } from './visualize_chart_page';
 import { TileMapPageProvider } from './tile_map_page';
+import { TimeToVisualizePageProvider } from './time_to_visualize_page';
 import { TagCloudPageProvider } from './tag_cloud_page';
 import { VegaChartPageProvider } from './vega_chart_page';
 import { SavedObjectsPageProvider } from './management/saved_objects_page';
@@ -51,6 +52,7 @@ export const pageObjects = {
   visEditor: VisualizeEditorPageProvider,
   visChart: VisualizeChartPageProvider,
   tileMap: TileMapPageProvider,
+  timeToVisualize: TimeToVisualizePageProvider,
   tagCloud: TagCloudPageProvider,
   vegaChart: VegaChartPageProvider,
   savedObjects: SavedObjectsPageProvider,