VizPanel: support collapsible props

[gtk-grafana]

Adding support to panel builders to allow passing PanelChrome collapsible props.
e.g. collapsible, collapsed, onToggleCollapse

Example usage:

// Get current state from local storage
const collapsed = getLocalStorageOption('panelCollapsed', [CollapsedType.collapsed, CollapsedType.open]) === CollapsedType.collapsed;

// Build collapsable panel
const panel = PanelBuilders.timeseries()
    .setData(collapsed ? undefined : getQueryRunner([]))
    .setCollapsible(true)
    .setCollapsed(collapsed)
    .build()

panel.subscribeToState((newState, prevState) => {
    if (newState.collapsed !== prevState.collapsed) {
        // Set updated state to local storage
        setLocalStorageOption('panelCollapsed', newState.collapsed ? CollapsedType.collapsed : CollapsedType.open);

        // Conditionally set DataProvider if panel is not collapsed
        panel.setState({
            $data: newState.collapsed
                ? undefined
                : getQueryRunner([]),
        });

        // Update the height of the panel
        const flexItem = sceneGraph.getAncestor(panel, SceneFlexItem);
        flexItem.setState({
            height: newState.collapsed ? 35 : 200,
        });
    }
})

Notes:

• Looks like the height in scenes is defined differently then in core Grafana, so users must manually set collapsed and uncollapsed heights when scene is activated and onToggleCollapse. 35px works pretty well for the collapsed state.
• Developers will need to manually add/remove query runners to prevent queries from running while collapsed, if desired.

📦 Published PR as canary version: 5.29.0--canary.808.12181324273.0

✨ Test out this PR locally via:

npm install @grafana/[email protected]
npm install @grafana/[email protected]
# or 
yarn add @grafana/[email protected]
yarn add @grafana/[email protected]

[torkelo]

I would just stick with simple boolean types here, this just obfuscates the simple types that these props really have.