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`)

[wendigo]

These panes don't have the same height

[wendigo]

I've built this branch but I can only see:

[wendigo]

Query text should go up (rather than being in a middle). Or we could stretch the box to be the same height as the details pane on the left:

[wendigo]

This dotted border is looking odd, let's make it solid one:

[wendigo]

I'd make these icons smaller:

[wendigo]

Can we save the state of the filters in the browser? So that when I go back and forth between the dashboard and other panes I'll have filters set?

[koszti]

These panes don't have the same height

yes, that’s mentioned in the PR description, these cards are broken but not strongly related to this PR and wanted to fix separately. Do you want to make it as part if this PR?

[wendigo]

@koszti either is fine (if in this PR - let's make it a separate commit)

[wendigo]

Couple of nits:

Can we make the bottom border in line with the hightlight box?

I've changed some of the icons, but can we make them smaller and add some right margin to them:

icons are:

import AvTimerIcon from '@mui/icons-material/AvTimer';
import BadgeIcon from '@mui/icons-material/Badge'
import BrokenImageIcon from '@mui/icons-material/BrokenImage';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import DevicesIcon from '@mui/icons-material/Devices'
import DownloadingIcon from '@mui/icons-material/Downloading'
import FunctionsIcon from '@mui/icons-material/Functions';
import GraphicEq from '@mui/icons-material/GraphicEq'
import GroupsIcon from '@mui/icons-material/Groups'
import HighlightOff from '@mui/icons-material/HighlightOff'
import HistoryToggleOffIcon from '@mui/icons-material/HistoryToggleOff';
import Memory from '@mui/icons-material/Memory'
import NotStartedIcon from '@mui/icons-material/NotStarted';
import PlayCircleIcon from '@mui/icons-material/PlayCircle';
import QueryBuilderIcon from '@mui/icons-material/QueryBuilder';

Can we make query box stand out less? Bring colors a couple of tones down (more grayish)?

a11yDark looks nicer to me:

[koszti]

@wendigo I addressed all change requests but I messed up this PR with some incorrect rebase and merge. Instead of trying to make the git history and diff clean, I opened another and cleaned PR at #24972. Can we continue over there?