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>
This commit is contained in:
Haris Rozajac
2023-10-13 10:57:13 -06:00
committed by GitHub
parent 91cf4f0c1c
commit 4ec54bc2c3
16 changed files with 694 additions and 233 deletions

View File

@@ -24,6 +24,7 @@ Some features are enabled by default. You can disable these feature by setting t
| `disableEnvelopeEncryption` | Disable envelope encryption (emergency only) | |
| `publicDashboards` | Enables public access to dashboards | Yes |
| `featureHighlights` | Highlight Grafana Enterprise features | |
| `exploreContentOutline` | Content outline sidebar | Yes |
| `dataConnectionsConsole` | Enables a new top-level page called Connections. This page is an experiment that provides a better experience when you install and configure data sources and other plugins. | Yes |
| `cloudWatchCrossAccountQuerying` | Enables cross-account querying in CloudWatch datasources | Yes |
| `redshiftAsyncQueryDataSupport` | Enable async query data support for Redshift | Yes |