[Papercut] Fix KQL parsing error text styling (elastic#199985)

## Summary This PR fixes styling for `KQL parsing error` text on various elements on `Maps` and `Dashboard` to have the invalid syntax and ASCII arrow on new line. Closes: elastic#49377 ![dashboard1](https://github.com/user-attachments/assets/c607c0e0-24d8-4bd9-8106-d5c94fe1197d) ![dashboard2](https://github.com/user-attachments/assets/cb4b58af-6d8b-4609-9a4e-b948b1ec9340) ![dashboard3](https://github.com/user-attachments/assets/5a6c883e-76dc-4f9d-8db6-94c3e0bc359a) ![maps](https://github.com/user-attachments/assets/83d897a4-6856-4c47-8b14-18a1fff1de9d) --------- Co-authored-by: kibanamachine <[email protected]>
kapral18 · Nov 18, 2024 · a8fc787 · a8fc787
1 parent 742016a
commit a8fc787
Show file tree

Hide file tree

Showing 12 changed files with 74 additions and 12 deletions.
diff --git a/packages/kbn-react-hooks/README.md b/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>
+  );
+}
+```
diff --git a/packages/kbn-react-hooks/index.ts b/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';
diff --git a/packages/kbn-react-hooks/src/use_error_text_style/index.ts b/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';
diff --git a/packages/kbn-react-hooks/src/use_error_text_style/use_error_text_style.ts b/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;
+};
diff --git a/src/plugins/controls/public/control_group/components/control_error.tsx b/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>

diff --git a/src/plugins/controls/tsconfig.json b/src/plugins/controls/tsconfig.json
@@ -39,6 +39,7 @@
     "@kbn/presentation-panel-plugin",
     "@kbn/shared-ux-utility",
     "@kbn/std",
+    "@kbn/react-hooks",
   ],
   "exclude": ["target/**/*"]
 }
diff --git a/src/plugins/presentation_panel/public/panel_component/presentation_panel_error.tsx b/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

diff --git a/src/plugins/presentation_panel/tsconfig.json b/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/**/*"]
 }
diff --git a/src/plugins/visualizations/public/embeddable/visualize_embeddable.tsx b/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>
                   }
                 />
               )}

diff --git a/src/plugins/visualizations/tsconfig.json b/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/**/*"]
 }
diff --git a/...ected_components/right_side_controls/layer_control/layer_toc/toc_entry/legend_details.tsx b/...ected_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" />

diff --git a/x-pack/plugins/maps/tsconfig.json b/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/**/*",