Bugfix: updates highlighter passed style prop from string to object (#23112)

packages/grafana-ui/src/components/Logs/LogRowMessage.tsx

@@ -52,10 +52,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
           .setAlpha(0.7)
           .setAlpha(0.7)
           .toRgbString()};
           .toRgbString()};
     `,
     `,
-    whiteSpacePreWrap: css`
-      label: whiteSpacePreWrap;
-      white-space: pre-wrap;
-    `,
     horizontalScroll: css`
     horizontalScroll: css`
       label: verticalScroll;
       label: verticalScroll;
       white-space: nowrap;
       white-space: nowrap;
@@ -93,6 +89,11 @@ class UnThemedLogRowMessage extends PureComponent<Props> {
       ? cx([style.logsRowMatchHighLight, style.logsRowMatchHighLightPreview])
       ? cx([style.logsRowMatchHighLight, style.logsRowMatchHighLightPreview])
       : cx([style.logsRowMatchHighLight]);
       : cx([style.logsRowMatchHighLight]);
     const styles = getStyles(theme);
     const styles = getStyles(theme);
+    const whiteSpacePreWrap = {
+      label: 'white-space-pre-wrap',
+      whiteSpace: 'pre-wrap',
+    };
+
     return (
     return (
       <td className={style.logsRowMessage}>
       <td className={style.logsRowMessage}>
         <div className={cx(styles.positionRelative, { [styles.horizontalScroll]: !wrapLogMessage })}>
         <div className={cx(styles.positionRelative, { [styles.horizontalScroll]: !wrapLogMessage })}>
@@ -113,7 +114,7 @@ class UnThemedLogRowMessage extends PureComponent<Props> {
           <span className={cx(styles.positionRelative, { [styles.rowWithContext]: showContext })}>
           <span className={cx(styles.positionRelative, { [styles.rowWithContext]: showContext })}>
             {needsHighlighter ? (
             {needsHighlighter ? (
               <Highlighter
               <Highlighter
-                style={styles.whiteSpacePreWrap}
+                style={whiteSpacePreWrap}
                 textToHighlight={entry}
                 textToHighlight={entry}
                 searchWords={highlights}
                 searchWords={highlights}
                 findChunks={findHighlightChunksInText}
                 findChunks={findHighlightChunksInText}