[Streams] Show field data types in Processing table and step editor (#241825)

Closes #240954 

## Summary

Added field type icons throughout the Streams Processing UI to improve
field identification and user experience. Icons are sourced from
DataView field types (ES types) for reliability and are cached across
components using React Query.

### Before

<img width="1166" height="497" alt="image"
src="https://github.com/user-attachments/assets/461a3ac1-b0ec-479c-be29-1653ff3a1a68"
/>

### After

<img width="1782" height="478" alt="image"
src="https://github.com/user-attachments/assets/694baed0-0ab9-459b-bc6c-b796cd764d3b"
/>

## Changes

- Created `useStreamDataViewFieldTypes` hook using `@kbn/react-query`
for shared DataView fetching
- Implemented 5-minute cache TTL to minimize duplicate requests
- Added `QueryClientProvider` to app root for React Query support
- Caching the DataView enabled a single request to be used through all
the components needed

### Testing
- Updated `processor_field_selector.test.tsx` with mocks for new hooks
- Updated `field_selector.test.tsx` with coverage for icon rendering
- Added test cases for icon display with/without type information

```bash
yarn test:jest x-pack/platform/plugins/shared/streams_app/public/components/data_management/shared/field_selector.test.tsx 
yarn test:jest x-pack/platform/plugins/shared/streams_app/public/components/data_management/stream_detail_enrichment/steps/blocks/action/processor_field_selector.test.tsx
```

## Possible improvements

### Graceful loading state for field type icons

Currently, field type icons appear immediately once the DataView data is
fetched, which can cause a slight visual "pop-in" effect.

**Considered approaches:**

**Icon-level loading** (with spinners per column)
- Table renders immediately with loading spinners in each column header
   - Icons replace spinners when DataView loads
   - **Pros**: Content-first, users can interact with data immediately
   - **Cons**: Visual noise from multiple spinners

**Table-level loading** (wait for DataView)
   - Single loading spinner until DataView request completes
   - Table renders complete with icons
- **Pros**: Polished, complete appearance on first render, no layout
shifts
   - **Cons**: Blocks content access during DataView fetch

### Handling flattened nested field types

**Current behavior**: All fields display field type icons. Fields
without explicit DataView mappings show a gray question mark icon
(undefined type). While this provides consistent visual feedback, it's
not semantically accurate for flattened nested fields.

**The challenge**: Some Elasticsearch field types (like `geo_point`) get
flattened into sub-fields in document responses, which lack direct
mappings in the DataView.

**Example**:
- DataView mapping: `source.geo.location` → `geo_point`
- Flattened document fields: `source.geo.location.lat`,
`source.geo.location.lon` → **no mapping** → show as "undefined"

**Current solution**: These fields display with a gray question mark
icon, indicating they lack type information. This is not ideal, as
`.lat` and `.lon` are semantically numeric fields derived from a known
parent type.

Author: diogolima-elastic

x-pack/platform/plugins/shared/streams_app/public/components/data_management/shared/field_selector.test.tsx

@@ -10,6 +10,10 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { FieldSelector } from './field_selector';
 
+jest.mock('@kbn/react-field', () => ({
+  FieldIcon: ({ type }: { type: string }) => <span data-test-subj={`field-icon-${type}`} />,
+}));
+
 describe('FieldSelector', () => {
   const mockSuggestions = [
     { name: '@timestamp' },
@@ -151,4 +155,61 @@ describe('FieldSelector', () => {
       expect(input).toHaveAttribute('disabled');
     });
   });
+
+  describe('Field Type Icons', () => {
+    it('renders field type icons when suggestions include type information', async () => {
+      const suggestionsWithTypes = [
+        { name: '@timestamp', type: 'date' },
+        { name: 'log.level', type: 'keyword' },
+        { name: 'message', type: 'text' },
+      ];
+
+      render(<FieldSelector {...defaultProps} suggestions={suggestionsWithTypes} />);
+
+      const toggleButton = screen.getByTestId('comboBoxToggleListButton');
+      await userEvent.click(toggleButton);
+
+      // Verify that field icons are rendered for fields with types
+      expect(screen.getByTestId('field-icon-date')).toBeInTheDocument();
+      expect(screen.getByTestId('field-icon-keyword')).toBeInTheDocument();
+      expect(screen.getByTestId('field-icon-text')).toBeInTheDocument();
+    });
+
+    it('renders unknown icons for fields without type information', async () => {
+      const suggestionsWithoutTypes = [{ name: '@timestamp' }, { name: 'log.level' }];
+
+      render(<FieldSelector {...defaultProps} suggestions={suggestionsWithoutTypes} />);
+
+      const toggleButton = screen.getByTestId('comboBoxToggleListButton');
+      await userEvent.click(toggleButton);
+
+      // Verify that unknown field icons are rendered for fields without types
+      expect(screen.getAllByTestId('field-icon-unknown')).toHaveLength(2);
+    });
+
+    it('shows icon for selected field when type is available', () => {
+      const suggestionsWithTypes = [
+        { name: 'log.level', type: 'keyword' },
+        { name: 'message', type: 'text' },
+      ];
+
+      render(
+        <FieldSelector {...defaultProps} value="log.level" suggestions={suggestionsWithTypes} />
+      );
+
+      // Icon should be visible in the selected value
+      expect(screen.getByTestId('field-icon-keyword')).toBeInTheDocument();
+    });
+
+    it('shows unknown icon for selected field when type is not available', () => {
+      const suggestionsWithoutTypes = [{ name: 'log.level' }, { name: 'message' }];
+
+      render(
+        <FieldSelector {...defaultProps} value="log.level" suggestions={suggestionsWithoutTypes} />
+      );
+
+      // Unknown icon should be visible in the selected value
+      expect(screen.getByTestId('field-icon-unknown')).toBeInTheDocument();
+    });
+  });
 });

x-pack/platform/plugins/shared/streams_app/public/components/data_management/shared/field_selector.tsx

@@ -9,6 +9,7 @@ import React, { useCallback, useMemo } from 'react';
 import { EuiFormRow, EuiComboBox } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import type { EuiComboBoxOptionOption } from '@elastic/eui';
+import { FieldIcon } from '@kbn/react-field';
 
 export interface FieldSuggestion {
   name: string;
@@ -56,6 +57,9 @@ export const FieldSelector = ({
       suggestions.map((suggestion) => ({
         label: suggestion.name,
         value: suggestion.name,
+        prepend: (
+          <FieldIcon type={suggestion.type || 'unknown'} size="s" className="eui-alignMiddle" />
+        ),
         'data-test-subj': `field-suggestion-${suggestion.name}`,
       })),
     [suggestions]
@@ -65,8 +69,26 @@ export const FieldSelector = ({
     if (!value) return [];
 
     const matchingSuggestion = comboBoxOptions.find((option) => option.value === value);
-    return matchingSuggestion ? [matchingSuggestion] : [{ label: value, value }];
-  }, [value, comboBoxOptions]);
+    if (matchingSuggestion) {
+      return [matchingSuggestion];
+    }
+
+    // For custom values not in suggestions, try to find the type
+    const suggestionWithType = suggestions.find((s) => s.name === value);
+    return [
+      {
+        label: value,
+        value,
+        prepend: (
+          <FieldIcon
+            type={suggestionWithType?.type || 'unknown'}
+            size="s"
+            className="eui-alignMiddle"
+          />
+        ),
+      },
+    ];
+  }, [value, comboBoxOptions, suggestions]);
 
   const handleSelectionChange = useCallback(
     (newSelectedOptions: Array<EuiComboBoxOptionOption<string>>) => {

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

@@ -8,8 +8,8 @@
 import React from 'react';
 import { UnifiedDocViewerFlyout } from '@kbn/unified-doc-viewer-plugin/public';
 import type { DataTableRecord } from '@kbn/discover-utils';
-import useAsync from 'react-use/lib/useAsync';
 import type { DocViewsRegistry } from '@kbn/unified-doc-viewer';
+import type { DataView } from '@kbn/data-views-plugin/common';
 import { useKibana } from '../../../hooks/use_kibana';
 
 export const FLYOUT_WIDTH_KEY = 'streamsEnrichment:flyoutWidth';
@@ -24,22 +24,16 @@ export const PreviewFlyout = ({
   setExpandedDoc,
   docViewsRegistry,
   streamName,
+  streamDataView,
 }: {
   currentDoc?: DataTableRecordWithIndex;
   hits: DataTableRecordWithIndex[];
   setExpandedDoc: (doc?: DataTableRecordWithIndex) => void;
   docViewsRegistry: DocViewsRegistry;
   streamName: string;
+  streamDataView?: DataView;
 }) => {
-  const { core, dependencies } = useKibana();
-  const { data } = dependencies.start;
-
-  const { value: streamDataView } = useAsync(() =>
-    data.dataViews.create({
-      title: streamName,
-      timeFieldName: '@timestamp',
-    })
-  );
+  const { core } = useKibana();
 
   return (
     currentDoc &&

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

@@ -16,12 +16,14 @@ import {
   EuiButtonIcon,
   EuiDataGrid,
   EuiFlexGroup,
+  EuiFlexItem,
   EuiToolTip,
   useEuiTheme,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import type { SampleDocument } from '@kbn/streams-schema';
 import ColumnHeaderTruncateContainer from '@kbn/unified-data-table/src/components/column_header_truncate_container';
+import { FieldIcon } from '@kbn/react-field';
 import React, { useMemo, useState, useCallback, createContext, useContext } from 'react';
 import type {
   IgnoredField,
@@ -93,6 +95,7 @@ export function PreviewTable({
   showLeadingControlColumns = true,
   originalSamples,
   cellActions,
+  dataViewFieldTypes,
 }: {
   documents: SampleDocument[] | DocumentWithIgnoredFields[];
   displayColumns?: string[];
@@ -112,8 +115,27 @@ export function PreviewTable({
   showLeadingControlColumns?: boolean;
   originalSamples?: SampleDocumentWithUIAttributes[];
   cellActions?: EuiDataGridColumnCellAction[];
+  dataViewFieldTypes?: Array<{ name: string; type: string; esType?: string }>;
 }) {
   const { euiTheme: theme } = useEuiTheme();
+
+  // Create a map of field names to their ES types for quick lookup from DataView
+  const fieldTypeMap = useMemo(() => {
+    const typeMap = new Map<string, string>();
+
+    if (dataViewFieldTypes && dataViewFieldTypes.length > 0) {
+      dataViewFieldTypes.forEach((field) => {
+        // Use esType if available (more specific), otherwise use type
+        const fieldType = field.esType || field.type;
+        if (fieldType) {
+          typeMap.set(field.name, fieldType);
+        }
+      });
+    }
+
+    return typeMap;
+  }, [dataViewFieldTypes]);
+
   // Determine canonical column order
   const canonicalColumnOrder = useMemo(() => {
     const cols = new Set<string>();
@@ -255,12 +277,22 @@ export function PreviewTable({
         return [...acc, '.', <wbr key={index} />, part];
       }, [] as React.ReactNode[]);
 
+      // Get the field type from the map
+      const fieldType = fieldTypeMap.get(column);
+
       return {
         id: column,
         display: (
-          <ColumnHeaderTruncateContainer wordBreak="normal">
-            {interleavedColumnParts}
-          </ColumnHeaderTruncateContainer>
+          <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
+            <EuiFlexItem grow={false}>
+              <FieldIcon type={fieldType || 'unknown'} size="s" />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <ColumnHeaderTruncateContainer wordBreak="normal">
+                {interleavedColumnParts}
+              </ColumnHeaderTruncateContainer>
+            </EuiFlexItem>
+          </EuiFlexGroup>
         ),
         actions:
           Boolean(setVisibleColumns) || Boolean(setSorting)
@@ -276,7 +308,14 @@ export function PreviewTable({
         cellActions,
       };
     });
-  }, [cellActions, canonicalColumnOrder, setSorting, setVisibleColumns, columnWidths]);
+  }, [
+    cellActions,
+    canonicalColumnOrder,
+    fieldTypeMap,
+    setSorting,
+    setVisibleColumns,
+    columnWidths,
+  ]);
 
   return (
     <EuiDataGrid

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

@@ -5,10 +5,12 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useEnrichmentFieldSuggestions } from '../../../hooks/use_field_suggestions';
 import type { ConditionEditorProps } from '../shared/condition_editor';
 import { ConditionEditor } from '../shared/condition_editor';
+import { useStreamDataViewFieldTypes } from '../../../hooks/use_stream_data_view_field_types';
+import { useSimulatorSelector } from './state_management/stream_enrichment_state_machine/use_stream_enrichment';
 
 export type ProcessorConditionEditorProps = Omit<
   ConditionEditorProps,
@@ -17,5 +19,20 @@ export type ProcessorConditionEditorProps = Omit<
 
 export function ProcessorConditionEditorWrapper(props: ProcessorConditionEditorProps) {
   const fieldSuggestions = useEnrichmentFieldSuggestions();
-  return <ConditionEditor status="enabled" {...props} fieldSuggestions={fieldSuggestions} />;
+  const streamName = useSimulatorSelector((state) => state.context.streamName);
+
+  // Fetch DataView field types with automatic caching via React Query
+  const { fieldTypeMap } = useStreamDataViewFieldTypes(streamName);
+
+  // Enrich field suggestions with types from DataView
+  const enrichedFieldSuggestions = useMemo(() => {
+    return fieldSuggestions.map((suggestion) => ({
+      ...suggestion,
+      type: fieldTypeMap.get(suggestion.name),
+    }));
+  }, [fieldSuggestions, fieldTypeMap]);
+
+  return (
+    <ConditionEditor status="enabled" {...props} fieldSuggestions={enrichedFieldSuggestions} />
+  );
 }

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

@@ -23,6 +23,7 @@ import type { GrokProcessor } from '@kbn/streamlang';
 import { isActionBlock } from '@kbn/streamlang';
 import { useDocViewerSetup } from '../../../hooks/use_doc_viewer_setup';
 import { useDocumentExpansion } from '../../../hooks/use_document_expansion';
+import { useStreamDataViewFieldTypes } from '../../../hooks/use_stream_data_view_field_types';
 import { getPercentageFormatter } from '../../../util/formatters';
 import type { PreviewDocsFilterOption } from './state_management/simulation_state_machine';
 import {
@@ -173,8 +174,13 @@ const PreviewDocumentsGroupBy = () => {
 };
 
 const OutcomePreviewTable = ({ previewDocuments }: { previewDocuments: FlattenRecord[] }) => {
+  // Original logic - used for column determination
   const detectedFields = useSimulatorSelector((state) => state.context.simulation?.detected_fields);
   const streamName = useSimulatorSelector((state) => state.context.streamName);
+
+  // Fetch DataView field types with automatic caching via React Query
+  const { fieldTypes: dataViewFieldTypes, dataView: streamDataView } =
+    useStreamDataViewFieldTypes(streamName);
   const previewDocsFilter = useSimulatorSelector((state) => state.context.previewDocsFilter);
   const previewColumnsSorting = useSimulatorSelector(
     (state) => state.context.previewColumnsSorting
@@ -392,6 +398,7 @@ const OutcomePreviewTable = ({ previewDocuments }: { previewDocuments: FlattenRe
           setSorting={setPreviewColumnsSorting}
           columnOrderHint={previewColumnsOrder}
           renderCellValue={renderCellValue}
+          dataViewFieldTypes={dataViewFieldTypes}
         />
       </RowSelectionContext.Provider>
       <DocViewerContext.Provider value={docViewerContext}>
@@ -401,6 +408,7 @@ const OutcomePreviewTable = ({ previewDocuments }: { previewDocuments: FlattenRe
           setExpandedDoc={setExpandedDoc}
           docViewsRegistry={docViewsRegistry}
           streamName={streamName}
+          streamDataView={streamDataView}
         />
       </DocViewerContext.Provider>
     </>