Explore: Content Outline (#74536)

* Add images

* Basic button functionality; TODO placeholders for dispatching contentOutlineToggle and rendering content outline component

* Basic content outline container

* Content outline toggles

* Remove icon files from explore

* Scroll into view v1

* outline that reflect's explore's order of vizs

* Update icon name

* Add scrollId to PanelChrome; scrolling enabled for Table

* Add queries icon

* Improve scroll behavior in split view

* Add wrapper so the sticky navigation doesn't scroll when on the bottom of the window

* Fix the issue with logs gap; center icons

* Memoize register and unregister functions; adjust content height

* Make displayOrderId optional

* Use Node API for finding position of panels in content outline;  add tooltip

* Dock content outline in expanded mode; at tooltip to toggle button

* Handle content outline visibility from Explore and not redux; pass outlineItems as a prop

* Fix ContentOutline test

* Add interaction tracking

* Add padding to fix test

* Replace string literals with objects for styles

* Update event reporting payloads

* Custom content outline button; content outline container improvements

* Add aria-expanded to content outline button in ExploreToolbar

* Fix vertical and horizontal scrolling

* Add aria-controls

* Remove unneccessary css since ExploreToolbar is sticky

* Update feature toggles; Fix typos

* Make content outline button more prominent in split mode; add padding to content outline items;

* Diego's UX updates

* WIP: some scroll fixes

* Fix test and type error

* Add id to ContentOutline to differentiate in split mode

* No default exports

---------

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

pkg/services/featuremgmt/registry.go

@@ -86,6 +86,14 @@ var (
 			Stage:       FeatureStagePublicPreview,
 			Owner:       grafanaExploreSquad,
 		},
+		{
+			Name:         "exploreContentOutline",
+			Description:  "Content outline sidebar",
+			Stage:        FeatureStageGeneralAvailability,
+			Owner:        grafanaExploreSquad,
+			Expression:   "true", // enabled by default
+			FrontendOnly: true,
+		},
 		{
 			Name:        "datasourceQueryMultiStatus",
 			Description: "Introduce HTTP 207 Multi Status for api/ds/query",

pkg/services/featuremgmt/toggles_gen.csv

@@ -11,6 +11,7 @@ featureHighlights,GA,@grafana/grafana-as-code,false,false,false,false
 migrationLocking,preview,@grafana/backend-platform,false,false,false,false
 storage,experimental,@grafana/grafana-app-platform-squad,false,false,false,false
 correlations,preview,@grafana/explore-squad,false,false,false,false
+exploreContentOutline,GA,@grafana/explore-squad,false,false,false,true
 datasourceQueryMultiStatus,experimental,@grafana/plugins-platform-backend,false,false,false,false
 traceToMetrics,experimental,@grafana/observability-traces-and-profiling,false,false,false,true
 newDBLibrary,preview,@grafana/backend-platform,false,false,false,false

pkg/services/featuremgmt/toggles_gen.go

@@ -55,6 +55,10 @@ const (
 	// Correlations page
 	FlagCorrelations = "correlations"
 
+	// FlagExploreContentOutline
+	// Content outline sidebar
+	FlagExploreContentOutline = "exploreContentOutline"
+
 	// FlagDatasourceQueryMultiStatus
 	// Introduce HTTP 207 Multi Status for api/ds/query
 	FlagDatasourceQueryMultiStatus = "datasourceQueryMultiStatus"