[UnifiedDocViewer] Filter on field name and value in expanded documen…

…t view (elastic#192299)

- Closes elastic#163275

## Summary

With this PR users can search by field value (raw and formatted) in
DocViewer flyout.

<img width="569" alt="Screenshot 2024-09-06 at 20 49 57"
src="https://github.com/user-attachments/assets/27e89017-4b8f-437b-9e00-b9a24eb88184">
<img width="544" alt="Screenshot 2024-09-06 at 20 50 09"
src="https://github.com/user-attachments/assets/5086af87-df97-4fdb-84c3-f30c547678e0">
<img width="536" alt="Screenshot 2024-09-12 at 18 45 11"
src="https://github.com/user-attachments/assets/abdfe31d-85a5-41de-bf05-88ecf0ac2b18">



### 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
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

---------

Co-authored-by: kibanamachine <[email protected]>

packages/kbn-unified-data-table/src/types.ts

@@ -12,7 +12,7 @@ import type { EuiDataGridCellValueElementProps, EuiDataGridColumn } from '@elast
 import type { DataTableRecord } from '@kbn/discover-utils/src/types';
 import type { DataView } from '@kbn/data-views-plugin/common';
 import type { FieldFormatsStart } from '@kbn/field-formats-plugin/public';
-export type { DataTableColumnsMeta } from '@kbn/discover-utils/src/types';
+export type { DataTableColumnsMeta } from '@kbn/discover-utils/types';
 export type { DataGridDensity } from './constants';
 
 /**

src/plugins/unified_doc_viewer/public/components/doc_viewer_table/field_row.ts

@@ -0,0 +1,129 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import type { DataView, DataViewField } from '@kbn/data-views-plugin/common';
+import type { DataTableColumnsMeta, DataTableRecord } from '@kbn/discover-utils/types';
+import {
+  formatFieldValue,
+  getIgnoredReason,
+  IgnoredReason,
+  isNestedFieldParent,
+} from '@kbn/discover-utils';
+import type { FieldFormatsStart } from '@kbn/field-formats-plugin/public';
+import { getFieldIconType, getTextBasedColumnIconType } from '@kbn/field-utils';
+
+export class FieldRow {
+  readonly name: string;
+  readonly flattenedValue: unknown;
+  readonly dataViewField: DataViewField | undefined;
+  readonly isPinned: boolean;
+  readonly columnsMeta: DataTableColumnsMeta | undefined;
+
+  readonly #hit: DataTableRecord;
+  readonly #dataView: DataView;
+  readonly #fieldFormats: FieldFormatsStart;
+
+  #isFormattedAsHtml: boolean;
+  #isFormattedAsText: boolean;
+
+  #formattedAsHtml: string | undefined;
+  #formattedAsText: string | undefined;
+
+  #fieldType: string | undefined;
+
+  constructor({
+    name,
+    flattenedValue,
+    hit,
+    dataView,
+    fieldFormats,
+    isPinned,
+    columnsMeta,
+  }: {
+    name: string;
+    flattenedValue: unknown;
+    hit: DataTableRecord;
+    dataView: DataView;
+    fieldFormats: FieldFormatsStart;
+    isPinned: boolean;
+    columnsMeta: DataTableColumnsMeta | undefined;
+  }) {
+    this.#hit = hit;
+    this.#dataView = dataView;
+    this.#fieldFormats = fieldFormats;
+    this.#isFormattedAsHtml = false;
+    this.#isFormattedAsText = false;
+
+    this.name = name;
+    this.flattenedValue = flattenedValue;
+    this.dataViewField = dataView.getFieldByName(name);
+    this.isPinned = isPinned;
+    this.columnsMeta = columnsMeta;
+  }
+
+  // format as html in a lazy way
+  public get formattedAsHtml(): string | undefined {
+    if (!this.#isFormattedAsHtml) {
+      this.#formattedAsHtml = formatFieldValue(
+        this.flattenedValue,
+        this.#hit.raw,
+        this.#fieldFormats,
+        this.#dataView,
+        this.dataViewField,
+        'html'
+      );
+      this.#isFormattedAsHtml = true;
+    }
+
+    return this.#formattedAsHtml;
+  }
+
+  // format as text in a lazy way
+  public get formattedAsText(): string | undefined {
+    if (!this.#isFormattedAsText) {
+      this.#formattedAsText = String(
+        formatFieldValue(
+          this.flattenedValue,
+          this.#hit.raw,
+          this.#fieldFormats,
+          this.#dataView,
+          this.dataViewField,
+          'text'
+        )
+      );
+      this.#isFormattedAsText = true;
+    }
+
+    return this.#formattedAsText;
+  }
+
+  public get fieldType(): string | undefined {
+    if (!this.#fieldType) {
+      const columnMeta = this.columnsMeta?.[this.name];
+      const columnIconType = getTextBasedColumnIconType(columnMeta);
+      const fieldType = columnIconType
+        ? columnIconType // for text-based results types come separately
+        : isNestedFieldParent(this.name, this.#dataView)
+        ? 'nested'
+        : this.dataViewField
+        ? getFieldIconType(this.dataViewField)
+        : undefined;
+
+      this.#fieldType = fieldType;
+    }
+
+    return this.#fieldType;
+  }
+
+  public get ignoredReason(): IgnoredReason | undefined {
+    return this.dataViewField
+      ? getIgnoredReason(this.dataViewField, this.#hit.raw._ignored)
+      : undefined;
+  }
+}