[Discover Session][Tabs] Tab preview (#214090)

- Closes https://github.com/elastic/kibana/issues/214554

## Summary

This PR:
- adds TabPreview component, which is visible when you hover over a
particular tab
- adds tests for TabPreview component

About TabPreview component
- EUI doesn't have a component, which would suit for our needs, hence a
custom component activated on hover
- TabPreview should activate (with 500ms of delay) after hovering over a
whole tab
- It should hide when we click action button in the tab or we open
editing name mode
- It shouldn't appear on hover when we have tab context menu open or
we're editing a title
- For now the data inside is mocked (besides of title), so you can see
random queries and statuses each time you hover over the tab
- Preview should not overflow the screen if there are a lot of tabs and
they're "touching" right side of the screen


https://github.com/user-attachments/assets/da0a47dd-b594-4c20-b76c-49e6889f3814



## Testing

Two options are possible:

1. start Storybook with `yarn storybook unified_tabs` and navigate to
`http://localhost:9001`.
2. start Kibana with `yarn start --run-examples`. Then navigate to the
Unified Tabs example plugin
`http://localhost:5601/app/unifiedTabsExamples`.

### Checklist
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

---------

Co-authored-by: Julia Rechkunova <julia.rechkunova@elastic.co>
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

examples/unified_tabs_examples/public/example_app.tsx

@@ -25,9 +25,33 @@ import type { DataView } from '@kbn/data-views-plugin/public';
 import type { DataViewField } from '@kbn/data-views-plugin/public';
 import type { DataViewPickerProps } from '@kbn/unified-search-plugin/public';
 import { type TabItem, UnifiedTabs, useNewTabProps } from '@kbn/unified-tabs';
+import { type TabPreviewData, TabStatus } from '@kbn/unified-tabs';
 import { PLUGIN_ID, PLUGIN_NAME } from '../common';
 import { FieldListSidebar, FieldListSidebarProps } from './field_list_sidebar';
 
+// TODO: replace with real data when ready
+const TAB_CONTENT_MOCK: TabPreviewData[] = [
+  {
+    query: {
+      esql: 'FROM logs-* | FIND ?findText | WHERE host.name == ?hostName AND log.level == ?logLevel',
+    },
+    status: TabStatus.SUCCESS,
+  },
+  {
+    query: {
+      esql: 'FROM logs-* | FIND ?findText | WHERE host.name == ?hostName AND log.level == ?logLevel',
+    },
+    status: TabStatus.RUNNING,
+  },
+  {
+    query: {
+      language: 'kql',
+      query: 'agent.name : "activemq-integrations-5f6677988-hjp58"',
+    },
+    status: TabStatus.ERROR,
+  },
+];
+
 interface UnifiedTabsExampleAppProps {
   services: FieldListSidebarProps['services'];
   setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
@@ -102,6 +126,9 @@ export const UnifiedTabsExampleApp: React.FC<UnifiedTabsExampleAppProps> = ({
               services={services}
               onChanged={() => {}}
               createItem={getNewTabDefaultProps}
+              getPreviewData={
+                () => TAB_CONTENT_MOCK[Math.floor(Math.random() * TAB_CONTENT_MOCK.length)] // TODO change mock to real data when ready
+              }
               renderContent={({ label }) => {
                 return (
                   <EuiFlexGroup direction="column" gutterSize="none">