Suggestions: Add intermediate state to avoid unexpected saved states (#115709)

* Suggestions: Add intermediate state to avoid unexpected saved states

* cleanup

* update and add e2es to confirm behavior

* fix some of the change dispatch

* codeowners

* fix js error that this exposed

* Apply suggestion from @fastfrwrd

e2e-playwright/smoke-tests-suite/panels.spec.ts

@@ -1,4 +1,4 @@
-import { BootData } from '@grafana/data';
+import { BootData, PanelPluginMeta } from '@grafana/data';
 import { test, expect } from '@grafana/plugin-e2e';
 
 test.describe(
@@ -22,7 +22,7 @@ test.describe(
       await dashboardPage.addPanel();
 
       // Get panel types from window object
-      const panelTypes = await page.evaluate(() => {
+      const panelTypes: PanelPluginMeta[] = await page.evaluate(() => {
         // @grafana/plugin-e2e doesn't export the full bootdata config
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
         const win = window as typeof window & { grafanaBootData: BootData };

e2e-playwright/various-suite/visualization-suggestions-v2.spec.ts

@@ -0,0 +1,178 @@
+import { test, expect } from '@grafana/plugin-e2e';
+
+test.use({
+  featureToggles: {
+    newVizSuggestions: true,
+    externalVizSuggestions: false,
+  },
+  viewport: {
+    width: 800,
+    height: 1500,
+  },
+});
+
+test.describe(
+  'Visualization suggestions v2',
+  {
+    tag: ['@various', '@suggestions'],
+  },
+  () => {
+    test('Should be shown and clickable', async ({ selectors, gotoPanelEditPage }) => {
+      // Open dashboard with edit panel
+      const panelEditPage = await gotoPanelEditPage({
+        dashboard: {
+          uid: 'aBXrJ0R7z',
+        },
+        id: '9',
+      });
+
+      await expect(
+        panelEditPage.getByGrafanaSelector(selectors.components.Panels.Panel.content).locator('.uplot'),
+        'time series to be rendered inside panel'
+      ).toBeVisible();
+
+      // Try visualization suggestions
+      await panelEditPage.getByGrafanaSelector(selectors.components.PanelEditor.toggleVizPicker).click();
+      await panelEditPage.getByGrafanaSelector(selectors.components.Tab.title('Suggestions')).click();
+
+      // Verify we see suggestions
+      await expect(
+        panelEditPage.getByGrafanaSelector(selectors.components.VisualizationPreview.card('Line chart')),
+        'line chart suggestion to be rendered'
+      ).toBeVisible();
+
+      // TODO: in this part of the test, we will change the query and the transforms and observe suggestions being updated.
+
+      // Select a visualization and verify table header is visible from preview
+      await panelEditPage.getByGrafanaSelector(selectors.components.VisualizationPreview.card('Table')).click();
+      await expect(
+        panelEditPage
+          .getByGrafanaSelector(selectors.components.Panels.Panel.content)
+          .getByRole('grid')
+          .getByRole('row')
+          .first(),
+        'table to be rendered inside panel'
+      ).toBeVisible();
+      await expect(
+        panelEditPage.getByGrafanaSelector(selectors.components.NavToolbar.editDashboard.discardChangesButton),
+        'discard changes button disabled since panel has not yet changed'
+      ).toBeDisabled();
+
+      // apply the suggestion and verify panel options are visible
+      await panelEditPage.getByGrafanaSelector(selectors.components.VisualizationPreview.confirm('Table')).click();
+      await expect(
+        panelEditPage
+          .getByGrafanaSelector(selectors.components.Panels.Panel.content)
+          .getByRole('grid')
+          .getByRole('row')
+          .first(),
+        'table to be rendered inside panel'
+      ).toBeVisible();
+      await expect(
+        panelEditPage.getByGrafanaSelector(selectors.components.PanelEditor.OptionsPane.header),
+        'options pane to be rendered'
+      ).toBeVisible();
+      await expect(
+        panelEditPage.getByGrafanaSelector(selectors.components.NavToolbar.editDashboard.discardChangesButton),
+        'discard changes button enabled now that panel is dirty'
+      ).toBeEnabled();
+    });
+
+    test('should not apply suggestion if you navigate toggle the viz picker back off', async ({
+      selectors,
+      gotoPanelEditPage,
+    }) => {
+      // Open dashboard with edit panel
+      const panelEditPage = await gotoPanelEditPage({
+        dashboard: {
+          uid: 'aBXrJ0R7z',
+        },
+        id: '9',
+      });
+
+      await expect(
+        panelEditPage.getByGrafanaSelector(selectors.components.Panels.Panel.content).locator('.uplot'),
+        'time series to be rendered inside panel;'
+      ).toBeVisible();
+
+      // Try visualization suggestions
+      await panelEditPage.getByGrafanaSelector(selectors.components.PanelEditor.toggleVizPicker).click();
+      await panelEditPage.getByGrafanaSelector(selectors.components.Tab.title('Suggestions')).click();
+
+      // Verify we see suggestions
+      await expect(
+        panelEditPage.getByGrafanaSelector(selectors.components.VisualizationPreview.card('Line chart')),
+        'line chart suggestion to be rendered'
+      ).toBeVisible();
+
+      // Select a visualization
+      await panelEditPage.getByGrafanaSelector(selectors.components.VisualizationPreview.card('Table')).click();
+      await expect(
+        panelEditPage
+          .getByGrafanaSelector(selectors.components.Panels.Panel.content)
+          .getByRole('grid')
+          .getByRole('row')
+          .first(),
+        'table to be rendered inside panel'
+      ).toBeVisible();
+      await expect(
+        panelEditPage.getByGrafanaSelector(selectors.components.NavToolbar.editDashboard.discardChangesButton)
+      ).toBeDisabled();
+
+      // Verify that toggling the viz picker back cancels the suggestion, restores the line chart, shows panel options
+      await panelEditPage.getByGrafanaSelector(selectors.components.PanelEditor.toggleVizPicker).click();
+      await expect(
+        panelEditPage.getByGrafanaSelector(selectors.components.Panels.Panel.content).locator('.uplot'),
+        'time series to be rendered inside panel'
+      ).toBeVisible();
+      await expect(
+        panelEditPage.getByGrafanaSelector(selectors.components.PanelEditor.OptionsPane.header),
+        'options pane to be rendered'
+      ).toBeVisible();
+      await expect(
+        panelEditPage.getByGrafanaSelector(selectors.components.NavToolbar.editDashboard.discardChangesButton),
+        'discard changes button is still disabled since no changes were applied'
+      ).toBeDisabled();
+    });
+
+    test('should not apply suggestion if you navigate back to the dashboard', async ({
+      page,
+      selectors,
+      gotoPanelEditPage,
+    }) => {
+      // Open dashboard with edit panel
+      const panelEditPage = await gotoPanelEditPage({
+        dashboard: {
+          uid: 'aBXrJ0R7z',
+        },
+        id: '9',
+      });
+
+      // Try visualization suggestions
+      await panelEditPage.getByGrafanaSelector(selectors.components.PanelEditor.toggleVizPicker).click();
+      await panelEditPage.getByGrafanaSelector(selectors.components.Tab.title('Suggestions')).click();
+
+      // Verify we see suggestions
+      await expect(
+        panelEditPage.getByGrafanaSelector(selectors.components.VisualizationPreview.card('Line chart')),
+        'line chart suggestion to be rendered'
+      ).toBeVisible();
+
+      // Select a visualization
+      await panelEditPage.getByGrafanaSelector(selectors.components.VisualizationPreview.card('Table')).click();
+      await expect(page.getByRole('grid').getByRole('row').first(), 'table row to be rendered').toBeVisible();
+      await expect(
+        panelEditPage.getByGrafanaSelector(selectors.components.NavToolbar.editDashboard.discardChangesButton)
+      ).toBeDisabled();
+
+      // Verify that navigating back to the dashboard cancels the suggestion and restores the line chart.
+      await panelEditPage
+        .getByGrafanaSelector(selectors.components.NavToolbar.editDashboard.backToDashboardButton)
+        .click();
+      await expect(
+        page.locator('[data-viz-panel-key="panel-9"]').locator('.uplot'),
+        'time series to be rendered inside the panel'
+      ).toBeVisible();
+    });
+  }
+);

e2e-playwright/various-suite/visualization-suggestions.spec.ts

@@ -3,7 +3,7 @@ import { test, expect } from '@grafana/plugin-e2e';
 test.describe(
   'Visualization suggestions',
   {
-    tag: ['@various'],
+    tag: ['@various', '@suggestions'],
   },
   () => {
     test('Should be shown and clickable', async ({ page, selectors, gotoPanelEditPage }) => {