[Dashboard] Add collapsible sections (#220877)

mirror of https://github.com/elastic/kibana.git synced 2025-06-27 18:51:07 -04:00

Closes https://github.com/elastic/kibana/issues/1547
Closes https://github.com/elastic/kibana/issues/190342
Closes https://github.com/elastic/kibana/issues/197716

## Summary

This PR adds the ability for collapsible sections to be created and
managed on Dashboards.




https://github.com/user-attachments/assets/c5c046d0-58f1-45e1-88b3-33421f3ec002

> [!NOTE]
> Most of the work for developing collapsible sections occurred in PRs
contained to the `kbn-grid-layout` package (see [this meta
issue](https://github.com/elastic/kibana/issues/190342) to track this
work) - this PR simply makes them available on Dashboards by adding them
as a widget that can be added through the "Add panel" menu. As a result
of this, most work is contained in the Dashboard plugin - changes made
to the `kbn-grid-layout` package only include adding IDs for additional
tests that were added for the Dashboard integration.

### Technical Details

#### Content Management Schema

The content management schema allows for panels and sections to be mixed
within the single `panels` key for a dashboard **without** worrying
about section IDs; for example:

```
{
  "panels": [
    {
       // this is a simplified panel
       "gridData": {
         "x": 0,
         "y": 0,
         "w": 12,
         "h": 8,
       },
      "panelConfig": { ... },
    },
    {
       // this is a section
       "gridData": {
         "y": 9,
       },
      "collapsed": false,
      "title": "Section title",
      "panels": [
          {
          // this is a simplified panel
          "gridData": {
           "x": 0,
           "y": 0,
           "w": 24,
           "h": 16,
          },
          "panelConfig": { ... },
        },
      ],
   },
  ]
} 
```

#### Saved Object Schema

The dashboard saved object schema, on the other hand, separates out
sections and panels under different keys - this is because, while we are
stuck with panels being stored as `panelJSON`, I didn't want to add much
to this. So, under grid data for each panel, they have an optional
`sectionId` which then links to a section in the `sections` array in the
saved object:

```
{
  "panelsJSON": "<...> \"gridData\":{\"i\":\"panelId\",\"y\":0,\"x\":0,\"w\":12,\"h\":8,\"sectionId\":\"someSectionId\"} <...>"
  "sections": [
     {
       "collapsed": false,
       "title": "Section title",
       "gridData": {
          "i": "someSectionId",
          "y": 8.
        }
     }
  ],
}
```

This allows sections to be serialized **without** being stringified.
This storage also matches how we store this data in runtime using
`layout`.

### Checklist

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)


## Release note

Adds collapsible sections to Dashboard, which allow panels to grouped
into sections that will not load their contents when their assigned
section is collapsed.

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>