[Stream] UX Improvements Part 2 (#235049)

closes [Partitioning UX Improvements Part
2](elastic/streams-program#494)


## 📝   Summary

This PR addresses the below UI changes:
1. Add expand/collapse column to the Partitioning table
2. Added table toolbar
3. Changed match document filter component selection style

## 🎥 Demo


https://github.com/user-attachments/assets/3b15e2d3-50c7-4b90-936e-697e393fcc9f

Author: mohamedhamed-ahmed

x-pack/platform/plugins/shared/streams_app/public/components/data_management/schema_editor/flyout/sample_preview_table.tsx

@@ -13,7 +13,7 @@ import type { Streams } from '@kbn/streams-schema';
 import { useKibana } from '../../../../hooks/use_kibana';
 import { getFormattedError } from '../../../../util/errors';
 import { useStreamsAppFetch } from '../../../../hooks/use_streams_app_fetch';
-import { PreviewTable } from '../../preview_table';
+import { PreviewTable } from '../../shared/preview_table';
 import { LoadingPanel } from '../../../loading_panel';
 import type { MappedSchemaField, SchemaField } from '../types';
 import { isSchemaFieldTyped } from '../types';

x-pack/platform/plugins/shared/streams_app/public/components/data_management/shared/index.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+export { PreviewFlyout } from './preview_flyout';
+export type { DataTableRecordWithIndex } from './preview_flyout';
+export { MemoPreviewTable } from './preview_table';

x-pack/platform/plugins/shared/streams_app/public/components/data_management/stream_detail_enrichment/preview_flyout.tsx renamed to x-pack/platform/plugins/shared/streams_app/public/components/data_management/shared/preview_flyout.tsx

@@ -11,7 +11,6 @@ import type { DataTableRecord } from '@kbn/discover-utils';
 import useAsync from 'react-use/lib/useAsync';
 import type { DocViewsRegistry } from '@kbn/unified-doc-viewer';
 import { useKibana } from '../../../hooks/use_kibana';
-import { useSimulatorSelector } from './state_management/stream_enrichment_state_machine';
 
 export const FLYOUT_WIDTH_KEY = 'streamsEnrichment:flyoutWidth';
 
@@ -24,13 +23,14 @@ export const PreviewFlyout = ({
   hits,
   setExpandedDoc,
   docViewsRegistry,
+  streamName,
 }: {
   currentDoc?: DataTableRecordWithIndex;
   hits: DataTableRecordWithIndex[];
   setExpandedDoc: (doc?: DataTableRecordWithIndex) => void;
   docViewsRegistry: DocViewsRegistry;
+  streamName: string;
 }) => {
-  const streamName = useSimulatorSelector((state) => state.context.streamName);
   const { core, dependencies } = useKibana();
   const { data } = dependencies.start;
 

x-pack/platform/plugins/shared/streams_app/public/components/data_management/preview_table/index.tsx renamed to x-pack/platform/plugins/shared/streams_app/public/components/data_management/shared/preview_table.tsx

@@ -10,16 +10,31 @@ import type {
   EuiDataGridRowHeightsOptions,
   EuiDataGridSorting,
 } from '@elastic/eui';
-import { EuiDataGrid, useEuiTheme } from '@elastic/eui';
+import {
+  EuiAvatar,
+  EuiButtonIcon,
+  EuiDataGrid,
+  EuiFlexGroup,
+  EuiToolTip,
+  useEuiTheme,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import type { SampleDocument } from '@kbn/streams-schema';
 import React, { useMemo, useState, useCallback } from 'react';
 import { css } from '@emotion/css';
 import { recalcColumnWidths } from '../stream_detail_enrichment/utils';
-import type { SimulationContext } from '../stream_detail_enrichment/state_management/simulation_state_machine';
+import type {
+  SampleDocumentWithUIAttributes,
+  SimulationContext,
+} from '../stream_detail_enrichment/state_management/simulation_state_machine';
+import { DATA_SOURCES_I18N } from '../stream_detail_enrichment/data_sources_flyout/translations';
+import { useDataSourceSelectorById } from '../stream_detail_enrichment/state_management/data_source_state_machine';
+import type { EnrichmentDataSourceWithUIAttributes } from '../stream_detail_enrichment/types';
 
 const emptyCell = <>&nbsp;</>;
 
+export const MemoPreviewTable = React.memo(PreviewTable);
+
 export function PreviewTable({
   documents,
   displayColumns,
@@ -32,7 +47,9 @@ export function PreviewTable({
   setVisibleColumns,
   columnOrderHint = [],
   selectedRowIndex,
-  leadingControlColumns,
+  showRowSourceAvatars = false,
+  originalSamples,
+  onRowSelected,
 }: {
   documents: SampleDocument[];
   displayColumns?: string[];
@@ -45,7 +62,9 @@ export function PreviewTable({
   sorting?: SimulationContext['previewColumnsSorting'];
   setSorting?: (sorting: SimulationContext['previewColumnsSorting']) => void;
   selectedRowIndex?: number;
-  leadingControlColumns?: EuiDataGridControlColumn[];
+  showRowSourceAvatars?: boolean;
+  originalSamples?: SampleDocumentWithUIAttributes[];
+  onRowSelected?: (rowIndex: number) => void;
 }) {
   const { euiTheme: theme } = useEuiTheme();
   // Determine canonical column order
@@ -117,6 +136,43 @@ export function PreviewTable({
 
   const [columnWidths, setColumnWidths] = useState<Record<string, number | undefined>>({});
 
+  const leadingControlColumns: EuiDataGridControlColumn[] = useMemo(
+    () => [
+      {
+        id: 'selection',
+        width: showRowSourceAvatars ? 72 : 36,
+        headerCellRender: () => null,
+        rowCellRender: ({ rowIndex }) => {
+          const originalSample = originalSamples?.[rowIndex];
+          return (
+            <EuiFlexGroup gutterSize="s">
+              <EuiButtonIcon
+                onClick={() => {
+                  if (onRowSelected) {
+                    onRowSelected(rowIndex);
+                  }
+                }}
+                aria-label={i18n.translate(
+                  'xpack.streams.resultPanel.euiDataGrid.preview.selectRowAriaLabel',
+                  {
+                    defaultMessage: 'Select row {rowIndex}',
+                    values: { rowIndex: rowIndex + 1 },
+                  }
+                )}
+                iconType={selectedRowIndex === rowIndex ? 'minimize' : 'expand'}
+                color={selectedRowIndex === rowIndex ? 'primary' : 'text'}
+              />
+              {showRowSourceAvatars && originalSample && (
+                <RowSourceAvatar originalSample={originalSample} />
+              )}
+            </EuiFlexGroup>
+          );
+        },
+      },
+    ],
+    [onRowSelected, showRowSourceAvatars, selectedRowIndex, originalSamples]
+  );
+
   // Derive visibleColumns from canonical order
   const visibleColumns = useMemo(() => {
     if (displayColumns) {
@@ -213,3 +269,36 @@ export function PreviewTable({
     />
   );
 }
+
+function dataSourceTypeToI18nKey(type: EnrichmentDataSourceWithUIAttributes['type']) {
+  switch (type) {
+    case 'random-samples':
+      return 'randomSamples';
+    case 'kql-samples':
+      return 'kqlDataSource';
+    case 'custom-samples':
+      return 'customSamples';
+  }
+}
+
+function RowSourceAvatar({ originalSample }: { originalSample: SampleDocumentWithUIAttributes }) {
+  const dataSourceContext = useDataSourceSelectorById(
+    originalSample.dataSourceId,
+    (snapshot) => snapshot?.context
+  );
+  if (!dataSourceContext) {
+    // If the data source context is not available, we cannot render the avatar
+    return null;
+  }
+  const {
+    uiAttributes: { color },
+    dataSource: { type: dataSourceType, name: rawDataSourceName },
+  } = dataSourceContext;
+  const name =
+    rawDataSourceName || DATA_SOURCES_I18N[dataSourceTypeToI18nKey(dataSourceType)].placeholderName;
+  return (
+    <EuiToolTip content={name}>
+      <EuiAvatar size="s" color={color} initialsLength={1} name={name} />
+    </EuiToolTip>
+  );
+}

x-pack/platform/plugins/shared/streams_app/public/components/data_management/stream_detail_enrichment/data_sources_flyout/data_source_card.tsx

@@ -27,7 +27,7 @@ import { useDiscardConfirm } from '../../../../hooks/use_discard_confirm';
 import type { DataSourceActorRef } from '../state_management/data_source_state_machine';
 import { useDataSourceSelector } from '../state_management/data_source_state_machine';
 import { AssetImage } from '../../../asset_image';
-import { PreviewTable } from '../../preview_table';
+import { PreviewTable } from '../../shared/preview_table';
 import { DATA_SOURCES_I18N } from './translations';
 
 interface DataSourceCardProps {