Fix custom highlighting of field values in the message details of the message table widget. 6.1

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"]

graylog2-web-interface/src/views/components/Value.tsx

@@ -22,6 +22,7 @@
 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 @@
   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 @@
 
 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>
 );
 

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]} />
       );
     });