correctly use longMessage as function when need

elastic · Sep 18, 2024 · 824f2f9 · 824f2f9
1 parent 70b7d26
commit 824f2f9
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 34 deletions.
diff --git a/x-pack/plugins/lens/public/app_plugin/get_application_user_messages.test.tsx b/x-pack/plugins/lens/public/app_plugin/get_application_user_messages.test.tsx
@@ -164,14 +164,13 @@ describe('application-level user messages', () => {
         visualization: {} as Visualization,
         visualizationState: { activeId: 'foo', state: {} },
       };
+      const firstMessage = getApplicationUserMessages({ ...props, ...propsOverrides }).at(0);
       const rtlRender = render(
         <I18nProvider>
-          {
-            getApplicationUserMessages({
-              ...props,
-              ...propsOverrides,
-            })[0].longMessage as React.ReactNode
-          }
+          {firstMessage &&
+            (typeof firstMessage.longMessage === 'function'
+              ? firstMessage.longMessage()
+              : firstMessage.longMessage)}
         </I18nProvider>
       );
       return rtlRender;

diff --git a/x-pack/plugins/lens/public/datasources/form_based/form_based.test.ts b/x-pack/plugins/lens/public/datasources/form_based/form_based.test.ts
@@ -3154,9 +3154,7 @@ describe('IndexPattern Data Source', () => {
                 values={
                   Object {
                     "position": 1,
-                    "wrappedMessage": <React.Fragment>
-                      error 1
-                    </React.Fragment>,
+                    "wrappedMessage": "error 1",
                   }
                 }
               />,
@@ -3177,9 +3175,7 @@ describe('IndexPattern Data Source', () => {
                 values={
                   Object {
                     "position": 1,
-                    "wrappedMessage": <React.Fragment>
-                      error 2
-                    </React.Fragment>,
+                    "wrappedMessage": "error 2",
                   }
                 }
               />,

diff --git a/x-pack/plugins/lens/public/datasources/form_based/form_based.tsx b/x-pack/plugins/lens/public/datasources/form_based/form_based.tsx
@@ -995,7 +995,10 @@ function getLayerErrorMessages(
                 defaultMessage="Layer {position} error: {wrappedMessage}"
                 values={{
                   position: index + 1,
-                  wrappedMessage: <>{error.longMessage}</>,
+                  wrappedMessage:
+                    typeof error.longMessage === 'function'
+                      ? error.longMessage()
+                      : error.longMessage,
                 }}
               />
             ),

diff --git a/x-pack/plugins/lens/public/datasources/form_based/utils.test.tsx b/x-pack/plugins/lens/public/datasources/form_based/utils.test.tsx
@@ -121,10 +121,15 @@ describe('indexpattern_datasource utils', () => {
         );
 
         expect(warningMessages).toHaveLength(1);
+        const { longMessage, ...rest } = warningMessages[0];
 
-        expect({ ...warningMessages[0], longMessage: '' }).toMatchSnapshot();
+        expect({ ...rest, longMessage: '' }).toMatchSnapshot();
 
-        render(<I18nProvider>{warningMessages[0].longMessage as React.ReactNode}</I18nProvider>);
+        render(
+          <I18nProvider>
+            {typeof longMessage === 'function' ? longMessage() : longMessage}
+          </I18nProvider>
+        );
 
         expect(screen.getByTestId('lnsPrecisionWarningEnableAccuracy')).toBeInTheDocument();
         await userEvent.click(screen.getByTestId('lnsPrecisionWarningEnableAccuracy'));
@@ -145,11 +150,14 @@ describe('indexpattern_datasource utils', () => {
         );
 
         expect(warningMessages).toHaveLength(1);
+        const { longMessage, ...rest } = warningMessages[0];
 
-        expect({ ...warningMessages[0], longMessage: '' }).toMatchSnapshot();
+        expect({ ...rest, longMessage: '' }).toMatchSnapshot();
 
         const { container } = render(
-          <I18nProvider>{warningMessages[0].longMessage as React.ReactNode}</I18nProvider>
+          <I18nProvider>
+            {typeof longMessage === 'function' ? longMessage() : longMessage}
+          </I18nProvider>
         );
         expect(container).toHaveTextContent(
           'might be an approximation. For more precise results, try increasing the number of Top Values or using Filters instead.'
@@ -178,18 +186,24 @@ describe('indexpattern_datasource utils', () => {
         } as unknown as GenericIndexPatternColumn,
       };
       const setState = jest.fn();
-      const warnings = getPrecisionErrorWarningMessages(
+      const warningMessages = getPrecisionErrorWarningMessages(
         datatableUtilitites,
         state,
         framePublicAPI,
         docLinks,
         setState
       );
 
-      expect(warnings).toHaveLength(1);
-      expect({ ...warnings[0], longMessage: '' }).toMatchSnapshot();
+      expect(warningMessages).toHaveLength(1);
+      const { longMessage, ...rest } = warningMessages[0];
 
-      render(<I18nProvider>{warnings[0].longMessage as React.ReactNode}</I18nProvider>);
+      expect({ ...rest, longMessage: '' }).toMatchSnapshot();
+
+      render(
+        <I18nProvider>
+          {typeof longMessage === 'function' ? longMessage() : longMessage}
+        </I18nProvider>
+      );
       await userEvent.click(screen.getByText('Rank by rarity'));
       const stateSetter = setState.mock.calls[0][0];
       const newState = stateSetter(state);

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
@@ -518,6 +518,7 @@ export function LayerPanel(props: LayerPanelProps) {
                             props?.getUserMessages?.('dimensionButton', {
                               dimensionId: columnId,
                             }) ?? [];
+                          const firstMessage = messages.at(0);
 
                           return (
                             <DraggableDimensionButton
@@ -567,11 +568,18 @@ export function LayerPanel(props: LayerPanelProps) {
                                   props.onRemoveDimension({ columnId: id, layerId });
                                   removeButtonRef(id);
                                 }}
-                                message={{
-                                  severity: messages[0]?.severity,
-                                  content: (messages[0]?.shortMessage ||
-                                    messages[0]?.longMessage) as React.ReactNode,
-                                }}
+                                message={
+                                  firstMessage
+                                    ? {
+                                        severity: firstMessage.severity,
+                                        content:
+                                          firstMessage.shortMessage ||
+                                          (typeof firstMessage.longMessage === 'function'
+                                            ? firstMessage.longMessage()
+                                            : firstMessage.longMessage),
+                                      }
+                                    : undefined
+                                }
                               >
                                 {layerDatasource ? (
                                   <>

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.tsx
@@ -129,7 +129,9 @@ export function EditorFrame(props: EditorFrameProps) {
           bannerMessages.length ? (
             <ErrorBoundary onError={onError}>
               <BannerWrapper
-                nodes={bannerMessages.map(({ longMessage }) => longMessage as React.ReactNode)}
+                nodes={bannerMessages.map(({ longMessage }) =>
+                  typeof longMessage === 'function' ? longMessage() : longMessage
+                )}
               />
             </ErrorBoundary>
           ) : undefined

diff --git a/...lugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_errors.tsx b/...lugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_errors.tsx
@@ -56,7 +56,12 @@ export function WorkspaceErrors(props: Props) {
               {activeError.longMessage ? (
                 <>
                   <EuiSpacer />
-                  <EuiText size="s"> {activeError.longMessage as React.ReactNode}</EuiText>
+                  <EuiText size="s">
+                    {' '}
+                    {typeof activeError.longMessage === 'function'
+                      ? activeError.longMessage()
+                      : activeError.longMessage}
+                  </EuiText>
                 </>
               ) : null}
             </div>

diff --git a/x-pack/plugins/lens/public/embeddable/embeddable.tsx b/x-pack/plugins/lens/public/embeddable/embeddable.tsx
@@ -248,7 +248,7 @@ export interface ViewUnderlyingDataArgs {
 }
 
 function VisualizationErrorPanel({ errors, canEdit }: { errors: UserMessage[]; canEdit: boolean }) {
-  const showMore = errors.length > 1;
+  const firstError = errors.at(0);
   const canFixInLens = canEdit && errors.some(({ fixableInEditor }) => fixableInEditor);
   return (
     <div className="lnsEmbeddedError">
@@ -258,10 +258,14 @@ function VisualizationErrorPanel({ errors, canEdit }: { errors: UserMessage[]; c
         data-test-subj="embeddable-lens-failure"
         body={
           <>
-            {errors.length ? (
+            {firstError ? (
               <>
-                <p>{errors[0].longMessage as React.ReactNode}</p>
-                {showMore && !canFixInLens ? (
+                <p>
+                  {typeof firstError.longMessage === 'function'
+                    ? firstError.longMessage()
+                    : firstError.longMessage}
+                </p>
+                {errors.length > 1 && !canFixInLens ? (
                   <p>
                     <FormattedMessage
                       id="xpack.lens.embeddable.moreErrors"

diff --git a/x-pack/plugins/lens/public/embeddable/embeddable_info_badges.tsx b/x-pack/plugins/lens/public/embeddable/embeddable_info_badges.tsx
@@ -99,7 +99,9 @@ export const EmbeddableFeatureBadge = ({ messages }: { messages: UserMessage[] }
                 </EuiTitle>
                 <ul className="lnsEmbeddablePanelFeatureList">
                   {messageGroup.map(({ longMessage }, i) => (
-                    <Fragment key={`${uniqueId}-${i}`}>{longMessage as React.ReactNode}</Fragment>
+                    <Fragment key={`${uniqueId}-${i}`}>
+                      {typeof longMessage === 'function' ? longMessage() : longMessage}
+                    </Fragment>
                   ))}
                 </ul>
               </aside>

diff --git a/x-pack/plugins/lens/public/types.ts b/x-pack/plugins/lens/public/types.ts
@@ -302,7 +302,7 @@ export interface UserMessage {
   severity: 'error' | 'warning' | 'info';
   hidePopoverIcon?: boolean;
   shortMessage: string;
-  longMessage: string | React.ReactNode | ((closePopover: () => void) => React.ReactNode);
+  longMessage: string | React.ReactNode | ((closePopover?: () => void) => React.ReactNode);
   fixableInEditor: boolean;
   displayLocations: UserMessageDisplayLocation[];
 }