Add/Edit Panel: Enable new DS picker toggle by default (#68380)

* Add Panel: Enable new DS picker and onboarding DS prompt

* Add e2e selectors

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

@@ -38,6 +38,7 @@ Some stable features are enabled by default. You can disable a stable feature by
 | `lokiMetricDataplane`               | Changes metric responses from Loki to be compliant with the dataplane specification.                                                                                                                | Yes                |
 | `dataplaneFrontendFallback`         | Support dataplane contract field name change for transformations and field name matchers where the name is different                                                                                | Yes                |
 | `useCachingService`                 | When turned on, the new query and resource caching implementation using a wire service inject will be used in place of the previous middleware implementation                                       |                    |
+| `advancedDataSourcePicker`          | Enable a new data source picker with contextual information, recently used order and advanced mode                                                                                                  | Yes                |
 
 ## Beta feature toggles
 
@@ -69,7 +70,7 @@ These features are early in their development lifecycle and so are not yet suppo
 Alpha features might be changed or removed without prior notice.
 
 | Feature toggle name                | Description                                                                                                  |
-| ---------------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| ---------------------------------- | ------------------------------------------------------------------------------------------------------------ |
 | `live-service-web-worker`          | This will use a webworker thread to processes events rather than the main thread                             |
 | `queryOverLive`                    | Use Grafana Live WebSocket to execute backend queries                                                        |
 | `lokiLive`                         | Support WebSocket streaming for loki (early prototype)                                                       |
@@ -109,7 +110,6 @@ Alpha features might be changed or removed without prior notice.
 | `pyroscopeFlameGraph`              | Changes flame graph to pyroscope one                                                                         |
 | `authenticationConfigUI`           | Enables authentication configuration UI                                                                      |
 | `pluginsAPIManifestKey`            | Use grafana.com API to retrieve the public manifest key                                                      |
-| `advancedDataSourcePicker`         | Enable a new data source picker with contextual information, recently used order, CSV upload and advanced mode |
 | `opensearchDetectVersion`          | Enable version detection in OpenSearch                                                                       |
 | `extraThemes`                      | Enables extra themes                                                                                         |
 

pkg/services/featuremgmt/registry.go

@@ -505,9 +505,10 @@ var (
 		},
 		{
 			Name:         "advancedDataSourcePicker",
-			Description:  "Enable a new data source picker with contextual information, recently used order, CSV upload and advanced mode",
-			State:        FeatureStateAlpha,
+			Description:  "Enable a new data source picker with contextual information, recently used order and advanced mode",
+			State:        FeatureStateStable,
 			FrontendOnly: true,
+			Expression:   "true", // enabled by default
 			Owner:        grafanaDashboardsSquad,
 		},
 		{

pkg/services/featuremgmt/toggles_gen.csv

@@ -74,7 +74,7 @@ useCachingService,stable,@grafana/grafana-operator-experience-squad,false,false,
 enableElasticsearchBackendQuerying,beta,@grafana/observability-logs,false,false,false,false
 authenticationConfigUI,alpha,@grafana/grafana-authnz-team,false,false,false,false
 pluginsAPIManifestKey,alpha,@grafana/plugins-platform-backend,false,false,false,false
-advancedDataSourcePicker,alpha,@grafana/dashboards-squad,false,false,false,true
+advancedDataSourcePicker,stable,@grafana/dashboards-squad,false,false,false,true
 opensearchDetectVersion,alpha,@grafana/aws-plugins,false,false,false,true
 faroDatasourceSelector,beta,@grafana/app-o11y,false,false,false,true
 enableDatagridEditing,beta,@grafana/grafana-bi-squad,false,false,false,true

pkg/services/featuremgmt/toggles_gen.go

@@ -308,7 +308,7 @@ const (
 	FlagPluginsAPIManifestKey = "pluginsAPIManifestKey"
 
 	// FlagAdvancedDataSourcePicker
-	// Enable a new data source picker with contextual information, recently used order, CSV upload and advanced mode
+	// Enable a new data source picker with contextual information, recently used order and advanced mode
 	FlagAdvancedDataSourcePicker = "advancedDataSourcePicker"
 
 	// FlagOpensearchDetectVersion

public/app/features/datasources/components/picker/DataSourceDropdown.tsx

@@ -5,6 +5,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { usePopper } from 'react-popper';
 
 import { DataSourceInstanceSettings, GrafanaTheme2 } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 import { reportInteraction } from '@grafana/runtime';
 import { DataSourceJsonData } from '@grafana/schema';
 import { Button, Icon, Input, ModalsController, Portal, useStyles2 } from '@grafana/ui';
@@ -103,12 +104,13 @@ export function DataSourceDropdown(props: DataSourceDropdownProps) {
   const styles = useStyles2(getStylesDropdown);
 
   return (
-    <div className={styles.container}>
+    <div className={styles.container} data-testid={selectors.components.DataSourcePicker.container}>
       {/* This clickable div is just extending the clickable area on the input element to include the prefix and suffix. */}
       {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
       <div className={styles.trigger} onClick={openDropdown}>
         <Input
           className={inputHasFocus ? undefined : styles.input}
+          data-testid={selectors.components.DataSourcePicker.inputV2}
           prefix={
             filterTerm && isOpen ? (
               <DataSourceLogoPlaceHolder />