Dashboard: Enable feature toggle emptyDashboardPage by default (#65464)

* enable FF emptyDashboardPage by default

* fix smoke test for creating a panel after enabling FF emptyDashboardPage by default

docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md

@@ -30,6 +30,7 @@ Some stable features are enabled by default. You can disable a stable feature by
 | `topnav`                            | Enables new top navigation and page layouts                                                                                                                                  | Yes                |
 | `cloudWatchCrossAccountQuerying`    | Enables cross-account querying in CloudWatch datasources                                                                                                                     | Yes                |
 | `accessTokenExpirationCheck`        | Enable OAuth access_token expiration check and token refresh using the refresh_token                                                                                         |                    |
+| `emptyDashboardPage`                | Enable the redesigned user interface of a dashboard page that includes no panels                                                                                             | Yes                |
 | `disablePrometheusExemplarSampling` | Disable Prometheus exemplar sampling                                                                                                                                         |                    |
 | `logsSampleInExplore`               | Enables access to the logs sample feature in Explore                                                                                                                         | Yes                |
 
@@ -82,7 +83,6 @@ Alpha features might be changed or removed without prior notice.
 | `mysqlAnsiQuotes`                  | Use double quotes to escape keyword in a MySQL query                                                                                                                                                |
 | `elasticsearchBackendMigration`    | Use Elasticsearch as backend data source                                                                                                                                                            |
 | `datasourceOnboarding`             | Enable data source onboarding page                                                                                                                                                                  |
-| `emptyDashboardPage`               | Enable the redesigned user interface of a dashboard page that includes no panels                                                                                                                    |
 | `secureSocksDatasourceProxy`       | Enable secure socks tunneling for supported core datasources                                                                                                                                        |
 | `authnService`                     | Use new auth service to perform authentication                                                                                                                                                      |
 | `alertingBacktesting`              | Rule backtesting API for alerting                                                                                                                                                                   |

e2e/shared/smokeTestScenario.ts

@@ -10,8 +10,8 @@ export const smokeTestScenario = {
   scenario: () => {
     // wait for time to be set to account for any layout shift
     e2e().contains('2020-01-01 00:00:00 to 2020-01-01 06:00:00').should('be.visible');
-    e2e.components.PageToolbar.item('Add panel').click();
+    e2e.components.PageToolbar.itemButton('Add panel button').click();
-    e2e.pages.AddDashboard.addNewPanel().click();
+    e2e.components.PageToolbar.itemButton('Add new visualization menu item').click();
 
     e2e.components.DataSource.TestData.QueryTab.scenarioSelectContainer()
       .should('be.visible')

packages/grafana-e2e-selectors/src/selectors/components.ts

@@ -256,6 +256,7 @@ export const Components = {
   PageToolbar: {
     container: () => '.page-toolbar',
     item: (tooltip: string) => `${tooltip}`,
+    itemButton: (title: string) => `data-testid ${title}`,
   },
   QueryEditorToolbarItem: {
     button: (title: string) => `QueryEditor toolbar item button ${title}`,

packages/grafana-e2e-selectors/src/selectors/pages.ts

@@ -42,6 +42,7 @@ export const Pages = {
   },
   AddDashboard: {
     url: '/dashboard/new',
+    itemButton: (title: string) => `data-testid ${title}`,
     addNewPanel: 'Add new panel',
     addNewRow: 'Add new row',
     addNewPanelLibrary: 'Add new panel from panel library',

pkg/services/featuremgmt/registry.go

@@ -324,8 +324,9 @@ var (
 		{
 			Name:         "emptyDashboardPage",
 			Description:  "Enable the redesigned user interface of a dashboard page that includes no panels",
-			State:        FeatureStateAlpha,
+			State:        FeatureStateStable,
 			FrontendOnly: true,
+			Expression:   "true", // enabled by default
 			Owner:        grafanaDashboardsSquad,
 		},
 		{

pkg/services/featuremgmt/toggles_gen.csv

@@ -47,7 +47,7 @@ nestedFolders,alpha,@grafana/backend-platform,true,false,false,false
 accessTokenExpirationCheck,stable,@grafana/grafana-authnz-team,false,false,false,false
 elasticsearchBackendMigration,alpha,@grafana/observability-logs,false,false,false,false
 datasourceOnboarding,alpha,@grafana/dashboards-squad,false,false,false,false
-emptyDashboardPage,alpha,@grafana/dashboards-squad,false,false,false,true
+emptyDashboardPage,stable,@grafana/dashboards-squad,false,false,false,true
 secureSocksDatasourceProxy,alpha,@grafana/hosted-grafana-team,false,false,false,false
 authnService,alpha,@grafana/grafana-authnz-team,false,false,false,false
 disablePrometheusExemplarSampling,stable,@grafana/observability-metrics,false,false,false,false

public/app/features/dashboard/components/AddPanelButton/AddPanelButton.tsx

@@ -2,6 +2,7 @@ import { css, cx } from '@emotion/css';
 import React, { useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 import { Dropdown, Button, useTheme2, Icon } from '@grafana/ui';
 import { DashboardModel } from 'app/features/dashboard/state';
 
@@ -27,6 +28,7 @@ export const AddPanelButton = ({ dashboard }: Props) => {
         size="lg"
         fill="outline"
         className={cx(styles.button, styles.buttonIcon, styles.buttonText)}
+        data-testid={selectors.components.PageToolbar.itemButton('Add panel button')}
       >
         Add
         <Icon name={isMenuOpen ? 'angle-up' : 'angle-down'} size="lg" />

public/app/features/dashboard/components/AddPanelButton/AddPanelMenu.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 
+import { selectors } from '@grafana/e2e-selectors';
 import { locationService, reportInteraction } from '@grafana/runtime';
 import { Menu } from '@grafana/ui';
 import { DashboardModel } from 'app/features/dashboard/state';
@@ -23,7 +24,7 @@ export const AddPanelMenu = ({ dashboard }: Props) => {
       <Menu.Item
         key="add-visualisation"
         label="Visualization"
-        ariaLabel="Add new panel"
+        testId={selectors.components.PageToolbar.itemButton('Add new visualization menu item')}
         onClick={() => {
           reportInteraction('Create new panel');
           const id = onCreateNewPanel(dashboard);
@@ -33,7 +34,7 @@ export const AddPanelMenu = ({ dashboard }: Props) => {
       <Menu.Item
         key="add-row"
         label="Row"
-        ariaLabel="Add new row"
+        testId={selectors.components.PageToolbar.itemButton('Add new row menu item')}
         onClick={() => {
           reportInteraction('Create new row');
           onCreateNewRow(dashboard);
@@ -42,7 +43,7 @@ export const AddPanelMenu = ({ dashboard }: Props) => {
       <Menu.Item
         key="add-panel-lib"
         label="Import from library"
-        ariaLabel="Add new panel from panel library"
+        testId={selectors.components.PageToolbar.itemButton('Add new panel from panel library menu item')}
         onClick={() => {
           reportInteraction('Add a panel from the panel library');
           onAddLibraryPanel(dashboard);
@@ -51,7 +52,7 @@ export const AddPanelMenu = ({ dashboard }: Props) => {
       <Menu.Item
         key="add-panel-clipboard"
         label="Paste panel"
-        ariaLabel="Add new panel from clipboard"
+        testId={selectors.components.PageToolbar.itemButton('Add new panel from clipboard menu item')}
         onClick={() => {
           reportInteraction('Paste panel from clipboard');
           onPasteCopiedPanel(dashboard, copiedPanelPlugin);