Add query history to the Preview Web UI

[koszti]

Description

Add Query History with search to the preview UI. Partially addressing #22697

NOTE: The layout of the metric cards at the top is currently broken, which could lead to layout issues if the values begin to change. This may become more pronounced when running queries, particularly when testing the query history and filter functions. Please note that this layout issue is outside the scope of the current PR and will be resolved separately by another PR.

Additional context and related issues

Retains the same functionality as the existing web UI, enhanced with the updated layout, design, and user experience.

Screenshots

Release notes

( ) This is not user-visible or is docs only, and no release notes are required.
( ) Release notes are required. Please propose a release note for me.
(x) Release notes are required, with the following suggested text:

## Section
* Add query history to the Preview Web UI. ({issue}`24875`)

[koszti]

@wendigo let's move discussion to this PR. It has everything that we discussed in the other (and now closed) PR. Can you please take another look? Oh and thanks for making WebUiPreviewQueryRunner in #24962.

[wendigo]

@koszti sure! I will :)

[mosabua]

Please follow style from #24981 now

[koszti]

@mosabua np, done

[wendigo]

can this file have a stable order of elements? :)

[koszti]

this is auto generated by npm. Am i missing something?

[wendigo]

I like these typed response classes 👍🏻

[koszti]

luckily the auto completion works too in IDEs

[wendigo]

a11 light? :)

[wendigo]

When I run query select avg(extendedprice) from tpch.sf1000.lineitem group by shipmode limit 100; this gets rendered with a scrollbar instead of being wrapped:

[wendigo]

Can we drop "demo components"?

[wendigo]

Let's call it Input bytes/s and Input rows/s for consistency with other labels

[wendigo]

Just couple of visual nits

[koszti]

I updated and made the following changes:

• using a11yLigh and a11yDark styles in CodeBlock. I had to switch from Prism to HLJS because the a11yLight theme is only available in HLJS. It's working now, but the a11yDark theme looks slightly different.
• changed the label on the mentioned metric cards
• dropped the demo components page

When I run query select avg(extendedprice) from tpch.sf1000.lineitem group by shipmode limit 100; this gets rendered with a scrollbar instead of being wrapped

I tried so hard few days ago but couldn’t get the wrap lines to work and ran out of ideas. I thought no one would notice, but it turns out that wasn’t the case!. :)

[mosabua]

Can we drop "demo components"?

I think we want to wait a bit or maybe even keep it but have it hidden

[koszti]

Can we drop "demo components"?

I think we want to wait a bit or maybe even keep it but have it hidden

I restored it for now. Unfortunately, keeping it hidden isn’t straightforward, so if we want the link to remain accessible without appearing in the menu bar, we’ll need an alternative approach.

[mosabua]

Oh .. sorry for the churn.. didnt realize you already removed it .. I think we can remove it once we have an example usage for each component .. that might be the case already now.. dont know myself

[koszti]

no worries, I was wrong. Making it hidden was pretty easy actually. Now it's hidden in the menu bar but it's still accessible at http://localhost:5173/ui/preview#/demo-components

[mosabua]

no worries, I was wrong. Making it hidden was pretty easy actually. Now it's hidden in the menu bar but it's still accessible at http://localhost:5173/ui/preview#/demo-components

Awesome

[koszti]

@wendigo wdyt, can this be merged?

[wendigo]

@koszti 👍🏻