[8.x] [Papercut] Fix KQL parsing error text styling (#199985) (#200543)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Papercut] Fix KQL parsing error text styling
(#199985)](https://github.com/elastic/kibana/pull/199985)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Krzysztof
Kowalczyk","email":"krzysztof.kowalczyk@elastic.co"},"sourceCommit":{"committedDate":"2024-11-18T11:37:49Z","message":"[Papercut]
Fix KQL parsing error text styling (#199985)\n\n## Summary\r\n\r\nThis
PR fixes styling for `KQL parsing error` text on various elements\r\non
`Maps` and `Dashboard` to have the invalid syntax and ASCII arrow
on\r\nnew line.\r\n\r\nCloses:
#49377\r\n\r\n\r\n![dashboard1](83d897a4-6856-4c47-8b14-18a1fff1de9d)\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"a8fc787cdbda54cd54e58a37e3c1163af62864dd","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","Feature:Dashboard","Team:Presentation","loe:small","Team:Visualizations","release_note:skip","impact:low","v9.0.0","backport:prev-minor","Feature:Maps"],"title":"[Papercut]
Fix KQL parsing error text
styling","number":199985,"url":"https://github.com/elastic/kibana/pull/199985","mergeCommit":{"message":"[Papercut]
Fix KQL parsing error text styling (#199985)\n\n## Summary\r\n\r\nThis
PR fixes styling for `KQL parsing error` text on various elements\r\non
`Maps` and `Dashboard` to have the invalid syntax and ASCII arrow
on\r\nnew line.\r\n\r\nCloses:
#49377\r\n\r\n\r\n![dashboard1](83d897a4-6856-4c47-8b14-18a1fff1de9d)\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"a8fc787cdbda54cd54e58a37e3c1163af62864dd"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/199985","number":199985,"mergeCommit":{"message":"[Papercut]
Fix KQL parsing error text styling (#199985)\n\n## Summary\r\n\r\nThis
PR fixes styling for `KQL parsing error` text on various elements\r\non
`Maps` and `Dashboard` to have the invalid syntax and ASCII arrow
on\r\nnew line.\r\n\r\nCloses:
#49377\r\n\r\n\r\n![dashboard1](83d897a4-6856-4c47-8b14-18a1fff1de9d)\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"a8fc787cdbda54cd54e58a37e3c1163af62864dd"}}]}]
BACKPORT-->

Co-authored-by: Krzysztof Kowalczyk <krzysztof.kowalczyk@elastic.co>

packages/kbn-react-hooks/README.md

@@ -4,7 +4,7 @@ A utility package, `@kbn/react-hooks`, provides custom react hooks for simple ab
 
 ## Custom Hooks
 
-### [useBoolean](./src/useBoolean)
+### [useBoolean](./src/use_boolean/use_boolean.ts)
 
 Simplify handling boolean value with predefined handlers.
 
@@ -25,4 +25,20 @@ function App() {
     </div>
   );
 }
-```
+```
+
+### [useErrorTextStyle](./src/use_error_text_style/use_error_text_style.ts)
+
+Returns styles used for styling error text.
+
+```tsx
+function App() {
+  const errorTextStyle = useErrorTextStyle();
+
+  return (
+    <div>
+      <EuiText css={errorTextStyle}>Error message</EuiText>
+    </div>
+  );
+}
+```

packages/kbn-react-hooks/index.ts

@@ -8,4 +8,5 @@
  */
 
 export { useBoolean } from './src/use_boolean';
+export { useErrorTextStyle } from './src/use_error_text_style';
 export type { UseBooleanHandlers, UseBooleanResult } from './src/use_boolean';

packages/kbn-react-hooks/src/use_error_text_style/index.ts

@@ -0,0 +1,10 @@
+/*
+ * 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".
+ */
+
+export * from './use_error_text_style';

packages/kbn-react-hooks/src/use_error_text_style/use_error_text_style.ts

@@ -0,0 +1,21 @@
+/*
+ * 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 { css } from '@emotion/react';
+import { useEuiTheme } from '@elastic/eui';
+
+export const useErrorTextStyle = () => {
+  const { euiTheme } = useEuiTheme();
+  const errorTextStyle = css`
+    font-family: ${euiTheme.font.familyCode};
+    white-space: break-spaces;
+  `;
+
+  return errorTextStyle;
+};

src/plugins/controls/public/control_group/components/control_error.tsx

@@ -12,12 +12,14 @@ import React, { useState } from 'react';
 import { EuiButtonEmpty, EuiPopover } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { Markdown } from '@kbn/shared-ux-markdown';
+import { useErrorTextStyle } from '@kbn/react-hooks';
 
 interface ControlErrorProps {
   error: Error | string;
 }
 
 export const ControlError = ({ error }: ControlErrorProps) => {
+  const errorTextStyle = useErrorTextStyle();
   const [isPopoverOpen, setPopoverOpen] = useState(false);
   const errorMessage = error instanceof Error ? error.message : error;
 
@@ -47,7 +49,7 @@ export const ControlError = ({ error }: ControlErrorProps) => {
       className="controlPanel errorEmbeddableCompact__popover"
       closePopover={() => setPopoverOpen(false)}
     >
-      <Markdown data-test-subj="errorMessageMarkdown" readOnly>
+      <Markdown data-test-subj="errorMessageMarkdown" readOnly css={errorTextStyle}>
         {errorMessage}
       </Markdown>
     </EuiPopover>

src/plugins/controls/tsconfig.json

@@ -39,6 +39,7 @@
     "@kbn/presentation-panel-plugin",
     "@kbn/shared-ux-utility",
     "@kbn/std",
+    "@kbn/react-hooks",
   ],
   "exclude": ["target/**/*"]
 }

src/plugins/presentation_panel/public/panel_component/presentation_panel_error.tsx

@@ -16,6 +16,7 @@ import { renderSearchError } from '@kbn/search-errors';
 import { Markdown } from '@kbn/shared-ux-markdown';
 import { Subscription } from 'rxjs';
 import { i18n } from '@kbn/i18n';
+import { useErrorTextStyle } from '@kbn/react-hooks';
 import { editPanelAction } from '../panel_actions/panel_actions';
 import { getErrorCallToAction } from './presentation_panel_strings';
 import { DefaultPresentationPanelApi } from './types';
@@ -27,6 +28,8 @@ export const PresentationPanelError = ({
   error: ErrorLike;
   api?: DefaultPresentationPanelApi;
 }) => {
+  const errorTextStyle = useErrorTextStyle();
+
   const [isEditable, setIsEditable] = useState(false);
   const handleErrorClick = useMemo(
     () => (isEditable ? () => editPanelAction?.execute({ embeddable: api }) : undefined),
@@ -82,7 +85,7 @@ export const PresentationPanelError = ({
     <EuiEmptyPrompt
       body={
         searchErrorDisplay?.body ?? (
-          <EuiText size="s">
+          <EuiText size="s" css={errorTextStyle}>
             <Markdown data-test-subj="errorMessageMarkdown" readOnly>
               {error.message?.length
                 ? error.message

src/plugins/presentation_panel/tsconfig.json

@@ -28,7 +28,8 @@
     "@kbn/data-views-plugin",
     "@kbn/panel-loader",
     "@kbn/search-errors",
-    "@kbn/shared-ux-markdown"
+    "@kbn/shared-ux-markdown",
+    "@kbn/react-hooks"
   ],
   "exclude": ["target/**/*"]
 }

src/plugins/visualizations/public/embeddable/visualize_embeddable.tsx

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { EuiEmptyPrompt, EuiFlexGroup, EuiLoadingChart } from '@elastic/eui';
+import { EuiEmptyPrompt, EuiFlexGroup, EuiLoadingChart, EuiText } from '@elastic/eui';
 import { isChartSizeEvent } from '@kbn/chart-expressions-common';
 import { APPLY_FILTER_TRIGGER } from '@kbn/data-plugin/public';
 import type { DataView } from '@kbn/data-views-plugin/public';
@@ -38,6 +38,7 @@ import { apiPublishesSearchSession } from '@kbn/presentation-publishing/interfac
 import { get, isEmpty, isEqual, isNil, omitBy } from 'lodash';
 import React, { useEffect, useRef } from 'react';
 import { BehaviorSubject, switchMap } from 'rxjs';
+import { useErrorTextStyle } from '@kbn/react-hooks';
 import { VISUALIZE_APP_NAME, VISUALIZE_EMBEDDABLE_TYPE } from '../../common/constants';
 import { VIS_EVENT_TO_TRIGGER } from './events';
 import { getInspector, getUiActions, getUsageCollection } from '../services';
@@ -454,6 +455,7 @@ export const getVisualizeEmbeddableFactory: (deps: {
         const hasRendered = useStateFromPublishingSubject(hasRendered$);
         const domNode = useRef<HTMLDivElement>(null);
         const { error, isLoading } = useExpressionRenderer(domNode, expressionParams);
+        const errorTextStyle = useErrorTextStyle();
 
         useEffect(() => {
           return () => {
@@ -495,9 +497,9 @@ export const getVisualizeEmbeddableFactory: (deps: {
                     </h2>
                   }
                   body={
-                    <p>
+                    <EuiText css={errorTextStyle}>
                       {error.name}: {error.message}
-                    </p>
+                    </EuiText>
                   }
                 />
               )}

src/plugins/visualizations/tsconfig.json

@@ -72,7 +72,8 @@
     "@kbn/presentation-containers",
     "@kbn/search-response-warnings",
     "@kbn/embeddable-enhanced-plugin",
-    "@kbn/content-management-utils"
+    "@kbn/content-management-utils",
+    "@kbn/react-hooks"
   ],
   "exclude": ["target/**/*"]
 }

x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/legend_details.tsx

@@ -8,6 +8,7 @@
 import React from 'react';
 import { Adapters } from '@kbn/inspector-plugin/common/adapters';
 import { EuiCallOut, EuiSpacer } from '@elastic/eui';
+import { useErrorTextStyle } from '@kbn/react-hooks';
 import type { ILayer } from '../../../../../classes/layers/layer';
 
 interface Props {
@@ -16,13 +17,15 @@ interface Props {
 }
 
 export function LegendDetails({ inspectorAdapters, layer }: Props) {
+  const errorTextStyle = useErrorTextStyle();
+
   const errors = layer.getErrors(inspectorAdapters);
   if (errors.length) {
     return (
       <>
         {errors.map(({ title, body }, index) => (
           <div key={index}>
-            <EuiCallOut color="danger" size="s" title={title}>
+            <EuiCallOut color="danger" size="s" title={title} css={errorTextStyle}>
               {body}
             </EuiCallOut>
             <EuiSpacer size="m" />
@@ -37,7 +40,7 @@ export function LegendDetails({ inspectorAdapters, layer }: Props) {
     <>
       {warnings.map(({ title, body }, index) => (
         <div key={index}>
-          <EuiCallOut color="warning" size="s">
+          <EuiCallOut color="warning" size="s" css={errorTextStyle}>
             {body}
           </EuiCallOut>
           <EuiSpacer size="m" />

x-pack/plugins/maps/tsconfig.json

@@ -90,7 +90,8 @@
     "@kbn/react-kibana-context-render",
     "@kbn/embeddable-enhanced-plugin",
     "@kbn/presentation-containers",
-    "@kbn/field-utils"
+    "@kbn/field-utils",
+    "@kbn/react-hooks"
   ],
   "exclude": [
     "target/**/*",