Datagrid Panel: Edit data within your dashboards (#66353)

* wip

* Datagrid WIP: snapshotting when data edited, better UI for adding column/rows, refactors

* wip

* WIP

* wip

* Add series selector

* Delete selection on key press

* wip

* Multiple row select and delete

* wip

* draggable rows/columns, better column width calculator

* bug fixes

* scrollbars

* add feature flag

* bugfixes

* bugfixes

* bugfixes

* bugfixes

* Add possibility to rename column

* Input fixes

* bugfixes

* bugfixes

* performance optimisations

* WIP component refactoring and optimisations

* comment bit of code to remove error for testing

* fix column move and payload types

* WIP refactors and tests

* e2e tests

* queryGroup subscription refactor

* queryGroup - add component on update, fix failing tests

* refactor querygroup

* querygroup refactor

* tests

* fix codeowners validation

* lint fixes

* revert convertFieldType modification in favor of already merged mod + re-add mistakenly deleted line

* remove //ts-ignores

* Minor style tweaks

* fix

* align colors with theme

* fixes

* refactor

* add test for convertFieldType transformer and write todo

---------

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

pkg/plugins/manager/manager_integration_test.go

@@ -192,6 +192,7 @@ func verifyCorePluginCatalogue(t *testing.T, ctx context.Context, ps *store.Serv
 		"trend":          {},
 		"welcome":        {},
 		"xychart":        {},
+		"datagrid":       {},
 	}
 
 	expDataSources := map[string]struct{}{

pkg/plugins/pfs/corelist/corelist_load_gen.go

@@ -57,6 +57,7 @@ func corePlugins(rt *thema.Runtime) []pfs.ParsedPlugin {
 		parsePluginOrPanic("public/app/plugins/panel/barchart", "barchart", rt),
 		parsePluginOrPanic("public/app/plugins/panel/bargauge", "bargauge", rt),
 		parsePluginOrPanic("public/app/plugins/panel/dashlist", "dashlist", rt),
+		parsePluginOrPanic("public/app/plugins/panel/datagrid", "datagrid", rt),
 		parsePluginOrPanic("public/app/plugins/panel/debug", "debug", rt),
 		parsePluginOrPanic("public/app/plugins/panel/flamegraph", "flamegraph", rt),
 		parsePluginOrPanic("public/app/plugins/panel/gauge", "gauge", rt),

pkg/plugins/plugindef/plugindef.cue

@@ -17,7 +17,7 @@ seqs: [
 				// grafana.com, then the plugin `id` has to follow the naming
 				// conventions.
 				id: string & strings.MinRunes(1)
-				id: =~"^([0-9a-z]+\\-([0-9a-z]+\\-)?(\(strings.Join([ for t in _types {t}], "|"))))|(alertGroups|alertlist|annolist|barchart|bargauge|candlestick|canvas|dashlist|debug|gauge|geomap|gettingstarted|graph|heatmap|histogram|icon|live|logs|news|nodeGraph|piechart|pluginlist|stat|state-timeline|status-history|table|table-old|text|timeseries|trend|traces|welcome|xychart|alertmanager|cloudwatch|dashboard|elasticsearch|grafana|grafana-azure-monitor-datasource|graphite|influxdb|jaeger|loki|mixed|mssql|mysql|opentsdb|postgres|prometheus|stackdriver|tempo|testdata|zipkin|phlare|parca)$"
+				id: =~"^([0-9a-z]+\\-([0-9a-z]+\\-)?(\(strings.Join([ for t in _types {t}], "|"))))|(alertGroups|alertlist|annolist|barchart|bargauge|candlestick|canvas|dashlist|debug|datagrid|gauge|geomap|gettingstarted|graph|heatmap|histogram|icon|live|logs|news|nodeGraph|piechart|pluginlist|stat|state-timeline|status-history|table|table-old|text|timeseries|trend|traces|welcome|xychart|alertmanager|cloudwatch|dashboard|elasticsearch|grafana|grafana-azure-monitor-datasource|graphite|influxdb|jaeger|loki|mixed|mssql|mysql|opentsdb|postgres|prometheus|stackdriver|tempo|testdata|zipkin|phlare|parca)$"
 
 				// Human-readable name of the plugin that is shown to the user in
 				// the UI.

pkg/services/featuremgmt/registry.go

@@ -532,5 +532,12 @@ var (
 			FrontendOnly: true,
 			Owner:        awsPluginsSquad,
 		},
+		{
+			Name:         "enableDatagridEditing",
+			Description:  "Enables the edit functionality in the datagrid panel",
+			FrontendOnly: true,
+			State:        FeatureStateBeta,
+			Owner:        grafanaBiSquad,
+		},
 	}
 )

pkg/services/featuremgmt/toggles_gen.csv

@@ -79,3 +79,4 @@ authenticationConfigUI,alpha,@grafana/grafana-authnz-team,false,false,false,fals
 pluginsAPIManifestKey,alpha,@grafana/plugins-platform-backend,false,false,false,false
 advancedDataSourcePicker,alpha,@grafana/dashboards-squad,false,false,false,true
 opensearchDetectVersion,alpha,@grafana/aws-plugins,false,false,false,true
+enableDatagridEditing,beta,@grafana/grafana-bi-squad,false,false,false,true

pkg/services/featuremgmt/toggles_gen.go

@@ -326,4 +326,8 @@ const (
 	// FlagOpensearchDetectVersion
 	// Enable version detection in OpenSearch
 	FlagOpensearchDetectVersion = "opensearchDetectVersion"
+
+	// FlagEnableDatagridEditing
+	// Enables the edit functionality in the datagrid panel
+	FlagEnableDatagridEditing = "enableDatagridEditing"
 )

pkg/tests/api/plugins/data/expectedListResp.json

@@ -386,6 +386,42 @@
     "signatureType": "",
     "signatureOrg": ""
   },
+  {
+    "name": "Datagrid",
+    "type": "panel",
+    "id": "datagrid",
+    "enabled": true,
+    "pinned": false,
+    "info": {
+      "author": {
+        "name": "Grafana Labs",
+        "url": "https://grafana.com"
+      },
+      "description": "",
+      "links": null,
+      "logos": {
+        "small": "public/app/plugins/panel/datagrid/img/icn-table-panel.svg",
+        "large": "public/app/plugins/panel/datagrid/img/icn-table-panel.svg"
+      },
+      "build": {},
+      "screenshots": null,
+      "version": "",
+      "updated": ""
+    },
+    "dependencies": {
+      "grafanaDependency": "",
+      "grafanaVersion": "*",
+      "plugins": []
+    },
+    "latestVersion": "",
+    "hasUpdate": false,
+    "defaultNavUrl": "/plugins/datagrid/",
+    "category": "",
+    "state": "beta",
+    "signature": "internal",
+    "signatureType": "",
+    "signatureOrg": ""
+  },
   {
     "name": "Elasticsearch",
     "type": "datasource",