Datasource: datasource config page header redesign (#66999)

* Wip

* remove name input from page body

* render title & subTitle in datasource page in connections and remove unused prop - uid

* styling on actions button group

* remove unused props in edit datasource page

* set gap as 8px between buttons

* move editable datasourcename to the header

* add subTitle component

* remove useRef and use autoFocus prop

* pass false to isDefault  when dataSource is undefined

* change button text

* remove suffix icon

* remove unused import - Icon

* consolidate duplicate useDataSourceSettingsNav into datasrouces hook

* move dataSource context to useDataSourceSettingsNav

* remove Explore button in the footer

* remove unused props

* fix failing test on button group

* fix typo on file naming

* remove disabled prop

* fix param

* add test

* add test files

* disable editing title in readOnly provision datasource

* update name should save dataSource

* prevent swith toggle change from label clicking and change margin

* update tooltip message

* use datasource update on header instead of state update

* remvoe subTitle component and move subTitle component next to page Info component

* Added title

* remove subTitle in buildNavModel

* replace Button with Badge

* make datasourceheader as a component

* horizontal gap of 24px between pageInfo and actions components

* align page Info value items

* accept react node as page info label and add tooltip to Default item

* update navId for edit datasource page in connections

* update unit testing for Title

* fix gen_que

* betterer

* prettier fix

* fix e2e test

* add data-testid to nameEditIcon selector

* fix tooltip text

* fix navId for connections datasources edit page

* fix e2e selector: change autoSizeInput to Input

* adding ellipsis to EditDataSourceTitle

* override grafana-ui titleContainer h1 styles

* UI cleanup and apply readOnly to default datasource switch

* add period

* datasource name validation

* title and page info alignment

* add feature toggle - dataSourcePageHeader

* restore basicSettings component and apply feature toggle

* go lint

* Revert "title and page info alignment"

This reverts commit 681ac51f11.

* remove editable fields from page Header - name, default datasource switch

* fix go test: toggle generator

* remove test id

* remove alerting badge in BasicSettings component

* Revert "remove alerting badge in BasicSettings component"

This reverts commit fb33ff9028.

* feature toggle on alerting badge

* rename component & filename

* move DataSourceInfo type

* change button to link in test

---------

Co-authored-by: Levente Balogh <balogh.levente.hu@gmail.com>
Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
Co-authored-by: Miguel Palau Zarza <mpalauzarza@gmail.com>

pkg/services/featuremgmt/codeowners.go

@@ -24,4 +24,5 @@ const (
 	appO11ySquad                                codeowner = "@grafana/app-o11y"
 	grafanaPartnerPluginsSquad                  codeowner = "@grafana/partner-plugins"
 	grafanaOperatorExperienceSquad              codeowner = "@grafana/grafana-operator-experience-squad"
+	enterpriseDatasourcesSquad                  codeowner = "@grafana/enterprise-datasources"
 )

pkg/services/featuremgmt/registry.go

@@ -519,6 +519,13 @@ var (
 			State:        FeatureStateBeta,
 			Owner:        grafanaBiSquad,
 		},
+		{
+			Name:         "dataSourcePageHeader",
+			Description:  "Apply new pageHeader UI in data source edit page",
+			FrontendOnly: true,
+			State:        FeatureStateBeta,
+			Owner:        enterpriseDatasourcesSquad,
+		},
 		{
 			Name:         "extraThemes",
 			Description:  "Enables extra themes",

pkg/services/featuremgmt/toggles_gen.csv

@@ -76,4 +76,5 @@ pluginsAPIManifestKey,alpha,@grafana/plugins-platform-backend,false,false,false,
 advancedDataSourcePicker,stable,@grafana/dashboards-squad,false,false,false,true
 faroDatasourceSelector,beta,@grafana/app-o11y,false,false,false,true
 enableDatagridEditing,beta,@grafana/grafana-bi-squad,false,false,false,true
+dataSourcePageHeader,beta,@grafana/enterprise-datasources,false,false,false,true
 extraThemes,alpha,@grafana/user-essentials,false,false,false,true

pkg/services/featuremgmt/toggles_gen.go

@@ -315,6 +315,10 @@ const (
 	// Enables the edit functionality in the datagrid panel
 	FlagEnableDatagridEditing = "enableDatagridEditing"
 
+	// FlagDataSourcePageHeader
+	// Apply new pageHeader UI in data source edit page
+	FlagDataSourcePageHeader = "dataSourcePageHeader"
+
 	// FlagExtraThemes
 	// Enables extra themes
 	FlagExtraThemes = "extraThemes"