[Lens] Add toolbar api

[flash1293]

Fixes #67384

This PR adds a new optional property to a Lens visualization - renderToolbar. If the property is provided, it is called to render above the actual chart. This is meant to provide a place for chart-level settings.

This removes the "title" bar (title is still visible in the chrome breadcrumb)

The toolbar renderer has access to the current state, the state setter and the frame API.

Example (if toolbar is provided)

Example (if toolbar is not provided)

To test this, you can use the following example toolbar:

const TestToolbar = (props: any) => {
  const [open, setOpen] = useState(false);
  return (
    <EuiFlexGroup justifyContent="flexEnd">
      <EuiFlexItem grow={false}>
        <EuiPopover
          button={
            <EuiButtonEmpty
              iconType="arrowDown"
              iconSide="right"
              onClick={() => {
                setOpen(!open);
              }}
            >
              <EuiIcon type="gear" />
            </EuiButtonEmpty>
          }
          isOpen={open}
          closePopover={() => {
            setOpen(false);
          }}
        >
          <EuiFormRow label="Legend" display="rowCompressed" hasChildLabel={false}>
            <EuiSwitch
              label="Show legend"
              name="switch"
              checked={props.state ? props.state.legend.isVisible : false}
              onChange={(e) => {
                props.setState({
                  ...props.state,
                  legend: {
                    ...props.state.legend,
                    isVisible: e.target.checked,
                  },
                });
              }}
              compressed
            />
          </EuiFormRow>
        </EuiPopover>
      </EuiFlexItem>
    </EuiFlexGroup>
  );
};


// x-pack/plugins/lens/public/xy_visualization/xy_visualization.tsx

export const xyVisualization: Visualization<State, PersistableState> = {
  // ...
  renderToolbar(domElement, props) {
    render(<TestToolbar {...props} />, domElement);
  }
 // ...

This PR does not move over the chart-picker yet, this can be done in a separate PR.

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[wylieconlon]

I haven't yet run the code, but this doesn't look right to me because it removes the title. @cchaos you may want to look at this

[cchaos]

Yes, let's not remove the title from the canvas area. We should still display it there similar to how panel titles are displayed in Dashboard. We should style the title as subdued when it hasn't been saved yet. (Green box below)

Should the API take into account the moving of the chart type selection now, or do that as a follow up?

[flash1293]

@cchaos Alright thanks, I will adjust the PR. Moving over the chart selector will be done in a separate PR.

[flash1293]

@cchaos

Unsaved

SAved

Not sure about the separator line below the title - it's there on master:

Unsaved

Saved

[cchaos]

I think it's better without the border 👍

[cchaos]

Can we make sure the content header only shows when there's a chart? So don't show "Unsaved" in the empty state (alongside the graphic).

[cchaos]

@flash1293 It is very important and pretty similar to it used to behave. Before, it would show the title component once you have a visualization and then saved it. Now I'm just asking if we can put a second layer of logic to show the "Unsaved" title after chart creation.

[flash1293]

@cchaos I withdrew my comment, I found a nice solution :) Sorry for the noise.

[flash1293]

@wylieconlon @cchaos can you check again?

[cchaos]

Code review LGTM since my guess is we don't actually have anything being populated in the toolbar area yet, this is just for the opportunity to.

[wylieconlon]

This is very close, but I found another title-related issue.

[wylieconlon]

I usually do expect.any(Element)

[wylieconlon]

This logic doesn't look right to me: it hides the title for a saved visualization in the following case:

1. Go to a previously saved Lens visualization
2. Clear the layer
3. Title disappears?

[flash1293]

@wylieconlon good point, fixed that

[flash1293]

@elasticmachine merge upstream

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 0246d64

Build metrics

✅ unchanged

History

• 💚 Build #55911 succeeded 7a20163
• 💚 Build #55448 succeeded 34cff58
• 💚 Build #55097 succeeded 85c128e
• 💚 Build #55086 succeeded 2434486
• 💚 Build #55066 succeeded e51ff5e

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

[wylieconlon]

Changes LGTM!

[mbondyra]

Arghh, I've started checking too late 😅 I only had one comment about exhaustive-deps rule, but nevermind - we can do it some other time.
Functionality works good on Firefox - post-approved! 😄

[mbondyra]

Can you add activeVisualization to dependency array of useCallback?