[Lens] convert flyout tabs to buttons

[mbondyra]

Summary

Changes according to mockups, probably needs some polishing @MichaelMarcialis - could you take a look & give me some feedback 🙏🏼?

After:

Before:

[MichaelMarcialis]

Changes according to mockups, probably needs some polishing @MichaelMarcialis - could you take a look & give me some feedback 🙏🏼?

Thanks for jumping onto these changes in advance of the annotations feature, @mbondyra! Unfortunately, I fear these changes aren't going to be as simple as changing EuiTabs to EuiButtonGroup. This change was intended to be delivered in conjunction with the newly suggested form section headings. Each of these newly transitioned button groups was also meant to have an accompanying label above. Spatially, the hope is that we could make it appear as part of the form, with appropriate padding/margins, as shown in the wireframes. Finally, the thinking was that each form section heading, button group label and individual button text would be worded specifically for the configuration context the user is within.

For example, the wireframes use the following combination of verbiage specifically for annotation configurations:

• Form section heading: Placement
• Button group label: Placement type
• Individual button text: Static date, Custom query

The expectation is that different verbiage would be used for different configuration types. For another example, reference lines configurations could use something like:

• Form section heading: Value
• Button group label: Value type
• Individual button text: Static value, Quick functions, Formula

And so on for the other dimension configuration types.

That said, my initial instinct is to say that we should wait until we're able to provide those form section headings that you mentioned would be a larger task in #124970. Thoughts? CCing @ghudgins and @flash1293 in case they have any additional comments.

[mbondyra]

Thank you for clarification @MichaelMarcialis! Ok, I misunderstood that the placement copy goes everywhere, even to Vertical axis columns.

To properly estimate how much effort it will be to do the Headings/subheadings I need more clarifications about the design. I can imagine how the changes will look like for annotations and reference lines but I still have doubts for the visualization groups. Could you please provide a design for Horizontal (I think date histogram and filters would be enough) and Vertical axis (quick functions and formula) to give me the idea of how it should look there?

[kibana-ci]

💔 Build Failed

• Buildkite Build
• Commit: 1d177d3
• Interpreting CI Failures
• Storybooks Preview
• Webpack Bundle Analyzer

Failed CI Steps

• Checks

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
lens	1.0MB	1.0MB	+207.0B

Unknown metric groups

ESLint disabled in files

id	before	after	diff
apm	15	14	-1
securitySolution	67	66	-1
uptime	5	4	-1
total			-3

ESLint disabled line counts

id	before	after	diff
apm	86	83	-3
uptime	48	42	-6
total			-9

References to deprecated APIs

id	before	after	diff
canvas	70	64	-6
fleet	14	10	-4
lens	237	185	-52
monitoring	40	28	-12
stackAlerts	183	157	-26
upgradeAssistant	8	3	-5
total			-105

Total ESLint disabled count

id	before	after	diff
apm	101	97	-4
securitySolution	514	513	-1
uptime	53	46	-7
total			-12

History

• 💔 Build #23050 failed 2c465b6858b41873f24afd0f7f00d09954b1ee0c
• 💔 Build #22763 failed 711b9f42574332b194922ee404ddc3ac9fcf956f

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

[MichaelMarcialis]

To properly estimate how much effort it will be to do the Headings/subheadings I need more clarifications about the design. I can imagine how the changes will look like for annotations and reference lines but I still have doubts for the visualization groups. Could you please provide a design for Horizontal (I think date histogram and filters would be enough) and Vertical axis (quick functions and formula) to give me the idea of how it should look there?

Certainly, I can plan to mock something up. Full disclosure: I'm attempting to prioritize design support for the platform security team's user entity project at the moment. My estimate is that I'll be able to jump back to Lens priorities toward the end of the month or early March. Would that be OK? Or is this more urgent?

[flash1293]

@MichaelMarcialis what do you think about starting with the headings in the newly created annotation flyout and tackling them for reference lines and regular data dimension flyouts afterwards in a separate task?

[MichaelMarcialis]

@MichaelMarcialis what do you think about starting with the headings in the newly created annotation flyout and tackling them for reference lines and regular data dimension flyouts afterwards in a separate task?

I would personally be fine with that approach.