From 3d9610e1a73c620be53c09a765523de1a0917fbc Mon Sep 17 00:00:00 2001
From: Linus Pahl <linus.pahl@graylog.com>
Date: Fri, 8 Nov 2024 10:05:27 +0100
Subject: [PATCH 1/2] Fix custom highlighting of field values for message
 details in message table.

---
 .../src/views/components/Value.tsx            | 21 ++++++++++++++++---
 .../components/messagelist/MessageFields.tsx  | 14 ++++---------
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/graylog2-web-interface/src/views/components/Value.tsx b/graylog2-web-interface/src/views/components/Value.tsx
index 0e1ac3e12b73..74e85cf7094e 100644
--- a/graylog2-web-interface/src/views/components/Value.tsx
+++ b/graylog2-web-interface/src/views/components/Value.tsx
@@ -22,6 +22,7 @@ import FieldType from 'views/logic/fieldtypes/FieldType';
 import type { ValueRenderer, ValueRendererProps } from 'views/components/messagelist/decoration/ValueRenderer';
 import useActiveQueryId from 'views/hooks/useActiveQueryId';
 import type FieldUnit from 'views/logic/aggregationbuilder/FieldUnit';
+import CustomHighlighting from 'views/components/highlighting/CustomHighlighting';
 
 import ValueActions from './actions/ValueActions';
 import TypeSpecificValue from './TypeSpecificValue';
@@ -39,13 +40,27 @@ const ValueActionTitle = styled.span`
   white-space: nowrap;
 `;
 
+type TypeSpecificValueWithHighlightProps = {
+  field: string,
+  value?: any,
+  type?: FieldType
+  render?: React.ComponentType<ValueRendererProps>,
+  unit?: FieldUnit,
+}
+const TypeSpecificValueWithHighlight = ({ field, value, type, render, unit }: TypeSpecificValueWithHighlightProps) => (
+  <CustomHighlighting field={field}
+                      value={value}>
+    <TypeSpecificValue field={field} value={value} type={type} render={render} unit={unit} />
+  </CustomHighlighting>
+);
+
 const defaultRenderer: ValueRenderer = ({ value }: ValueRendererProps) => value;
 
 const InteractiveValue = ({ field, value, render, type, unit }: Props) => {
   const queryId = useActiveQueryId();
   const RenderComponent: ValueRenderer = useMemo(() => render ?? ((props: ValueRendererProps) => props.value), [render]);
   const Component = useCallback(({ value: componentValue }) => <RenderComponent field={field} value={componentValue} />, [RenderComponent, field]);
-  const element = <TypeSpecificValue field={field} value={value} type={type} render={Component} unit={unit} />;
+  const element = <TypeSpecificValueWithHighlight field={field} value={value} type={type} render={Component} unit={unit} />;
 
   return (
     <ValueActions element={element} field={field} queryId={queryId} type={type} value={value}>
@@ -63,9 +78,9 @@ InteractiveValue.defaultProps = {
 
 const Value = ({ field, value, render = defaultRenderer, type = FieldType.Unknown, unit }: Props) => (
   <InteractiveContext.Consumer>
-    {(interactive) => ((interactive)
+    {(interactive) => (interactive
       ? <InteractiveValue field={field} value={value} render={render} type={type} unit={unit} />
-      : <span><TypeSpecificValue field={field} value={value} render={render} type={type} unit={unit} /></span>)}
+      : <span><TypeSpecificValueWithHighlight field={field} value={value} render={render} type={type} unit={unit} /></span>)}
   </InteractiveContext.Consumer>
 );
 
diff --git a/graylog2-web-interface/src/views/components/messagelist/MessageFields.tsx b/graylog2-web-interface/src/views/components/messagelist/MessageFields.tsx
index 561b92dda95f..0fb8a5e8516c 100644
--- a/graylog2-web-interface/src/views/components/messagelist/MessageFields.tsx
+++ b/graylog2-web-interface/src/views/components/messagelist/MessageFields.tsx
@@ -25,8 +25,6 @@ import FieldTypeMapping from 'views/logic/fieldtypes/FieldTypeMapping';
 
 import type { Message } from './Types';
 
-import CustomHighlighting from '../highlighting/CustomHighlighting';
-
 type Props = {
   message: Message,
   fields: FieldTypeMappingsList,
@@ -50,14 +48,10 @@ const MessageFields = ({ message, fields }: Props) => {
       const { type } = fields.find((t) => t.name === key, undefined, FieldTypeMapping.create(key, FieldType.Unknown));
 
       return (
-        <CustomHighlighting key={key}
-                            field={key}
-                            value={formattedFields[key]}>
-          <MessageField fieldName={key}
-                        fieldType={type}
-                        message={message}
-                        value={formattedFields[key]} />
-        </CustomHighlighting>
+        <MessageField fieldName={key}
+                      fieldType={type}
+                      message={message}
+                      value={formattedFields[key]} />
       );
     });
 

From 3b60ec274414656440e2906fcf0d9bb9171eaa71 Mon Sep 17 00:00:00 2001
From: Linus Pahl <linus.pahl@graylog.com>
Date: Fri, 8 Nov 2024 14:52:52 +0100
Subject: [PATCH 2/2] Adding changelog

---
 changelog/unreleased/issue-18388.toml | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 changelog/unreleased/issue-18388.toml

diff --git a/changelog/unreleased/issue-18388.toml b/changelog/unreleased/issue-18388.toml
new file mode 100644
index 000000000000..607b6428312b
--- /dev/null
+++ b/changelog/unreleased/issue-18388.toml
@@ -0,0 +1,5 @@
+type = "fixed"
+message = "Fix custom highlighting of field values in the message details of the message table widget"
+
+issues = ["18388"]
+pulls = ["20921"]